[Summary view] [Print] [Text view]

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