refactor(extra-features): Compile the custom.scss into one file
This commit is contained in:
@@ -0,0 +1,288 @@
|
||||
// --------- Root variables -----------
|
||||
|
||||
// Might also be edited under abstracts/variables/bootstrap
|
||||
|
||||
:root {
|
||||
// Colors
|
||||
// Generated from the $ variables in abstracts/variables/bootstrap/_colors.scss
|
||||
// so the two can never drift apart.
|
||||
@each $name, $value in (
|
||||
white: $white,
|
||||
gray-100: $gray-100,
|
||||
gray-200: $gray-200,
|
||||
gray-300: $gray-300,
|
||||
gray-400: $gray-400,
|
||||
gray-500: $gray-500,
|
||||
gray-600: $gray-600,
|
||||
gray-700: $gray-700,
|
||||
gray-800: $gray-800,
|
||||
gray-900: $gray-900,
|
||||
black: $black,
|
||||
blue: $blue,
|
||||
indigo: $indigo,
|
||||
purple: $purple,
|
||||
pink: $pink,
|
||||
red: $red,
|
||||
orange: $orange,
|
||||
yellow: $yellow,
|
||||
green: $green,
|
||||
teal: $teal,
|
||||
cyan: $cyan
|
||||
) {
|
||||
--#{$name}: #{$value};
|
||||
}
|
||||
|
||||
--primary: #2daae1;
|
||||
--secondary: #3b5b74;
|
||||
--tertiary: #f0f5fa;
|
||||
--quaternary: #1a1c2a;
|
||||
--success: var(--green);
|
||||
--info: var(--cyan);
|
||||
--warning: var(--orange);
|
||||
--danger: var(--red);
|
||||
--light: #f0f5fa;
|
||||
--dark: #3b5b74;
|
||||
|
||||
// Typography
|
||||
--font-family-base: "Poppins", sans-serif;
|
||||
--font-size-base: 0.875rem;
|
||||
--text-color: var(--dark);
|
||||
|
||||
// Buttons
|
||||
--btn-font-weight: 500;
|
||||
--btn-border-radius: 99em;
|
||||
--btn-padding-y: 20px;
|
||||
--btn-padding-x: 10px;
|
||||
}
|
||||
|
||||
$headers: "h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6";
|
||||
$text: "#{$headers}, p, span, a, li";
|
||||
|
||||
$color-themes: primary, secondary, success, danger, warning, info, light, dark;
|
||||
|
||||
$section-spacer: rem-calc(50px);
|
||||
$section-spacer-small: rem-calc(25px);
|
||||
|
||||
body {
|
||||
font-family: var(--font-family-base);
|
||||
font-size: var(--font-size-base);
|
||||
}
|
||||
|
||||
#{$text} {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
// --------- Breakpoints -----------
|
||||
|
||||
@mixin bs5-media-breakpoint-up($name) {
|
||||
$min: map-get($grid-breakpoints, $name);
|
||||
@if $min and $min > 0 {
|
||||
@media (min-width: $min) {
|
||||
@content;
|
||||
}
|
||||
} @else {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin bs5-media-breakpoint-down($name) {
|
||||
$max: map-get($grid-breakpoints, $name);
|
||||
@if $max {
|
||||
@media (max-width: calc(#{$max} - 0.02px)) {
|
||||
@content;
|
||||
}
|
||||
} @else {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin bs5-media-breakpoint-between($lower, $upper) {
|
||||
$min: map-get($grid-breakpoints, $lower);
|
||||
$max: map-get($grid-breakpoints, $upper);
|
||||
@if $min and $max {
|
||||
@media (min-width: $min) and (max-width: calc(#{$max} - 0.02px)) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// --------- Utilities -----------
|
||||
|
||||
// Spacers
|
||||
.section-spacer-both {
|
||||
padding-top: $section-spacer-small;
|
||||
padding-bottom: $section-spacer-small;
|
||||
@include bs5-media-breakpoint-up(lg) {
|
||||
padding-top: $section-spacer;
|
||||
padding-bottom: $section-spacer;
|
||||
}
|
||||
&--small {
|
||||
padding-top: $section-spacer-small;
|
||||
padding-bottom: $section-spacer-small;
|
||||
@include bs5-media-breakpoint-up(lg) {
|
||||
padding-top: $section-spacer-small;
|
||||
padding-bottom: $section-spacer-small;
|
||||
}
|
||||
}
|
||||
}
|
||||
.section-spacer {
|
||||
@extend .section-spacer-both;
|
||||
padding-bottom: unset;
|
||||
&--small {
|
||||
padding-bottom: unset;
|
||||
}
|
||||
}
|
||||
.section-spacer-bottom {
|
||||
@extend .section-spacer-both;
|
||||
padding-top: unset;
|
||||
&--small {
|
||||
padding-top: unset;
|
||||
}
|
||||
}
|
||||
|
||||
// Bootstrap variable bridge for components
|
||||
@each $name in $color-themes {
|
||||
.bg-#{$name} {
|
||||
background-color: var(--#{$name}) !important;
|
||||
}
|
||||
.text-#{$name} {
|
||||
color: var(--#{$name}) !important;
|
||||
}
|
||||
.border-#{$name} {
|
||||
border-color: var(--#{$name}) !important;
|
||||
}
|
||||
.badge-#{$name} {
|
||||
background-color: var(--#{$name});
|
||||
color: var(--white);
|
||||
}
|
||||
.alert-#{$name} {
|
||||
border-color: var(--#{$name});
|
||||
}
|
||||
}
|
||||
|
||||
// Font weight utility classes generator (ex: .fw-100)
|
||||
@for $i from 100 through 900 {
|
||||
@if $i % 100 == 0 {
|
||||
.fw-#{$i} {
|
||||
font-weight: #{$i} !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// gap size utility classes generator (ex: .gap-4)
|
||||
@for $i from 1 through 35 {
|
||||
.gap-#{$i} {
|
||||
gap: rem-calc($i * 1px) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@function hex-to-rgba($hex, $alpha) {
|
||||
$r: red($hex);
|
||||
$g: green($hex);
|
||||
$b: blue($hex);
|
||||
@return rgba($r, $g, $b, $alpha);
|
||||
}
|
||||
|
||||
// Other utilities
|
||||
|
||||
// --------- Components: Buttons -----------
|
||||
|
||||
@each $name in ($color-themes) {
|
||||
.btn-#{$name} {
|
||||
background-color: var(--#{$name});
|
||||
border-color: var(--#{$name});
|
||||
border-radius: var(--btn-border-radius);
|
||||
font-weight: var(--btn-font-weight);
|
||||
padding: var(--btn-padding-x) var(--btn-padding-y);
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&.active {
|
||||
background-color: var(--#{$name});
|
||||
border-color: var(--#{$name});
|
||||
}
|
||||
}
|
||||
.btn-outline-#{$name} {
|
||||
color: var(--#{$name});
|
||||
border-color: var(--#{$name});
|
||||
border-radius: var(--btn-border-radius);
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&.active {
|
||||
background-color: var(--#{$name});
|
||||
border-color: var(--#{$name});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bootstrap-touchspin {
|
||||
flex-wrap: nowrap;
|
||||
|
||||
.input-touchspin {
|
||||
height: rem-calc(50px);
|
||||
min-width: rem-calc(75px);
|
||||
border-left: 0px;
|
||||
}
|
||||
|
||||
.input-group-btn-vertical {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
button {
|
||||
border-radius: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn:focus {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
// --------- Components: Forms -----------
|
||||
|
||||
.input-group.js-parent-focus {
|
||||
.input-group-append .btn {
|
||||
border-top-right-radius: $border-radius !important;
|
||||
border-bottom-right-radius: $border-radius !important;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group.js-parent-focus {
|
||||
height: $input-height;
|
||||
}
|
||||
|
||||
// --------- Components: Swiper -----------
|
||||
.swiper-slide {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
// --------- Layout: Header -----------
|
||||
.header-top__row {
|
||||
flex-wrap: wrap;
|
||||
.header-top__block--search {
|
||||
@include media-breakpoint-down(sm) {
|
||||
order: 1;
|
||||
}
|
||||
.js-search-form {
|
||||
max-width: unset;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.header-top__badge {
|
||||
right: -0.9em;
|
||||
}
|
||||
}
|
||||
|
||||
// --------- Layout: Left column -----------
|
||||
#left-column {
|
||||
.list-group-item,
|
||||
.list-group-item-action-dropdown-link,
|
||||
label {
|
||||
font-family: $font-family-base;
|
||||
font-size: $font-size-base;
|
||||
color: $secondary;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user