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

package/src/digitv2/components/multiSelectDropdownV2.scss

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