Initial commit
This commit is contained in:
Nasir Anthony Montalvo
GitHub
134
_sass/_base.scss
Normal file
134
_sass/_base.scss
Normal file
@@ -0,0 +1,134 @@
|
||||
/*
|
||||
base - slight modifications to override base Bootstrap
|
||||
these values are configurable using theme.yml > Theme Fonts area
|
||||
or by editing base variables in cb.scss
|
||||
*/
|
||||
|
||||
/* set up base variable to override from cb.scss */
|
||||
$base-font-family: "" !default;
|
||||
$base-font-size: "" !default;
|
||||
$text-color: "" !default;
|
||||
$link-color: "" !default;
|
||||
|
||||
/* smooth scroll for back to top, unless user opt out */
|
||||
html {
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
}
|
||||
|
||||
/* set font base set in theme.yml */
|
||||
body {
|
||||
@if $base-font-family != "" { font-family: $base-font-family; }
|
||||
@if $base-font-size != "" { font-size: $base-font-size; }
|
||||
@if $text-color != "" { color: $text-color; }
|
||||
}
|
||||
a {
|
||||
/* remove link underline */
|
||||
text-decoration: none;
|
||||
@if $link-color != "" {
|
||||
color: $link-color;
|
||||
&:hover {
|
||||
@if $text-color != "" { color: $text-color; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* skip nav for accessibility, based on https://webaim.org/techniques/skipnav/ */
|
||||
#skip-to-content a {
|
||||
padding:6px;
|
||||
position: absolute;
|
||||
top:-100px;
|
||||
left:0px;
|
||||
color:white;
|
||||
border-right:1px solid white;
|
||||
border-bottom:1px solid white;
|
||||
border-bottom-right-radius:8px;
|
||||
background:#BF1722;
|
||||
-webkit-transition: top 1s ease-out;
|
||||
transition: top 1s ease-out;
|
||||
z-index: 100;
|
||||
}
|
||||
#skip-to-content a:focus {
|
||||
position:absolute;
|
||||
left:0px;
|
||||
top:0px;
|
||||
outline-color:transparent;
|
||||
-webkit-transition: top .1s ease-in;
|
||||
transition: top .1s ease-in;
|
||||
}
|
||||
|
||||
/* banner */
|
||||
#home-banner-logo {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
/* nav bar */
|
||||
#mobile-nav-image {
|
||||
max-height: 1.5em;
|
||||
}
|
||||
|
||||
/* footer */
|
||||
#footer-logo {
|
||||
height: 50px;
|
||||
}
|
||||
#footer-credits {
|
||||
img { height: 40px; }
|
||||
}
|
||||
|
||||
#footer-nav .nav-link.active, #footer-nav .show > .nav-link {
|
||||
color: #fff;
|
||||
border: solid white 1px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
#footer-nav .nav-link:hover {
|
||||
color: white;
|
||||
background: rgba(255,255,255,.10);
|
||||
}
|
||||
|
||||
/* scroll to top */
|
||||
#scroll-to-top {
|
||||
display: none;
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
z-index: 99;
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
/* feature include tweaks */
|
||||
.feature-alert p:last-of-type { margin-bottom: 0; }
|
||||
@media (min-width: 768px) {
|
||||
.feature-w-25 {
|
||||
width: 25%!important;
|
||||
}
|
||||
.feature-w-50 {
|
||||
width: 50%!important;
|
||||
}
|
||||
.feature-w-75 {
|
||||
width: 75%!important;
|
||||
}
|
||||
.feature-w-100 {
|
||||
width: 100%!important;
|
||||
}
|
||||
.feature-float-end {
|
||||
float: right!important;
|
||||
}
|
||||
.feature-float-start {
|
||||
float: left!important;
|
||||
}
|
||||
}
|
||||
|
||||
/* bootstrap icons tweaks */
|
||||
.bi {
|
||||
display: inline-block;
|
||||
fill: currentColor;
|
||||
vertical-align: text-bottom;
|
||||
overflow: hidden;
|
||||
}
|
||||
.icon-sprite {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
vertical-align: -0.1em;
|
||||
}
|
||||
4
_sass/_custom.scss
Normal file
4
_sass/_custom.scss
Normal file
@@ -0,0 +1,4 @@
|
||||
/*
|
||||
Put your custom SCSS here!
|
||||
This allows you to override any CollectionBuilder or Bootstrap CSS without modifying the base theme files directly.
|
||||
*/
|
||||
315
_sass/_pages.scss
Normal file
315
_sass/_pages.scss
Normal file
@@ -0,0 +1,315 @@
|
||||
/*
|
||||
pages - style tweaks related to individual CB pages
|
||||
although most presentation is controlled by Bootstrap classes, these styles are necessary for default visualization pages to function correctly
|
||||
*/
|
||||
|
||||
/* set up base variable to override from cb.scss */
|
||||
$toc-a-color: #191919 !default;
|
||||
|
||||
/* index */
|
||||
.carousel-item-title{
|
||||
background-color: rgba(37, 36, 36, 0.72);
|
||||
}
|
||||
|
||||
/* item page */
|
||||
.gallery-img {
|
||||
cursor: pointer;
|
||||
}
|
||||
#item-nav {
|
||||
a {
|
||||
position: absolute;
|
||||
top:500px;
|
||||
}
|
||||
.previous { left:10px; }
|
||||
.next{ right:10px; }
|
||||
}
|
||||
.breadcrumb {
|
||||
padding: 0.75rem 1rem;
|
||||
background-color: rgb(248, 249, 250);
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
.compound-thumb {
|
||||
max-height: 110px;
|
||||
max-width: 90%;
|
||||
}
|
||||
// compound object big modal class
|
||||
@media (min-width:576px){
|
||||
.modal-xxl{ max-width:90%; }
|
||||
}
|
||||
@media (min-width:992px){
|
||||
.modal-xxl{ max-width:90%; }
|
||||
}
|
||||
@media (min-width:1200px){
|
||||
.modal-xxl{ max-width: 90%; }
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* browse */
|
||||
|
||||
.date-range-inputs {
|
||||
display: none;
|
||||
flex: 1; /* Allow it to grow/shrink with available space */
|
||||
min-width: 200px; /* Prevent it from getting too small */
|
||||
}
|
||||
|
||||
.date-range-inputs.active {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.date-input-group {
|
||||
display: flex;
|
||||
flex-wrap: nowrap; /* Keep inputs on same line */
|
||||
gap: 0.25rem; /* Reduce gap to save space */
|
||||
align-items: center;
|
||||
margin-top: 0; /* Remove top margin to align with search box */
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.date-input-group label {
|
||||
margin: 0;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.date-input-group input {
|
||||
flex: 1;
|
||||
min-width: 80px; /* Reduce minimum width */
|
||||
height: calc(1.5em + 0.75rem + 2px); /* Match Bootstrap form-control height */
|
||||
padding: 1.35rem 0.5rem; /* Reduce padding to save space */
|
||||
border: 1px solid #ced4da;
|
||||
border-radius: 0.25rem; /* Add border radius back for consistency */
|
||||
font-size: 1rem; /* Match main input font size */
|
||||
}
|
||||
|
||||
/* Specific styling for date inputs in advanced search modal */
|
||||
.modal .date-input-group input {
|
||||
padding: 0.25rem 0.5rem; /* Smaller padding for modal */
|
||||
font-size: 0.875rem; /* Smaller font size to match form-control-sm */
|
||||
height: calc(1.5em + 0.5rem + 2px); /* Adjust height for smaller inputs */
|
||||
}
|
||||
|
||||
.date-separator {
|
||||
font-size: 0.875rem;
|
||||
color: #6c757d;
|
||||
padding: 0 0.25rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.date-range-inputs {
|
||||
width: auto; /* Let it size naturally instead of fixed 60% */
|
||||
min-width: 180px; /* Smaller minimum on mobile */
|
||||
}
|
||||
|
||||
.date-input-group {
|
||||
gap: 0.125rem; /* Even smaller gap on mobile */
|
||||
}
|
||||
|
||||
.date-input-group input {
|
||||
min-width: 60px; /* Smaller inputs on mobile */
|
||||
padding: 1.75rem 0.25rem; /* Less padding on mobile */
|
||||
}
|
||||
|
||||
/* Keep modal inputs small on mobile too */
|
||||
.modal .date-input-group input {
|
||||
padding: 0.25rem 0.375rem;
|
||||
}
|
||||
|
||||
.date-separator {
|
||||
padding: 0 0.125rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* map */
|
||||
#mapContainer { height: 750px; z-index: 98; }
|
||||
.map-thumb {
|
||||
height: 100px;
|
||||
max-width: 100%;
|
||||
}
|
||||
.leaflet-fusesearch-panel .header {
|
||||
padding-bottom: 1.5em;
|
||||
}
|
||||
|
||||
/* timeline */
|
||||
.timeline-thumb {
|
||||
max-height: 250px;
|
||||
max-width: 100%;
|
||||
}
|
||||
/* subjects */
|
||||
.tagcloud0{font-size:0.4em;}
|
||||
.tagcloud1{font-size:0.5em;}
|
||||
.tagcloud2{font-size:0.8em;}
|
||||
.tagcloud3{font-size:1.1em;}
|
||||
.tagcloud4{font-size:1.4em;}
|
||||
.tagcloud5{font-size:1.6em;}
|
||||
.tagcloud6{font-size:1.9em;}
|
||||
.tagcloud7{font-size:2.2em;}
|
||||
.tagcloud8{font-size:2.5em;}
|
||||
.tagcloud9{font-size:2.8em;}
|
||||
.tagcloud10{font-size:3.0em;}
|
||||
|
||||
/* About */
|
||||
/* side nav toc */
|
||||
// mobile style
|
||||
#about-toc-wrapper {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 99;
|
||||
width: 100%;
|
||||
background-color: var(--bs-body-bg);
|
||||
}
|
||||
#about-toc-title {
|
||||
button {
|
||||
width: 100%;
|
||||
background-color: #dedede;
|
||||
}
|
||||
}
|
||||
#about-toc-list {
|
||||
padding: 1rem 3rem;
|
||||
}
|
||||
.jekyll-toc-list {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
font-style: italic;
|
||||
|
||||
ul, ol {
|
||||
padding-left: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
> li {
|
||||
font-size: 15px;
|
||||
line-height: 1.2;
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
li li {
|
||||
font-size: 13px;
|
||||
line-height: 1.2;
|
||||
padding-top: 7px;
|
||||
margin-left: 15px;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $toc-a-color !important;
|
||||
}
|
||||
}
|
||||
#about-contents-wrapper {
|
||||
padding: 1rem;
|
||||
}
|
||||
// desktop style
|
||||
@media (min-width: 992px) {
|
||||
#about-wrapper {
|
||||
display: grid;
|
||||
grid-column-gap: 1.2rem;
|
||||
grid-row-gap: 0;
|
||||
grid-template-areas:
|
||||
"sidebar main"
|
||||
"sidebar credits";
|
||||
grid-template-columns: 1fr 6fr;
|
||||
}
|
||||
#about-toc-wrapper {
|
||||
grid-area: sidebar;
|
||||
position: initial;
|
||||
}
|
||||
#about-contents-wrapper {
|
||||
grid-area: main;
|
||||
order: 1;
|
||||
min-width:0;
|
||||
padding: 2rem 5rem 0 3rem;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
/* creating a narrow text column */
|
||||
#about-contents-wrapper > {
|
||||
h2 {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin: 1.5rem 0 1rem;
|
||||
}
|
||||
|
||||
p, .about-narrowed-content, .narrow-content, hr, .footnotes, ol, ul, blockquote {
|
||||
max-width: 750px;
|
||||
}
|
||||
}
|
||||
#credits-contents-wrapper {
|
||||
grid-area: credits;
|
||||
order: 2;
|
||||
min-width:0;
|
||||
}
|
||||
#about-toc {
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
#about-toc-title { display: none; }
|
||||
#about-toc-list {
|
||||
display: block;
|
||||
padding: 2rem 0 2rem 1rem;
|
||||
}
|
||||
.jekyll-toc-list {
|
||||
padding: 1rem;
|
||||
//border: 1px solid #dee2e6;
|
||||
//border-radius: 0.25rem;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
font-style: italic;
|
||||
|
||||
ul, ol {
|
||||
padding-left: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
> li {
|
||||
font-size: 15px;
|
||||
line-height: 1.2;
|
||||
padding: 7px 0;
|
||||
}
|
||||
|
||||
li li {
|
||||
font-size: 13px;
|
||||
line-height: 1.2;
|
||||
padding-top: 7px;
|
||||
margin-left: 15px;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $toc-a-color !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* page-narrow layout narrow text block */
|
||||
.page-narrow {
|
||||
max-width: 750px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
/* about-narrow layout styles */
|
||||
.about-narrow-contents > {
|
||||
h2 {
|
||||
font-weight: bold;
|
||||
padding-top: 100px;
|
||||
border-top: 1px dotted black;
|
||||
}
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
max-width: 650px;
|
||||
margin: 1.5rem auto 1rem;
|
||||
}
|
||||
p, .narrow-content, hr, .footnotes, ol, ul, blockquote {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 650px;
|
||||
}
|
||||
.feature-include {
|
||||
text-align: center !important;
|
||||
}
|
||||
}
|
||||
290
_sass/_theme-colors.scss
Normal file
290
_sass/_theme-colors.scss
Normal file
@@ -0,0 +1,290 @@
|
||||
/*
|
||||
This is a modified version of Bootstrap Sass for customizing theme colors.
|
||||
It is intended to create an easy means to override basic theme colors for btn-, btn-outline-, text-, and bg- classes.
|
||||
It is not complete Bootstrap theming!
|
||||
*/
|
||||
|
||||
/* sass needed */
|
||||
@use 'sass:meta';
|
||||
@use 'sass:color';
|
||||
@use "sass:map";
|
||||
@use 'sass:math';
|
||||
@use 'sass:list';
|
||||
|
||||
/* set up base variable to override from cb.scss */
|
||||
$link-color-base: "" !default;
|
||||
$theme-colors: () !default;
|
||||
|
||||
/* variables needed from Bootstrap */
|
||||
|
||||
$white: #fff !default;
|
||||
$black: #000 !default;
|
||||
$primary: #0d6efd !default;
|
||||
|
||||
$min-contrast-ratio: 4.5 !default;
|
||||
$color-contrast-dark: $black !default;
|
||||
$color-contrast-light: $white !default;
|
||||
|
||||
$component-active-color: $white !default;
|
||||
$component-active-bg: $primary !default;
|
||||
|
||||
$link-shade-percentage: 20% !default;
|
||||
$link-hover-color: shift-color($link-color-base, $link-shade-percentage) !default;
|
||||
|
||||
$btn-focus-width: .25rem !default;
|
||||
|
||||
$btn-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
|
||||
|
||||
$btn-hover-bg-shade-amount: 15% !default;
|
||||
$btn-hover-bg-tint-amount: 15% !default;
|
||||
$btn-hover-border-shade-amount: 20% !default;
|
||||
$btn-hover-border-tint-amount: 10% !default;
|
||||
$btn-active-bg-shade-amount: 20% !default;
|
||||
$btn-active-bg-tint-amount: 20% !default;
|
||||
$btn-active-border-shade-amount: 25% !default;
|
||||
$btn-active-border-tint-amount: 10% !default;
|
||||
|
||||
/* functions needed from Bootstrap */
|
||||
|
||||
// Tint a color: mix a color with white
|
||||
@function tint-color($color, $weight) {
|
||||
@return color.mix(white, $color, $weight);
|
||||
}
|
||||
// Shade a color: mix a color with black
|
||||
@function shade-color($color, $weight) {
|
||||
@return color.mix(black, $color, $weight);
|
||||
}
|
||||
// divide
|
||||
@function divide($dividend, $divisor, $precision: 10) {
|
||||
$sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
|
||||
$dividend: abs($dividend);
|
||||
$divisor: abs($divisor);
|
||||
@if $dividend == 0 {
|
||||
@return 0;
|
||||
}
|
||||
@if $divisor == 0 {
|
||||
@error "Cannot divide by 0";
|
||||
}
|
||||
$remainder: $dividend;
|
||||
$result: 0;
|
||||
$factor: 10;
|
||||
@while ($remainder > 0 and $precision >= 0) {
|
||||
$quotient: 0;
|
||||
@while ($remainder >= $divisor) {
|
||||
$remainder: $remainder - $divisor;
|
||||
$quotient: $quotient + 1;
|
||||
}
|
||||
$result: $result * 10 + $quotient;
|
||||
$factor: $factor * .1;
|
||||
$remainder: $remainder * 10;
|
||||
$precision: $precision - 1;
|
||||
@if ($precision < 0 and $remainder >= $divisor * 5) {
|
||||
$result: $result + 1;
|
||||
}
|
||||
}
|
||||
$result: $result * $factor * $sign;
|
||||
$dividend-unit: math.unit($dividend);
|
||||
$divisor-unit: math.unit($divisor);
|
||||
$unit-map: (
|
||||
"px": 1px,
|
||||
"rem": 1rem,
|
||||
"em": 1em,
|
||||
"%": 1%
|
||||
);
|
||||
@if ($dividend-unit != $divisor-unit and map-has-key($unit-map, $dividend-unit)) {
|
||||
$result: $result * map.get($unit-map, $dividend-unit);
|
||||
}
|
||||
@return $result;
|
||||
}
|
||||
// A list of pre-calculated numbers of pow(divide((divide($value, 255) + .055), 1.055), 2.4). (from 0 to 255)
|
||||
$_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003 .0033 .0037 .004 .0044 .0048 .0052 .0056 .006 .0065 .007 .0075 .008 .0086 .0091 .0097 .0103 .011 .0116 .0123 .013 .0137 .0144 .0152 .016 .0168 .0176 .0185 .0194 .0203 .0212 .0222 .0232 .0242 .0252 .0262 .0273 .0284 .0296 .0307 .0319 .0331 .0343 .0356 .0369 .0382 .0395 .0409 .0423 .0437 .0452 .0467 .0482 .0497 .0513 .0529 .0545 .0561 .0578 .0595 .0612 .063 .0648 .0666 .0685 .0704 .0723 .0742 .0762 .0782 .0802 .0823 .0844 .0865 .0887 .0908 .0931 .0953 .0976 .0999 .1022 .1046 .107 .1095 .1119 .1144 .117 .1195 .1221 .1248 .1274 .1301 .1329 .1356 .1384 .1413 .1441 .147 .15 .1529 .1559 .159 .162 .1651 .1683 .1714 .1746 .1779 .1812 .1845 .1878 .1912 .1946 .1981 .2016 .2051 .2086 .2122 .2159 .2195 .2232 .227 .2307 .2346 .2384 .2423 .2462 .2502 .2542 .2582 .2623 .2664 .2705 .2747 .2789 .2831 .2874 .2918 .2961 .3005 .305 .3095 .314 .3185 .3231 .3278 .3325 .3372 .3419 .3467 .3515 .3564 .3613 .3663 .3712 .3763 .3813 .3864 .3916 .3968 .402 .4072 .4125 .4179 .4233 .4287 .4342 .4397 .4452 .4508 .4564 .4621 .4678 .4735 .4793 .4851 .491 .4969 .5029 .5089 .5149 .521 .5271 .5333 .5395 .5457 .552 .5583 .5647 .5711 .5776 .5841 .5906 .5972 .6038 .6105 .6172 .624 .6308 .6376 .6445 .6514 .6584 .6654 .6724 .6795 .6867 .6939 .7011 .7084 .7157 .7231 .7305 .7379 .7454 .7529 .7605 .7682 .7758 .7835 .7913 .7991 .807 .8148 .8228 .8308 .8388 .8469 .855 .8632 .8714 .8796 .8879 .8963 .9047 .9131 .9216 .9301 .9387 .9473 .956 .9647 .9734 .9823 .9911 1;
|
||||
|
||||
@function color-contrast(
|
||||
$background, $color-contrast-dark: $color-contrast-dark, $color-contrast-light: $color-contrast-light, $min-contrast-ratio: $min-contrast-ratio
|
||||
) {
|
||||
$foregrounds: $color-contrast-light, $color-contrast-dark, $white, $black;
|
||||
$max-ratio: 0;
|
||||
$max-ratio-color: null;
|
||||
|
||||
@each $color in $foregrounds {
|
||||
$contrast-ratio: contrast-ratio($background, $color);
|
||||
@if $contrast-ratio > $min-contrast-ratio {
|
||||
@return $color;
|
||||
} @else if $contrast-ratio > $max-ratio {
|
||||
$max-ratio: $contrast-ratio;
|
||||
$max-ratio-color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
@warn "Found no color leading to #{$min-contrast-ratio}:1 contrast ratio against #{$background}...";
|
||||
|
||||
@return $max-ratio-color;
|
||||
}
|
||||
@function contrast-ratio($background, $foreground: $color-contrast-light) {
|
||||
$l1: luminance($background);
|
||||
$l2: luminance(opaque($background, $foreground));
|
||||
@return if($l1 > $l2, divide($l1 + .05, $l2 + .05), divide($l2 + .05, $l1 + .05));
|
||||
}
|
||||
// Return opaque color
|
||||
@function opaque($background, $foreground) {
|
||||
@return color.mix(rgba($foreground, 1), $background, color.opacity($foreground) * 100%);
|
||||
}
|
||||
// Return WCAG2.0 relative luminance
|
||||
@function luminance($color) {
|
||||
$rgb: (
|
||||
"r": color.channel($color, "red", $space: rgb),
|
||||
"g": color.channel($color, "green", $space: rgb),
|
||||
"b": color.channel($color, "blue", $space: rgb)
|
||||
);
|
||||
@each $name, $value in $rgb {
|
||||
$value: if(divide($value, 255) < .03928, divide(divide($value, 255), 12.92), list.nth($_luminance-list, math.floor($value) + 1));
|
||||
$rgb: map.merge($rgb, ($name: $value));
|
||||
}
|
||||
|
||||
@return (map.get($rgb, "r") * .2126) + (map.get($rgb, "g") * .7152) + (map.get($rgb, "b") * .0722);
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
custom mixin to generate buttons
|
||||
*/
|
||||
@mixin theme-button(
|
||||
$background,
|
||||
$border,
|
||||
$color: color-contrast($background),
|
||||
$hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)),
|
||||
$hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)),
|
||||
$hover-color: color-contrast($hover-background),
|
||||
$active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
|
||||
$active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
|
||||
$active-color: color-contrast($active-background)
|
||||
) {
|
||||
|
||||
color: $color;
|
||||
background-color: $background;
|
||||
border-color: $border;
|
||||
|
||||
&:hover {
|
||||
color: $hover-color;
|
||||
background-color: $hover-background;
|
||||
border-color: $hover-border;
|
||||
}
|
||||
|
||||
.btn-check:focus + &,
|
||||
&:focus {
|
||||
color: $hover-color;
|
||||
background-color: $hover-background;
|
||||
border-color: $hover-border;
|
||||
box-shadow: 0 0 0 $btn-focus-width rgba(color.mix($color, $border, 15%), .5);
|
||||
}
|
||||
|
||||
.btn-check:checked + &,
|
||||
.btn-check:active + &,
|
||||
&:active,
|
||||
&.active,
|
||||
.show > &.dropdown-toggle {
|
||||
color: $active-color;
|
||||
background-color: $active-background;
|
||||
border-color: $active-border;
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 $btn-focus-width rgba(color.mix($color, $border, 15%), .5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* custom mixin to create btn-outline */
|
||||
@mixin theme-button-outline(
|
||||
$color,
|
||||
$color-hover: color-contrast($color),
|
||||
$active-background: $color,
|
||||
$active-border: $color,
|
||||
$active-color: color-contrast($active-background)
|
||||
) {
|
||||
color: $color;
|
||||
border-color: $color;
|
||||
|
||||
&:hover {
|
||||
color: $color-hover;
|
||||
background-color: $active-background;
|
||||
border-color: $active-border;
|
||||
}
|
||||
|
||||
.btn-check:focus + &,
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
|
||||
}
|
||||
|
||||
.btn-check:checked + &,
|
||||
.btn-check:active + &,
|
||||
&:active,
|
||||
&.active,
|
||||
&.dropdown-toggle.show {
|
||||
color: $active-color;
|
||||
background-color: $active-background;
|
||||
border-color: $active-border;
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* custom mixin to create text color variants */
|
||||
@mixin theme-text($parent, $color) {
|
||||
#{$parent} {
|
||||
color: $color !important;
|
||||
}
|
||||
a#{$parent} {
|
||||
&:hover, &:focus {
|
||||
color: color.scale($color, $lightness: -30%) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* custom mixin to create background variants */
|
||||
@mixin theme-bg($parent, $color) {
|
||||
#{$parent} {
|
||||
--bs-bg-opacity: 1;
|
||||
background-color: rgba($color, var(--bs-bg-opacity))!important;
|
||||
}
|
||||
a#{$parent},
|
||||
button#{$parent} {
|
||||
&:hover, &:focus {
|
||||
background-color: color.scale($color, $lightness: -20%) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* bg-opacity classes needed to override */
|
||||
.bg-opacity-75 {
|
||||
--bs-bg-opacity: 0.75 !important;
|
||||
}
|
||||
.bg-opacity-50 {
|
||||
--bs-bg-opacity: 0.50 !important;
|
||||
}
|
||||
.bg-opacity-25 {
|
||||
--bs-bg-opacity: 0.25 !important;
|
||||
}
|
||||
.bg-opacity-10 {
|
||||
--bs-bg-opacity: 0.10 !important;
|
||||
}
|
||||
|
||||
/*
|
||||
each function to create all the buttons from the values passed by cb.scss
|
||||
*/
|
||||
@each $color, $value in $theme-colors {
|
||||
/* check if value is valid color to avoid errors */
|
||||
@if meta.type-of($value) == color {
|
||||
/* btn classes */
|
||||
.btn-#{$color} {
|
||||
@include theme-button($value, $value);
|
||||
}
|
||||
.btn-outline-#{$color} {
|
||||
@include theme-button-outline($value);
|
||||
}
|
||||
/* text classes */
|
||||
@include theme-text(".text-#{$color}", $value);
|
||||
/* bg classes */
|
||||
@include theme-bg(".bg-#{$color}", $value);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user