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