@selco/installation-ui-css 1.0.0

package/src/digitv2/components/cardV2.scss

@@ -0,0 +1,385 @@
+@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 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 {
+    @extend .light-primary;
+    @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 items-center;
+
+      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 {
+  @extend .light-text-color-primary;
+  @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,61 @@
+@import url("../index.scss");
+
+.digit-checkbox-wrap {
+  @apply flex mb-md relative items-baseline;
+
+  input {
+    width: 38px;
+    height: 38px;
+    @apply opacity-0 absolute top-0 left-0 z-10;
+    @extend .light-input-border;
+  }
+
+  .input-emp {
+    @extend input;
+    width: 24px;
+    height: 24px;
+  }
+
+  .digit-custom-checkbox {
+    width: 38px;
+    height: 38px;
+    @apply absolute top-0 left-0 border border-solid border-input-border z-0;
+    @extend .light-input-border;
+
+    img {
+      @apply opacity-0;
+    }
+
+    svg {
+      @apply opacity-0;
+    }
+  }
+
+  .digit-custom-checkbox-emp {
+    @extend .digit-custom-checkbox;
+    width: 24px;
+    height: 24px;
+  }
+
+  input:checked ~ .digit-custom-checkbox,
+  input:hover ~ .digit-custom-checkbox {
+    @apply border-2 border-primary-main;
+    @extend .light-input-border;
+  }
+
+  input:checked ~ .digit-custom-checkbox img {
+    @apply opacity-100;
+  }
+
+  input:checked ~ .digit-custom-checkbox svg {
+    @apply opacity-100;
+    width: 35px;
+    height: 35px;
+  }
+
+  .label {
+    margin-left: 56px;
+    @apply text-form-field text-text-primary;
+    @extend .light-text-color-primary;
+  }
+}

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 {
+      margin-top: 4px;
+      @extend .light-text-color-secondary;
+      @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 {
+      margin-top: 4px;
+      @extend .light-text-color-secondary;
+      @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,12 @@
+.digit-date-picker {
+  @apply relative w-full cursor-pointer;
+  .citizen {
+    max-width: 540px;
+  }
+  .digit-employee-card-input {
+    @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;
+    @extend .light-input-border;
+    width: calc(100%-62px);
+    padding-right: 9px;
+  }
+}

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

package/src/digitv2/components/headerV2.scss

@@ -0,0 +1,6 @@
+@import url("../index.scss");
+
+.digit-header {
+  @extend .light-text-color-primary;
+  @apply text-heading-l font-bold mb-md ml-md;
+}

package/src/digitv2/components/infoBannerV2.scss

@@ -0,0 +1,37 @@
+@import url("../index.scss");
+
+.digit-info-banner-wrap {
+  @apply bg-opacity-25 m-sm p-md;
+  max-width: 960px;
+
+  @extend .alert-info-bg;
+  border-radius: 4px;
+  svg {
+    margin-top: 5px;
+    @apply rounded-full;
+  }
+
+  div {
+    @apply flex items-center;
+  }
+
+  h2 {
+    @apply text-heading-m text-link-normal mb-md font-bold ml-sm;
+  }
+
+  p {
+    @apply text-body-l text-link-normal whitespace-pre-line;
+  }
+}
+
+@screen dt {
+  .digit-info-banner-wrap {
+    h2 {
+      @apply text-heading-m-dt;
+    }
+
+    p {
+      @apply text-body-l-dt;
+    }
+  }
+}

package/src/digitv2/components/keynoteV2.scss

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