updated info toast css and dropdown category option css (#56)

egovernments · May 6, 2024 · 7b6015a · 7b6015a
1 parent 2bf9dc4
commit 7b6015a
Show file tree

Hide file tree

Showing 16 changed files with 20 additions and 209 deletions.
diff --git a/react/css/README.md b/react/css/README.md
@@ -42,6 +42,7 @@ frontend/micro-ui/web/public/index.html
 # Changelog
 
 ```bash
+1.8.2-coreui.12 updated css for toast info and category option css 
 1.8.2-coreui.11 added info varinat for toast
 1.8.2-coreui.10 dropdown options card height updated
 1.8.2-coreui.9 enhancements of components

diff --git a/react/css/package.json b/react/css/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@egovernments/digit-ui-css",
- "version": "1.8.2-coreui.11",
+ "version": "1.8.2-coreui.12",
  "license": "MIT",
  "main": "dist/index.css",
  "author": "Jagankumar <[email protected]>",

diff --git a/react/css/src/digitv2/components/multiSelectDropdownV2.scss b/react/css/src/digitv2/components/multiSelectDropdownV2.scss
@@ -1,5 +1,4 @@
 @import url("../index.scss");
-
 .digit-multiselectdropdown-wrap {
  margin-bottom: 0.625rem;
 
@@ -19,156 +18,124 @@
  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: 0rem;
-
  &: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: 2.5rem;
  @apply absolute z-20 bg-white overflow-x-hidden overflow-y-auto;
  max-height: 20vmax;
  box-shadow: 0rem 0.063rem 0.275rem 0rem #00000026;
  width: 100% !important;
  }
-
  .digit-multiselectdropdown-server::-webkit-scrollbar {
  width: 0.5rem;
  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.paper-secondary);
+ background: theme(digitv2.lightTheme.background);
  height: 2.4375rem;
  padding: 1rem 0.625rem;
  gap: 0.625rem;
  margin-top: 1rem;
-
  &.selectAll {
  justify-content: space-between;
  }
  }
-
  .digit-nested-category:nth-child(-n+2) {
  margin-top: 0rem;
  }
-
  .digit-category-name {
  @extend .typography.heading-s;
- color: theme(digitv2.lightTheme.text-secondary);
+ 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: 0rem;
  }
-
  .digit-multiselectdropodwn-custom-checkbox-selectAll {
  height: 1.25rem;
  width: 1.25rem;
  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: 1rem;
  height: 1rem;
  }
  }
-
  .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 0rem 0.594rem 0rem;
-
  .multiselectdropdown-icon-option {
  @apply w-full items-center;
  display: flex !important;
  gap: 0.25rem;
-
  svg {
  flex-shrink: 0;
  }
  }
  }
-
  &.nestedmultiselect {
  position: relative;
-
  &:not(.selectAll)::before {
  content: "";
  position: absolute;
@@ -177,98 +144,80 @@
  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: 0rem;
  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: 1.25rem;
  width: 1.25rem;
  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,
@@ -277,33 +226,27 @@
  width: 1rem;
  height: 1rem;
  }
-
  &.nestedtextmultiselect {
  padding: 0.5rem 1rem;
  gap: 0.75rem;
  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: 0rem;
-
  p {
  @extend .typography.body-l;
  color: theme(digitv2.lightTheme.text-secondary);
  padding: 0rem;
  margin-bottom: 0rem;
  margin-top: 0rem;
  }
-
  .option-description {
  color: theme(digitv2.lightTheme.text-secondary);
  font-family: theme(digitv2.fontFamily.sans);
@@ -312,63 +255,51 @@
  font-weight: theme(digitv2.fontWeight.regular);
  line-height: 1.125rem;
  }
-
  .svg {
  flex-shrink: 0;
  }
  }
-
  .digit-multiselectdropodwn-custom-checkbox {
  margin: 0rem;
  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: 0rem;
  }
  }
-
  &:active {
  background: theme(digitv2.lightTheme.primary-1);
  }
-
  .digit-multiselectdropodwn-custom-checkbox-selectAll {
  margin: 0rem;
  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 {