codekingpro/portable-devtools

1// Embedded icons from Open Iconic.2// Released under MIT and copyright 2014 Waybury.3// https://useiconic.com/open4 5 6// Checkboxes and radios7//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  print-color-adjust: exact; // Keep themed appearance for print17}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 text28  width: $custom-control-indicator-size;29  height: ($font-size-base * $line-height-base + $custom-control-indicator-size) * .5;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 feedback41    @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/2824760  &[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 indicators73//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) gradient84  &::before {85    position: absolute;86    top: ($font-size-base * $line-height-base - $custom-control-indicator-size) * .5;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-width solid $custom-control-indicator-border-color;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) * .5;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: 50% / #{$custom-control-indicator-bg-size} no-repeat;108  }109}110 111 112// Checkboxes113//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// Radios149//150// Tweak just a few things for radios.151 152.custom-radio {153  .custom-control-label::before {154    // stylelint-disable-next-line property-disallowed-list155    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// switches173//174// Tweak a few things for switches175 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-list185      border-radius: $custom-switch-indicator-border-radius;186    }187 188    &::after {189      top: add(($font-size-base * $line-height-base - $custom-control-indicator-size) * .5, $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-list195      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// Select216//217// Replaces the browser default select with a custom one, mostly pulled from218// 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 properly245      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 to251      // the selected option text when the (still closed) <select> receives focus252      // 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 IE11272  &::-ms-expand {273    display: none;274  }275 276  // Remove outline from select box in FF277  &:-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// File301//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  overflow: hidden;319  opacity: 0;320 321  &:focus ~ .custom-file-label {322    border-color: $custom-file-focus-border-color;323    box-shadow: $custom-file-focus-box-shadow;324  }325 326  // Use [disabled] and :disabled to work around https://github.com/twbs/bootstrap/issues/28247327  &[disabled] ~ .custom-file-label,328  &:disabled ~ .custom-file-label {329    background-color: $custom-file-disabled-bg;330  }331 332  @each $lang, $value in $custom-file-text {333    &:lang(#{$lang}) ~ .custom-file-label::after {334      content: $value;335    }336  }337 338  ~ .custom-file-label[data-browse]::after {339    content: attr(data-browse);340  }341}342 343.custom-file-label {344  position: absolute;345  top: 0;346  right: 0;347  left: 0;348  z-index: 1;349  height: $custom-file-height;350  padding: $custom-file-padding-y $custom-file-padding-x;351  overflow: hidden;352  font-family: $custom-file-font-family;353  font-weight: $custom-file-font-weight;354  line-height: $custom-file-line-height;355  color: $custom-file-color;356  background-color: $custom-file-bg;357  border: $custom-file-border-width solid $custom-file-border-color;358  @include border-radius($custom-file-border-radius);359  @include box-shadow($custom-file-box-shadow);360 361  &::after {362    position: absolute;363    top: 0;364    right: 0;365    bottom: 0;366    z-index: 3;367    display: block;368    height: $custom-file-height-inner;369    padding: $custom-file-padding-y $custom-file-padding-x;370    line-height: $custom-file-line-height;371    color: $custom-file-button-color;372    content: "Browse";373    @include gradient-bg($custom-file-button-bg);374    border-left: inherit;375    @include border-radius(0 $custom-file-border-radius $custom-file-border-radius 0);376  }377}378 379// Range380//381// Style range inputs the same across browsers. Vendor-specific rules for pseudo382// elements cannot be mixed. As such, there are no shared styles for focus or383// active states on prefixed selectors.384 385.custom-range {386  width: 100%;387  height: add($custom-range-thumb-height, $custom-range-thumb-focus-box-shadow-width * 2);388  padding: 0; // Need to reset padding389  background-color: transparent;390  appearance: none;391 392  &:focus {393    outline: 0;394 395    // Pseudo-elements must be split across multiple rulesets to have an effect.396    // No box-shadow() mixin for focus accessibility.397    &::-webkit-slider-thumb { box-shadow: $custom-range-thumb-focus-box-shadow; }398    &::-moz-range-thumb     { box-shadow: $custom-range-thumb-focus-box-shadow; }399    &::-ms-thumb            { box-shadow: $custom-range-thumb-focus-box-shadow; }400  }401 402  &::-moz-focus-outer {403    border: 0;404  }405 406  &::-webkit-slider-thumb {407    width: $custom-range-thumb-width;408    height: $custom-range-thumb-height;409    margin-top: ($custom-range-track-height - $custom-range-thumb-height) * .5; // Webkit specific410    @include gradient-bg($custom-range-thumb-bg);411    border: $custom-range-thumb-border;412    @include border-radius($custom-range-thumb-border-radius);413    @include box-shadow($custom-range-thumb-box-shadow);414    @include transition($custom-forms-transition);415    appearance: none;416 417    &:active {418      @include gradient-bg($custom-range-thumb-active-bg);419    }420  }421 422  &::-webkit-slider-runnable-track {423    width: $custom-range-track-width;424    height: $custom-range-track-height;425    color: transparent; // Why?426    cursor: $custom-range-track-cursor;427    background-color: $custom-range-track-bg;428    border-color: transparent;429    @include border-radius($custom-range-track-border-radius);430    @include box-shadow($custom-range-track-box-shadow);431  }432 433  &::-moz-range-thumb {434    width: $custom-range-thumb-width;435    height: $custom-range-thumb-height;436    @include gradient-bg($custom-range-thumb-bg);437    border: $custom-range-thumb-border;438    @include border-radius($custom-range-thumb-border-radius);439    @include box-shadow($custom-range-thumb-box-shadow);440    @include transition($custom-forms-transition);441    appearance: none;442 443    &:active {444      @include gradient-bg($custom-range-thumb-active-bg);445    }446  }447 448  &::-moz-range-track {449    width: $custom-range-track-width;450    height: $custom-range-track-height;451    color: transparent;452    cursor: $custom-range-track-cursor;453    background-color: $custom-range-track-bg;454    border-color: transparent; // Firefox specific?455    @include border-radius($custom-range-track-border-radius);456    @include box-shadow($custom-range-track-box-shadow);457  }458 459  &::-ms-thumb {460    width: $custom-range-thumb-width;461    height: $custom-range-thumb-height;462    margin-top: 0; // Edge specific463    margin-right: $custom-range-thumb-focus-box-shadow-width; // Workaround that overflowed box-shadow is hidden.464    margin-left: $custom-range-thumb-focus-box-shadow-width;  // Workaround that overflowed box-shadow is hidden.465    @include gradient-bg($custom-range-thumb-bg);466    border: $custom-range-thumb-border;467    @include border-radius($custom-range-thumb-border-radius);468    @include box-shadow($custom-range-thumb-box-shadow);469    @include transition($custom-forms-transition);470    appearance: none;471 472    &:active {473      @include gradient-bg($custom-range-thumb-active-bg);474    }475  }476 477  &::-ms-track {478    width: $custom-range-track-width;479    height: $custom-range-track-height;480    color: transparent;481    cursor: $custom-range-track-cursor;482    background-color: transparent;483    border-color: transparent;484    border-width: $custom-range-thumb-height * .5;485    @include box-shadow($custom-range-track-box-shadow);486  }487 488  &::-ms-fill-lower {489    background-color: $custom-range-track-bg;490    @include border-radius($custom-range-track-border-radius);491  }492 493  &::-ms-fill-upper {494    margin-right: 15px; // arbitrary?495    background-color: $custom-range-track-bg;496    @include border-radius($custom-range-track-border-radius);497  }498 499  &:disabled {500    &::-webkit-slider-thumb {501      background-color: $custom-range-thumb-disabled-bg;502    }503 504    &::-webkit-slider-runnable-track {505      cursor: default;506    }507 508    &::-moz-range-thumb {509      background-color: $custom-range-thumb-disabled-bg;510    }511 512    &::-moz-range-track {513      cursor: default;514    }515 516    &::-ms-thumb {517      background-color: $custom-range-thumb-disabled-bg;518    }519  }520}521 522.custom-control-label::before,523.custom-file-label,524.custom-select {525  @include transition($custom-forms-transition);526}527