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

package/src/pages/employee/login.scss

@@ -1,221 +1,221 @@
-.loginFormStyleEmployee {
-  .employeeCard {
-    .submit-bar {
-      @apply w-full;
-    }
-  }
-}
-.banner .bannerCard{
-  min-width: 420px !important;
-}
-.employeeForgotPassword .employeeCard .field .field-container .component-in-front {
-  margin-top: 0;
-  border: 1px solid;
-  border-right: none;
-  padding: 7px;
-}
-@screen dt {
-  .employeeForgotPassword .employeeCard .field .field-container .component-in-front {
-    padding: 7px;
-  }
- .loginFormStyleEmployee .employeeCard, .banner .bannerCard{
-    min-width: 420px !important;
-  }
-  .employeeForgotPassword .employeeCard, .employeeChangePassword .employeeCard{
-    max-width: 420px !important;
-    min-width: 420px !important;
-  }
-}
-
-.employeeForgotPassword .employee-card-input {
-  margin-bottom: 0px;
-  border-left: none;
-}
-
-.employeeForgotPassword .field-container {
-  margin: 10px 0;
-}
-.employeeForgotPassword {
-  .submit-bar {
-    @apply w-full;
-  }
-}
-.employeeChangePassword .submit-bar {
-  width: 100% !important;
-}
-.employeeChangePassword .card-text {
-  text-align: center;
-}
-.employeeChangePassword .input-otp-wrap {
-  text-align: center;
-}
-.submit-bar {
-  .submit-bar {
-    @apply w-full;
-  }
-}
-.loginFormStyleEmployee .bannerHeader p,
-.employeeForgotPassword .bannerHeader p,
-.employeeChangePassword .bannerHeader p {
-  font-size: 19px;
-}
-.employeeCard .card-sub-header {
-  font-size: 24px;
-}
-.loginFormStyleEmployee .employeeCard .card-label, .employeeForgotPassword .employeeCard .card-label{
-  font-weight: normal;
-  font-size: 16px;
-  line-height: 19px;
-  color: theme(colors.text.primary);
-  margin-top: 20px;
-}
-.banner .bannerHeader {
-  margin-bottom: 20px;
-}
-.employeeCard .card-label{
-  font-weight: normal;
-  font-size: 16px;
-  line-height: 19px;
-  color: theme(colors.text.primary);
-}
-.profile-label-margin{
-   margin-top: 10px;
-}
-
-.employeeForgotPassword .employeeCard .card-label-desc {
-  font-weight: normal;
-  font-size: 16px;
-  line-height: 24px;
-  color: theme(colors.text.secondary);
-  margin-top: 15px;
-}
-.employeeChangePassword .employeeCard .card-text {
-  margin-bottom: 15px;
-  font-size: 16px;
-  color: theme(colors.text.secondary);
-}
-@media screen and (max-width: 768px) {
-  .employeeChangePassword .employeeCard .card-text {
-    margin-top: 7px;
-  }
-  .employeeCard .card-sub-header {
-    font-size: 18px;
-  }
-}
-.employeeChangePassword .employeeCard .card-text-button {
-  text-align: center !important;
-  margin-bottom: 12px !important;
-}
-.employeeChangePassword .employeeCard .input-otp-wrap {
-  margin-bottom: 10px;
-}
-.employee .loginContainer {
-  padding-top: 0px !important;
-}
-.banner {
-  height: calc(100vh ) !important;
-}
-
-.employeeChangePassword .employeeCard .field .field-container{
-  margin-bottom: 24px;
-}
-
-.employeeForgotPassword .employeeCard  .employee-card-sub-header, .employeeChangePassword .employeeCard  .employee-card-sub-header, .loginFormStyleEmployee .employeeCard .employee-card-sub-header{
-  font-size: 24px !important;
-  line-height: 28px !important;
-  margin-bottom: 0px !important;
-}
-@media screen and (max-width : 768px){
-  .employeeForgotPassword .employeeCard  .employee-card-sub-header, .employeeChangePassword .employeeCard  .employee-card-sub-header, .loginFormStyleEmployee .employeeCard .employee-card-sub-header{
-    font-size: 18px !important;
-    line-height: 21px !important;
-    margin-bottom: 0px !important;
-  }
-  .loginFormStyleEmployee .employeeCard, .banner .bannerCard{
-    min-width: 340px !important;
-    margin: 10px !important;
-  }
-  .employeeForgotPassword .employeeCard, .employeeChangePassword .employeeCard{
-    max-width: 360px !important;
-    min-width: 340px !important;
-    margin: 10px !important;
-  }
-}
-.employeeChangePassword .employeeCard .card-text{
-  margin-top: 18px !important;
-  margin-bottom: 20px !important;
-}
-.employeeBackbuttonAlign{
-  display: none;
-}
-.resend-otp{
-  cursor: pointer;
-}
-
-.employee-select-wrap.login-city-dd {
-  .options-card{
-  max-height: 200px;
-  }
-}
-@media screen and (max-width: 768px){
-  .employeeBackbuttonAlign{
-    display: block;
-    position: absolute;
-    top: 20px;
-    left: 20px;
-  }
-  .banner{
-    align-items: flex-end;
-    padding-bottom: 40px;
-    height: 100vh !important;
-  }
-  .topbar{
-    background: rgba(34, 57, 77, var(--bg-opacity)) !important;
-    color: white;
-  }
-  .employee .loginContainer{
-    padding-top: 0px !important;
-  }
-  .removeBottomMargin{
-    margin-bottom: 0px !important;
-  }
-  .employee-select-wrap.login-city-dd {
-    .options-card{
-    max-height: 160px;
-    }
-  }
-}
-
-
-.loginFormStyleEmployee {
-
-  .loginCardSubHeaderClassName {
-    text-align: center !important;
-  }
-  .loginCardClassName {
-    margin: auto !important; 
-    min-width: 408px !important;
-    header.employee-card-sub-header{
-      text-align: center;
-      margin-top: 10px;
-    }
-  }
-  .buttonClassName {
-    max-width: 100% !important;
-    width: 100% !important
-  }
-  .field .field-container .text-input input {
-    margin-bottom: 5px !important;
-  }
-  .bannerHeader {
-    margin-bottom: 0px !important;
-  }
-  
-  .primary-label-btn {
-    margin: 20px auto 0 auto !important;
-  }
-
-  .employee-select-wrap .options-card {
-    max-height: 150px !important;
-  }
+.loginFormStyleEmployee {
+  .employeeCard {
+    .submit-bar {
+      @apply w-full;
+    }
+  }
+}
+.banner .bannerCard{
+  min-width: 420px !important;
+}
+.employeeForgotPassword .employeeCard .field .field-container .component-in-front {
+  margin-top: 0;
+  border: 1px solid;
+  border-right: none;
+  padding: 7px;
+}
+@screen dt {
+  .employeeForgotPassword .employeeCard .field .field-container .component-in-front {
+    padding: 7px;
+  }
+ .loginFormStyleEmployee .employeeCard, .banner .bannerCard{
+    min-width: 420px !important;
+  }
+  .employeeForgotPassword .employeeCard, .employeeChangePassword .employeeCard{
+    max-width: 420px !important;
+    min-width: 420px !important;
+  }
+}
+
+.employeeForgotPassword .employee-card-input {
+  margin-bottom: 0px;
+  border-left: none;
+}
+
+.employeeForgotPassword .field-container {
+  margin: 10px 0;
+}
+.employeeForgotPassword {
+  .submit-bar {
+    @apply w-full;
+  }
+}
+.employeeChangePassword .submit-bar {
+  width: 100% !important;
+}
+.employeeChangePassword .card-text {
+  text-align: center;
+}
+.employeeChangePassword .input-otp-wrap {
+  text-align: center;
+}
+.submit-bar {
+  .submit-bar {
+    @apply w-full;
+  }
+}
+.loginFormStyleEmployee .bannerHeader p,
+.employeeForgotPassword .bannerHeader p,
+.employeeChangePassword .bannerHeader p {
+  font-size: 19px;
+}
+.employeeCard .card-sub-header {
+  font-size: 24px;
+}
+.loginFormStyleEmployee .employeeCard .card-label, .employeeForgotPassword .employeeCard .card-label{
+  font-weight: normal;
+  font-size: 16px;
+  line-height: 19px;
+  color: theme(colors.text.primary);
+  margin-top: 20px;
+}
+.banner .bannerHeader {
+  margin-bottom: 20px;
+}
+.employeeCard .card-label{
+  font-weight: normal;
+  font-size: 16px;
+  line-height: 19px;
+  color: theme(colors.text.primary);
+}
+.profile-label-margin{
+   margin-top: 10px;
+}
+
+.employeeForgotPassword .employeeCard .card-label-desc {
+  font-weight: normal;
+  font-size: 16px;
+  line-height: 24px;
+  color: theme(colors.text.secondary);
+  margin-top: 15px;
+}
+.employeeChangePassword .employeeCard .card-text {
+  margin-bottom: 15px;
+  font-size: 16px;
+  color: theme(colors.text.secondary);
+}
+@media screen and (max-width: 768px) {
+  .employeeChangePassword .employeeCard .card-text {
+    margin-top: 7px;
+  }
+  .employeeCard .card-sub-header {
+    font-size: 18px;
+  }
+}
+.employeeChangePassword .employeeCard .card-text-button {
+  text-align: center !important;
+  margin-bottom: 12px !important;
+}
+.employeeChangePassword .employeeCard .input-otp-wrap {
+  margin-bottom: 10px;
+}
+.employee .loginContainer {
+  padding-top: 0px !important;
+}
+.banner {
+  height: calc(100vh ) !important;
+}
+
+.employeeChangePassword .employeeCard .field .field-container{
+  margin-bottom: 24px;
+}
+
+.employeeForgotPassword .employeeCard  .employee-card-sub-header, .employeeChangePassword .employeeCard  .employee-card-sub-header, .loginFormStyleEmployee .employeeCard .employee-card-sub-header{
+  font-size: 24px !important;
+  line-height: 28px !important;
+  margin-bottom: 0px !important;
+}
+@media screen and (max-width : 768px){
+  .employeeForgotPassword .employeeCard  .employee-card-sub-header, .employeeChangePassword .employeeCard  .employee-card-sub-header, .loginFormStyleEmployee .employeeCard .employee-card-sub-header{
+    font-size: 18px !important;
+    line-height: 21px !important;
+    margin-bottom: 0px !important;
+  }
+  .loginFormStyleEmployee .employeeCard, .banner .bannerCard{
+    min-width: 340px !important;
+    margin: 10px !important;
+  }
+  .employeeForgotPassword .employeeCard, .employeeChangePassword .employeeCard{
+    max-width: 360px !important;
+    min-width: 340px !important;
+    margin: 10px !important;
+  }
+}
+.employeeChangePassword .employeeCard .card-text{
+  margin-top: 18px !important;
+  margin-bottom: 20px !important;
+}
+.employeeBackbuttonAlign{
+  display: none;
+}
+.resend-otp{
+  cursor: pointer;
+}
+
+.employee-select-wrap.login-city-dd {
+  .options-card{
+  max-height: 200px;
+  }
+}
+@media screen and (max-width: 768px){
+  .employeeBackbuttonAlign{
+    display: block;
+    position: absolute;
+    top: 20px;
+    left: 20px;
+  }
+  .banner{
+    align-items: flex-end;
+    padding-bottom: 40px;
+    height: 100vh !important;
+  }
+  .topbar{
+    background: rgba(34, 57, 77, var(--bg-opacity)) !important;
+    color: white;
+  }
+  .employee .loginContainer{
+    padding-top: 0px !important;
+  }
+  .removeBottomMargin{
+    margin-bottom: 0px !important;
+  }
+  .employee-select-wrap.login-city-dd {
+    .options-card{
+    max-height: 160px;
+    }
+  }
+}
+
+
+.loginFormStyleEmployee {
+
+  .loginCardSubHeaderClassName {
+    text-align: center !important;
+  }
+  .loginCardClassName {
+    margin: auto !important; 
+    min-width: 408px !important;
+    header.employee-card-sub-header{
+      text-align: center;
+      margin-top: 10px;
+    }
+  }
+  .buttonClassName {
+    max-width: 100% !important;
+    width: 100% !important
+  }
+  .field .field-container .text-input input {
+    margin-bottom: 5px !important;
+  }
+  .bannerHeader {
+    margin-bottom: 0px !important;
+  }
+  
+  .primary-label-btn {
+    margin: 20px auto 0 auto !important;
+  }
+
+  .employee-select-wrap .options-card {
+    max-height: 150px !important;
+  }
 }

package/src/components/CardBasedOptions.scss

@@ -1,46 +0,0 @@
-.CardBasedOptions {
-  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.16);
-  @apply bg-white mb-md px-sm py-md mx-sm rounded w-full;
-  .headContent {
-    @apply flex justify-between mb-lg;
-    h2 {
-      @apply text-heading-s font-bold text-text-primary;
-    }
-    p {
-      @apply text-link text-primary-main font-medium cursor-pointer;
-    }
-  }
-
-  .mainContent {
-    @apply flex justify-evenly;
-    .CardBasedOptionsMainChildOption {
-      width: 25%;
-      @apply text-center;
-      .ChildOptionImageWrapper {
-        margin: auto !important;
-        background: rgba(244, 119, 56, 0.12);
-        mix-blend-mode: normal;
-        padding-top: 14px;
-        @apply h-12 w-12 rounded-full cursor-pointer;
-        svg {
-          height: 20px;
-          width: 20px;
-          fill: theme(colors.primary.main);
-          margin: auto;
-        }
-      }
-      .ChildOptionName {
-        font-size: 12px;
-        line-height: 14px;
-        padding-top: 1rem;
-      }
-    }
-  }
-}
-
-@screen dt {
-  .CardBasedOptions {
-    width: calc(50% - 16px);
-    @apply p-md;
-  }
-}

package/src/components/CitizenHomeCard.scss

@@ -1,56 +0,0 @@
-.CitizenHomeCard {
-  @apply bg-white mx-md p-md mb-lg;
-
-  .header {
-    @apply flex font-bold text-heading-l text-text-primary justify-between pb-sm;
-
-    svg {
-      width: 33px;
-      height: 33px;
-    }
-  }
-
-  .links {
-    @apply text-heading-s text-primary-main;
-
-    a {
-      @apply block pb-sm;
-    }
-  }
-}
-
-@screen dt {
-  .citizenAllServiceGrid {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    flex: 1;
-  }
-
-  .CitizenHomeCard {
-    @apply p-lg;
-    .header {
-      @apply pb-lg text-heading-l-dt;
-      svg {
-        @apply w-12 h-12;
-      }
-    }
-
-    .links {
-      @apply grid grid-cols-4 gap-px;
-      .linksWrapper {
-        height: 25px;
-        margin-bottom: 0.5em;
-      }
-      a {
-        @apply pb-md;
-        padding-left: 0.2em;
-        margin-bottom: 16px;
-        width: 100%;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        min-width: 0;
-      }
-    }
-  }
-}

package/src/components/EllipsisMenu.scss

@@ -1,17 +0,0 @@
-.ellipsis-menu-wrap{
-    @apply relative;
-    
-    .menu{
-        box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
-        @apply absolute right-0 bg-white z-30;
-        .item{
-            @apply flex items-center justify-between p-sm;
-            &:hover{
-                @apply bg-grey-mid cursor-pointer;
-            }
-            svg {
-              margin-right: 10px;
-            }
-        }
-    }
-}

package/src/components/EventCalendarView.scss

@@ -1,10 +0,0 @@
-.EventCalendarView{
-    .MonthViewInEventCalendar{
-        @apply bg-primary-main text-legend text-white font-medium text-center py-sm;
-    }
-
-    .DateViewInEventCalendar{
-        @apply bg-grey-mid text-heading-l font-bold text-primary-main text-center py-md;
-    }
-
-}

package/src/components/FAQ.scss

@@ -1,64 +0,0 @@
-.searchInputFAQs {
-    @apply mr-lg;
-    margin-bottom: 10px;
-    input{
-      margin-bottom: 0;
-      background: border-box;
-      @apply pr-xl;
-    }
-  }
-
-.faq-page{
-  width: 92%;
-  margin: 16px;
-}
-
-.faqs{
-  cursor: pointer;
-  .faq-question{
-    font-weight: 400;
-    margin: 16px;
-    background: #fff;
-    justify-content: space-between;
-    display: flex;
-    font-size: 16px;
-  }
-
-  .faqicon{
-    float: right;
-  }
-
-  .faq-answer{
-    background: #fff;
-    overflow: hidden;
-    margin: 5px;
-    @apply text-form-field text-text-secondary mb-sm;
-
-    span {
-      display: block; 
-      font-size: 14px;
-      font-weight: 400;
-      margin: 0px 12px 5px
-    }
-  }
-  .cs-box-border {
-    height: 1px;
-    position: relative;
-    border-bottom: 1px solid lightgray;;
-    background: lightgray;
-    margin-left: 16px;
-    margin-right: 16px;
-  }
-}
-
-.faq-list{
-  background: #fff;
-  margin: 5px 0;
-  padding-top: 4px;
-  padding-bottom: 4px;
-}
-  
-.rotate {
-  transform: rotate(90deg);
-}
-