@egovernments/digit-ui-components-css 0.0.1

package/src/pages/citizen/CitizenEngagementNotificationWrapper.scss

@@ -0,0 +1,8 @@
+.CitizenEngagementNotificationWrapper {
+  .h1 {
+    margin: 15px;
+  }
+  .WhatsNewCard {
+    @apply mx-md mb-md;
+  }
+}

package/src/pages/citizen/DocumentList.scss

@@ -0,0 +1,305 @@
+.wrapper {
+  margin: 20px auto;
+}
+.accordion-wrapper {
+  & + * {
+    margin-top: 0.5em;
+  }
+}
+.accordion-item {
+  overflow: hidden;
+  transition: max-height 0.3s cubic-bezier(1, 0, 1, 0);
+  height: auto;
+  max-height: 9999px;
+}
+.accordion-item.collapsed {
+  max-height: 0;
+  transition: max-height 0.35s cubic-bezier(0, 1, 0, 1);
+}
+.accordion-title {
+  font-weight: 600;
+  cursor: pointer;
+  color: #666;
+  padding: 0.5em 0em;
+  border-radius: 1.5em;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  &.open svg {
+    transform: rotate(-90deg);
+  }
+  &:hover,
+  &.open {
+    color: black;
+  }
+}
+.accordion-content {
+  padding: 1em 0em;
+}
+.document_list_searchbar {
+  border: 1px solid theme(colors.text.secondary) !important;
+  border-radius: 0px !important;
+  margin: 20px 0;
+}
+.notices_circular_searchbox {
+  margin-top: 50px;
+}
+.notice_and_circular_main {
+  @apply flex bg-white my-md px-md pt-md pb-lg shadow-card relative;
+  border-radius: 4px;
+}
+.gap-ten {
+  @apply gap-10;
+}
+.notice_and_circular_heading_mb {
+  display: flex;
+  justify-content: space-between;
+  padding: 2px;
+}
+.notice_and_circular_heading_mb header {
+  font-weight: bold;
+  font-size: 16px !important;
+  line-height: 24px;
+  margin-right: 50px;
+}
+.notice_and_circular_heading_mb .card-caption {
+  padding-left: 30px;
+  font-weight: normal;
+  font-size: 12px;
+  line-height: 24px;
+  color: theme(colors.text.secondary);
+  padding-right: 5px;
+  padding-left: 15px;
+  min-width: 80px;
+  position: absolute;
+  right: 20px;
+}
+.notice_and_circular_text {
+  padding-bottom: 20px;
+}
+.notice_and_circular_text p {
+  font-weight: normal;
+  font-size: 12px;
+  line-height: 14px;
+  color: theme(colors.text.secondary);
+}
+.notice_and_circular_caption {
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+.notice_and_circular_caption .card-caption {
+  font-weight: normal;
+  font-size: 10px;
+  line-height: 18px;
+  color: #A3A3A3;
+}
+.view_download_main {
+  display: flex;
+  flex-wrap: wrap;
+  gap:8px;
+  align-items: end;
+  span {
+    padding-right: 20px;
+    & .views {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      p {
+        padding-left: 10px;
+        font-weight: normal;
+        font-size: 16px;
+        line-height: 19px;
+        color: theme(colors.primary.main);
+      }
+    }
+  }
+  & .download_views_padding{
+      padding-top: 8px;
+  }
+}
+@screen dt{
+  .view_download_main {
+    span{
+      & .views {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        p {
+          padding-left: 10px;
+          font-weight: normal;
+          font-size: 16px;
+          line-height: 19px;
+          color: theme(colors.primary.main);
+        }
+      }
+    }
+  }
+
+  .notice_and_circular_heading_mb .card-caption {
+    font-size: 16px;
+    line-height: 24px;
+    min-width : 150px;
+    padding-left: 50px;
+  }
+
+  .view_download_main span{
+    padding-right: 30px;
+  }
+  .view_download_main span .views p {
+    padding-left: 8px;
+    font-size: 16px;
+  }
+  .notice_and_circular_text p {
+    font-size: 16px !important;
+    line-height : 24px;
+  }
+  .documentDetails_row {
+    grid-gap: 0 !important;
+    gap: 0 !important;
+  }
+  .notice_and_circular_heading_mb header{
+    font-size: 24px !important;
+    line-height: 28px;
+    margin-right : 100px;
+  }
+  .notice_and_circular_caption .card-caption {
+    font-size: 14px;
+    line-height: 21px;
+  }
+  
+}
+.documentDetails {
+  &_wrapper {
+    @apply flex flex-col gap-10 items-start;
+  }
+  &_row {
+    @apply flex gap-20;
+  }
+  &_title {
+    @apply w-48 font-bold;
+  }
+  &_description {
+    @apply max-w-lg;
+    text-overflow: clip;
+  }
+  &_pdf {
+    @apply flex flex-col gap-5;
+  }
+  &_subheader {
+    @apply font-bold;
+    font-size: large;
+  }
+}
+
+.documentDetails_pdf {
+  @apply flex gap-10 cursor-pointer;
+}
+.grid_section {
+  @apply grid grid-cols-4 gap-4;
+  & .document_notification_form_section {
+    @apply col-span-3;
+  }
+}
+.document_notification_first_grid {
+  @apply grid grid-cols-4 gap-4;
+  & .form_section,
+  .document_notification_table_section {
+    @apply col-span-3;
+  }
+}
+.new_document_section_flex {
+  @apply flex items-center;
+  & .card-section-header {
+    @apply pl-lg;
+  }
+}
+.new_document_para_color {
+  @apply text-primary-light;
+  margin-bottom: 42px;
+}
+.document_notification_second_grid {
+  @apply grid grid-cols-3 gap-4;
+}
+.document_notification_clear_search_btn {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  & .document_notification_clear_search_btn_align {
+    display: flex;
+    align-items: center;
+  }
+}
+.new_document_clear_search_alignment {
+  @apply mb-md mr-lg;
+}
+.document_notification_filter_header {
+  @apply flex justify-between items-center;
+}
+.document_notification_filter_icon {
+  @apply flex items-center;
+  & .card-caption {
+    @apply ml-lg;
+  }
+}
+.document-table-docs-columns {
+  @apply flex items-center gap-5;
+}
+.filter_section_main {
+  padding-bottom: 300px;
+}
+.new_document_card {
+  @apply w-full h-56 bg-white p-xl;
+}
+.filter_table_section_margin {
+  margin-top: 30px;
+}
+.filter_card_employee {
+  @apply w-full h-auto bg-white p-xl;
+  padding-bottom: 100px;
+}
+.filter_section_document_categories {
+  padding-top: 20px;
+}
+.new_document_card_table {
+  @apply w-full h-auto bg-white p-xl;
+}
+.employee_document_inbox_table_main {
+  .table {
+    tbody {
+      tr {
+        @apply py-md;
+      }
+    }
+  }
+}
+.confirmation_box {
+  height: 130px;
+  display: flex;
+  align-items: center;
+  padding-left: 8px;
+  gap: 10px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.Docs_CardWrapper{
+  @apply bg-white m-sm px-md pt-md pb-lg shadow-card;
+  border-radius: 4px;
+}
+
+.mobileInbox_attachments{
+  display:flex;
+  gap:10px;
+}
+
+.documentDetails_row_items {
+  display:flex;
+  flex-direction: row;
+  align-self: flex-start;
+}
+
+@media screen and (max-width : 768px){
+  .documentDetails_row_items{
+    @apply grid grid-cols-2 gap-4;
+  }
+}

package/src/pages/citizen/Events.scss

@@ -0,0 +1,47 @@
+.OnGroundEventDetailsCard{
+    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.16);
+    @apply bg-white mx-sm mb-md p-md rounded;
+}
+
+.eventAddressAndDirection{
+    @apply text-body-s mb-md;
+    span{
+        @apply flex mb-sm;
+        svg{
+            @apply h-5 w-5;
+        }
+        div{
+            @apply ml-md;
+            p{
+                @apply mb-sm;
+            }
+            .direction{
+                @apply text-primary-main cursor-pointer;
+            }
+        }
+    }
+}
+
+.eventTimeRange{
+    @apply text-body-s flex;
+    svg{
+        @apply h-5 w-5;
+    }
+    p{
+        @apply ml-md;
+    }
+}
+
+.cardCaptionBodyS{
+    @apply text-body-s text-text-secondary mb-md;
+}
+
+@screen dt{
+    .eventAddressAndDirection{
+        @apply text-body-s-dt;
+    }
+
+    .cardCaptionBodyS{
+        @apply text-body-s-dt;
+    }
+}

package/src/pages/citizen/HomePageWrapper.scss

@@ -0,0 +1,158 @@
+.HomePageWrapper {
+  margin-top: -25px;
+
+  .BannerWithSearch {
+    margin-bottom: 40px;
+    width: 100%;
+    @apply relative;
+    .Search {
+      width: calc(100% - 32px);
+      bottom: -18px;
+      @apply mx-md absolute;
+    }
+    img {
+      height: 33vw;
+      @apply w-full object-cover;
+    }
+  }
+
+  .ServicesSection {
+    @apply flex flex-wrap;
+    padding: 40px 15px 0 15px;
+  }
+
+  @screen dt {
+    .ServicesSection {
+      @apply flex flex-wrap;
+      padding: 40px 15px 0 15px;
+      width: 100%;
+    }
+  }
+
+  .WhatsNewSection {
+    @apply m-sm;
+    padding: 0 15px;
+    .headSection {
+      @apply flex mb-sm justify-between;
+      h2 {
+        @apply text-heading-s font-bold text-text-primary pl-sm;
+      }
+      p {
+        @apply text-link text-primary-main font-medium cursor-pointer;
+      }
+    }
+    @media (min-width: 780px) {
+      padding: 0 15px;
+    }
+  }
+
+  .WhatsAppBanner{
+    width: 100%;
+    padding: 0px 20px 0px 20px;
+    margin: auto;
+    cursor: pointer;
+    img {
+      width: 100%;
+    }
+  }
+}
+
+@media (min-width: 780px) {
+  .SideBarStatic {
+    width: 219px;
+    background: theme(colors.white);
+  }
+}
+
+@media (max-width: 780px) {
+  .SideBarStatic {
+    display: none;
+  }
+}
+.HomePageContainer {
+  @media (min-width: 780px) {
+    display: flex;
+    width: calc(100% - 219px);
+    height: calc(100%-30px);
+  }
+}
+
+.moduleLinkHomePage {
+  @media (min-width: 780px) {
+    width: calc(100% - 219px);
+  }
+  margin-top: -25px;
+  img {
+    height: 33vw;
+    filter: grayscale(100%);
+    @apply w-full object-cover;
+  }
+  h1 {
+    position: absolute;
+    top: 100px;
+    left: 21px;
+    @apply text-heading-xl text-white font-bold;
+  }
+  .moduleLinkHomePageBackButton {
+    border: none;
+    top: 76px;
+    svg {
+      fill: theme(colors.white);
+    }
+    @apply absolute text-white text-heading-s ml-md;
+  }
+}
+
+.moduleLinkHomePageModuleLinks {
+  @apply mt-md;
+  .CitizenHomeCard {
+    .header {
+      @apply hidden;
+    }
+  }
+}
+
+@screen dt {
+  .HomePageWrapper {
+    width: 100%;
+    .BannerWithSearch {
+      margin-bottom: 56px;
+      width: 100% !important;
+      .Search {
+        width: 100%;
+        margin: 0;
+        padding: 0 15px 0 15px;
+      }
+      img {
+        height: 20vw;
+      }
+    }
+
+    .WhatsAppBanner {
+      width: 100%;
+      img{
+        height: 20vw;
+        width: 100%;
+      }
+    }
+
+  }
+  .moduleLinkHomePage {
+    img {
+      min-width: 100vw;
+      height: 20vw;
+    }
+    h1 {
+      top: calc(10vw + 40px);
+      left: 15.8rem;
+    }
+    .moduleLinkHomePageBackButton {
+      top: calc(10vw + 16px);
+      @apply ml-md;
+    }
+  }
+
+  .moduleLinkHomePageModuleLinks {
+    width: 100%;
+  }
+}

package/src/pages/citizen/SurveyList.scss

@@ -0,0 +1,22 @@
+.surveyListclockDiv{
+    @apply flex items-center my-lg;
+}
+.surveyListclockDiv span{
+    @apply pl-md text-text-primary;
+}
+.surveyListstatus{
+    @apply flex items-center justify-between;
+}
+.surveyLisNotResponded{
+    @apply text-error;
+}
+.surveyLisResponded{
+    @apply text-success;
+}
+.surveyListCardMargin{
+    @apply mx-md my-lg ;
+}
+.centered-message{
+    @apply flex items-center pl-md py-lg ;
+    
+}

package/src/pages/citizen/citizenDocument.scss

@@ -0,0 +1,22 @@
+.notice_and_circular_image svg {
+    width: 80px;
+    height: 100px;
+  }
+  .notice_and_circular_content {
+    padding-left: 50px;
+  }
+  .back-btn2{
+      border: none;
+  }
+  @media screen and (max-width: 768px) {
+    .notice_and_circular_image svg {
+      width: 53px;
+      height: 66px;
+    }
+    .notice_and_circular_content {
+      padding-left: 40px;
+    }
+    .documentContainerPadding{
+        padding: 0 10px;
+    }
+  }

package/src/pages/citizen/container.scss

@@ -0,0 +1,19 @@
+.citizen-home-footer {
+  @apply flex  w-full  h-10 bg-grey-bg pb-md pt-sm justify-center;
+  img {
+    @apply ml-sm;
+  }
+}
+
+.employee .citizen-home-footer {
+  @apply fixed bottom-0;
+}
+.fill-path-primary-main {
+  path {
+    fill: theme(colors.primary.main);
+  }
+}
+
+.obps-search {
+  margin: 8px;
+}

package/src/pages/citizen/payment/payment-type.scss

@@ -0,0 +1,3 @@
+.payment-amount-info{
+    @apply flex justify-between;
+}

package/src/pages/citizen/updatePropertyNumber.scss

@@ -0,0 +1,46 @@
+.updatenumber-warper-citizen{
+  min-height: 95vh;
+  height: unset;
+}
+.updatePropertyNumber {
+  .pt-update-no-popup-wrapper {
+    @apply m-md;
+  }
+  .search-form-wrapper {
+    display: inherit;
+    padding: 16px;
+    .submit-bar {
+      position: absolute;
+      bottom: 25px;
+      width: 90%;
+    }
+    .submit-bar-disabled {
+      position: absolute;
+      bottom: 25px;
+      width: 90%;
+    }
+  }
+}
+
+@screen dt {
+  .updatenumber-warper-citizen{
+    min-height: 100vh;
+    height: unset;
+  }
+  .updatePropertyNumber {
+    .h1 {
+      @apply m-md;
+    }
+    .search-form-wrapper {
+      .submit-bar {
+        width: 100% !important;
+        position: unset !important;
+      }
+      .submit-bar-disabled {
+        position: absolute;
+        bottom: 25px;
+        width: 90%;
+      }
+    }
+  }
+}

package/src/pages/employee/EmployeeLogin.scss

@@ -0,0 +1,7 @@
+.EmployeeLoginFooter{
+    margin: auto;
+    @apply absolute bottom-10;
+    img{
+        @apply h-4 object-contain;
+    }
+}

package/src/pages/employee/cardfix.scss

@@ -0,0 +1,13 @@
+.flex-fit{
+    @apply flex w-full border-b border-solid border-border;
+    padding : 8px 10px;
+}
+.card-count{
+    @apply pr-xl;
+    div{
+        @apply text-link;
+        span{
+            @apply text-link font-bold;
+        }
+    }
+}