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

package/src/digitv2/components/cardV2.scss

@@ -1,383 +0,0 @@
-@import url("../index.scss");
-
-.digit-card {
-  @apply bg-white m-sm px-md pt-md pb-lg shadow-card;
-  @extend .light-paper-primary;
-  border-radius: 4px;
-  max-width: 960px;
-
-  .digit-card-header {
-    @extend .light-primary;
-    @apply text-heading-xl font-bold font-rc align-middle text-left mb-md;
-  }
-
-  .digit-card-sub-header {
-    @extend .light-primary;
-    @apply text-caption-xl font-bold align-middle text-left mb-sm;
-  }
-
-  .digit-card-caption {
-    @extend .light-text-color-secondary;
-    @apply text-caption-xl mb-sm;
-  }
-
-  .digit-card-text {
-    @extend .light-text-color-secondary;
-    @apply text-body-l align-middle text-left mb-lg;
-
-    span {
-      @extend .light-text-color-primary;
-    }
-  }
-
-  .digit-card-text-primary {
-    @extend .light-primary;
-    @apply text-body-l;
-  }
-
-  .digit-card-text-button {
-    @extend .light-primary;
-    @apply text-text-btn;
-  }
-
-  .digit-card-label {
-    @extend .light-primary;
-    @apply text-legend mb-sm;
-  }
-
-  .digit-card-label-error {
-    @extend .alert-error;
-    @apply block text-body-s text-error mb-md;
-  }
-
-  .digit-card-label-desc {
-    @extend .light-text-color-secondary;
-    @apply font-bold text-heading-s mb-md;
-  }
-
-  .digit-card-link {
-    @extend .light-primary;
-    @apply block text-center text-link mt-md cursor-pointer;
-  }
-}
-
-.digit-validation-error {
-  @extend .alert-error;
-  @apply block text-body-s text-error;
-}
-
-.digit-docsDescription {
-  @extend .light-text-color-primary;
-}
-
-.digit-field-container {
-  @apply flex  items-center;
-}
-
-.digit-employee-card {
-  @extend .light-paper-primary;
-  @apply bg-white shadow-card p-md mb-xl;
-  border-radius: 4px;
-
-  .digit-card-header {
-    @extend .light-primary;
-    @apply text-heading-xl font-bold font-rc align-middle text-left mb-md;
-  }
-
-  .digit-card-sub-header,
-  .digit-employee-card-sub-header {
-    @extend .light-primary;
-    @apply text-caption-xl font-bold align-middle text-left;
-  }
-
-  .digit-card-section-header {
-    @apply text-heading-m font-bold;
-  }
-
-  .digit-card-section-sub-text {
-    @extend .light-primary;
-    @apply text-body-s;
-  }
-
-  .digit-card-caption {
-    @extend .light-text-color-secondary;
-    @apply text-caption-xl mb-sm;
-  }
-
-  .digit-card-text {
-    @extend .light-text-color-secondary;
-    @apply text-body-l align-middle text-left mb-lg;
-
-    span {
-      @extend .light-text-color-primary;
-    }
-  }
-
-  .card-text-primary {
-    @extend .light-primary;
-    @apply text-body-l;
-  }
-
-  .card-text-button {
-    @extend .light-primary;
-    @apply text-text-btn;
-  }
-
-  .card-label {
-    @extend .light-primary;
-    @apply text-legend mb-md;
-  }
-
-  .card-label-error {
-    @extend .alert-error;
-    @apply block text-body-s text-error mb-md;
-  }
-
-  .card-label-desc {
-    @extend .light-text-color-secondary;
-    @apply font-bold text-heading-s mb-md;
-  }
-
-  .card-link {
-    @extend .light-primary;
-    @apply block text-center text-link text-link-normal mt-md;
-  }
-
-  .card-search-heading {
-    margin-right: 0px !important;
-    margin-left: 0px !important;
-    margin-bottom: 0px !important;
-    padding-bottom: 0px;
-    padding-left: 25px;
-  }
-}
-
-.header-wrap {
-  @apply flex mb-md;
-
-  .header-start {
-    margin-right: auto;
-  }
-
-  .header-content {
-  }
-
-  .header-end {
-    margin-left: auto;
-  }
-}
-
-.card-emp {
-  @extend .card;
-  padding-right: 0;
-  padding-top: 0;
-  padding-left: 0;
-  @apply bg-white m-sm;
-  @extend .light-background;
-}
-
-.submit-bar {
-  @extend .light-primary-button;
-  @apply h-10 text-center w-full outline-none;
-  box-shadow: inset 0px -2px 0px theme(colors.text.primary);
-  cursor: pointer;
-
-  &:focus {
-    @apply outline-none;
-  }
-
-  header {
-    @apply font-rc font-medium text-legend text-white leading-10;
-  }
-}
-
-.submit-bar-disabled {
-  @apply h-10 bg-primary-main text-center w-full outline-none opacity-50;
-
-  &:focus {
-    @apply outline-none;
-  }
-
-  header {
-    @apply font-rc font-medium text-legend text-white leading-10;
-  }
-}
-
-@screen dt {
-  .submit-bar,
-  .submit-bar-disabled {
-    width: 240px;
-  }
-
-  .card {
-    display: flex;
-    flex-direction: column;
-
-    .card-header {
-      @apply text-heading-xl-dt;
-    }
-
-    .card-sub-header {
-      @apply text-heading-l-dt;
-    }
-
-    .card-caption {
-      @apply text-caption-xl-dt;
-    }
-
-    .card-text,
-    .card-text-primary {
-      @apply text-body-l-dt;
-    }
-
-    .card-link {
-      @apply text-left;
-    }
-  }
-
-  .digit-employee-card {
-    @apply mb-md mx-md !important;
-
-    &.digit-filter {
-      margin-left: auto;
-      margin-right: auto;
-    }
-
-    .digit-card-header {
-      @apply text-heading-xl-dt;
-    }
-
-    .digit-card-sub-header {
-      @apply text-heading-l-dt;
-    }
-
-    .digit-employee-card-sub-header {
-      margin-bottom: 40px;
-      @apply text-heading-l-dt;
-    }
-
-    .digit-card-section-header {
-      margin-bottom: 40px;
-      @apply text-heading-m-dt;
-    }
-
-    .digit-card-section-sub-text {
-      @apply text-text-primary text-body-s-dt;
-    }
-
-    .digit-card-search-heading {
-      margin-right: 0px !important;
-      margin-left: 0px !important;
-      margin-bottom: 0px !important;
-      padding-bottom: 0px;
-      padding-left: 25px;
-    }
-
-    .digit-card-caption {
-      @apply text-caption-xl-dt;
-    }
-
-    .digit-card-text,
-    .digit-card-text-primary {
-      @apply text-body-l-dt;
-    }
-
-    .digit-card-link {
-      @apply text-left;
-    }
-
-    .digit-label-field-pair {
-      @apply flex ;
-
-      h2 {
-        width: 30%;
-      }
-
-      .field {
-        width: 50%;
-        margin-right: 20%;
-        .field {
-          margin-right: unset;
-        }
-      }
-    }
-
-    .digit-field-container {
-      span {
-        border: 2px solid black;
-        background: rgb(247, 247, 247);
-        width: 40px;
-        height: 40px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        margin-top: -16px;
-        border-right: none;
-      }
-    }
-  }
-
-  .digit-header-wrap {
-    @apply flex mb-md;
-
-    .header-start {
-      margin-right: auto;
-    }
-
-    .header-content {
-    }
-
-    .header-end {
-      margin-left: auto;
-    }
-  }
-}
-
-.digit-card-section-header {
-  @apply text-text-primary text-heading-m font-bold;
-}
-
-.digit-card-search-heading {
-  margin-right: 0px !important;
-  margin-left: 0px !important;
-  margin-bottom: 0px !important;
-  padding-bottom: 0px;
-  padding-left: 25px;
-}
-
-.digit-card-label-error {
-  @extend .alert-error;
-  @apply block text-body-s text-error mb-md;
-}
-
-.digit-employee-card-override {
-  margin-left: 0px !important;
-}
-
-.digit-employee-application-details {
-  display: flex !important;
-  justify-content: space-between !important;
-  max-height: 60px !important;
-  height: 60px !important;
-}
-.digit-employee-main-application-details {
-  padding: 10px !important;
-}
-
-.digit-employee-mulitlink-main-div {
-  @extend .light-primary;
-  z-index: 10 !important;
-  max-width: 41% !important;
-}
-
-.digit-employee-download-btn-className {
-  position: unset !important;
-  display: flex !important;
-  justify-content: flex-end !important;
-}
-
-.digit-employee-options-btn-className {
-  position: unset !important;
-  margin: 0 !important;
-  width: 100% !important;
-}

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;
-    }
-  }
-}