ctrl-alt-del-world/midway

View on GitHub
web/src/styles/lib/_config.scss

Summary

Maintainability
Test Coverage
//
// === Colors ===
//

$all-colors: (
    white       : #FFFFFF,
    off-white   : #FBFBFB,
    black       : #000000,
  gray-border : #BFBFBF,
  blue        : #041893
);

//
// === Directions ===
//
$sides: (
    t : top,
    b : bottom,
    l : left,
    r : right,
    j : justify,
);
$alignments: (
    l : left,
    r : right,
    c : center,
);


//
// === Breakpoints ===
//

$breakpoints : (
    400   : 400px,
    600   : 600px,
    md    : 800px,
    800   : 800px,
    1000  : 1000px,
    1200  : 1200px,
    1400  : 1400px,
);

@mixin breakpoint($size) {
    $breakpoint-found: map-has-key($breakpoints, $size);
    @if ($breakpoint-found == true) {
        $breakpoint: map-get($breakpoints, $size);
        @media (min-width: #{$breakpoint}) {
            @content;
        }
    } @else {
        @warn "Breakpoint size " + #{$size} + " doesn't exist.";
    }
}

//
// === Components ===
//
// Spacer
$spacer-max: 10;
$spacer-size: 10px;
// Inline Grid
$prime-grid-column-size: 12;
$inline-grid-column-size: 12;
$inline-grid-breakpoint: md;
$inline-grid-gutter-mobile: 10px;
$inline-grid-gutter-desktop: 10px;
$inline-grid-gutter-extra: (
    none : 0px,
);
// Grid Container
$grid-padding-mobile: 10px;
$grid-padding-desktop: 20px;
$grid-max-width: 1920px;
// CSS Grid
$grid-column-sizes: (
    xs:  12,
    lg:  12,
);
$grid-gutter-sizes: (
    xs:  10px,
    lg:  10px,
);
$grid-column-max: max(map-values($grid-column-sizes)...);
$grid-gutter-extra: (
    none : 0px,
);
@function gutter($gutter-name) {
    $gutter-found: map-has-key($inline-grid-gutter-extra, $gutter-name);
    @if ($gutter-found == true) {
        @return map-get($inline-grid-gutter-extra, $gutter-name);
    } @else {
        @warn "Gutter " + #{$gutter-name} + " doesn't exist.";
    }
}

// //
// // === Spacer ===
// //

// $spacer-max: 12;
$spacer-size: 10px;

//
// === Typography ===
//

$font-size-mobile: 14px;
$line-height-mobile: 22px;

$font-size-desktop: 14px;
$line-height-desktop: 22px;

$font-family-montserrat: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, sans-serif;
$font-family-domaine: 'Domaine Display', 'Bodoni', Bodoni, serif;

$body-letter-spacing: 0;

//
// === Constants ===
//

$cubic-bezier: cubic-bezier(.12,.67,.53,1);

$header-height: 80px;

/*
// === Config Getter Functions ===
*/

@function color($color-name) {
    $color-found: map-has-key($all-colors, $color-name);
    @if ($color-found == true) {
        @return map-get($all-colors, $color-name);
    } @else {
        @warn "Color " + #{$color-name} + " doesn't exist.";
    }
}

@mixin breakpoint($size) {
    $breakpoint-found: map-has-key($breakpoints, $size);
    @if ($breakpoint-found == true) {
        $breakpoint: map-get($breakpoints, $size);
        @media (min-width: #{$breakpoint}) {
            @content;
        }
    } @else {
        @warn "Breakpoint size " + #{$size} + " doesn't exist."
    }
}

@function gutter($gutter-name) {
    $gutter-found: map-has-key($grid-gutter-extra, $gutter-name);
    @if ($gutter-found == true) {
        @return map-get($grid-gutter-extra, $gutter-name);
    } @else {
        @warn "Gutter " + #{$gutter-name} + " doesn't exist.";
    }
}