v1
This commit is contained in:
s-lnk
@@ -0,0 +1,300 @@
|
||||
// Pre-defined background colors based on variables
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
@include bg-variant(".bg-light-#{$color}", lighten($value, 10%));
|
||||
@include bg-variant(".bg-dark-#{$color}", darken($value, 10%));
|
||||
@include bg-soft-variant(".bg-soft-#{$color}", theme-color-level($color, $bg-soft-bg-level));
|
||||
@include bg-gradient-variant(".bg-gradient-#{$color}", $value);
|
||||
@include bg-translucent-variant(".bg-translucent-#{$color}", $value);
|
||||
}
|
||||
|
||||
@each $color, $value in $colors {
|
||||
@include bg-variant(".bg-#{$color}", $value);
|
||||
@include bg-gradient-variant(".bg-gradient-#{$color}", $value);
|
||||
}
|
||||
|
||||
@each $color, $value in $section-colors {
|
||||
@include bg-section-variant(".bg-section-#{$color}", $value);
|
||||
}
|
||||
|
||||
@each $color, $value in $brand-colors {
|
||||
@include bg-variant(".bg-brand-#{$color}", $value);
|
||||
}
|
||||
|
||||
@each $color, $value in $grays {
|
||||
@include bg-variant(".bg-gray-#{$color}", $value);
|
||||
}
|
||||
|
||||
@include bg-variant(".bg-black", $black);
|
||||
|
||||
// Fill, stroke and other svg color utilities
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
// Solid colors
|
||||
.fill-#{$color} {
|
||||
fill: $value !important;
|
||||
}
|
||||
|
||||
.fill-light-#{$color} {
|
||||
fill: lighten($value, 10%) !important;
|
||||
}
|
||||
|
||||
.fill-dark-#{$color} {
|
||||
fill: darken($value, 10%) !important;
|
||||
}
|
||||
|
||||
.stroke-#{$color} {
|
||||
stroke: $value !important;
|
||||
}
|
||||
|
||||
// Soft solid colors
|
||||
@include fill-soft-variant(".fill-soft-#{$color}", theme-color-level($color, $bg-soft-bg-level));
|
||||
}
|
||||
|
||||
@each $color, $value in $colors {
|
||||
.fill-#{$color} {
|
||||
fill: $value !important;
|
||||
}
|
||||
|
||||
.stroke-#{$color} {
|
||||
stroke: $value !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Additional shades for the $primary color
|
||||
|
||||
|
||||
.fill-primary-100 {
|
||||
fill: lighten($primary, 50%) !important;
|
||||
}
|
||||
|
||||
.fill-primary-200 {
|
||||
fill: lighten($primary, 40%) !important;
|
||||
}
|
||||
|
||||
.fill-primary-300 {
|
||||
fill: lighten($primary, 30%) !important;
|
||||
}
|
||||
|
||||
.fill-primary-400 {
|
||||
fill: lighten($primary, 20%) !important;
|
||||
}
|
||||
|
||||
.fill-primary-500 {
|
||||
fill: lighten($primary, 10%) !important;
|
||||
}
|
||||
|
||||
.fill-primary-600 {
|
||||
fill: lighten($primary, 5%) !important;
|
||||
}
|
||||
|
||||
|
||||
.stroke-primary-100 {
|
||||
stroke: lighten($primary, 50%) !important;
|
||||
}
|
||||
|
||||
.stroke-primary-200 {
|
||||
stroke: lighten($primary, 40%) !important;
|
||||
}
|
||||
|
||||
.stroke-primary-300 {
|
||||
stroke: lighten($primary, 30%) !important;
|
||||
}
|
||||
|
||||
.stroke-primary-400 {
|
||||
stroke: lighten($primary, 20%) !important;
|
||||
}
|
||||
|
||||
.stroke-primary-500 {
|
||||
stroke: lighten($primary, 10%) !important;
|
||||
}
|
||||
|
||||
.stroke-primary-600 {
|
||||
stroke: lighten($primary, 5%) !important;
|
||||
}
|
||||
|
||||
// SVG colors used for section backgrounds
|
||||
|
||||
@each $color, $value in $section-colors {
|
||||
.fill-section-#{$color} {
|
||||
fill: $value !important;
|
||||
}
|
||||
|
||||
.stroke-section-#{$color} {
|
||||
stroke: $value !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Section gradieent bg
|
||||
|
||||
.bg-section-fade {
|
||||
background: linear-gradient(177.86deg, section-color("secondary") 0%, rgba(255, 255, 255, 0) 100%)
|
||||
}
|
||||
|
||||
// Image background - Covers
|
||||
|
||||
.bg-cover {
|
||||
position: relative;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.bg-absolute-cover {
|
||||
background-repeat: no-repeat;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 100;
|
||||
|
||||
svg {
|
||||
height: 1000px;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
.bg-lg-cover {
|
||||
background-image: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
.bg-md-cover {
|
||||
background-image: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.bg-size--cover {
|
||||
background: no-repeat center center/cover;
|
||||
}
|
||||
|
||||
.bg-size--contain {
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
// Text background
|
||||
|
||||
.bg-text {
|
||||
color: rgba(255, 255, 255, .2);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0%;
|
||||
white-space: nowrap;
|
||||
transform: translate(0%, -50%);
|
||||
text-transform: uppercase;
|
||||
font-size: 40rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.bg-inner--text {
|
||||
height: 1em;
|
||||
line-height: 1em;
|
||||
transform: none;
|
||||
opacity: 1;
|
||||
transition: 2s 0s;
|
||||
display: block;
|
||||
animation: text_slide 40s linear infinite;
|
||||
width: auto;
|
||||
max-width: none;
|
||||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
||||
// Background image holder
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
.bg-img-holder {
|
||||
background-image: none !important;
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
.bg-img-holder {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
min-height: 20rem;
|
||||
background-repeat: no-repeat;
|
||||
z-index: -1;
|
||||
|
||||
img {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Image backshapes
|
||||
|
||||
.img-bg {
|
||||
&:after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
background: none no-repeat 50%;
|
||||
background-image: none;
|
||||
background-size: auto auto;
|
||||
background-size: contain;
|
||||
width: 783px;
|
||||
height: 725px;
|
||||
left: 31px;
|
||||
top: -168px;
|
||||
z-index: 1;
|
||||
background-image: str-replace(url("data:image/svg+xml;charset=utf-8,%3Csvg width='783' height='726' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M606.14 725.179c144.64-.87 225.447-587.194 144.64-694.046-73.915-97.74-579.852 50.733-716.756 222.443-12.763 16.009-22.32 32.22-28.019 48.451-66.83 190.337 442.822 424.098 600.136 423.152z' fill='#{$secondary}' fill-rule='evenodd'/%3E%3C/svg%3E"), "#", "%23");
|
||||
}
|
||||
|
||||
img {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
// Images as backgrounds
|
||||
|
||||
.img-as-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 0;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
// Blend modes
|
||||
|
||||
.blend-mode {
|
||||
&--multiply {
|
||||
mix-blend-mode: multiply;
|
||||
|
||||
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
|
||||
&:after{
|
||||
content:'';
|
||||
background: transparentize(darken(blue, 8), .5);
|
||||
position: absolute;
|
||||
top:0;
|
||||
bottom:0;
|
||||
width:100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--color-burn {
|
||||
mix-blend-mode: color-burn;
|
||||
|
||||
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
|
||||
&:after{
|
||||
content:'';
|
||||
background: transparentize(darken(blue, 8), .5);
|
||||
position: absolute;
|
||||
top:0;
|
||||
bottom:0;
|
||||
width:100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
//
|
||||
// Border
|
||||
//
|
||||
|
||||
|
||||
.border-sm { border-width: $border-width-sm !important;}
|
||||
.border-md { border-width: $border-width-md !important;}
|
||||
.border-lg { border-width: $border-width-lg !important;}
|
||||
|
||||
// Border style
|
||||
|
||||
.border-dashed { border-style: dashed !important; }
|
||||
.border-dotted { border-style: dotted !important; }
|
||||
.border-groove { border-style: groove !important; }
|
||||
|
||||
// Border radius
|
||||
|
||||
.rounded-xl {
|
||||
@include border-radius($border-radius-xl !important);
|
||||
}
|
||||
|
||||
.rounded-left-pill {
|
||||
@include border-left-radius($rounded-pill !important);
|
||||
}
|
||||
|
||||
.rounded-right-pill {
|
||||
@include border-right-radius($rounded-pill !important);
|
||||
}
|
||||
|
||||
.rounded-bottom-left {
|
||||
border-bottom-left-radius: 90px;
|
||||
}
|
||||
|
||||
// Border color variations
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
.border-soft-#{$color} {
|
||||
border-color: lighten($value, 20%) !important;
|
||||
}
|
||||
|
||||
.border-dark-#{$color} {
|
||||
border-color: darken($value, 5%) !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
// Image alignment
|
||||
.img-center {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
// Image filters
|
||||
.img-grayscale {
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
|
||||
.img-saturate {
|
||||
filter: saturate(150%)
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
[class*="shadow"] {
|
||||
@if $enable-transitions {
|
||||
transition: $transition-base;
|
||||
}
|
||||
}
|
||||
|
||||
// Additional shadow classes
|
||||
.shadow-xl { box-shadow: $box-shadow-xl !important; }
|
||||
.shadow-2xl { box-shadow: $box-shadow-2xl !important; }
|
||||
|
||||
// Shadow classes for hover
|
||||
.hover-shadow-sm:hover { box-shadow: $box-shadow-sm !important; }
|
||||
.hover-shadow:hover { box-shadow: $box-shadow !important; }
|
||||
.hover-shadow-lg:hover { box-shadow: $box-shadow-lg !important; }
|
||||
.hover-shadow-xl:hover { box-shadow: $box-shadow-xl !important; }
|
||||
.hover-shadow-2xl:hover { box-shadow: $box-shadow-2xl !important; }
|
||||
.shadow-none,
|
||||
.hover-shadow-none:hover { box-shadow: none !important; }
|
||||
|
||||
// Colored shadow classes
|
||||
@each $color, $value in $theme-colors {
|
||||
.shadow-#{$color}-sm {
|
||||
@include box-shadow(0 .125rem .25rem rgba(theme-color($color), .4) !important);
|
||||
}
|
||||
|
||||
.shadow-#{$color} {
|
||||
@include box-shadow(0 .5rem 1rem rgba(theme-color($color), .4) !important);
|
||||
}
|
||||
|
||||
.shadow-#{$color}-lg {
|
||||
@include box-shadow(0 1rem 3rem rgba(theme-color($color), .4) !important);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
// Height values in vh
|
||||
|
||||
.h-100vh {
|
||||
height: 100vh !important;
|
||||
}
|
||||
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||
|
||||
@each $prop, $abbrev in (top: top) {
|
||||
@each $size, $length in $sizes {
|
||||
|
||||
// Spacing (for elements with absolute position)
|
||||
.mw#{$infix}-#{$size} {
|
||||
max-width: $length !important;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,93 @@
|
||||
// Spacing columns vertically
|
||||
|
||||
.row-grid {
|
||||
+ .row-grid {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
> [class*="col-"] + [class*="col-"] {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
.row.row-grid {
|
||||
> [class*="col-lg-"] + [class*="col-lg-"] {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
.row.row-grid {
|
||||
> [class*="col-md-"] + [class*="col-md-"] {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include media-breakpoint-up(sm) {
|
||||
.row.row-grid {
|
||||
> [class*="col-sm-"] + [class*="col-sm-"] {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Spacing for elements with absolute position
|
||||
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||
|
||||
@each $prop, $abbrev in (top: top) {
|
||||
@each $size, $length in $spacers {
|
||||
|
||||
// Spacing (for elements with absolute position)
|
||||
.top#{$infix}-#{$size} {
|
||||
top: $length !important;
|
||||
}
|
||||
.right#{$infix}-#{$size} {
|
||||
right: $length !important;
|
||||
}
|
||||
.bottom#{$infix}-#{$size} {
|
||||
bottom: $length !important;
|
||||
}
|
||||
.left#{$infix}-#{$size} {
|
||||
left: $length !important;
|
||||
}
|
||||
|
||||
// Negative spacing
|
||||
.top#{$infix}-n#{$size} {
|
||||
top: -$length !important;
|
||||
}
|
||||
.right#{$infix}-n#{$size} {
|
||||
right: -$length !important;
|
||||
}
|
||||
.bottom#{$infix}-n#{$size} {
|
||||
bottom: -$length !important;
|
||||
}
|
||||
.left#{$infix}-n#{$size} {
|
||||
left: -$length !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.center {
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.middle {
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
// Negative margin: works with negative-margin.js
|
||||
|
||||
[data-negative-margin] {
|
||||
&.is_stuck {
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
// Weight and italics
|
||||
|
||||
.font-weight-300 { font-weight: 300 !important; }
|
||||
.font-weight-400 { font-weight: 400 !important; }
|
||||
.font-weight-500 { font-weight: 500 !important; }
|
||||
.font-weight-600 { font-weight: 600 !important; }
|
||||
.font-weight-700 { font-weight: 700 !important; }
|
||||
.font-weight-800 { font-weight: 800 !important; }
|
||||
.font-weight-900 { font-weight: 900 !important; }
|
||||
|
||||
.font-weight-bolder { font-weight: $font-weight-bolder !important; }
|
||||
|
||||
// Text decorations
|
||||
|
||||
.text-underline {
|
||||
text-decoration: underline !important;
|
||||
|
||||
&--dashed {
|
||||
border-bottom: 1px dashed !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.text-line-through { text-decoration: line-through !important; }
|
||||
|
||||
// Contextual colors
|
||||
|
||||
a.text-muted {
|
||||
&:hover {
|
||||
color: $text-muted-hover !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Text size
|
||||
|
||||
.text-xs { font-size: $font-size-xs !important; }
|
||||
.text-sm { font-size: $font-size-sm !important; }
|
||||
.text-lg { font-size: $font-size-lg !important; }
|
||||
.text-xl { font-size: $font-size-xl !important; }
|
||||
|
||||
// Line heights
|
||||
|
||||
.lh-100 { line-height: 1 !important; }
|
||||
.lh-110 { line-height: 1.1 !important; }
|
||||
.lh-120 { line-height: 1.2 !important; }
|
||||
.lh-130 { line-height: 1.3 !important; }
|
||||
.lh-140 { line-height: 1.4 !important; }
|
||||
.lh-150 { line-height: 1.5 !important; }
|
||||
.lh-160 { line-height: 1.6 !important; }
|
||||
.lh-170 { line-height: 1.7 !important; }
|
||||
.lh-180 { line-height: 1.8 !important; }
|
||||
.lh-190 { line-height: 1.9 !important; }
|
||||
.lh-200 { line-height: 2 !important; }
|
||||
|
||||
|
||||
// Letter spacings
|
||||
|
||||
.ls-1 { letter-spacing: .0625rem !important; }
|
||||
.ls-15 { letter-spacing: .09375rem !important; }
|
||||
.ls-2 { letter-spacing: 0.125rem !important; }
|
||||
|
||||
|
||||
// Fluid title with elipsis ending
|
||||
|
||||
.text-limit {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
.zindex-0 {
|
||||
z-index: 0 !important;
|
||||
}
|
||||
.zindex-100 {
|
||||
z-index: 100 !important;
|
||||
}
|
||||
.zindex-101 {
|
||||
z-index: 101 !important;
|
||||
}
|
||||
.zindex-102 {
|
||||
z-index: 102 !important;
|
||||
}
|
||||
Reference in New Issue
Block a user