@egovernments/digit-ui-components-css 0.0.2-beta.7 → 0.2.0

package/src/digitv2/components/cardV2.scss

@@ -0,0 +1,498 @@
+@import url("../index.scss");
+
+.digit-card {
+    @apply bg-white m-sm px-md pt-md pb-lg shadow-card;
+    @extend .light-paper-primary;
+    border-radius: 4px;
+    max-width: 960px;
+
+    .digit-card-header {
+        @extend .light-primary;
+        @apply text-heading-xl font-bold font-rc align-middle text-left mb-md;
+    }
+
+    .digit-card-sub-header {
+        @extend .light-primary;
+        @apply text-caption-xl font-bold align-middle text-left mb-sm;
+    }
+
+    .digit-card-caption {
+        @extend .light-text-color-secondary;
+        @apply text-caption-xl mb-sm;
+    }
+
+    .digit-card-text {
+        @extend .light-text-color-secondary;
+        @apply text-body-l align-middle text-left mb-lg;
+
+        span {
+            @extend .light-text-color-primary;
+        }
+    }
+
+    .digit-card-text-primary {
+        @extend .light-primary;
+        @apply text-body-l;
+    }
+
+    .digit-card-text-button {
+        @extend .light-primary;
+        @apply text-text-btn;
+    }
+
+    .digit-card-label {
+        @extend .light-primary;
+        @apply text-legend mb-sm;
+    }
+
+    .digit-card-label-error {
+        @extend .alert-error;
+        @apply block text-body-s text-error mb-md;
+    }
+
+    .digit-card-label-desc {
+        @extend .light-text-color-secondary;
+        @apply font-bold text-heading-s mb-md;
+    }
+
+    .digit-card-link {
+        @extend .light-primary;
+        @apply block text-center text-link mt-md cursor-pointer;
+    }
+}
+
+.digit-validation-error {
+    @extend .alert-error;
+    @apply block text-body-s text-error;
+}
+
+.digit-docsDescription {
+    @extend .light-text-color-primary;
+}
+
+.digit-field-container {
+    @apply flex items-center;
+}
+
+.digit-employee-card {
+    @extend .light-paper-primary;
+    @apply bg-white shadow-card p-md mb-xl;
+    border-radius: 4px;
+
+    .digit-card-header {
+        @extend .light-primary;
+        @apply text-heading-xl font-bold font-rc align-middle text-left mb-md;
+    }
+
+    .digit-card-sub-header,
+    .digit-employee-card-sub-header {
+        @extend .light-primary;
+        @apply text-caption-xl font-bold align-middle text-left;
+    }
+
+    .digit-card-section-header {
+        @apply text-heading-m font-bold;
+    }
+
+    .digit-card-section-sub-text {
+        @extend .light-primary;
+        @apply text-body-s;
+    }
+
+    .digit-card-caption {
+        @extend .light-text-color-secondary;
+        @apply text-caption-xl mb-sm;
+    }
+
+    .digit-card-text {
+        @extend .light-text-color-secondary;
+        @apply text-body-l align-middle text-left mb-lg;
+
+        span {
+            @extend .light-text-color-primary;
+        }
+    }
+
+    .card-text-primary {
+        @extend .light-primary;
+        @apply text-body-l;
+    }
+
+    .card-text-button {
+        @extend .light-primary;
+        @apply text-text-btn;
+    }
+
+    .card-label {
+        @extend .light-primary;
+        @apply text-legend mb-md;
+    }
+
+    .card-label-error {
+        @extend .alert-error;
+        @apply block text-body-s text-error mb-md;
+    }
+
+    .card-label-desc {
+        @extend .light-text-color-secondary;
+        @apply font-bold text-heading-s mb-md;
+    }
+
+    .card-link {
+        @extend .light-primary;
+        @apply block text-center text-link text-link-normal mt-md;
+    }
+
+    .card-search-heading {
+        margin-right: 0px !important;
+        margin-left: 0px !important;
+        margin-bottom: 0px !important;
+        padding-bottom: 0px;
+        padding-left: 25px;
+    }
+}
+
+.header-wrap {
+    @apply flex mb-md;
+
+    .header-start {
+        margin-right: auto;
+    }
+
+    .header-content {}
+
+    .header-end {
+        margin-left: auto;
+    }
+}
+
+.card-emp {
+    @extend .card;
+    padding-right: 0;
+    padding-top: 0;
+    padding-left: 0;
+    @apply bg-white m-sm;
+    @extend .light-background;
+}
+
+.submit-bar {
+    @extend .light-primary-button;
+    @apply h-10 text-center w-full outline-none;
+    box-shadow: inset 0px -2px 0px theme(colors.text.primary);
+    cursor: pointer;
+
+    &:focus {
+        @apply outline-none;
+    }
+
+    header {
+        @apply font-rc font-medium text-legend text-white leading-10;
+    }
+}
+
+.submit-bar-disabled {
+    @apply h-10 bg-primary-main text-center w-full outline-none opacity-50;
+
+    &:focus {
+        @apply outline-none;
+    }
+
+    header {
+        @apply font-rc font-medium text-legend text-white leading-10;
+    }
+}
+
+@screen dt {
+
+    .submit-bar,
+    .submit-bar-disabled {
+        width: 240px;
+    }
+
+    .card {
+        display: flex;
+        flex-direction: column;
+
+        .card-header {
+            @apply text-heading-xl-dt;
+        }
+
+        .card-sub-header {
+            @apply text-heading-l-dt;
+        }
+
+        .card-caption {
+            @apply text-caption-xl-dt;
+        }
+
+        .card-text,
+        .card-text-primary {
+            @apply text-body-l-dt;
+        }
+
+        .card-link {
+            @apply text-left;
+        }
+    }
+
+    .digit-employee-card {
+        @apply mb-md mx-md !important;
+
+        &.digit-filter {
+            margin-left: auto;
+            margin-right: auto;
+        }
+
+        .digit-card-header {
+            @apply text-heading-xl-dt;
+        }
+
+        .digit-card-sub-header {
+            @apply text-heading-l-dt;
+        }
+
+        .digit-employee-card-sub-header {
+            margin-bottom: 40px;
+            @apply text-heading-l-dt;
+        }
+
+        .digit-card-section-header {
+            margin-bottom: 40px;
+            @apply text-heading-m-dt;
+        }
+
+        .digit-card-section-sub-text {
+            @apply text-text-primary text-body-s-dt;
+        }
+
+        .digit-card-search-heading {
+            margin-right: 0px !important;
+            margin-left: 0px !important;
+            margin-bottom: 0px !important;
+            padding-bottom: 0px;
+            padding-left: 25px;
+        }
+
+        .digit-card-caption {
+            @apply text-caption-xl-dt;
+        }
+
+        .digit-card-text,
+        .digit-card-text-primary {
+            @apply text-body-l-dt;
+        }
+
+        .digit-card-link {
+            @apply text-left;
+        }
+
+        .digit-label-field-pair {
+            @apply flex;
+
+            h2 {
+                width: 30%;
+            }
+
+            .field {
+                width: 50%;
+                margin-right: 20%;
+
+                .field {
+                    margin-right: unset;
+                }
+            }
+        }
+
+        .digit-field-container {
+            span {
+                border: 2px solid black;
+                background: rgb(247, 247, 247);
+                width: 40px;
+                height: 40px;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                margin-top: -16px;
+                border-right: none;
+            }
+        }
+    }
+
+    .digit-header-wrap {
+        @apply flex mb-md;
+
+        .header-start {
+            margin-right: auto;
+        }
+
+        .header-content {}
+
+        .header-end {
+            margin-left: auto;
+        }
+    }
+}
+
+.digit-card-section-header {
+    @apply text-text-primary text-heading-m font-bold;
+}
+
+.digit-card-search-heading {
+    margin-right: 0px !important;
+    margin-left: 0px !important;
+    margin-bottom: 0px !important;
+    padding-bottom: 0px;
+    padding-left: 25px;
+}
+
+.digit-card-label-error {
+    @extend .alert-error;
+    @apply block text-body-s text-error mb-md;
+}
+
+.digit-employee-card-override {
+    margin-left: 0px !important;
+}
+
+.digit-employee-application-details {
+    display: flex !important;
+    justify-content: space-between !important;
+    max-height: 60px !important;
+    height: 60px !important;
+}
+
+.digit-employee-main-application-details {
+    padding: 10px !important;
+}
+
+.digit-employee-mulitlink-main-div {
+    @extend .light-primary;
+    z-index: 10 !important;
+    max-width: 41% !important;
+}
+
+.digit-employee-download-btn-className {
+    position: unset !important;
+    display: flex !important;
+    justify-content: flex-end !important;
+}
+
+.digit-employee-options-btn-className {
+    position: unset !important;
+    margin: 0 !important;
+    width: 100% !important;
+}
+
+
+.digit-card-component {
+
+    width: 100%;
+    height: auto;
+    background-color: theme(digitv2.lightTheme.paper-primary);
+    border-radius: theme(digitv2.spacers.spacer1);
+    box-shadow: 0rem 0.063rem 0.125rem 0rem #00000029;
+    display: flex;
+    gap: theme(digitv2.spacers.spacer4);
+    flex-direction: column;
+
+    &.secondary {
+        background-color: theme(digitv2.lightTheme.paper-secondary);
+        border: 0.063em solid theme(digitv2.lightTheme.generic-divider);
+    }
+
+    &.secondary.search,
+    &.search {
+        flex-direction: row;
+
+        h2 {
+            margin: 0rem;
+            margin-bottom: 0.5rem;
+        }
+
+
+        .digit-buttons-group {
+            gap: 1rem;
+            margin-top: 1.875rem;
+
+            button {
+                h2 {
+                    margin: 0rem;
+                }
+            }
+        }
+
+
+        @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+            flex-direction: row;
+
+            .digit-buttons-group {
+                margin-top: 2.75rem;
+
+                button {
+                    h2 {
+                        margin: 0rem;
+                    }
+                }
+            }
+        }
+
+        @media (min-aspect-ratio: 3/4) {
+            flex-direction: row;
+        }
+
+        @media (max-aspect-ratio: 9/16){
+            flex-direction: column;
+
+            .digit-buttons-group {
+                margin-top: 0rem;
+
+                button {
+                    margin-top: 0rem;
+
+                    h2 {
+                        margin: 0rem;
+                    }
+                }
+
+            }
+        }
+    }
+
+    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4)  {
+        padding: theme(digitv2.spacers.spacer5);
+    }
+
+    @media (min-aspect-ratio: 3/4) {
+        padding: theme(digitv2.spacers.spacer6);
+    }
+
+    @media (max-aspect-ratio: 9/16) {
+        padding: theme(digitv2.spacers.spacer4);
+    }
+
+    &.action {
+        padding: theme(digitv2.spacers.spacer6);
+        gap: theme(digitv2.spacers.spacer6);
+
+        button {
+            width: 100%;
+        }
+    }
+
+    &.summarycard{
+
+        .digit-text-block-wrap .digit-text-block-header-content .digit-text-block-subheader{
+            color: theme(digitv2.lightTheme.primary-2);
+        }
+    }
+
+    &.form{
+        .digit-label-field-pair  {
+            margin-bottom: unset;
+        }
+
+        .digit-radio-options-wrap {
+            margin-bottom: unset;
+        }
+    }
+}

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

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

package/src/digitv2/components/checkboxV2.scss

@@ -26,10 +26,18 @@
       @apply opacity-0;
     }
 
+    svg {
+      flex-shrink: 0;
+    }
+
     &:hover {
-      @apply border-2 ;
+      @apply border-2;
       border-color: theme(digitv2.lightTheme.primary-1);
     }
+
+    &.intermediate {
+      border: 0.125rem solid theme(digitv2.lightTheme.primary-1);
+    }
   }
 
   .digit-custom-checkbox-emp {
@@ -41,6 +49,10 @@
     border-color: theme(digitv2.lightTheme.primary-1);
   }
 
+  input:hover~.digit-custom-checkbox.intermediate{
+    border: 0.125rem solid theme(digitv2.lightTheme.primary-1);
+  }
+
   input:checked~.digit-custom-checkbox {
     border: 0.125rem solid theme(digitv2.lightTheme.primary-1);
   }
@@ -56,19 +68,44 @@
     height: theme(digitv2.spacers.spacer4);
   }
 
+  .intermediate-square {
+    width: theme(digitv2.spacers.spacer4);
+    height: theme(digitv2.spacers.spacer4);
+    background-color: theme(digitv2.lightTheme.primary-1);
+    display: block;
+  }
+
   .label {
     @extend .typography.body-s;
+    font-family: theme(digitv2.fontFamily.sans);
+    font-style: theme(digitv2.fontStyle.normal);
+    font-weight: theme(digitv2.fontWeight.regular);
+    line-height: theme(digitv2.lineHeight.lineheight2);
+
+    @media (max-aspect-ratio: 9/16) {
+      /* Media query for mobile */
+      font-size: theme(digitv2.fontSize.body-s.mobile);
+    }
+
+    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+      /* Media query for tablets */
+      font-size: theme(digitv2.fontSize.body-s.tablet);
+    }
+
+    @media (min-aspect-ratio: 3/4) {
+      /* Media query for desktop */
+      font-size: theme(digitv2.fontSize.body-s.desktop);
+    }
+
     @apply text-left;
     word-break: break-word;
     letter-spacing: theme(digitv2.spacers.spacer0);
-    color: theme(digitv2.lightTheme.text-primary);
+    color: theme(digitv2.lightTheme.text-primary) !important;
+    display: flex;
+    align-items: center;
   }
 
   &.disabled {
-    .label {
-      color: theme(digitv2.lightTheme.text-disabled);
-    }
-
     .digit-custom-checkbox {
       border: 0.063rem solid theme(digitv2.lightTheme.text-disabled);
     }
@@ -76,5 +113,16 @@
     input:checked~.digit-custom-checkbox {
       border: 0.125rem solid theme(digitv2.lightTheme.text-disabled);
     }
+
+    .digit-custom-checkbox.intermediate{
+      border: 0.125rem solid theme(digitv2.lightTheme.text-disabled);
+    }
+
+    .intermediate-square {
+      width: theme(digitv2.spacers.spacer4);
+      height: theme(digitv2.spacers.spacer4);
+      background-color: theme(digitv2.lightTheme.text-disabled);
+      display: block;
+    }
   }
 }

package/src/digitv2/components/chipV2.scss

@@ -46,9 +46,36 @@
     }
   
 
+    &.clickable:hover{
+      box-shadow: 0.125rem 0.125rem 0.25rem 0rem #36363633;
+    }
+
+    svg{
+      flex-shrink: 0;
+    }
+
     .digit-text {
       @extend .typography.body-xs;
       @apply overflow-hidden items-center whitespace-no-wrap;
+      font-family: theme(digitv2.fontFamily.sans);
+      font-style: theme(digitv2.fontStyle.normal);
+      font-weight: theme(digitv2.fontWeight.regular);
+      line-height: theme(digitv2.lineHeight.lineheight2);
+  
+      @media (max-aspect-ratio: 9/16) {
+        /* Media query for mobile */
+        font-size: theme(digitv2.fontSize.body-xs.mobile);
+      }
+  
+      @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+        /* Media query for tablets */
+        font-size: theme(digitv2.fontSize.body-xs.tablet);
+      }
+  
+      @media (min-aspect-ratio: 3/4) {
+        /* Media query for desktop */
+        font-size: theme(digitv2.fontSize.body-xs.desktop);
+      }
       max-width: calc(100% - (theme(digitv2.spacers.spacer7)));
       width: calc(100% - (theme(digitv2.spacers.spacer7)));
       text-overflow: clip;
@@ -120,6 +147,18 @@
   }
 }
 
+.digit-tag{
+  &.noClose{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &.noIcon{
+      display: unset;
+    }
+  }
+}
+
 .cp{
   cursor: pointer;
 }

package/src/digitv2/components/dividerV2.scss

@@ -0,0 +1,13 @@
+.digit-divider {
+    border: theme(digitv2.divider.dividerS);
+    width: 100%;
+    margin: theme(digitv2.spacers.spacer0);
+
+    &.medium {
+        border: theme(digitv2.divider.dividerM);
+    }
+
+    &.large {
+        border: theme(digitv2.divider.dividerL);
+    }
+}