gerrit.onap Code Review - vnfsdk/refrepo.git/blob

   1 /*!
   2  * Angular Material Design
   3  * https://github.com/angular/material
   4  * @license MIT
   5  * v1.1.3
   6  */
   7 md-input-container {
   8   display: inline-block;
   9   position: relative;
  10   padding: 2px;
  11   margin: 18px 0;
  12   vertical-align: middle;
  13   /*
  14    * The .md-input class is added to the input/textarea
  15    */ }
  16   md-input-container:after {
  17     content: '';
  18     display: table;
  19     clear: both; }
  20   md-input-container.md-block {
  21     display: block; }
  22   md-input-container .md-errors-spacer {
  23     float: right;
  24     min-height: 24px;
  25     min-width: 1px; }
  26     [dir=rtl] md-input-container .md-errors-spacer {
  27       float: left; }
  28   md-input-container > md-icon {
  29     position: absolute;
  30     top: 8px;
  31     left: 2px;
  32     right: auto; }
  33     [dir=rtl] md-input-container > md-icon {
  34       left: auto; }
  35     [dir=rtl] md-input-container > md-icon {
  36       right: 2px; }
  37   md-input-container textarea,
  38   md-input-container input[type="text"],
  39   md-input-container input[type="password"],
  40   md-input-container input[type="datetime"],
  41   md-input-container input[type="datetime-local"],
  42   md-input-container input[type="date"],
  43   md-input-container input[type="month"],
  44   md-input-container input[type="time"],
  45   md-input-container input[type="week"],
  46   md-input-container input[type="number"],
  47   md-input-container input[type="email"],
  48   md-input-container input[type="url"],
  49   md-input-container input[type="search"],
  50   md-input-container input[type="tel"],
  51   md-input-container input[type="color"] {
  52     /* remove default appearance from all input/textarea */
  53     -moz-appearance: none;
  54     -webkit-appearance: none; }
  55   md-input-container input[type="date"],
  56   md-input-container input[type="datetime-local"],
  57   md-input-container input[type="month"],
  58   md-input-container input[type="time"],
  59   md-input-container input[type="week"] {
  60     min-height: 26px; }
  61   md-input-container textarea {
  62     resize: none;
  63     overflow: hidden; }
  64     md-input-container textarea.md-input {
  65       min-height: 26px;
  66       -ms-flex-preferred-size: auto; }
  67     md-input-container textarea[md-no-autogrow] {
  68       height: auto;
  69       overflow: auto; }
  70   md-input-container label:not(.md-container-ignore) {
  71     position: absolute;
  72     bottom: 100%;
  73     left: 0;
  74     right: auto; }
  75     [dir=rtl] md-input-container label:not(.md-container-ignore) {
  76       left: auto; }
  77     [dir=rtl] md-input-container label:not(.md-container-ignore) {
  78       right: 0; }
  79     md-input-container label:not(.md-container-ignore).md-required:after {
  80       content: ' *';
  81       font-size: 13px;
  82       vertical-align: top; }
  83   md-input-container label:not(.md-no-float):not(.md-container-ignore),
  84   md-input-container .md-placeholder {
  85     overflow: hidden;
  86     text-overflow: ellipsis;
  87     white-space: nowrap;
  88     width: 100%;
  89     -webkit-box-ordinal-group: 2;
  90     -webkit-order: 1;
  91             order: 1;
  92     pointer-events: none;
  93     -webkit-font-smoothing: antialiased;
  94     padding-left: 3px;
  95     padding-right: 0;
  96     z-index: 1;
  97     -webkit-transform: translate3d(0, 28px, 0) scale(1);
  98             transform: translate3d(0, 28px, 0) scale(1);
  99     -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
 100     transition: -webkit-transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
 101     transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
 102     transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), -webkit-transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
 103     max-width: 100%;
 104     -webkit-transform-origin: left top;
 105             transform-origin: left top; }
 106     [dir=rtl] md-input-container label:not(.md-no-float):not(.md-container-ignore), [dir=rtl]
 107     md-input-container .md-placeholder {
 108       padding-left: 0; }
 109     [dir=rtl] md-input-container label:not(.md-no-float):not(.md-container-ignore), [dir=rtl]
 110     md-input-container .md-placeholder {
 111       padding-right: 3px; }
 112     [dir=rtl] md-input-container label:not(.md-no-float):not(.md-container-ignore), [dir=rtl]
 113     md-input-container .md-placeholder {
 114       -webkit-transform-origin: right top;
 115               transform-origin: right top; }
 116   md-input-container .md-placeholder {
 117     position: absolute;
 118     top: 0;
 119     opacity: 0;
 120     -webkit-transition-property: opacity, -webkit-transform;
 121     transition-property: opacity, -webkit-transform;
 122     transition-property: opacity, transform;
 123     transition-property: opacity, transform, -webkit-transform;
 124     -webkit-transform: translate3d(0, 30px, 0);
 125             transform: translate3d(0, 30px, 0); }
 126   md-input-container.md-input-focused .md-placeholder {
 127     opacity: 1;
 128     -webkit-transform: translate3d(0, 24px, 0);
 129             transform: translate3d(0, 24px, 0); }
 130   md-input-container.md-input-has-value .md-placeholder {
 131     -webkit-transition: none;
 132     transition: none;
 133     opacity: 0; }
 134   md-input-container:not(.md-input-has-value) input:not(:focus),
 135   md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-ampm-field,
 136   md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-day-field,
 137   md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-hour-field,
 138   md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-millisecond-field,
 139   md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-minute-field,
 140   md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-month-field,
 141   md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-second-field,
 142   md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-week-field,
 143   md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-year-field,
 144   md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-text {
 145     color: transparent; }
 146   md-input-container .md-input {
 147     -webkit-box-ordinal-group: 3;
 148     -webkit-order: 2;
 149             order: 2;
 150     display: block;
 151     margin-top: 0;
 152     background: none;
 153     padding-top: 2px;
 154     padding-bottom: 1px;
 155     padding-left: 2px;
 156     padding-right: 2px;
 157     border-width: 0 0 1px 0;
 158     line-height: 26px;
 159     height: 30px;
 160     -ms-flex-preferred-size: 26px;
 161     border-radius: 0;
 162     border-style: solid;
 163     width: 100%;
 164     box-sizing: border-box;
 165     float: left; }
 166     [dir=rtl] md-input-container .md-input {
 167       float: right; }
 168     md-input-container .md-input:focus {
 169       outline: none; }
 170     md-input-container .md-input:invalid {
 171       outline: none;
 172       box-shadow: none; }
 173     md-input-container .md-input.md-no-flex {
 174       -webkit-box-flex: 0 !important;
 175       -webkit-flex: none !important;
 176               flex: none !important; }
 177   md-input-container .md-char-counter {
 178     text-align: right;
 179     padding-right: 2px;
 180     padding-left: 0; }
 181     [dir=rtl] md-input-container .md-char-counter {
 182       text-align: left; }
 183     [dir=rtl] md-input-container .md-char-counter {
 184       padding-right: 0; }
 185     [dir=rtl] md-input-container .md-char-counter {
 186       padding-left: 2px; }
 187   md-input-container .md-input-messages-animation {
 188     position: relative;
 189     -webkit-box-ordinal-group: 5;
 190     -webkit-order: 4;
 191             order: 4;
 192     overflow: hidden;
 193     clear: left; }
 194     [dir=rtl] md-input-container .md-input-messages-animation {
 195       clear: right; }
 196     md-input-container .md-input-messages-animation.ng-enter .md-input-message-animation {
 197       opacity: 0;
 198       margin-top: -100px; }
 199   md-input-container .md-input-message-animation, md-input-container .md-char-counter {
 200     font-size: 12px;
 201     line-height: 14px;
 202     overflow: hidden;
 203     -webkit-transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
 204     transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
 205     opacity: 1;
 206     margin-top: 0;
 207     padding-top: 5px; }
 208     md-input-container .md-input-message-animation:not(.md-char-counter), md-input-container .md-char-counter:not(.md-char-counter) {
 209       padding-right: 5px;
 210       padding-left: 0; }
 211       [dir=rtl] md-input-container .md-input-message-animation:not(.md-char-counter), [dir=rtl] md-input-container .md-char-counter:not(.md-char-counter) {
 212         padding-right: 0; }
 213       [dir=rtl] md-input-container .md-input-message-animation:not(.md-char-counter), [dir=rtl] md-input-container .md-char-counter:not(.md-char-counter) {
 214         padding-left: 5px; }
 215   md-input-container:not(.md-input-invalid) .md-auto-hide .md-input-message-animation {
 216     opacity: 0;
 217     margin-top: -100px; }
 218   md-input-container .md-input-message-animation:not(.ng-animate) {
 219     opacity: 0;
 220     margin-top: -100px; }
 221   md-input-container .md-input-message-animation.ng-enter {
 222     opacity: 0;
 223     margin-top: -100px; }
 224   md-input-container.md-input-focused label:not(.md-no-float), md-input-container.md-input-has-placeholder label:not(.md-no-float), md-input-container.md-input-has-value label:not(.md-no-float) {
 225     -webkit-transform: translate3d(0, 6px, 0) scale(0.75);
 226             transform: translate3d(0, 6px, 0) scale(0.75);
 227     -webkit-transition: width cubic-bezier(0.25, 0.8, 0.25, 1) 0.4s, -webkit-transform cubic-bezier(0.25, 0.8, 0.25, 1) 0.4s;
 228     transition: width cubic-bezier(0.25, 0.8, 0.25, 1) 0.4s, -webkit-transform cubic-bezier(0.25, 0.8, 0.25, 1) 0.4s;
 229     transition: transform cubic-bezier(0.25, 0.8, 0.25, 1) 0.4s, width cubic-bezier(0.25, 0.8, 0.25, 1) 0.4s;
 230     transition: transform cubic-bezier(0.25, 0.8, 0.25, 1) 0.4s, width cubic-bezier(0.25, 0.8, 0.25, 1) 0.4s, -webkit-transform cubic-bezier(0.25, 0.8, 0.25, 1) 0.4s; }
 231   md-input-container.md-input-has-value label {
 232     -webkit-transition: none;
 233     transition: none; }
 234   md-input-container.md-input-focused .md-input,
 235   md-input-container .md-input.ng-invalid.ng-dirty,
 236   md-input-container.md-input-resized .md-input {
 237     padding-bottom: 0;
 238     border-width: 0 0 2px 0; }
 239   md-input-container .md-input[disabled],
 240   [disabled] md-input-container .md-input {
 241     background-position: bottom -1px left 0;
 242     background-size: 4px 1px;
 243     background-repeat: repeat-x; }
 244   md-input-container.md-icon-float {
 245     -webkit-transition: margin-top 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
 246     transition: margin-top 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); }
 247     md-input-container.md-icon-float > label {
 248       pointer-events: none;
 249       position: absolute; }
 250     md-input-container.md-icon-float > md-icon {
 251       top: 8px;
 252       left: 2px;
 253       right: auto; }
 254       [dir=rtl] md-input-container.md-icon-float > md-icon {
 255         left: auto; }
 256       [dir=rtl] md-input-container.md-icon-float > md-icon {
 257         right: 2px; }
 258   md-input-container.md-icon-left > label:not(.md-no-float):not(.md-container-ignore),
 259   md-input-container.md-icon-left > label .md-placeholder, md-input-container.md-icon-right > label:not(.md-no-float):not(.md-container-ignore),
 260   md-input-container.md-icon-right > label .md-placeholder {
 261     width: calc(100% - 36px - 18px); }
 262   md-input-container.md-icon-left {
 263     padding-left: 36px;
 264     padding-right: 0; }
 265     [dir=rtl] md-input-container.md-icon-left {
 266       padding-left: 0; }
 267     [dir=rtl] md-input-container.md-icon-left {
 268       padding-right: 36px; }
 269     md-input-container.md-icon-left > label {
 270       left: 36px;
 271       right: auto; }
 272       [dir=rtl] md-input-container.md-icon-left > label {
 273         left: auto; }
 274       [dir=rtl] md-input-container.md-icon-left > label {
 275         right: 36px; }
 276   md-input-container.md-icon-right {
 277     padding-left: 0;
 278     padding-right: 36px; }
 279     [dir=rtl] md-input-container.md-icon-right {
 280       padding-left: 36px; }
 281     [dir=rtl] md-input-container.md-icon-right {
 282       padding-right: 0; }
 283     md-input-container.md-icon-right > md-icon:last-of-type {
 284       margin: 0;
 285       right: 2px;
 286       left: auto; }
 287       [dir=rtl] md-input-container.md-icon-right > md-icon:last-of-type {
 288         right: auto; }
 289       [dir=rtl] md-input-container.md-icon-right > md-icon:last-of-type {
 290         left: 2px; }
 291   md-input-container.md-icon-left.md-icon-right {
 292     padding-left: 36px;
 293     padding-right: 36px; }
 294     md-input-container.md-icon-left.md-icon-right > label:not(.md-no-float):not(.md-container-ignore),
 295     md-input-container.md-icon-left.md-icon-right > label .md-placeholder {
 296       width: calc(100% - (36px * 2)); }
 297
 298 .md-resize-wrapper {
 299   position: relative; }
 300   .md-resize-wrapper:after {
 301     content: '';
 302     display: table;
 303     clear: both; }
 304
 305 .md-resize-handle {
 306   position: absolute;
 307   bottom: -5px;
 308   left: 0;
 309   height: 10px;
 310   background: transparent;
 311   width: 100%;
 312   cursor: ns-resize; }
 313
 314 @media screen and (-ms-high-contrast: active) {
 315   md-input-container.md-default-theme > md-icon {
 316     fill: #fff; } }