@onemrvapublic/design-system-theme 0.0.0-semantically-released

package/utilities/_utilities.scss

@@ -0,0 +1,333 @@
+@use '../utilities/variables' as variables;
+@use '../utilities/media' as media;
+@use 'sass:map';
+@use 'sass:list';
+
+@mixin utilities() {
+  // text
+  .text-center {
+    text-align: center !important;
+  }
+  .text-right,
+  .text-end {
+    text-align: right !important;
+  }
+  .text-left,
+  .text-start {
+    text-align: left !important;
+  }
+  //@each $breakpoint in variables.$breakpoints {
+  //  @include media.media(variables.$breakpoints, list.nth($breakpoint, 1)) {
+  //    .text-center-#{list.nth($breakpoint, 1)} {
+  //      text-align: center !important;
+  //    }
+  //    .text-right-#{list.nth($breakpoint, 1)},
+  //    .text-end-#{list.nth($breakpoint, 1)} {
+  //      text-align: right !important;
+  //    }
+  //    .text-left-#{list.nth($breakpoint, 1)},
+  //    .text-start-#{list.nth($breakpoint, 1)} {
+  //      text-align: left !important;
+  //    }
+  //  }
+  //}
+
+  .text-lowercase {
+    text-transform: lowercase !important;
+  }
+  .text-uppercase {
+    text-transform: uppercase !important;
+  }
+  .text-capitalize {
+    text-transform: capitalize !important;
+  }
+
+  .rotate-0 {
+    transform: rotate(0deg);
+    transition: transform 0.3s ease;
+  }
+  .rotate-45 {
+    transform: rotate(45deg);
+    transition: transform 0.3s ease;
+  }
+  .rotate-90 {
+    transform: rotate(90deg);
+    transition: transform 0.3s ease;
+  }
+  .rotate-135 {
+    transform: rotate(135deg);
+    transition: transform 0.3s ease;
+  }
+  .rotate-180 {
+    transform: rotate(180deg);
+    transition: transform 0.3s ease;
+  }
+  .rotate-225 {
+    transform: rotate(225deg);
+    transition: transform 0.3s ease;
+  }
+  .rotate-270 {
+    transform: rotate(270deg);
+    transition: transform 0.3s ease;
+  }
+
+  // align
+  .align-baseline {
+    vertical-align: baseline !important;
+  }
+  .align-top {
+    vertical-align: top !important;
+  }
+  .align-middle {
+    vertical-align: middle !important;
+  }
+  .align-bottom {
+    vertical-align: bottom !important;
+  }
+  .align-text-top {
+    vertical-align: text-top !important;
+  }
+  .align-text-bottom {
+    vertical-align: text-bottom !important;
+  }
+
+  // overflow
+  .overflow-auto {
+    overflow: auto !important;
+  }
+  .overflow-hidden {
+    overflow: hidden !important;
+  }
+  .overflow-visible {
+    overflow: visible !important;
+  }
+  .overflow-scroll {
+    overflow: scroll !important;
+  }
+
+  // float
+  .float-right,
+  .float-end {
+    float: right !important;
+  }
+  .float-left,
+  .float-start {
+    float: left !important;
+  }
+  //@each $breakpoint in variables.$breakpoints {
+  //  @include media.media(variables.$breakpoints, list.nth($breakpoint, 1)) {
+  //    .float-right-#{list.nth($breakpoint, 1)},
+  //    .float-end-#{list.nth($breakpoint, 1)} {
+  //      float: right !important;
+  //    }
+  //    .float-left-#{list.nth($breakpoint, 1)},
+  //    .float-start-#{list.nth($breakpoint, 1)} {
+  //      float: left !important;
+  //    }
+  //  }
+  //}
+
+  // display
+  .d-none {
+    display: none !important;
+  }
+  .d-inline {
+    display: inline !important;
+  }
+  .d-inline-block {
+    display: inline-block !important;
+  }
+  .d-block {
+    display: block !important;
+  }
+  .d-grid {
+    display: grid !important;
+  }
+  .d-table {
+    display: table !important;
+  }
+  .d-table-cell {
+    display: table-cell !important;
+  }
+  .d-table-row {
+    display: table-row !important;
+  }
+  .d-flex {
+    display: flex !important;
+  }
+  .d-inline-flex {
+    display: inline-flex !important;
+  }
+
+  @each $breakpoint in variables.$breakpoints {
+    @include media.media(variables.$breakpoints, list.nth($breakpoint, 1)) {
+      .d-none-#{list.nth($breakpoint, 1)} {
+        display: none !important;
+      }
+      .d-inline-#{list.nth($breakpoint, 1)} {
+        display: inline !important;
+      }
+      .d-inline-block-#{list.nth($breakpoint, 1)} {
+        display: inline-block !important;
+      }
+      .d-block-#{list.nth($breakpoint, 1)} {
+        display: block !important;
+      }
+      .d-grid-#{list.nth($breakpoint, 1)} {
+        display: grid !important;
+      }
+      .d-table-#{list.nth($breakpoint, 1)} {
+        display: table !important;
+      }
+      .d-table-cell-#{list.nth($breakpoint, 1)} {
+        display: table-cell !important;
+      }
+      .d-table-row-#{list.nth($breakpoint, 1)} {
+        display: table-row !important;
+      }
+      .d-flex-#{list.nth($breakpoint, 1)} {
+        display: flex !important;
+      }
+      .d-inline-flex-#{list.nth($breakpoint, 1)} {
+        display: inline-flex !important;
+      }
+    }
+  }
+
+  .flex-center {
+    display: flex;
+    align-items: center;
+  }
+
+  // positions
+  .position-relative {
+    position: relative !important;
+  }
+  .position-absolute {
+    position: absolute !important;
+  }
+  .position-fixed {
+    position: fixed !important;
+  }
+  .position-static {
+    position: static !important;
+  }
+  .position-sticky {
+    position: sticky !important;
+  }
+  .clickable {
+    cursor: pointer;
+  }
+  // visibility
+  .visible {
+    visibility: visible !important;
+  }
+  .invisible {
+    visibility: hidden !important;
+  }
+  .hidden {
+    display: none;
+  }
+
+  // Sizing
+  @for $i from 0 through 100 {
+    .w-#{$i} {
+      width: '#{$i}%' !important;
+    }
+    .h-#{$i} {
+      height: '#{$i}%' !important;
+    }
+    .vw-#{$i} {
+      width: '#{$i}vw' !important;
+    }
+    .vh-#{$i} {
+      height: '#{$i}vh' !important;
+    }
+    .mw-#{$i} {
+      max-width: '#{$i}%' !important;
+    }
+    .mh-#{$i} {
+      max-height: '#{$i}%' !important;
+    }
+  }
+  .w-auto {
+    width: auto !important;
+  }
+  .h-auto {
+    height: auto !important;
+  }
+
+  .mat-elevation-z0 {
+    box-shadow: var(--mat-sys-level0);
+  }
+  .mat-elevation-z1 {
+    box-shadow: var(--mat-sys-level1);
+  }
+  .mat-elevation-z2 {
+    box-shadow: var(--mat-sys-level2);
+  }
+  .mat-elevation-z3 {
+    box-shadow: var(--mat-sys-level3);
+  }
+  .mat-elevation-z4 {
+    box-shadow: var(--mat-sys-level4);
+  }
+  .mat-elevation-z5 {
+    box-shadow: var(--mat-sys-level5);
+  }
+
+  .show-icon {
+    &:not(.mat-grayscale):before {
+      font-family: var(--icon-font);
+      position: relative;
+      float: left;
+      //margin-left: calc(var(--spacer) * -4.25);
+      height: 100%;
+      line-height: 100%;
+      vertical-align: middle;
+      //left: var(--spacer);
+      font-size: 1.25rem;
+      font-variation-settings:
+        'FILL' 1,
+        'wght' 400,
+        'GRAD' 0,
+        'opsz' 48;
+      color: var(--mat-sys-primary);
+    }
+    &.small {
+    }
+    &.large {
+    }
+  }
+
+  .show-icon.mat-info,
+  .mat-info .show-icon {
+    &:before {
+      content: '\e88e';
+    }
+  }
+  .show-icon.mat-success,
+  .mat-success .show-icon {
+    &:before {
+      content: '\e86c';
+    }
+  }
+  .show-icon.mat-warn,
+  .mat-warn .show-icon {
+    &:before {
+      content: '\e002';
+    }
+  }
+  .show-icon.mat-grayscale,
+  .mat-grayscale .show-icon,
+  .show-icon.mat-neutral,
+  .mat-grayscale .mat-neutral {
+    padding: var(--spacer);
+  }
+  .show-icon.mat-error,
+  .mat-error .show-icon {
+    &:before {
+      content: '\e000';
+    }
+  }
+}

package/utilities/_variables.scss

@@ -0,0 +1,51 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use './palettes';
+
+$onemrva-accent-gradient: var(--background-gradient);
+$onemrva-accent-gradient-vertical: var(--background-gradient);
+$onemrva-button-outline-opacity: 0.3;
+$box-shadow: 0px 3px 3px #312f3a29;
+$gap: 8px;
+
+$default-font-family: 'Source Sans Pro', sans-serif;
+$header-font-family: 'Poppins', sans-serif;
+
+$spacer: 8px !default;
+$spacers:
+  '-0' 0,
+  '-2xs' $spacer * 0.25,
+  '-xs' $spacer * 0.5,
+  '-s' $spacer,
+  '' $spacer,
+  '-m' $spacer * 2,
+  '-l' $spacer * 3,
+  '-xl' $spacer * 4,
+  '-2xl' $spacer * 5,
+  '-3xl' $spacer * 7,
+  '-auto' 'auto';
+
+$breakpoints: (
+  xsmall: (
+    max: 599.99,
+  ),
+  small: (
+    min: 600,
+    max: 959.99,
+  ),
+  medium: (
+    min: 960,
+    max: 1279.99,
+  ),
+  large: (
+    min: 1280,
+    max: 1535.99,
+  ),
+  xlarge: (
+    min: 1536,
+    max: 1919.99,
+  ),
+  xxlarge: (
+    min: 1920,
+  ),
+);