Falcon-PrestaShop-9/falcon/_dev/css/theme/_custom.scss

// --------- 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;
    }
}