@brady_h/styles 1.0.2 → 1.0.3

package/src/_classes.scss

@@ -1,4 +1,62 @@
+@use "sass:map";
 @use "./mixins" as *;
+@use "./variables" as vars;
+@use "./breakpoints" as bp;
+
+$utility-spacing: vars.$spacing;
+
+$utility-display: (
+  block: block,
+  inline: inline,
+  inline-block: inline-block,
+  flex: flex,
+  inline-flex: inline-flex,
+  grid: grid,
+  inline-grid: inline-grid,
+  hidden: none,
+);
+
+$utility-font-sizes: vars.$font-size;
+$utility-font-weights: vars.$font-weight;
+$utility-line-heights: vars.$line-height;
+$utility-radii: vars.$border-radius;
+$utility-shadows: vars.$box-shadow;
+
+$utility-opacity: (
+  0: 0,
+  10: 0.1,
+  20: 0.2,
+  25: 0.25,
+  30: 0.3,
+  40: 0.4,
+  50: 0.5,
+  60: 0.6,
+  70: 0.7,
+  75: 0.75,
+  80: 0.8,
+  90: 0.9,
+  100: 1,
+);
+
+$utility-z-index: vars.$z-index;
+
+@each $name, $value in $utility-display {
+  .u-#{$name} {
+    display: $value;
+  }
+}
+
+.u-visible {
+  visibility: visible;
+}
+
+.u-invisible {
+  visibility: hidden;
+}
+
+.u-collapse {
+  visibility: collapse;
+}
 
 .u-flex-center {
   @include flex-center;
@@ -8,47 +66,946 @@
   @include flex-between;
 }
 
-.u-flex {
-  display: flex;
+.u-flex-start {
+  @include flex-start;
+}
+
+.u-flex-end {
+  @include flex-end;
 }
 
 .u-flex-column {
-  display: flex;
-  flex-direction: column;
+  @include flex-column;
+}
+
+.u-flex-column-center {
+  @include flex-column-center;
 }
 
 .u-flex-wrap {
   flex-wrap: wrap;
 }
 
-.u-text-center {
-  text-align: center;
+.u-flex-nowrap {
+  flex-wrap: nowrap;
 }
 
-.u-text-truncate {
-  @include text-truncate;
+.u-flex-wrap-reverse {
+  flex-wrap: wrap-reverse;
+}
+
+.u-flex-1 {
+  flex: 1;
+}
+
+.u-flex-auto {
+  flex: auto;
+}
+
+.u-flex-none {
+  flex: none;
+}
+
+.u-flex-grow {
+  flex-grow: 1;
+}
+
+.u-flex-grow-0 {
+  flex-grow: 0;
+}
+
+.u-flex-shrink {
+  flex-shrink: 1;
+}
+
+.u-flex-shrink-0 {
+  flex-shrink: 0;
+}
+
+.u-flex-row {
+  flex-direction: row;
+}
+
+.u-flex-row-reverse {
+  flex-direction: row-reverse;
+}
+
+.u-flex-column-reverse {
+  flex-direction: column-reverse;
+}
+
+.u-items-start {
+  align-items: flex-start;
+}
+
+.u-items-center {
+  align-items: center;
+}
+
+.u-items-end {
+  align-items: flex-end;
+}
+
+.u-items-stretch {
+  align-items: stretch;
+}
+
+.u-items-baseline {
+  align-items: baseline;
+}
+
+.u-justify-start {
+  justify-content: flex-start;
+}
+
+.u-justify-center {
+  justify-content: center;
+}
+
+.u-justify-end {
+  justify-content: flex-end;
+}
+
+.u-justify-between {
+  justify-content: space-between;
+}
+
+.u-justify-around {
+  justify-content: space-around;
+}
+
+.u-justify-evenly {
+  justify-content: space-evenly;
+}
+
+.u-self-auto {
+  align-self: auto;
+}
+
+.u-self-start {
+  align-self: flex-start;
+}
+
+.u-self-center {
+  align-self: center;
+}
+
+.u-self-end {
+  align-self: flex-end;
+}
+
+.u-self-stretch {
+  align-self: stretch;
+}
+
+.u-grid-center {
+  @include grid-center;
+}
+
+.u-grid-auto-fit {
+  @include grid-auto-fit;
+}
+
+.u-grid-auto-fill {
+  @include grid-auto-fill;
+}
+
+.u-grid-cols-1 {
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+
+.u-grid-cols-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.u-grid-cols-3 {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.u-grid-cols-4 {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.u-grid-cols-6 {
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+}
+
+.u-grid-cols-12 {
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+}
+
+.u-grid-cols-none {
+  grid-template-columns: none;
+}
+
+.u-col-span-1 {
+  grid-column: span 1 / span 1;
+}
+
+.u-col-span-2 {
+  grid-column: span 2 / span 2;
+}
+
+.u-col-span-3 {
+  grid-column: span 3 / span 3;
+}
+
+.u-col-span-full {
+  grid-column: 1 / -1;
+}
+
+.u-w-auto {
+  width: auto;
 }
 
 .u-w-full {
   width: 100%;
 }
 
+.u-w-screen {
+  width: 100vw;
+}
+
+.u-w-fit {
+  width: fit-content;
+}
+
+.u-w-max {
+  width: max-content;
+}
+
+.u-w-min {
+  width: min-content;
+}
+
+.u-h-auto {
+  height: auto;
+}
+
 .u-h-full {
   height: 100%;
 }
 
+.u-h-screen {
+  height: 100vh;
+}
+
+.u-h-dvh {
+  height: 100dvh;
+}
+
+.u-h-fit {
+  height: fit-content;
+}
+
+.u-min-w-0 {
+  min-width: 0;
+}
+
+.u-min-h-0 {
+  min-height: 0;
+}
+
+.u-min-w-full {
+  min-width: 100%;
+}
+
+.u-min-h-full {
+  min-height: 100%;
+}
+
+.u-max-w-full {
+  max-width: 100%;
+}
+
+.u-max-h-full {
+  max-height: 100%;
+}
+
+.u-max-w-screen {
+  max-width: 100vw;
+}
+
+.u-max-h-screen {
+  max-height: 100vh;
+}
+
+.u-m-auto {
+  margin: auto;
+}
+
 .u-mx-auto {
   margin-inline: auto;
 }
 
-.u-sr-only {
-  @include visually-hidden;
+.u-my-auto {
+  margin-block: auto;
+}
+
+.u-m-0 {
+  margin: 0;
+}
+
+.u-p-0 {
+  padding: 0;
+}
+
+@each $key, $value in $utility-spacing {
+  .u-gap-#{$key} {
+    gap: $value;
+  }
+
+  .u-gap-x-#{$key} {
+    column-gap: $value;
+  }
+
+  .u-gap-y-#{$key} {
+    row-gap: $value;
+  }
+
+  .u-p-#{$key} {
+    padding: $value;
+  }
+
+  .u-px-#{$key} {
+    padding-inline: $value;
+  }
+
+  .u-py-#{$key} {
+    padding-block: $value;
+  }
+
+  .u-pt-#{$key} {
+    padding-top: $value;
+  }
+
+  .u-pr-#{$key} {
+    padding-right: $value;
+  }
+
+  .u-pb-#{$key} {
+    padding-bottom: $value;
+  }
+
+  .u-pl-#{$key} {
+    padding-left: $value;
+  }
+
+  .u-m-#{$key} {
+    margin: $value;
+  }
+
+  .u-mx-#{$key} {
+    margin-inline: $value;
+  }
+
+  .u-my-#{$key} {
+    margin-block: $value;
+  }
+
+  .u-mt-#{$key} {
+    margin-top: $value;
+  }
+
+  .u-mr-#{$key} {
+    margin-right: $value;
+  }
+
+  .u-mb-#{$key} {
+    margin-bottom: $value;
+  }
+
+  .u-ml-#{$key} {
+    margin-left: $value;
+  }
+
+  .u-inset-#{$key} {
+    inset: $value;
+  }
+}
+
+.u-text-left {
+  text-align: left;
+}
+
+.u-text-center {
+  text-align: center;
+}
+
+.u-text-right {
+  text-align: right;
+}
+
+.u-text-justify {
+  text-align: justify;
+}
+
+.u-text-start {
+  text-align: start;
+}
+
+.u-text-end {
+  text-align: end;
+}
+
+.u-text-uppercase {
+  text-transform: uppercase;
+}
+
+.u-text-lowercase {
+  text-transform: lowercase;
+}
+
+.u-text-capitalize {
+  text-transform: capitalize;
+}
+
+.u-text-normal {
+  text-transform: none;
+}
+
+.u-text-italic {
+  font-style: italic;
+}
+
+.u-text-not-italic {
+  font-style: normal;
+}
+
+.u-text-underline {
+  text-decoration: underline;
+}
+
+.u-text-no-underline {
+  text-decoration: none;
+}
+
+.u-text-line-through {
+  text-decoration: line-through;
+}
+
+.u-text-truncate {
+  @include text-truncate;
+}
+
+.u-text-wrap {
+  white-space: normal;
+}
+
+.u-text-nowrap {
+  white-space: nowrap;
+}
+
+.u-text-balance {
+  text-wrap: balance;
+}
+
+.u-text-pretty {
+  text-wrap: pretty;
+}
+
+.u-text-break {
+  overflow-wrap: break-word;
+}
+
+.u-text-break-all {
+  word-break: break-all;
+}
+
+@each $key, $value in $utility-font-sizes {
+  .u-text-#{$key} {
+    font-size: $value;
+  }
+}
+
+@each $key, $value in $utility-font-weights {
+  .u-font-#{$key} {
+    font-weight: $value;
+  }
+}
+
+@each $key, $value in $utility-line-heights {
+  .u-leading-#{$key} {
+    line-height: $value;
+  }
+}
+
+.u-font-normal {
+  font-weight: 400;
+}
+
+.u-font-medium {
+  font-weight: 500;
+}
+
+.u-font-semibold {
+  font-weight: 600;
+}
+
+.u-font-bold {
+  font-weight: 700;
+}
+
+.u-leading-none {
+  line-height: 1;
+}
+
+.u-leading-tight {
+  line-height: 1.25;
+}
+
+.u-leading-normal {
+  line-height: 1.5;
+}
+
+.u-leading-loose {
+  line-height: 2;
+}
+
+.u-relative {
+  position: relative;
+}
+
+.u-absolute {
+  position: absolute;
+}
+
+.u-fixed {
+  position: fixed;
+}
+
+.u-sticky {
+  position: sticky;
+}
+
+.u-inset-0 {
+  inset: 0;
+}
+
+.u-top-0 {
+  top: 0;
+}
+
+.u-right-0 {
+  right: 0;
+}
+
+.u-bottom-0 {
+  bottom: 0;
+}
+
+.u-left-0 {
+  left: 0;
+}
+
+.u-overflow-hidden {
+  overflow: hidden;
+}
+
+.u-overflow-auto {
+  overflow: auto;
+}
+
+.u-overflow-scroll {
+  overflow: scroll;
+}
+
+.u-overflow-visible {
+  overflow: visible;
+}
+
+.u-overflow-x-auto {
+  overflow-x: auto;
+}
+
+.u-overflow-y-auto {
+  overflow-y: auto;
+}
+
+.u-overflow-x-hidden {
+  overflow-x: hidden;
+}
+
+.u-overflow-y-hidden {
+  overflow-y: hidden;
+}
+
+@each $key, $value in $utility-radii {
+  .u-rounded-#{$key} {
+    border-radius: $value;
+  }
+}
+
+.u-rounded {
+  border-radius: map.get($utility-radii, md);
+}
+
+.u-rounded-full {
+  border-radius: 9999px;
+}
+
+.u-rounded-none {
+  border-radius: 0;
+}
+
+.u-border {
+  border-style: solid;
+  border-width: 1px;
+}
+
+.u-border-0 {
+  border-width: 0;
+}
+
+.u-border-none {
+  border: none;
+}
+
+.u-border-solid {
+  border-style: solid;
+}
+
+.u-border-dashed {
+  border-style: dashed;
+}
+
+.u-border-dotted {
+  border-style: dotted;
+}
+
+.u-shadow {
+  box-shadow: map.get($utility-shadows, md);
+}
+
+@each $key, $value in $utility-shadows {
+  .u-shadow-#{$key} {
+    box-shadow: $value;
+  }
+}
+
+.u-shadow-none {
+  box-shadow: none;
+}
+
+.u-cursor-pointer {
+  cursor: pointer;
+}
+
+.u-cursor-default {
+  cursor: default;
+}
+
+.u-cursor-not-allowed {
+  cursor: not-allowed;
+}
+
+.u-cursor-grab {
+  cursor: grab;
+}
+
+.u-cursor-grabbing {
+  cursor: grabbing;
 }
 
 .u-pointer {
   cursor: pointer;
 }
 
+.u-pointer-events-none {
+  pointer-events: none;
+}
+
+.u-pointer-events-auto {
+  pointer-events: auto;
+}
+
 .u-select-none {
   user-select: none;
 }
+
+.u-select-text {
+  user-select: text;
+}
+
+.u-select-all {
+  user-select: all;
+}
+
+.u-sr-only {
+  @include visually-hidden;
+}
+
+.u-focus-ring {
+  @include focus-ring;
+}
+
+.u-no-transition {
+  @include no-transition;
+}
+
+.u-scrollbar-hide {
+  @include scrollbar-hide;
+}
+
+.u-scroll-smooth {
+  scroll-behavior: smooth;
+}
+
+.u-scroll-auto {
+  scroll-behavior: auto;
+}
+
+.u-list-none {
+  list-style: none;
+}
+
+.u-list-disc {
+  list-style: disc;
+}
+
+.u-list-decimal {
+  list-style: decimal;
+}
+
+.u-bg-transparent {
+  background-color: transparent;
+}
+
+.u-bg-current {
+  background-color: currentColor;
+}
+
+.u-opacity-0 {
+  opacity: 0;
+}
+
+@each $key, $value in $utility-opacity {
+  .u-opacity-#{$key} {
+    opacity: $value;
+  }
+}
+
+.u-transition {
+  transition: all 200ms ease;
+}
+
+.u-transition-none {
+  transition: none;
+}
+
+.u-transition-colors {
+  transition:
+    color 200ms ease,
+    background-color 200ms ease,
+    border-color 200ms ease;
+}
+
+.u-transition-transform {
+  transition: transform 200ms ease;
+}
+
+.u-transform-none {
+  transform: none;
+}
+
+.u-scale-95 {
+  transform: scale(0.95);
+}
+
+.u-scale-100 {
+  transform: scale(1);
+}
+
+.u-scale-105 {
+  transform: scale(1.05);
+}
+
+.u-rotate-90 {
+  transform: rotate(90deg);
+}
+
+.u-rotate-180 {
+  transform: rotate(180deg);
+}
+
+.u-rotate-270 {
+  transform: rotate(270deg);
+}
+
+.u-z-auto {
+  z-index: auto;
+}
+
+@each $key, $value in $utility-z-index {
+  .u-z-#{$key} {
+    z-index: $value;
+  }
+}
+
+.u-aspect-square {
+  aspect-ratio: 1 / 1;
+}
+
+.u-aspect-video {
+  aspect-ratio: 16 / 9;
+}
+
+.u-aspect-portrait {
+  aspect-ratio: 3 / 4;
+}
+
+.u-object-cover {
+  object-fit: cover;
+}
+
+.u-object-contain {
+  object-fit: contain;
+}
+
+.u-object-fill {
+  object-fit: fill;
+}
+
+.u-object-none {
+  object-fit: none;
+}
+
+.u-object-center {
+  object-position: center;
+}
+
+.u-object-top {
+  object-position: top;
+}
+
+.u-object-bottom {
+  object-position: bottom;
+}
+
+.u-mobile-hidden {
+  @include bp.respond-down(md) {
+    display: none;
+  }
+}
+
+.u-mobile-block {
+  @include bp.respond-down(md) {
+    display: block;
+  }
+}
+
+.u-mobile-flex {
+  @include bp.respond-down(md) {
+    display: flex;
+  }
+}
+
+.u-mobile-grid {
+  @include bp.respond-down(md) {
+    display: grid;
+  }
+}
+
+.u-desktop-hidden {
+  @include bp.respond-up(md) {
+    display: none;
+  }
+}
+
+.u-desktop-block {
+  @include bp.respond-up(md) {
+    display: block;
+  }
+}
+
+.u-desktop-flex {
+  @include bp.respond-up(md) {
+    display: flex;
+  }
+}
+
+.u-desktop-grid {
+  @include bp.respond-up(md) {
+    display: grid;
+  }
+}
+
+@each $breakpoint-name, $breakpoint-value in bp.$breakpoints {
+  @media (min-width: #{$breakpoint-value}) {
+    @each $name, $value in $utility-display {
+      .u-#{$breakpoint-name}-#{$name} {
+        display: $value;
+      }
+    }
+
+    .u-#{$breakpoint-name}-flex-row {
+      flex-direction: row;
+    }
+
+    .u-#{$breakpoint-name}-flex-column {
+      flex-direction: column;
+    }
+
+    .u-#{$breakpoint-name}-flex-wrap {
+      flex-wrap: wrap;
+    }
+
+    .u-#{$breakpoint-name}-flex-nowrap {
+      flex-wrap: nowrap;
+    }
+
+    .u-#{$breakpoint-name}-items-center {
+      align-items: center;
+    }
+
+    .u-#{$breakpoint-name}-justify-center {
+      justify-content: center;
+    }
+
+    .u-#{$breakpoint-name}-justify-between {
+      justify-content: space-between;
+    }
+
+    .u-#{$breakpoint-name}-text-left {
+      text-align: left;
+    }
+
+    .u-#{$breakpoint-name}-text-center {
+      text-align: center;
+    }
+
+    .u-#{$breakpoint-name}-text-right {
+      text-align: right;
+    }
+
+    @each $key, $value in $utility-spacing {
+      .u-#{$breakpoint-name}-gap-#{$key} {
+        gap: $value;
+      }
+
+      .u-#{$breakpoint-name}-p-#{$key} {
+        padding: $value;
+      }
+
+      .u-#{$breakpoint-name}-px-#{$key} {
+        padding-inline: $value;
+      }
+
+      .u-#{$breakpoint-name}-py-#{$key} {
+        padding-block: $value;
+      }
+
+      .u-#{$breakpoint-name}-m-#{$key} {
+        margin: $value;
+      }
+
+      .u-#{$breakpoint-name}-mx-#{$key} {
+        margin-inline: $value;
+      }
+
+      .u-#{$breakpoint-name}-my-#{$key} {
+        margin-block: $value;
+      }
+    }
+  }
+}