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

package/src/digitv2/components/cardbasedoptionsV2.scss

@@ -0,0 +1,47 @@
+.digit-card-based-options {
+    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.16);
+    @apply bg-white mb-md px-sm py-md mx-sm rounded w-full;
+    .digit-head-content {
+      @apply flex justify-between mb-lg;
+      h2 {
+        @apply text-heading-s font-bold text-text-primary;
+      }
+      p {
+        @apply text-link text-primary-main font-medium cursor-pointer;
+      }
+    }
+  
+    .digit-main-content {
+      @apply flex justify-evenly;
+      .digit-card-based-options-main-child-option {
+        width: 25%;
+        @apply text-center;
+        .digit-child-option-image-wrapper {
+          margin: auto !important;
+          background: rgba(244, 119, 56, 0.12);
+          mix-blend-mode: normal;
+          padding-top: 14px;
+          @apply h-12 w-12 rounded-full cursor-pointer;
+          svg {
+            height: 20px;
+            width: 20px;
+            fill: theme(colors.primary.main);
+            margin: auto;
+          }
+        }
+        .digit-child-option-name {
+          font-size: 12px;
+          line-height: 14px;
+          padding-top: 1rem;
+        }
+      }
+    }
+  }
+  
+  @screen dt {
+    .digit-card-based-options {
+      width: calc(50% - 16px);
+      @apply p-md;
+    }
+  }
+  

package/src/digitv2/components/{cardLabelV2.scss → cardlabelV2.scss}

@@ -1,8 +1,8 @@
-@import url("../typography.scss");
-
-.digit-card-label {
-  font-weight: theme(digitv2.fontWeight.regular);
-  font-size: 16px;
-  line-height: 19px;
-  color: theme(digitv2.lightTheme.text-primary);
+@import url("../typography.scss");
+
+.digit-card-label {
+  font-weight: theme(digitv2.fontWeight.regular);
+  font-size: 16px;
+  line-height: 19px;
+  color: theme(digitv2.lightTheme.text-primary);
 }

package/src/digitv2/components/checkboxV2.scss

@@ -1,80 +1,84 @@
-@import url("../index.scss");
-
-.digit-checkbox-container {
-  @apply flex mb-md relative;
-  gap: theme(digitv2.spacers.spacer4);
-
-  input {
-    @apply opacity-0 absolute cursor-pointer z-10;
-    @extend .light-input-border;
-    width: theme(digitv2.spacers.spacer8);
-    height: theme(digitv2.spacers.spacer8);
-    left: -15%;
-  }
-
-  .input-emp {
-    @extend input ;
-  }
-
-  .digit-custom-checkbox {
-    @apply flex items-center border border-solid border-text-secondary justify-center;
-    width: theme(digitv2.spacers.spacer6);
-    height: theme(digitv2.spacers.spacer6);
-
-    img,
-    svg {
-      @apply opacity-0;
-    }
-
-    &:hover {
-      @apply border-2 ;
-      border-color: theme(digitv2.lightTheme.primary-1);
-    }
-  }
-
-  .digit-custom-checkbox-emp {
-    @extend .digit-custom-checkbox;
-  }
-
-  input:hover~.digit-custom-checkbox {
-    @apply border-2;
-    border-color: theme(digitv2.lightTheme.primary-1);
-  }
-
-  input:checked~.digit-custom-checkbox {
-    border: 0.125rem solid theme(digitv2.lightTheme.primary-1);
-  }
-
-
-  input:checked~.digit-custom-checkbox img {
-    @apply opacity-100;
-  }
-
-  input:checked~.digit-custom-checkbox svg {
-    @apply opacity-100;
-    width: theme(digitv2.spacers.spacer4);
-    height: theme(digitv2.spacers.spacer4);
-  }
-
-  .label {
-    @extend .typography.body-s;
-    @apply text-left;
-    word-break: break-word;
-    letter-spacing: theme(digitv2.spacers.spacer0);
-    color: theme(digitv2.lightTheme.text-primary);
-  }
-
-  &.disabled {
-    .label {
-      color: theme(digitv2.lightTheme.text-disabled);
-    }
-
-    .digit-custom-checkbox {
-      border: 0.063rem solid theme(digitv2.lightTheme.text-disabled);
-    }
-
-    input:checked~.digit-custom-checkbox {
-      border: 0.125rem solid theme(digitv2.lightTheme.text-disabled);
-    }
-  }
+@import url("../index.scss");
+
+.digit-checkbox-container {
+  @apply flex mb-md relative;
+  gap: theme(digitv2.spacers.spacer4);
+
+  input {
+    @apply opacity-0 absolute cursor-pointer z-10;
+    @extend .light-input-border;
+    width: theme(digitv2.spacers.spacer8);
+    height: theme(digitv2.spacers.spacer8);
+    left: -15%;
+  }
+
+  .input-emp {
+    @extend input ;
+  }
+
+  .digit-custom-checkbox {
+    @apply flex items-center border border-solid border-text-secondary justify-center;
+    width: theme(digitv2.spacers.spacer6);
+    height: theme(digitv2.spacers.spacer6);
+
+    img,
+    svg {
+      @apply opacity-0;
+    }
+
+    svg{
+      flex-shrink: 0;
+    }
+
+    &:hover {
+      @apply border-2 ;
+      border-color: theme(digitv2.lightTheme.primary-1);
+    }
+  }
+
+  .digit-custom-checkbox-emp {
+    @extend .digit-custom-checkbox;
+  }
+
+  input:hover~.digit-custom-checkbox {
+    @apply border-2;
+    border-color: theme(digitv2.lightTheme.primary-1);
+  }
+
+  input:checked~.digit-custom-checkbox {
+    border: 0.125rem solid theme(digitv2.lightTheme.primary-1);
+  }
+
+
+  input:checked~.digit-custom-checkbox img {
+    @apply opacity-100;
+  }
+
+  input:checked~.digit-custom-checkbox svg {
+    @apply opacity-100;
+    width: theme(digitv2.spacers.spacer4);
+    height: theme(digitv2.spacers.spacer4);
+  }
+
+  .label {
+    @extend .typography.body-s;
+    @apply text-left;
+    word-break: break-word;
+    letter-spacing: theme(digitv2.spacers.spacer0);
+    color: theme(digitv2.lightTheme.text-primary);
+  }
+
+  &.disabled {
+    .label {
+      color: theme(digitv2.lightTheme.text-disabled);
+    }
+
+    .digit-custom-checkbox {
+      border: 0.063rem solid theme(digitv2.lightTheme.text-disabled);
+    }
+
+    input:checked~.digit-custom-checkbox {
+      border: 0.125rem solid theme(digitv2.lightTheme.text-disabled);
+    }
+  }
 }

package/src/digitv2/components/{tagV2.scss → chipV2.scss}

@@ -1,121 +1,130 @@
-.digit-tag-error-container {
-  @apply flex flex-col max-w-full;
-  gap: theme(digitv2.spacers.spacer1);
-}
-
-.digit-tag-container {
-  @apply flex flex-wrap mb-md items-center;
-  gap: theme(digitv2.spacers.spacer2);
-  margin-top: theme(digitv2.spacers.spacer2);
-
-  @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 */
-    width: 100%;
-    max-width: 100%;
-  }
-
-  @media (min-aspect-ratio: 3/4) {
-    /* Media query for desktop */
-    max-width: 37.5rem;
-    min-width: 12.5rem;
-  }
-
-  .digit-tag {
-    @apply inline-flex items-center h-10 w-full max-w-full;
-    padding: theme(digitv2.spacers.spacer2);
-    gap: theme(digitv2.spacers.spacer2);
-    border-radius: theme(digitv2.spacers.spacer1);
-    background: theme(digitv2.lightTheme.generic-background);
-    margin: theme(digitv2.spacers.spacer0);
-    border: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
-
-    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
-      /* Media query for tablets */
-      height: theme(digitv2.spacers.spacer9);
-    }
-  
-    @media (max-aspect-ratio: 9/16) {
-      /* Media query for mobile */
-      height: theme(digitv2.spacers.spacer9);
-    }
-  
-
-    .digit-text {
-      @extend .typography.body-xs;
-      @apply overflow-hidden items-center whitespace-no-wrap;
-      max-width: calc(100% - (theme(digitv2.spacers.spacer7)));
-      width: calc(100% - (theme(digitv2.spacers.spacer7)));
-      text-overflow: clip;
-      color: theme(digitv2.lightTheme.text-primary);
-      display: flex;
-      text-overflow: ellipsis;
-    }
-
-    .close-icon {
-      @apply items-center w-6 h-6 cursor-pointer flex-shrink-0;
-      border: 0.063rem solid theme(digitv2.lightTheme.text-secondary);
-      border-radius: theme(digitv2.spacers.spacer1);
-      background-color: theme(digitv2.lightTheme.text-secondary);
-      display: flex !important;
-      justify-content: center;
-
-      @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
-        /* Media query for tablets */
-        height: theme(digitv2.spacers.spacer5);
-        width: theme(digitv2.spacers.spacer5);
-      }
-    
-      @media (max-aspect-ratio: 9/16) {
-        /* Media query for mobile */
-        height: theme(digitv2.spacers.spacer5);
-        width: theme(digitv2.spacers.spacer5);
-      }
-
-      &.disabled{
-        pointer-events: none;
-      }
-
-      svg{
-        @apply items-center flex-shrink-0;
-        width: theme(digitv2.spacers.spacer6);
-        height: theme(digitv2.spacers.spacer6);
-        display: flex !important;
-        justify-content: center;
-
-        @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
-          /* Media query for tablets */
-          height: theme(digitv2.spacers.spacer5);
-          width: theme(digitv2.spacers.spacer5);
-        }
-      
-        @media (max-aspect-ratio: 9/16) {
-          /* Media query for mobile */
-          height: theme(digitv2.spacers.spacer5);
-          width: theme(digitv2.spacers.spacer5);
-        }
-      }
-    }
-
-    &.errortag {
-      border: 0.063rem solid theme(digitv2.lightTheme.alert-error);
-      background-color: theme(digitv2.lightTheme.paper-primary);
-      box-shadow: 0.125rem 0.125rem theme(digitv2.spacers.spacer1) theme(digitv2.spacers.spacer0) #D4351C4D;
-
-      .digit-text {
-        @extend .typography.heading-xs;
-        color: theme(digitv2.lightTheme.alert-error);
-      }
-
-      .close-icon {
-        border: 0.063rem solid theme(digitv2.lightTheme.alert-error);
-        background-color: theme(digitv2.lightTheme.alert-error);
-      }
-    }
-  }
+.digit-tag-error-container {
+  @apply flex flex-col max-w-full;
+  gap: theme(digitv2.spacers.spacer1);
+}
+
+.digit-tag-container {
+  @apply flex flex-wrap mb-md items-center;
+  gap: theme(digitv2.spacers.spacer2);
+  margin-top: theme(digitv2.spacers.spacer2);
+
+  @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 */
+    width: 100%;
+    max-width: 100%;
+  }
+
+  @media (min-aspect-ratio: 3/4) {
+    /* Media query for desktop */
+    max-width: 37.5rem;
+    min-width: 12.5rem;
+  }
+
+  .digit-tag {
+    @apply inline-flex items-center h-10 w-full max-w-full;
+    padding: theme(digitv2.spacers.spacer2);
+    gap: theme(digitv2.spacers.spacer2);
+    border-radius: theme(digitv2.spacers.spacer1);
+    background: theme(digitv2.lightTheme.generic-background);
+    margin: theme(digitv2.spacers.spacer0);
+    border: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
+
+    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+      /* Media query for tablets */
+      height: theme(digitv2.spacers.spacer9);
+    }
+  
+    @media (max-aspect-ratio: 9/16) {
+      /* Media query for mobile */
+      height: theme(digitv2.spacers.spacer9);
+    }
+  
+
+    .digit-text {
+      @extend .typography.body-xs;
+      @apply overflow-hidden items-center whitespace-no-wrap;
+      max-width: calc(100% - (theme(digitv2.spacers.spacer7)));
+      width: calc(100% - (theme(digitv2.spacers.spacer7)));
+      text-overflow: clip;
+      color: theme(digitv2.lightTheme.text-primary);
+      display: flex;
+      text-overflow: ellipsis;
+    }
+
+    .close-icon {
+      @apply items-center w-6 h-6 cursor-pointer flex-shrink-0;
+      border: 0.063rem solid theme(digitv2.lightTheme.text-secondary);
+      border-radius: theme(digitv2.spacers.spacer1);
+      background-color: theme(digitv2.lightTheme.text-secondary);
+      display: flex !important;
+      justify-content: center;
+
+      @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+        /* Media query for tablets */
+        height: theme(digitv2.spacers.spacer5);
+        width: theme(digitv2.spacers.spacer5);
+      }
+    
+      @media (max-aspect-ratio: 9/16) {
+        /* Media query for mobile */
+        height: theme(digitv2.spacers.spacer5);
+        width: theme(digitv2.spacers.spacer5);
+      }
+
+      &.disabled{
+        pointer-events: none;
+      }
+
+      svg{
+        @apply items-center flex-shrink-0;
+        width: theme(digitv2.spacers.spacer6);
+        height: theme(digitv2.spacers.spacer6);
+        display: flex !important;
+        justify-content: center;
+
+        @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+          /* Media query for tablets */
+          height: theme(digitv2.spacers.spacer5);
+          width: theme(digitv2.spacers.spacer5);
+        }
+      
+        @media (max-aspect-ratio: 9/16) {
+          /* Media query for mobile */
+          height: theme(digitv2.spacers.spacer5);
+          width: theme(digitv2.spacers.spacer5);
+        }
+      }
+    }
+
+    &.errortag {
+      border: 0.063rem solid theme(digitv2.lightTheme.alert-error);
+      background-color: theme(digitv2.lightTheme.paper-primary);
+      box-shadow: 0.125rem 0.125rem theme(digitv2.spacers.spacer1) theme(digitv2.spacers.spacer0) #D4351C4D;
+
+      .digit-text {
+        @extend .typography.heading-xs;
+        color: theme(digitv2.lightTheme.alert-error);
+      }
+
+      .close-icon {
+        border: 0.063rem solid theme(digitv2.lightTheme.alert-error);
+        background-color: theme(digitv2.lightTheme.alert-error);
+      }
+    }
+  }
+}
+
+.cp{
+  cursor: pointer;
+}
+
+.nonclickable{
+  pointer-events: none;
+  cursor:none;
 }

package/src/digitv2/components/dividerV2.scss

@@ -0,0 +1,11 @@
+.digit-divider {
+    border: theme(digitv2.divider.dividerS);
+
+    &.medium {
+        border: theme(digitv2.divider.dividerM);
+    }
+
+    &.large {
+        border: theme(digitv2.divider.dividerL);
+    }
+}

package/src/digitv2/components/{ErrorMessage.scss → errorMessageV2.scss}

@@ -1,19 +1,21 @@
-@import url("../index.scss");
-@import url("../typography.scss");
-
-.digit-error-icon-message-wrap {
-  @apply flex w-full whitespace-pre-wrap break-words;
-  gap: theme(digitv2.spacers.spacer1);
-
-  .digit-error-icon{
-      @apply flex items-center;
-      width: theme(digitv2.spacers.spacer4);
-      height: theme(digitv2.lineHeight.lineheight2);
-  }
-  .digit-error-message {
-      @extend .typography.body-s;
-      @apply  w-full;
-      margin: theme(digitv2.spacers.spacer0);
-      color: theme(digitv2.lightTheme.alert-error)
-  }
+@import url("../index.scss");
+@import url("../typography.scss");
+
+.digit-error-icon-message-wrap {
+  @apply flex w-full whitespace-pre-wrap break-words;
+  gap: theme(digitv2.spacers.spacer1);
+  word-break: break-word;
+  cursor: default;
+
+  .digit-error-icon{
+      @apply flex items-center;
+      width: theme(digitv2.spacers.spacer4);
+      height: theme(digitv2.lineHeight.lineheight2);
+  }
+  .digit-error-message {
+      @extend .typography.body-s;
+      @apply  w-full;
+      margin: theme(digitv2.spacers.spacer0);
+      color: theme(digitv2.lightTheme.alert-error)
+  }
 }