@egovernments/digit-ui-components-css 0.0.1-pucar.1

package/src/digitv2/components/fieldV1.scss

@@ -0,0 +1,97 @@
+@import url("../index.scss");
+
+.digit-header-content {
+
+    &.label {
+        @extend .typography.body-l;
+        @apply flex ;
+        color: theme(digitv2.lightTheme.text-primary);
+        gap: theme(digitv2.spacers.spacer1);
+
+        &.wraplabel {
+            @media (min-aspect-ratio: 9/16){
+                height: fit-content;
+                word-break: break-word;
+            }
+        }
+
+        .label-container {
+            @apply flex items-center w-full;
+            gap: theme(digitv2.spacers.spacer1);
+
+            &.wraplabel{
+                @media (min-aspect-ratio: 9/16) {
+                    @apply items-end;
+                }
+            }
+        }
+
+        .info-icon {
+            @apply relative cursor-pointer;
+            width: 1.188rem;
+            height: 1.188rem;
+        }
+
+        .info-icon .infotext {
+            @extend .typography.body-s;
+            @apply absolute text-center;
+            visibility: hidden;
+            width: 7.5rem;
+            background-color: #555555;
+            color: theme(digitv2.lightTheme.paper-primary);
+            padding: theme(digitv2.spacers.spacer2) theme(digitv2.spacers.spacer0);
+            z-index: 1;
+            bottom: 100%;
+            left: 50%;
+            margin-left: -3.75rem;
+            border-radius: 0.375rem;
+        }
+
+        .info-icon:hover .infotext {
+            @apply visible;
+        }
+
+        .label-styles {
+            @apply overflow-hidden whitespace-no-wrap;
+            text-overflow: ellipsis;
+
+            &.wraplabel {
+                @media (min-aspect-ratio: 9/16){
+                    @apply whitespace-normal;
+                }
+            }
+        }
+    }
+}
+
+.digit-field {
+
+    @apply flex flex-col w-full;
+    gap: theme(digitv2.spacers.spacer1);
+
+    .digit-description,
+    .digit-charcount {
+        @extend .typography.body-s;
+        @apply flex justify-between items-baseline;
+        color: theme(digitv2.lightTheme.text-secondary);
+        gap: theme(digitv2.spacers.spacer2);
+
+
+        @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4)  {
+            max-width: 27.5rem;
+        }
+
+        @media (max-aspect-ratio: 9/16) {
+            max-width: 20.5rem;
+            width: 100%;
+        }
+
+        @media (min-aspect-ratio: 3/4){
+            max-width: 37.5rem;
+        }
+    }
+
+    .digit-charcount {
+        @apply justify-end;
+    }
+}

package/src/digitv2/components/footerV2.scss

@@ -0,0 +1,55 @@
+.digit-home-footer {
+  &.citizen {
+    @apply flex w-full h-10 bg-grey-bg pb-md pt-sm justify-center;
+    img {
+      @apply ml-sm;
+      height: 1.2em;
+      cursor: pointer;
+    }
+  }
+}
+
+.digit-employee .digit-home-footer {
+  &.citizen {
+    @apply fixed bottom-0;
+  }
+}
+.digit-fill-path-primary-main {
+  path {
+    fill: theme(colors.primary.main);
+  }
+}
+
+.digit-home-footer {
+  &.sidebar {
+    width: 200px;
+    margin-left: 50px;
+    margin-top: 24px;
+    margin-bottom: 16px;
+    position: relative;
+  }
+}
+
+.digit-footer {
+  @apply flex h-4 mb-sm;
+  img {
+    @apply mr-sm;
+  }
+}
+
+.digit-home-footer {
+  &.employee {
+    @apply flex h-10 bg-grey-bg pb-md pt-sm justify-center w-full;
+    img {
+      height: 100%;
+    }
+  }
+}
+.digit-home-footer {
+  &.employee-login {
+    @apply flex fixed bottom-0 h-10 bg-grey-bg pb-md pt-sm justify-center w-full;
+    img {
+      @apply ml-sm;
+    }
+  }
+}

package/src/digitv2/components/headerBarV2.scss

@@ -0,0 +1,34 @@
+@import url("../index.scss");
+@import url("../typography.scss");
+
+.digit-header-wrap {
+  @apply flex mb-md;
+
+  .digit-header-start {
+    margin-right: auto;
+  }
+
+  .digit-header-content {
+  }
+
+  .digit-header-end {
+    margin-left: auto;
+  }
+}
+
+@screen dt {
+  .digit-header-wrap {
+    @apply flex mb-md;
+
+    .digit-header-start {
+      margin-right: auto;
+    }
+
+    .digit-header-content {
+    }
+
+    .digit-header-end {
+      margin-left: auto;
+    }
+  }
+}

package/src/digitv2/components/headerV2.scss

@@ -0,0 +1,12 @@
+@import url("../index.scss");
+@import url("../typography.scss");
+
+.digit-header-content {
+  @extend .light-text-color-primary;
+  @apply font-bold mb-md;
+
+  &.label {
+    margin: 0;
+    margin-bottom: 0.25rem;
+  }
+}

package/src/digitv2/components/infoCardV2.scss

@@ -0,0 +1,143 @@
+@import url("../index.scss");
+@import url("../typography.scss");
+
+.digit-infobanner-wrap {
+  @apply m-sm 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;
+    min-width: 22.5rem;
+  }
+
+  @media (max-aspect-ratio: 9/16) {
+    /* Media query for mobile */
+    max-width: 21.5rem;
+    min-width: 15rem;
+  }
+
+  @media (min-aspect-ratio: 3/4) {
+    /* Media query for desktop */
+    max-width: 87rem;
+    min-width: 25rem;
+  }
+
+  &.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/infobuttons.scss

@@ -0,0 +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;
+      }
+    }
+  
+  
+  }

package/src/digitv2/components/keynoteV2.scss

@@ -0,0 +1,35 @@
+.digit-key-note-pair {
+  @apply mb-md;
+
+  h3 {
+    margin-bottom: 4px;
+    @apply font-bold text-text-primary text-heading-s;
+  }
+
+  p {
+    @apply text-text-primary text-body-l;
+  }
+  .digit-key-note-container {
+    display: inline-flex;
+    .digit-unmask-container {
+      display: inline-flex;
+      width: fit-content;
+      margin-left: 10px;
+      margin-top: 5px;
+    }
+  }
+  .digit-caption {
+    @apply text-body-l text-text-secondary;
+  }
+}
+
+@screen dt {
+  .digit-key-note-pair {
+    p {
+      @apply text-body-l-dt;
+    }
+    .digit-caption {
+      @apply text-body-l-dt text-text-secondary;
+    }
+  }
+}

package/src/digitv2/components/labelFieldPairV2.scss

@@ -0,0 +1,58 @@
+ .digit-label-field-pair {
+   @apply mb-lg flex;
+
+
+   @media (min-aspect-ratio: 9/16) {
+    @apply items-start;
+   }
+
+   @media (max-aspect-ratio: 9/16) {
+    @apply flex-col items-start;
+   }
+
+   &.vertical{
+    @apply flex-col items-start;
+   }
+
+   & .label,
+   & header {
+     margin-right: theme(digitv2.spacers.spacer6);
+     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;
+         }
+       }
+     }
+   }
+ }

package/src/digitv2/components/loaderV2.scss

@@ -0,0 +1,85 @@
+@import url("../index.scss");
+
+.digit-screen-loader {
+  @extend .light-background;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 9999;
+  .digit-ldio-pjg92h09b2o div {
+    position: absolute;
+    width: 52px;
+    height: 52px;
+    border: 12px solid theme(digitv2.lightTheme.primary-orange);
+    border-top-color: transparent;
+    border-radius: 50%;
+  }
+}
+
+.digit-page-loader,
+.digit-module-loader {
+  text-align: center;
+}
+
+.digit-page-loader {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  background: unset;
+}
+
+.digit-module-loader {
+  padding: 16px;
+}
+
+@keyframes digit-ldio-pjg92h09b2o {
+  0% {
+    transform: translate(-50%, -50%) rotate(0deg);
+  }
+
+  100% {
+    transform: translate(-50%, -50%) rotate(360deg);
+  }
+}
+
+.digit-ldio-pjg92h09b2o div {
+  position: absolute;
+  width: 52px;
+  height: 52px;
+  border: 12px solid theme(colors.secondary);
+  border-top-color: transparent;
+  border-radius: 50%;
+}
+
+.digit-ldio-pjg92h09b2o div {
+  animation: digit-ldio-pjg92h09b2o 1s linear infinite;
+  top: 50px;
+  left: 50px;
+}
+
+.digit-loadingio-spinner-rolling-faewnb8ux8 {
+  width: 48px;
+  height: 48px;
+  display: inline-block;
+  overflow: hidden;
+  background: none;
+}
+
+.digit-ldio-pjg92h09b2o {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  transform: translateZ(0) scale(0.48);
+  backface-visibility: hidden;
+  transform-origin: 0 0;
+}
+
+.digit-ldio-pjg92h09b2o div {
+  box-sizing: content-box;
+}

package/src/digitv2/components/mobileNumberV2.scss

@@ -0,0 +1,65 @@
+@import url("../index.scss");
+@import url("../typography.scss");
+
+.digit-mobile-number-container {
+  @apply flex  items-center;
+  width: 100%;
+
+  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4)  {
+    /* Media query for tablets */
+    max-width: 27.5rem;
+    min-width: 12.5rem;
+  }
+
+  @media (max-aspect-ratio: 9/16) {
+    /* Media query for mobile */
+    max-width: 20.5rem;
+    min-width: 9.75rem;
+    width: 100%;
+  }
+
+  @media (min-aspect-ratio: 3/4) {
+    /* Media query for desktop */
+    max-width: 37.5rem;
+    min-width: 12.5rem;
+  }
+  
+  .digit-text-mobile-input-width {
+    .digit-text-input-width {
+      width: calc(540px - 41px);
+    }
+  }
+  .digit-citizen-card-input--front {
+    @extend .typography.text-body-s;
+    @extend .light-background;
+    width: fit-content !important;
+    display: flex;
+    align-items: center;
+    /* background: theme(colors.grey.mid); */
+    border-right: 0;
+    padding-right: 5px;
+  }
+
+  .digit-citizen-card-input {
+    @extend .typography.text-body-s;
+    @apply pl-sm outline-none block w-full h-10 bg-white leading-10 text-form-field;
+    border: 1px solid theme(digitv2.lightTheme.text-secondary);
+    color: theme(digitv2.lightTheme.text-primary);
+  }
+
+  .digit-citizen-card-input--front {
+    @extend .typography.text-body-s;
+    width: fit-content !important;
+    display: flex;
+    align-items: center;
+    background: theme(colors.grey.mid);
+    border-right: 0;
+    padding-right: 5px;
+  }
+  .digit-employee-card-input-error {
+    @extend .typography.text-body-s;
+    @extend .light-input-border;
+    @extend .alert-error;
+    @apply mb-lg pl-sm block w-full h-10 outline-none border-2 border-solid bg-white leading-10 text-form-field text-text-primary;
+  }
+}

package/src/digitv2/components/modalV2.scss

@@ -0,0 +1,46 @@
+.digit-popup-module {
+  width: 480px;
+  margin: 0 auto;
+  @apply bg-white;
+
+  .digit-popup-module-main {
+    @apply px-lg pb-lg;
+  }
+
+  .digit-popup-module-action-bar {
+    gap: 16px;
+    @apply flex flex-row justify-end;
+
+    &.digit-variant-obps {
+      margin-right: 18px;
+      @media (max-width: theme(digitv2.screens.mobile)) {
+        position: absolute;
+        bottom: 5%;
+        right: 10%;
+      }
+      &.employee {
+        @media (max-width: theme(digitv2.screens.mobile)) {
+          left: 0%;
+        }
+      }
+    }
+  }
+}
+
+@screen dt {
+  .digit-popup-module {
+    width: 480px;
+    margin: auto;
+    @apply bg-white;
+
+    .digit-popup-module-main {
+      @apply px-lg pb-lg;
+      @apply w-full p-sm h-full;
+    }
+
+    .digit-popup-module-action-bar {
+      gap: 16px;
+      @apply flex flex-row justify-end;
+    }
+  }
+}