@egovernments/digit-ui-components-css 0.0.2-beta.9 → 0.2.0

package/src/digitv2/components/summaryCardFieldPairV2.scss

@@ -0,0 +1,83 @@
+.digit-viewcard-field-pair{
+  @apply w-full flex-col;
+  display: flex;
+  height: fit-content;
+  background-color: transparent;
+  gap: theme(digitv2.spacers.spacer1);
+
+  .digit-viewcard-label{
+      @extend .typography.heading-s;
+      font-family: theme(digitv2.fontFamily.sans);
+      font-style: theme(digitv2.fontStyle.normal);
+      font-weight: theme(digitv2.fontWeight.bold);
+      line-height: theme(digitv2.lineHeight.lineheight1);
+  
+      @media (max-aspect-ratio: 9/16) {
+        /* Media query for mobile */
+        font-size: theme(digitv2.fontSize.heading-s.mobile);
+      }
+  
+      @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+        /* Media query for tablets */
+        font-size: theme(digitv2.fontSize.heading-s.tablet);
+      }
+  
+      @media (min-aspect-ratio: 3/4) {
+        /* Media query for desktop */
+        font-size: theme(digitv2.fontSize.heading-s.desktop);
+      }
+      @apply whitespace-pre-wrap break-words w-full;
+      word-break: break-word;
+      color: theme(digitv2.lightTheme.text-primary);
+  }
+
+  .digit-viewcard-value{
+      @extend .typography.body-s;
+      font-family: theme(digitv2.fontFamily.sans);
+      font-style: theme(digitv2.fontStyle.normal);
+      font-weight: theme(digitv2.fontWeight.regular);
+      line-height: theme(digitv2.lineHeight.lineheight2);
+  
+      @media (max-aspect-ratio: 9/16) {
+        /* Media query for mobile */
+        font-size: theme(digitv2.fontSize.body-s.mobile);
+      }
+  
+      @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+        /* Media query for tablets */
+        font-size: theme(digitv2.fontSize.body-s.tablet);
+      }
+  
+      @media (min-aspect-ratio: 3/4) {
+        /* Media query for desktop */
+        font-size: theme(digitv2.fontSize.body-s.desktop);
+      }
+      @apply whitespace-pre-wrap break-words w-full;
+      color: theme(digitv2.lightTheme.text-primary);
+  }
+
+  &.inline{
+      flex-direction: row;
+
+      @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-viewcard-label{
+          width: 20%;
+      }
+
+      .digit-viewcard-value{
+          width: 80%;
+      }
+
+  }
+}

package/src/digitv2/components/summaryCardV2.scss

@@ -0,0 +1,100 @@
+.digit-view-card {
+  .digit-view-card-header {
+    @extend .typography.heading-l;
+    font-family: theme(digitv2.fontFamily.sans);
+    font-style: theme(digitv2.fontStyle.normal);
+    font-weight: theme(digitv2.fontWeight.bold);
+    line-height: theme(digitv2.lineHeight.lineheight1);
+
+    @media (max-aspect-ratio: 9/16) {
+      /* Media query for mobile */
+      font-size: theme(digitv2.fontSize.heading-l.mobile);
+    }
+
+    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+      /* Media query for tablets */
+      font-size: theme(digitv2.fontSize.heading-l.tablet);
+    }
+
+    @media (min-aspect-ratio: 3/4) {
+      /* Media query for desktop */
+      font-size: theme(digitv2.fontSize.heading-l.desktop);
+    }
+
+    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-view-card-subheader {
+    @extend .typography.heading-m;
+    font-family: theme(digitv2.fontFamily.sans);
+    font-style: theme(digitv2.fontStyle.normal);
+    font-weight: theme(digitv2.fontWeight.bold);
+    line-height: theme(digitv2.lineHeight.lineheight1);
+
+    @media (max-aspect-ratio: 9/16) {
+      /* Media query for mobile */
+      font-size: theme(digitv2.fontSize.heading-m.mobile);
+    }
+
+    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+      /* Media query for tablets */
+      font-size: theme(digitv2.fontSize.heading-m.tablet);
+    }
+
+    @media (min-aspect-ratio: 3/4) {
+      /* Media query for desktop */
+      font-size: theme(digitv2.fontSize.heading-m.desktop);
+    }
+
+    color: theme(digitv2.lightTheme.primary-2);
+    line-height: normal;
+  }
+
+  .view-card-field-pairs {
+    display: flex;
+    flex-direction: column;
+    gap: theme(digitv2.spacers.spacer4);
+    position: relative;
+
+    &.two-column-layout {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: theme(digitv2.spacers.spacer4);
+
+      &.with-divider{
+        grid-column-gap:theme(digitv2.spacers.spacer8);
+      }
+    }
+
+    .vertical-summarycard-divider {
+      position: absolute;
+      height: 100%;
+      border: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
+      z-index: 1;
+    }
+  }
+}
+
+.seperate-card-sections {
+  display: flex;
+  flex-direction: column;
+
+  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+    gap: theme(digitv2.spacers.spacer5);
+  }
+
+  @media (min-aspect-ratio: 3/4) {
+    gap: theme(digitv2.spacers.spacer6);
+  }
+
+  @media (max-aspect-ratio: 9/16) {
+    gap: theme(digitv2.spacers.spacer4);
+  }
+
+}

package/src/digitv2/components/switchV2.scss

@@ -0,0 +1,112 @@
+.digit-switch-container {
+  display: flex;
+  align-items: center;
+}
+
+.digit-switch {
+  width: theme(digitv2.spacers.spacer11);
+  height: theme(digitv2.spacers.spacer6);
+  background-color: #BFBFBF;
+  border-radius: theme(digitv2.spacers.spacer4);
+  position: relative;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+  flex-shrink: 0;
+  animation-timing-function: ease-out;
+  animation-duration: 150ms;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &:focus-within{
+    outline: none;
+  }
+
+  &.switch-disabled{
+    background-color: theme(digitv2.lightTheme.text-disabled);
+  }
+}
+
+.digit-switch.checked {
+  background-color: theme(digitv2.lightTheme.primary-1);
+}
+
+.digit-switch-toggle {
+  width: 1.125rem;
+  height: 1.125rem;
+  background-color: theme(digitv2.lightTheme.paper-primary);
+  border-radius: 50%;
+  position: absolute;
+  left: 0.125rem;
+  transition: left 0.2s ease;
+  box-shadow: theme(digitv2.spacers.spacer0) 0.125rem theme(digitv2.spacers.spacer1) theme(digitv2.spacers.spacer0) #00230B33;
+}
+
+.digit-switch.checked .digit-switch-toggle {
+  left: theme(digitv2.spacers.spacer6);
+  background-color: theme(digitv2.lightTheme.paper-primary);
+}
+
+.digit-switch-label {
+  @extend .typography.body-s;
+  margin-left: theme(digitv2.spacers.spacer2);
+  font-family: theme(digitv2.fontFamily.sans);
+  font-style: theme(digitv2.fontStyle.normal);
+  font-weight: theme(digitv2.fontWeight.regular);
+  line-height: theme(digitv2.lineHeight.lineheight2);
+
+  @media (max-aspect-ratio: 9/16) {
+    font-size: theme(digitv2.fontSize.body-s.mobile);
+  }
+
+  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+    font-size: theme(digitv2.fontSize.body-s.tablet);
+  }
+
+  @media (min-aspect-ratio: 3/4) {
+    font-size: theme(digitv2.fontSize.body-s.desktop);
+  }
+
+  @apply text-left;
+  word-break: break-word;
+  letter-spacing: theme(digitv2.spacers.spacer0);
+  color: theme(digitv2.lightTheme.text-primary);
+
+  &.labelFirst{
+    margin:theme(digitv2.spacers.spacer0);
+    margin-right:theme(digitv2.spacers.spacer2);
+  }
+}
+
+
+.digit-switch-shape-on {
+  position: absolute;
+  top: theme(digitv2.spacers.spacer2);
+  width: 0.125rem;
+  height: theme(digitv2.spacers.spacer2);
+  border-radius: 0.063rem;
+  left: 0.625rem;
+  background-color: theme(digitv2.lightTheme.primary-bg);
+}
+
+.digit-switch-shape-off {
+  position: absolute;
+  top: theme(digitv2.spacers.spacer2);
+  width: theme(digitv2.spacers.spacer2);
+  height: theme(digitv2.spacers.spacer2);
+  right: theme(digitv2.spacers.spacer2);
+  background-color: transparent;
+  border-radius: 50%;
+  border: 0.063rem solid theme(digitv2.lightTheme.generic-background);
+}
+
+.digit-switch-container.switch-disabled {
+  .digit-switch {
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  .digit-switch-label {
+    color: theme(digitv2.lightTheme.text-disabled);
+  }
+}

package/src/digitv2/components/tabV2.scss

@@ -0,0 +1,126 @@
+.digit-tab {
+    display: flex;
+    height: fit-content;
+    overflow: auto;
+    align-items: flex-end;
+
+    .digit-tab-list {
+
+        height: 3.75rem;
+
+        .digit-tab-item {
+            display: flex;
+            width: 100%;
+            min-height: 3.75rem;
+            padding: theme(digitv2.spacers.spacer4) theme(digitv2.spacers.spacer6);
+            height: 3.75rem;
+            align-items: center;
+            justify-content: center;
+            background-color: theme(digitv2.lightTheme.paper-secondary);
+            border: 0.063rem solid theme(digitv2.lightTheme.generic-inputborder);
+            border-radius: theme(digitv2.spacers.spacer2) theme(digitv2.spacers.spacer2) theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer0);
+            cursor: pointer;
+            gap: theme(digitv2.spacers.spacer1);
+
+            .digit-tab-icon {
+                display: flex;
+                align-items: center;
+
+                svg {
+                    flex-shrink: 0;
+                }
+            }
+
+
+            justify-content: center;
+
+
+            .digit-tab-label {
+                @extend .typography.body-s;
+                font-family: theme(digitv2.fontFamily.sans);
+                font-style: theme(digitv2.fontStyle.normal);
+                font-weight: theme(digitv2.fontWeight.regular);
+                line-height: theme(digitv2.lineHeight.lineheight2);
+
+                @media (max-aspect-ratio: 9/16) {
+                    /* Media query for mobile */
+                    font-size: theme(digitv2.fontSize.body-s.mobile);
+                }
+
+
+                @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+                    /* Media query for tablets */
+                    font-size: theme(digitv2.fontSize.body-s.tablet);
+                }
+
+
+
+                @media (min-aspect-ratio: 3/4) {
+                    /* Media query for desktop */
+                    font-size: theme(digitv2.fontSize.body-s.desktop);
+                }
+
+                color: theme(digitv2.lightTheme.text-secondary);
+                white-space: noWrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                line-height: normal;
+            }
+        }
+
+        &.active {
+            height: 4rem;
+
+            .digit-tab-item {
+                border: 0.125rem solid theme(digitv2.lightTheme.primary-1);
+                border-bottom: theme(digitv2.spacers.spacer1) solid theme(digitv2.lightTheme.primary-1);
+                background-color: theme(digitv2.lightTheme.paper-primary);
+                height: 4rem;
+                min-height: 4rem;
+
+                .digit-tab-label {
+                    @extend .typography.heading-s;
+                    font-family: theme(digitv2.fontFamily.sans);
+                    font-style: theme(digitv2.fontStyle.normal);
+                    font-weight: theme(digitv2.fontWeight.bold);
+                    line-height: theme(digitv2.lineHeight.lineheight1);
+                
+                    @media (max-aspect-ratio: 9/16) {
+                      /* Media query for mobile */
+                      font-size: theme(digitv2.fontSize.heading-s.mobile);
+                    }
+                
+                    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+                      /* Media query for tablets */
+                      font-size: theme(digitv2.fontSize.heading-s.tablet);
+                    }
+                
+                    @media (min-aspect-ratio: 3/4) {
+                      /* Media query for desktop */
+                      font-size: theme(digitv2.fontSize.heading-s.desktop);
+                    }
+                    color: theme(digitv2.lightTheme.primary-1);
+                    white-space: noWrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    line-height: normal;
+                }
+            }
+        }
+    }
+}
+
+.digit-tab::-webkit-scrollbar {
+    height: 0.375rem;
+    background-color: transparent;
+}
+
+.digit-tab::-webkit-scrollbar-track {
+    background-color: transparent;
+    border-radius: 0.563rem;
+}
+
+.digit--tab::-webkit-scrollbar-thumb {
+    background-color: transparent;
+    border-radius: 0.563rem;
+}