@egovernments/digit-ui-components-css 0.0.1

package/src/digitv2/components/multiSelectDropdownV2.scss

@@ -0,0 +1,316 @@
+@import url("../index.scss");
+.digit-multiselectdropdown-wrap {
+  margin-bottom: 0.625rem;
+
+  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+    /* Media query for tablets */
+    max-width: 27.5rem;
+  }
+
+  @media (max-aspect-ratio: 9/16) {
+    /* Media query for mobile */
+    max-width: 20.5rem;
+    width: 100%;
+  }
+
+  @media (min-aspect-ratio: 3/4) {
+    /* Media query for desktop */
+    max-width: 37.5rem;
+  }
+
+  @apply relative text-form-field text-text-primary w-full;
+  .digit-multiselectdropdown-master,
+  .digit-multiselectdropdown-master-active {
+    @apply relative h-10 w-full bg-white;
+    border: 0.063rem solid theme(digitv2.lightTheme.generic-inputborder);
+    input[type="text"] {
+      @extend .typography.body-l;
+      @apply absolute top-0 left-0 p-sm min-h-full min-w-full opacity-0;
+      letter-spacing: theme(digitv2.spacers.spacer0);
+      &:focus {
+        @apply outline-none;
+      }
+    }
+    .digit-multiselectdropdown-label {
+      @apply flex justify-between p-sm w-full h-full;
+      svg {
+        @apply h-6 w-6;
+      }
+    }
+  }
+  .digit-multiselectdropdown-master {
+    &.disabled {
+      pointer-events: none !important;
+      border: 0.063rem solid theme(digitv2.lightTheme.generic-divider) !important;
+      color: theme(digitv2.lightTheme.generic-divider) !important;
+    }
+  }
+  .digit-multiselectdropdown-master-active {
+    border: 0.063rem solid theme(digitv2.lightTheme.primary-1);
+  }
+  .digit-multiselectdropdown-server {
+    top: theme(digitv2.spacers.spacer10);
+    @apply absolute z-20 bg-white overflow-x-hidden overflow-y-auto;
+    max-height: 20vmax;
+    box-shadow: theme(digitv2.spacers.spacer0) 0.063rem 0.275rem theme(digitv2.spacers.spacer0) #00000026;
+    width: 100% !important;
+  }
+  .digit-multiselectdropdown-server::-webkit-scrollbar {
+    width: theme(digitv2.spacers.spacer2);
+    background-color: theme(digitv2.lightTheme.generic-background);
+  }
+  .digit-multiselectdropdown-server::-webkit-scrollbar-track {
+    background-color: theme(digitv2.lightTheme.generic-background);
+    border-radius: 0.563rem;
+  }
+  .digit-multiselectdropdown-server::-webkit-scrollbar-thumb {
+    background-color: theme(digitv2.lightTheme.generic-divider);
+    border-radius: 0.563rem;
+  }
+  .digit-nested-category {
+    @apply flex items-center flex-shrink-0;
+    background: theme(digitv2.lightTheme.background);
+    height: 2.4375rem;
+    padding: theme(digitv2.spacers.spacer4) 0.625rem;
+    gap: 0.625rem;
+    margin-top: theme(digitv2.spacers.spacer4);
+    &.selectAll {
+      justify-content: space-between;
+    }
+  }
+  .digit-nested-category:nth-child(-n+2) {
+    margin-top: theme(digitv2.spacers.spacer0);
+  }
+  .digit-category-name {
+    @extend .typography.heading-s;
+    color: theme(digitv2.lightTheme.text-primary);
+  }
+  .digit-category-selectAll {
+    @apply flex relative;
+    gap: 0.625rem;
+    cursor: pointer !important;
+    align-items: center;
+    .category-selectAll-label {
+      @extend .typography.body-s;
+      text-align: left;
+      color: theme(digitv2.lightTheme.primary-1);
+    }
+    input {
+      @apply absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer;
+      margin: theme(digitv2.spacers.spacer0);
+    }
+    .digit-multiselectdropodwn-custom-checkbox-selectAll {
+      height: theme(digitv2.spacers.spacer5);
+      width: theme(digitv2.spacers.spacer5);
+      border: 0.063rem solid theme(digitv2.lightTheme.text-secondary);
+      svg {
+        @apply opacity-0 z-10;
+      }
+    }
+    input:active~.digit-multiselectdropodwn-custom-checkbox-selectAll,
+    input:checked~.digit-multiselectdropodwn-custom-checkbox-selectAll {
+      border: 0.125rem solid theme(digitv2.lightTheme.primary-1);
+      background-color: theme(digitv2.lightTheme.paper-secondary);
+    }
+    input:active~.digit-multiselectdropodwn-custom-checkbox-selectAll svg,
+    input:checked~.digit-multiselectdropodwn-custom-checkbox-selectAll svg {
+      @apply opacity-100;
+      width: theme(digitv2.spacers.spacer4);
+      height: theme(digitv2.spacers.spacer4);
+    }
+  }
+  .digit-multiselectdropodwn-menuitem {
+    @apply flex w-full bg-white justify-start items-center;
+    min-height: 2.438rem;
+    .option-des-container {
+      @apply w-full max-w-full overflow-hidden box-border;
+      margin: 0.594rem theme(digitv2.spacers.spacer0) 0.594rem theme(digitv2.spacers.spacer0);
+      .multiselectdropdown-icon-option {
+        @apply w-full items-center;
+        display: flex !important;
+        gap: theme(digitv2.spacers.spacer1);
+        svg {
+          flex-shrink: 0;
+        }
+      }
+    }
+    &.nestedmultiselect {
+      position: relative;
+      &:not(.selectAll)::before {
+        content: "";
+        position: absolute;
+        bottom: 0;
+        left: 0.625rem;
+        right: 0.625rem;
+        border-bottom: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
+      }
+      &:not(.selectAll):hover,
+      &:not(.selectAll):active {
+        &::before {
+          border-bottom: none;
+        }
+      }
+    }
+    &:not(.nestedmultiselect, .keyChange, .checked):not(:active):not(:hover):nth-of-type(even) {
+      background: theme(digitv2.lightTheme.paper-secondary);
+    }
+    &:hover,
+    &.keyChange {
+      background: theme(digitv2.lightTheme.primary-bg);
+      border: 0.031rem solid theme(digitv2.lightTheme.primary-1);
+    }
+    &:active,
+    &:active:hover {
+      background: theme(digitv2.lightTheme.primary-1);
+      border: 0.031rem solid theme(digitv2.lightTheme.primary-1);
+      p {
+        @extend .typography.heading-s;
+        color: theme(digitv2.lightTheme.paper-primary);
+      }
+      .digit-label {
+        &.selectAll {
+          @extend .typography.body-l;
+          color: theme(digitv2.lightTheme.primary-1);
+        }
+      }
+    }
+    input {
+      min-height: 2.438rem;
+      @apply absolute min-w-full opacity-0 z-20 cursor-pointer;
+    }
+    p {
+      @extend .typography.body-s;
+      @apply w-full overflow-hidden whitespace-no-wrap max-w-full;
+      color: theme(digitv2.lightTheme.text-primary);
+      margin: theme(digitv2.spacers.spacer0);
+      text-overflow: ellipsis;
+    }
+    &.checked {
+      background: theme(digitv2.lightTheme.primary-1);
+      p {
+        @extend .typography.heading-s;
+        color: theme(digitv2.lightTheme.paper-primary);
+      }
+      .digit-label {
+        &.selectAll {
+          @extend .typography.body-l;
+          color: theme(digitv2.lightTheme.primary-1);
+        }
+      }
+    }
+    .digit-multiselectdropodwn-custom-checkbox,
+    .digit-multiselectdropodwn-custom-checkbox-selectAll {
+      height: theme(digitv2.spacers.spacer5);
+      width: theme(digitv2.spacers.spacer5);
+      border: 0.063rem solid theme(digitv2.lightTheme.text-secondary);
+      margin: 0.594rem 0.75rem 0.594rem 0.625rem;
+      svg {
+        @apply opacity-0 z-10;
+      }
+    }
+    input:active~.digit-multiselectdropodwn-custom-checkbox,
+    input:checked~.digit-multiselectdropodwn-custom-checkbox {
+      border: 0.125rem solid theme(digitv2.lightTheme.paper-primary);
+      background-color: theme(digitv2.lightTheme.primary-1);
+    }
+    input:active~.digit-multiselectdropodwn-custom-checkbox-selectAll,
+    input:checked~.digit-multiselectdropodwn-custom-checkbox-selectAll {
+      border: 0.125rem solid theme(digitv2.lightTheme.primary-1);
+      background-color: theme(digitv2.lightTheme.paper-secondary);
+    }
+    input:active~.digit-multiselectdropodwn-custom-checkbox svg,
+    input:checked~.digit-multiselectdropodwn-custom-checkbox svg,
+    input:active~.digit-multiselectdropodwn-custom-checkbox-selectAll svg,
+    input:checked~.digit-multiselectdropodwn-custom-checkbox-selectAll svg {
+      @apply opacity-100;
+      width: theme(digitv2.spacers.spacer4);
+      height: theme(digitv2.spacers.spacer4);
+    }
+    &.nestedtextmultiselect {
+      padding:      theme(digitv2.spacers.spacer2) theme(digitv2.spacers.spacer4);
+      gap: theme(digitv2.spacers.spacer3);
+      align-items: flex-start !important;
+      &:not(.selectAll) {
+        min-height: 4.75rem;
+        .input {
+          min-height: 3.75rem;
+        }
+      }
+      .option-des-container {
+        @apply flex flex-col justify-center items-start;
+        width: 100% !important;
+        margin: theme(digitv2.spacers.spacer0);
+        p {
+          @extend .typography.body-l;
+          color: theme(digitv2.lightTheme.text-secondary);
+          padding: theme(digitv2.spacers.spacer0);
+          margin-bottom: theme(digitv2.spacers.spacer0);
+          margin-top: theme(digitv2.spacers.spacer0);
+        }
+        .option-description {
+          color: theme(digitv2.lightTheme.text-secondary);
+          font-family: theme(digitv2.fontFamily.sans);
+          font-size: theme(digitv2.spacers.spacer3);
+          font-style: theme(digitv2.fontStyle.normal);
+          font-weight: theme(digitv2.fontWeight.regular);
+          line-height: 1.125rem;
+        }
+        .svg {
+          flex-shrink: 0;
+        }
+      }
+      .digit-multiselectdropodwn-custom-checkbox {
+        margin: theme(digitv2.spacers.spacer0);
+        margin-top: 0.125rem;
+      }
+      &:active,
+      &.checked {
+        .option-description,
+        p {
+          color: theme(digitv2.lightTheme.paper-primary);
+        }
+        .option-des-container {
+          p {
+            @extend .typography.heading-s;
+          }
+        }
+        .digit-multiselectdropodwn-custom-checkbox {
+          margin-top: theme(digitv2.spacers.spacer0);
+        }
+      }
+      &:active {
+        background: theme(digitv2.lightTheme.primary-1);
+      }
+      .digit-multiselectdropodwn-custom-checkbox-selectAll {
+        margin: theme(digitv2.spacers.spacer0);
+        margin-top: 0.125rem;
+      }
+    }
+    &.selectAll {
+      background-color: theme(digitv2.lightTheme.paper-secondary) !important;
+      border: 0.063rem solid theme(digitv2.lightTheme.generic-divider) !important;
+    }
+    .digit-label {
+      &.selectAll {
+        @extend .typography.body-l;
+        color: theme(digitv2.lightTheme.primary-1);
+      }
+    }
+  }
+  .digit-cursorPointer {
+    @apply cursor-pointer;
+  }
+  .digit-multiselectdropdown-master,
+  .digit-multiselectdropdown-master-active {
+    .digit-multiselectdropdown-label {
+      p {
+        white-space: pre;
+        margin: auto;
+        margin-left: theme(digitv2.spacers.spacer0);
+        padding-left: 1%;
+        font-size: theme(digitv2.spacers.spacer4);
+        line-height: theme(digitv2.spacers.spacer6);
+      }
+    }
+  }
+}

package/src/digitv2/components/multiUploadWrapperV2.scss

@@ -0,0 +1,6 @@
+@import url("../index.scss");
+
+.digit-validation-error {
+  @extend .alert-error;
+  @apply block text-body-s text-error;
+}

package/src/digitv2/components/navbarV2.scss

@@ -0,0 +1,9 @@
+.navbar {
+  .digit-employee-select-wrap {
+    margin-bottom: 0px;
+  }
+  h3{
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+}

package/src/digitv2/components/noresultsfoundV2.scss

@@ -0,0 +1,11 @@
+.digit-no-data-found {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  .digit-error-msg {
+    margin-top: 2rem;
+  }
+}

package/src/digitv2/components/numeric.scss

@@ -0,0 +1,47 @@
+.Numeric {
+  width: 23.75rem;
+  text-align: center;
+  display: flex;
+  align-content: center;
+
+  &.disabled {
+    @apply border-grey-dark text-grey-dark !important;
+    pointer-events: none !important;
+    cursor: not-allowed;
+
+  }
+
+  &.focused {
+    border: 2px solid theme(digitv2.lightTheme.primary-1);
+  }
+
+  &.noneditable {
+    pointer-events: none !important;
+    border: 1px solid theme(digitv2.lightTheme.generic-inputborder);
+    background: theme(digitv2.lightTheme.generic-background);
+    color: theme(digitv2.lightTheme.text-secondary);
+  }
+
+  &.error {
+    border: 2px solid theme(digitv2.lightTheme.alert-error);
+  }
+}
+
+.NumericButton {
+  color: theme(digitv2.lightTheme.text-secondary);
+  font-size: 1.5rem;
+  font-weight: theme(digitv2.fontWeight.bold);
+  text-align: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  border: 1px solid theme(digitv2.lightTheme.text-secondary);
+  font-family: theme(digitv2.fontFamily.sans);
+  font-style: theme(digitv2.fontStyle.normal);
+  line-height: theme(digitv2.lineHeight.normal);
+}
+
+input {
+  background-color: theme(digitv2.lightTheme.paper-primary);
+  width: 23.75rem;
+  height: 2.5rem;
+}

package/src/digitv2/components/otpInputV2.scss

@@ -0,0 +1,15 @@
+.digit-input-otp-wrap {
+  @apply mb-lg;
+
+  input {
+    @apply border-2 border-solid border-input-border outline-none h-10 w-10 text-form-field text-text-primary mr-sm mb-sm text-center;
+  }
+  input::-webkit-outer-spin-button,
+  input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+  input[type="number"] {
+    -moz-appearance: textfield;
+  }
+}

package/src/digitv2/components/panelcard.scss

@@ -0,0 +1,161 @@
+.digit-panelcard-wrap {
+    @apply w-full flex-col;
+    display: flex;
+    height: fit-content;
+    border-radius: theme(digitv2.spacers.spacer1);
+    box-shadow: theme(digitv2.spacers.spacer0) 0.063rem 0.125rem theme(digitv2.spacers.spacer0) #00000029;
+    background: theme(digitv2.lightTheme.paper-primary);
+
+    .digit-panelcard-header{
+
+        &.with-shadow {
+            box-shadow: theme(digitv2.spacers.spacer0) 0.063rem 0.125rem theme(digitv2.spacers.spacer0) #00000026;
+          }
+      
+          @media (min-width: 48rem) {
+            padding: theme(digitv2.spacers.spacer6);
+            padding-bottom: theme(digitv2.spacers.spacer0);
+      
+            &.with-shadow {
+              padding-bottom: theme(digitv2.spacers.spacer6);
+            }
+          }
+      
+          @media (min-width: 30.063rem) and (max-width: 47.938rem) {
+            padding: theme(digitv2.spacers.spacer5);
+            padding-bottom: theme(digitv2.spacers.spacer0);
+      
+            &.with-shadow {
+              padding-bottom: theme(digitv2.spacers.spacer5);
+            }
+          }
+      
+          @media (max-width: 30rem) {
+            padding: theme(digitv2.spacers.spacer4);
+            padding-bottom: theme(digitv2.spacers.spacer0);
+      
+            &.with-shadow {
+              padding-bottom: theme(digitv2.spacers.spacer4);
+            }
+          }
+    }
+
+    .digit-panelcard-children-wrap {
+        @apply flex-col overflow-hidden overflow-y-auto ;
+
+        display: flex;
+        flex: 1;
+
+        &.inline {
+            flex-direction: row;
+        }
+
+        @media (min-width: 48rem) {
+            gap: theme(digitv2.spacers.spacer6);
+            padding: theme(digitv2.spacers.spacer6) theme(digitv2.spacers.spacer6) theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer6);
+      
+            &.with-shadow,
+            &.without-footer{
+              padding: theme(digitv2.spacers.spacer6);
+            }
+      
+          }
+      
+          @media (min-width: 30.063rem) and (max-width: 47.938rem) {
+            gap: theme(digitv2.spacers.spacer5);
+            padding: theme(digitv2.spacers.spacer5) theme(digitv2.spacers.spacer5) theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer5);
+          
+            &.with-shadow,
+            &.without-footer{
+              padding: theme(digitv2.spacers.spacer5);
+            }
+          
+          }
+      
+          @media (max-width: 30rem) {
+            gap: theme(digitv2.spacers.spacer4);
+            padding: theme(digitv2.spacers.spacer4) theme(digitv2.spacers.spacer4) theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer4);
+          
+            &.with-shadow,
+            &.without-footer{
+              padding: theme(digitv2.spacers.spacer4);
+            }
+          }
+
+        .digit-panelcard-description {
+            @extend .typography.body-s;
+            color: theme(digitv2.lightTheme.generic-inputborder);
+        }
+
+    }
+
+    .digit-panelcard-footer {
+        @apply flex-wrap;
+        display: flex;
+        gap: theme(digitv2.spacers.spacer4);
+    
+        &.with-shadow {
+          box-shadow: theme(digitv2.spacers.spacer0) -0.063rem 0.125rem theme(digitv2.spacers.spacer0) #00000026;
+        }
+    
+        @media (min-width: 48rem) {
+          padding: theme(digitv2.spacers.spacer6);
+        }
+    
+        @media (min-width: 30.063rem) and (max-width: 47.938rem) {
+          @apply w-full;
+          padding: theme(digitv2.spacers.spacer5);
+        }
+    
+        @media (max-width: 30rem) {
+          @apply flex-col;
+          padding: theme(digitv2.spacers.spacer4);
+        }
+      }
+    
+      .digit-panelcard-footer-buttons {
+        margin-left: auto;
+        display: flex;
+        gap: theme(digitv2.spacers.spacer4);
+        @apply max-w-full flex-wrap;
+    
+        @media (min-width: 30.063rem) and (max-width: 47.938rem) {
+          @apply w-full;
+    
+          button {
+            flex: 1;
+          }
+        }
+    
+        @media (max-width: 30rem) {
+          @apply flex-col;
+          margin: theme(digitv2.spacers.spacer0);
+    
+          button {
+            width: 100%;
+          }
+        }
+      }
+
+    .panelcard-infocard{
+        margin: theme(digitv2.spacers.spacer0);
+        width: 100%;
+        max-width: 100%;
+        min-width: 100%;
+    }
+}
+
+.digit-panelcard-children-wrap::-webkit-scrollbar {
+    width: theme(digitv2.spacers.spacer2);
+    background-color: theme(digitv2.lightTheme.generic-background);
+  }
+  
+  .digit-panelcard-children-wrap::-webkit-scrollbar-track {
+    background-color: theme(digitv2.lightTheme.generic-background);
+    border-radius: 0.563rem;
+  }
+  
+  .digit-panelcard-children-wrap::-webkit-scrollbar-thumb {
+    background-color: theme(digitv2.lightTheme.generic-divider);
+    border-radius: 0.563rem;
+  }

package/src/digitv2/components/panels.scss

@@ -0,0 +1,115 @@
+.digit-panel-wrapper {
+  @apply flex flex-col items-center;
+  gap: theme(digitv2.spacers.spacer6);
+
+  &.success {
+    background-color: theme(digitv2.lightTheme.alert-success);
+
+    @media (min-width: 48rem) {
+      padding: theme(digitv2.spacers.spacer10);
+      padding-top: 0.703rem;
+    }
+
+    @media (min-width: 30.063rem) and (max-width: 47.938rem) {
+      padding: theme(digitv2.spacers.spacer10);
+      padding-top: theme(digitv2.spacers.spacer4);
+    }
+
+    @media (max-width: 30rem) {
+      padding: theme(digitv2.spacers.spacer8) theme(digitv2.spacers.spacer10);
+      padding-top: theme(digitv2.spacers.spacer4);
+    }
+
+  }
+
+  &.error,
+  &.with-svg {
+
+    @media (min-width: 48rem) {
+      padding: theme(digitv2.spacers.spacer10);
+    }
+
+    @media (min-width: 30.063rem) and (max-width: 47.938rem) {
+      padding: theme(digitv2.spacers.spacer10);
+    }
+
+    @media (max-width: 30rem) {
+      padding: theme(digitv2.spacers.spacer8) theme(digitv2.spacers.spacer10);
+    }
+  }
+
+  &.error {
+    background-color: theme(digitv2.lightTheme.alert-error);
+  }
+
+  .digit-panel-message-wrapper {
+    @apply items-center;
+    display: flex;
+    flex-direction: column !important;
+
+    &.success {
+
+      @media (min-width: 48rem) {
+        gap: 0.422rem;
+      }
+
+      @media (min-width: 30.063rem) and (max-width: 47.938rem) {
+        gap: theme(digitv2.spacers.spacer2);
+      }
+
+      @media (max-width: 30rem) {
+        gap: theme(digitv2.spacers.spacer2);
+      }
+    }
+
+
+    &.error,
+    &.with-svg {
+
+      @media (min-width: 48rem) {
+        gap: theme(digitv2.spacers.spacer6);
+      }
+
+      @media (min-width: 30.063rem) and (max-width: 47.938rem) {
+        gap: theme(digitv2.spacers.spacer5);
+      }
+
+      @media (max-width: 30rem) {
+        gap: theme(digitv2.spacers.spacer4);
+      }
+
+    }
+
+    .digit-panel-message {
+      @extend .typography.heading-xl;
+      @apply whitespace-pre-wrap break-words text-center;
+      line-height: normal;
+      color: theme(digitv2.lightTheme.paper-primary);
+    }
+  }
+
+  .digit-panel-info-wrapper {
+    display: flex;
+    flex-direction: column !important;
+    align-items: center;
+    gap: theme(digitv2.spacers.spacer1);
+
+    .digit-panel-info {
+      @extend .typography.body-l;
+      color: theme(digitv2.lightTheme.paper-primary);
+    }
+
+    .digit-panel-multiple-responses {
+      display: flex;
+      flex-direction: column;
+      gap: theme(digitv2.spacers.spacer1);
+    }
+
+    .digit-panel-response {
+      @extend .typography.heading-m;
+      color: theme(digitv2.lightTheme.paper-primary);
+      line-height: normal;
+    }
+
+  }
+}

package/src/digitv2/components/paragraphV2.scss

@@ -0,0 +1,5 @@
+@import url("../typography.scss");
+
+.digit-paragraph {
+  @extend .typography.text-body-l;
+}