@pmidc/upyog-css 1.1.4 → 1.1.6

package/src/pages/citizen/DocumentList.scss

@@ -1,305 +1,449 @@
-.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 #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;
-}
-
-.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;
-  }
+.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;
+}
+
+.clu-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;
+}
+
+.clu-doc-required-wrapper {
+    margin-bottom: 24px;
+}
+
+.clu-doc-required-label {
+    width: 100%;
+}
+
+.clu-doc-required-field {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.clu-doc-required-coordinates {
+    padding: 10px;
+    font-size: 14px;
+}
+.clu-doc-view-container {
+    margin-top: 19px;
+}
+
+.clu-doc-view-grid {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16px;
+}
+
+.clu-doc-view-link {
+    width: 120px;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-decoration: none;
+    color: inherit;
+}
+
+.clu-doc-view-pdf-icon {
+    background: #f6f6f6;
+    padding: 8px;
+}
+
+.clu-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;
 }