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

package/src/digitv2/components/textareaV2.scss

@@ -1,100 +1,100 @@
-.digit-card-textarea-field,
-.digit-employee-card-textarea-field {
-  @apply block outline-none w-full bg-white text-form-field overflow-x-hidden overflow-y-hidden whitespace-pre-wrap;
-
-
-  font-family: theme(digitv2.fontFamily.sans);
-  font-style: theme(digitv2.fontStyle.normal);
-  font-weight: theme(digitv2.fontWeight.regular);
-  color: theme(digitv2.lightTheme.text-primary);
-  border: 0.063rem solid theme(digitv2.lightTheme.text-secondary);
-  font-size: theme(digitv2.spacers.spacer4);
-  line-height: theme(digitv2.spacers.spacer6);
-  padding: theme(digitv2.spacers.spacer3) !important;
-  padding-top: theme(digitv2.spacers.spacer2) !important;
-  height: 6.25rem;
-  min-height:theme(digitv2.spacers.spacer10);
-  overflow-wrap: break-word;
-
-
-  &.disabled {
-    @apply text-grey-dark !important;
-    border: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
-    pointer-events: none !important;
-    cursor: not-allowed;
-
-  }
-
-  &.noneditable {
-    pointer-events: none !important;
-    border: 0.063rem solid theme(digitv2.lightTheme.generic-inputborder);
-    background: theme(digitv2.lightTheme.generic-background);
-    color: theme(digitv2.lightTheme.text-secondary);
-  }
-
-  &.error {
-    border: 0.094rem solid theme(digitv2.lightTheme.alert-error);
-  }
-
-  &:hover {
-    overflow-y: auto;
-  }
-
-  &.resize-smart {
-    min-height: 6rem;
-    overflow: hidden;
-    resize: none;
-  }
-}
-
-textarea::-webkit-scrollbar {
-  width: theme(digitv2.spacers.spacer2);
-  background-color: theme(digitv2.lightTheme.generic-background);
-}
-
-textarea::-webkit-scrollbar-track {
-  background-color: theme(digitv2.lightTheme.generic-background);
-  border-radius: 0.563rem;
-}
-
-textarea::-webkit-scrollbar-thumb {
-  background-color: theme(digitv2.lightTheme.generic-divider);
-  border-radius: 0.563rem;
-}
-
-.digit-employee-card-textarea-field {
-  @apply w-full;
-  height: 6.25rem;
-
-  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4)  {
-    /* Media query for tablets */
-    max-width: 27.5rem;
-    min-width: 12.5rem;
-  }
-
-  @media (max-aspect-ratio: 9/16) {
-    /* Media query for mobile */
-    max-width: 20.5rem;
-    min-width: 9.75rem;
-    width: 100%;
-  }
-
-  @media (min-aspect-ratio: 3/4) {
-    /* Media query for desktop */
-    max-width: 37.5rem;
-    min-width: 12.5rem;
-  }
-}
-
-.digit-card-textarea-field:focus,
-.digit-employee-card-textarea-field:focus {
-  border: 0.094rem solid theme(digitv2.lightTheme.primary-1);
-  overflow-y: auto;
-}
-
-.digit-card-textarea-field.resize-smart:focus,
-.digit-employee-card-textarea-field.resize-smart:focus,
-.digit-card-textarea-field.resize-smart:hover,
-.digit-employee-card-textarea-field.resize-smart:hover  {
-  overflow: hidden; 
+.digit-card-textarea-field,
+.digit-employee-card-textarea-field {
+  @apply block outline-none w-full bg-white text-form-field overflow-x-hidden overflow-y-hidden whitespace-pre-wrap;
+
+
+  font-family: theme(digitv2.fontFamily.sans);
+  font-style: theme(digitv2.fontStyle.normal);
+  font-weight: theme(digitv2.fontWeight.regular);
+  color: theme(digitv2.lightTheme.text-primary);
+  border: 0.063rem solid theme(digitv2.lightTheme.text-secondary);
+  font-size: theme(digitv2.spacers.spacer4);
+  line-height: theme(digitv2.spacers.spacer6);
+  padding: theme(digitv2.spacers.spacer3) !important;
+  padding-top: theme(digitv2.spacers.spacer2) !important;
+  height: 6.25rem;
+  min-height:theme(digitv2.spacers.spacer10);
+  overflow-wrap: break-word;
+
+
+  &.disabled {
+    @apply text-grey-dark !important;
+    border: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
+    pointer-events: none !important;
+    cursor: not-allowed;
+
+  }
+
+  &.noneditable {
+    pointer-events: none !important;
+    border: 0.063rem solid theme(digitv2.lightTheme.generic-inputborder);
+    background: theme(digitv2.lightTheme.generic-background);
+    color: theme(digitv2.lightTheme.text-secondary);
+  }
+
+  &.error {
+    border: 0.094rem solid theme(digitv2.lightTheme.alert-error);
+  }
+
+  &:hover {
+    overflow-y: auto;
+  }
+
+  &.resize-smart {
+    min-height: 6rem;
+    overflow: hidden;
+    resize: none;
+  }
+}
+
+textarea::-webkit-scrollbar {
+  width: theme(digitv2.spacers.spacer2);
+  background-color: theme(digitv2.lightTheme.generic-background);
+}
+
+textarea::-webkit-scrollbar-track {
+  background-color: theme(digitv2.lightTheme.generic-background);
+  border-radius: 0.563rem;
+}
+
+textarea::-webkit-scrollbar-thumb {
+  background-color: theme(digitv2.lightTheme.generic-divider);
+  border-radius: 0.563rem;
+}
+
+.digit-employee-card-textarea-field {
+  @apply w-full;
+  height: 6.25rem;
+
+  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4)  {
+    /* Media query for tablets */
+    max-width: 27.5rem;
+    min-width: 12.5rem;
+  }
+
+  @media (max-aspect-ratio: 9/16) {
+    /* Media query for mobile */
+    max-width:100%;
+    min-width: 9.75rem;
+    width: 100%;
+  }
+
+  @media (min-aspect-ratio: 3/4) {
+    /* Media query for desktop */
+    max-width: 37.5rem;
+    min-width: 12.5rem;
+  }
+}
+
+.digit-card-textarea-field:focus,
+.digit-employee-card-textarea-field:focus {
+  border: 0.094rem solid theme(digitv2.lightTheme.primary-1);
+  overflow-y: auto;
+}
+
+.digit-card-textarea-field.resize-smart:focus,
+.digit-employee-card-textarea-field.resize-smart:focus,
+.digit-card-textarea-field.resize-smart:hover,
+.digit-employee-card-textarea-field.resize-smart:hover  {
+  overflow: hidden; 
 }

package/src/digitv2/components/{textblock.scss → textblockV2.scss}

@@ -1,47 +1,47 @@
-.digit-text-block-wrap {
-
-    @apply flex flex-col;
-
-    @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-text-block-header-content {
-        .digit-text-block-caption {
-            @extend .typography.caption-s;
-            padding-bottom: theme(digitv2.spacers.spacer1);
-            color: theme(digitv2.lightTheme.text-secondary);
-        }
-
-        .digit-text-block-header {
-            @extend .typography.heading-xl;
-            padding-bottom: theme(digitv2.spacers.spacer2);
-            color: theme(digitv2.lightTheme.text-primary);
-            line-height: normal;
-        
-            @media (max-width: 30rem) {
-                padding-bottom: theme(digitv2.spacers.spacer1);
-            }
-        }
-
-        .digit-text-block-subheader {
-            @extend .typography.heading-m;
-            color: theme(digitv2.lightTheme.text-secondary);
-            line-height: normal;
-        }
-    }
-
-    .digit-text-block-body {
-        @extend .typography.body-s;
-        color: theme(digitv2.lightTheme.generic-inputborder);
-    }
+.digit-text-block-wrap {
+
+    @apply flex flex-col;
+
+    @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-text-block-header-content {
+        .digit-text-block-caption {
+            @extend .typography.caption-s;
+            padding-bottom: theme(digitv2.spacers.spacer1);
+            color: theme(digitv2.lightTheme.text-secondary);
+        }
+
+        .digit-text-block-header {
+            @extend .typography.heading-xl;
+            padding-bottom: theme(digitv2.spacers.spacer2);
+            color: theme(digitv2.lightTheme.text-primary);
+            line-height: normal;
+        
+            @media (max-width: 30rem) {
+                padding-bottom: theme(digitv2.spacers.spacer1);
+            }
+        }
+
+        .digit-text-block-subheader {
+            @extend .typography.heading-m;
+            color: theme(digitv2.lightTheme.text-secondary);
+            line-height: normal;
+        }
+    }
+
+    .digit-text-block-body {
+        @extend .typography.body-s;
+        color: theme(digitv2.lightTheme.generic-inputborder);
+    }
 }

package/src/digitv2/components/{timeline.scss → timelineV2.scss}

@@ -1,127 +1,171 @@
-.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;
-    }
-  }
+.digit-timeline-item {
+  @apply flex items-start relative ;
+  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;
+  }
+}
+
+.connector-line {
+  @apply absolute bottom-0 border-solid border-border;
+  border-left-width: 0.125rem;
+  margin-left: 0.938rem;
+  top: theme(digitv2.spacers.spacer8);
+
+  &.completed,
+  &.inprogress,
+  &.nextActiveStep{
+    border-color: theme(digitv2.lightTheme.primary-1);
+  }
+
+  &.nextActiveStep{
+    border-style: dotted;
+  }
+
+  @media (max-aspect-ratio: 9/16) {
+    /* Media query for mobile */
+    margin-left: 0.688rem;
+    top: theme(digitv2.spacers.spacer6);
+    border-left-width: 0.063rem;
+  }
+}
+
+.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;
+}
+
+/* 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;
+    }
+  }
+}
+
+.digit-timeline-molecule{
+  @apply max-h-full;
+
+  .timeline-content:not(.lastTimeline){
+
+    @media (min-aspect-ratio: 3/4) {
+      /* Media query for desktop */
+      margin-bottom: theme(digitv2.spacers.spacer6);
+    }
+
+    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+      /* Media query for tablets */
+      margin-bottom: theme(digitv2.spacers.spacer5);
+    }
+    @media (max-aspect-ratio: 9/16) {
+      /* Media query for mobile */
+      margin-bottom: theme(digitv2.spacers.spacer4);
+    }
+  }
+}
+
+.view-more-past-container {
+  margin-top: theme(digitv2.spacers.spacer4);
+}
+
+.view-more-future-container {
+  margin-bottom: theme(digitv2.spacers.spacer4);
 }