@djb25/digit-ui-css 1.0.0 → 1.0.1

package/src/components/sidebar.scss

@@ -1,141 +0,0 @@
-.sidebar-link:hover .arrow {
-  display: block;
-}
-
-.hidden-arrow {
-  display: none;
-}
-.new-dropdown-link{
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 10px 15px 15px !important;
-  color: #fff;
-  font-size: 1rem;
-  font-weight: 500;
-  text-decoration: none; 
-  margin-left: 0px !important;
-  height: 3rem !important; 
-  margin-left: 1rem;
-  margin-top: 0.5rem;
-}
-.selected {
-  background-color: #e0e0e0; /* Change this to your desired highlight color */
-}
-
-.selected-item {
-  background-color: #e0e0e0; /* Set your desired background color for the selected item */
-  color: #000; /* Set your desired text color for the selected item */
-  /* Add any other styles you want to apply to the selected item */
-}
-/* Style the container that acts as the viewport */
-.new-sidebar {
-  height: 90%; /* Set a fixed height for the viewport */
-  overflow: scroll; /* Hide the scrollbar */
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-
-  &::-webkit-scrollbar {
-    -ms-overflow-style: none;  /* IE and Edge */
-    scrollbar-width: none;  /* Firefox */
-  }
-}
-
-/* Style the content inside the viewport */
-.new-sidebar > div {
-  height: auto; /* Allow content to expand vertically */
-  overflow-y: auto; /* Enable vertical scrolling */
-  overflow-x: hidden;
-  padding-right: 2px; /* Add space for the hidden scrollbar (adjust as needed) */
-}
-
-/* Style the scrollbar thumb to make it transparent */
-.new-sidebar > div::-webkit-scrollbar-thumb {
-  background: transparent;
-}
-.link-icon{
-  width: 24px !important;
-  height: 26px !important;
-}
-.link-icon svg{
-  width: 24px !important;
-  height: 26px !important;
-}
-
-.employee-search-input{
-  width: 150px;
-  background-color: transparent;
-  &.nav-bar {
-    color:#fff;
-  }
-  &.nav-bar::placeholder {
-      color: #fff;
-  }
-}
-
-.search-icon-wrapper-new {
-  margin-left: 0.35rem;
-}
-
-.search-icon-wrapper-new svg{
-          fill: theme(colors.white) !important;
-          width: 21px;
-          height: 21px;
-}
-.search-icon-wrapper-new svg path {
-            fill: theme(colors.white) !important;
-          }
-
-.submenu-container {
-  overflow: scroll; 
-  margin-bottom: 1rem;
-  /* Hide the scrollbar */
-  &::-webkit-scrollbar {
-    display: none;
-  }
-
-  &.level-2 {
-    border-left: 1px solid;
-    margin-left: 2rem;
-  }
-  &.level-1 {
-    margin-left: -1.5rem;
-  }
-}
-
-.actions {
-  &.level-0 {
-    margin-left: 0.4rem;
-  }
-  &.selected-action-level-0 {
-    color: theme(colors.primary.main) !important;
-  }
-  &.selected-action-level-1 {
-    border-left:4px solid theme(colors.primary.main);
-    margin-left: -0.6rem;
-    height: 2rem;
-    color: theme(colors.primary.main) !important;
-  }
-
-  &.default-0 {
-    &.active {
-
-    }
-  }
-  &.default-1 {
-    margin-left: -0.6rem;
-    height: 2rem;
-    width: 111% !important;
-  }
-
-
-  &.custom {
-    margin-left: 0.3rem;
-  }
-  &:hover {
-    background-color: #6A8E9D;
-    opacity: 0.8;
-  }
-}

package/src/digitv2/components/ErrorMessage.scss

@@ -1,6 +0,0 @@
-@import url("../index.scss");
-
-.digit-error-message {
-  @extend .alert-error;
-  @apply block text-body-s mb-md;
-}

package/src/digitv2/components/FormComposerV2.scss

@@ -1,120 +0,0 @@
-@import url("../index.scss");
-
-.field-container {
-  display: flex;
-  align-items: center;
-  max-width: 540px;
-  @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 {
-  @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;
-  @extend .light-input-border;
-}
-.text-input-width {
-  max-width: 540px;
-}
-
-.text-input {
-  @apply relative w-full;
-  input {
-    background-color: transparent;
-    &:hover {
-      @apply border-2 border-solid border-primary-main;
-      @extend .light-input-border;
-    }
-  }
-}
-.employee-card-input-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;
-  @extend .light-input-border;
-  @extend .alert-error;
-}
-.card-input-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;
-  @extend .light-input-border;
-  @extend .alert-error;
-}
-
-.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;
-}
-.employee-card-input:disabled {
-  @apply border-grey-dark text-grey-dark !important;
-  pointer-events: none !important;
-  @extend .light-input-border;
-  @extend .light-text-color-disabled;
-}
-.employee-card-input--front {
-  width: fit-content !important;
-  display: flex;
-  align-items: center;
-  /* background: theme(colors.grey.mid); */
-  @extend .light-background;
-  border-right: 0;
-  padding-right: 5px;
-}
-.employee-card-input-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;
-  @extend .light-input-border;
-  @extend .alert-error;
-}
-
-.card-textarea,
-.employee-card-textarea {
-  @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;
-  @extend .light-input-border;
-}
-.employee-card-textarea {
-  @apply w-full;
-}
-
-.citizen-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;
-}
-.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 {
-  @apply flex;
-  gap: 10px;
-
-  svg {
-    fill: theme(colors.primary.main);
-  }
-
-  @extend .light-primary;
-  cursor: pointer;
-  font-weight: 500;
-  width: fit-content;
-}
-
-.digit-form-composer-header{
-   font-size:theme(digitv2.fontSize.heading-l-dt);
-}

package/src/digitv2/components/actionLinkV2.scss

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

package/src/digitv2/components/actionbarV2.scss

@@ -1,110 +0,0 @@
-@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 {
-    @apply absolute bg-white text-left mb-xs z-30 cursor-pointer;
-    @extend .light-background;
-    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 {
-      @apply h-12 pl-sm py-md text-body-l text-text-primary;
-      @extend .light-primary;
-
-      &:hover {
-        @apply bg-grey-mid w-full;
-        @extend .light-background;
-      }
-    }
-  }
-}
-
-@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 {
-    @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;
-    @extend .light-background;
-
-    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-search-add {
-    padding: 12px 16px;
-    @extend .light-primary;
-    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

@@ -1,55 +0,0 @@
-@import url("../index.scss");
-
-.app-container {
-  @extend .light-background;
-  width: 100%;
-  form {
-    .card {
-      max-width: 960px;
-      h2 {
-        @extend .light-text-color-primary;
-        text-align: left;
-      }
-      .field-container {
-        max-width: 540px;
-      }
-      button {
-        @extend .light-primary-button;
-        max-width: 240px;
-      }
-      .input-otp-wrap,
-      .card-text-button {
-        @extend .light-primary-button;
-        text-align: left;
-      }
-    }
-  }
-}
-
-@screen dt {
-  .employee-app-container {
-    @apply w-full;
-  }
-
-  .app-container {
-    width: 100%;
-    form {
-      .card {
-        max-width: 960px;
-        h2 {
-          text-align: left;
-        }
-        .field-container {
-          max-width: 540px;
-        }
-        button {
-          max-width: 240px;
-        }
-        .input-otp-wrap,
-        .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/bodyContainerV2.scss

@@ -1,39 +0,0 @@
-@import url("../index.scss");
-
-body {
-  @extend .light-background;
-}
-
-.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

@@ -1,31 +0,0 @@
-@import url("../index.scss");
-
-.digit-bread-crumb {
-  @extend .light-text-color-secondary;
-  font-size: 14px;
-  display: flex;
-  margin-bottom: 10px;
-}
-.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 {
-  @apply border-solid border-2;
-  @extend .light-input-border;
-}

package/src/digitv2/components/buttonsV2.scss

@@ -1,40 +0,0 @@
-@import url("../index.scss");
-
-.digit-button-primary {
-  height: fit-content;
-  @extend .light-primary-button;
-  @apply text-center cursor-pointer outline-none px-lg;
-
-  &.disabled {
-    opacity: 0.5;
-  }
-  &:focus {
-    @apply outline-none;
-  }
-
-  h2 {
-    @apply font-rc font-medium text-legend text-white;
-  }
-}
-
-.digit-button-secondary {
-  height: fit-content;
-  @extend .light-paper-secondary;
-  @apply text-center cursor-pointer border-primary-main border-b-2 border-solid outline-none px-lg;
-
-  &:focus {
-    @apply outline-none;
-  }
-
-  h2 {
-    @extend .light-primary;
-    @apply font-rc font-medium text-legend;
-  }
-  .disabled {
-    opacity: 0.5;
-  }
-}
-
-.submit-bar:focus {
-  @apply outline-none !important;
-}