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

package/src/digitv2/components/{infobuttons.scss → 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,58 +1,67 @@
- .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;
-         }
-       }
-     }
-   }
+ .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;
+         }
+       }
+     }
+   }
  }

package/src/digitv2/components/mobileNumberV2.scss

@@ -1,65 +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;
-  }
-}
+@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:100%;
+    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;
+  }
+}