feat: Add a breadcrumb
This commit is contained in:
kbe
464
assets/css/scss/helpers/_utilities.scss
Normal file
464
assets/css/scss/helpers/_utilities.scss
Normal file
@@ -0,0 +1,464 @@
|
||||
:root {
|
||||
--bs-dark-rgb: 24, 28, 32;
|
||||
--bs-border-color: get-color("dark", 0.1);
|
||||
}
|
||||
|
||||
//
|
||||
// Background colors //
|
||||
//
|
||||
@each $name, $rgb in $colors {
|
||||
@for $i from 1 through 9 {
|
||||
.bg-#{$name}-0#{$i} {
|
||||
background: rgba(nth($rgb, 1), nth($rgb, 2), nth($rgb, 3), $i * 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
@each $name, $rgb in $colors {
|
||||
@for $i from 1 through 9 {
|
||||
.bg-color-#{$name}-0#{$i} {
|
||||
background: rgba(nth($rgb, 1), nth($rgb, 2), nth($rgb, 3), $i * 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bg-dark-lighter { background: $bg-dark-lighter; }
|
||||
.bg-dark-lightest { background: $bg-dark-lightest; }
|
||||
.bg-dark { background: get-color("dark"); }
|
||||
.bg-gray { background: $bg-gray; }
|
||||
.bg-gray-lighter { background: $bg-gray-lighter; }
|
||||
.bg-gray-lightest { background: $bg-gray-lightest; }
|
||||
|
||||
//
|
||||
// Light Backgrounds //
|
||||
//
|
||||
.bg-light-blue { background: $bg-light-blue; }
|
||||
.bg-light-purple { background: $bg-light-purple; }
|
||||
.bg-light-pink-edge { background: $bg-light-pink-edge; }
|
||||
.bg-light-golden-yellow { background: $bg-light-golden-yellow; }
|
||||
.bg-light-very-peri { background: $bg-light-very-peri; }
|
||||
.bg-light-turquoise { background: $bg-light-turquoise; }
|
||||
.bg-light-spring-red { background: $bg-light-spring-red; }
|
||||
.bg-light-tan { background: $bg-light-tan; }
|
||||
.bg-light-aqua { background: $bg-light-aqua; }
|
||||
|
||||
//
|
||||
// Color Backgrounds //
|
||||
//
|
||||
.bg-color-blue { background: get-color("blue"); }
|
||||
.bg-color-purple { background: get-color("purple"); }
|
||||
.bg-color-golden-yellow { background: get-color("golden-yellow"); }
|
||||
.bg-color-pink-edge { background: get-color("pink-edge"); }
|
||||
.bg-color-very-peri { background: get-color("very-peri"); }
|
||||
.bg-color-turquoise { background: get-color("turquoise"); }
|
||||
.bg-color-spring-red { background: get-color("spring-red"); }
|
||||
.bg-color-tan { background: get-color("tan"); }
|
||||
.bg-color-aqua { background: get-color("aqua"); }
|
||||
|
||||
//
|
||||
// Gradient Backgrounds //
|
||||
//
|
||||
.bg-gradient-1 { background-image: $gradient-1; }
|
||||
.bg-gradient-2 { background-image: $gradient-2; }
|
||||
.bg-gradient-3 { background-image: $gradient-3; }
|
||||
.bg-gradient-4 { background-image: $gradient-4; }
|
||||
.bg-gradient-5 { background-image: $gradient-5; }
|
||||
.bg-gradient-6 { background-image: $gradient-6; }
|
||||
.bg-gradient-7 { background-image: $gradient-7; }
|
||||
|
||||
.bg-white-content {
|
||||
color: $color-primary;
|
||||
h1,h2,h3,h4,h5,h6 { color: get-color("dark"); }
|
||||
a {
|
||||
&:not([class^='button']) {
|
||||
color: get-color("dark", 0.9);
|
||||
&:hover, &:focus { color: get-color("dark"); }
|
||||
}
|
||||
}
|
||||
}
|
||||
.bg-dark-content {
|
||||
color: get-color("white", 0.7);
|
||||
h1,h2,h3,h4,h5,h6 { color: white; }
|
||||
a {
|
||||
&:not([class^='button']) {
|
||||
color: get-color("white", 0.9);
|
||||
&:hover, &:focus { color: white; }
|
||||
}
|
||||
}
|
||||
}
|
||||
[class*='bg-white'] {
|
||||
@extend .bg-white-content;
|
||||
}
|
||||
.bg-black,
|
||||
[class*='bg-dark'],
|
||||
[class*='bg-gradient-'],
|
||||
[class*='bg-color-'] {
|
||||
@extend .bg-dark-content;
|
||||
[class*='bg-white'] {
|
||||
@extend .bg-white-content;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Font Families //
|
||||
//
|
||||
.font-family-primary { font-family: $font-family-primary }
|
||||
.font-family-playfair { font-family: $font-family-playfair }
|
||||
.font-family-poppins { font-family: $font-family-poppins }
|
||||
.font-family-nunito { font-family: $font-family-nunito }
|
||||
.font-family-outfit { font-family: $font-family-outfit }
|
||||
|
||||
//
|
||||
// Font Weights //
|
||||
//
|
||||
.fw-thin { font-weight: $font-weight-thin; }
|
||||
.fw-medium { font-weight: $font-weight-medium; }
|
||||
.fw-semi-bold { font-weight: $font-weight-semi-bold; }
|
||||
.fw-black { font-weight: $font-weight-black; }
|
||||
|
||||
//
|
||||
// Text Colors //
|
||||
//
|
||||
@for $i from 1 through 9 {
|
||||
*.text-white-0#{$i} {
|
||||
color: rgba(nth($color-white, 1), nth($color-white, 2), nth($color-white, 3), $i * 0.1);
|
||||
}
|
||||
}
|
||||
@for $i from 1 through 9 {
|
||||
*.text-dark-0#{$i} {
|
||||
color: rgba(nth($color-dark, 1), nth($color-dark, 2), nth($color-dark, 3), $i * 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
*.text-dark { color: get-color("dark"); }
|
||||
*.text-red { color: $color-red-lighter; }
|
||||
*.text-green { color: $color-green-lighter; }
|
||||
*.text-blue { color: get-color("blue"); }
|
||||
*.text-purple { color: get-color("purple"); }
|
||||
*.text-golden-yellow { color: get-color("golden-yellow"); }
|
||||
*.text-pink-edge { color: get-color("pink-edge"); }
|
||||
*.text-very-peri { color: get-color("very-peri"); }
|
||||
*.text-turquoise { color: get-color("turquoise"); }
|
||||
*.text-spring-red { color: get-color("spring-red"); }
|
||||
*.text-tan { color: get-color("tan"); }
|
||||
*.text-aqua { color: get-color("aqua"); }
|
||||
|
||||
[class*='text-gradient'] {
|
||||
display: inline-block;
|
||||
}
|
||||
.text-gradient-1 {
|
||||
background-image: $gradient-1;
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
.text-gradient-2 {
|
||||
background-image: $gradient-2;
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
.text-gradient-3 {
|
||||
background-image: $gradient-3;
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
.text-gradient-4 {
|
||||
background-image: $gradient-4;
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
.text-gradient-5 {
|
||||
background-image: $gradient-5;
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
.text-gradient-6 {
|
||||
background-image: $gradient-6;
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
.text-gradient-7 {
|
||||
background-image: $gradient-7;
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Text Highlight //
|
||||
//
|
||||
[class*='text-highlight'] {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
.text-highlight {
|
||||
&:before { background: get-color("dark", 0.2); }
|
||||
}
|
||||
.text-highlight-gradient {
|
||||
&:before { background-image: $gradient-1; }
|
||||
}
|
||||
.text-highlight-gradient-2 {
|
||||
&:before { background-image: $gradient-2; }
|
||||
}
|
||||
.text-highlight-gradient-3 {
|
||||
&:before { background-image: $gradient-3; }
|
||||
}
|
||||
.text-highlight-gradient-4 {
|
||||
&:before { background-image: $gradient-4; }
|
||||
}
|
||||
.text-highlight-gradient-5 {
|
||||
&:before { background-image: $gradient-5; }
|
||||
}
|
||||
.text-highlight-gradient-6 {
|
||||
&:before { background-image: $gradient-6; }
|
||||
}
|
||||
.text-highlight-gradient-7 {
|
||||
&:before { background-image: $gradient-7; }
|
||||
}
|
||||
h1,h2 {
|
||||
&[class*='text-highlight'] {
|
||||
&:before {
|
||||
bottom: -2px;
|
||||
height: 6px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
h3 {
|
||||
&[class*='text-highlight'] {
|
||||
&:before {
|
||||
bottom: -2px;
|
||||
height: 5px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
h1 {
|
||||
&.display-1 {
|
||||
&[class*='text-highlight'] {
|
||||
&:before {
|
||||
bottom: -8px;
|
||||
height: 10px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.display-2 {
|
||||
&[class*='text-highlight'] {
|
||||
&:before {
|
||||
bottom: -6px;
|
||||
height: 8px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.display-3 {
|
||||
&[class*='text-highlight'] {
|
||||
&:before {
|
||||
bottom: -6px;
|
||||
height: 8px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.display-4 {
|
||||
&[class*='text-highlight'] {
|
||||
&:before {
|
||||
bottom: -6px;
|
||||
height: 7px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.bg-black,
|
||||
[class*='bg-dark'],
|
||||
[class*='bg-gradient-'],
|
||||
[class*='bg-color-'] {
|
||||
.text-highlight {
|
||||
&:before {
|
||||
background: get-color("white", 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Stroke Text //
|
||||
//
|
||||
.stroke-text {
|
||||
color: get-color("dark");
|
||||
-webkit-text-fill-color: transparent;
|
||||
-webkit-text-stroke-width: 1.0px;
|
||||
-webkit-text-stroke-color: get-color("dark");
|
||||
@include breakpoint-above(md) {
|
||||
-webkit-text-stroke-width: 1.2px;
|
||||
}
|
||||
@include breakpoint-above(lg) {
|
||||
-webkit-text-stroke-width: 1.4px;
|
||||
}
|
||||
}
|
||||
.bg-black,
|
||||
[class*='bg-dark'],
|
||||
[class*='bg-gradient-'],
|
||||
[class*='bg-color-'] {
|
||||
.stroke-text {
|
||||
color: white;
|
||||
-webkit-text-stroke-color: white;
|
||||
}
|
||||
.bg-white,
|
||||
[class*='bg-white'] {
|
||||
.stroke-text {
|
||||
color: get-color("dark");
|
||||
-webkit-text-stroke-color: get-color("dark");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Fancy Text //
|
||||
//
|
||||
.fancy-text {
|
||||
-webkit-text-fill-color: transparent;
|
||||
-webkit-text-stroke-width: 1.0px;
|
||||
-webkit-text-stroke-color: get-color("dark");
|
||||
@include text-shadow(3px 3px 0 rgb(219, 221, 223));
|
||||
@include breakpoint-above(md) { -webkit-text-stroke-width: 1.2px; }
|
||||
@include breakpoint-above(lg) { -webkit-text-stroke-width: 1.4px; }
|
||||
&.display-1, &.display-2, &.display-3 {
|
||||
@include text-shadow(4px 4px 0 rgb(219, 221, 223));
|
||||
}
|
||||
@include breakpoint-above(md) {
|
||||
&.display-1, &.display-2, &.display-3 {
|
||||
@include text-shadow(5px 5px 0 rgb(219, 221, 223));
|
||||
}
|
||||
&.display-4 {
|
||||
@include text-shadow(4px 4px 0 rgb(219, 221, 223));
|
||||
}
|
||||
}
|
||||
}
|
||||
.bg-black,
|
||||
[class*='bg-dark'],
|
||||
[class*='bg-gradient-'],
|
||||
[class*='bg-color-'] {
|
||||
.fancy-text {
|
||||
color: white;
|
||||
-webkit-text-stroke-color: white;
|
||||
@include text-shadow(3px 3px 0 rgb(46, 48, 50));
|
||||
&.display-1, &.display-2, &.display-3 {
|
||||
@include text-shadow(4px 4px 0 rgb(46, 48, 50));
|
||||
}
|
||||
@include breakpoint-above(md) {
|
||||
&.display-1, &.display-2, &.display-3 {
|
||||
@include text-shadow(5px 5px 0 rgb(46, 48, 50));
|
||||
}
|
||||
&.display-4 {
|
||||
@include text-shadow(4px 4px 0 rgb(46, 48, 50));
|
||||
}
|
||||
}
|
||||
}
|
||||
[class*='bg-white'] {
|
||||
.fancy-text {
|
||||
color: get-color("dark");
|
||||
-webkit-text-stroke-color: get-color("dark");
|
||||
@include text-shadow(3px 3px 0 rgb(219, 221, 223));
|
||||
&.display-1, &.display-2, &.display-3 {
|
||||
@include text-shadow(4px 4px 0 rgb(219, 221, 223));
|
||||
}
|
||||
@include breakpoint-above(md) {
|
||||
&.display-1, &.display-2, &.display-3 {
|
||||
@include text-shadow(5px 5px 0 rgb(219, 221, 223));
|
||||
}
|
||||
&.display-4 {
|
||||
@include text-shadow(4px 4px 0 rgb(219, 221, 223));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Borders //
|
||||
//
|
||||
.border-top,
|
||||
.border-right,
|
||||
.border-bottom,
|
||||
.border-left {
|
||||
border-width: 0;
|
||||
border-style: solid;
|
||||
border-color: get-color("dark", 0.1);
|
||||
}
|
||||
.border-top { border-top-width: 1px; }
|
||||
.border-right { border-right-width: 1px; }
|
||||
.border-bottom { border-bottom-width: 1px; }
|
||||
.border-left { border-left-width: 1px; }
|
||||
|
||||
.bg-black,
|
||||
[class*='bg-dark'],
|
||||
[class*='bg-gradient-'],
|
||||
[class*='bg-color-'] {
|
||||
.border, .border-top, .border-right, .border-bottom, .border-left {
|
||||
border-color: get-color("white", 0.2) !important;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Border Styles //
|
||||
//
|
||||
.border-style-dotted { border-style: dotted; }
|
||||
.border-style-dashed { border-style: dashed; }
|
||||
|
||||
//
|
||||
// Negative Margin //
|
||||
//
|
||||
.n-margin-1 {
|
||||
margin-top: -1rem;
|
||||
}
|
||||
.n-margin-2 {
|
||||
margin-top: -2rem;
|
||||
}
|
||||
.n-margin-3 {
|
||||
margin-top: -3rem;
|
||||
}
|
||||
.n-margin-4 {
|
||||
margin-top: -4rem;
|
||||
}
|
||||
.n-margin-5 {
|
||||
margin-top: -5rem;
|
||||
}
|
||||
.n-margin-6 {
|
||||
margin-top: -6rem;
|
||||
}
|
||||
|
||||
//
|
||||
// Backdrop Filter //
|
||||
//
|
||||
.backdrop-filter-blur {
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
|
||||
//
|
||||
// Opacity //
|
||||
//
|
||||
.opacity-10 {
|
||||
opacity: 0.1;
|
||||
}
|
||||
.opacity-15 {
|
||||
opacity: 0.15;
|
||||
}
|
||||
.opacity-20 {
|
||||
opacity: 0.2;
|
||||
}
|
||||
Reference in New Issue
Block a user