@progressio_resources/gravity-design-system 4.0.26 → 4.0.27

package/src/lib/styles/_functions.scss

@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 @function to-rgb($value) {
-  @return red($value), green($value), blue($value);
-}
+  @return color.red($value), color.green($value), color.blue($value);
+}

package/src/lib/styles/_responsive.scss

@@ -1,5 +1,5 @@
-@use 'sass:map';
 @use "foundations/breakpoints/breakpoints" as br;
+@use "sass:map";
 
 .hide-xl {
   @media (max-width: map.get(br.$breakpoints, xl)) {

package/src/lib/styles/components/_card_highlight.scss

@@ -1,13 +1,13 @@
-@use "../foundations/typography/hero.typography";
-@use "../foundations/border-radius/hero.border-radius" as bor;
-@use "../shared";
+@use "../foundations/typography/hero.typography" as typography;
+@use "../foundations/border-radius/hero.border-radius" as border-radius;
+@use "../shared" as *;
 
 .gravity-card-highlight {
   @extend .hr-body, .md-regular;
 
   background-color: var(--surface-primary);
   border-left: 1.25rem solid var(--bg-highlight-neutro-secondary);
-  border-radius: bor.$border-radius-md;
+  border-radius: border-radius.$border-radius-md;
   color: var(--text-primary);
   padding: 1.5rem;
 
@@ -24,7 +24,7 @@
 
     &.gravity-card-content {
       border: 1px solid var(--divider-primary);
-      border-radius: bor.$border-radius-md;
+      border-radius: border-radius.$border-radius-md;
       margin-top: 1rem;
     }
 

package/src/lib/styles/components/_datepicker-v2.scss

@@ -1,9 +1,19 @@
+@use "../foundations/z-index/z-index" as z-index;
+
 gt-daterangepicker-container, gt-datepicker-container {
   cursor: default;
-  z-index: 1;
+  z-index: z-index.$z-index-content;
 }
 
 gt-daterangepicker-inline-container, gt-datepicker-inline-container {
-  height: 100%;
   width: 100%;
+  height: calc(100% - 23px);
+}
+
+gt-datepicker-container,
+gt-daterangepicker-container {
+  .spacing-sm { margin-top: 6px; }
+  .spacing-md { margin-top: 12px; }
+  //transform: translate3d(-1px, 28px, 0px) !important;
 }
+

package/src/lib/styles/components/_datepicker.scss

@@ -1,13 +1,14 @@
-@use 'sass:map';
-@use "../foundations/typography/hero.typography";
-@use "../foundations/spacing/spacing" as spa;
-@use "../foundations/border-radius/hero.border-radius" as bor;
-@use "../shared";
+@use "../shared" as *;
+@use "../foundations/z-index/z-index" as z-index;
+@use "../foundations/spacing/spacing" as spacing;
+@use "../foundations/typography/hero.typography" as typography;
+@use "../foundations/border-radius/hero.border-radius" as border-radius;
+@use "sass:map";
 
 $datepicker-min-width: 15rem;
 
 bs-datepicker-container {
-  z-index: 1;
+  z-index: z-index.$z-index-content;
 
   .bs-datepicker-container {
     padding: 0;
@@ -16,14 +17,14 @@ bs-datepicker-container {
 
 .gravity-datepicker-dialog {
   background-color: var(--bg-calender-primary);
-  border-radius: bor.$border-radius-md;
+  border-radius: border-radius.$border-radius-md;
   box-shadow: 0 0 10px #AAA;
   color: var(--on-bg-calender-primary);
 
   .bs-datepicker-head {
     background-color: var(--bg-calendar-nav-primary);
-    border-top-left-radius: bor.$border-radius-md;
-    border-top-right-radius: bor.$border-radius-md;
+    border-top-left-radius: border-radius.$border-radius-md;
+    border-top-right-radius: border-radius.$border-radius-md;
     color: var(--on-bg-calendar-nav-primary);
     height: 3.125rem;
     min-width: $datepicker-min-width;
@@ -40,7 +41,7 @@ bs-datepicker-container {
 
         background-color: var(--bg-calendar-nav-primary);
         border: none;
-        border-radius: bor.$border-radius-rounded;
+        border-radius: border-radius.$border-radius-rounded;
         color: var(--arrow-calendar-active-primary);
         cursor: pointer;
         height: 2rem;
@@ -73,13 +74,13 @@ bs-datepicker-container {
         align-items: center;
         background-color: var(--bg-calendar-nav-primary);
         border: none;
-        border-radius: bor.$border-radius-rounded;
+        border-radius: border-radius.$border-radius-rounded;
         color: var(--on-bg-calendar-nav-primary);
         cursor: pointer;
         display: flex;
         height: 2rem;
         outline: none;
-        padding-inline: map.get(spa.$spacing-values, sm);
+        padding-inline: map.get(spacing.$spacing-values, sm);
 
         &:not([disabled]):hover {
           background-color: var(--bg-arrow-calendar-hover-primary);
@@ -103,7 +104,7 @@ bs-datepicker-container {
       width: 100%;
 
       td {
-        border-radius: bor.$border-radius-rounded;
+        border-radius: border-radius.$border-radius-rounded;
         color: var(--number-calender-active-primary);
         cursor: pointer;
         height: 2rem;
@@ -112,7 +113,7 @@ bs-datepicker-container {
 
         span {
           align-items: center;
-          border-radius: bor.$border-radius-rounded;
+          border-radius: border-radius.$border-radius-rounded;
           display: flex;
           height: 2rem;
           justify-content: center;
@@ -183,7 +184,7 @@ bs-datepicker-container {
 
       span {
         @extend .hr-label, .sm-regular;
-        border-radius: bor.$border-radius-rounded;
+        border-radius: border-radius.$border-radius-rounded;
         margin: 0 !important;
 
         &.selected {

package/src/lib/styles/components/_offcanvas.scss

@@ -1,64 +1,54 @@
-@use 'sass:map';
 @use "../foundations/breakpoints/_breakpoints.scss" as br;
-@use "../foundations/elevation/hero.elevation";
-@use "../foundations/spacing/spacing";
-
-$z-index: 1040;
+@use "../foundations/spacing/spacing" as spacing;
+@use "../foundations/z-index/z-index" as z-index;
+@use "../foundations/elevation/hero.elevation" as elevation;
 
 .fade {
   transition: opacity .15s linear;
 }
 
 .offcanvas-backdrop {
-  background-color: var(--surface-primary);
+  background-color: var(--backdrop-primary);
   height: 100vh;
   left: 0;
   position: fixed;
   top: 0;
-  z-index: $z-index;
   width: 100vw;
 
   &.fade {
     opacity: 0;
+    transition: opacity .15s linear;
   }
 
   &.show {
-    opacity: .5;
+    opacity: var(--backdrop-opacity);
   }
 }
 
 .offcanvas {
   @extend .elevation-sm;
 
-  border-left-width: 0 !important;
+  border-left: 2px solid var(--surface-primary);
   bottom: 0;
-  box-shadow: 0 4px 10px 0 rgba(21, 28, 41, 0.22) !important;
+  box-shadow: none !important;
   color: var(--text-primary);
   outline: 0;
-  padding: 2rem;
+  padding: var(--gravity-spacing-lg) 0;
   position: fixed;
   right: 0;
   top: 0;
+  z-index: z-index.$z-index-overlay;
   transform: translateX(100%);
   transition: transform .3s ease-in-out;
-  z-index: $z-index;
-
-  @media (min-width: map.get(br.$breakpoints, md) + 1) {
-    background-color: var(--surface-secondary);
-    width: 50% !important;
-  }
-
-  @media (max-width: map.get(br.$breakpoints, md)) {
-    background-color: var(--surface-primary);
-    width: 100% !important;
-  }
+  background-color: var(--surface-secondary);
+  width: 480px !important;
 
   &.show:not(.hiding) {
     transform: none;
   }
 }
 
-.offcanvas-header {
+.flyout-header {
   @extend .gravity-margin-bottom-sm;
 
   align-items: flex-start;
@@ -67,6 +57,13 @@ $z-index: 1040;
   padding: 0;
 }
 
-.offcanvas-body {
+.flyout-body {
   padding: 0;
 }
+
+.flyout-standard.offcanvas {
+  top: var(--gravity-flyout-top, 0) !important;
+  height: calc(100vh - var(--gravity-flyout-top, 0)) !important;
+  max-height: calc(100vh - var(--gravity-flyout-top, 0)) !important;
+  transition: transform .3s ease-in-out;
+}

package/src/lib/styles/components/_scroll_bar.scss

@@ -0,0 +1,31 @@
+$scrollbar-width-sm: 4px;
+$scrollbar-width-md: 8px;
+
+@mixin custom-scrollbar($size) {
+  &::-webkit-scrollbar {
+    width: $size;
+    height: $size;
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: var(--surface-primary);
+    border-radius: 5px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: var(--placeholder-empty-enabled-primary);
+    border-radius: 5px;
+
+    &:hover {
+      background-color: var(--line-empty-enabled-primary);
+    }
+  }
+}
+
+.scrollbar-sm {
+  @include custom-scrollbar($scrollbar-width-sm);
+}
+
+.scrollbar-md {
+  @include custom-scrollbar($scrollbar-width-md);
+}

package/src/lib/styles/components/_tables.scss

@@ -1,6 +1,7 @@
-@use "./link";
-@use "../foundations/border-radius/hero.border-radius" as bor;
-@use "../foundations/typography/hero.typography";
+@use "./link" as *;
+@use "../foundations/z-index/z-index" as z-index;
+@use "../foundations/typography/hero.typography" as typography;
+@use "../foundations/border-radius/hero.border-radius" as border-radius;
 
 .table-container.xl, .table-container.lg {
   table {
@@ -15,11 +16,11 @@
       color: var(--on-bg-highlight-neutro-secondary);
 
       th:first-of-type {
-        border-top-left-radius: bor.$border-radius-sm;
+        border-top-left-radius: border-radius.$border-radius-sm;
       }
 
       th:last-of-type {
-        border-top-right-radius: bor.$border-radius-sm;
+        border-top-right-radius: border-radius.$border-radius-sm;
       }
     }
 
@@ -141,7 +142,7 @@
 
     tr {
       background-color: var(--surface-primary);
-      border-radius: bor.$border-radius-sm;
+      border-radius: border-radius.$border-radius-sm;
       color: var(--text-primary);
       margin-bottom: 1rem;
       padding: 0.75rem 1rem; //12px 16px
@@ -223,13 +224,13 @@
   .panel {
     background-color: var(--surface-secondary);
     border: 0.5px solid var(--divider-primary);
-    border-radius: bor.$border-radius-sm;
+    border-radius: border-radius.$border-radius-sm;
     padding: 0.25rem 1rem;
     position: absolute;
     right: 0;
     top: 3rem;
     width: 12rem;
-    z-index: 1;
+    z-index: z-index.$z-index-content;
 
     &:not(.open) {
       display: none;