scss utils.

_utils.scss

// Mobile project scss utils.
// https://gist.github.com/overtrue/56561fd4b124b9ffe5048ef06752d4bf

// Space
//
$spacer: 12px !default;

@each $prop, $abbrev in (margin: m, padding: p) {
  @for $size from 0 to 10 {
    $value: #{$size * $spacer};

    .#{$abbrev}-#{$size}  { #{$prop}:        $value $value !important; }
    .#{$abbrev}t-#{$size} { #{$prop}-top:    $value !important; }
    .#{$abbrev}r-#{$size} { #{$prop}-right:  $value !important; }
    .#{$abbrev}b-#{$size} { #{$prop}-bottom: $value !important; }
    .#{$abbrev}l-#{$size} { #{$prop}-left:   $value !important; }
    .#{$abbrev}x-#{$size} {
      #{$prop}-right: $value !important;
      #{$prop}-left:  $value !important;
    }
    .#{$abbrev}y-#{$size} {
      #{$prop}-top: $value !important;
      #{$prop}-bottom:  $value !important;
    }
  }
}

// Float
//
.float-left,.pull-left { float:left; }
.float-right,.pull-right { float:right; }

// Position
//
.position-relative { position: relative; }
.position-static { position: static; }
.position-absolute { position: absolute; }
.position-sticky { position: sticky; }

// Alignment
//
.align-baseline    { vertical-align: baseline !important; } // Browser default
.align-top         { vertical-align: top !important; }
.align-middle      { vertical-align: middle !important; }
.align-bottom      { vertical-align: bottom !important; }
.align-text-bottom { vertical-align: text-bottom !important; }
.align-text-top    { vertical-align: text-top !important; }

// Text
//
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.text-thin { font-weight: 300; }
.text-truncate { display: block; overflow:hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-mini { font-size: 0.8em; }

// Display size
$display1-size:               6rem !default;
$display2-size:               5.5rem !default;
$display3-size:               4.5rem !default;
$display4-size:               3.5rem !default;

$display1-weight:             300 !default;
$display2-weight:             300 !default;
$display3-weight:             300 !default;
$display4-weight:             300 !default;
$display-line-height:         1.2 !default;

// Type display classes
.display-1 {font-size: $display1-size;font-weight: $display1-weight;line-height: $display-line-height; }
.display-2 {font-size: $display2-size;font-weight: $display2-weight;line-height: $display-line-height; }
.display-3 {font-size: $display3-size;font-weight: $display3-weight;line-height: $display-line-height; }
.display-4 {font-size: $display4-size;font-weight: $display4-weight;line-height: $display-line-height; }


// Image
//
.img-fluid { max-width: 100%; }

//
// Border
//
$border-color: hsl(210 23%, 95%) !default;

.border { border: 1px solid $border-color; }
.border-0        { border: 0 !important; }
.border-top-0    { border-top: 0 !important; }
.border-right-0  { border-right: 0 !important; }
.border-bottom-0 { border-bottom: 0 !important; }
.border-left-0   { border-left: 0 !important; }
.border-left { border-left: 1px solid $border-color; }
.border-right { border-right: 1px solid $border-color; }
.border-top { border-top: 1px solid $border-color; }
.border-bottom { border-bottom: 1px solid $border-color; }

//
// Border-radius
//
$border-radius: 3px !default;
.rounded {
  border-radius: $border-radius;
}
.rounded-top {
  border-top-radius: $border-radius;
}
.rounded-right {
  border-right-radius: $border-radius;
}
.rounded-bottom {
  border-bottom-radius: $border-radius;
}
.rounded-left {
  border-left-radius: $border-radius;
}

.rounded-circle {
  border-radius: 50%;
}

.rounded-0 {
  border-radius: 0;
}

// Display
//
@each $display in (none, inline, inline-block, block, table, table-cell, flex, inline-flex) {
  .d-#{$display}  { display: $display !important; }
}

// Margin
//
.ml-auto {
  margin-left: auto!important;
}

.mr-auto {
  margin-right: auto!important;
}


// Positioning
//
$zindex-fixed: 99 !default;
.fixed-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: $zindex-fixed;
}

.fixed-bottom {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: $zindex-fixed;
}

$zindex-sticky: 98 !default;
.sticky-top {
  position: sticky;
  top: 0;
  z-index: $zindex-sticky;
}

// Flex
//
.order-first { order: -1; }
.order-last  { order: 1; }
.order-0     { order: 0; }

.flex-row            { flex-direction: row !important; }
.flex-column         { flex-direction: column !important; }
.flex-row-reverse    { flex-direction: row-reverse !important; }
.flex-column-reverse { flex-direction: column-reverse !important; }

.flex-wrap         { flex-wrap: wrap !important; }
.flex-nowrap       { flex-wrap: nowrap !important; }
.flex-wrap-reverse { flex-wrap: wrap-reverse !important; }

.flex-wrap         { flex-wrap: wrap !important; }
.flex-nowrap       { flex-wrap: nowrap !important; }
.flex-wrap-reverse { flex-wrap: wrap-reverse !important; }
.flex-fill         { flex: 1 1 auto !important; }
.flex-grow-0       { flex-grow: 0 !important; }
.flex-grow-1       { flex-grow: 1 !important; }
.flex-shrink-0     { flex-shrink: 0 !important; }
.flex-shrink-1     { flex-shrink: 1 !important; }


.justify-content-start   { justify-content: flex-start !important; }
.justify-content-end     { justify-content: flex-end !important; }
.justify-content-center  { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-around  { justify-content: space-around !important; }

.align-items-start    { align-items: flex-start !important; }
.align-items-end      { align-items: flex-end !important; }
.align-items-center   { align-items: center !important; }
.align-items-baseline { align-items: baseline !important; }
.align-items-stretch  { align-items: stretch !important; }

.align-content-start   { align-content: flex-start !important; }
.align-content-end     { align-content: flex-end !important; }
.align-content-center  { align-content: center !important; }
.align-content-between { align-content: space-between !important; }
.align-content-around  { align-content: space-around !important; }
.align-content-stretch { align-content: stretch !important; }

.align-self-auto     { align-self: auto !important; }
.align-self-start    { align-self: flex-start !important; }
.align-self-end      { align-self: flex-end !important; }
.align-self-center   { align-self: center !important; }
.align-self-baseline { align-self: baseline !important; }
.align-self-stretch  { align-self: stretch !important; }

// Width & height
$sizes: () !default;
$sizes: map-merge(
    (
      25: 25%,
      30: 30%,
      35: 35%,
      40: 40%,
      45: 45%,
      50: 50%,
      60: 60%,
      65: 65%,
      70: 70%,
      75: 75%,
      80: 80%,
      85: 85%,
      100: 100%,
      auto: auto
    ),
    $sizes
);
@each $prop, $abbrev in (width: w, height: h) {
  @each $size, $length in $sizes {
    .#{$abbrev}-#{$size} { #{$prop}: $length !important; }
  }
}

.mw-100 { max-width: 100% !important; }
.mh-100 { max-height: 100% !important; }

// Viewport additional helpers

.min-vw-100 { min-width: 100vw !important; }
.min-vh-100 { min-height: 100vh !important; }

.vw-100 { width: 100vw !important; }
.vh-100 { height: 100vh !important; }

// Colors
//
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #6c757d !default;
$gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #212529 !default;

$black:     #000 !default;
$white:     #fff !default;
$light:       $gray-400 !default;
$lightest:    $gray-200 !default;
$muted:       $gray-600 !default;
$dark:        $gray-900 !default;
$gray:        $gray-600 !default;
$gray-dark:   $gray-800 !default;
$blue:      #007bff !default;
$indigo:    #6610f2 !default;
$purple:    #6f42c1 !default;
$pink:      #e83e8c !default;
$red:       #dc3545 !default;
$orange:    #fd7e14 !default;
$yellow:    #ffc107 !default;
$green:     #28a745 !default;
$teal:      #20c997 !default;
$cyan:      #17a2b8 !default;
$transparent: transparent  !important;

$grays: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$grays: map-merge(
    (
      "100": $gray-100,
      "200": $gray-200,
      "300": $gray-300,
      "400": $gray-400,
      "500": $gray-500,
      "600": $gray-600,
      "700": $gray-700,
      "800": $gray-800,
      "900": $gray-900
    ),
    $grays
);

$colors: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$colors: map-merge(
    (
      "black": $black,
      "white": $white,
      "light": $light,
      "lightest": $lightest,
      "muted": $muted,
      "dark": $dark,
      "gray": $gray,
      "gray-dark": $gray-dark,
      "blue": $blue,
      "indigo": $indigo,
      "purple": $purple,
      "pink": $pink,
      "red": $red,
      "orange": $orange,
      "yellow": $yellow,
      "green": $green,
      "teal": $teal,
      "cyan": $cyan,
      "transparent": $transparent
    ),
    $colors
);

$primary:       $blue !default;
$secondary:     $gray-200 !default;
$success:       $green !default;
$info:          $cyan !default;
$warning:       $yellow !default;
$danger:        $red !default;

$theme-colors: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$theme-colors: map-merge(
    (
      "primary":    $primary,
      "secondary":  $secondary,
      "success":    $success,
      "info":       $info,
      "warning":    $warning,
      "danger":     $danger,
    ),
    $theme-colors
);

@each $color, $value in map-merge($colors, $theme-colors) {
  .bg-#{$color} { background-color: $value; }
  .text-#{$color} { color: $value;}
}

// Shadows
//
$shadow-0: none !default;
$shadow-1: 0 1px 3px hsla(0,0,0,.12), 0 1px 2px hsla(0,0,0,.24) !default;
$shadow-2: 0 3px 6px hsla(0,0,0,.15), 0 2px 4px hsla(0,0,0,.12) !default;
$shadow-3: 0 10px 20px hsla(0,0,0,.15), 0 3px 6px hsla(0,0,0,.10) !default;
$shadow-4: 0 15px 25px hsla(0,0,0,.15), 0 5px 10px hsla(0,0,0,.5) !default;
$shadow-5: 0 20px 40px hsla(0,0,0,.2) !default;

$shadows: () !default;
$shadows: map-merge(
    (
      "0": $shadow-0,
      "1": $shadow-1,
      "2": $shadow-2,
      "3": $shadow-3,
      "4": $shadow-4,
      "5": $shadow-5,
    ), $shadows
);

@each $depth, $shadow in $shadows {
  .shadow-#{$depth} { box-shadow: $shadow; }
}


// Z indexes
//
z-1 { z-index: 1; }
z-2 { z-index: 1; }
z-3 { z-index: 1;}