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

package/src/digitv2/components/PageBasedInputV2.scss

@@ -1,33 +0,0 @@
-.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

@@ -1,13 +0,0 @@
-.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

@@ -1,9 +0,0 @@
-@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/appContainerV2.scss

@@ -1,49 +0,0 @@
-@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

@@ -1,26 +0,0 @@
-@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

@@ -1,120 +0,0 @@
-@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/breadCrumbV2.scss

@@ -1,34 +0,0 @@
-@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

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

package/src/digitv2/components/cardBasedOptionsV2.scss

@@ -1,46 +0,0 @@
-.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/checkpointV2.scss

@@ -1,71 +0,0 @@
-@import url("../index.scss");
-
-.digit-checkpoint-connect-wrap {
-  padding-bottom: 40px;
-  @apply relative;
-}
-.digit-checkpoint-done {
-  @apply flex items-center;
-
-  h2 {
-    z-index: 1;
-    width: 24px;
-    height: 24px;
-    border-radius: 50%;
-    @apply border-b border-solid border-primary-main bg-primary-main;
-  }
-
-  header {
-    @apply text-heading-s ml-md;
-
-    p {
-      @extend .light-text-color-secondary;
-      margin-top: 4px;
-      @apply text-heading-s;
-    }
-  }
-}
-
-.digit-checkpoint {
-  @apply flex items-center;
-
-  h2 {
-    z-index: 1;
-    width: 24px;
-    height: 24px;
-    border-radius: 50%;
-    --text-opacity: 1;
-    @apply border-b border-solid border-border bg-border;
-  }
-
-  header {
-    @apply text-heading-s ml-md;
-
-    p {
-      @extend .light-text-color-secondary;
-      margin-top: 4px;
-      @apply text-heading-s;
-    }
-  }
-}
-
-.digit-checkpoint-connect {
-  margin-left: 12px;
-  margin-top: 22px;
-  @apply absolute top-0 left-0 h-full border-l border-solid border-border;
-}
-
-.digit-checkpoint-comments-wrap {
-  max-width: 560px;
-  @apply bg-grey-mid p-sm mt-sm;
-
-  h4 {
-    @extend .light-text-color-primary;
-    @apply text-heading-s;
-  }
-
-  p {
-    @extend .light-text-color-secondary;
-    @apply text-body-s-dt;
-  }
-}

package/src/digitv2/components/collapseAndExpandGroups.scss

@@ -1,60 +0,0 @@
-@import url("../../digitv2/index.scss");
-
-.digit-expand-collapse-wrapper {
-  display: flex;
-  flex-direction: column;
-  margin-top: 1rem;
-}
-
-.digit-expand-collapse-header {
-  background-color: #f2f2f2;
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  align-items: center;
-  padding: 12px;
-  position: relative;
-  font-weight: bolder;
-  border: 1px solid #828282;
-  border-radius: 4px;
-}
-
-.digit-icon-toggle {
-  position: absolute;
-  right: 10px;
-  top: 50%;
-  transform: translate(0%, -50%);
-  cursor: pointer;
-  span{
-    display: inline-flex;
-    align-items: center;
-
-    h5{
-      color: theme(colors.primary.main);
-      display: inline;
-    }
-  }
-}
-
-.digit-expand-collapse-header .label {
-  display: block;
-  text-align: left;
-}
-
-.digit-expand-collapse-header .value {
-  display: block;
-  text-align: right;
-  margin-right: 2rem;
-}
-
-.digit-toggling-wrapper.digit-collapse {
-  flex: none;
-  overflow: hidden;
-  height: 0;
-  transition: 0.2s ease-in-out;
-}
-
-.digit-toggling-wrapper {
-  flex: 1;
-  transition: 0.2s ease-in-out;
-  box-sizing: border-box;
-}

package/src/digitv2/components/dateWrapV2.scss

@@ -1,17 +0,0 @@
-@import url("../typography.scss");
-
-.digit-date-picker {
-  @apply relative w-full cursor-pointer;
-  .citizen {
-    max-width: 540px;
-  }
-  .digit-employee-card-input {
-    @extend .typography.text-body-s;
-    @extend .light-input-border;
-    @apply mb-lg pl-sm outline-none block w-full h-10 bg-white leading-10 text-form-field;
-    width: calc(100%-62px);
-    padding-right: 9px;
-    border: 1px solid theme(digitv2.lightTheme.text-secondary);
-    color: theme(digitv2.lightTheme.text-primary);
-  }
-}

package/src/digitv2/components/detailsCardV2.scss

@@ -1,17 +0,0 @@
-.digit-details-container {
-  @apply flex flex-col m-sm pt-md pb-md pl-sm pr-sm bg-white rounded;
-  border: 2px solid #fff;
-  &.digit-selected {
-    border: 2px solid #f47738;
-  }
-  .digit-detail {
-    @apply grid grid-cols-2 gap-2 items-baseline;
-    .digit-label {
-      width: 138px;
-      @apply font-bold text-heading-s text-text-primary mb-md;
-    }
-    .digit-name {
-      @apply pt-md;
-    }
-  }
-}

package/src/digitv2/components/displayPhotosV2.scss

@@ -1,33 +0,0 @@
-.digit-photos-wrap {
-  max-width: 640px;
-  @apply flex pt-md;
-
-  img {
-    width: calc(33% - 9.333px);
-    margin-right: 14px;
-  }
-
-  svg {
-    width: calc(33% - 9.333px);
-    margin-right: 14px;
-  }
-
-  .last {
-    width: calc(33% - 9.333px);
-  }
-}
-
-.digit-image-pdf-icon {
-  @apply flex flex-wrap justify-start content-center;
-  .digit-url {
-    min-width: 100px;
-    margin-right: 10px;
-    max-width: 100px;
-    height: auto;
-    .digit-icon {
-      background: #f6f6f6;
-      padding: 8px;
-      width: 100px;
-    }
-  }
-}

package/src/digitv2/components/footerV2.scss

@@ -1,55 +0,0 @@
-.digit-home-footer {
-  &.citizen {
-    @apply flex w-full h-10 bg-grey-bg pb-md pt-sm justify-center;
-    img {
-      @apply ml-sm;
-      height: 1.2em;
-      cursor: pointer;
-    }
-  }
-}
-
-.digit-employee .digit-home-footer {
-  &.citizen {
-    @apply fixed bottom-0;
-  }
-}
-.digit-fill-path-primary-main {
-  path {
-    fill: theme(colors.primary.main);
-  }
-}
-
-.digit-home-footer {
-  &.sidebar {
-    width: 200px;
-    margin-left: 50px;
-    margin-top: 24px;
-    margin-bottom: 16px;
-    position: relative;
-  }
-}
-
-.digit-footer {
-  @apply flex h-4 mb-sm;
-  img {
-    @apply mr-sm;
-  }
-}
-
-.digit-home-footer {
-  &.employee {
-    @apply flex h-10 bg-grey-bg pb-md pt-sm justify-center w-full;
-    img {
-      height: 100%;
-    }
-  }
-}
-.digit-home-footer {
-  &.employee-login {
-    @apply flex fixed bottom-0 h-10 bg-grey-bg pb-md pt-sm justify-center w-full;
-    img {
-      @apply ml-sm;
-    }
-  }
-}

package/src/digitv2/components/headerBarV2.scss

@@ -1,34 +0,0 @@
-@import url("../index.scss");
-@import url("../typography.scss");
-
-.digit-header-wrap {
-  @apply flex mb-md;
-
-  .digit-header-start {
-    margin-right: auto;
-  }
-
-  .digit-header-content {
-  }
-
-  .digit-header-end {
-    margin-left: auto;
-  }
-}
-
-@screen dt {
-  .digit-header-wrap {
-    @apply flex mb-md;
-
-    .digit-header-start {
-      margin-right: auto;
-    }
-
-    .digit-header-content {
-    }
-
-    .digit-header-end {
-      margin-left: auto;
-    }
-  }
-}

package/src/digitv2/components/headerV2.scss

@@ -1,12 +0,0 @@
-@import url("../index.scss");
-@import url("../typography.scss");
-
-.digit-header-content {
-  @extend .light-text-color-primary;
-  @apply font-bold mb-md;
-
-  &.label {
-    margin: 0;
-    margin-bottom: 0.25rem;
-  }
-}

package/src/digitv2/components/keynoteV2.scss

@@ -1,35 +0,0 @@
-.digit-key-note-pair {
-  @apply mb-md;
-
-  h3 {
-    margin-bottom: 4px;
-    @apply font-bold text-text-primary text-heading-s;
-  }
-
-  p {
-    @apply text-text-primary text-body-l;
-  }
-  .digit-key-note-container {
-    display: inline-flex;
-    .digit-unmask-container {
-      display: inline-flex;
-      width: fit-content;
-      margin-left: 10px;
-      margin-top: 5px;
-    }
-  }
-  .digit-caption {
-    @apply text-body-l text-text-secondary;
-  }
-}
-
-@screen dt {
-  .digit-key-note-pair {
-    p {
-      @apply text-body-l-dt;
-    }
-    .digit-caption {
-      @apply text-body-l-dt text-text-secondary;
-    }
-  }
-}