ui/src/main/webapp/resources/css/ngDialog-theme-default.css

   1 /*
   2  * Copyright (c) 2019 AT&T Intellectual Property. All rights reserved.
   3  *
   4  * Licensed under the Apache License, Version 2.0 (the "License");
   5  * you may not use this file except in compliance with the License.
   6  * You may obtain a copy of the License at
   7  *
   8  *        http://www.apache.org/licenses/LICENSE-2.0
   9  *
  10  * Unless required by applicable law or agreed to in writing, software
  11  * distributed under the License is distributed on an "AS IS" BASIS,
  12  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13  * See the License for the specific language governing permissions and
  14  * limitations under the License.
  15  */
  16 @-webkit-keyframes ngdialog-flyin {
  17   0% {
  18     opacity: 0;
  19     -webkit-transform: translateY(-40px);
  20     transform: translateY(-40px);
  21   }
  22
  23   100% {
  24     opacity: 1;
  25     -webkit-transform: translateY(0);
  26     transform: translateY(0);
  27   }
  28 }
  29
  30 @keyframes ngdialog-flyin {
  31   0% {
  32     opacity: 0;
  33     -webkit-transform: translateY(-40px);
  34     -ms-transform: translateY(-40px);
  35     transform: translateY(-40px);
  36   }
  37
  38   100% {
  39     opacity: 1;
  40     -webkit-transform: translateY(0);
  41     -ms-transform: translateY(0);
  42     transform: translateY(0);
  43   }
  44 }
  45
  46 @-webkit-keyframes ngdialog-flyout {
  47   0% {
  48     opacity: 1;
  49     -webkit-transform: translateY(0);
  50     transform: translateY(0);
  51   }
  52
  53   100% {
  54     opacity: 0;
  55     -webkit-transform: translateY(-40px);
  56     transform: translateY(-40px);
  57   }
  58 }
  59
  60 @keyframes ngdialog-flyout {
  61   0% {
  62     opacity: 1;
  63     -webkit-transform: translateY(0);
  64     -ms-transform: translateY(0);
  65     transform: translateY(0);
  66   }
  67
  68   100% {
  69     opacity: 0;
  70     -webkit-transform: translateY(-40px);
  71     -ms-transform: translateY(-40px);
  72     transform: translateY(-40px);
  73   }
  74 }
  75
  76 .ngdialog.ngdialog-theme-default {
  77   padding-bottom: 160px;
  78   padding-top: 160px;
  79 }
  80
  81 .ngdialog.ngdialog-theme-default.ngdialog-closing .ngdialog-content {
  82   -webkit-animation: ngdialog-flyout .5s;
  83   animation: ngdialog-flyout .5s;
  84 }
  85
  86 .ngdialog.ngdialog-theme-default .ngdialog-content {
  87   -webkit-animation: ngdialog-flyin .5s;
  88   animation: ngdialog-flyin .5s;
  89   background: #F9F4E5;
  90   border-radius: 5px;
  91   color: #444;
  92   font-family: 'Helvetica',sans-serif;
  93   font-size: 1.1em;
  94   line-height: 1.5em;
  95   margin: 0 auto;
  96   max-width: 100%;
  97   padding: 1em;
  98   position: relative;
  99   width: 450px;
 100 }
 101
 102 .ngdialog.ngdialog-theme-default .ngdialog-close {
 103   border-radius: 5px;
 104   cursor: pointer;
 105   position: absolute;
 106   right: 0;
 107   top: 0;
 108 }
 109
 110 .ngdialog.ngdialog-theme-default .ngdialog-close:before {
 111   background: transparent;
 112   border-radius: 3px;
 113   color: #bbb;
 114   content: '\00D7';
 115   font-size: 26px;
 116   font-weight: 400;
 117   height: 30px;
 118   line-height: 26px;
 119   position: absolute;
 120   right: 3px;
 121   text-align: center;
 122   top: 3px;
 123   width: 30px;
 124 }
 125
 126 .ngdialog.ngdialog-theme-default .ngdialog-close:hover:before,
 127 .ngdialog.ngdialog-theme-default .ngdialog-close:active:before {
 128   color: #777;
 129 }
 130
 131 .ngdialog.ngdialog-theme-default .ngdialog-message {
 132   margin-bottom: .5em;
 133 }
 134
 135 .ngdialog.ngdialog-theme-default .ngdialog-input {
 136   margin-bottom: 1em;
 137 }
 138
 139 .ngdialog.ngdialog-theme-default .ngdialog-input textarea,
 140 .ngdialog.ngdialog-theme-default .ngdialog-input input[type="text"],
 141 .ngdialog.ngdialog-theme-default .ngdialog-input input[type="password"],
 142 .ngdialog.ngdialog-theme-default .ngdialog-input input[type="email"],
 143 .ngdialog.ngdialog-theme-default .ngdialog-input input[type="url"] {
 144   background: #fff;
 145   border: 0;
 146   border-radius: 3px;
 147   font-family: inherit;
 148   font-size: inherit;
 149   font-weight: inherit;
 150   margin: 0 0 .25em;
 151   min-height: 2.5em;
 152   padding: .25em .67em;
 153   width: 100%;
 154 }
 155
 156 .ngdialog.ngdialog-theme-default .ngdialog-input textarea:focus,
 157 .ngdialog.ngdialog-theme-default .ngdialog-input input[type="text"]:focus,
 158 .ngdialog.ngdialog-theme-default .ngdialog-input input[type="password"]:focus,
 159 .ngdialog.ngdialog-theme-default .ngdialog-input input[type="email"]:focus,
 160 .ngdialog.ngdialog-theme-default .ngdialog-input input[type="url"]:focus {
 161   -webkit-box-shadow: inset 0 0 0 2px #8dbdf1;
 162   box-shadow: inset 0 0 0 2px #8dbdf1;
 163   outline: none;
 164 }
 165
 166 .ngdialog.ngdialog-theme-default .ngdialog-buttons {
 167   *zoom: 1;
 168 }
 169
 170 .ngdialog.ngdialog-theme-default .ngdialog-buttons:after {
 171   content: '';
 172   display: table;
 173   clear: both;
 174 }
 175
 176 .ngdialog.ngdialog-theme-default .ngdialog-button {
 177   border: 0;
 178   border-radius: 3px;
 179   cursor: pointer;
 180   float: right;
 181   font-family: inherit;
 182   font-size: .8em;
 183   letter-spacing: .1em;
 184   line-height: 1em;
 185   margin: 0 0 0 .5em;
 186   padding: .75em 2em;
 187   text-transform: uppercase;
 188 }
 189
 190 .ngdialog.ngdialog-theme-default .ngdialog-button:focus {
 191   -webkit-animation: ngdialog-pulse 1.1s infinite;
 192   animation: ngdialog-pulse 1.1s infinite;
 193   outline: none;
 194 }
 195
 196 @media (max-width: 568px) {
 197   .ngdialog.ngdialog-theme-default .ngdialog-button:focus {
 198     -webkit-animation: none;
 199     animation: none;
 200   }
 201 }
 202
 203 .ngdialog.ngdialog-theme-default .ngdialog-button.ngdialog-button-primary {
 204   background: #3288e6;
 205   color: #fff;
 206 }
 207
 208 .ngdialog.ngdialog-theme-default .ngdialog-button.ngdialog-button-secondary {
 209   background: #e0e0e0;
 210   color: #777;
 211 }