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

package/src/digitv2/components/popUpV2.scss

@@ -0,0 +1,309 @@
+.digit-popup-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(11, 12, 12, 0.7); 
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 9999; 
+  backdrop-filter: blur(2px); 
+  -webkit-backdrop-filter: blur(2px); 
+
+  .digit-popup-wrapper {
+    @apply w-full h-auto flex-col fixed;
+    z-index: 10000;
+    background-color: theme(digitv2.lightTheme.paper-primary);
+    border-radius: theme(digitv2.spacers.spacer1);
+    box-shadow: theme(digitv2.spacers.spacer0) 0.063rem 0.125rem theme(digitv2.spacers.spacer0) #00000029;
+    display: flex;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  
+    @media (min-width: 48rem) {
+      max-height: 86%;
+      max-width: 51%;
+    }
+  
+    @media (min-width: 30.063rem) and (max-width: 47.938rem) {
+      max-height: 82%;
+      max-width: 74%;
+    }
+  
+    @media (max-width: 30rem) {
+      max-height: 80%;
+      max-width: 91%;
+    }
+  
+    &.alert {
+      text-align: center;
+    }
+  
+    .digit-popup-close {
+      @apply items-center cursor-pointer absolute;
+      display: flex;
+      justify-content: flex-end;
+      width: theme(digitv2.spacers.spacer6);
+      height: theme(digitv2.spacers.spacer6);
+  
+      @media (min-width: 48rem) {
+        top: theme(digitv2.spacers.spacer3);
+        right: theme(digitv2.spacers.spacer3);
+      }
+  
+      @media (min-width: 30.063rem) and (max-width: 47.938rem) {
+        top: 0.625rem;
+        right: 0.625rem;
+      }
+  
+      @media (max-width: 30rem) {
+        top: theme(digitv2.spacers.spacer2);
+        right: theme(digitv2.spacers.spacer2);
+      }
+  
+  
+      svg {
+        flex-shrink: 0;
+  
+        @media (min-width: 48rem) {
+          width: theme(digitv2.spacers.spacer7) !important;
+          height: theme(digitv2.spacers.spacer7) !important;
+        }
+  
+      }
+    }
+  
+    .digit-popup-header {
+      @apply flex-col;
+      display: flex !important;
+      gap: theme(digitv2.spacers.spacer4);
+  
+      .digit-popup-icon-header-container {
+        display: flex !important;
+        gap: theme(digitv2.spacers.spacer2);
+  
+        svg {
+          flex-shrink: 0;
+        }
+  
+        .digit-popup-heading-subheading-wrap {
+          @apply flex-col;
+          display: flex !important;
+          gap: theme(digitv2.spacers.spacer1);
+          color: theme(digitv2.lightTheme.text-primary);
+  
+          .digit-popup-heading {
+            @extend .typography.heading-l;
+            line-height: normal;
+          }
+  
+          .digit-popup-subheading {
+            @extend .typography.caption-s;
+          }
+        }
+  
+        .digit-popup-description {
+          @extend .typography.body-l;
+          color: theme(digitv2.lightTheme.text-primary);
+        }
+      }
+  
+      &.with-shadow {
+        box-shadow: theme(digitv2.spacers.spacer0) 0.063rem 0.125rem theme(digitv2.spacers.spacer0) #00000026;
+      }
+  
+      @media (min-width: 48rem) {
+        padding: theme(digitv2.spacers.spacer6);
+        padding-bottom: theme(digitv2.spacers.spacer0);
+  
+        &.with-shadow {
+          padding-bottom: theme(digitv2.spacers.spacer6);
+        }
+      }
+  
+      @media (min-width: 30.063rem) and (max-width: 47.938rem) {
+        padding: theme(digitv2.spacers.spacer5);
+        padding-bottom: theme(digitv2.spacers.spacer0);
+  
+        &.with-shadow {
+          padding-bottom: theme(digitv2.spacers.spacer5);
+        }
+      }
+  
+      @media (max-width: 30rem) {
+        padding: theme(digitv2.spacers.spacer4);
+        padding-bottom: theme(digitv2.spacers.spacer0);
+  
+        &.with-shadow {
+          padding-bottom: theme(digitv2.spacers.spacer4);
+        }
+      }
+  
+    }
+  
+    .digit-popup-children-wrap {
+      @apply overflow-hidden overflow-y-auto flex-col;
+      display: flex;
+      flex: 1;
+  
+      &.inline {
+        flex-direction: row;
+      }
+  
+      @media (min-width: 48rem) {
+        gap: theme(digitv2.spacers.spacer6);
+        padding: theme(digitv2.spacers.spacer6) theme(digitv2.spacers.spacer6) theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer6);
+  
+        &.with-shadow,
+        &.without-footer{
+          padding: theme(digitv2.spacers.spacer6);
+        }
+  
+      }
+  
+      @media (min-width: 30.063rem) and (max-width: 47.938rem) {
+        gap: theme(digitv2.spacers.spacer5);
+        padding: theme(digitv2.spacers.spacer5) theme(digitv2.spacers.spacer5) theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer5);
+      
+        &.with-shadow,
+        &.without-footer{
+          padding: theme(digitv2.spacers.spacer5);
+        }
+      
+      }
+  
+      @media (max-width: 30rem) {
+        gap: theme(digitv2.spacers.spacer4);
+        padding: theme(digitv2.spacers.spacer4) theme(digitv2.spacers.spacer4) theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer4);
+      
+        &.with-shadow,
+        &.without-footer{
+          padding: theme(digitv2.spacers.spacer4);
+        }
+      }
+    }
+  
+    .digit-popup-footer {
+      @apply flex-wrap;
+      display: flex;
+      gap: theme(digitv2.spacers.spacer4);
+  
+      &.with-shadow {
+        box-shadow: theme(digitv2.spacers.spacer0) -0.063rem 0.125rem theme(digitv2.spacers.spacer0) #00000026;
+      }
+  
+      @media (min-width: 48rem) {
+        padding: theme(digitv2.spacers.spacer6);
+      }
+  
+      @media (min-width: 30.063rem) and (max-width: 47.938rem) {
+        @apply w-full;
+        padding: theme(digitv2.spacers.spacer5);
+      }
+  
+      @media (max-width: 30rem) {
+        @apply flex-col;
+        padding: theme(digitv2.spacers.spacer4);
+      }
+    }
+  
+    .digit-popup-footer-buttons {
+      margin-left: auto;
+      display: flex;
+      gap: theme(digitv2.spacers.spacer4);
+      @apply max-w-full flex-wrap;
+  
+      @media (min-width: 30.063rem) and (max-width: 47.938rem) {
+        @apply w-full;
+  
+        button {
+          flex: 1;
+        }
+      }
+  
+      @media (max-width: 30rem) {
+        @apply flex-col;
+        margin: theme(digitv2.spacers.spacer0);
+  
+        button {
+          width: 100%;
+        }
+      }
+    }
+  
+  
+    .digit-popup-alert-content {
+      @apply flex-col items-center;
+      display: flex;
+      gap: theme(digitv2.spacers.spacer2);
+  
+      .digit-popup-alert-heading {
+        @extend .typography.heading-l;
+        line-height: normal;
+        color: theme(digitv2.lightTheme.text-primary);
+      }
+  
+      .digit-popup-alert-message {
+        @extend .typography.caption-s;
+        text-align: center;
+        color: theme(digitv2.lightTheme.text-primary);
+      }
+  
+      &.with-shadow {
+        box-shadow: theme(digitv2.spacers.spacer0) 0.063rem 0.125rem theme(digitv2.spacers.spacer0) #00000026;
+      }
+  
+      @media (min-width: 48rem) {
+        padding: theme(digitv2.spacers.spacer6);
+        padding-bottom: theme(digitv2.spacers.spacer0);
+  
+        &.with-shadow {
+          padding-bottom: theme(digitv2.spacers.spacer6);
+        }
+      }
+  
+      @media (min-width: 30.063rem) and (max-width: 47.938rem) {
+        padding: theme(digitv2.spacers.spacer5);
+        padding-bottom: theme(digitv2.spacers.spacer0);
+  
+        &.with-shadow {
+          padding-bottom: theme(digitv2.spacers.spacer5);
+        }
+      }
+  
+      @media (max-width: 30rem) {
+        padding: theme(digitv2.spacers.spacer4);
+        padding-bottom: theme(digitv2.spacers.spacer0);
+  
+        &.with-shadow {
+          padding-bottom: theme(digitv2.spacers.spacer4);
+        }
+      }
+    }
+  
+    .popup-info-card {
+      margin: theme(digitv2.spacers.spacer0);
+      width: 100%;
+      max-width: 100%;
+      min-width: 100%;
+    }
+  }
+}
+
+.digit-popup-children-wrap::-webkit-scrollbar {
+  width: theme(digitv2.spacers.spacer2);
+  background-color: theme(digitv2.lightTheme.generic-background);
+}
+
+.digit-popup-children-wrap::-webkit-scrollbar-track {
+  background-color: theme(digitv2.lightTheme.generic-background);
+  border-radius: 0.563rem;
+}
+
+.digit-popup-children-wrap::-webkit-scrollbar-thumb {
+  background-color: theme(digitv2.lightTheme.generic-divider);
+  border-radius: 0.563rem;
+}

package/src/digitv2/components/radiobtnV2.scss

@@ -0,0 +1,114 @@
+@import url("../index.scss");
+
+.digit-radio-options-wrap {
+  @apply leading-10 flex justify-between flex-wrap;
+  margin-bottom: theme(digitv2.spacers.spacer2);
+
+  @media (max-aspect-ratio: 9/16) {
+    @apply flex-col;
+  }
+
+  div {
+    @apply block mb-md;
+  }
+
+  .digit-radio-btn-wrap {
+    @apply block float-left relative;
+
+    &:hover {
+      .digit-radio-btn-checkmark {
+        border-color: theme(digitv2.lightTheme.primary-1);
+      }
+    }
+
+    &:active {
+      .digit-radio-btn-checkmark {
+        outline: 0.188rem solid #FFFAF7;
+        border-color: theme(digitv2.lightTheme.primary-1);
+      }
+    }
+
+  }
+
+  .radio-option-container {
+    @apply inline-flex;
+    gap: theme(digitv2.spacers.spacer2);
+    align-items: self-start;
+
+    &.disabled {
+      .digit-radio-btn-checkmark {
+        border: 0.063rem solid theme(digitv2.lightTheme.text-disabled);
+        background-color: theme(digitv2.lightTheme.paper-secondary);
+      }
+    }
+
+
+    &.preselected {
+      .digit-radio-btn-checkmark {
+        border: 0.125rem solid theme(digitv2.lightTheme.text-disabled);
+      }
+
+      pointer-events: none !important;
+    }
+
+    &.disabled,
+    &.preselected {
+      label {
+        color: theme(digitv2.lightTheme.text-disabled);
+      }
+    }
+
+  }
+
+  .radio-option-container label:only-child {
+    align-items: flex-start;
+  }
+
+  .digit-radio-btn {
+    @apply opacity-0 absolute cursor-pointer h-6 w-6;
+    margin: theme(digitv2.spacers.spacer0);
+  }
+
+  .digit-radio-btn-checkmark {
+    @extend .light-input-border;
+    @apply h-6 w-6 border border-input-border border-solid rounded-full block;
+  }
+
+  label {
+    @extend .typography.body-s;
+    color: theme(digitv2.lightTheme.text-primary);
+    overflow-wrap: anywhere;
+  }
+
+  .digit-radio-btn-checkmark:after {
+    content: "";
+  }
+
+  .digit-radio-btn-wrap input:checked~.digit-radio-btn-checkmark {
+    border: 0.125rem solid theme(digitv2.lightTheme.primary-1);
+  }
+
+  .digit-radio-btn-wrap input:checked~.digit-radio-btn-checkmark:after {
+    @apply block h-3 w-3 rounded-full absolute;
+    top: 25%;
+    left: 25%;
+    background-color: theme(digitv2.lightTheme.primary-1);
+  }
+
+  .preselected .digit-radio-btn-wrap input:checked~.digit-radio-btn-checkmark {
+    border: 0.125rem solid theme(digitv2.lightTheme.generic-divider);
+  }
+
+  .preselected .digit-radio-btn-wrap input:checked~.digit-radio-btn-checkmark:after {
+    @apply block h-3 w-3 rounded-full absolute;
+    top: 25%;
+    left: 25%;
+    background-color: theme(digitv2.lightTheme.text-disabled);
+  }
+}
+
+.digit-reverse-radio-selection-wrapper {
+  div {
+    @apply flex flex-row-reverse place-content-between items-center;
+  }
+}

package/src/digitv2/components/ratingV2.scss

@@ -0,0 +1,33 @@
+.digit-rating-star-wrap {
+  @apply flex w-full mb-lg;
+  img {
+    width: 40px;
+    height: 38px;
+    display: block;
+    @apply mr-sm;
+  }
+
+  svg {
+    width: 40px;
+    height: 38px;
+    display: block;
+    @apply mr-sm;
+  }
+}
+
+@screen dt {
+  .digit-rating-star-wrap {
+    @apply w-2/5;
+  }
+}
+
+.digit-rating-with-text {
+  @apply flex place-items-center w-full;
+
+  svg {
+    width: 24px;
+    height: 38px;
+    display: block;
+    @apply mr-sm;
+  }
+}

package/src/digitv2/components/searchActionV2.scss

@@ -0,0 +1,11 @@
+.digit-search-box {
+  @apply flex m-sm justify-between;
+  .digit-search-action {
+    position: relative;
+    @apply flex flex-row text-focus;
+    align-items: center;
+    .digit-search-text {
+      @apply ml-sm;
+    }
+  }
+}

package/src/digitv2/components/searchFormV2.scss

@@ -0,0 +1,76 @@
+.digit-search-form-wrapper {
+  @apply flex flex-wrap justify-between bg-white mb-lg py-lg pl-lg;
+  &.unset {
+    all: unset;
+  }
+  .digit-form-field {
+    width: calc(25% - 16px);
+    @apply inline-block mr-md align-middle;
+  }
+  /*replacing .SubmitAndClearAllContainer class to digit-inbox-search-action-container  */
+  .digit-inbox-search-action-container {
+    @apply w-full;
+    .submit {
+      right: 36px;
+      margin-top: 22px;
+      margin-left: -16px !important;
+      @apply flex flex-row-reverse items-center w-full align-middle text-center !important;
+      button {
+        margin: 0;
+        @apply inline-block w-1/4 !important;
+      }
+      p {
+        @apply cursor-pointer text-link text-focus w-1/4 inline-block;
+      }
+    }
+  }
+  .submit {
+    right: 36px;
+    margin-top: 22px;
+    @apply inline align-middle text-center !important;
+    button {
+      margin: 0;
+      @apply inline-block w-full !important;
+    }
+    p {
+      @apply cursor-pointer text-link text-focus w-full inline-block;
+    }
+  }
+  .pt-property-search {
+    justify-content: unset;
+  }
+}
+
+.digit-input-fields {
+  /*width: calc(50% - 16px);*/
+
+  @apply inline-block mr-md !important;
+
+  .digit-inbox-search-form-error {
+    padding-top: 0;
+    margin-top: 0;
+    @apply absolute;
+  }
+}
+
+.digit-input-fields:nth-child(3n) {
+  margin-right: 0 !important;
+}
+
+@media (min-width: 780px) {
+  .digit-search-form-wrapper {
+    .digit-pt-form-field {
+      width: 30% !important;
+      margin-bottom: 20px;
+    }
+  }
+}
+
+@media (max-width: 780px) {
+  .digit-search-form-wrapper {
+    .digit-pt-form-field {
+      width: 100% !important;
+      margin-bottom: 15px;
+    }
+  }
+}

package/src/digitv2/components/searchcomponent.scss

@@ -0,0 +1,7 @@
+@media (max-width: 480px) {
+    .search-button-wrapper {
+        .link-label {
+            margin-left: 0px;
+        }
+    }
+}