Last active
May 2, 2023 14:20
-
-
Save ultrafunkamsterdam/67d1166b6088dc829fb33b5ff0d76728 to your computer and use it in GitHub Desktop.
Bootstrap 5.3 scss/css to create custom color class prefixes and custom scrollbar gradient shade
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import '../node_modules/bootstrap/scss/functions'; | |
| @import '../node_modules/bootstrap/scss/mixins'; | |
| @import '../node_modules/bootstrap/scss/variables'; | |
| @import '../node_modules/bootstrap/scss/variables-dark'; | |
| @import '../node_modules/bootstrap/scss/maps'; | |
| /* make sure you have installed bootstrap 5.3 or later! | |
| in earlier versions this won't work | |
| --- | |
| at the time of writing: | |
| >>> npm install [email protected] | |
| ... Oh! don't forget to import style.scss in your main component ... | |
| */ | |
| /* --------------------------------------------------------- | |
| * custom colors | |
| * --------------------------------------------------------- | |
| * | |
| * these will be inherited by all "utility" classes as well | |
| * | |
| * for example below, i defined a kawa -prefix with main color kawa-green | |
| * which can be used just as -primary, -danger, -success, -warning | |
| * it even calculates the shades and tints and applies them to hover, borders etc.. | |
| * | |
| * example use | |
| * | |
| * <button class="btn btn-kawa"> | |
| * <p style="color: var(--bs-kawa-300)"> | |
| * HiKawa | |
| * </p> | |
| * </button> | |
| * | |
| */ | |
| $kawa-green: #69be28; | |
| $custom-theme-colors: map-merge($theme-colors, ( | |
| "kawa": $kawa-green | |
| )); | |
| $theme-colors: map-merge($theme-colors, $custom-theme-colors); | |
| $theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value"); | |
| $utilities-colors: map-merge($utilities-colors, $theme-colors-rgb); | |
| $utilities-text-colors: map-loop($utilities-colors, rgba-css-var, "$key", "text"); | |
| $utilities-bg-colors: map-loop($utilities-colors, rgba-css-var, "$key", "bg"); | |
| /* end custom colors */ | |
| /* scrollbar custom shade gradient */ | |
| $scrollbar-color: rgba(96, 96, 96, .8) linear-gradient(0deg, rgba(34, 34, 34, 0.5) 20%, rgba(68, 68, 68, 1) 50%, rgba(34, 34, 34, 0.5) 80%); | |
| $scrollbar-color-rgb: rgba(96, 96, 96, .8); | |
| $scrollbar-bg: linear-gradient(0deg, rgba(34, 34, 34, 0.5) 20%, rgba(68, 68, 68, 1) 50%, rgba(34, 34, 34, 0.5) 80%); | |
| $scrollbar-bg-rgb: rgba(34, 34, 34, .5); | |
| /* this makes the scrollbar a bit smaller. | |
| * a matter of preference of course, | |
| * but since 75% web traffic is mobile (and so uses swiping). | |
| * i find those wide 90's style scrollbars unnecessary. | |
| * | |
| * to actually enable/apply the customizations. the html element in this case | |
| * should get class "custom-scrollbar" | |
| */ | |
| .custom-scrollbar { | |
| scrollbar-color: $scrollbar-color; | |
| } | |
| .custom-scrollbar::-webkit-scrollbar { | |
| width: .5rem; | |
| height: .5rem; | |
| } | |
| .custom-scrollbar::-webkit-scrollbar { | |
| width: .5rem; | |
| height: .5rem; | |
| } | |
| .custom-scrollbar::-webkit-scrollbar-track { /* track = background */ | |
| background: $scrollbar-bg-rgb; | |
| background: $scrollbar-bg | |
| } | |
| .custom-scrollbar::-webkit-scrollbar-thumb { /* thumb = foreground*/ | |
| background: $scrollbar-color-rgb; | |
| } | |
| /* required : also in this order .. after defining customizations */ | |
| @import '../node_modules/bootstrap/scss/bootstrap'; | |
| /* optional */ | |
| @import '../node_modules/bootstrap-icons/font/bootstrap-icons'; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| create your own color mode besides light and dark. | |
| example here i choose for "weird" . so the html element should get: | |
| <html data-bs-theme="weird"> | |
| ... | |
| </html> | |
| */ | |
| [data-bs-theme="weird"] { | |
| --bs-body-color: var(--bs-white); | |
| --bs-body-color-rgb: #{to-rgb($white)}; | |
| --bs-body-bg: var(--bs-blue); | |
| --bs-body-bg-rgb: #{to-rgb($blue)}; | |
| --bs-tertiary-bg: #{$blue-600}; | |
| .dropdown-menu { | |
| --bs-dropdown-bg: #{mix($blue-500, $blue-600)}; | |
| --bs-dropdown-link-active-bg: #{$blue-700}; | |
| } | |
| .btn-secondary { | |
| --bs-btn-bg: #{mix($gray-600, $blue-400, .5)}; | |
| --bs-btn-border-color: #{rgba($white, .25)}; | |
| --bs-btn-hover-bg: #{darken(mix($gray-600, $blue-400, .5), 5%)}; | |
| --bs-btn-hover-border-color: #{rgba($white, .25)}; | |
| --bs-btn-active-bg: #{darken(mix($gray-600, $blue-400, .5), 10%)}; | |
| --bs-btn-active-border-color: #{rgba($white, .5)}; | |
| --bs-btn-focus-border-color: #{rgba($white, .5)}; | |
| --bs-btn-focus-box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .2); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment