Other

Border

SCSS variables.

src/_variables.scss

// Border radius.
$border-radius: $unit-h !default; // --#{$var-prefix}-border-radius.

// Border width.
$border-width: $unit-o !default; // --#{$var-prefix}-border-width.
$border-width-lg: $unit-h !default; // --#{$var-prefix}-border-width-lg.

Equivalent CSS variables with default prefix s.

:root, :host {
  --s-border-radius: 0.1rem;
  --s-border-width: 0.05rem;
  --s-border-width-lg: 0.1rem;
}

Control

SCSS variables.

src/_variables.scss

// Control size.
$control-size: $unit-9 !default; // --#{$var-prefix}-control-size.
$control-size-sm: $unit-7 !default; // --#{$var-prefix}-control-size-sm.
$control-size-lg: $unit-10 !default; // --#{$var-prefix}-control-size-lg.

// Control padding.
$control-padding-x: $unit-2 !default; // --#{$var-prefix}-control-padding-x.
$control-padding-x-sm: $unit-2 * 0.75 !default; // --#{$var-prefix}-control-padding-x-sm.
$control-padding-x-lg: $unit-2 * 1.5 !default; // --#{$var-prefix}-control-padding-x-lg.
$control-padding-y: ($control-size - $line-height) * 0.5 - $border-width !default; // --#{$var-prefix}-control-padding-y.
$control-padding-y-sm: ($control-size-sm - $line-height) * 0.5 - $border-width !default; // --#{$var-prefix}-control-padding-y-sm.
$control-padding-y-lg: ($control-size-lg - $line-height) * 0.5 - $border-width !default; // --#{$var-prefix}-control-padding-y-lg.

// Control icon.
$control-icon-size: 0.8rem !default; // --#{$var-prefix}-control-icon-size.

// Control width.
$control-width-xs: 180px !default; // --#{$var-prefix}-control-width-xs.
$control-width-sm: 320px !default; // --#{$var-prefix}-control-width-sm.
$control-width-md: 640px !default; // --#{$var-prefix}-control-width-md.
$control-width-lg: 960px !default; // --#{$var-prefix}-control-width-lg.
$control-width-xl: 1280px !default; // --#{$var-prefix}-control-width-xl.

Equivalent CSS variables with default prefix s.

:root, :host {
  // Control size.
  --s-control-size: 1.8rem;
  --s-control-size-sm: 1.4rem;
  --s-control-size-lg: 2rem;

  // Control padding.
  --s-control-padding-x: 0.4rem;
  --s-control-padding-x-sm: calc(var(--s-control-padding-x) * 0.75);
  --s-control-padding-x-lg: calc(var(--s-control-padding-x) * 1.5);
  --s-control-padding-y: calc((var(--s-control-size) - var(--s-line-height)) * 0.5 - var(--s-border-width));
  --s-control-padding-y-sm: calc((var(--s-control-size-sm) - var(--s-line-height)) * 0.5 - var(--s-border-width));
  --s-control-padding-y-lg: calc((var(--s-control-size-lg) - var(--s-line-height)) * 0.5 - var(--s-border-width));

  // Control icon size.
  --s-control-icon-size: 0.8rem;

  // Control width.
  --s-control-width-xs: 180px;
  --s-control-width-sm: 320px;
  --s-control-width-md: 640px;
  --s-control-width-lg: 960px;
  --s-control-width-xl: 1280px;
}

Font sizes and line height

SCSS variables.

src/_variables.scss

// Font sizes.
$html-font-size: 20px !default; // --#{$var-prefix}-html-font-size.
$font-size: 0.8rem !default; // --#{$var-prefix}-font-size.
$font-size-sm: 0.7rem !default; // --#{$var-prefix}-font-size-sm.
$font-size-lg: 0.9rem !default; // --#{$var-prefix}-font-size-lg.

// Line height.
$html-line-height: 1.5 !default; // --#{$var-prefix}-html-line-height.
$line-height: 1.2rem !default; // --#{$var-prefix}-line-height.

Equivalent CSS variables with default prefix s.

:root, :host {
  // Font size.
  --s-html-font-size: 20px;
  --s-font-size: 0.8rem;
  --s-font-size-sm: 0.7rem;
  --s-font-size-lg: 0.9rem;

  // Line height.
  --s-html-line-height: 1.5;
  --s-line-height: 1.2rem;
}

Layout spacing

SCSS variables.

This property is set without a unit to calculate with a different unit (px).

src/_variables.scss

// Layout spacing.
$layout-spacing: $unit-2 !default; // --#{$var-prefix}-layout-spacing.
$layout-spacing-sm: $unit-1 !default; // --#{$var-prefix}-layout-spacing-sm.
$layout-spacing-lg: $unit-4 !default; // --#{$var-prefix}-layout-spacing-lg.

Equivalent CSS variables with default prefix s.

:root, :host {
  --s-layout-spacing: 0.4;
  --s-layout-spacing-sm: 0.2;
  --s-layout-spacing-lg: 0.8;
  --s-layout-spacing-unit: 1rem;
}

Parallax

SCSS variables.

src/_variables.scss

$parallax-deg: 3deg !default; // --#{$var-prefix}-parallax-deg.
$parallax-offset: 4.5px !default; // --#{$var-prefix}-parallax-offset.
$parallax-offset-z: 50px !default; // --#{$var-prefix}-parallax-offset-z.
$parallax-perspective: 1000px !default; // --#{$var-prefix}-parallax-perspective.
$parallax-scale: 0.95 !default; // --#{$var-prefix}-parallax-scale.

// Color.
$parallax-fade-color: #ffffff !default; // --#{$var-prefix}-fade-color-h/s/l/a.

Equivalent CSS variables with default prefix s.

:root, :host {
  --s-parallax-deg: 3deg;
  --s-parallax-offset: 4.5px;
  --s-parallax-offset-z: 50px;
  --s-parallax-perspective: 1000px;
  --s-parallax-scale: 0.95;

  // color
  --s-parallax-fade-color-h: 0deg;
  --s-parallax-fade-color-s: 0%;
  --s-parallax-fade-color-l: 100%;
  --s-parallax-fade-color-a: 0.35;
}

Responsive breakpoints

SCSS variables.

src/_variables.scss

// Responsive breakpoints.
$size-xs: 480px !default; // --#{$var-prefix}-size-xs.
$size-sm: 600px !default; // --#{$var-prefix}-size-sm.
$size-md: 840px !default; // --#{$var-prefix}-size-md.
$size-lg: 960px !default; // --#{$var-prefix}-size-lg.
$size-xl: 1280px !default; // --#{$var-prefix}-size-xl.
$size-2x: 1440px !default; // --#{$var-prefix}-size-2x.

$responsive-breakpoint: $size-xs !default; // --#{$var-prefix}-responsive-breakpoint.

Equivalent CSS variables with default prefix s.

:root, :host {
  --s-size-xs: 480px;
  --s-size-sm: 600px;
  --s-size-md: 840px;
  --s-size-lg: 960px;
  --s-size-xl: 1280px;
  --s-size-2x: 1440px;

  --s-responsive-breakpoint: 480px;
}

Transition duration

SCSS variables.

src/_variables.scss

$transition-duration: 0.2s;

Equivalent CSS variables with default prefix s.

:root, :host {
  --s-transition-duration: 0.2s;
}

Units

SCSS variables.

src/_variables.scss

// Unit sizes.
$unit-o: 0.05rem !default; // ! New CSS variable.
$unit-h: 0.1rem !default; // ! New CSS variable.
$unit-1: 0.2rem !default; // ! New CSS variable.
$unit-2: 0.4rem !default; // ! New CSS variable.
$unit-3: 0.6rem !default; // ! New CSS variable.
$unit-4: 0.8rem !default; // ! New CSS variable.
$unit-5: 1rem !default; // ! New CSS variable.
$unit-6: 1.2rem !default; // ! New CSS variable.
$unit-7: 1.4rem !default; // ! New CSS variable.
$unit-8: 1.6rem !default; // ! New CSS variable.
$unit-9: 1.8rem !default; // ! New CSS variable.
$unit-10: 2rem !default; // ! New CSS variable.
$unit-12: 2.4rem !default; // ! New CSS variable.
$unit-16: 3.2rem !default; // ! New CSS variable.

Equivalent CSS variables with default prefix s.

:root, :host {
  --s-unit-o: 0.05rem;
  --s-unit-h: 0.1rem;
  --s-unit-0: 0rem;
  --s-unit-1: 0.2rem;
  --s-unit-2: 0.4rem;
  --s-unit-3: 0.6rem;
  --s-unit-4: 0.8rem;
  --s-unit-5: 1rem;
  --s-unit-6: 1.2rem;
  --s-unit-7: 1.4rem;
  --s-unit-8: 1.6rem;
  --s-unit-9: 1.8rem;
  --s-unit-10: 2rem;
  --s-unit-12: 2.4rem;
  --s-unit-16: 3.2rem;
}

z-index

SCSS variables.

src/_variables.scss

// Z-index.
$zindex-0: 1 !default; // --#{$var-prefix}-z-index-0.
$zindex-1: 100 !default; // --#{$var-prefix}-z-index-1.
$zindex-2: 200 !default; // --#{$var-prefix}-z-index-2.
$zindex-3: 300 !default; // --#{$var-prefix}-z-index-3.
$zindex-4: 400 !default; // --#{$var-prefix}-z-index-4.

Equivalent CSS variables with default prefix s.

:root, :host {
  --s-z-index-0: 1;
  --s-z-index-1: 100;
  --s-z-index-2: 200;
  --s-z-index-3: 300;
  --s-z-index-4: 400;
}