@chipstcp/upyog-css 1.0.0

package/src/pages/citizen/DocumentList.scss

@@ -0,0 +1,455 @@
+.wrapper {
+  margin: 20px auto;
+}
+.accordion-wrapper {
+  & + * {
+    margin-top: 0.5em;
+  }
+}
+.document-required-options{
+  display: flex;
+  .document-index{
+    min-width:20px;
+    text-align: right;
+    padding: 5px;
+  }
+  .document-description{
+    flex-grow:1;
+    word-break: break-word;
+    padding: 5px;
+    
+
+  }
+}
+
+.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 #505A5F !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: #505A5F;
+  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: #505A5F;
+}
+.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: #a82227;
+      }
+    }
+  }
+  & .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: #a82227;
+        }
+      }
+    }
+  }
+
+  .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;
+}
+.documentation-list{
+  display: flex;
+}
+.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;
+  }
+}
+
+
+/* When there are no documents */
+.obps-document-detail-no-doc {
+  padding: 10px 0px;
+}
+
+/* Row (Label) */
+.obps-document-detail-row {
+  padding-top: 10px;
+  width: 100%;
+}
+
+/* Outer container for files */
+.obps-document-detail-list {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+/* Each document block */
+.obps-document-detail-item {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  align-content: center;
+}
+
+/* Clickable link */
+.obps-document-detail-link {
+  min-width: 100px;
+  max-width: 100px;
+  margin-right: 10px;
+  height: auto;
+  text-decoration: none;
+}
+
+/* SVG icon wrapper */
+.obps-document-detail-icon-wrapper {
+  display: flex;
+  justify-content: center;
+}
+
+/* Document Title */
+.obps-document-detail-title {
+  margin-top: 8px;
+  text-align: center;
+  color: #505a5f;
+  font-weight: 400;
+  line-height: 19px;
+  font-size: 16px;
+}
+
+/* Divider line */
+.obps-document-detail-divider {
+  color: #d6d5d4;
+  background-color: #d6d5d4;
+  height: 2px;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  border: none;
+}
+
+.bpa-doc-required-card {
+    background: #FAFAFA;
+    border: 1px solid #D6D5D4;
+    padding: 8px;
+    border-radius: 4px;
+    max-width: 600px;
+    min-width: 280px;
+    margin-bottom: 15px;
+    padding-top: 15px;
+}
+
+.bpa-doc-required-wrapper {
+    margin-bottom: 24px;
+}
+
+.bpa-doc-required-label {
+    width: 100%;
+}
+
+.bpa-doc-required-field {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.bpa-doc-required-coordinates {
+    padding: 10px;
+    font-size: 14px;
+}
+.bpa-doc-view-container {
+    margin-top: 19px;
+}
+
+.bpa-doc-view-grid {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16px;
+}
+
+.bpa-doc-view-link {
+    width: 120px;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-decoration: none;
+    color: inherit;
+}
+
+.bpa-doc-view-pdf-icon {
+    background: #f6f6f6;
+    padding: 8px;
+}
+
+.bpa-doc-view-label {
+    margin-top: 8px;
+    font-size: 12px;
+    word-wrap: break-word;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+}
+
+.no-width {
+  max-width: none;
+  min-width: 0;
+  width: auto;
+}

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,215 @@
+.HomePageWrapper {
+  margin-top: -25px;
+  margin: 0 auto;
+  padding: 0 40px;
+  .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;
+    }
+  }
+.hero-banner-styles {
+  background: linear-gradient(135deg, #4f65d8 0%, #00157a 100%);
+  border-radius: 16px;
+  padding: 60px 40px;
+  margin: 24px 0;
+  text-align: center;
+  color: #fff;
+}
+
+.hero-title-styles {
+  font-size: 42px;
+  font-weight: 700;
+  margin-bottom: 12px;
+  letter-spacing: -0.5px;
+}
+
+.heroSubtitleStyles {
+  font-size: 18px;
+  font-weight: 400;
+  margin-bottom: 32px;
+  opacity: 0.95;
+}
+
+.searchBarStyles {
+  max-width: 600px;
+  margin: 0 auto;
+  background-color: #fff;
+  border-radius: 12px;
+  padding: 14px 20px;
+  display: flex;
+  align-items: center;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+}
+
+.searchInputStyles {
+  border: none;
+  outline: none;
+  width: 100%;
+  font-size: 16px;
+  margin-left: 12px;
+  color: black;
+}
+
+.searchIconStyles {
+  color: #9ca3af;
+  font-size: 20px;
+}
+
+
+  .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;
+    display: none;
+    img {
+      width: 100%;
+    }
+  }
+}
+
+@media (min-width: 780px) {
+  .SideBarStatic {
+    width: 250px;
+    background: #ffffff;
+    margin-top: -3px;
+  }
+}
+@media (max-width: 780px) {
+  .SideBarStatic {
+    width: 250px;
+    background: #ffffff;
+    margin-top: -3px;
+    display: none;
+  }
+}
+
+.HomePageContainer {
+  width: 100%;
+  padding: 0;
+  margin-top: 3rem;
+  @media (min-width: 780px) {
+    display: flex;
+    width: 100% !important;
+    height: calc(100%-30px);
+  }
+}
+
+.moduleLinkHomePage {
+  @media (min-width: 780px) {
+    width: calc(100% - 219px);
+  }
+  margin-top: -25px;
+  img {
+    height: 33vw;
+    background: linear-gradient(#000000, #000000);
+    @apply object-cover;
+    width: 100vw;
+  }
+  h1 {
+    top: 100px;
+    left: 21px;
+    @apply text-heading-xl text-white font-bold;
+  }
+  .moduleLinkHomePageBackButton {
+    border: none;
+    top: 76px;
+    svg {
+      fill: #000000;
+    }
+    @apply text-black 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 {
+    max-width: unset;
+    width: 100%;
+  }
+}