refactor(extra-features): Compile the custom.scss into one file
This commit is contained in:
@@ -1,3 +1,2 @@
|
||||
@import "abstracts/index";
|
||||
@import "theme/index";
|
||||
@import "theme/custom/custom";
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -5,4 +5,4 @@
|
||||
@import "layout/index";
|
||||
@import "components/index";
|
||||
|
||||
@import "custom/custom";
|
||||
@import "custom";
|
||||
|
||||
@@ -1,32 +0,0 @@
|
||||
/*
|
||||
This is the main custom SCSS file for the Falcon theme.
|
||||
|
||||
I am loosely following the 7 in 1 structure for better organization of the styles. Learn more here:
|
||||
https://medium.com/@diyorbekjuraev77/be-a-master-at-creating-the-7-1-sass-pattern-776fdfb5a3b1
|
||||
|
||||
⚠️NOTE: All bootstrap overrides have been configured under themes/falcon/_dev/css/abstracts/variables/bootstrap
|
||||
Look up all available Bootstrap variables here: https://rstudio.github.io/bslib/articles/bs5-variables/index.html
|
||||
|
||||
*/
|
||||
|
||||
//Abstracts: Things used throughout the site such as utility classes and generic overrides.
|
||||
//@import "abstracts/base";
|
||||
@import "abstracts/functions";
|
||||
@import "abstracts/mixins";
|
||||
@import "abstracts/utilities";
|
||||
|
||||
// Components: parts of the theme itself that are not associated with a module.
|
||||
@import "components/buttons";
|
||||
@import "components/forms";
|
||||
|
||||
//Layouts: Parts of a page, such as the header, footer, etc.
|
||||
//@import "layout/footer";
|
||||
@import "layout/header";
|
||||
@import "layout/left-column";
|
||||
@import "layout/swiper";
|
||||
|
||||
// Pages
|
||||
//@import "pages/checkout";
|
||||
//@import "pages/home";
|
||||
//@import "pages/listing";
|
||||
//@import "pages/product";
|
||||
@@ -1,41 +0,0 @@
|
||||
@use "sass:math";
|
||||
|
||||
// Font size utility classes generator
|
||||
// Generates utility classes like .fs-14, .fs-16, etc.
|
||||
@for $i from 8 through 72 {
|
||||
.fs-#{$i} {
|
||||
font-size: rem-calc($i * 1px) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Font weight utility classes generator
|
||||
// Generates utility classes like .fw-100, .fw-200, etc.
|
||||
@for $i from 100 through 900 {
|
||||
@if $i % 100 == 0 {
|
||||
.fw-#{$i} {
|
||||
font-weight: #{$i} !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// gap size utility classes generator
|
||||
// Generates utility classes like .gap-4, .gap-col-4, .gap-row-4
|
||||
@for $i from 1 through 35 {
|
||||
.gap-#{$i} {
|
||||
gap: rem-calc($i * 1px) !important;
|
||||
}
|
||||
.gap-col-#{$i} {
|
||||
column-gap: rem-calc($i * 1px) !important;
|
||||
}
|
||||
.gap-row-#{$i} {
|
||||
row-gap: rem-calc($i * 1px) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// hex to rgba function
|
||||
@function hex-to-rgba($hex, $alpha) {
|
||||
$r: red($hex);
|
||||
$g: green($hex);
|
||||
$b: blue($hex);
|
||||
@return rgba($r, $g, $b, $alpha);
|
||||
}
|
||||
@@ -1,73 +0,0 @@
|
||||
// Bootstrap 5-style responsive mixins (more intuitive than Bootstrap 4)
|
||||
// Learn the difference here https://getbootstrap.com/docs/5.0/migration/#sass
|
||||
|
||||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin bs5-media-breakpoint-only($name) {
|
||||
$breakpoint-names: map-keys($grid-breakpoints);
|
||||
$index: index($breakpoint-names, $name);
|
||||
$next-name: nth($breakpoint-names, $index + 1);
|
||||
|
||||
@include bs5-media-breakpoint-between($name, $next-name) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// Mixin to add an after pseudo-element with a mask image to customize button colors
|
||||
/* Example:
|
||||
|
||||
.btn-arrow-right{
|
||||
&::after {
|
||||
@include btn-after("../img/arrow-right.svg");
|
||||
}
|
||||
}
|
||||
|
||||
*/
|
||||
|
||||
@mixin btn-after($url, $color: currentColor) {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
margin-left: 0.5em;
|
||||
vertical-align: middle;
|
||||
background-color: currentColor;
|
||||
mask-image: url(#{$url});
|
||||
mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
-webkit-mask-image: url(#{$url});
|
||||
-webkit-mask-size: contain;
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
-webkit-mask-position: center;
|
||||
}
|
||||
@@ -1,43 +0,0 @@
|
||||
// Header selector for interpolation
|
||||
// Example usage: #{$headers} { ... }
|
||||
$headers: "h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6";
|
||||
|
||||
// All text selector for interpolation
|
||||
$text: "#{$headers}, p, span, a, li";
|
||||
|
||||
// Section Spacers. Just set the two variables below and it is fully responsive!
|
||||
// $section-spacer-small applies on breakpoints lg and below, OR always if specified in the class with --small (ex. section-spacer--small).
|
||||
|
||||
$section-spacer: rem-calc(50px);
|
||||
$section-spacer-small: rem-calc(25px);
|
||||
|
||||
.section-spacer-both {
|
||||
margin-top: $section-spacer-small;
|
||||
margin-bottom: $section-spacer-small;
|
||||
@include bs5-media-breakpoint-up(lg) {
|
||||
margin-top: $section-spacer;
|
||||
margin-bottom: $section-spacer;
|
||||
}
|
||||
&--small {
|
||||
margin-top: $section-spacer-small;
|
||||
margin-bottom: $section-spacer-small;
|
||||
@include bs5-media-breakpoint-up(lg) {
|
||||
margin-top: $section-spacer-small;
|
||||
margin-bottom: $section-spacer-small;
|
||||
}
|
||||
}
|
||||
}
|
||||
.section-spacer {
|
||||
@extend .section-spacer-both;
|
||||
margin-bottom: unset;
|
||||
&--small {
|
||||
margin-bottom: unset;
|
||||
}
|
||||
}
|
||||
.section-spacer-bottom {
|
||||
@extend .section-spacer-both;
|
||||
margin-top: unset;
|
||||
&--small {
|
||||
margin-top: unset;
|
||||
}
|
||||
}
|
||||
@@ -1,57 +0,0 @@
|
||||
// To customize text colors per button, use this map and below function
|
||||
|
||||
$btn-color: (
|
||||
"primary": $white,
|
||||
"secondary": $white,
|
||||
"light": $primary,
|
||||
"dark": $white,
|
||||
);
|
||||
|
||||
@each $name, $color in $btn-color {
|
||||
.btn-#{$name},
|
||||
.btn-lg-#{$name},
|
||||
.btn-sm-#{$name} {
|
||||
color: $color !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Configure btn-outline text color on hover per button. (Same thing as above but for btn-outline and only on hover)
|
||||
$btn-outline-hover: (
|
||||
"primary": $white,
|
||||
"secondary": $white,
|
||||
);
|
||||
|
||||
@each $name, $bg in $btn-outline-hover {
|
||||
$text-color: if(
|
||||
map-has-key($btn-color, $name),
|
||||
map-get($btn-color, $name),
|
||||
$white
|
||||
);
|
||||
|
||||
.btn-outline-#{$name}:hover,
|
||||
.btn-outline-#{$name}:focus,
|
||||
.btn-outline-#{$name}:active,
|
||||
.btn-outline-#{$name}.active,
|
||||
.show > .btn-outline-#{$name}.dropdown-toggle {
|
||||
color: $text-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Bootstrap touchspin
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,10 +0,0 @@
|
||||
.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;
|
||||
}
|
||||
@@ -1,17 +0,0 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
@@ -1,10 +0,0 @@
|
||||
#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;
|
||||
}
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
.swiper-slide {
|
||||
height: auto;
|
||||
}
|
||||
Reference in New Issue
Block a user