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 @-webkit-keyframes sliderFocusThumb {
   8   0% {
   9     -webkit-transform: scale(0.7);
  10             transform: scale(0.7); }
  11   30% {
  12     -webkit-transform: scale(1);
  13             transform: scale(1); }
  14   100% {
  15     -webkit-transform: scale(0.7);
  16             transform: scale(0.7); } }
  17
  18 @keyframes sliderFocusThumb {
  19   0% {
  20     -webkit-transform: scale(0.7);
  21             transform: scale(0.7); }
  22   30% {
  23     -webkit-transform: scale(1);
  24             transform: scale(1); }
  25   100% {
  26     -webkit-transform: scale(0.7);
  27             transform: scale(0.7); } }
  28
  29 @-webkit-keyframes sliderDiscreteFocusThumb {
  30   0% {
  31     -webkit-transform: scale(0.7);
  32             transform: scale(0.7); }
  33   50% {
  34     -webkit-transform: scale(0.8);
  35             transform: scale(0.8); }
  36   100% {
  37     -webkit-transform: scale(0);
  38             transform: scale(0); } }
  39
  40 @keyframes sliderDiscreteFocusThumb {
  41   0% {
  42     -webkit-transform: scale(0.7);
  43             transform: scale(0.7); }
  44   50% {
  45     -webkit-transform: scale(0.8);
  46             transform: scale(0.8); }
  47   100% {
  48     -webkit-transform: scale(0);
  49             transform: scale(0); } }
  50
  51 @-webkit-keyframes sliderDiscreteFocusRing {
  52   0% {
  53     -webkit-transform: scale(0.7);
  54             transform: scale(0.7);
  55     opacity: 0; }
  56   50% {
  57     -webkit-transform: scale(1);
  58             transform: scale(1);
  59     opacity: 1; }
  60   100% {
  61     -webkit-transform: scale(0);
  62             transform: scale(0); } }
  63
  64 @keyframes sliderDiscreteFocusRing {
  65   0% {
  66     -webkit-transform: scale(0.7);
  67             transform: scale(0.7);
  68     opacity: 0; }
  69   50% {
  70     -webkit-transform: scale(1);
  71             transform: scale(1);
  72     opacity: 1; }
  73   100% {
  74     -webkit-transform: scale(0);
  75             transform: scale(0); } }
  76
  77 md-slider {
  78   height: 48px;
  79   min-width: 128px;
  80   position: relative;
  81   margin-left: 4px;
  82   margin-right: 4px;
  83   padding: 0;
  84   display: block;
  85   -webkit-box-orient: horizontal;
  86   -webkit-box-direction: normal;
  87   -webkit-flex-direction: row;
  88           flex-direction: row;
  89   /**
  90    * Track
  91    */
  92   /**
  93    * Slider thumb
  94    */
  95   /* The sign that's focused in discrete mode */
  96   /**
  97    * The border/background that comes in when focused in non-discrete mode
  98    */
  99   /* Don't animate left/right while panning */ }
 100   md-slider *, md-slider *:after {
 101     box-sizing: border-box; }
 102   md-slider .md-slider-wrapper {
 103     outline: none;
 104     width: 100%;
 105     height: 100%; }
 106   md-slider .md-slider-content {
 107     position: relative; }
 108   md-slider .md-track-container {
 109     width: 100%;
 110     position: absolute;
 111     top: 23px;
 112     height: 2px; }
 113   md-slider .md-track {
 114     position: absolute;
 115     left: 0;
 116     right: 0;
 117     height: 100%; }
 118   md-slider .md-track-fill {
 119     -webkit-transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
 120     transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
 121     -webkit-transition-property: width, height;
 122     transition-property: width, height; }
 123   md-slider .md-track-ticks {
 124     position: absolute;
 125     left: 0;
 126     right: 0;
 127     height: 100%; }
 128   md-slider .md-track-ticks canvas {
 129     width: 100%;
 130     height: 100%; }
 131   md-slider .md-thumb-container {
 132     position: absolute;
 133     left: 0;
 134     top: 50%;
 135     -webkit-transform: translate3d(-50%, -50%, 0);
 136             transform: translate3d(-50%, -50%, 0);
 137     -webkit-transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
 138     transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
 139     -webkit-transition-property: left, right, bottom;
 140     transition-property: left, right, bottom; }
 141     [dir=rtl] md-slider .md-thumb-container {
 142       left: auto;
 143       right: 0; }
 144   md-slider .md-thumb {
 145     z-index: 1;
 146     position: absolute;
 147     left: -10px;
 148     top: 14px;
 149     width: 20px;
 150     height: 20px;
 151     border-radius: 20px;
 152     -webkit-transform: scale(0.7);
 153             transform: scale(0.7);
 154     -webkit-transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
 155     transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); }
 156     [dir=rtl] md-slider .md-thumb {
 157       left: auto;
 158       right: -10px; }
 159     md-slider .md-thumb:after {
 160       content: '';
 161       position: absolute;
 162       width: 20px;
 163       height: 20px;
 164       border-radius: 20px;
 165       border-width: 3px;
 166       border-style: solid;
 167       -webkit-transition: inherit;
 168       transition: inherit; }
 169   md-slider .md-sign {
 170     /* Center the children (slider-thumb-text) */
 171     display: -webkit-box;
 172     display: -webkit-flex;
 173     display: flex;
 174     -webkit-box-align: center;
 175     -webkit-align-items: center;
 176             align-items: center;
 177     -webkit-box-pack: center;
 178     -webkit-justify-content: center;
 179             justify-content: center;
 180     position: absolute;
 181     left: -14px;
 182     top: -17px;
 183     width: 28px;
 184     height: 28px;
 185     border-radius: 28px;
 186     -webkit-transform: scale(0.4) translate3d(0, 67.5px, 0);
 187             transform: scale(0.4) translate3d(0, 67.5px, 0);
 188     -webkit-transition: all 0.3s cubic-bezier(0.35, 0, 0.25, 1);
 189     transition: all 0.3s cubic-bezier(0.35, 0, 0.25, 1);
 190     /* The arrow pointing down under the sign */ }
 191     md-slider .md-sign:after {
 192       position: absolute;
 193       content: '';
 194       left: 0px;
 195       border-radius: 16px;
 196       top: 19px;
 197       border-left: 14px solid transparent;
 198       border-right: 14px solid transparent;
 199       border-top-width: 16px;
 200       border-top-style: solid;
 201       opacity: 0;
 202       -webkit-transform: translate3d(0, -8px, 0);
 203               transform: translate3d(0, -8px, 0);
 204       -webkit-transition: all 0.2s cubic-bezier(0.35, 0, 0.25, 1);
 205       transition: all 0.2s cubic-bezier(0.35, 0, 0.25, 1); }
 206       [dir=rtl] md-slider .md-sign:after {
 207         left: auto;
 208         right: 0px; }
 209     md-slider .md-sign .md-thumb-text {
 210       z-index: 1;
 211       font-size: 12px;
 212       font-weight: bold; }
 213   md-slider .md-focus-ring {
 214     position: absolute;
 215     left: -17px;
 216     top: 7px;
 217     width: 34px;
 218     height: 34px;
 219     border-radius: 34px;
 220     -webkit-transform: scale(0.7);
 221             transform: scale(0.7);
 222     opacity: 0;
 223     -webkit-transition: all 0.35s cubic-bezier(0.35, 0, 0.25, 1);
 224     transition: all 0.35s cubic-bezier(0.35, 0, 0.25, 1); }
 225     [dir=rtl] md-slider .md-focus-ring {
 226       left: auto;
 227       right: -17px; }
 228   md-slider .md-disabled-thumb {
 229     position: absolute;
 230     left: -14px;
 231     top: 10px;
 232     width: 28px;
 233     height: 28px;
 234     border-radius: 28px;
 235     -webkit-transform: scale(0.5);
 236             transform: scale(0.5);
 237     border-width: 4px;
 238     border-style: solid;
 239     display: none; }
 240     [dir=rtl] md-slider .md-disabled-thumb {
 241       left: auto;
 242       right: -14px; }
 243   md-slider.md-min .md-sign {
 244     opacity: 0; }
 245   md-slider:focus {
 246     outline: none; }
 247   md-slider.md-dragging .md-thumb-container,
 248   md-slider.md-dragging .md-track-fill {
 249     -webkit-transition: none;
 250     transition: none; }
 251   md-slider:not([md-discrete]) {
 252     /* Hide the sign and ticks in non-discrete mode */ }
 253     md-slider:not([md-discrete]) .md-track-ticks,
 254     md-slider:not([md-discrete]) .md-sign {
 255       display: none; }
 256     md-slider:not([md-discrete]):not([disabled]) .md-slider-wrapper .md-thumb:hover {
 257       -webkit-transform: scale(0.8);
 258               transform: scale(0.8); }
 259     md-slider:not([md-discrete]):not([disabled]) .md-slider-wrapper.md-focused .md-focus-ring {
 260       -webkit-transform: scale(1);
 261               transform: scale(1);
 262       opacity: 1; }
 263     md-slider:not([md-discrete]):not([disabled]) .md-slider-wrapper.md-focused .md-thumb {
 264       -webkit-animation: sliderFocusThumb 0.7s cubic-bezier(0.35, 0, 0.25, 1);
 265               animation: sliderFocusThumb 0.7s cubic-bezier(0.35, 0, 0.25, 1); }
 266     md-slider:not([md-discrete]):not([disabled]).md-active .md-slider-wrapper .md-thumb {
 267       -webkit-transform: scale(1);
 268               transform: scale(1); }
 269   md-slider[md-discrete]:not([disabled]) .md-slider-wrapper.md-focused .md-focus-ring {
 270     -webkit-transform: scale(0);
 271             transform: scale(0);
 272     -webkit-animation: sliderDiscreteFocusRing 0.5s cubic-bezier(0.35, 0, 0.25, 1);
 273             animation: sliderDiscreteFocusRing 0.5s cubic-bezier(0.35, 0, 0.25, 1); }
 274   md-slider[md-discrete]:not([disabled]) .md-slider-wrapper.md-focused .md-thumb {
 275     -webkit-animation: sliderDiscreteFocusThumb 0.5s cubic-bezier(0.35, 0, 0.25, 1);
 276             animation: sliderDiscreteFocusThumb 0.5s cubic-bezier(0.35, 0, 0.25, 1); }
 277   md-slider[md-discrete]:not([disabled]) .md-slider-wrapper.md-focused .md-thumb, md-slider[md-discrete]:not([disabled]).md-active .md-thumb {
 278     -webkit-transform: scale(0);
 279             transform: scale(0); }
 280   md-slider[md-discrete]:not([disabled]) .md-slider-wrapper.md-focused .md-sign,
 281   md-slider[md-discrete]:not([disabled]) .md-slider-wrapper.md-focused .md-sign:after, md-slider[md-discrete]:not([disabled]).md-active .md-sign,
 282   md-slider[md-discrete]:not([disabled]).md-active .md-sign:after {
 283     opacity: 1;
 284     -webkit-transform: translate3d(0, 0, 0) scale(1);
 285             transform: translate3d(0, 0, 0) scale(1); }
 286   md-slider[md-discrete][disabled][readonly] .md-thumb {
 287     -webkit-transform: scale(0);
 288             transform: scale(0); }
 289   md-slider[md-discrete][disabled][readonly] .md-sign,
 290   md-slider[md-discrete][disabled][readonly] .md-sign:after {
 291     opacity: 1;
 292     -webkit-transform: translate3d(0, 0, 0) scale(1);
 293             transform: translate3d(0, 0, 0) scale(1); }
 294   md-slider[disabled] .md-track-fill {
 295     display: none; }
 296   md-slider[disabled] .md-track-ticks {
 297     opacity: 0; }
 298   md-slider[disabled]:not([readonly]) .md-sign {
 299     opacity: 0; }
 300   md-slider[disabled] .md-thumb {
 301     -webkit-transform: scale(0.5);
 302             transform: scale(0.5); }
 303   md-slider[disabled] .md-disabled-thumb {
 304     display: block; }
 305   md-slider[md-vertical] {
 306     -webkit-box-orient: vertical;
 307     -webkit-box-direction: normal;
 308     -webkit-flex-direction: column;
 309             flex-direction: column;
 310     min-height: 128px;
 311     min-width: 0; }
 312     md-slider[md-vertical] .md-slider-wrapper {
 313       -webkit-box-flex: 1;
 314       -webkit-flex: 1;
 315               flex: 1;
 316       padding-top: 12px;
 317       padding-bottom: 12px;
 318       width: 48px;
 319       -webkit-align-self: center;
 320               align-self: center;
 321       display: -webkit-box;
 322       display: -webkit-flex;
 323       display: flex;
 324       -webkit-box-pack: center;
 325       -webkit-justify-content: center;
 326               justify-content: center; }
 327     md-slider[md-vertical] .md-track-container {
 328       height: 100%;
 329       width: 2px;
 330       top: 0;
 331       left: calc(50% - (2px / 2)); }
 332     md-slider[md-vertical] .md-thumb-container {
 333       top: auto;
 334       margin-bottom: 23px;
 335       left: calc(50% - 1px);
 336       bottom: 0; }
 337       md-slider[md-vertical] .md-thumb-container .md-thumb:after {
 338         left: 1px; }
 339       md-slider[md-vertical] .md-thumb-container .md-focus-ring {
 340         left: -16px; }
 341     md-slider[md-vertical] .md-track-fill {
 342       bottom: 0; }
 343     md-slider[md-vertical][md-discrete] .md-sign {
 344       left: -40px;
 345       top: 9.5px;
 346       -webkit-transform: scale(0.4) translate3d(67.5px, 0, 0);
 347               transform: scale(0.4) translate3d(67.5px, 0, 0);
 348       /* The arrow pointing left next the sign */ }
 349       md-slider[md-vertical][md-discrete] .md-sign:after {
 350         top: 9.5px;
 351         left: 19px;
 352         border-top: 14px solid transparent;
 353         border-right: 0;
 354         border-bottom: 14px solid transparent;
 355         border-left-width: 16px;
 356         border-left-style: solid;
 357         opacity: 0;
 358         -webkit-transform: translate3d(0, -8px, 0);
 359                 transform: translate3d(0, -8px, 0);
 360         -webkit-transition: all 0.2s ease-in-out;
 361         transition: all 0.2s ease-in-out; }
 362       md-slider[md-vertical][md-discrete] .md-sign .md-thumb-text {
 363         z-index: 1;
 364         font-size: 12px;
 365         font-weight: bold; }
 366     md-slider[md-vertical][md-discrete].md-active .md-sign:after,
 367     md-slider[md-vertical][md-discrete] .md-focused .md-sign:after, md-slider[md-vertical][md-discrete][disabled][readonly] .md-sign:after {
 368       top: 0; }
 369     md-slider[md-vertical][disabled][readonly] .md-thumb {
 370       -webkit-transform: scale(0);
 371               transform: scale(0); }
 372     md-slider[md-vertical][disabled][readonly] .md-sign,
 373     md-slider[md-vertical][disabled][readonly] .md-sign:after {
 374       opacity: 1;
 375       -webkit-transform: translate3d(0, 0, 0) scale(1);
 376               transform: translate3d(0, 0, 0) scale(1); }
 377   md-slider[md-invert]:not([md-vertical]) .md-track-fill {
 378     left: auto;
 379     right: 0; }
 380     [dir=rtl] md-slider[md-invert]:not([md-vertical]) .md-track-fill {
 381       left: 0; }
 382     [dir=rtl] md-slider[md-invert]:not([md-vertical]) .md-track-fill {
 383       right: auto; }
 384   md-slider[md-invert][md-vertical] .md-track-fill {
 385     bottom: auto;
 386     top: 0; }
 387
 388 md-slider-container {
 389   display: -webkit-box;
 390   display: -webkit-flex;
 391   display: flex;
 392   -webkit-box-align: center;
 393   -webkit-align-items: center;
 394           align-items: center;
 395   -webkit-box-orient: horizontal;
 396   -webkit-box-direction: normal;
 397   -webkit-flex-direction: row;
 398           flex-direction: row; }
 399   md-slider-container > *:first-child:not(md-slider),
 400   md-slider-container > *:last-child:not(md-slider) {
 401     min-width: 25px;
 402     max-width: 42px;
 403     height: 25px;
 404     -webkit-transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
 405     transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
 406     -webkit-transition-property: color, max-width;
 407     transition-property: color, max-width; }
 408   md-slider-container > *:first-child:not(md-slider) {
 409     margin-right: 16px; }
 410     [dir=rtl] md-slider-container > *:first-child:not(md-slider) {
 411       margin-right: auto;
 412       margin-left: 16px; }
 413   md-slider-container > *:last-child:not(md-slider) {
 414     margin-left: 16px; }
 415     [dir=rtl] md-slider-container > *:last-child:not(md-slider) {
 416       margin-left: auto;
 417       margin-right: 16px; }
 418   md-slider-container[md-vertical] {
 419     -webkit-box-orient: vertical;
 420     -webkit-box-direction: normal;
 421     -webkit-flex-direction: column;
 422             flex-direction: column; }
 423     md-slider-container[md-vertical] > *:first-child:not(md-slider),
 424     md-slider-container[md-vertical] > *:last-child:not(md-slider) {
 425       margin-right: 0;
 426       margin-left: 0;
 427       text-align: center; }
 428   md-slider-container md-input-container input[type="number"] {
 429     text-align: center;
 430     padding-left: 15px;
 431     height: 50px;
 432     margin-top: -25px; }
 433     [dir=rtl] md-slider-container md-input-container input[type="number"] {
 434       padding-left: 0;
 435       padding-right: 15px; }
 436
 437 @media screen and (-ms-high-contrast: active) {
 438   md-slider.md-default-theme .md-track {
 439     border-bottom: 1px solid #fff; } }