@egovernments/digit-ui-components-css 0.0.2-beta.11 → 0.0.2-beta.12

package/src/digitv2/components/infoCardV2.scss

@@ -1,140 +1,140 @@
-@import url("../index.scss");
-@import url("../typography.scss");
-
-.digit-infobanner-wrap {
-  @apply p-md flex flex-col; 
-  top: theme(digitv2.spacers.spacer5);
-  left: theme(digitv2.spacers.spacer5);
-  gap: theme(digitv2.spacers.spacer2);
-  background-color: theme(digitv2.lightTheme.alert-infobg);
-
-  border: 0.063rem solid theme(digitv2.lightTheme.alert-info);
-  border-left-width: theme(digitv2.spacers.spacer1);
-
-  div {
-    @apply flex;
-    gap: theme(digitv2.spacers.spacer2);
-    min-height: theme(digitv2.spacers.spacer6);
-
-    svg {
-      flex-shrink: 0;
-    }
-  }
-
-  .digit-infobanner-header {
-    @apply w-full max-w-full overflow-hidden text-left;
-    font-family: theme(digitv2.fontFamily.sans);
-    font-weight: theme(digitv2.fontWeight.bold);
-    color: theme(digitv2.lightTheme.alert-info);
-    font-size: theme(digitv2.spacers.spacer4);
-    line-height: 1.172rem;
-    letter-spacing: theme(digitv2.spacers.spacer0);
-    margin: 0.164rem theme(digitv2.spacers.spacer0);
-    white-space: normal;
-    word-break: break-word;
-  }
-
-  p {
-    @apply whitespace-pre-line text-left;
-    font-weight: theme(digitv2.fontWeight.regular);
-    color: theme(digitv2.lightTheme.text-secondary);
-    font-style: theme(digitv2.fontStyle.normal);
-    font-family: theme(digitv2.fontFamily.sans);
-    font-size: 0.875rem;
-    line-height: theme(digitv2.spacers.spacer5);
-    letter-spacing: theme(digitv2.spacers.spacer0);
-    margin: theme(digitv2.spacers.spacer0);
-  }
-
-  &.digit-core-variant {
-    margin: theme(digitv2.spacers.spacer8) theme(digitv2.spacers.spacer0);
-    padding: 0.625rem;
-    background-color: #ffe2b5;
-    border-radius: theme(digitv2.spacers.spacer1);
-  }
-
-  &.success {
-    background-color: theme(digitv2.lightTheme.alert-successbg);
-    border: 0.063rem solid theme(digitv2.lightTheme.alert-success);
-    border-left-width: theme(digitv2.spacers.spacer1);
-
-    .digit-infobanner-header{
-      color: theme(digitv2.lightTheme.alert-success);
-    }
-  }
-
-  &.warning {
-    background-color: theme(digitv2.lightTheme.alert-warning-bg);
-    border: 0.063rem solid theme(digitv2.lightTheme.alert-warning);
-    border-left-width: theme(digitv2.spacers.spacer1);
-
-    .digit-infobanner-header{
-      color: theme(digitv2.lightTheme.alert-warning);
-    }
-  }
-
-  &.error {
-    background-color: theme(digitv2.lightTheme.alert-errorbg);
-    border: 0.063rem solid theme(digitv2.lightTheme.alert-error);
-    border-left-width: theme(digitv2.spacers.spacer1);
-
-    .digit-infobanner-header{
-      color: theme(digitv2.lightTheme.alert-error);
-    }
-  }
-
-  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4)  {
-    /* Media query for tablets */
-    max-width: 44.5rem;
-  }
-
-  @media (max-aspect-ratio: 9/16) {
-    /* Media query for mobile */
-    max-width: 21.5rem;
-  }
-
-  @media (min-aspect-ratio: 3/4) {
-    /* Media query for desktop */
-    max-width: 87rem;
-  }
-
-  &.inline {
-    @apply flex-row items-start;
-  }
-
-  &.column {
-    @apply flex-col;
-  }
-
-  .additional-elements-inline {
-    @apply flex flex-wrap items-start;
-    gap: theme(digitv2.spacers.spacer2);
-
-    .individualElement{
-      h2{
-        margin: theme(digitv2.spacers.spacer0);
-        color: theme(digitv2.lightTheme.text-primary);
-      }
-    }
-  }
-
-  .additional-elements-column {
-    @apply flex flex-col items-start;
-    gap: theme(digitv2.spacers.spacer2);
-    
-    .individualElement {
-      @apply w-full max-w-full;
-
-      h2{
-        margin: theme(digitv2.spacers.spacer0);
-        color: theme(digitv2.lightTheme.text-primary);
-      }
-
-    }
-  }
-
-  img {
-    @apply max-w-full;
-  }
-
+@import url("../index.scss");
+@import url("../typography.scss");
+
+.digit-infobanner-wrap {
+  @apply p-md flex flex-col; 
+  top: theme(digitv2.spacers.spacer5);
+  left: theme(digitv2.spacers.spacer5);
+  gap: theme(digitv2.spacers.spacer2);
+  background-color: theme(digitv2.lightTheme.alert-infobg);
+
+  border: 0.063rem solid theme(digitv2.lightTheme.alert-info);
+  border-left-width: theme(digitv2.spacers.spacer1);
+
+  div {
+    @apply flex;
+    gap: theme(digitv2.spacers.spacer2);
+    min-height: theme(digitv2.spacers.spacer6);
+
+    svg {
+      flex-shrink: 0;
+    }
+  }
+
+  .digit-infobanner-header {
+    @apply w-full max-w-full overflow-hidden text-left;
+    font-family: theme(digitv2.fontFamily.sans);
+    font-weight: theme(digitv2.fontWeight.bold);
+    color: theme(digitv2.lightTheme.alert-info);
+    font-size: theme(digitv2.spacers.spacer4);
+    line-height: 1.172rem;
+    letter-spacing: theme(digitv2.spacers.spacer0);
+    margin: 0.164rem theme(digitv2.spacers.spacer0);
+    white-space: normal;
+    word-break: break-word;
+  }
+
+  p {
+    @apply whitespace-pre-line text-left;
+    font-weight: theme(digitv2.fontWeight.regular);
+    color: theme(digitv2.lightTheme.text-secondary);
+    font-style: theme(digitv2.fontStyle.normal);
+    font-family: theme(digitv2.fontFamily.sans);
+    font-size: 0.875rem;
+    line-height: theme(digitv2.spacers.spacer5);
+    letter-spacing: theme(digitv2.spacers.spacer0);
+    margin: theme(digitv2.spacers.spacer0);
+  }
+
+  &.digit-core-variant {
+    margin: theme(digitv2.spacers.spacer8) theme(digitv2.spacers.spacer0);
+    padding: 0.625rem;
+    background-color: #ffe2b5;
+    border-radius: theme(digitv2.spacers.spacer1);
+  }
+
+  &.success {
+    background-color: theme(digitv2.lightTheme.alert-successbg);
+    border: 0.063rem solid theme(digitv2.lightTheme.alert-success);
+    border-left-width: theme(digitv2.spacers.spacer1);
+
+    .digit-infobanner-header{
+      color: theme(digitv2.lightTheme.alert-success);
+    }
+  }
+
+  &.warning {
+    background-color: theme(digitv2.lightTheme.alert-warning-bg);
+    border: 0.063rem solid theme(digitv2.lightTheme.alert-warning);
+    border-left-width: theme(digitv2.spacers.spacer1);
+
+    .digit-infobanner-header{
+      color: theme(digitv2.lightTheme.alert-warning);
+    }
+  }
+
+  &.error {
+    background-color: theme(digitv2.lightTheme.alert-errorbg);
+    border: 0.063rem solid theme(digitv2.lightTheme.alert-error);
+    border-left-width: theme(digitv2.spacers.spacer1);
+
+    .digit-infobanner-header{
+      color: theme(digitv2.lightTheme.alert-error);
+    }
+  }
+
+  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4)  {
+    /* Media query for tablets */
+    max-width: 44.5rem;
+  }
+
+  @media (max-aspect-ratio: 9/16) {
+    /* Media query for mobile */
+    max-width: 21.5rem;
+  }
+
+  @media (min-aspect-ratio: 3/4) {
+    /* Media query for desktop */
+    max-width: 87rem;
+  }
+
+  &.inline {
+    @apply flex-row items-start;
+  }
+
+  &.column {
+    @apply flex-col;
+  }
+
+  .additional-elements-inline {
+    @apply flex flex-wrap items-start;
+    gap: theme(digitv2.spacers.spacer2);
+
+    .individualElement{
+      h2{
+        margin: theme(digitv2.spacers.spacer0);
+        color: theme(digitv2.lightTheme.text-primary);
+      }
+    }
+  }
+
+  .additional-elements-column {
+    @apply flex flex-col items-start;
+    gap: theme(digitv2.spacers.spacer2);
+    
+    .individualElement {
+      @apply w-full max-w-full;
+
+      h2{
+        margin: theme(digitv2.spacers.spacer0);
+        color: theme(digitv2.lightTheme.text-primary);
+      }
+
+    }
+  }
+
+  img {
+    @apply max-w-full;
+  }
+
 }

package/src/digitv2/components/infobuttonV2.scss

@@ -1,76 +1,76 @@
-.digit-info-button {
-    @apply text-center cursor-pointer outline-none flex max-w-full items-center justify-center h-10;
-    width: fit-content;
-    padding-left: theme(digitv2.spacers.spacer6);
-    padding-right: theme(digitv2.spacers.spacer6);
-    gap: theme(digitv2.spacers.spacer2);
-    min-width: 6.5625rem;
-
-    &.info{
-        background-color: theme(digitv2.lightTheme.alert-info);
-    }
-
-    &.error{
-        background-color: theme(digitv2.lightTheme.alert-error);
-    }
-
-    &.success{
-        background-color: theme(digitv2.lightTheme.alert-success);
-    }
-
-    &.warning{
-        background-color: theme(digitv2.lightTheme.alert-warning);
-    }
-  
-    h1 {
-      @extend .typography.button.large;
-      margin: 0;
-      color: theme(digitv2.lightTheme.paper-primary) !important;
-    }
-  
-    &.disabled {
-      @apply opacity-50;
-      background: theme(digitv2.lightTheme.text-disabled);
-    }
-  
-    &:focus {
-      @apply outline-none;
-    }
-  
-    &:hover {
-      box-shadow: theme(digitv2.spacers.spacer0) -0.125rem theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer0) theme(digitv2.lightTheme.text-primary) inset;
-    }
-  
-    &:active {
-      box-shadow: theme(digitv2.spacers.spacer0) -0.125rem theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer0) #0B0C0C inset, theme(digitv2.spacers.spacer0) 0.063rem 0.175rem theme(digitv2.spacers.spacer0) #00000040;
-  
-      h1{
-        font-weight: theme(digitv2.fontWeight.bold);
-      }
-    }
-  
-    &.large{
-      h1{
-        @apply h-5;
-        margin-top: 0.125rem;
-      }
-    }
-  
-    &.medium {
-      @apply h-8;
-  
-      h1{
-        @extend .typography.button.medium;
-      }
-    }
-  
-    &.small {
-      @apply h-6;
-  
-      h1 {
-        @extend .typography.button.small;
-      }
-    }
-  
-  
+.digit-info-button {
+    @apply text-center cursor-pointer outline-none flex max-w-full items-center justify-center h-10;
+    width: fit-content;
+    padding-left: theme(digitv2.spacers.spacer6);
+    padding-right: theme(digitv2.spacers.spacer6);
+    gap: theme(digitv2.spacers.spacer2);
+    min-width: 6.5625rem;
+
+    &.info{
+        background-color: theme(digitv2.lightTheme.alert-info);
+    }
+
+    &.error{
+        background-color: theme(digitv2.lightTheme.alert-error);
+    }
+
+    &.success{
+        background-color: theme(digitv2.lightTheme.alert-success);
+    }
+
+    &.warning{
+        background-color: theme(digitv2.lightTheme.alert-warning);
+    }
+  
+    h1 {
+      @extend .typography.button.large;
+      margin: 0;
+      color: theme(digitv2.lightTheme.paper-primary) !important;
+    }
+  
+    &.disabled {
+      @apply opacity-50;
+      background: theme(digitv2.lightTheme.text-disabled);
+    }
+  
+    &:focus {
+      @apply outline-none;
+    }
+  
+    &:hover {
+      box-shadow: theme(digitv2.spacers.spacer0) -0.125rem theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer0) theme(digitv2.lightTheme.text-primary) inset;
+    }
+  
+    &:active {
+      box-shadow: theme(digitv2.spacers.spacer0) -0.125rem theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer0) #0B0C0C inset, theme(digitv2.spacers.spacer0) 0.063rem 0.175rem theme(digitv2.spacers.spacer0) #00000040;
+  
+      h1{
+        font-weight: theme(digitv2.fontWeight.bold);
+      }
+    }
+  
+    &.large{
+      h1{
+        @apply h-5;
+        margin-top: 0.125rem;
+      }
+    }
+  
+    &.medium {
+      @apply h-8;
+  
+      h1{
+        @extend .typography.button.medium;
+      }
+    }
+  
+    &.small {
+      @apply h-6;
+  
+      h1 {
+        @extend .typography.button.small;
+      }
+    }
+  
+  
   }

package/src/digitv2/components/labelFieldPairV2.scss

@@ -1,67 +1,67 @@
- .digit-label-field-pair {
-   @apply mb-lg flex;
-
-
-   @media (min-aspect-ratio: 9/16) {
-     @apply items-start;
-   }
-
-   @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
-     gap: theme(digitv2.spacers.spacer5);
-   }
-
-   @media (max-aspect-ratio: 9/16) {
-     @apply flex-col items-start;
-     gap: theme(digitv2.spacers.spacer4);
-   }
-
-   @media (min-aspect-ratio: 3/4) {
-     gap: theme(digitv2.spacers.spacer6);
-   }
-
-   &.vertical {
-     @apply flex-col items-start;
-     gap: theme(digitv2.spacers.spacer2);
-   }
-
-   & .label,
-   & header {
-     width: 33%;
-
-     @media (max-aspect-ratio: 9/16) {
-       @apply w-full;
-     }
-   }
-
-   & .digit-field {
-     width: 60%;
-
-     @media (max-aspect-ratio: 9/16) {
-       width: 100%;
-     }
-   }
- }
-
- @screen dt {
-   .digit-employee-card {
-     .digit-label-field-pair {
-       @apply mb-lg flex;
-
-       h2 {
-         width: 30%;
-       }
-
-       .digit-field {
-
-         .field {
-           margin-right: unset;
-         }
-
-         .digit-field {
-           @apply mb-lg;
-           margin-right: unset;
-         }
-       }
-     }
-   }
+ .digit-label-field-pair {
+   @apply mb-lg flex;
+
+
+   @media (min-aspect-ratio: 9/16) {
+     @apply items-start;
+   }
+
+   @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+     gap: theme(digitv2.spacers.spacer5);
+   }
+
+   @media (max-aspect-ratio: 9/16) {
+     @apply flex-col items-start;
+     gap: theme(digitv2.spacers.spacer4);
+   }
+
+   @media (min-aspect-ratio: 3/4) {
+     gap: theme(digitv2.spacers.spacer6);
+   }
+
+   &.vertical {
+     @apply flex-col items-start;
+     gap: theme(digitv2.spacers.spacer2);
+   }
+
+   & .label,
+   & header {
+     width: 33%;
+
+     @media (max-aspect-ratio: 9/16) {
+       @apply w-full;
+     }
+   }
+
+   & .digit-field {
+     width: 60%;
+
+     @media (max-aspect-ratio: 9/16) {
+       width: 100%;
+     }
+   }
+ }
+
+ @screen dt {
+   .digit-employee-card {
+     .digit-label-field-pair {
+       @apply mb-lg flex;
+
+       h2 {
+         width: 30%;
+       }
+
+       .digit-field {
+
+         .field {
+           margin-right: unset;
+         }
+
+         .digit-field {
+           @apply mb-lg;
+           margin-right: unset;
+         }
+       }
+     }
+   }
  }