git.roojs.org Git - roojs1/blob - scss/bootstrap/_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   z-index: 1;
  13   display: block;
  14   min-height: $font-size-base * $line-height-base;
  15   padding-left: $custom-control-gutter + $custom-control-indicator-size;
  16   color-adjust: exact; // Keep themed appearance for print
  17 }
  18
  19 .custom-control-inline {
  20   display: inline-flex;
  21   margin-right: $custom-control-spacer-x;
  22 }
  23
  24 .custom-control-input {
  25   position: absolute;
  26   left: 0;
  27   z-index: -1; // Put the input behind the label so it doesn't overlay text
  28   width: $custom-control-indicator-size;
  29   height: ($font-size-base * $line-height-base + $custom-control-indicator-size) / 2;
  30   opacity: 0;
  31
  32   &:checked ~ .custom-control-label::before {
  33     color: $custom-control-indicator-checked-color;
  34     border-color: $custom-control-indicator-checked-border-color;
  35     @include gradient-bg($custom-control-indicator-checked-bg);
  36     @include box-shadow($custom-control-indicator-checked-box-shadow);
  37   }
  38
  39   &:focus ~ .custom-control-label::before {
  40     // the mixin is not used here to make sure there is feedback
  41     @if $enable-shadows {
  42       box-shadow: $input-box-shadow, $custom-control-indicator-focus-box-shadow;
  43     } @else {
  44       box-shadow: $custom-control-indicator-focus-box-shadow;
  45     }
  46   }
  47
  48   &:focus:not(:checked) ~ .custom-control-label::before {
  49     border-color: $custom-control-indicator-focus-border-color;
  50   }
  51
  52   &:not(:disabled):active ~ .custom-control-label::before {
  53     color: $custom-control-indicator-active-color;
  54     background-color: $custom-control-indicator-active-bg;
  55     border-color: $custom-control-indicator-active-border-color;
  56     @include box-shadow($custom-control-indicator-active-box-shadow);
  57   }
  58
  59   // Use [disabled] and :disabled to work around https://github.com/twbs/bootstrap/issues/28247
  60   &[disabled],
  61   &:disabled {
  62     ~ .custom-control-label {
  63       color: $custom-control-label-disabled-color;
  64
  65       &::before {
  66         background-color: $custom-control-indicator-disabled-bg;
  67       }
  68     }
  69   }
  70 }
  71
  72 // Custom control indicators
  73 //
  74 // Build the custom controls out of pseudo-elements.
  75
  76 .custom-control-label {
  77   position: relative;
  78   margin-bottom: 0;
  79   color: $custom-control-label-color;
  80   vertical-align: top;
  81   cursor: $custom-control-cursor;
  82
  83   // Background-color and (when enabled) gradient
  84   &::before {
  85     position: absolute;
  86     top: ($font-size-base * $line-height-base - $custom-control-indicator-size) / 2;
  87     left: -($custom-control-gutter + $custom-control-indicator-size);
  88     display: block;
  89     width: $custom-control-indicator-size;
  90     height: $custom-control-indicator-size;
  91     pointer-events: none;
  92     content: "";
  93     background-color: $custom-control-indicator-bg;
  94     border: $custom-control-indicator-border-color solid $custom-control-indicator-border-width;
  95     @include box-shadow($custom-control-indicator-box-shadow);
  96   }
  97
  98   // Foreground (icon)
  99   &::after {
 100     position: absolute;
 101     top: ($font-size-base * $line-height-base - $custom-control-indicator-size) / 2;
 102     left: -($custom-control-gutter + $custom-control-indicator-size);
 103     display: block;
 104     width: $custom-control-indicator-size;
 105     height: $custom-control-indicator-size;
 106     content: "";
 107     background: no-repeat 50% / #{$custom-control-indicator-bg-size};
 108   }
 109 }
 110
 111
 112 // Checkboxes
 113 //
 114 // Tweak just a few things for checkboxes.
 115
 116 .custom-checkbox {
 117   .custom-control-label::before {
 118     @include border-radius($custom-checkbox-indicator-border-radius);
 119   }
 120
 121   .custom-control-input:checked ~ .custom-control-label {
 122     &::after {
 123       background-image: escape-svg($custom-checkbox-indicator-icon-checked);
 124     }
 125   }
 126
 127   .custom-control-input:indeterminate ~ .custom-control-label {
 128     &::before {
 129       border-color: $custom-checkbox-indicator-indeterminate-border-color;
 130       @include gradient-bg($custom-checkbox-indicator-indeterminate-bg);
 131       @include box-shadow($custom-checkbox-indicator-indeterminate-box-shadow);
 132     }
 133     &::after {
 134       background-image: escape-svg($custom-checkbox-indicator-icon-indeterminate);
 135     }
 136   }
 137
 138   .custom-control-input:disabled {
 139     &:checked ~ .custom-control-label::before {
 140       @include gradient-bg($custom-control-indicator-checked-disabled-bg);
 141     }
 142     &:indeterminate ~ .custom-control-label::before {
 143       @include gradient-bg($custom-control-indicator-checked-disabled-bg);
 144     }
 145   }
 146 }
 147
 148 // Radios
 149 //
 150 // Tweak just a few things for radios.
 151
 152 .custom-radio {
 153   .custom-control-label::before {
 154     // stylelint-disable-next-line property-disallowed-list
 155     border-radius: $custom-radio-indicator-border-radius;
 156   }
 157
 158   .custom-control-input:checked ~ .custom-control-label {
 159     &::after {
 160       background-image: escape-svg($custom-radio-indicator-icon-checked);
 161     }
 162   }
 163
 164   .custom-control-input:disabled {
 165     &:checked ~ .custom-control-label::before {
 166       @include gradient-bg($custom-control-indicator-checked-disabled-bg);
 167     }
 168   }
 169 }
 170
 171
 172 // switches
 173 //
 174 // Tweak a few things for switches
 175
 176 .custom-switch {
 177   padding-left: $custom-switch-width + $custom-control-gutter;
 178
 179   .custom-control-label {
 180     &::before {
 181       left: -($custom-switch-width + $custom-control-gutter);
 182       width: $custom-switch-width;
 183       pointer-events: all;
 184       // stylelint-disable-next-line property-disallowed-list
 185       border-radius: $custom-switch-indicator-border-radius;
 186     }
 187
 188     &::after {
 189       top: add(($font-size-base * $line-height-base - $custom-control-indicator-size) / 2, $custom-control-indicator-border-width * 2);
 190       left: add(-($custom-switch-width + $custom-control-gutter), $custom-control-indicator-border-width * 2);
 191       width: $custom-switch-indicator-size;
 192       height: $custom-switch-indicator-size;
 193       background-color: $custom-control-indicator-border-color;
 194       // stylelint-disable-next-line property-disallowed-list
 195       border-radius: $custom-switch-indicator-border-radius;
 196       @include transition(transform .15s ease-in-out, $custom-forms-transition);
 197     }
 198   }
 199
 200   .custom-control-input:checked ~ .custom-control-label {
 201     &::after {
 202       background-color: $custom-control-indicator-bg;
 203       transform: translateX($custom-switch-width - $custom-control-indicator-size);
 204     }
 205   }
 206
 207   .custom-control-input:disabled {
 208     &:checked ~ .custom-control-label::before {
 209       @include gradient-bg($custom-control-indicator-checked-disabled-bg);
 210     }
 211   }
 212 }
 213
 214
 215 // Select
 216 //
 217 // Replaces the browser default select with a custom one, mostly pulled from
 218 // https://primer.github.io/.
 219 //
 220
 221 .custom-select {
 222   display: inline-block;
 223   width: 100%;
 224   height: $custom-select-height;
 225   padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x;
 226   font-family: $custom-select-font-family;
 227   @include font-size($custom-select-font-size);
 228   font-weight: $custom-select-font-weight;
 229   line-height: $custom-select-line-height;
 230   color: $custom-select-color;
 231   vertical-align: middle;
 232   background: $custom-select-bg $custom-select-background;
 233   border: $custom-select-border-width solid $custom-select-border-color;
 234   @include border-radius($custom-select-border-radius, 0);
 235   @include box-shadow($custom-select-box-shadow);
 236   appearance: none;
 237
 238   &:focus {
 239     border-color: $custom-select-focus-border-color;
 240     outline: 0;
 241     @if $enable-shadows {
 242       @include box-shadow($custom-select-box-shadow, $custom-select-focus-box-shadow);
 243     } @else {
 244       // Avoid using mixin so we can pass custom focus shadow properly
 245       box-shadow: $custom-select-focus-box-shadow;
 246     }
 247
 248     &::-ms-value {
 249       // For visual consistency with other platforms/browsers,
 250       // suppress the default white text on blue background highlight given to
 251       // the selected option text when the (still closed) <select> receives focus
 252       // in IE and (under certain conditions) Edge.
 253       // See https://github.com/twbs/bootstrap/issues/19398.
 254       color: $input-color;
 255       background-color: $input-bg;
 256     }
 257   }
 258
 259   &[multiple],
 260   &[size]:not([size="1"]) {
 261     height: auto;
 262     padding-right: $custom-select-padding-x;
 263     background-image: none;
 264   }
 265
 266   &:disabled {
 267     color: $custom-select-disabled-color;
 268     background-color: $custom-select-disabled-bg;
 269   }
 270
 271   // Hides the default caret in IE11
 272   &::-ms-expand {
 273     display: none;
 274   }
 275
 276   // Remove outline from select box in FF
 277   &:-moz-focusring {
 278     color: transparent;
 279     text-shadow: 0 0 0 $custom-select-color;
 280   }
 281 }
 282
 283 .custom-select-sm {
 284   height: $custom-select-height-sm;
 285   padding-top: $custom-select-padding-y-sm;
 286   padding-bottom: $custom-select-padding-y-sm;
 287   padding-left: $custom-select-padding-x-sm;
 288   @include font-size($custom-select-font-size-sm);
 289 }
 290
 291 .custom-select-lg {
 292   height: $custom-select-height-lg;
 293   padding-top: $custom-select-padding-y-lg;
 294   padding-bottom: $custom-select-padding-y-lg;
 295   padding-left: $custom-select-padding-x-lg;
 296   @include font-size($custom-select-font-size-lg);
 297 }
 298
 299
 300 // File
 301 //
 302 // Custom file input.
 303
 304 .custom-file {
 305   position: relative;
 306   display: inline-block;
 307   width: 100%;
 308   height: $custom-file-height;
 309   margin-bottom: 0;
 310 }
 311
 312 .custom-file-input {
 313   position: relative;
 314   z-index: 2;
 315   width: 100%;
 316   height: $custom-file-height;
 317   margin: 0;
 318   opacity: 0;
 319
 320   &:focus ~ .custom-file-label {
 321     border-color: $custom-file-focus-border-color;
 322     box-shadow: $custom-file-focus-box-shadow;
 323   }
 324
 325   // Use [disabled] and :disabled to work around https://github.com/twbs/bootstrap/issues/28247
 326   &[disabled] ~ .custom-file-label,
 327   &:disabled ~ .custom-file-label {
 328     background-color: $custom-file-disabled-bg;
 329   }
 330
 331   @each $lang, $value in $custom-file-text {
 332     &:lang(#{$lang}) ~ .custom-file-label::after {
 333       content: $value;
 334     }
 335   }
 336
 337   ~ .custom-file-label[data-browse]::after {
 338     content: attr(data-browse);
 339   }
 340 }
 341
 342 .custom-file-label {
 343   position: absolute;
 344   top: 0;
 345   right: 0;
 346   left: 0;
 347   z-index: 1;
 348   height: $custom-file-height;
 349   padding: $custom-file-padding-y $custom-file-padding-x;
 350   font-family: $custom-file-font-family;
 351   font-weight: $custom-file-font-weight;
 352   line-height: $custom-file-line-height;
 353   color: $custom-file-color;
 354   background-color: $custom-file-bg;
 355   border: $custom-file-border-width solid $custom-file-border-color;
 356   @include border-radius($custom-file-border-radius);
 357   @include box-shadow($custom-file-box-shadow);
 358
 359   &::after {
 360     position: absolute;
 361     top: 0;
 362     right: 0;
 363     bottom: 0;
 364     z-index: 3;
 365     display: block;
 366     height: $custom-file-height-inner;
 367     padding: $custom-file-padding-y $custom-file-padding-x;
 368     line-height: $custom-file-line-height;
 369     color: $custom-file-button-color;
 370     content: "Browse";
 371     @include gradient-bg($custom-file-button-bg);
 372     border-left: inherit;
 373     @include border-radius(0 $custom-file-border-radius $custom-file-border-radius 0);
 374   }
 375 }
 376
 377 // Range
 378 //
 379 // Style range inputs the same across browsers. Vendor-specific rules for pseudo
 380 // elements cannot be mixed. As such, there are no shared styles for focus or
 381 // active states on prefixed selectors.
 382
 383 .custom-range {
 384   width: 100%;
 385   height: add($custom-range-thumb-height, $custom-range-thumb-focus-box-shadow-width * 2);
 386   padding: 0; // Need to reset padding
 387   background-color: transparent;
 388   appearance: none;
 389
 390   &:focus {
 391     outline: none;
 392
 393     // Pseudo-elements must be split across multiple rulesets to have an effect.
 394     // No box-shadow() mixin for focus accessibility.
 395     &::-webkit-slider-thumb { box-shadow: $custom-range-thumb-focus-box-shadow; }
 396     &::-moz-range-thumb     { box-shadow: $custom-range-thumb-focus-box-shadow; }
 397     &::-ms-thumb            { box-shadow: $custom-range-thumb-focus-box-shadow; }
 398   }
 399
 400   &::-moz-focus-outer {
 401     border: 0;
 402   }
 403
 404   &::-webkit-slider-thumb {
 405     width: $custom-range-thumb-width;
 406     height: $custom-range-thumb-height;
 407     margin-top: ($custom-range-track-height - $custom-range-thumb-height) / 2; // Webkit specific
 408     @include gradient-bg($custom-range-thumb-bg);
 409     border: $custom-range-thumb-border;
 410     @include border-radius($custom-range-thumb-border-radius);
 411     @include box-shadow($custom-range-thumb-box-shadow);
 412     @include transition($custom-forms-transition);
 413     appearance: none;
 414
 415     &:active {
 416       @include gradient-bg($custom-range-thumb-active-bg);
 417     }
 418   }
 419
 420   &::-webkit-slider-runnable-track {
 421     width: $custom-range-track-width;
 422     height: $custom-range-track-height;
 423     color: transparent; // Why?
 424     cursor: $custom-range-track-cursor;
 425     background-color: $custom-range-track-bg;
 426     border-color: transparent;
 427     @include border-radius($custom-range-track-border-radius);
 428     @include box-shadow($custom-range-track-box-shadow);
 429   }
 430
 431   &::-moz-range-thumb {
 432     width: $custom-range-thumb-width;
 433     height: $custom-range-thumb-height;
 434     @include gradient-bg($custom-range-thumb-bg);
 435     border: $custom-range-thumb-border;
 436     @include border-radius($custom-range-thumb-border-radius);
 437     @include box-shadow($custom-range-thumb-box-shadow);
 438     @include transition($custom-forms-transition);
 439     appearance: none;
 440
 441     &:active {
 442       @include gradient-bg($custom-range-thumb-active-bg);
 443     }
 444   }
 445
 446   &::-moz-range-track {
 447     width: $custom-range-track-width;
 448     height: $custom-range-track-height;
 449     color: transparent;
 450     cursor: $custom-range-track-cursor;
 451     background-color: $custom-range-track-bg;
 452     border-color: transparent; // Firefox specific?
 453     @include border-radius($custom-range-track-border-radius);
 454     @include box-shadow($custom-range-track-box-shadow);
 455   }
 456
 457   &::-ms-thumb {
 458     width: $custom-range-thumb-width;
 459     height: $custom-range-thumb-height;
 460     margin-top: 0; // Edge specific
 461     margin-right: $custom-range-thumb-focus-box-shadow-width; // Workaround that overflowed box-shadow is hidden.
 462     margin-left: $custom-range-thumb-focus-box-shadow-width;  // Workaround that overflowed box-shadow is hidden.
 463     @include gradient-bg($custom-range-thumb-bg);
 464     border: $custom-range-thumb-border;
 465     @include border-radius($custom-range-thumb-border-radius);
 466     @include box-shadow($custom-range-thumb-box-shadow);
 467     @include transition($custom-forms-transition);
 468     appearance: none;
 469
 470     &:active {
 471       @include gradient-bg($custom-range-thumb-active-bg);
 472     }
 473   }
 474
 475   &::-ms-track {
 476     width: $custom-range-track-width;
 477     height: $custom-range-track-height;
 478     color: transparent;
 479     cursor: $custom-range-track-cursor;
 480     background-color: transparent;
 481     border-color: transparent;
 482     border-width: $custom-range-thumb-height / 2;
 483     @include box-shadow($custom-range-track-box-shadow);
 484   }
 485
 486   &::-ms-fill-lower {
 487     background-color: $custom-range-track-bg;
 488     @include border-radius($custom-range-track-border-radius);
 489   }
 490
 491   &::-ms-fill-upper {
 492     margin-right: 15px; // arbitrary?
 493     background-color: $custom-range-track-bg;
 494     @include border-radius($custom-range-track-border-radius);
 495   }
 496
 497   &:disabled {
 498     &::-webkit-slider-thumb {
 499       background-color: $custom-range-thumb-disabled-bg;
 500     }
 501
 502     &::-webkit-slider-runnable-track {
 503       cursor: default;
 504     }
 505
 506     &::-moz-range-thumb {
 507       background-color: $custom-range-thumb-disabled-bg;
 508     }
 509
 510     &::-moz-range-track {
 511       cursor: default;
 512     }
 513
 514     &::-ms-thumb {
 515       background-color: $custom-range-thumb-disabled-bg;
 516     }
 517   }
 518 }
 519
 520 .custom-control-label::before,
 521 .custom-file-label,
 522 .custom-select {
 523   @include transition($custom-forms-transition);
 524 }