@egovernments/digit-ui-components-css 0.0.2-beta.1 → 0.0.2-beta.11

package/src/components/OnGroundEventCard.scss

@@ -1,72 +0,0 @@
-.OnGroundEventCard{
-    box-shadow: 0px 1px 2px 0px #00000029;
-    @apply bg-white mx-sm mb-md p-md cursor-pointer;
-
-    .EventCalendarView{
-        width: 100px;
-        @apply inline-block mr-md;
-    }
-
-    .EventDetails{
-        width: calc( 100% - 116px );
-        @apply inline-block align-top;
-
-        h2{
-            @apply text-caption-m font-bold mb-md text-text-primary;
-        }
-
-        .EventLocation{
-            @apply flex mb-md;
-            svg{
-                @apply h-4 w-4;
-            }
-            p{
-                @apply text-body-s text-text-primary ml-sm;
-            }
-        }
-    
-        .EventTime{
-            @apply flex ;
-            svg{
-                @apply h-4 w-4;
-            }
-            p{
-                @apply text-body-s text-text-primary ml-sm;
-            }
-        }
-
-        .EventCategory{
-            p{
-                @apply text-body-s text-text-primary ;
-            }
-        }
-
-    }
-
-
-}
-
-@screen dt{
-    .OnGroundEventCard{
-        .EventDetails{
-            .EventLocation{
-                p{
-                    @apply text-body-s-dt;
-                }
-            }
-        
-            .EventTime{
-                p{
-                    @apply text-body-s-dt;
-                }
-            }
-    
-            .EventCategory{
-                p{
-                    @apply text-body-s-dt;
-                }
-            }
-    
-        }
-    }
-}

package/src/components/PageBasedInput.scss

@@ -1,29 +0,0 @@
-.PageBasedInputWrapper {
-  .SubmitBar {
-    z-index: 60;
-    @apply p-sm fixed w-full bottom-0 left-0 text-right bg-white;
-  }
-  .SubmitBarInCardInDesktopView {
-    @apply hidden;
-  }
-  label {
-    margin-left: 0 !important;
-  }
-}
-
-@screen dt {
-  .PageBasedInputWrapper {
-    .SubmitBar {
-      @apply hidden;
-    }
-    .SubmitBarInCardInDesktopView {
-      @apply block;
-    }
-    .card {
-      max-width: 960px;
-    }
-    button {
-      max-width: 240px;
-    }
-  }
-}

package/src/components/PopupHeadingLabel.scss

@@ -1,15 +0,0 @@
-.popupModalHeading{
-    @apply flex gap-3 mb-lg;
-    .headingIconAndLabel{
-        @apply flex gap-3 items-center;
-        svg{
-            @apply w-6 h-4;
-        }
-        h3{
-            @apply text-heading-l font-bold;
-        }
-    }
-    .popupResetFormButton{
-        @apply p-sm border border-solid border-text-primary border-opacity-25 self-center;
-    }
-}

package/src/components/PropertySearchForm.scss

@@ -1,58 +0,0 @@
-.PropertySearchForm {
-  .pt-search-action {
-    @apply w-full;
-    display: flex;
-    margin-right: 10px;
-    justify-content: end;
-    align-items: center;
-    .pt-search-action-submit button {
-      width: 100% !important;
-    }
-    .pt-search-action-reset {
-      text-align: right;
-      cursor: pointer;
-    }
-  }
-
-  .PropertySearchFormSwitcher{
-    border-bottom: 1px solid theme(colors.border);
-    cursor: pointer;
-    margin-bottom: 20px;
-    display: flex;
-    .non-selected {
-      color: theme(colors.text.secondary);
-      font-weight: 400;
-    }
-    .selected {
-      color: theme(colors.primary.main);
-      font-weight: 700;
-      padding-bottom: 10px;
-      border-bottom: 2px solid theme(colors.primary.main);
-    }
-    span {
-      margin-right: 20px;
-    }
-  }
-
-
-  .form-field {
-    width: 30% !important;
-    margin-bottom: 20px;
-  }
-  @media (min-width: 780px) {
-    .pt-form-field{
-      width: 30% !important;
-      margin-bottom: 20px;
-    }
-  }
-  @media (max-width: 780px) {
-  .form-field{
-    width: 100% !important;
-    margin-bottom: 15px;
-  }
-  .pt-form-field{
-    width: 100% !important;
-    margin-bottom: 15px;
-  }
-  }
-}

package/src/components/SearchForm.scss

@@ -1,56 +0,0 @@
-.search-form-wrapper{
-    @apply flex flex-wrap justify-between bg-white mb-lg py-lg pl-lg;
-    .form-field{
-        width: calc( 25% - 16px );
-        @apply inline-block mr-md align-middle;
-    }
-    .SubmitAndClearAllContainer{
-        @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;
-    }
-
-}
-
-@media (min-width: 780px) {
-    .search-form-wrapper{
-        .pt-form-field{
-            width: 30% !important;
-            margin-bottom: 20px;
-          }
-    }
-  }
-  @media (max-width: 780px) {
-    .search-form-wrapper{
-        .pt-form-field{
-            width: 100% !important;
-            margin-bottom: 15px;
-          }
-    }
-}

package/src/components/SearchOnRadioButton.scss

@@ -1,10 +0,0 @@
-.SearchOnRadioButton{
-    svg{
-        fill: theme(colors.text.secondary);
-        width: 24px;
-        height: 24px;
-        top: 8px;
-        right: 8px;
-        @apply absolute;
-    }
-}

package/src/components/StandaloneSearchBar.scss

@@ -1,10 +0,0 @@
-.StandaloneSearchBar{
-    @apply bg-white flex rounded-3xl px-md py-sm w-full;
-    svg{
-        fill: theme(colors.text.secondary);
-        @apply mr-md;
-    }
-    input{
-        @apply w-full mr-md outline-none;
-    }
-}

package/src/components/TimeLine.scss

@@ -1,68 +0,0 @@
-.timeline-container {
-  @apply flex;
-  margin: 0px 8px 15px;
-  .timeline-checkpoint {
-    @apply relative flex-1;
-    z-index: 1;
-  }
-
-  .timeline-content {
-    @apply flex flex-col items-center;
-
-    span {
-      text-align: center;
-      color: white;
-    }
-
-    .secondary-color {
-      color: theme(colors.text.primary);
-      padding: 5px;
-      font-size: small;
-    }
-  }
-
-  .line {
-    @apply absolute;
-    top: 12px;
-    left: calc(50% + 8px);
-    right: calc(-50% + 8px);
-    border-top: 4px solid theme(colors.border);
-    z-index: -1;
-  }
-
-  .circle {
-    width: 24px;
-    height: 24px;
-    background-color: #B1B4B6;
-    border-radius: 50%;
-    text-align: center;
-  }
-
-  .active {
-    background-color: theme(colors.primary.main);
-    border-color: theme(colors.primary.main);
-  }
-} 
-
-.TLComments{
-  max-width: 360px;
-  @apply mb-sm p-sm bg-grey-light;
-  h3{
-    @apply font-bold text-caption-m;
-  }
-  p{
-    @apply text-body-l;
-  }
-}
-
-@screen dt{
-  .TLComments{
-    width: 360px;
-    h3{
-      @apply text-caption-m-dt;
-    }
-    p{
-      @apply text-body-l-dt;
-    }
-  }
-}

package/src/components/WhatsNewCard.scss

@@ -1,13 +0,0 @@
-.WhatsNewCard{
-    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.16);
-    @apply rounded bg-white border-primary-main border-l-4 border-solid p-sm;
-    h2{
-        @apply text-body-l text-text-primary font-medium mb-xs;
-    }
-    p{
-        @apply text-form-field text-text-secondary mb-sm;
-    }
-    a{
-        @apply block text-form-field text-primary-main mb-sm
-    }
-}

package/src/components/actionLink.scss

@@ -1,3 +0,0 @@
-.action-link {
-  @apply text-primary-main text-text-btn mr-lg !important;
-}

package/src/components/actionbar.scss

@@ -1,97 +0,0 @@
-.action-bar-wrap {
-  box-shadow: rgba(0, 0, 0, 0.16) 0 -2px 8px;
-  max-width: 480px;
-  z-index: 100;
-
-  @apply left-0 bottom-0 w-full bg-white py-sm px-sm fixed text-right;
-
-  div {
-    @apply w-full;
-  }
-  .menu-wrap {
-    @apply absolute bg-white text-left mb-xs z-30 cursor-pointer;
-    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;
-  
-      &:hover {
-        @apply bg-grey-mid w-full;
-      }
-    }
-  }
-}
-
-@screen dt {
-  .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;
-
-    div {
-      width: calc(100% - 16px);
-    }
-
-    .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;
-        }
-      }
-    }
-  }
-}
-
-.action-bar-wrap-registry {
-
-  div {
-    @apply w-full;
-  }
-  .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;
-  
-    div {
-      @apply h-12 pl-sm py-md text-body-l text-text-primary;
-  
-      &:hover {
-        @apply bg-grey-mid w-full;
-      }
-    }
-  }
-
-  .search-add {
-    padding: 12px 16px;
-    color: rgb(244, 119, 56);
-    display: flex;
-    cursor: pointer;
-  }
-
-  .search-add-icon {
-    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/components/bannercomponents.scss

@@ -1,136 +0,0 @@
-.success-wrap,
-.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;
-    }
-  }
-}
-
-.error-wrap,
-.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 {
-  .success-wrap {
-    header {
-      @apply text-heading-xl-dt;
-    }
-  }
-  .emp-success-wrap {
-    width: calc(100%);
-    header {
-      @apply text-heading-xl-dt;
-    }
-  }
-
-  .error-wrap {
-    width: 100%;
-    header {
-      @apply text-heading-xl-dt;
-    }
-  }
-
-  .emp-error-wrap {
-    width: calc(100%);
-    header {
-      @apply text-heading-xl-dt;
-    }
-  }
-}
-
-.photos-wrap {
-  max-width: 640px;
-  @apply flex pt-md;
-
-  img {
-    width: calc(33% - 9.333px);
-    margin-right: 14px;
-  }
-
-  svg {
-    width: calc(33% - 9.333px);
-    margin-right: 14px;
-  }
-
-  .last {
-    width: calc(33% - 9.333px);
-  }
-}
-
-.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/components/body.scss

@@ -1,144 +0,0 @@
-body {
-  @apply bg-grey-bg;
-}
-
-.body-container {
-  @apply bg-grey-bg h-full min-h-screen overflow-x-hidden;
-}
-
-.navbar {
-  @apply text-white bg-secondary p-md w-full mb-md;
-  img {
-    height: 24px;
-  }
-}
-/* .navbar-header{
-    @apply text-navbarheader float-left px-sm
-}
-
-.navbar-subheader{
-    @apply font-light px-sm border-solid border-l border-white border-opacity-100
-}*/
-
-.h1 {
-  @apply text-heading-l text-text-primary font-bold mb-md ml-md;
-}
-
-.link-label {
-  @apply block text-link text-primary-main mb-md ml-md cursor-pointer;
-
-  &:hover {
-    @apply text-primary-main;
-  }
-}
-
-.back-btn {
-  width: fit-content;
-  @apply block border-solid border-b border-text-primary font-rc text-text-primary text-text-btn ml-sm mt-md;
-
-  label {
-    @apply inline mr-sm align-middle;
-  }
-
-  p {
-    @apply inline float-right;
-  }
-}
-
-.bread-crumb {
-  font-size: 14px;
-  color: theme(colors.text.secondary);
-  display: flex;
-  margin-bottom: 10px;
-  list-style: none;
-  padding: 0;
-}
-.bread-crumb--item {
-  margin-left: 5px;
-
-  &:not(:last-child):after {
-    content: "  /";
-  }
-
-  button {
-    outline: none;
-  }
-
-  .last {
-    color: theme(colors.text.primary);
-  }
-}
-
-.back-btn2 {
-  cursor: pointer;
-  width: fit-content;
-  @apply flex border-solid border-b border-text-primary font-rc text-text-primary text-text-btn ml-sm mb-md;
-
-  img {
-    @apply flex;
-  }
-
-  svg {
-    @apply flex;
-  }
-
-  p {
-    @apply flex;
-  }
-}
-
-@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;
-        }
-      }
-    }
-  }
-
-  .h1 {
-    margin-left: 0;
-    @apply text-heading-l-dt;
-  }
-
-  .link-label {
-    margin-left: 0;
-  }
-
-  .back-btn {
-    margin-left: 0;
-  }
-
-  .back-btn2 {
-    margin-left: 0;
-  }
-}
-
-.body-container::-webkit-scrollbar {
-  display: none;
-}
-.audit-card {
-  width: 80%;
-  margin-left: -21%;
-  margin-right: -27%;
-  max-height: 120px;
-  margin-top: 90px;
-}