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

package/src/digitv2/components/timeline.scss

@@ -0,0 +1,127 @@
+.digit-timeline-item {
+  @apply flex items-start;
+  gap: theme(digitv2.spacers.spacer4);
+}
+
+.timeline-circle {
+  @apply relative flex-shrink-0 w-8 h-8;
+  border-radius: 50%;
+
+  @media (max-aspect-ratio: 9/16) {
+    /* Media query for mobile */
+    @apply w-6 h-6;
+  }
+}
+
+.timeline-content,
+.timeline-info {
+  @apply flex flex-col w-full;
+  gap: theme(digitv2.spacers.spacer2);
+}
+
+.timeline-info{
+  @media (max-aspect-ratio: 9/16) {
+    /* Media query for mobile */
+    gap: theme(digitv2.spacers.spacer1);
+  }
+}
+
+.timeline-divider {
+  border: 0.063rem solid theme(digitv2.lightTheme.divider);
+}
+
+.timeline-label {
+  @extend .typography.heading-s;
+  @apply whitespace-normal h-auto text-left;
+  color: theme(digitv2.lightTheme.text-primary);
+  word-break: break-word;
+  padding-top: 0.414rem;
+
+  @media (max-aspect-ratio: 9/16) {
+    /* Media query for mobile */
+    padding-top: 0.164rem;
+  }
+}
+
+.timeline-date {
+  @extend .typography.body-s;
+  @apply text-left;
+  color: theme(digitv2.lightTheme.text-secondary);
+}
+
+.timeline-toggle-details {
+  @apply flex items-center cursor-pointer;
+  gap: theme(digitv2.spacers.spacer1);
+  width: fit-content;
+}
+
+.timeline-additional-elements-inline {
+  @apply flex flex-wrap items-start;
+  gap: theme(digitv2.spacers.spacer4);
+}
+
+.timeline-additional-elements-column {
+  @apply flex flex-col items-start;
+  gap: theme(digitv2.spacers.spacer4);
+
+  .timeline-individual-element {
+    @apply w-full max-w-full;
+
+  }
+}
+
+img {
+  @apply max-w-full;
+}
+
+.details-btn {
+  @extend .typography.link;
+  @apply text-left;
+  background-color: transparent;
+  border: none;
+  color: theme(digitv2.lightTheme.primary-1);
+  padding: theme(digitv2.spacers.spacer0);
+}
+
+/* Circle Variants */
+.timeline-circle,
+.timeline-circle.upcoming {
+    background-color: theme(digitv2.lightTheme.text-disabled);
+}
+
+.timeline-circle.inprogress {
+  background-color: transparent;
+  border: 0.125rem solid theme(digitv2.lightTheme.primary-1);
+}
+
+.timeline-circle.inprogress::after {
+  @apply absolute w-4 h-4;
+  content: '';
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  border-radius: 50%;
+  background-color: theme(digitv2.lightTheme.primary-1);
+
+  @media (max-aspect-ratio: 9/16) {
+    /* Media query for mobile */
+    @apply w-3 h-3;
+  }
+}
+
+.timeline-circle.completed {
+  background-color: theme(digitv2.lightTheme.primary-1);
+
+  .check-icon {
+    @apply w-6 h-6 absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+
+    @media (max-aspect-ratio: 9/16) {
+      /* Media query for mobile */
+      width: 1.125rem;
+      height: 1.125rem;
+    }
+  }
+}

package/src/digitv2/components/toastV2.scss

@@ -0,0 +1,81 @@
+.digit-toast-success {
+  @apply fixed flex z-20 w-full max-w-full left-0 items-center;
+  bottom: -(theme(digitv2.spacers.spacer12));
+  gap: theme(digitv2.spacers.spacer2);
+  height: theme(digitv2.spacers.spacer12);
+  padding: theme(digitv2.spacers.spacer3) theme(digitv2.spacers.spacer2) theme(digitv2.spacers.spacer3) theme(digitv2.spacers.spacer3) !important;
+  background-color: theme(digitv2.lightTheme.alert-success);
+  transition: bottom 0.5s ease;
+
+  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+    @apply w-auto max-w-full;
+    min-width: 30rem;
+    left:50%;
+    transform: translate(-50%);
+  }
+
+  @media (max-aspect-ratio: 9/16) {
+    @apply w-full;
+  }
+
+  @media (min-aspect-ratio: 3/4){
+    @apply w-auto max-w-full;
+    min-width: 50rem;
+    left:50%;
+    transform: translate(-50%);
+  }
+
+  &.digit-error {
+    background-color: theme(digitv2.lightTheme.alert-error);
+  }
+
+  &.digit-warning {
+    background-color: #F19100;
+
+    &.digit-warning-buttons {
+      @apply block;
+    }
+  }
+
+  .toast-label {
+    @extend .typography.caption-s;
+    @apply text-left overflow-hidden whitespace-no-wrap flex-grow flex items-center h-6;
+    letter-spacing: theme(digitv2.spacers.spacer0);
+    color: theme(digitv2.lightTheme.paper-primary);
+    margin: theme(digitv2.spacers.spacer0);
+    text-overflow: ellipsis;
+  }
+
+  &.digit-info {
+    background-color: theme(digitv2.lightTheme.alert-info);
+  }
+
+  .digit-warning-button-container {
+    @apply w-full flex justify-end;
+
+    button {
+      margin-left: 0.625rem;
+    }
+  }
+
+  .digit-toast-sub-container {
+    @apply flex;
+  }
+
+  svg {
+    @apply flex-shrink-0;
+  }
+}
+
+@keyframes slideInFromBottom {
+  from {
+    bottom: -(theme(digitv2.spacers.spacer12));
+  }
+  to {
+    bottom: 4rem;
+  }
+}
+
+.digit-toast-success.animate {
+  animation: slideInFromBottom 0.5s ease forwards;
+}

package/src/digitv2/components/toggle.scss

@@ -0,0 +1,73 @@
+@import url("../index.scss");
+
+
+.digit-toggle-toolbar {
+  @apply flex justify-start w-full;
+  max-width: 37.5rem;
+  min-width: 7.5rem;
+}
+
+
+.toggle-option-container {
+  @apply inline-flex items-center;
+  gap: theme(digitv2.spacers.spacer2);
+}
+
+.digit-toggle-btn-wrap {
+  @apply flex items-center justify-center cursor-pointer bg-white overflow-hidden text-center;
+  padding: 0.125rem theme(digitv2.spacers.spacer0);
+  width: 7rem;
+  height: theme(digitv2.spacers.spacer8);
+  border: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
+  text-overflow: ellipsis;
+
+  .digit-toggle-label {
+    @extend .typography.body-xs;
+    @apply w-full overflow-hidden whitespace-no-wrap;
+    color: theme(digitv2.lightTheme.text-disabled);
+    text-overflow: ellipsis;
+  }
+
+  &:hover,
+  &:active {
+    border: 0.063rem solid theme(digitv2.lightTheme.primary-1);
+    background: theme(digitv2.lightTheme.paper-primary);
+    width: 7.125rem;
+    color: theme(digitv2.lightTheme.primary-1);
+
+    .digit-toggle-label {
+      color: theme(digitv2.lightTheme.primary-1) !important;
+    }
+  }
+
+  &:active {
+    box-shadow: theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer0) 0.375rem theme(digitv2.spacers.spacer0) #F4773840;
+  }
+
+  input:checked+.digit-toggle-label {
+    @extend .typography.heading-s;
+    background-color: theme(digitv2.lightTheme.primary-1);
+    color: theme(digitv2.lightTheme.paper-primary) !important;
+  }
+
+  &.checked {
+    background-color: theme(digitv2.lightTheme.primary-1);
+    width: 7.125rem;
+    border: 0.063rem solid theme(digitv2.lightTheme.primary-1);
+
+    .digit-toggle-label {
+      @extend .typography.heading-s;
+      color: theme(digitv2.lightTheme.paper-primary);
+    }
+  }
+}
+
+
+.digit-toggle-input {
+  @apply absolute opacity-0;
+}
+
+.digit-toggle-label {
+  color: theme(digitv2.lightTheme.text-disabled);
+  padding: theme(digitv2.spacers.spacer2) theme(digitv2.spacers.spacer3);
+}

package/src/digitv2/components/toggleswitchV2.scss

@@ -0,0 +1,42 @@
+@import url("../index.scss");
+
+.react-switch-checkbox {
+  height: 0;
+  width: 0;
+  visibility: hidden;
+}
+
+.react-switch-label {
+  display: flex;
+  width: 7rem;
+  height: 2rem;
+  padding: 0.125rem;
+  justify-content: center;
+  align-items: center;
+  gap: 0.78125rem;
+  flex-shrink: 0;
+  border: 1px solid theme(digitv2.lightTheme.generic-divider);
+  background: theme(digitv2.lightTheme.paper-primary);
+  border-radius: 0px;
+
+  &:hover {
+    width: 7.125rem;
+    border: 1px solid theme(digitv2.lightTheme.primary-1);
+    background: theme(digitv2.lightTheme.paper-primary);
+    box-shadow: 0px 0px 6px 0px rgba(244, 119, 56, 0.25);
+  }
+}
+
+
+.react-switch-label .react-switch-button {
+  visibility: hidden;
+}
+
+.react-switch-checkbox:checked+.react-switch-label {
+  width: 7.125rem;
+  background: theme(digitv2.lightTheme.primary-1);
+}
+
+.react-switch-label:active .react-switch-button {
+  width: 45px;
+}

package/src/digitv2/components/topbarV2.scss

@@ -0,0 +1,187 @@
+.topbar {
+  position: fixed;
+  top: 0;
+  width: 100%;
+  padding: 10px 24px;
+  background: white;
+  box-shadow: rgba(0, 0, 0, 0.24) 0 1px 4px;
+  z-index: 9999999;
+  @apply flex items-center;
+
+  img {
+    display: inline;
+
+    &.city {
+      margin-right: 8px;
+      height: 48px;
+      width: 48px;
+    }
+
+    &.state {
+      height: 20px;
+      max-height: 20px;
+      width: auto;
+    }
+  }
+
+  .ulb {
+    font-weight: bold;
+    display: inline-block;
+  }
+
+  .right {
+    float: right;
+    margin-top: 12px;
+    position: relative;
+
+    svg {
+      display: inline;
+    }
+
+    .user-img-txt {
+      background: theme(colors.primary.main);
+      padding: 10px 15px;
+      border-radius: 50%;
+      color: white;
+      font-weight: 700;
+    }
+  }
+
+  .left {
+    float: left;
+  }
+
+  .w-80 {
+    width: 70%;
+  }
+
+  .width-20 {
+    width: 30%;
+  }
+
+  .margin-top-6 {
+    margin-top: 6px;
+  }
+
+  .margin-right-30 {
+    margin-right: 30px;
+  }
+
+  .margin-top-10 {
+    margin-top: 10px;
+  }
+
+  .icon {
+    display: block;
+    color: rgb(117, 117, 117);
+    fill: rgb(117, 117, 117);
+    height: 21px;
+    width: 21px;
+  }
+
+  .column-gap-15 {
+    column-gap: 15px;
+  }
+
+  .column-gap-5 {
+    column-gap: 5px;
+  }
+
+  .select-wrap,
+  .employee-select-wrap {
+    margin-bottom: 0px;
+    .profile-dropdown--item {
+      span {
+        white-space: pre;
+      }
+    }
+  }
+
+  .digit-employee-select-wrap {
+    margin-bottom: 0px;
+  }
+
+  .digit-topbar-container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+  }
+
+  @media screen and (min-width: 641px) {
+    .digit-hamburger-class {
+      display: none !important;
+    }
+  }
+
+  @media screen and (max-width: 640px) {
+
+    .ulb {
+      font-size: 14px;
+      display: inline-block;
+    }
+
+    .flex-right {
+      display: none;
+    }
+
+    .digit-employee-select-wrap {
+      right: 0;
+    }
+  }
+}
+
+.cp {
+  cursor: pointer;
+  .hamburger {
+    display: none;
+  }
+
+  @media (max-width: 780px) {
+    .hamburger {
+      display: none;
+    }
+  }
+}
+
+.citizen {
+  .right {
+    margin-top: 5px;
+    margin-bottom: 5px;
+  }
+
+  .topbar-select-wrap {
+    margin-bottom: 0;
+  }
+
+  .flex-between {
+    @apply flex items-center justify-between;
+  }
+}
+
+.profile-dropdown--item {
+  display: flex;
+  flex-direction: row;
+  padding: 10px;
+  column-gap: 10px;
+  color: theme(colors.text.secondary);
+
+  &:hover {
+    background: theme(colors.grey.mid);
+  }
+}
+
+.flex-right {
+  @apply flex items-center justify-end;
+  min-width: 85px;
+}
+video::-webkit-media-controls-panel {
+  top: 55%;
+  position: absolute;
+  width: 100%;
+}
+
+.topbarOptionsClassName {
+  right: -3rem !important
+}
+

package/src/digitv2/components/treeSelectV2.scss

@@ -0,0 +1,133 @@
+.digit-tree-select-options-container.first-level:nth-of-type(even) {
+    .digit-tree-select-option.level-0,
+    .digit-tree-multiselect-option.level-0:not(.checked){
+        background-color: theme(digitv2.lightTheme.paper-secondary);
+    }
+}
+.digit-tree-select-options-container.first-level:nth-of-type(odd) {
+    .digit-tree-select-option.level-0,
+    .digit-tree-multiselect-option.level-0:not(.checked){
+        background-color: theme(digitv2.lightTheme.paper-primary);
+    }
+}
+.container.innerlevel {
+    border-left: 0.063rem solid #D6D5D4;
+}
+.digit-tree-select-option,
+.digit-tree-multiselect-option {
+    @apply relative cursor-pointer flex items-center;
+    height: 2.4375rem;
+    gap: theme(digitv2.spacers.spacer1);
+    padding: theme(digitv2.spacers.spacer4) 0.625rem;
+    &:hover {
+        background: theme(digitv2.lightTheme.primary-bg);
+        border: 0.063rem solid theme(digitv2.lightTheme.primary-1);
+    }
+    &.expanded {
+        .digit-option-label {
+            @extend .typography.heading-s;
+            color: theme(digitv2.lightTheme.text-primary);
+            /*font-size: 1rem;
+            font-weight: theme(digitv2.fontWeight.bold);
+            line-height: 1.188rem;*/
+        }
+    }
+    input {
+        @apply absolute opacity-0 cursor-pointer;
+        margin: 0;
+    }
+    .digit-toggle-dropdown {
+        width: theme(digitv2.spacers.spacer6);
+        height: theme(digitv2.spacers.spacer6);
+    }
+    .digit-custom-checkbox {
+        height: theme(digitv2.spacers.spacer5);
+        width: theme(digitv2.spacers.spacer5);
+        @apply flex items-center justify-center;
+        border: 0.063rem solid theme(digitv2.lightTheme.text-secondary);
+        svg {
+            @apply opacity-0 z-10;
+        }
+        &.checked {
+            border: 0.125rem solid theme(digitv2.lightTheme.primary-1);
+            svg {
+                @apply opacity-100;
+                width: theme(digitv2.spacers.spacer4);
+                height: theme(digitv2.spacers.spacer4);
+            }
+        }
+        &.intermediate {
+            border: 0.125rem solid theme(digitv2.lightTheme.primary-1);
+            .intermediate-state {
+                width: theme(digitv2.spacers.spacer3);
+                height: theme(digitv2.spacers.spacer3);
+                background-color: theme(digitv2.lightTheme.primary-1);
+                opacity: 1;
+            }
+        }
+    }
+}
+.container .digit-tree-multiselect-option.parent.checked.all-child-selected+.child-options-container,
+.container .digit-tree-multiselect-option.parent.checked.all-child-selected .child-options-container {
+    background-color: theme(digitv2.lightTheme.primary-bg);
+    .digit-tree-multiselect-option.checked {
+        background: theme(digitv2.lightTheme.primary-bg) !important;
+        .digit-toggle-dropdown.svg {
+            fill: #0B0C0C;
+        }
+        .digit-custom-checkbox {
+            border: 0.125rem solid theme(digitv2.lightTheme.primary-1);
+        }
+        .digit-option-label {
+            color: theme(digitv2.lightTheme.text-primary);
+        }
+    }
+    .container {
+        border: none;
+    }
+}
+.digit-tree-select-option {
+    &.expanded{
+        &.level-0{
+            background-color: theme(digitv2.lightTheme.paper-secondary) !important;
+        }
+    }
+    &.child {
+        .digit-option-label {
+            padding-left: theme(digitv2.spacers.spacer7);
+        }
+    }
+}
+.digit-tree-multiselect-option {
+    &.expanded{
+        &.level-0:not(.checked){
+            background-color: theme(digitv2.lightTheme.paper-secondary) !important;
+        }
+    }
+    &.checked {
+        background-color: theme(digitv2.lightTheme.primary-1);
+        .digit-custom-checkbox {
+            border: 0.125rem solid theme(digitv2.lightTheme.paper-primary);
+        }
+        .digit-option-label {
+            @extend .typography.heading-s;
+            color: theme(digitv2.lightTheme.paper-primary);
+        }
+    }
+    &.child {
+        .digit-custom-checkbox {
+            margin-left: 2.25rem;
+        }
+    }
+    .digit-option-checkbox {
+        display: none;
+    }
+}
+.digit-option-label {
+    @extend .typography.body-s;
+    @apply overflow-hidden w-full;
+    flex: 1;
+    color: theme(digitv2.lightTheme.text-primary);}
+.digit-toggle-dropdown {
+    @apply cursor-pointer;
+}