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

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: #ffffff;
+    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: #FAFAFA;
+        border: 0.063em solid #d6d5d4;
+    }
+
+    &.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-width: 30.063rem) and (max-width: 47.938rem) {
+            flex-direction: row;
+
+            .digit-buttons-group {
+                margin-top: 2.75rem;
+
+                button {
+                    h2 {
+                        margin: 0rem;
+                    }
+                }
+            }
+        }
+
+        @media (min-width: 48rem) {
+            flex-direction: row;
+        }
+
+        @media (max-width: 30rem) {
+            flex-direction: column;
+
+            .digit-buttons-group {
+                margin-top: 0rem;
+
+                button {
+                    margin-top: 0rem;
+
+                    h2 {
+                        margin: 0rem;
+                    }
+                }
+
+            }
+        }
+    }
+
+    @media (min-width: 30.063rem) and (max-width: 47.938rem) {
+        padding: theme(digitv2.spacers.spacer5);
+    }
+
+    @media (min-width: 48rem) {
+        padding: theme(digitv2.spacers.spacer6);
+    }
+
+    @media (max-width: 30rem) {
+        padding: theme(digitv2.spacers.spacer4);
+    }
+
+    &.action {
+        padding: theme(digitv2.spacers.spacer6);
+        gap: theme(digitv2.spacers.spacer6);
+
+        button {
+            width: 100%;
+        }
+    }
+
+    &.viewcard{
+
+        .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,6 +26,10 @@
       @apply opacity-0;
     }
 
+    svg{
+      flex-shrink: 0;
+    }
+
     &:hover {
       @apply border-2 ;
       border-color: theme(digitv2.lightTheme.primary-1);

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

@@ -122,4 +122,9 @@
 
 .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/errorMessageV2.scss

@@ -4,6 +4,8 @@
 .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;

package/src/digitv2/components/fieldV1.scss

@@ -82,7 +82,7 @@
         }
 
         @media (max-aspect-ratio: 9/16) {
-            max-width: 20.5rem;
+            max-width: 100%;
             width: 100%;
         }