@selco/installation-ui-css 1.0.0

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@selco/installation-ui-css",
+  "version": "1.0.0",
+  "license": "MIT",
+  "main": "dist/index.css",
+  "author": "Adithya Katuku",
+  "engines": {
+    "node": ">=14"
+  },
+  "cssConfig": {
+    "prefix": ""
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "start": "gulp build",
+    "build:prod": "NODE_ENV=production gulp build",
+    "prepublish": "yarn build:prod",
+    "deploy": "gulp && cp -R svg example && cp -R img example && gh-pages -d example"
+  },
+  "browserslist": [
+    "> 3%",
+    "last 2 versions"
+  ],
+  "style": "./dist/index.css",
+  "dependencies": {
+    "node-sass": "4.14.1",
+    "normalize.css": "8.0.1",
+    "postcss-scss": "3.0.5",
+    "tailwindcss": "1.9.6"
+  },
+  "devDependencies": {
+    "autoprefixer": "10.4.14",
+    "cssnano": "4.1.11",
+    "gh-pages": "3.2.3",
+    "gulp": "4.0.2",
+    "gulp-clean": "0.4.0",
+    "gulp-clean-css": "4.3.0",
+    "gulp-livereload": "4.0.2",
+    "gulp-postcss": "9.0.1",
+    "gulp-rename": "2.0.0",
+    "gulp-sass": "4.1.1",
+    "postcss": "8.4.26",
+    "postcss-cli": "8.3.1",
+    "postcss-header": "2.0.0",
+    "postcss-import": "12.0.1",
+    "postcss-prefixer": "2.1.3",
+    "postcss-preset-env": "6.7.1",
+    "postcss-scss": "3.0.5",
+    "sass": "^1.26.11"
+  },
+  "files": [
+    "dist/index.min.css",
+    "dist/index.css",
+    "svg/**/*.svg",
+    "img/**/*.png",
+    "src/**/*.scss",
+    "src/**/*.css"
+  ],
+  "keywords": [
+    "digit",
+    "egov",
+    "dpg",
+    "digit-ui",
+    "css"
+  ]
+}

package/src/components/CardBasedOptions.scss

@@ -0,0 +1,46 @@
+.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

@@ -0,0 +1,60 @@
+.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;
+      color: theme(colors.primary.main) !important;
+      text-decoration: none !important;
+    }
+  }
+}
+
+@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;
+        color: theme(colors.primary.main) !important;
+        text-decoration: none !important;  
+      }
+    }
+  }
+}

package/src/components/EllipsisMenu.scss

@@ -0,0 +1,17 @@
+.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

@@ -0,0 +1,10 @@
+.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

@@ -0,0 +1,64 @@
+.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);
+}
+  

package/src/components/OnGroundEventCard.scss

@@ -0,0 +1,72 @@
+.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

@@ -0,0 +1,42 @@
+.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;
+  }
+}
+.digit-page-based-input-wrapper {
+  .digit-page-based-submit-bar {
+    @apply hidden;
+  }
+  .digit-submit-bar-container {
+    z-index: 60;
+    @apply p-sm fixed w-full bottom-0 left-0 text-right bg-white;
+  }
+}
+@screen dt {
+  .digit-page-based-input-wrapper {
+    .digit-submit-bar-container {
+      @apply hidden;
+    }
+  }
+  .PageBasedInputWrapper {
+    .SubmitBar {
+      @apply hidden;
+    }
+    .SubmitBarInCardInDesktopView {
+      @apply block;
+    }
+    .card {
+      max-width: 960px;
+    }
+    button {
+      max-width: 240px;
+    }
+  }
+}

package/src/components/PopupHeadingLabel.scss

@@ -0,0 +1,15 @@
+.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

@@ -0,0 +1,58 @@
+.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

@@ -0,0 +1,56 @@
+.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

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

package/src/components/StandaloneSearchBar.scss

@@ -0,0 +1,10 @@
+.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

@@ -0,0 +1,68 @@
+.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

@@ -0,0 +1,13 @@
+.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

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