tools/side_chain_tool/web/node_modules/bootstrap/scss/_custom-forms.scss

   1 // Embedded icons from Open Iconic.
   2 // Released under MIT and copyright 2014 Waybury.
   3 // https://useiconic.com/open
   4
   5
   6 // Checkboxes and radios
   7 //
   8 // Base class takes care of all the key behavioral aspects.
   9
  10 .custom-control {
  11   position: relative;
  12   display: block;
  13   min-height: ($font-size-base * $line-height-base);
  14   padding-left: $custom-control-gutter;
  15 }
  16
  17 .custom-control-inline {
  18   display: inline-flex;
  19   margin-right: $custom-control-spacer-x;
  20 }
  21
  22 .custom-control-input {
  23   position: absolute;
  24   z-index: -1; // Put the input behind the label so it doesn't overlay text
  25   opacity: 0;
  26
  27   &:checked ~ .custom-control-label::before {
  28     color: $custom-control-indicator-checked-color;
  29     @include gradient-bg($custom-control-indicator-checked-bg);
  30     @include box-shadow($custom-control-indicator-checked-box-shadow);
  31   }
  32
  33   &:focus ~ .custom-control-label::before {
  34     // the mixin is not used here to make sure there is feedback
  35     box-shadow: $custom-control-indicator-focus-box-shadow;
  36   }
  37
  38   &:active ~ .custom-control-label::before {
  39     color: $custom-control-indicator-active-color;
  40     background-color: $custom-control-indicator-active-bg;
  41     @include box-shadow($custom-control-indicator-active-box-shadow);
  42   }
  43
  44   &:disabled {
  45     ~ .custom-control-label {
  46       color: $custom-control-label-disabled-color;
  47
  48       &::before {
  49         background-color: $custom-control-indicator-disabled-bg;
  50       }
  51     }
  52   }
  53 }
  54
  55 // Custom control indicators
  56 //
  57 // Build the custom controls out of pseudo-elements.
  58
  59 .custom-control-label {
  60   position: relative;
  61   margin-bottom: 0;
  62
  63   // Background-color and (when enabled) gradient
  64   &::before {
  65     position: absolute;
  66     top: (($font-size-base * $line-height-base - $custom-control-indicator-size) / 2);
  67     left: -$custom-control-gutter;
  68     display: block;
  69     width: $custom-control-indicator-size;
  70     height: $custom-control-indicator-size;
  71     pointer-events: none;
  72     content: "";
  73     user-select: none;
  74     background-color: $custom-control-indicator-bg;
  75     @include box-shadow($custom-control-indicator-box-shadow);
  76   }
  77
  78   // Foreground (icon)
  79   &::after {
  80     position: absolute;
  81     top: (($font-size-base * $line-height-base - $custom-control-indicator-size) / 2);
  82     left: -$custom-control-gutter;
  83     display: block;
  84     width: $custom-control-indicator-size;
  85     height: $custom-control-indicator-size;
  86     content: "";
  87     background-repeat: no-repeat;
  88     background-position: center center;
  89     background-size: $custom-control-indicator-bg-size;
  90   }
  91 }
  92
  93
  94 // Checkboxes
  95 //
  96 // Tweak just a few things for checkboxes.
  97
  98 .custom-checkbox {
  99   .custom-control-label::before {
 100     @include border-radius($custom-checkbox-indicator-border-radius);
 101   }
 102
 103   .custom-control-input:checked ~ .custom-control-label {
 104     &::before {
 105       @include gradient-bg($custom-control-indicator-checked-bg);
 106     }
 107     &::after {
 108       background-image: $custom-checkbox-indicator-icon-checked;
 109     }
 110   }
 111
 112   .custom-control-input:indeterminate ~ .custom-control-label {
 113     &::before {
 114       @include gradient-bg($custom-checkbox-indicator-indeterminate-bg);
 115       @include box-shadow($custom-checkbox-indicator-indeterminate-box-shadow);
 116     }
 117     &::after {
 118       background-image: $custom-checkbox-indicator-icon-indeterminate;
 119     }
 120   }
 121
 122   .custom-control-input:disabled {
 123     &:checked ~ .custom-control-label::before {
 124       background-color: $custom-control-indicator-checked-disabled-bg;
 125     }
 126     &:indeterminate ~ .custom-control-label::before {
 127       background-color: $custom-control-indicator-checked-disabled-bg;
 128     }
 129   }
 130 }
 131
 132 // Radios
 133 //
 134 // Tweak just a few things for radios.
 135
 136 .custom-radio {
 137   .custom-control-label::before {
 138     border-radius: $custom-radio-indicator-border-radius;
 139   }
 140
 141   .custom-control-input:checked ~ .custom-control-label {
 142     &::before {
 143       @include gradient-bg($custom-control-indicator-checked-bg);
 144     }
 145     &::after {
 146       background-image: $custom-radio-indicator-icon-checked;
 147     }
 148   }
 149
 150   .custom-control-input:disabled {
 151     &:checked ~ .custom-control-label::before {
 152       background-color: $custom-control-indicator-checked-disabled-bg;
 153     }
 154   }
 155 }
 156
 157
 158 // Select
 159 //
 160 // Replaces the browser default select with a custom one, mostly pulled from
 161 // https://primer.github.io/.
 162 //
 163
 164 .custom-select {
 165   display: inline-block;
 166   width: 100%;
 167   height: $custom-select-height;
 168   padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x;
 169   line-height: $custom-select-line-height;
 170   color: $custom-select-color;
 171   vertical-align: middle;
 172   background: $custom-select-bg $custom-select-indicator no-repeat right $custom-select-padding-x center;
 173   background-size: $custom-select-bg-size;
 174   border: $custom-select-border-width solid $custom-select-border-color;
 175   @if $enable-rounded {
 176     border-radius: $custom-select-border-radius;
 177   } @else {
 178     border-radius: 0;
 179   }
 180   @include box-shadow($custom-select-box-shadow);
 181   appearance: none;
 182
 183   &:focus {
 184     border-color: $custom-select-focus-border-color;
 185     outline: 0;
 186     @if $enable-shadows {
 187       box-shadow: $custom-select-box-shadow, $custom-select-focus-box-shadow;
 188     } @else {
 189       box-shadow: $custom-select-focus-box-shadow;
 190     }
 191
 192     &::-ms-value {
 193       // For visual consistency with other platforms/browsers,
 194       // suppress the default white text on blue background highlight given to
 195       // the selected option text when the (still closed) <select> receives focus
 196       // in IE and (under certain conditions) Edge.
 197       // See https://github.com/twbs/bootstrap/issues/19398.
 198       color: $input-color;
 199       background-color: $input-bg;
 200     }
 201   }
 202
 203   &[multiple],
 204   &[size]:not([size="1"]) {
 205     height: auto;
 206     padding-right: $custom-select-padding-x;
 207     background-image: none;
 208   }
 209
 210   &:disabled {
 211     color: $custom-select-disabled-color;
 212     background-color: $custom-select-disabled-bg;
 213   }
 214
 215   // Hides the default caret in IE11
 216   &::-ms-expand {
 217     opacity: 0;
 218   }
 219 }
 220
 221 .custom-select-sm {
 222   height: $custom-select-height-sm;
 223   padding-top: $custom-select-padding-y;
 224   padding-bottom: $custom-select-padding-y;
 225   font-size: $custom-select-font-size-sm;
 226 }
 227
 228 .custom-select-lg {
 229   height: $custom-select-height-lg;
 230   padding-top: $custom-select-padding-y;
 231   padding-bottom: $custom-select-padding-y;
 232   font-size: $custom-select-font-size-lg;
 233 }
 234
 235
 236 // File
 237 //
 238 // Custom file input.
 239
 240 .custom-file {
 241   position: relative;
 242   display: inline-block;
 243   width: 100%;
 244   height: $custom-file-height;
 245   margin-bottom: 0;
 246 }
 247
 248 .custom-file-input {
 249   position: relative;
 250   z-index: 2;
 251   width: 100%;
 252   height: $custom-file-height;
 253   margin: 0;
 254   opacity: 0;
 255
 256   &:focus ~ .custom-file-label {
 257     border-color: $custom-file-focus-border-color;
 258     box-shadow: $custom-file-focus-box-shadow;
 259
 260     &::after {
 261       border-color: $custom-file-focus-border-color;
 262     }
 263   }
 264
 265   &:disabled ~ .custom-file-label {
 266     background-color: $custom-file-disabled-bg;
 267   }
 268
 269   @each $lang, $value in $custom-file-text {
 270     &:lang(#{$lang}) ~ .custom-file-label::after {
 271       content: $value;
 272     }
 273   }
 274 }
 275
 276 .custom-file-label {
 277   position: absolute;
 278   top: 0;
 279   right: 0;
 280   left: 0;
 281   z-index: 1;
 282   height: $custom-file-height;
 283   padding: $custom-file-padding-y $custom-file-padding-x;
 284   line-height: $custom-file-line-height;
 285   color: $custom-file-color;
 286   background-color: $custom-file-bg;
 287   border: $custom-file-border-width solid $custom-file-border-color;
 288   @include border-radius($custom-file-border-radius);
 289   @include box-shadow($custom-file-box-shadow);
 290
 291   &::after {
 292     position: absolute;
 293     top: 0;
 294     right: 0;
 295     bottom: 0;
 296     z-index: 3;
 297     display: block;
 298     height: $custom-file-height-inner;
 299     padding: $custom-file-padding-y $custom-file-padding-x;
 300     line-height: $custom-file-line-height;
 301     color: $custom-file-button-color;
 302     content: "Browse";
 303     @include gradient-bg($custom-file-button-bg);
 304     border-left: $custom-file-border-width solid $custom-file-border-color;
 305     @include border-radius(0 $custom-file-border-radius $custom-file-border-radius 0);
 306   }
 307 }
 308
 309 // Range
 310 //
 311 // Style range inputs the same across browsers. Vendor-specific rules for pseudo
 312 // elements cannot be mixed. As such, there are no shared styles for focus or
 313 // active states on prefixed selectors.
 314
 315 .custom-range {
 316   width: 100%;
 317   padding-left: 0; // Firefox specific
 318   background-color: transparent;
 319   appearance: none;
 320
 321   &:focus {
 322     outline: none;
 323
 324     // Pseudo-elements must be split across multiple rulesets to have an affect.
 325     // No box-shadow() mixin for focus accessibility.
 326     &::-webkit-slider-thumb { box-shadow: $custom-range-thumb-focus-box-shadow; }
 327     &::-moz-range-thumb     { box-shadow: $custom-range-thumb-focus-box-shadow; }
 328     &::-ms-thumb            { box-shadow: $custom-range-thumb-focus-box-shadow; }
 329   }
 330
 331   &::-moz-focus-outer {
 332     border: 0;
 333   }
 334
 335   &::-webkit-slider-thumb {
 336     width: $custom-range-thumb-width;
 337     height: $custom-range-thumb-height;
 338     margin-top: (($custom-range-track-height - $custom-range-thumb-height) / 2); // Webkit specific
 339     @include gradient-bg($custom-range-thumb-bg);
 340     border: $custom-range-thumb-border;
 341     @include border-radius($custom-range-thumb-border-radius);
 342     @include box-shadow($custom-range-thumb-box-shadow);
 343     @include transition($custom-forms-transition);
 344     appearance: none;
 345
 346     &:active {
 347       @include gradient-bg($custom-range-thumb-active-bg);
 348     }
 349   }
 350
 351   &::-webkit-slider-runnable-track {
 352     width: $custom-range-track-width;
 353     height: $custom-range-track-height;
 354     color: transparent; // Why?
 355     cursor: $custom-range-track-cursor;
 356     background-color: $custom-range-track-bg;
 357     border-color: transparent;
 358     @include border-radius($custom-range-track-border-radius);
 359     @include box-shadow($custom-range-track-box-shadow);
 360   }
 361
 362   &::-moz-range-thumb {
 363     width: $custom-range-thumb-width;
 364     height: $custom-range-thumb-height;
 365     @include gradient-bg($custom-range-thumb-bg);
 366     border: $custom-range-thumb-border;
 367     @include border-radius($custom-range-thumb-border-radius);
 368     @include box-shadow($custom-range-thumb-box-shadow);
 369     @include transition($custom-forms-transition);
 370     appearance: none;
 371
 372     &:active {
 373       @include gradient-bg($custom-range-thumb-active-bg);
 374     }
 375   }
 376
 377   &::-moz-range-track {
 378     width: $custom-range-track-width;
 379     height: $custom-range-track-height;
 380     color: transparent;
 381     cursor: $custom-range-track-cursor;
 382     background-color: $custom-range-track-bg;
 383     border-color: transparent; // Firefox specific?
 384     @include border-radius($custom-range-track-border-radius);
 385     @include box-shadow($custom-range-track-box-shadow);
 386   }
 387
 388   &::-ms-thumb {
 389     width: $custom-range-thumb-width;
 390     height: $custom-range-thumb-height;
 391     margin-top: 0; // Edge specific
 392     margin-right: $custom-range-thumb-focus-box-shadow-width; // Workaround that overflowed box-shadow is hidden.
 393     margin-left: $custom-range-thumb-focus-box-shadow-width;  // Workaround that overflowed box-shadow is hidden.
 394     @include gradient-bg($custom-range-thumb-bg);
 395     border: $custom-range-thumb-border;
 396     @include border-radius($custom-range-thumb-border-radius);
 397     @include box-shadow($custom-range-thumb-box-shadow);
 398     @include transition($custom-forms-transition);
 399     appearance: none;
 400
 401     &:active {
 402       @include gradient-bg($custom-range-thumb-active-bg);
 403     }
 404   }
 405
 406   &::-ms-track {
 407     width: $custom-range-track-width;
 408     height: $custom-range-track-height;
 409     color: transparent;
 410     cursor: $custom-range-track-cursor;
 411     background-color: transparent;
 412     border-color: transparent;
 413     border-width: ($custom-range-thumb-height * .5);
 414     @include box-shadow($custom-range-track-box-shadow);
 415   }
 416
 417   &::-ms-fill-lower {
 418     background-color: $custom-range-track-bg;
 419     @include border-radius($custom-range-track-border-radius);
 420   }
 421
 422   &::-ms-fill-upper {
 423     margin-right: 15px; // arbitrary?
 424     background-color: $custom-range-track-bg;
 425     @include border-radius($custom-range-track-border-radius);
 426   }
 427 }
 428
 429 .custom-control-label::before,
 430 .custom-file-label,
 431 .custom-select {
 432   @include transition($custom-forms-transition);
 433 }