@egovernments/digit-ui-components-css 0.0.1

package/src/digitv2/components/ErrorMessage.scss

@@ -0,0 +1,19 @@
+@import url("../index.scss");
+@import url("../typography.scss");
+
+.digit-error-icon-message-wrap {
+  @apply flex w-full whitespace-pre-wrap break-words;
+  gap: theme(digitv2.spacers.spacer1);
+
+  .digit-error-icon{
+      @apply flex items-center;
+      width: theme(digitv2.spacers.spacer4);
+      height: theme(digitv2.lineHeight.lineheight2);
+  }
+  .digit-error-message {
+      @extend .typography.body-s;
+      @apply  w-full;
+      margin: theme(digitv2.spacers.spacer0);
+      color: theme(digitv2.lightTheme.alert-error)
+  }
+}

package/src/digitv2/components/FormComposerV2.scss

@@ -0,0 +1,118 @@
+@import url("../index.scss");
+
+.digit-field-container {
+  display: flex;
+  align-items: center;
+  @apply flex  items-center;
+
+  .component-in-front {
+    @apply flex justify-center items-center;
+    @extend .light-background;
+    @extend .light-input-border;
+    margin-top: 0;
+    border: 1px solid;
+    border-right: none;
+    padding: 7px;
+  }
+}
+
+.card-date-input {
+  @extend .light-input-border;
+  @apply absolute top-0 left-0 w-3/4 bg-white pl-sm border border-input-border border-solid border-r-0;
+  outline: transparent solid 1px;
+  height: 2.5rem;
+}
+.text-input-width {
+  max-width: 540px;
+}
+
+.text-input {
+  @apply relative w-full;
+  input {
+    background-color: transparent;
+    &:hover {
+      @extend .light-input-border;
+      @apply border-2 border-solid border-primary-main;
+    }
+  }
+}
+.employee-card-input-error {
+  @extend .light-input-border;
+  @extend .alert-error;
+  @apply mb-lg pl-sm block w-full h-10 outline-none border-2 border-error border-solid bg-white leading-10 text-form-field text-text-primary;
+}
+.card-input-error {
+  @extend .light-input-border;
+  @extend .alert-error;
+  @apply mb-lg pl-sm block w-full h-10 outline-none border-2 border-error border-solid bg-white leading-10 text-form-field text-text-primary;
+}
+
+.employee-card-input {
+  @extend .light-input-border;
+  @apply mb-lg pl-sm outline-none block border w-full h-10 border-input-border border-solid bg-white leading-10 text-form-field text-text-primary;
+}
+.employee-card-input:disabled {
+  @extend .light-input-border;
+  @extend .light-text-color-disabled;
+  @apply border-grey-dark text-grey-dark !important;
+  pointer-events: none !important;
+}
+.employee-card-input--front {
+  @extend .light-background;
+  width: fit-content !important;
+  display: flex;
+  align-items: center;
+  /* background: theme(colors.grey.mid); */
+  border-right: 0;
+  padding-right: 5px;
+}
+.employee-card-input-error {
+  @extend .light-input-border;
+  @extend .alert-error;
+  @apply mb-lg pl-sm block w-full h-10 outline-none border-2 border-error border-solid bg-white leading-10 text-form-field text-text-primary;
+}
+
+.card-textarea,
+.employee-card-textarea {
+  @extend .light-input-border;
+  @apply block outline-none mt-md mb-lg border w-full border-input-border border-solid bg-white h-24 text-form-field text-text-primary p-sm;
+}
+.employee-card-textarea {
+  @apply w-full;
+}
+
+.citizen-card-input {
+  @extend .light-input-border;
+  @apply mb-lg pl-sm outline-none block border w-full h-10 border-input-border border-solid bg-white leading-10 text-form-field text-text-primary;
+}
+.citizen-card-input--front {
+  @extend .light-background;
+  width: fit-content !important;
+  display: flex;
+  align-items: center;
+  /* background: theme(colors.grey.mid); */
+  border-right: 0;
+  padding-right: 5px;
+}
+
+.break-line {
+  @extend .light-input-border;
+  @apply border-border my-lg;
+}
+
+.primary-label-btn {
+  @extend .light-primary;
+  @apply flex;
+  cursor: pointer;
+  font-weight: 500;
+  width: fit-content;
+  gap: 10px;
+
+  svg {
+    fill: theme(colors.primary.main);
+  }
+}
+
+.digit-form-composer-header {
+  font-size: theme(digitv2.fontSize.heading-l-dt);
+}

package/src/digitv2/components/PageBasedInputV2.scss

@@ -0,0 +1,33 @@
+.digit-page-based-input-wrapper {
+  .digit-submit-bar-container {
+    z-index: 60;
+    @apply p-sm fixed w-full bottom-0 left-0 text-right bg-white;
+    .digit-submit-bar {
+      @apply w-full;
+      height: 2.5rem;
+    }
+  }
+  .digit-page-based-submit-bar {
+    @apply hidden;
+  }
+  label {
+    margin-left: 0 !important;
+  }
+}
+
+@screen dt {
+  .digit-page-based-input-wrapper {
+    .digit-submit-bar {
+      @apply hidden;
+    }
+    .digit-page-based-submit-bar {
+      @apply block;
+    }
+    .digit-card {
+      max-width: 960px;
+    }
+    button {
+      max-width: 240px;
+    }
+  }
+}

package/src/digitv2/components/WhatsNewCardV2.scss

@@ -0,0 +1,13 @@
+.digit-whats-new-card{
+    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.16);
+    @apply rounded bg-white border-primary-main border-l-4 border-solid p-sm;
+    h2{
+        @apply text-body-l text-text-primary font-medium mb-xs;
+    }
+    p{
+        @apply text-form-field text-text-secondary mb-sm;
+    }
+    a{
+        @apply block text-form-field text-primary-main mb-sm
+    }
+}

package/src/digitv2/components/actionLinkV2.scss

@@ -0,0 +1,9 @@
+@import url("../index.scss");
+@import url("../typography.scss");
+
+.digit-action-links {
+  @extend .light-primary;
+  @extend .typography.text-link;
+  @apply text-text-btn mr-lg !important;
+  cursor: pointer;
+}

package/src/digitv2/components/actionbarV2.scss

@@ -0,0 +1,110 @@
+@import url("../index.scss");
+
+.digit-action-bar-wrap {
+  @extend .light-text-color-primary;
+  @extend .light-paper-primary;
+  box-shadow: rgba(0, 0, 0, 0.16) 0 -2px 8px;
+  max-width: 100%;
+  z-index: 100;
+
+  @apply left-0 bottom-0 w-full bg-white py-sm px-sm fixed text-right;
+
+  div {
+    @apply w-full;
+  }
+
+  .digit-menu-wrap {
+    @extend .light-background;
+    @apply absolute bg-white text-left mb-xs z-30 cursor-pointer;
+    bottom: 45px;
+    box-shadow: rgba(0, 0, 0, 0.14) 0 8px 10px 1px, rgba(0, 0, 0, 0.12) 0 3px 14px 2px, rgba(0, 0, 0, 0.2) 0 5px 5px -3px;
+    width: calc(100% - 16px);
+    right: 8px;
+
+    div {
+      @extend .light-primary;
+      @apply h-12 pl-sm py-md text-body-l text-text-primary;
+
+      &:hover {
+        @extend .light-background;
+        @apply bg-grey-mid w-full;
+      }
+    }
+  }
+}
+
+@screen dt {
+  .digit-action-bar-wrap {
+    box-shadow: rgba(0, 0, 0, 0.16) 0 -2px 8px;
+    left: 0;
+    max-width: none;
+    z-index: 999;
+
+    @apply fixed bottom-0 bg-white py-sm pr-lg text-right;
+    /* @extend .light-background; */
+
+    div {
+      width: calc(100% - 16px);
+    }
+
+    .digit-menu-wrap {
+      bottom: 45px;
+      top: unset;
+      box-shadow: rgba(0, 0, 0, 0.14) 0 8px 10px 1px, rgba(0, 0, 0, 0.12) 0 3px 14px 2px, rgba(0, 0, 0, 0.2) 0 5px 5px -3px;
+      @apply absolute h-auto bg-white text-left mb-xs z-30;
+      width: 240px;
+      right: 24px;
+
+      div {
+        @apply h-12 pl-sm py-md text-body-l text-text-primary;
+
+        &:hover {
+          @apply bg-grey-mid w-full;
+          /* @extend .light-background; */
+        }
+      }
+    }
+  }
+}
+
+.digit-action-bar-wrap-registry {
+  div {
+    @apply w-full;
+  }
+  .digit-menu-wrap {
+    @extend .light-background;
+    @apply absolute bg-white text-left mb-xs z-30 cursor-pointer;
+    box-shadow: rgba(0, 0, 0, 0.14) 0 8px 10px 1px, rgba(0, 0, 0, 0.12) 0 3px 14px 2px, rgba(0, 0, 0, 0.2) 0 5px 5px -3px;
+    width: 160px;
+    right: 60px;
+
+    div {
+      @apply h-12 pl-sm py-md text-body-l text-text-primary;
+
+      &:hover {
+        @extend .light-background;
+        @apply bg-grey-mid w-full;
+      }
+    }
+  }
+
+  .digit-search-add {
+    @extend .light-primary;
+    padding: 12px 16px;
+    color: rgb(244, 119, 56);
+    display: flex;
+    cursor: pointer;
+  }
+
+  .digit-search-add-icon {
+    @extend .light-primary-button;
+    background: rgb(244, 119, 56);
+    border-radius: 50%;
+    height: 24px;
+    width: 24px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-left: 10px;
+  }
+}

package/src/digitv2/components/appContainerV2.scss

@@ -0,0 +1,49 @@
+@import url("../index.scss");
+
+.digit-app-container {
+  @extend .light-background;
+  width: 100%;
+  form {
+    .digit-card {
+      max-width: 960px;
+      h2 {
+        @extend .light-text-color-primary;
+        text-align: left;
+      }
+      button {
+        @extend .light-primary-button;
+        max-width: 240px;
+      }
+      .digit-input-otp-wrap,
+      .digit-card-text-button {
+        @extend .light-primary-button;
+        text-align: left;
+      }
+    }
+  }
+}
+
+@screen dt {
+  .digit-employee-app-container {
+    @apply w-full;
+  }
+
+  .digit-app-container {
+    width: 100%;
+    form {
+      .digit-card {
+        max-width: 960px;
+        h2 {
+          text-align: left;
+        }
+        button {
+          max-width: 240px;
+        }
+        .digit-input-otp-wrap,
+        .digit-card-text-button {
+          text-align: left;
+        }
+      }
+    }
+  }
+}

package/src/digitv2/components/backButtonV2.scss

@@ -0,0 +1,26 @@
+@import url("../index.scss");
+
+.digit-back-button {
+  @extend .light-text-color-primary;
+  @extend .light-input-border;
+  width: fit-content;
+  @apply flex items-center cursor-pointer border-b font-rc text-text-btn ml-sm mb-md;
+
+  img {
+    @apply flex;
+  }
+
+  svg {
+    @apply flex;
+  }
+
+  p {
+    @apply flex;
+  }
+}
+
+@screen dt {
+  .digit-back-button {
+    margin-left: 0;
+  }
+}

package/src/digitv2/components/bannerV2.scss

@@ -0,0 +1,120 @@
+@import url("../index.scss");
+
+.digit-banner-success-wrap,
+.digit-banner-emp-success-wrap {
+  @apply block bg-success w-full text-center text-white pt-md pb-sm mb-md;
+
+  header {
+    @apply block mb-sm font-rc font-bold text-heading-xl;
+  }
+
+  div {
+    img {
+      padding: 13.67px;
+      margin-left: auto;
+      margin-right: auto;
+      @apply border border-solid border-white rounded-full h-16 w-16 bg-white mb-md;
+    }
+
+    svg {
+      padding: 13.67px;
+      margin-left: auto;
+      margin-right: auto;
+      @apply border border-solid border-white rounded-full h-16 w-16 bg-white mb-md;
+    }
+
+    svg.payment-svg {
+      border: unset;
+      background-color: unset;
+      @apply rounded-full;
+    }
+
+    h2 {
+      @apply font-bold text-caption-m mb-sm;
+    }
+
+    p {
+      @apply font-bold text-caption-l;
+    }
+  }
+}
+
+.digit-banner-error-wrap,
+.digit-banner-emp-error-wrap {
+  @apply block bg-error w-full text-center text-white pt-md pb-sm mb-md;
+
+
+  header {
+    @apply block mb-sm font-rc font-bold text-heading-xl;
+  }
+
+  img {
+    margin-left: auto;
+    margin-right: auto;
+    padding: 13.67px;
+    @apply border border-solid border-white rounded-full bg-white h-16 w-16 mb-md;
+  }
+
+  svg {
+    margin-left: auto;
+    margin-right: auto;
+    padding: 13.67px;
+    @apply border border-solid border-white rounded-full bg-white h-16 w-16 mb-md;
+  }
+}
+
+@screen dt {
+  .digit-banner-success-wrap {
+    header {
+      @apply text-heading-xl-dt;
+    }
+  }
+  .digit-banner-emp-success-wrap {
+    width: calc(100%);
+    header {
+      @apply text-heading-xl-dt;
+    }
+  }
+
+  .digit-banner-error-wrap {
+    width: 100%;
+    header {
+      @apply text-heading-xl-dt;
+    }
+  }
+
+  .digit-banner-emp-error-wrap {
+    width: calc(100%);
+    header {
+      @apply text-heading-xl-dt;
+    }
+  }
+}
+
+.banner {
+  @apply flex justify-center items-center;
+  height: calc(100vh - 80px);
+  background: linear-gradient(rgba(11, 75, 102, 0.8), rgba(11, 75, 102, 0.8)), var(--banner-url) center center;
+
+  .bannerCard {
+    min-width: 400px;
+  }
+  .bannerLogo {
+    width: 80px;
+    height: 40px;
+    object-fit: contain;
+    padding-right: 10px;
+    margin-right: 10px;
+    border-right: 1px solid theme(colors.text.primary);
+  }
+  .bannerHeader {
+    @apply flex justify-center items-center;
+    margin-bottom: 24px;
+  }
+}
+
+.banner-container {
+  flex-direction: column;
+  justify-content: center;
+  align-items: center !important;
+}

package/src/digitv2/components/bodyContainerV2.scss

@@ -0,0 +1,39 @@
+@import url("../index.scss");
+
+body {
+  background-color: #fafafa;
+}
+
+.body-container {
+  @extend .light-background;
+  @apply h-full min-h-screen overflow-x-hidden;
+}
+
+.body-container::-webkit-scrollbar {
+  display: none;
+}
+
+.h1 {
+  @extend .light-text-color-primary;
+  @apply text-heading-l font-bold mb-md ml-md;
+}
+
+.link-label {
+  @extend .light-primary;
+  @apply block mb-md ml-md cursor-pointer;
+
+  &:hover {
+    @extend .light-text-color-primary;
+  }
+}
+
+@screen dt {
+  .h1 {
+    margin-left: 0;
+    @apply text-heading-l-dt;
+  }
+
+  .link-label {
+    margin-left: 0;
+  }
+}

package/src/digitv2/components/breadCrumbV2.scss

@@ -0,0 +1,34 @@
+@import url("../index.scss");
+@import url("../typography.scss");
+
+.digit-bread-crumb {
+  @extend .light-text-color-secondary;
+  font-size: 14px;
+  display: flex;
+  margin-bottom: 10px;
+  padding: unset;
+}
+
+.digit-bread-crumb--item {
+  margin-left: 5px;
+
+  &:not(:last-child):after {
+    content: "  /";
+  }
+
+  button {
+    outline: none;
+  }
+
+  .last {
+    @extend .light-text-color-primary;
+  }
+
+  span {
+    cursor: pointer;
+  }
+}
+ol,
+ul {
+  list-style: none;
+}

package/src/digitv2/components/breakLineV2.scss

@@ -0,0 +1,6 @@
+@import url("../index.scss");
+
+.digit-break-line {
+  @extend .light-input-border;
+  @apply border-solid border;
+}