@egovernments/digit-ui-components-css 0.0.1-pucar.1

package/src/digitv2/components/cardV2.scss

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

@@ -0,0 +1,80 @@
+@import url("../index.scss");
+
+.digit-checkbox-container {
+  @apply flex mb-md relative;
+  gap: theme(digitv2.spacers.spacer4);
+
+  input {
+    @apply opacity-0 absolute cursor-pointer z-10;
+    @extend .light-input-border;
+    width: theme(digitv2.spacers.spacer8);
+    height: theme(digitv2.spacers.spacer8);
+    left: -15%;
+  }
+
+  .input-emp {
+    @extend input ;
+  }
+
+  .digit-custom-checkbox {
+    @apply flex items-center border border-solid border-text-secondary justify-center;
+    width: theme(digitv2.spacers.spacer6);
+    height: theme(digitv2.spacers.spacer6);
+
+    img,
+    svg {
+      @apply opacity-0;
+    }
+
+    &:hover {
+      @apply border-2 ;
+      border-color: theme(digitv2.lightTheme.primary-1);
+    }
+  }
+
+  .digit-custom-checkbox-emp {
+    @extend .digit-custom-checkbox;
+  }
+
+  input:hover~.digit-custom-checkbox {
+    @apply border-2;
+    border-color: theme(digitv2.lightTheme.primary-1);
+  }
+
+  input:checked~.digit-custom-checkbox {
+    border: 0.125rem solid theme(digitv2.lightTheme.primary-1);
+  }
+
+
+  input:checked~.digit-custom-checkbox img {
+    @apply opacity-100;
+  }
+
+  input:checked~.digit-custom-checkbox svg {
+    @apply opacity-100;
+    width: theme(digitv2.spacers.spacer4);
+    height: theme(digitv2.spacers.spacer4);
+  }
+
+  .label {
+    @extend .typography.body-s;
+    @apply text-left;
+    word-break: break-word;
+    letter-spacing: theme(digitv2.spacers.spacer0);
+    color: theme(digitv2.lightTheme.text-primary);
+  }
+
+  &.disabled {
+    .label {
+      color: theme(digitv2.lightTheme.text-disabled);
+    }
+
+    .digit-custom-checkbox {
+      border: 0.063rem solid theme(digitv2.lightTheme.text-disabled);
+    }
+
+    input:checked~.digit-custom-checkbox {
+      border: 0.125rem solid theme(digitv2.lightTheme.text-disabled);
+    }
+  }
+}

package/src/digitv2/components/checkpointV2.scss

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

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

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

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

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