WPE Framwork

wpe-framework.scss

/*###############################
SCSS VARIABLES
################################*/

$one-rem-in-px: 10px;
$clamp-vp-min: 480px;
$clamp-vp-max: 1600px;
$use-fluid-size: "on";
$use-fluid-headings: "on";
$use-fluid-text: "on";

$use-auto-content-gap: "on";
$auto-content-gap: var(--content-gap); 
$use-auto-grid-gap: "on";
$auto-grid-gap: var(--grid-gap);
$use-auto-list-gap: "on";
$auto-list-gap: 0.7em;

/*---  COLORS ---*/
$colorTransparencies: (10,20,30,40,50,60,70,80,90);
/* Default lightness values */
$l-h: 20;
$l-ul: 95;
$l-l: 85;
$l-m: 50;
$l-d: 25;
$l-ud: 10;
/* Color map */
$colors : (
    "primary": 
    ( 
      "color": hsl(197, 95%, 31%),
      "variations" : ("hover" : $l-h, "ultra-light" : $l-ul, "light" : $l-l, "medium" : $l-m, "dark" : $l-d,"ultra-dark": $l-ud)
    ),
     "action": 
    ( 
      "color": hsl(197, 97%, 27%),
      "variations" : ("hover" : $l-h, "ultra-light" : $l-ul, "light" : $l-l, "medium" : $l-m, "dark" : $l-d,"ultra-dark": $l-ud)
    ),
    "secondary": 
    ( 
      "color": hsl(137, 47%, 48%),
      "variations" : ("hover" : $l-h, "ultra-light" : $l-ul, "light" : $l-l, "medium" : $l-m, "dark" : $l-d,"ultra-dark": $l-ud)
    ),
    "accent": 
    ( 
      "color": hsl(194, 74%, 34%),
      "variations" : ("hover" : $l-h, "ultra-light" : $l-ul, "light" : $l-l, "medium" : $l-m, "dark" : $l-d,"ultra-dark": $l-ud)
    ),
    "neutral": 
    ( 
      "color": hsl(0, 0%, 0%),
      "variations" : ("hover" : $l-h, "ultra-light" : $l-ul, "light" : $l-l, "medium" : $l-m, "dark" : $l-d,"ultra-dark": $l-ud)
    ),
    "black": 
    ( 
      "color": hsl(0, 0%, 0%),
      "variations" : ("hover" : $l-h, "ultra-light" : $l-ul, "light" : $l-l, "medium" : $l-m, "dark" : $l-d,"ultra-dark": $l-ud)
    ),
    "white": 
    ( 
      "color": hsl(0, 0%, 100%),
      "variations" : ("hover" : $l-h, "ultra-light" : $l-ul, "light" : $l-l, "medium" : $l-m, "dark" : $l-d,"ultra-dark": $l-ud)
    )

);

/* using box-shadow for focus state */
$focus-color: var(--action-trans-50);
$focus-width: 3px;
$focus-offset: 3px;

/*--- TYPOGRAPHY ---*/ 
$heading-min-size: 16px;
$heading-multiplier: 1.3;

$text-min-size: 8px;
$text-multiplier: 1.5;

/*--- SPACING ---*/
$spaces : ('xs','s','m' ,'l','xl','xxl');
$space-smallest-size: 10px;
$space-multiplier: 1.6;

/*--- BUTTONS --*/
$btn-border-width: 0.25rem !default;
$btn-outline-border-width: 0.25rem !default;
$btn-border-style: solid !default;
$btn-border-radius: 0.3em !default;
$btn-padding-block: 0.5em !default;
$btn-padding-inline: 1em !default;
$btn-text-transform: none !default;
$btn-font-style: normal !default;
$btn-letter-spacing: 0 !default;
$btn-line-height: 1.2 !default;
$btn-text-decoration: none !default;
$btn-text-decoration-hover: none !default;
$btn-font-weight: 400 !default;
$btn-min-width: 20rem  !default;
$btn-transition-duration: .3s !default;


/*##################
FUNCTIONS & MIXINS
###################*/
@function px-to-rem($px) {
  $rems: ($px / $one-rem-in-px) * 1rem;
  @return $rems;
}

@function fluid($min-size, $max-size, $min-breakpoint, $max-breakpoint, $unit: vw) {
    $slope: ($max-size - $min-size) / ($max-breakpoint - $min-breakpoint);
    $slope-to-unit: $slope * 100;
    $intercept-rem: px-to-rem($min-size - $slope * $min-breakpoint);
    $min-size-rem: px-to-rem($min-size);
    $max-size-rem: px-to-rem($max-size);
    @return clamp(#{$min-size-rem}, #{$slope-to-unit}#{$unit} \+ #{$intercept-rem}, #{$max-size-rem});
}


@mixin colorTransparencies($name, $color, $transparencies){
  @each $trans in $transparencies {
    $trans-color: change-color($color, $alpha: $trans / 100);
    #{$name}-trans-#{$trans}: #{$trans-color};

  }
}

/*##################
CSS COLORS
###################*/


:root{
    --focus-color: #{$focus-color};
    --focus-width: #{$focus-width};

    @each $color-name, $options in $colors {
      $color-value: map-get($options, "color");
        --#{$color-name}: #{$color-value};
        @include colorTransparencies(--#{$color-name}, $color-value, $colorTransparencies);

      $variations : map-get($options , "variations" );
      @each $variation, $value in $variations {
        $variation-color : change-color($color-value, $lightness: $value);
        --#{$color-name}-#{$variation}: #{$variation-color};

        @include colorTransparencies(--#{$color-name}-#{$variation}, $variation-color, $colorTransparencies);
      }
    }
}

/*##################
CSS SPACING / SIZING
###################*/

:root{  
    $size : $space-smallest-size;
    $multiplier: $space-multiplier;
    $last-value : $space-smallest-size;
    @each $space in $spaces {
      @if $use-fluid-size == "on" {
        --space-#{$space}: #{fluid($last-value, $size, $clamp-vp-min, $clamp-vp-max)};
      }@else{
        --space-#{$space}: #{px-to-rem($size)};
      } 
      $last-value : $size;    
      $size : $size * $multiplier;  
    }

    $size : $space-smallest-size * 1.5;
    $multiplier: $space-multiplier;
    $last-value : $size;
    @each $space in $spaces {
      @if $use-fluid-size == "on" {
        --section-space-#{$space}: #{fluid($last-value, $size, $clamp-vp-min, $clamp-vp-max)};
      }@else{
        --section-space-#{$space}: #{px-to-rem($size)};
      } 
      $last-value : $size;    
      $size : $size * $multiplier;  
    }

    $size : $space-smallest-size;
    $multiplier: $space-multiplier;
    $last-value : $size;
    @each $space in $spaces {
      @if $use-fluid-size == "on" {
        --radius-#{$space}: #{fluid($last-value, $size, $clamp-vp-min, $clamp-vp-max)};
      }@else{
        --radius-#{$space}: #{px-to-rem($size)};
      } 
      $last-value : $size;    
      $size : $size * $multiplier;  
    }

    --radius-50: 50%;
    --radius-circle: 50%;
}

@if $use-auto-content-gap == "on" {
  .brxe-container{
    row-gap: #{$auto-content-gap};
  }
}

@if $use-auto-grid-gap == "on" {
  section > div:where(:not(.bricks-shape-divider)){
    gap: var(--grid-gap);
    row-gap: var(--grid-gap);
    column-gap: var(--grid-gap);
  }
}

@if $use-auto-list-gap == "on" {
  .brxe-text, .brxe-text-basic{
    ul, ol{
      & > li:not(:last-child){
        margin-bottom:#{$auto-list-gap};
      }
    }
  }
}

/*##################
GRID
###################*/
:root{
    @for $i from 1 to 13 {
        --grid-#{$i}: repeat(#{$i}, minmax(0, 1fr));
    }
    --grid-1-2: minmax(0, 1fr) minmax(0, 2fr);
    --grid-1-3: minmax(0, 1fr) minmax(0, 3fr);
    --grid-2-1: minmax(0, 2fr) minmax(0, 1fr);
    --grid-2-3: minmax(0, 2fr) minmax(0, 3fr);
    --grid-3-1: minmax(0, 3fr) minmax(0, 1fr);
    --grid-3-2: minmax(0, 3fr) minmax(0, 2fr);
}

/*##################
CSS GAPS
###################*/
:root{
    --content-gap: var(--space-m);
    --container-gap: var(--space-xl);
    --grid-gap: var(--space-m);
}

/*@see https://htmlcssfreebies.com/css-box-shadow-examples/ */
:root{
  --box-shadow-m: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
  --box-shadow-l: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
  --box-shadow-xl: 0 25px 50px -12px rgba(0,0,0,0.25);
}

/*##################
CSS TEXT
###################*/

:root{
    $size : $heading-min-size;
    $last-value : $size;
    @for $i from 6 to 0 {
      @if $use-fluid-headings == "on" {
        --h#{$i}: #{fluid($last-value, $size, $clamp-vp-min, $clamp-vp-max)};
      }@else{
        --h#{$i}: #{$size};
      } 
      $last-value : $size;    
      $size : $size * $heading-multiplier;  
    }

    $size : $text-min-size;
    $last-value : $size;
    @each $space in $spaces{
      @if $use-fluid-text == "on" {
        --text-#{$space}: #{fluid($last-value, $size, $clamp-vp-min, $clamp-vp-max)};
      }@else{
        --text-#{$space}: #{px-to-rem($size)};
      } 
      $last-value : $size;    
      $size : $size * $text-multiplier;  
    }
}

/*##################
BUTTONS
###################*/
:root {
  --btn-padding-block: #{$btn-padding-block};
  --btn-padding-inline: #{$btn-padding-inline};
  --btn-min-width: #{$btn-min-width}rem;
  --btn-line-height: #{$btn-line-height};
  --btn-font-weight: #{$btn-font-weight};
  --btn-font-style: #{$btn-font-style};
  --btn-text-decoration: #{$btn-text-decoration};
  --btn-text-decoration-hover: #{$btn-text-decoration-hover};
  --btn-letter-spacing: #{$btn-letter-spacing};
  --btn-text-transform: #{$btn-text-transform};
  --btn-border-width: #{$btn-border-width};
  --btn-outline-border-width: #{$btn-outline-border-width};
  --btn-border-style: #{$btn-border-style};
  --btn-border-radius: #{$btn-border-radius};
  --btn-transition-duration: #{$btn-transition-duration};
}


/*##################
A11Y
###################*/
:where(:focus), body.bricks-is-frontend :focus{ 
  outline: none;
  box-shadow: 0 0 #{$focus-width} #{$focus-offset}  #{$focus-color};
};

.hidden-accessible {
  position: absolute !important;
  inline-size: 1px !important;
  block-size: 1px !important;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: rect(0, 0, 0, 0);
  white-space: nowrap;
  /* added line */
  border: 0;
}
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *, *::before, *::after {
    -webkit-animation-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    -webkit-animation-iteration-count: 1 !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}



/*##################
FROM automatic-bricks.css
###################*/
.btn--action, .btn--primary, .btn--secondary, .btn--accent, .btn--base, .btn--black, .btn--white {
  padding-block: var(--btn-padding-block);
  padding-inline: var(--btn-padding-inline);
  min-inline-size: var(--btn-min-width);
  line-height: var(--btn-line-height);
  font-size: var(--btn-font-size, var(--text-m));
  font-weight: var(--btn-font-weight);
  font-style: var(--btn-font-style);
  text-decoration: var(--btn-text-decoration);
  text-transform: var(--btn-text-transform);
  letter-spacing: var(--btn-letter-spacing);
  border-width: var(--btn-border-width);
  border-style: var(--btn-border-style);
  border-radius: var(--btn-border-radius);
  display: inline-flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  background: var(--btn-background);
  color: var(--btn-text-color);
  border-color: var(--btn-border-color);
  transition: all var(--btn-transition-duration) ease;
}
.btn--action:hover, .btn--primary:hover, .btn--secondary:hover, .btn--accent:hover, .btn--base:hover, .btn--black:hover, .btn--white:hover {
  background: var(--btn-background-hover);
  border-color: var(--btn-border-color-hover);
  color: var(--btn-text-color-hover);
  text-decoration: var(--btn-text-decoration-hover);
}
.btn--action:focus, .btn--primary:focus, .btn--secondary:focus, .btn--accent:focus, .btn--base:focus, .btn--black:focus, .btn--white:focus {
  box-shadow: 0 0 0 var(--focus-width) var(--focus-color);
  outline: none;
}
.btn--action.btn--outline, .btn--primary.btn--outline, .btn--secondary.btn--outline, .btn--accent.btn--outline, .btn--base.btn--outline, .btn--black.btn--outline, .btn--white.btn--outline {
  background: transparent;
  border-width: var(--btn-outline-border-width);
  color: var(--btn-outline-text-color);
}
.btn--action.btn--outline:hover, .btn--primary.btn--outline:hover, .btn--secondary.btn--outline:hover, .btn--accent.btn--outline:hover, .btn--base.btn--outline:hover, .btn--black.btn--outline:hover, .btn--white.btn--outline:hover {
  background: var(--btn-outline-background-hover);
  color: var(--btn-outline-text-color-hover);
  border-color: var(--btn-outline-border-hover);
}
.btn--action {
  --btn-background: var(--action);
  --btn-background-hover: var(--action-hover);
  --btn-text-color: var(--action-ultra-light);
  --btn-text-color-hover: var(--action-ultra-light);
  --btn-border-color: var(--action);
  --btn-border-color-hover: var(--action-hover);
  --btn-outline-background-hover: var(--action-hover);
  --btn-outline-border-hover: var(--action-hover);
  --btn-outline-text-color: var(--action);
  --btn-outline-text-color-hover: var(--action-ultra-light);
  --focus-color: var(--action-dark);
}
.btn--primary {
  --btn-background: var(--primary);
  --btn-background-hover: var(--primary-hover);
  --btn-text-color: var(--primary-ultra-light);
  --btn-text-color-hover: var(--primary-ultra-light);
  --btn-border-color: var(--primary);
  --btn-border-color-hover: var(--primary-hover);
  --btn-outline-background-hover: var(--primary-hover);
  --btn-outline-border-hover: var(--primary-hover);
  --btn-outline-text-color: var(--primary);
  --btn-outline-text-color-hover: var(--primary-ultra-light);
  --focus-color: var(--primary-dark);
}
.btn--secondary {
  --btn-background: var(--secondary);
  --btn-background-hover: var(--secondary-hover);
  --btn-text-color: var(--secondary-ultra-light);
  --btn-text-color-hover: var(--secondary-ultra-light);
  --btn-border-color: var(--secondary);
  --btn-border-color-hover: var(--secondary-hover);
  --btn-outline-background-hover: var(--secondary-hover);
  --btn-outline-border-hover: var(--secondary-hover);
  --btn-outline-text-color: var(--secondary);
  --btn-outline-text-color-hover: var(--secondary-ultra-light);
  --focus-color: var(--secondary-dark);
}
.btn--black {
  --btn-background: var(--black);
  --btn-background-hover: var(--white);
  --btn-text-color: var(--white);
  --btn-text-color-hover: var(--black);
  --btn-border-color: var(--black);
  --btn-border-color-hover: var(--white);
  --btn-outline-background-hover: var(--white);
  --btn-outline-border-hover: var(--white);
  --btn-outline-text-color: var(--black);
  --btn-outline-text-color-hover: var(--black);
  --focus-color: var(--action);
}
.btn--white {
  --btn-background: var(--shade-white);
  --btn-background-hover: var(--action-hover);
  --btn-text-color: var(--black);
  --btn-text-color-hover: var(--white);
  --btn-border-color: var(--white);
  --btn-border-color-hover: var(--black);
  --btn-outline-background-hover: var(--white-hover);
  --btn-outline-border-hover: var(--white-hover);
  --btn-outline-text-color: var(--white);
  --btn-outline-text-color-hover: var(--action-ultra-light);
  --focus-color: var(--action);
}