Skip to content

Instantly share code, notes, and snippets.

@laurentmuller
Created November 23, 2021 11:42
Show Gist options
  • Save laurentmuller/74641b9b17d8905b0f811acdef59bb9b to your computer and use it in GitHub Desktop.
Save laurentmuller/74641b9b17d8905b0f811acdef59bb9b to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// scss-docs-start gray-color-variables
$white: #fff !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #6c757d !default;
$gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #212529 !default;
$black: #000 !default;
// scss-docs-end gray-color-variables
// fusv-disable
// scss-docs-start gray-colors-map
$grays: (
"100": $gray-100,
"200": $gray-200,
"300": $gray-300,
"400": $gray-400,
"500": $gray-500,
"600": $gray-600,
"700": $gray-700,
"800": $gray-800,
"900": $gray-900
) !default;
// scss-docs-end gray-colors-map
// fusv-enable
// scss-docs-start color-variables
$blue: #0d6efd !default;
$indigo: #6610f2 !default;
$purple: #6f42c1 !default;
$pink: #d63384 !default;
$red: #dc3545 !default;
$orange: #fd7e14 !default;
$yellow: #ffc107 !default;
$green: #198754 !default;
$teal: #20c997 !default;
$cyan: #0dcaf0 !default;
// scss-docs-end color-variables
// scss-docs-start colors-map
$colors: (
"blue": $blue,
"indigo": $indigo,
"purple": $purple,
"pink": $pink,
"red": $red,
"orange": $orange,
"yellow": $yellow,
"green": $green,
"teal": $teal,
"cyan": $cyan,
"white": $white,
"gray": $gray-600,
"gray-dark": $gray-800
) !default;
// scss-docs-end colors-map
// scss-docs-start theme-color-variables
$primary: $blue !default;
$secondary: $gray-600 !default;
$success: $green !default;
$info: $cyan !default;
$warning: $yellow !default;
$danger: $red !default;
$light: $gray-100 !default;
$dark: $gray-900 !default;
// scss-docs-end theme-color-variables
// scss-docs-start theme-colors-map
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
) !default;
// Set a specific jump point for requesting color jumps
$theme-color-interval: 8% !default;
// The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255.
$yiq-contrasted-threshold: 150 !default;
$yiq-text-dark: $gray-900 !default;
$yiq-text-light: $white !default;
// scss-docs-end theme-colors-map
// Shade a color: mix a color with black
@function shade-color($color, $weight) {
@return mix(black, $color, $weight);
}
// scss-docs-start color-functions
// Tint a color: mix a color with white
@function tint-color($color, $weight) {
@return mix(white, $color, $weight);
}
// Shade the color if the weight is positive, else tint it
@function shift-color($color, $weight) {
@return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
}
// Color contrast
@function color-yiq($color, $dark: $yiq-text-dark, $light: $yiq-text-light) {
$r: red($color);
$g: green($color);
$b: blue($color);
$yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
@if ($yiq >= $yiq-contrasted-threshold) {
@return $dark;
} @else {
@return $light;
}
}
@each $color, $value in $theme-colors {
/** Tootltip #{$color} */
.tooltip-#{$color}.tooltip.show {
opacity: 1;
}
.tooltip-#{$color}.tooltip.bs-tooltip-top .arrow::before,
.tooltip-#{$color}.tooltip.bs-tooltip-auto[x-placement^="top"] .arrow::before {
border-top-color: $value;
}
.tooltip-#{$color}.tooltip.bs-tooltip-right .arrow::before,
.tooltip-#{$color}.tooltip.bs-tooltip-auto[x-placement^="right"] .arrow::before {
border-right-color: $value;
}
.tooltip-#{$color}.tooltip.bs-tooltip-bottom .arrow::before,
.tooltip-#{$color}.tooltip.bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
border-bottom-color: $value;
}
.tooltip-#{$color}.tooltip.bs-tooltip-left .arrow::before,
.tooltip-#{$color}.tooltip.bs-tooltip-auto[x-placement^="left"] .arrow::before {
border-left-color: $value;
}
.tooltip-#{$color} .tooltip-inner {
color: shift-color($value, 100%);
background-color: $value;
}
}
/**
* Popover@import "bootstrap";
*/
.popover.popover-w-100 {
max-width: 100%;
}
@each $color, $value in $theme-colors {
/** Popover #{$color} */
.popover-#{$color} {
border-color: $value;
}
.popover-#{$color}.popover > .popover-header {
background: $value;
border-color: $value;
color: color-yiq($value);
}
.popover-#{$color}.popover.bs-popover-top > .arrow::before,
.popover-#{$color}.popover.bs-popover-auto[x-placement^="top"] > .arrow::before {
border-top-color: $value;
}
.popover-#{$color}.popover.bs-popover-right > .arrow::before,
.popover-#{$color}.popover.bs-popover-auto[x-placement^="right"] > .arrow::before {
border-right-color: $value;
}
.popover-#{$color}.popover.bs-popover-bottom > .arrow::before,
.popover-#{$color}.popover.bs-popover-auto[x-placement^="bottom"] > .arrow::before {
border-bottom-color: $value;
}
.popover-#{$color}.popover.bs-popover-left > .arrow::before,
.popover-#{$color}.popover.bs-popover-auto[x-placement^="left"] > .arrow::before {
border-left-color: $value;
}
}
@each $color, $value in $theme-colors {
/** Custom-control #{$color} */
.custom-control-#{$color}:checked ~ .custom-control-label::before {
border-color: $value;
background-color: $value;
}
}
/**
* Switch@import "bootstrap";
*/
.custom-switch label.custom-control-label.required:after {
content: ""
}
@each $color, $value in $theme-colors {
/** Custom-switch #{$color} */
.custom-switch .custom-control-input.custom-control-#{$color}:disabled:checked~.custom-control-label::before {
background-color: $value;
opacity: 0.5;
}
}
@each $color, $value in $theme-colors {
/** Custom-checkbox #{$color} */
.custom-checkbox .custom-control-input.custom-control-#{$color}:disabled:checked~.custom-control-label::before {
background-color: $value;
opacity: 0.5;
}
}
@each $color, $value in $theme-colors {
/** Custom-radio #{$color} */
.custom-radio .custom-control-input.custom-control-#{$color}:disabled:checked~.custom-control-label::before {
background-color: $value;
opacity: 0.5;
}
}
/** Tootltip primary */
.tooltip-primary.tooltip.show {
opacity: 1;
}
.tooltip-primary.tooltip.bs-tooltip-top .arrow::before,
.tooltip-primary.tooltip.bs-tooltip-auto[x-placement^=top] .arrow::before {
border-top-color: #0d6efd;
}
.tooltip-primary.tooltip.bs-tooltip-right .arrow::before,
.tooltip-primary.tooltip.bs-tooltip-auto[x-placement^=right] .arrow::before {
border-right-color: #0d6efd;
}
.tooltip-primary.tooltip.bs-tooltip-bottom .arrow::before,
.tooltip-primary.tooltip.bs-tooltip-auto[x-placement^=bottom] .arrow::before {
border-bottom-color: #0d6efd;
}
.tooltip-primary.tooltip.bs-tooltip-left .arrow::before,
.tooltip-primary.tooltip.bs-tooltip-auto[x-placement^=left] .arrow::before {
border-left-color: #0d6efd;
}
.tooltip-primary .tooltip-inner {
color: black;
background-color: #0d6efd;
}
/** Tootltip secondary */
.tooltip-secondary.tooltip.show {
opacity: 1;
}
.tooltip-secondary.tooltip.bs-tooltip-top .arrow::before,
.tooltip-secondary.tooltip.bs-tooltip-auto[x-placement^=top] .arrow::before {
border-top-color: #6c757d;
}
.tooltip-secondary.tooltip.bs-tooltip-right .arrow::before,
.tooltip-secondary.tooltip.bs-tooltip-auto[x-placement^=right] .arrow::before {
border-right-color: #6c757d;
}
.tooltip-secondary.tooltip.bs-tooltip-bottom .arrow::before,
.tooltip-secondary.tooltip.bs-tooltip-auto[x-placement^=bottom] .arrow::before {
border-bottom-color: #6c757d;
}
.tooltip-secondary.tooltip.bs-tooltip-left .arrow::before,
.tooltip-secondary.tooltip.bs-tooltip-auto[x-placement^=left] .arrow::before {
border-left-color: #6c757d;
}
.tooltip-secondary .tooltip-inner {
color: black;
background-color: #6c757d;
}
/** Tootltip success */
.tooltip-success.tooltip.show {
opacity: 1;
}
.tooltip-success.tooltip.bs-tooltip-top .arrow::before,
.tooltip-success.tooltip.bs-tooltip-auto[x-placement^=top] .arrow::before {
border-top-color: #198754;
}
.tooltip-success.tooltip.bs-tooltip-right .arrow::before,
.tooltip-success.tooltip.bs-tooltip-auto[x-placement^=right] .arrow::before {
border-right-color: #198754;
}
.tooltip-success.tooltip.bs-tooltip-bottom .arrow::before,
.tooltip-success.tooltip.bs-tooltip-auto[x-placement^=bottom] .arrow::before {
border-bottom-color: #198754;
}
.tooltip-success.tooltip.bs-tooltip-left .arrow::before,
.tooltip-success.tooltip.bs-tooltip-auto[x-placement^=left] .arrow::before {
border-left-color: #198754;
}
.tooltip-success .tooltip-inner {
color: black;
background-color: #198754;
}
/** Tootltip info */
.tooltip-info.tooltip.show {
opacity: 1;
}
.tooltip-info.tooltip.bs-tooltip-top .arrow::before,
.tooltip-info.tooltip.bs-tooltip-auto[x-placement^=top] .arrow::before {
border-top-color: #0dcaf0;
}
.tooltip-info.tooltip.bs-tooltip-right .arrow::before,
.tooltip-info.tooltip.bs-tooltip-auto[x-placement^=right] .arrow::before {
border-right-color: #0dcaf0;
}
.tooltip-info.tooltip.bs-tooltip-bottom .arrow::before,
.tooltip-info.tooltip.bs-tooltip-auto[x-placement^=bottom] .arrow::before {
border-bottom-color: #0dcaf0;
}
.tooltip-info.tooltip.bs-tooltip-left .arrow::before,
.tooltip-info.tooltip.bs-tooltip-auto[x-placement^=left] .arrow::before {
border-left-color: #0dcaf0;
}
.tooltip-info .tooltip-inner {
color: black;
background-color: #0dcaf0;
}
/** Tootltip warning */
.tooltip-warning.tooltip.show {
opacity: 1;
}
.tooltip-warning.tooltip.bs-tooltip-top .arrow::before,
.tooltip-warning.tooltip.bs-tooltip-auto[x-placement^=top] .arrow::before {
border-top-color: #ffc107;
}
.tooltip-warning.tooltip.bs-tooltip-right .arrow::before,
.tooltip-warning.tooltip.bs-tooltip-auto[x-placement^=right] .arrow::before {
border-right-color: #ffc107;
}
.tooltip-warning.tooltip.bs-tooltip-bottom .arrow::before,
.tooltip-warning.tooltip.bs-tooltip-auto[x-placement^=bottom] .arrow::before {
border-bottom-color: #ffc107;
}
.tooltip-warning.tooltip.bs-tooltip-left .arrow::before,
.tooltip-warning.tooltip.bs-tooltip-auto[x-placement^=left] .arrow::before {
border-left-color: #ffc107;
}
.tooltip-warning .tooltip-inner {
color: black;
background-color: #ffc107;
}
/** Tootltip danger */
.tooltip-danger.tooltip.show {
opacity: 1;
}
.tooltip-danger.tooltip.bs-tooltip-top .arrow::before,
.tooltip-danger.tooltip.bs-tooltip-auto[x-placement^=top] .arrow::before {
border-top-color: #dc3545;
}
.tooltip-danger.tooltip.bs-tooltip-right .arrow::before,
.tooltip-danger.tooltip.bs-tooltip-auto[x-placement^=right] .arrow::before {
border-right-color: #dc3545;
}
.tooltip-danger.tooltip.bs-tooltip-bottom .arrow::before,
.tooltip-danger.tooltip.bs-tooltip-auto[x-placement^=bottom] .arrow::before {
border-bottom-color: #dc3545;
}
.tooltip-danger.tooltip.bs-tooltip-left .arrow::before,
.tooltip-danger.tooltip.bs-tooltip-auto[x-placement^=left] .arrow::before {
border-left-color: #dc3545;
}
.tooltip-danger .tooltip-inner {
color: black;
background-color: #dc3545;
}
/** Tootltip light */
.tooltip-light.tooltip.show {
opacity: 1;
}
.tooltip-light.tooltip.bs-tooltip-top .arrow::before,
.tooltip-light.tooltip.bs-tooltip-auto[x-placement^=top] .arrow::before {
border-top-color: #f8f9fa;
}
.tooltip-light.tooltip.bs-tooltip-right .arrow::before,
.tooltip-light.tooltip.bs-tooltip-auto[x-placement^=right] .arrow::before {
border-right-color: #f8f9fa;
}
.tooltip-light.tooltip.bs-tooltip-bottom .arrow::before,
.tooltip-light.tooltip.bs-tooltip-auto[x-placement^=bottom] .arrow::before {
border-bottom-color: #f8f9fa;
}
.tooltip-light.tooltip.bs-tooltip-left .arrow::before,
.tooltip-light.tooltip.bs-tooltip-auto[x-placement^=left] .arrow::before {
border-left-color: #f8f9fa;
}
.tooltip-light .tooltip-inner {
color: black;
background-color: #f8f9fa;
}
/** Tootltip dark */
.tooltip-dark.tooltip.show {
opacity: 1;
}
.tooltip-dark.tooltip.bs-tooltip-top .arrow::before,
.tooltip-dark.tooltip.bs-tooltip-auto[x-placement^=top] .arrow::before {
border-top-color: #212529;
}
.tooltip-dark.tooltip.bs-tooltip-right .arrow::before,
.tooltip-dark.tooltip.bs-tooltip-auto[x-placement^=right] .arrow::before {
border-right-color: #212529;
}
.tooltip-dark.tooltip.bs-tooltip-bottom .arrow::before,
.tooltip-dark.tooltip.bs-tooltip-auto[x-placement^=bottom] .arrow::before {
border-bottom-color: #212529;
}
.tooltip-dark.tooltip.bs-tooltip-left .arrow::before,
.tooltip-dark.tooltip.bs-tooltip-auto[x-placement^=left] .arrow::before {
border-left-color: #212529;
}
.tooltip-dark .tooltip-inner {
color: black;
background-color: #212529;
}
/**
* Popover@import "bootstrap";
*/
.popover.popover-w-100 {
max-width: 100%;
}
/** Popover primary */
.popover-primary {
border-color: #0d6efd;
}
.popover-primary.popover > .popover-header {
background: #0d6efd;
border-color: #0d6efd;
color: #fff;
}
.popover-primary.popover.bs-popover-top > .arrow::before,
.popover-primary.popover.bs-popover-auto[x-placement^=top] > .arrow::before {
border-top-color: #0d6efd;
}
.popover-primary.popover.bs-popover-right > .arrow::before,
.popover-primary.popover.bs-popover-auto[x-placement^=right] > .arrow::before {
border-right-color: #0d6efd;
}
.popover-primary.popover.bs-popover-bottom > .arrow::before,
.popover-primary.popover.bs-popover-auto[x-placement^=bottom] > .arrow::before {
border-bottom-color: #0d6efd;
}
.popover-primary.popover.bs-popover-left > .arrow::before,
.popover-primary.popover.bs-popover-auto[x-placement^=left] > .arrow::before {
border-left-color: #0d6efd;
}
/** Popover secondary */
.popover-secondary {
border-color: #6c757d;
}
.popover-secondary.popover > .popover-header {
background: #6c757d;
border-color: #6c757d;
color: #fff;
}
.popover-secondary.popover.bs-popover-top > .arrow::before,
.popover-secondary.popover.bs-popover-auto[x-placement^=top] > .arrow::before {
border-top-color: #6c757d;
}
.popover-secondary.popover.bs-popover-right > .arrow::before,
.popover-secondary.popover.bs-popover-auto[x-placement^=right] > .arrow::before {
border-right-color: #6c757d;
}
.popover-secondary.popover.bs-popover-bottom > .arrow::before,
.popover-secondary.popover.bs-popover-auto[x-placement^=bottom] > .arrow::before {
border-bottom-color: #6c757d;
}
.popover-secondary.popover.bs-popover-left > .arrow::before,
.popover-secondary.popover.bs-popover-auto[x-placement^=left] > .arrow::before {
border-left-color: #6c757d;
}
/** Popover success */
.popover-success {
border-color: #198754;
}
.popover-success.popover > .popover-header {
background: #198754;
border-color: #198754;
color: #fff;
}
.popover-success.popover.bs-popover-top > .arrow::before,
.popover-success.popover.bs-popover-auto[x-placement^=top] > .arrow::before {
border-top-color: #198754;
}
.popover-success.popover.bs-popover-right > .arrow::before,
.popover-success.popover.bs-popover-auto[x-placement^=right] > .arrow::before {
border-right-color: #198754;
}
.popover-success.popover.bs-popover-bottom > .arrow::before,
.popover-success.popover.bs-popover-auto[x-placement^=bottom] > .arrow::before {
border-bottom-color: #198754;
}
.popover-success.popover.bs-popover-left > .arrow::before,
.popover-success.popover.bs-popover-auto[x-placement^=left] > .arrow::before {
border-left-color: #198754;
}
/** Popover info */
.popover-info {
border-color: #0dcaf0;
}
.popover-info.popover > .popover-header {
background: #0dcaf0;
border-color: #0dcaf0;
color: #fff;
}
.popover-info.popover.bs-popover-top > .arrow::before,
.popover-info.popover.bs-popover-auto[x-placement^=top] > .arrow::before {
border-top-color: #0dcaf0;
}
.popover-info.popover.bs-popover-right > .arrow::before,
.popover-info.popover.bs-popover-auto[x-placement^=right] > .arrow::before {
border-right-color: #0dcaf0;
}
.popover-info.popover.bs-popover-bottom > .arrow::before,
.popover-info.popover.bs-popover-auto[x-placement^=bottom] > .arrow::before {
border-bottom-color: #0dcaf0;
}
.popover-info.popover.bs-popover-left > .arrow::before,
.popover-info.popover.bs-popover-auto[x-placement^=left] > .arrow::before {
border-left-color: #0dcaf0;
}
/** Popover warning */
.popover-warning {
border-color: #ffc107;
}
.popover-warning.popover > .popover-header {
background: #ffc107;
border-color: #ffc107;
color: #212529;
}
.popover-warning.popover.bs-popover-top > .arrow::before,
.popover-warning.popover.bs-popover-auto[x-placement^=top] > .arrow::before {
border-top-color: #ffc107;
}
.popover-warning.popover.bs-popover-right > .arrow::before,
.popover-warning.popover.bs-popover-auto[x-placement^=right] > .arrow::before {
border-right-color: #ffc107;
}
.popover-warning.popover.bs-popover-bottom > .arrow::before,
.popover-warning.popover.bs-popover-auto[x-placement^=bottom] > .arrow::before {
border-bottom-color: #ffc107;
}
.popover-warning.popover.bs-popover-left > .arrow::before,
.popover-warning.popover.bs-popover-auto[x-placement^=left] > .arrow::before {
border-left-color: #ffc107;
}
/** Popover danger */
.popover-danger {
border-color: #dc3545;
}
.popover-danger.popover > .popover-header {
background: #dc3545;
border-color: #dc3545;
color: #fff;
}
.popover-danger.popover.bs-popover-top > .arrow::before,
.popover-danger.popover.bs-popover-auto[x-placement^=top] > .arrow::before {
border-top-color: #dc3545;
}
.popover-danger.popover.bs-popover-right > .arrow::before,
.popover-danger.popover.bs-popover-auto[x-placement^=right] > .arrow::before {
border-right-color: #dc3545;
}
.popover-danger.popover.bs-popover-bottom > .arrow::before,
.popover-danger.popover.bs-popover-auto[x-placement^=bottom] > .arrow::before {
border-bottom-color: #dc3545;
}
.popover-danger.popover.bs-popover-left > .arrow::before,
.popover-danger.popover.bs-popover-auto[x-placement^=left] > .arrow::before {
border-left-color: #dc3545;
}
/** Popover light */
.popover-light {
border-color: #f8f9fa;
}
.popover-light.popover > .popover-header {
background: #f8f9fa;
border-color: #f8f9fa;
color: #212529;
}
.popover-light.popover.bs-popover-top > .arrow::before,
.popover-light.popover.bs-popover-auto[x-placement^=top] > .arrow::before {
border-top-color: #f8f9fa;
}
.popover-light.popover.bs-popover-right > .arrow::before,
.popover-light.popover.bs-popover-auto[x-placement^=right] > .arrow::before {
border-right-color: #f8f9fa;
}
.popover-light.popover.bs-popover-bottom > .arrow::before,
.popover-light.popover.bs-popover-auto[x-placement^=bottom] > .arrow::before {
border-bottom-color: #f8f9fa;
}
.popover-light.popover.bs-popover-left > .arrow::before,
.popover-light.popover.bs-popover-auto[x-placement^=left] > .arrow::before {
border-left-color: #f8f9fa;
}
/** Popover dark */
.popover-dark {
border-color: #212529;
}
.popover-dark.popover > .popover-header {
background: #212529;
border-color: #212529;
color: #fff;
}
.popover-dark.popover.bs-popover-top > .arrow::before,
.popover-dark.popover.bs-popover-auto[x-placement^=top] > .arrow::before {
border-top-color: #212529;
}
.popover-dark.popover.bs-popover-right > .arrow::before,
.popover-dark.popover.bs-popover-auto[x-placement^=right] > .arrow::before {
border-right-color: #212529;
}
.popover-dark.popover.bs-popover-bottom > .arrow::before,
.popover-dark.popover.bs-popover-auto[x-placement^=bottom] > .arrow::before {
border-bottom-color: #212529;
}
.popover-dark.popover.bs-popover-left > .arrow::before,
.popover-dark.popover.bs-popover-auto[x-placement^=left] > .arrow::before {
border-left-color: #212529;
}
/** Custom-control primary */
.custom-control-primary:checked ~ .custom-control-label::before {
border-color: #0d6efd;
background-color: #0d6efd;
}
/** Custom-control secondary */
.custom-control-secondary:checked ~ .custom-control-label::before {
border-color: #6c757d;
background-color: #6c757d;
}
/** Custom-control success */
.custom-control-success:checked ~ .custom-control-label::before {
border-color: #198754;
background-color: #198754;
}
/** Custom-control info */
.custom-control-info:checked ~ .custom-control-label::before {
border-color: #0dcaf0;
background-color: #0dcaf0;
}
/** Custom-control warning */
.custom-control-warning:checked ~ .custom-control-label::before {
border-color: #ffc107;
background-color: #ffc107;
}
/** Custom-control danger */
.custom-control-danger:checked ~ .custom-control-label::before {
border-color: #dc3545;
background-color: #dc3545;
}
/** Custom-control light */
.custom-control-light:checked ~ .custom-control-label::before {
border-color: #f8f9fa;
background-color: #f8f9fa;
}
/** Custom-control dark */
.custom-control-dark:checked ~ .custom-control-label::before {
border-color: #212529;
background-color: #212529;
}
/**
* Switch@import "bootstrap";
*/
.custom-switch label.custom-control-label.required:after {
content: "";
}
/** Custom-switch primary */
.custom-switch .custom-control-input.custom-control-primary:disabled:checked ~ .custom-control-label::before {
background-color: #0d6efd;
opacity: 0.5;
}
/** Custom-switch secondary */
.custom-switch .custom-control-input.custom-control-secondary:disabled:checked ~ .custom-control-label::before {
background-color: #6c757d;
opacity: 0.5;
}
/** Custom-switch success */
.custom-switch .custom-control-input.custom-control-success:disabled:checked ~ .custom-control-label::before {
background-color: #198754;
opacity: 0.5;
}
/** Custom-switch info */
.custom-switch .custom-control-input.custom-control-info:disabled:checked ~ .custom-control-label::before {
background-color: #0dcaf0;
opacity: 0.5;
}
/** Custom-switch warning */
.custom-switch .custom-control-input.custom-control-warning:disabled:checked ~ .custom-control-label::before {
background-color: #ffc107;
opacity: 0.5;
}
/** Custom-switch danger */
.custom-switch .custom-control-input.custom-control-danger:disabled:checked ~ .custom-control-label::before {
background-color: #dc3545;
opacity: 0.5;
}
/** Custom-switch light */
.custom-switch .custom-control-input.custom-control-light:disabled:checked ~ .custom-control-label::before {
background-color: #f8f9fa;
opacity: 0.5;
}
/** Custom-switch dark */
.custom-switch .custom-control-input.custom-control-dark:disabled:checked ~ .custom-control-label::before {
background-color: #212529;
opacity: 0.5;
}
/** Custom-checkbox primary */
.custom-checkbox .custom-control-input.custom-control-primary:disabled:checked ~ .custom-control-label::before {
background-color: #0d6efd;
opacity: 0.5;
}
/** Custom-checkbox secondary */
.custom-checkbox .custom-control-input.custom-control-secondary:disabled:checked ~ .custom-control-label::before {
background-color: #6c757d;
opacity: 0.5;
}
/** Custom-checkbox success */
.custom-checkbox .custom-control-input.custom-control-success:disabled:checked ~ .custom-control-label::before {
background-color: #198754;
opacity: 0.5;
}
/** Custom-checkbox info */
.custom-checkbox .custom-control-input.custom-control-info:disabled:checked ~ .custom-control-label::before {
background-color: #0dcaf0;
opacity: 0.5;
}
/** Custom-checkbox warning */
.custom-checkbox .custom-control-input.custom-control-warning:disabled:checked ~ .custom-control-label::before {
background-color: #ffc107;
opacity: 0.5;
}
/** Custom-checkbox danger */
.custom-checkbox .custom-control-input.custom-control-danger:disabled:checked ~ .custom-control-label::before {
background-color: #dc3545;
opacity: 0.5;
}
/** Custom-checkbox light */
.custom-checkbox .custom-control-input.custom-control-light:disabled:checked ~ .custom-control-label::before {
background-color: #f8f9fa;
opacity: 0.5;
}
/** Custom-checkbox dark */
.custom-checkbox .custom-control-input.custom-control-dark:disabled:checked ~ .custom-control-label::before {
background-color: #212529;
opacity: 0.5;
}
/** Custom-radio primary */
.custom-radio .custom-control-input.custom-control-primary:disabled:checked ~ .custom-control-label::before {
background-color: #0d6efd;
opacity: 0.5;
}
/** Custom-radio secondary */
.custom-radio .custom-control-input.custom-control-secondary:disabled:checked ~ .custom-control-label::before {
background-color: #6c757d;
opacity: 0.5;
}
/** Custom-radio success */
.custom-radio .custom-control-input.custom-control-success:disabled:checked ~ .custom-control-label::before {
background-color: #198754;
opacity: 0.5;
}
/** Custom-radio info */
.custom-radio .custom-control-input.custom-control-info:disabled:checked ~ .custom-control-label::before {
background-color: #0dcaf0;
opacity: 0.5;
}
/** Custom-radio warning */
.custom-radio .custom-control-input.custom-control-warning:disabled:checked ~ .custom-control-label::before {
background-color: #ffc107;
opacity: 0.5;
}
/** Custom-radio danger */
.custom-radio .custom-control-input.custom-control-danger:disabled:checked ~ .custom-control-label::before {
background-color: #dc3545;
opacity: 0.5;
}
/** Custom-radio light */
.custom-radio .custom-control-input.custom-control-light:disabled:checked ~ .custom-control-label::before {
background-color: #f8f9fa;
opacity: 0.5;
}
/** Custom-radio dark */
.custom-radio .custom-control-input.custom-control-dark:disabled:checked ~ .custom-control-label::before {
background-color: #212529;
opacity: 0.5;
}
{
"sass": {
"compiler": "dart-sass/1.32.12",
"extensions": {},
"syntax": "SCSS",
"outputStyle": "expanded"
},
"autoprefixer": false
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment