sneat_rails 0.1.0

data/app/assets/stylesheets/sneat_rails/_bootstrap-extended/_utilities.scss

@@ -0,0 +1,1027 @@
+// Utilities
+// *******************************************************************************
+// stylelint-disable indentation
+
+// Utilities
+
+$utilities: () !default;
+// stylelint-disable-next-line scss/dollar-variable-default
+$utilities: map-merge(
+  (
+    // scss-docs-start utils-vertical-align
+    'align':
+      (
+        property: vertical-align,
+        class: align,
+        values: baseline top middle bottom text-bottom text-top
+      ),
+    // scss-docs-end utils-vertical-align
+    // Object Fit utilities
+    // scss-docs-start utils-object-fit
+    'object-fit':
+      (
+        responsive: true,
+        property: object-fit,
+        values: (
+          contain: contain,
+          cover: cover,
+          fill: fill,
+          scale: scale-down,
+          none: none
+        )
+      ),
+    // scss-docs-end utils-object-fit
+    // Opacity utilities
+    // scss-docs-start utils-opacity
+    'opacity':
+      (
+        property: opacity,
+        values: (
+          0: 0,
+          25: 0.25,
+          50: 0.5,
+          75: 0.75,
+          100: 1
+        )
+      ),
+    // scss-docs-end utils-opacity
+    // scss-docs-start utils-overflow
+    'overflow':
+      (
+        property: overflow,
+        values: auto hidden visible scroll
+      ),
+    // scss-docs-end utils-overflow
+    // scss-docs-start utils-display
+    'display':
+      (
+        responsive: true,
+        print: true,
+        property: display,
+        class: d,
+        values: inline inline-block block grid table table-row table-cell flex inline-flex none
+      ),
+    // scss-docs-end utils-display
+    // scss-docs-start utils-shadow
+    'shadow':
+      (
+        property: box-shadow,
+        class: shadow,
+        values: (
+          null: $box-shadow,
+          sm: $box-shadow-sm,
+          lg: $box-shadow-lg,
+          none: none
+        )
+      ),
+    // scss-docs-end utils-shadow
+    // scss-docs-start utils-position
+    'position':
+      (
+        property: position,
+        values: static relative absolute fixed sticky
+      ),
+    'top': (
+      property: top,
+      values: $position-values
+    ),
+    'bottom': (
+      property: bottom,
+      values: $position-values
+    ),
+    // scss-docs-end utils-position
+    // scss-docs-start utils-borders
+    'border':
+      (
+        property: border,
+        values: (
+          null: $border-width solid $border-color,
+          0: 0
+        )
+      ),
+    'border-style': (
+      property: border-style,
+      class: border,
+      responsive: true,
+      values: (
+        solid: solid,
+        dashed: dashed,
+        none: none
+      )
+    ),
+    'border-top': (
+      property: border-top,
+      values: (
+        null: $border-width solid $border-color,
+        0: 0
+      )
+    ),
+    'border-bottom': (
+      property: border-bottom,
+      values: (
+        null: $border-width solid $border-color,
+        0: 0
+      )
+    ),
+    'border-color': (
+      property: border-color,
+      class: border,
+      values:
+        map-merge(
+          $theme-colors,
+          (
+            'white': $white,
+            'light': $gray-100,
+            // (C)
+            'transparent': transparent // (C)
+          )
+        )
+    ),
+    'border-label-color': (
+      property: border-color,
+      class: border-label,
+      local-vars: (
+        'border-opacity': 0.4
+      ),
+      values: $utilities-border-colors
+    ),
+    'border-width': (
+      property: border-width,
+      class: border,
+      values: $border-widths
+    ),
+    'border-opacity': (
+      css-var: true,
+      class: border-opacity,
+      values: (
+        10: 0.1,
+        25: 0.25,
+        50: 0.5,
+        75: 0.75,
+        100: 1
+      )
+    ),
+    // scss-docs-end utils-borders
+    // Sizing utilities
+    // scss-docs-start utils-sizing
+    'width':
+      (
+        property: width,
+        class: w,
+        values:
+          map-merge(
+            $sizes-px,
+            (
+              20: 20%,
+              25: 25%,
+              50: 50%,
+              60: 60%,
+              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:
+        map-merge(
+          $sizes-px,
+          (
+            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
+      )
+    ),
+    // scss-docs-end utils-sizing
+    // Flex utilities
+    // scss-docs-start utils-flex
+    '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,
+        evenly: space-evenly
+      )
+    ),
+    '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
+      )
+    ),
+    // scss-docs-end utils-flex
+    // Margin utilities
+    // scss-docs-start utils-spacing
+    'margin':
+      (
+        responsive: true,
+        property: margin,
+        class: m,
+        values:
+          map-merge(
+            $spacers,
+            (
+              auto: auto
+            )
+          )
+      ),
+    'margin-x': (
+      responsive: true,
+      property: margin-right margin-left,
+      class: mx,
+      values:
+        map-merge(
+          $spacers,
+          (
+            auto: auto
+          )
+        )
+    ),
+    'margin-y': (
+      responsive: true,
+      property: margin-top margin-bottom,
+      class: my,
+      values:
+        map-merge(
+          $spacers,
+          (
+            auto: auto
+          )
+        )
+    ),
+    'margin-top': (
+      responsive: true,
+      property: margin-top,
+      class: mt,
+      values:
+        map-merge(
+          $spacers,
+          (
+            auto: auto
+          )
+        )
+    ),
+    'margin-bottom': (
+      responsive: true,
+      property: margin-bottom,
+      class: mb,
+      values:
+        map-merge(
+          $spacers,
+          (
+            auto: auto
+          )
+        )
+    ),
+    // 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-bottom': (
+      responsive: true,
+      property: margin-bottom,
+      class: mb,
+      values: $negative-spacers
+    ),
+    // Padding utilities
+    'padding':
+      (
+        responsive: true,
+        property: padding,
+        class: p,
+        values: $spacers
+      ),
+    'padding-x': (
+      responsive: true,
+      property: padding-right padding-left,
+      class: px,
+      values: $spacers
+    ),
+    'padding-y': (
+      responsive: true,
+      property: padding-top padding-bottom,
+      class: py,
+      values: $spacers
+    ),
+    'padding-top': (
+      responsive: true,
+      property: padding-top,
+      class: pt,
+      values: $spacers
+    ),
+    'padding-bottom': (
+      responsive: true,
+      property: padding-bottom,
+      class: pb,
+      values: $spacers
+    ),
+    'gap': (
+      responsive: true,
+      property: gap,
+      class: gap,
+      values: $spacers
+    ),
+    'row-gap': (
+      responsive: true,
+      property: row-gap,
+      class: row-gap,
+      values: $spacers
+    ),
+    'column-gap': (
+      responsive: true,
+      property: column-gap,
+      class: column-gap,
+      values: $spacers
+    ),
+    // scss-docs-end utils-spacing
+    // Text
+    // scss-docs-start utils-text
+    'font-family':
+      (
+        property: font-family,
+        class: font,
+        values: (
+          monospace: var(--#{$variable-prefix}font-monospace)
+        )
+      ),
+    'font-size': (
+      rfs: true,
+      property: font-size,
+      class: fs,
+      values:
+        map-merge(
+          $font-sizes,
+          (
+            tiny: $tiny-font-size,
+            //(C)
+            big: $big-font-size,
+            //(C)
+            large: $large-font-size,
+            //(C)
+            xlarge: $xlarge-font-size//(C)
+          )
+        )
+    ),
+    'font-style': (
+      property: font-style,
+      class: fst,
+      values: italic normal
+    ),
+    'font-weight': (
+      property: font-weight,
+      class: fw,
+      values: (
+        lighter: $font-weight-lighter,
+        light: $font-weight-light,
+        normal: $font-weight-normal,
+        medium: $font-weight-medium,
+        semibold: $font-weight-semibold,
+        bold: $font-weight-bold,
+        bolder: $font-weight-bolder
+      )
+    ),
+    'line-height': (
+      property: line-height,
+      class: lh,
+      values: (
+        1: 1,
+        inherit: inherit,
+        //(C)
+        sm: $line-height-sm,
+        base: $line-height-base,
+        lg: $line-height-lg
+      )
+    ),
+    'text-decoration': (
+      property: text-decoration,
+      values: none underline line-through
+    ),
+    'text-transform': (
+      property: text-transform,
+      class: text,
+      values: none lowercase uppercase capitalize
+    ),
+    'white-space': (
+      property: white-space,
+      class: text,
+      values: (
+        wrap: normal,
+        nowrap: nowrap
+      )
+    ),
+    'word-wrap': (
+      property: word-wrap word-break,
+      class: text,
+      values: (
+        break: break-word
+      ),
+      rtl: false
+    ),
+    // scss-docs-end utils-text
+    // scss-docs-start utils-color
+    'color':
+      (
+        property: color,
+        class: text,
+        local-vars: (
+          'text-opacity': 1
+        ),
+        values:
+          map-merge(
+            $utilities-text-colors,
+            (
+              'white': $white,
+              'body': $body-color,
+              'muted': $text-muted,
+              'black-50': rgba($black, 0.5),
+              // deprecated
+              'white-50': rgba($white, 0.5),
+              // deprecated
+              'light': $text-light,
+              // (c)
+              'heading': $headings-color,
+              // (c)
+              'reset': inherit
+            )
+          )
+      ),
+    'text-opacity': (
+      css-var: true,
+      class: text-opacity,
+      values: (
+        25: 0.25,
+        50: 0.5,
+        75: 0.75,
+        100: 1
+      )
+    ),
+    // scss-docs-end utils-color
+    // scss-docs-start utils-links
+    'link-opacity':
+      (
+        css-var: true,
+        class: link-opacity,
+        state: hover,
+        values: (
+          10: 0.1,
+          25: 0.25,
+          50: 0.5,
+          75: 0.75,
+          100: 1
+        )
+      ),
+    'link-offset': (
+      property: text-underline-offset,
+      class: link-offset,
+      state: hover,
+      values: (
+        1: 0.125em,
+        2: 0.25em,
+        3: 0.375em
+      )
+    ),
+    'link-underline': (
+      property: text-decoration-color,
+      class: link-underline,
+      local-vars: (
+        'link-underline-opacity': 1
+      ),
+      values:
+        map-merge(
+          $utilities-links-underline,
+          (
+            null: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-underline-opacity, 1))
+          )
+        )
+    ),
+    'link-underline-opacity': (
+      css-var: true,
+      class: link-underline-opacity,
+      state: hover,
+      values: (
+        0: 0,
+        10: 0.1,
+        25: 0.25,
+        50: 0.5,
+        75: 0.75,
+        100: 1
+      )
+    ),
+    // scss-docs-end utils-links
+    // scss-docs-start utils-bg-color
+    'background-color':
+      (
+        property: background-color,
+        class: bg,
+        local-vars: (
+          'bg-opacity': 1
+        ),
+        values:
+          map-merge(
+            $utilities-bg-colors,
+            (
+              'body': $body-bg,
+              'white': $white,
+              'transparent': transparent,
+              'lighter': $gray-50,
+              //(C)
+              'lightest': $gray-25,
+              //(C)
+            )
+          )
+      ),
+    'bg-opacity': (
+      css-var: true,
+      class: bg-opacity,
+      values: (
+        10: 0.1,
+        25: 0.25,
+        50: 0.5,
+        75: 0.75,
+        100: 1
+      )
+    ),
+    'subtle-background-color': (
+      property: background-color,
+      class: bg,
+      values: $utilities-bg-subtle
+    ),
+    // scss-docs-end utils-bg-color
+    'gradient':
+      (
+        property: background-image,
+        class: bg,
+        values: (
+          gradient: var(--#{$variable-prefix}gradient)
+        )
+      ),
+    // scss-docs-start utils-interaction
+    'user-select':
+      (
+        property: user-select,
+        values: all auto none
+      ),
+    'pointer-events': (
+      property: pointer-events,
+      class: pe,
+      values: none auto
+    ),
+    // scss-docs-end utils-interaction
+    // scss-docs-start utils-border-radius
+    'rounded':
+      (
+        property: border-radius,
+        class: rounded,
+        values: (
+          null: $border-radius,
+          0: 0,
+          1: $border-radius-sm,
+          2: $border-radius,
+          3: $border-radius-lg,
+          circle: 50%,
+          pill: $border-radius-pill
+        )
+      ),
+    'rounded-top': (
+      property: border-top-left-radius border-top-right-radius,
+      class: rounded-top,
+      values: (
+        null: $border-radius
+      )
+    ),
+    'rounded-bottom': (
+      property: border-bottom-right-radius border-bottom-left-radius,
+      class: rounded-bottom,
+      values: (
+        null: $border-radius
+      )
+    ),
+    // scss-docs-end utils-border-radius
+    // scss-docs-start utils-visibility
+    'visibility':
+      (
+        property: visibility,
+        class: null,
+        values: (
+          visible: visible,
+          invisible: hidden
+        )
+      ),
+    // scss-docs-end utils-visibility
+    // scss-docs-start utils-zindex
+    'z-index':
+      (
+        property: z-index,
+        class: z,
+        values: $zindex-levels
+      ),
+    // scss-docs-end utils-zindex
+    // Custom Utilities
+    // *******************************************************************************
+    // scss-docs-start utils-flex-basis
+    'cursor':
+      (
+        property: cursor,
+        class: cursor,
+        values: pointer move grab
+      ),
+    // scss-docs-end utils-flex-basis
+  ),
+  $utilities
+);
+
+// Borders
+// *******************************************************************************
+
+// Bordered rows
+.row-bordered {
+  overflow: hidden;
+
+  > .col,
+  > [class^='col-'],
+  > [class*=' col-'],
+  > [class^='col '],
+  > [class*=' col '],
+  > [class$=' col'],
+  > [class='col'] {
+    position: relative;
+    padding-top: 1px;
+
+    &::before {
+      content: '';
+      position: absolute;
+      right: 0;
+      bottom: -1px;
+      left: 0;
+      display: block;
+      height: 0;
+      border-top: 1px solid $bordered-row-border-color;
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: -1px;
+      display: block;
+      width: 0;
+      border-left: 1px solid $bordered-row-border-color;
+    }
+  }
+
+  &.row-border-light {
+    > .col,
+    > [class^='col-'],
+    > [class*=' col-'],
+    > [class^='col '],
+    > [class*=' col '],
+    > [class$=' col'],
+    > [class='col'] {
+      &::before,
+      &::after {
+        border-color: $gray-100;
+      }
+    }
+  }
+}
+
+// Color
+// *******************************************************************************
+
+// Bg Label variant (Not able to include this in utils due to custom style)
+@each $color, $value in $theme-colors {
+  @if $color != primary {
+    @include bg-label-variant('.bg-label-#{$color}', $value);
+    @include border-label-variant('.border-label-#{$color}', $value);
+    @include border-light-variant('.border-light-#{$color}', $value);
+  }
+}
+
+// ! FIX: .bg-dark & .bg-label-dark color in dark mode
+@if $dark-style {
+  @include border-label-variant('.border-label-dark', $light);
+}
+
+// Anchor hover/focus bg colors
+a.bg-dark {
+  &:hover,
+  &:focus {
+    background-color: $gray-900 !important;
+  }
+}
+
+a.bg-light {
+  &:hover,
+  &:focus {
+    background-color: $gray-200 !important;
+  }
+}
+
+a.bg-lighter {
+  &:hover,
+  &:focus {
+    background-color: $gray-100 !important;
+  }
+}
+
+a.bg-lightest {
+  &:hover,
+  &:focus {
+    background-color: $gray-50 !important;
+  }
+}
+
+.text-muted[href] {
+  &:hover,
+  &:focus {
+    color: $text-muted-hover !important;
+  }
+}
+
+.text-light {
+  color: $text-light !important;
+
+  &[href] {
+    &:hover,
+    &:focus {
+      color: $text-muted-hover !important;
+    }
+  }
+}
+
+.text-lighter {
+  color: $text-lighter !important;
+
+  &[href] {
+    &:hover,
+    &:focus {
+      color: $text-muted-hover !important;
+    }
+  }
+}
+
+.text-lightest {
+  color: $text-lightest !important;
+
+  &[href] {
+    &:hover,
+    &:focus {
+      color: $text-muted-hover !important;
+    }
+  }
+}
+
+// Invertible colors
+
+.invert-text-white {
+  color: if(not $dark-style, $white, $body-bg) !important;
+}
+.invert-text-white[href]:hover {
+  &:hover,
+  &:focus {
+    color: if(not $dark-style, $white, $body-bg) !important;
+  }
+}
+
+.invert-text-dark {
+  color: if(not $dark-style, $black, $white) !important;
+}
+.invert-text-dark[href]:hover {
+  &:hover,
+  &:focus {
+    color: if(not $dark-style, $black, $white) !important;
+  }
+}
+
+.invert-bg-white {
+  background-color: if(not $dark-style, $white, $body-bg) !important;
+}
+a.invert-bg-white {
+  &:hover,
+  &:focus {
+    background-color: if(not $dark-style, $white, $body-bg) !important;
+  }
+}
+
+.invert-bg-dark {
+  background-color: if(not $dark-style, $gray-900, $white) !important;
+}
+a.invert-bg-dark {
+  &:hover,
+  &:focus {
+    background-color: if(not $dark-style, $gray-900, $white) !important;
+  }
+}
+
+.invert-border-dark {
+  border-color: if(not $dark-style, $dark, $white) !important;
+}
+
+.invert-border-white {
+  border-color: if(not $dark-style, $white, $body-bg) !important;
+}
+
+// Misc
+// *******************************************************************************
+
+// Layout containers
+.container-p-x {
+  padding-right: $container-padding-x-sm !important;
+  padding-left: $container-padding-x-sm !important;
+
+  @include media-breakpoint-up(lg) {
+    padding-right: $container-padding-x !important;
+    padding-left: $container-padding-x !important;
+  }
+}
+
+.container-m-nx {
+  margin-right: -$container-padding-x-sm !important;
+  margin-left: -$container-padding-x-sm !important;
+
+  @include media-breakpoint-up(lg) {
+    margin-right: -$container-padding-x !important;
+    margin-left: -$container-padding-x !important;
+  }
+}
+
+.container-p-y {
+  &:not([class^='pt-']):not([class*=' pt-']) {
+    padding-top: $container-padding-y !important;
+  }
+
+  &:not([class^='pb-']):not([class*=' pb-']) {
+    padding-bottom: $container-padding-y !important;
+  }
+}
+
+.container-m-ny {
+  &:not([class^='mt-']):not([class*=' mt-']) {
+    margin-top: -$container-padding-y !important;
+  }
+
+  &:not([class^='mb-']):not([class*=' mb-']) {
+    margin-bottom: -$container-padding-y !important;
+  }
+}
+
+// Table cell
+.cell-fit {
+  width: 0.1%;
+  white-space: nowrap;
+}