isabelle/Falcon-PrestaShop-9
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(extra-features): Refactor css

Browse Source 
Two files: Variables.scss with bootstrap overrides and custom.scss
This commit is contained in:
isabelle
2026-07-08 09:45:05 +02:00
parent 00d17e328d
commit 6d40ec445e
3 changed files with 218 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files
falcon/_dev/css/theme/_custom.scss
+19 -149
View File
@@ -1,78 +1,8 @@
// --------- Root variables -----------
/* ------------------------------------------------------------------------- */
/* ⚠️ Variables can be found in variables.scss instead of defined in root */
/* ------------------------------------------------------------------------- */
// 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 -----------
/* --------- Breakpoints bootstrap 5 ----------- */
@mixin bs5-media-breakpoint-up($name) {
$min: map-get($grid-breakpoints, $name);
@@ -106,9 +36,13 @@ body {
}
}
// --------- Utilities -----------
/* --------- Utilities ----------- */
/* Spacers */
$section-spacer: rem-calc(50px);
$section-spacer-small: rem-calc(25px);
// Spacers
.section-spacer-both {
padding-top: $section-spacer-small;
padding-bottom: $section-spacer-small;
@@ -140,42 +74,7 @@ body {
}
}
// 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;
}
}
/* Hex to rgba function */
@function hex-to-rgba($hex, $alpha) {
$r: red($hex);
$g: green($hex);
@@ -183,39 +82,7 @@ body {
@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});
}
}
}
/* --------- Components: Buttons ----------- */
.bootstrap-touchspin {
flex-wrap: nowrap;
@@ -238,7 +105,8 @@ body {
.btn:focus {
box-shadow: none !important;
}
// --------- Components: Forms -----------
/* --------- Components: Forms ----------- */
.input-group.js-parent-focus {
.input-group-append .btn {
@@ -251,12 +119,14 @@ body {
height: $input-height;
}
// --------- Components: Swiper -----------
/* --------- Components: Swiper ----------- */
.swiper-slide {
height: auto;
}
// --------- Layout: Header -----------
/* --------- Layout: Header ----------- */
.header-top__row {
flex-wrap: wrap;
.header-top__block--search {
@@ -275,7 +145,7 @@ body {
}
}
// --------- Layout: Left column -----------
/* --------- Layout: Left column ----------- */
#left-column {
.list-group-item,
.list-group-item-action-dropdown-link,
falcon/_dev/css/theme/_variables.scss
+198
View File
@@ -0,0 +1,198 @@
// --------- Custom variables -----------
// --------- Bootstrap variables -----------
// Find bootstrap variables: https://rstudio.github.io/bslib/articles/bs4-variables/
// Color system
$white: #fff;
$gray-100: #f8f9fa;
$gray-200: #e9ecef;
$gray-300: #dee2e6;
$gray-400: #ced4da;
$gray-500: #adb5bd;
$gray-600: #6c757d;
$gray-700: #495057;
$gray-800: #343a40;
$gray-900: #212529;
$black: #000;
$blue: #007bff;
$indigo: #6610f2;
$purple: #6f42c1;
$pink: #e83e8c;
$red: #dc3545;
$orange: #fd7e14;
$yellow: #ffc107;
$green: #28a745;
$teal: #20c997;
$cyan: #17a2b8;
$primary: $red;
$secondary: $gray-600;
$success: $green;
$info: $cyan;
$warning: #ff9a52;
$danger: $red;
$light: $gray-100;
$dark: $gray-800;
// Typography
$font-family-sans-serif: "Plus Jakarta Sans", sans-serif;
$font-family-base: $font-family-sans-serif;
$headings-font-family: $font-family-sans-serif;
$font-weight-base: 400;
$font-size-base: rem-calc(14px);
$font-size-lg: $font-size-base * 1.125;
$font-size-sm: $font-size-base * 0.875;
$font-size-xs: $font-size-base * 0.6875;
$font-weight-lighter: 200;
$font-weight-light: 300;
$font-weight-normal: 400;
$font-weight-bold: 700;
$font-weight-bolder: 800;
$h1-font-size: $font-size-base * 2;
$h2-font-size: $font-size-base * 1.75;
$h3-font-size: $font-size-base * 1.5;
$h4-font-size: $font-size-base * 1.25;
$h5-font-size: $font-size-base * 1.125;
$h6-font-size: $font-size-base;
$display1-size: $font-size-base * 2.5;
$display2-size: $font-size-base * 2.25;
$display3-size: $font-size-base * 2;
$display4-size: $font-size-base * 1.75;
$display1-weight: 400;
$display2-weight: 400;
$display3-weight: 400;
$display4-weight: 400;
$text-muted: $gray-600;
$paragraph-margin-bottom: rem-calc(20px);
$headings-margin-bottom: rem-calc(20px);
$headings-font-weight: 700;
$headings-line-height: 1.2;
$headings-color: $gray-900;
// Spacer
$spacer: 10px;
// stylelint-disable-next-line scss/dollar-variable-default
$spacers: (
0: 0,
1: $spacer * 0.5,
2: $spacer,
3: $spacer * 2,
4: $spacer * 3,
5: $spacer * 4,
6: $spacer * 5,
);
// Components
$border-width: 1px;
$border-color: $gray-300;
$border-radius: 0.4rem;
$border-radius-lg: 0.4rem;
$border-radius-sm: 0.4rem;
$card-border-color: $border-color;
$table-border-color: $border-color;
$input-border-color: $border-color;
$input-focus-border-color: $border-color;
$form-check-input-border: $border-color;
// Commons
$body-bg: $white;
$body-color: $gray-900;
// Custom control
$custom-checkbox-indicator-border-radius: 4px;
$custom-checkbox-indicator-icon-checked-dark-color: $black;
$custom-checkbox-indicator-icon-checked-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path fill='#{$custom-checkbox-indicator-icon-checked-dark-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/></svg>");
//Custom radio color
$custom-color-control-indicator-size: rem-calc(24px);
$custom-color-control-indicator-size-checked-border-color: $gray-900;
$custom-color-control-indicator-icon-size: rem-calc(18px);
// Buttons
$btn-font-weight: 500;
// Options
$enable-responsive-font-sizes: true;
// Grid
// Made this more like the breakpoints used in Bootstrap 5
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px,
);
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px,
);
$grid-columns: 12;
$grid-gutter-width: rem-calc(20px);
$grid-row-columns: 6;
// Card
$card-border-radius: $border-radius;
$card-border-width: rem-calc(1px);
$card-inner-border-radius: subtract($card-border-radius, $card-border-width);
// RFS
$rfs-breakpoint: 992;
$rfs-breakpoint-unit: px;
$rfs-base-font-size: 12;
$rfs-factor: 5;
// Forms
$input-btn-padding-y: rem-calc(8px);
$input-btn-padding-x: rem-calc(16px);
$input-btn-padding-y-sm: rem-calc(4px);
$input-btn-padding-x-sm: rem-calc(8px);
$input-btn-padding-y-lg: rem-calc(14px);
$input-btn-padding-x-lg: rem-calc(20px);
$input-height: rem-calc(50px);
// Badge
$badge-padding-y: 0.3em;
$badge-padding-x: 0.55em;
// Progress
$progress-bg: $gray-200;
$progress-height: rem-calc(8px);