@kushki/ng-suka/scss/_utilities.scss

// Utilities

$utilities: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$utilities: map-merge(
  (
    "align": (
      property: vertical-align,
      class: align,
      values: baseline top middle bottom text-bottom text-top
    ),
    "float": (
      responsive: true,
      property: float,
      values: left right none
    ),
    "overflow": (
      property: overflow,
      values: auto hidden,
    ),
    "display": (
      responsive: true,
      print: true,
      property: display,
      class: d,
      values: none inline inline-block block table table-row table-cell flex inline-flex
    ),
    "shadow": (
      property: box-shadow,
      class: shadow,
      values: (
        xs: $box-shadow-xs,
        sm: $box-shadow-sm,
        null: $box-shadow,
        md: $box-shadow-md,
        lg: $box-shadow-lg,
        xl: $box-shadow-xl,
        none: none,
      )
    ),
    "position": (
      property: position,
      values: static relative absolute fixed sticky
    ),
    "border": (
      property: border,
      values: (
        null: $border-width solid $border-color,
        0: 0,
      )
    ),
    "border-top": (
      property: border-top,
      values: (
        null: $border-width solid $border-color,
        0: 0,
      )
    ),
    "border-right": (
      property: border-right,
      values: (
        null: $border-width solid $border-color,
        0: 0,
      )
    ),
    "border-bottom": (
      property: border-bottom,
      values: (
        null: $border-width solid $border-color,
        0: 0,
      )
    ),
    "border-left": (
      property: border-left,
      values: (
        null: $border-width solid $border-color,
        0: 0,
      )
    ),
    "border-color": (
      property: border-color,
      class: border,
      values: map-merge($theme-colors, (white: $white))
    ),
    // Sizing utilities
    "width": (
      property: width,
      class: w,
      values: (
        25: 25%,
        50: 50%,
        75: 75%,
        100: 100%,
        auto: auto
      )
    ),
    "max-width": (
      property: max-width,
      class: mw,
      values: (100: 100%)
    ),
    "viewport-width": (
      property: width,
      class: vw,
      values: (100: 100vw)
    ),
    "min-viewport-width": (
      property: min-width,
      class: min-vw,
      values: (100: 100vw)
    ),
    "height": (
      property: height,
      class: h,
      values: (
        25: 25%,
        50: 50%,
        75: 75%,
        100: 100%,
        auto: auto
      )
    ),
    "max-height": (
      property: max-height,
      class: mh,
      values: (100: 100%)
    ),
    "viewport-height": (
      property: height,
      class: vh,
      values: (100: 100vh)
    ),
    "min-viewport-height": (
      property: min-height,
      class: min-vh,
      values: (100: 100vh)
    ),
    // Flex utilities
    "flex": (
      responsive: true,
      property: flex,
      values: (fill: 1 1 auto)
    ),
    "flex-direction": (
      responsive: true,
      property: flex-direction,
      class: flex,
      values: row column row-reverse column-reverse
    ),
    "flex-grow": (
      responsive: true,
      property: flex-grow,
      class: flex,
      values: (
        grow-0: 0,
        grow-1: 1,
      )
    ),
    "flex-shrink": (
      responsive: true,
      property: flex-shrink,
      class: flex,
      values: (
        shrink-0: 0,
        shrink-1: 1,
      )
    ),
    "flex-wrap": (
      responsive: true,
      property: flex-wrap,
      class: flex,
      values: wrap nowrap wrap-reverse
    ),
    "justify-content": (
      responsive: true,
      property: justify-content,
      values: (
        start: flex-start,
        end: flex-end,
        center: center,
        between: space-between,
        around: space-around,
      )
    ),
    "align-items": (
      responsive: true,
      property: align-items,
      values: (
        start: flex-start,
        end: flex-end,
        center: center,
        baseline: baseline,
        stretch: stretch,
      )
    ),
    "align-content": (
      responsive: true,
      property: align-content,
      values: (
        start: flex-start,
        end: flex-end,
        center: center,
        between: space-between,
        around: space-around,
        stretch: stretch,
      )
    ),
    "align-self": (
      responsive: true,
      property: align-self,
      values: (
        auto: auto,
        start: flex-start,
        end: flex-end,
        center: center,
        baseline: baseline,
        stretch: stretch,
      )
    ),
    "order": (
      responsive: true,
      property: order,
      values: (
        first: -1,
        0: 0,
        1: 1,
        2: 2,
        3: 3,
        4: 4,
        5: 5,
        last: 6,
      ),
    ),
    // Margin utilities
    "margin": (
      responsive: true,
      property: margin,
      class: m,
      values: map-merge(map-merge($spacers, (auto: auto)), $layout-spacers)
    ),
    "margin-x": (
      responsive: true,
      property: margin-right margin-left,
      class: mx,
      values: map-merge(map-merge($spacers, (auto: auto)), $layout-spacers)
    ),
    "margin-y": (
      responsive: true,
      property: margin-top margin-bottom,
      class: my,
      values: map-merge(map-merge($spacers, (auto: auto)), $layout-spacers)
    ),
    "margin-top": (
      responsive: true,
      property: margin-top,
      class: mt,
      values: map-merge(map-merge($spacers, (auto: auto)), $layout-spacers)
    ),
    "margin-right": (
      responsive: true,
      property: margin-right,
      class: mr,
      values: map-merge(map-merge($spacers, (auto: auto)), $layout-spacers)
    ),
    "margin-bottom": (
      responsive: true,
      property: margin-bottom,
      class: mb,
      values: map-merge(map-merge($spacers, (auto: auto)), $layout-spacers)
    ),
    "margin-left": (
      responsive: true,
      property: margin-left,
      class: ml,
      values: map-merge(map-merge($spacers, (auto: auto)), $layout-spacers)
    ),
    // // Negative margin utilities
    "negative-margin": (
      responsive: true,
      property: margin,
      class: m,
      values: $negative-spacers
    ),
    "negative-margin-x": (
      responsive: true,
      property: margin-right margin-left,
      class: mx,
      values: $negative-spacers
    ),
    "negative-margin-y": (
      responsive: true,
      property: margin-top margin-bottom,
      class: my,
      values: $negative-spacers
    ),
    "negative-margin-top": (
      responsive: true,
      property: margin-top,
      class: mt,
      values: $negative-spacers
    ),
    "negative-margin-right": (
      responsive: true,
      property: margin-right,
      class: mr,
      values: $negative-spacers
    ),
    "negative-margin-bottom": (
      responsive: true,
      property: margin-bottom,
      class: mb,
      values: $negative-spacers
    ),
    "negative-margin-left": (
      responsive: true,
      property: margin-left,
      class: ml,
      values: $negative-spacers
    ),
    // Padding utilities
    "padding": (
      responsive: true,
      property: padding,
      class: p,
      values: map-merge($spacers, $layout-spacers)
    ),
    "padding-x": (
      responsive: true,
      property: padding-right padding-left,
      class: px,
      values: map-merge($spacers, $layout-spacers)
    ),
    "padding-y": (
      responsive: true,
      property: padding-top padding-bottom,
      class: py,
      values: map-merge($spacers, $layout-spacers)
    ),
    "padding-top": (
      responsive: true,
      property: padding-top,
      class: pt,
      values: map-merge($spacers, $layout-spacers)
    ),
    "padding-right": (
      responsive: true,
      property: padding-right,
      class: pr,
      values: map-merge($spacers, $layout-spacers)
    ),
    "padding-bottom": (
      responsive: true,
      property: padding-bottom,
      class: pb,
      values: map-merge($spacers, $layout-spacers)
    ),
    "padding-left": (
      responsive: true,
      property: padding-left,
      class: pl,
      values: map-merge($spacers, $layout-spacers)
    ),
    // Text
    "font-weight": (
      property: font-weight,
      values: (
        light: $font-weight-light,
        lighter: $font-weight-lighter,
        normal: $font-weight-normal,
        bold: $font-weight-bold,
        bolder: $font-weight-bolder
      )
    ),
    "text-transform": (
      property: text-transform,
      class: text,
      values: lowercase uppercase capitalize
    ),
    "text-align": (
      responsive: true,
      property: text-align,
      class: text,
      values: left right center justify
    ),
    "color": (
      property: color,
      class: text,
      values: map-merge(
        $theme-colors,
        (
          white: $white,
          body: $body-color,
          muted: $text-muted,
          dark-50: rgba($dark, .5),
          white-50: rgba($white, .5),
          reset: inherit,
        )
      )
    ),
    "line-height": (
      property: line-height,
      class: lh,
      values: (
        1: 1,
        sm: $line-height-sm,
        base: $line-height-base,
        lg: $line-height-lg,
      )
    ),
    "background-color": (
      property: background-color,
      class: bg,
      values: map-merge(
        $theme-colors,
        (
          white: $white,
          transparent: transparent
        )
      )
    ),
    "white-space": (
      property: white-space,
      class: text,
      values: (
        wrap: normal,
        nowrap: nowrap,
      )
    ),
    "text-decoration": (
      property: text-decoration,
      values: none
    ),
    "font-style": (
      property: font-style,
      class: font,
      values: italic
    ),
    "overflow-wrap": (
      property: overflow-wrap word-break, // word-break for IE & < Edge 18
      class: text,
      values: (break: break-word)
    ),
    "font-family": (
      property: font-family,
      class: font,
      values: (monospace: $font-family-monospace)
    ),
    "rounded": (
      property: border-radius,
      class: rounded,
      values: (
        null: $border-radius,
        sm: $border-radius-sm,
        lg: $border-radius-lg,
        circle: 50%,
        // pill: $rounded-pill,
        0: 0,
      )
    ),
    "rounded-top": (
      property: border-top-left-radius border-top-right-radius,
      class: rounded-top,
      values: (null: $border-radius)
    ),
    "rounded-right": (
      property: border-top-right-radius border-bottom-right-radius,
      class: rounded-right,
      values: (null: $border-radius)
    ),
    "rounded-bottom": (
      property: border-bottom-right-radius border-bottom-left-radius,
      class: rounded-bottom,
      values: (null: $border-radius)
    ),
    "rounded-left": (
      property: border-bottom-left-radius border-top-left-radius,
      class: rounded-left,
      values: (null: $border-radius)
    ),
    "visibility": (
      property: visibility,
      class: null,
      values: (
        visible: visible,
        invisible: hidden,
      )
    )
  ),
  $utilities
);


// Utility generator
// Used to generate utilities & print utilities
@mixin generate-utility($utility, $infix) {
  $values: map-get($utility, values);

  // If the values are a list or string, convert it into a map
  @if type-of($values) == "string" or type-of(nth($values, 1)) != "list" {
    $values: zip($values, $values);
  }

  @each $key, $value in $values {
    $properties: map-get($utility, property);

    // Multiple properties are possible, for example with vertical or horizontal margins or paddings
    @if type-of($properties) == "string" {
      $properties: append((), $properties);
    }

    // Use custom class if present
    $property-class: if(map-has-key($utility, class), map-get($utility, class), nth($properties, 1));
    $property-class: if($property-class == null, "", $property-class);

    $infix: if($property-class == "" and str-slice($infix, 1, 1) == "-", str-slice($infix, 2), $infix);

    // Don't prefix if value key is null (eg. with shadow class)
    $property-class-modifier: if($key, if($property-class == "" and $infix == "", "", "-") + $key, "");

    .#{$property-class + $infix + $property-class-modifier} {
      @each $property in $properties {
        // stylelint-disable-next-line declaration-no-important
        #{$property}: $value !important;
      }
    }
  }
}


@each $breakpoint in map-keys($grid-breakpoints) {

  // Generate media query if needed
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    // Loop over each utility property
    @each $key, $utility in $utilities {
      // The utility can be disabled with `false`, thus check if the utility is a map first
      // Only proceed if responsive media queries are enabled or if it's the base media query
      @if type-of($utility) == "map" and (map-get($utility, responsive) or $infix == "") {
        @include generate-utility($utility, $infix);
      }
    }
  }
}


.skeleton__text {
  @include skeleton;
  width: 100%;
  height: 1rem;
  margin-bottom: $spacing-md;
}

.skeleton__heading {
  height: 1.5rem;
}