@egovernments/digit-ui-components-css 0.0.1

package/src/digitv2/components/buttonsV2.scss

@@ -0,0 +1,407 @@
+@import url("../index.scss");
+
+.icon-label-container {
+  @apply flex max-w-full items-center;
+  gap: theme(digitv2.spacers.spacer2);
+
+  &.small,
+  &.medium {
+    gap: theme(digitv2.spacers.spacer1);
+  }
+
+  .digit-button-customIcon {
+    @apply flex-shrink-0 w-6 h-6;
+
+    &.medium {
+      @apply w-5 h-5;
+    }
+
+    &.small {
+      width: 0.875rem;
+      height: 0.875rem;
+    }
+  }
+
+  &.link {
+    @apply items-start;
+    gap: theme(digitv2.spacers.spacer1);
+
+    .digit-button-customIcon {
+      @apply w-5 h-5 flex-shrink-0;
+
+      &.small {
+        width: 0.875rem;
+        height: 0.875rem;
+        margin-top:theme(digitv2.spacers.spacer1);
+      }
+    }
+  }
+}
+
+.digit-button-label {
+  @extend .typography.button.large;
+  @apply text-center text-white w-full overflow-hidden whitespace-no-wrap;
+  text-overflow: ellipsis;
+}
+
+.digit-button-default {
+  @apply text-center cursor-pointer outline-none inline-flex bg-white max-w-full items-center;
+  height: fit-content;
+  width: fit-content;
+  gap: theme(digitv2.spacers.spacer2);
+  border: 0.063rem solid #000000;
+  padding-left: theme(digitv2.spacers.spacer6);
+  padding-right: theme(digitv2.spacers.spacer6);
+  min-width: 6.5625rem;
+  min-height: theme(digitv2.spacers.spacer10);
+
+  h2 {
+    @extend .typography.button.large;
+    @apply text-black h-5;
+    margin: 0;
+  }
+}
+
+.digit-button-primary {
+  @apply text-center cursor-pointer outline-none flex max-w-full items-center justify-center h-10;
+  width: fit-content;
+  padding-left:  theme(digitv2.spacers.spacer6);
+  padding-right:  theme(digitv2.spacers.spacer6);
+  gap:  theme(digitv2.spacers.spacer2);
+  min-width: 6.5625rem;
+  background-color: theme(digitv2.lightTheme.primary-1);
+
+  h2 {
+    @extend .typography.button.large;
+    @apply text-white;
+    margin: 0;
+  }
+
+  &.disabled {
+    @apply opacity-50;
+    background: theme(digitv2.lightTheme.text-disabled);
+  }
+
+  &:focus {
+    @apply outline-none;
+  }
+
+  &:hover {
+    box-shadow: theme(digitv2.spacers.spacer0) -0.125rem theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer0) theme(digitv2.lightTheme.text-primary) inset;
+  }
+
+  &:active {
+    box-shadow: theme(digitv2.spacers.spacer0) -0.125rem theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer0) #0B0C0C inset, theme(digitv2.spacers.spacer0) 0.063rem 0.175rem theme(digitv2.spacers.spacer0) #00000040;
+
+    h2 {
+      font-weight: theme(digitv2.fontWeight.bold);
+    }
+  }
+
+  &.large{
+    h2{
+      @apply h-5;
+      margin-top: 0.125rem;
+    }
+  }
+
+  &.medium {
+    @apply h-8;
+
+    h2 {
+      @extend .typography.button.medium;
+    }
+  }
+
+  &.small {
+    @apply h-6;
+
+    h2 {
+      @extend .typography.button.small;
+    }
+  }
+
+}
+
+.digit-button-secondary {
+  @apply text-center cursor-pointer outline-none bg-white flex max-w-full items-center justify-center h-10;
+  padding-left:  theme(digitv2.spacers.spacer6);
+  padding-right:  theme(digitv2.spacers.spacer6);
+  gap:  theme(digitv2.spacers.spacer2);
+  min-width: 6.5625rem;
+  border: 0.063rem solid theme(digitv2.lightTheme.primary-1);
+  width: fit-content;
+
+  &:focus {
+    @apply outline-none;
+  }
+
+  &:hover {
+    @apply bg-white;
+    box-shadow: theme(digitv2.spacers.spacer0) -0.125rem theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer0) theme(digitv2.lightTheme.primary-1) inset;
+  }
+
+  &:active {
+    @apply bg-white;
+    box-shadow: theme(digitv2.spacers.spacer0) -0.125rem theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer0) theme(digitv2.lightTheme.primary-1) inset, theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer1) theme(digitv2.spacers.spacer1) theme(digitv2.spacers.spacer0) #C84C0E33;
+
+  }
+
+  h2 {
+    @extend .typography.button.large;
+    margin: 0;
+    color: theme(digitv2.lightTheme.primary-1);
+  }
+
+  &.disabled {
+    @apply opacity-50;
+    border: 0.063rem solid theme(digitv2.lightTheme.text-disabled);
+
+    h2 {
+      color: theme(digitv2.lightTheme.text-disabled);
+    }
+  }
+
+  &.large{
+    h2{
+      @apply h-5;
+      margin-top: 0.125rem;
+    }
+  }
+
+  &.medium {
+    @apply h-8;
+
+    h2 {
+      @extend .typography.button.medium;
+    }
+  }
+
+  &.small {
+    @apply h-6;
+
+    h2 {
+      @extend .typography.button.small;
+    }
+  }
+}
+
+.digit-button-teritiary {
+  @apply text-center cursor-pointer outline-none flex max-w-full items-center justify-center h-10;
+  background: none;
+  width: fit-content;
+  padding-left:  theme(digitv2.spacers.spacer2);
+  padding-right: theme(digitv2.spacers.spacer2);
+  gap:  theme(digitv2.spacers.spacer2);
+  min-width: 6.5625rem;
+
+  &:focus {
+    @apply outline-none;
+  }
+
+  h2 {
+    @apply w-auto;
+    @extend .typography.button.large;
+    margin: 0;
+    color: theme(digitv2.lightTheme.primary-1);
+  }
+
+  &.disabled {
+    @apply opacity-50;
+
+    h2 {
+      color: theme(digitv2.lightTheme.text-disabled);
+    }
+  }
+
+  &.large{
+    h2{
+      @apply h-5;
+      margin-top: 0.125rem;
+    }
+  }
+
+  &.medium {
+    @apply h-8;
+
+    h2 {
+      @extend .typography.button.medium;
+    }
+  }
+
+  &.small {
+    @apply h-6;
+
+    h2 {
+      @extend .typography.button.small;
+    }
+  }
+
+  &:active{
+    h2{
+      font-weight: theme(digitv2.fontWeight.bold);
+    }
+  }
+}
+
+.digit-button-link {
+  @apply text-center cursor-pointer outline-none flex max-w-full items-center justify-center;
+  background: none;
+  width: fit-content;
+  height: fit-content;
+  padding-left:  theme(digitv2.spacers.spacer2);
+  padding-right: theme(digitv2.spacers.spacer2);
+  gap: theme(digitv2.spacers.spacer2);
+  min-width: 4.875rem;
+
+  &:focus {
+    @apply outline-none;
+  }
+
+  h2 {
+    @extend .typography.link-L;
+    @apply h-auto whitespace-normal text-left w-auto;
+    margin: 0;
+    word-break: break-word;
+    color: theme(digitv2.lightTheme.primary-1);
+    height: fit-content;
+  }
+
+  &:hover {
+    h2 {
+      @extend .typography.link-L;
+      @apply h-auto whitespace-normal text-left;
+      margin: 0;
+      word-break: break-word;
+      color: theme(digitv2.lightTheme.primary-1);
+      height: fit-content;
+      text-decoration-thickness: 0.125rem;
+    }
+  }
+
+  &.disabled {
+    @apply opacity-50;
+
+    h2 {
+      color: theme(digitv2.lightTheme.text-disabled);
+    }
+  }
+
+  &.medium {
+
+    h2 {
+      @extend .typography.link-S;
+    }
+  }
+
+  &.small {
+
+    h2 {
+      @extend .typography.link-XS;
+    }
+  }
+}
+
+.digit-button-digit-action-cancel {
+  @apply bg-border text-center outline-none px-lg text-center;
+  border-color: #464646;
+  border-bottom: 0.063rem;
+  border-style: solid;
+  min-width: 5.2rem;
+
+  &.disabled {
+    @apply opacity-50;
+  }
+
+  &:focus {
+    @apply outline-none;
+  }
+
+  h2 {
+    @apply font-medium text-black flex justify-center items-center;
+    margin: 0;
+    font-family: theme(digitv2.fontFamily.sans)
+  }
+}
+
+.digit-submit-bar {
+  /* @extend .light-primary-button;*/
+  @apply h-10 text-center w-full outline-none cursor-pointer;
+  box-shadow: inset theme(digitv2.spacers.spacer0) -0.125rem theme(digitv2.spacers.spacer0) theme(colors.text.primary);
+  background-color: theme(digitv2.lightTheme.primary-1);
+
+  &:focus {
+    @apply outline-none;
+  }
+
+  h2 {
+    @apply font-medium text-legend text-white leading-normal;
+    margin: 0;
+    font-family: theme(digitv2.fontFamily.sans)
+  }
+}
+
+.digit-submit-bar-disabled {
+  @apply h-10 text-center w-full outline-none opacity-50;
+  background-color: theme(digitv2.lightTheme.primary-1);
+
+  &:focus {
+    @apply outline-none;
+  }
+
+  h2 {
+    @apply font-medium text-legend text-white leading-normal;
+    margin: 0;
+    font-family: theme(digitv2.fontFamily.sans)
+  }
+}
+
+.digit-selector-button-primary {
+  @apply h-8 text-center border-b-2 border-input-border border-solid outline-none px-lg;
+  background-color: theme(digitv2.lightTheme.primary-1);
+
+  &:focus {
+    @apply outline-none;
+  }
+
+  h2 {
+    @apply font-rc font-medium text-legend text-white;
+  }
+}
+
+.digit-selector-button-border {
+  @apply h-8 bg-border text-center border-b-2 border-input-border border-solid outline-none px-lg;
+
+  &:focus {
+    @apply outline-none;
+  }
+
+  h2 {
+    @apply font-rc font-medium text-legend text-text-primary;
+  }
+}
+
+.digit-selector-button-primary-disabled {
+  @apply h-8 text-center border-b-2 border-input-border border-solid outline-none px-lg opacity-50;
+  background-color: theme(digitv2.lightTheme.primary-1);
+
+  &:focus {
+    @apply outline-none;
+  }
+
+  h2 {
+    @apply font-rc font-medium text-legend text-white;
+  }
+}
+
+@screen dt {
+
+  .digit-submit-bar,
+  .digit-submit-bar-disabled {
+    width: 15rem;
+  }
+}
+
+.digit-submit-bar:focus {
+  @apply outline-none !important;
+}

package/src/digitv2/components/cardBasedOptionsV2.scss

@@ -0,0 +1,46 @@
+.digit-card-based-options {
+  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.16);
+  @apply bg-white mb-md px-sm py-md mx-sm rounded w-full;
+  .digit-head-content {
+    @apply flex justify-between mb-lg;
+    h2 {
+      @apply text-heading-s font-bold text-text-primary;
+    }
+    p {
+      @apply text-link text-primary-main font-medium cursor-pointer;
+    }
+  }
+
+  .digit-main-content {
+    @apply flex justify-evenly;
+    .digit-card-based-options-main-child-option {
+      width: 25%;
+      @apply text-center;
+      .digit-child-option-image-wrapper {
+        margin: auto !important;
+        background: rgba(244, 119, 56, 0.12);
+        mix-blend-mode: normal;
+        padding-top: 14px;
+        @apply h-12 w-12 rounded-full cursor-pointer;
+        svg {
+          height: 20px;
+          width: 20px;
+          fill: theme(colors.primary.main);
+          margin: auto;
+        }
+      }
+      .digit-child-option-name {
+        font-size: 12px;
+        line-height: 14px;
+        padding-top: 1rem;
+      }
+    }
+  }
+}
+
+@screen dt {
+  .digit-card-based-options {
+    width: calc(50% - 16px);
+    @apply p-md;
+  }
+}

package/src/digitv2/components/cardLabelV2.scss

@@ -0,0 +1,8 @@
+@import url("../typography.scss");
+
+.digit-card-label {
+  font-weight: theme(digitv2.fontWeight.regular);
+  font-size: 16px;
+  line-height: 19px;
+  color: theme(digitv2.lightTheme.text-primary);
+}