@egovernments/digit-ui-components-css 0.0.1 → 0.0.2-1

package/src/components/inboxv2/horizontalNav.scss

@@ -1,224 +0,0 @@
-@import url("../../digitv2/index.scss");
-
-.horizontal-nav {
-    @extend .light-paper-primary;
-    @extend .light-text-color-primary;
-    overflow: auto;
-    display: flex;
-    margin-top: 3rem;
-
-    .menu-item {
-        border: 10px;
-        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-        cursor: pointer;
-        text-decoration: none;
-        margin: 0px;
-        padding: 0px;
-        outline: none;
-        font-size: 16px;
-        position: relative;
-        color: rgb(95, 92, 98);
-        line-height: 48px;
-        transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
-        min-height: 48px;
-        white-space: initial;
-        background: none;
-
-        .icon {
-            @extend .light-background;
-            display: block;
-            color: rgb(117, 117, 117);
-            fill: rgb(117, 117, 117);
-            height: 21px !important;
-            width: 21px !important;
-            float: left;
-            margin-top: 12px;
-        }
-
-        .edit-btn-ico {
-            height: 17px;
-            width: 17px;
-            margin-top: 16px;
-        }
-
-        .icon+.menu-label {
-            margin-left: 36px;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-        }
-    }
-   
-    @media (min-width: 780px) {
-        .sidebar-list {
-            padding-right: 30px;
-            padding-left: 30px;
-            background-color: #EEEEEE;
-            border: 1px solid #DDDDDD;
-            border-radius: 8px 8px 0px 0px;
-
-            &.active {
-                font-weight: 600;
-                border-bottom: 3px solid theme(colors.primary.main);
-
-                background-color: #FFFFFF;
-
-                .menu-label {
-                    color: theme(colors.primary.main);
-                }
-
-                .icon {
-                    fill: theme(colors.primary.main);
-                }
-            }
-
-            .submenu-container {
-                cursor: pointer;
-                display: flex;
-                flex-direction: column;
-
-                .sidebar-link {
-                    display: flex;
-                    justify-content: space-between;
-                    align-items: center;
-                    padding: 15px!important;
-                    padding-top: 20px!important;
-                    svg {
-                        width: 24px !important;
-                        height: 24px !important;
-                        color: rgb(117, 117, 117);
-                        fill: rgb(117, 117, 117);
-                    }
-
-                    .actions {
-                        .tooltip {
-                            margin-left: 16px;
-                        }
-                    }
-                }
-
-                .actions {
-                    display: flex;
-                    align-items: center;
-                    overflow: hidden !important;
-
-                    span {
-                        margin-left: 13px;
-                        line-height: 48px;
-                        white-space: nowrap;
-                        color: #5f5c62;
-                        overflow: hidden;
-                        text-overflow: ellipsis;
-                    }
-                }
-            }
-            .submenu-container:first-child {
-                margin-top:5px;
-                .employee-search-input{
-                    margin-left:16px !important;
-                }
-              }
-        }
-        .sidebar-list-search-form {
-            padding-right: 30px;
-            padding-left: 30px;
-
-            &.active {
-                font-weight: 600;
-                border-bottom: 3px solid theme(colors.primary.main);
-
-                background-color: #FFFFFF;
-
-                .menu-label {
-                    color: theme(colors.primary.main);
-                }
-
-                .icon {
-                    fill: theme(colors.primary.main);
-                }
-            }
-
-            .submenu-container {
-                cursor: pointer;
-                display: flex;
-                flex-direction: column;
-
-                .sidebar-link {
-                    display: flex;
-                    justify-content: space-between;
-                    align-items: center;
-                    padding: 15px!important;
-                    padding-top: 20px!important;
-                    svg {
-                        width: 24px !important;
-                        height: 24px !important;
-                        color: rgb(117, 117, 117);
-                        fill: rgb(117, 117, 117);
-                    }
-
-                    .actions {
-                        .tooltip {
-                            margin-left: 16px;
-                        }
-                    }
-                }
-
-                .actions {
-                    display: flex;
-                    align-items: center;
-                    overflow: hidden !important;
-
-                    span {
-                        margin-left: 13px;
-                        line-height: 48px;
-                        white-space: nowrap;
-                        color: #5f5c62;
-                        overflow: hidden;
-                        text-overflow: ellipsis;
-                    }
-                }
-            }
-            .submenu-container:first-child {
-                margin-top:5px;
-                .employee-search-input{
-                    margin-left:16px !important;
-                }
-              }
-        }
-
-
-        .dropdown-link {
-            .actions {
-                display: flex;
-                padding: 1em;
-
-                svg {
-                    width: 21px;
-                    height: 21px;
-                    color: rgb(117, 117, 117);
-                    fill: rgb(117, 117, 117);
-                }
-
-                span {
-                    color: #5f5c62;
-                }
-            }
-        }
-    }
-}
-
-
-
-.sidebar-link {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 15px!important;
-    padding-top: 20px!important;
-    svg {
-        width: 24px !important;
-        height: 26px !important;
-        color: rgb(117, 117, 117);
-        fill: rgb(117, 117, 117);
-    }
-}

package/src/components/inboxv2/inboxSearch.scss

@@ -1,116 +0,0 @@
-@import url("../../digitv2/index.scss");
-
-.search-wrapper {
-  @extend .light-text-color-primary;
-  @extend .light-paper-primary;
-  height: 100%;
-  width: 100%;
-  padding: 1rem;
-
-  .popup-label {
-    display: flex;
-    font-size: large;
-    @extend .light-text-color-primary;
-    .header {
-      @extend .light-text-color-primary;
-      width: 100%;
-      font-weight: normal;
-      font-size: large;
-      .icon {
-        @extend .light-primary;
-        margin-right: 12px;
-        margin-top: 5px;
-      }
-    }
-  }
-
-  .filter-header-wrapper {
-    @extend .light-text-color-primary;
-    display: grid;
-    grid-template-columns: 15% 1fr 15%;
-    height: 3rem;
-    margin-bottom: 1rem;
-    .icon-refresh {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      border: 1px solid #00000017;
-      cursor: pointer;
-      svg {
-        height: 60%;
-        width: 40%;
-      }
-    }
-    .label {
-      @extend .light-text-color-primary;
-      display: flex;
-      align-items: center;
-      justify-content: flex-start;
-    }
-
-    @media (min-width: 1024px) {
-      .label {
-        font-size: 24px;
-      }
-    }
-
-    @media (max-width: 1024px) {
-      .label {
-        font-size: 16px;
-      }
-    }
-
-    .icon-filter {
-      display: flex;
-      align-items: center;
-      justify-content: flex-start;
-    }
-  }
-
-  .search-field-wrapper {
-    display: grid;
-    row-gap: 0.25rem;
-    column-gap: 1rem;
-    &.inbox {
-      grid-template-columns: repeat(3, 1fr);
-      &.filter {
-        display: flex;
-        flex-direction: column;
-      }
-    }
-    &.search {
-      grid-template-columns: repeat(4, 1fr);
-    }
-    .text-input {
-      @extend .light-primary;
-    }
-  }
-
-  .search-button-wrapper {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    gap: 1rem;
-    padding-top: 8px;
-    &.inbox {
-      grid-column: 2 / span 2;
-      &.filter {
-        button {
-          width: 100%;
-        }
-      }
-    }
-    &.search {
-      grid-column: 3 / span 2;
-    }
-  }
-}
-
-@screen sm {
-  .search-wrapper {
-    .search-field-wrapper {
-      display: flex;
-      flex-direction: column;
-    }
-  }
-}

package/src/components/inboxv2/inboxSearchComposer.scss

@@ -1,134 +0,0 @@
-@import url("../../digitv2/index.scss");
-
-.inbox-search-wrapper {
-    /*
-    TODO NABEEL/ANIL Removed these since it creates issues in search screen
-    @extend .light-background;
-
-    */
-    height: 100%;
-    .inbox-search-component-wrapper {
- /*
-    TODO NABEEL/ANIL Removed these since it creates issues in search screen
-    @extend .light-background;
-
-    */        height: 100%;
-        width: 100%;
-        .sections-parent {
- /*
-    TODO NABEEL/ANIL Removed these since it creates issues in search screen
-    @extend .light-background;
-
-    */            height: 100%;
-            display: grid;
-            grid-template-columns: 20% 1fr;
-            gap : 1rem;
-            &.inbox {
-                @extend .light-text-color-primary;
-                .links{
-                    @extend .light-primary;
-                    @extend .light-paper-primary;
-                    .text{
-                        @extend .light-text-color-primary;
-                    }
-                    .inbox-links-icon{
-                        color:#f47738;
-                        fill:#f47738;
-                        path{
-                            fill:#f47738;
-                        }
-                    }
-                }
-            }
-            &.search {
-                display: flex;
-                flex-direction: column;
-                .section {
-                    &.links {
-                        display: none;
-                    }
-                    &.filter {
-                        display: none;
-                    }
-                }
-                .search-wrapper {
-                    @extend .light-paper-primary;
-                    .search-field-wrapper.search.custom-both-clear-search{
-                        .search-button-wrapper.search {
-                            grid-column: initial;
-                        }
-                    .search-button-wrapper{
-                        .link-label{
-                            @extend .light-primary;
-                            white-space:initial;
-                        }
-                        .submit-bar {
-                            @extend .light-primary-button;
-                            width: 60%;
-                        }
-                    }
-                }
-            }
-            }
-            &.download {
-                grid-template-columns: 100%
-            }
-            .section {
-                @extend .light-paper-primary;
-                @extend .light-text-color-primary;
-                min-height: 10rem;
-                /* background-color: white; */
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                border-radius: 4px;
-                box-shadow: 0 1px 2px 0 rgb(0 0 0 / 16%);
-                &.search-results {
-                    min-height: 0;
-                }
-                &.links {
-                    height: 100%;
-                    color : #f47738;
-                    .inbox-search-links-component {
-                        height: 100% !important;
-                        width: 100%;
-                    }
-                }
-                &.filter {
-                    @extend .light-paper-primary;
-                    @extend .light-text-color-primary;
-                    height: fit-content;
-                }
-            }
-        }
-    }
-}
-
-@screen sm {
-    .employee-main-application-details-for-modal  {
-        padding: 0 !important;
-    }
-    .inbox-search-wrapper {
-        .inbox-search-component-wrapper {
-            .sections-parent {
-                display: flex;
-                flex-direction : column;
-                .section {
-                    &.search-results {
-                    }
-                    &.links {
-                    }
-                    &.filter {
-                       
-                    }
-                    &.as-modal {
-                        position : fixed;
-                        top : 0;
-                        height : 100vh;
-                        width : 100vw;
-                    }
-                }
-            }
-        }
-    }
-}

package/src/components/inboxv2/index.scss

@@ -1,5 +0,0 @@
-@import "./horizontalNav.scss";
-@import "./InboxLinks.scss";
-@import "./inboxSearch.scss";
-@import "./searchComponentTable.scss";
-@import "./inboxSearchComposer.scss";

package/src/components/inboxv2/searchComponentTable.scss

@@ -1,44 +0,0 @@
-.search-component-table {
-  width: 100%;
-  display: block;
-  overflow-x: auto;
-  overflow-y:hidden;
-  table {
-    th {
-      .tooltip {
-        min-width: 80px;
-      }
-    }
-    tr {
-      td {
-        span {
-          white-space: pre;
-          min-width: 80px;
-          .tooltip {
-            position: relative;
-            min-width: 80px;
-            display: inline-block;
-            margin-left: 16px;
-              .tooltiptext {
-                visibility: hidden;
-                background-color: #555;
-                color: #fff;
-                text-align: left;
-                border-radius: 6px;
-                padding: 5px;
-                position: absolute;
-                z-index: 1;
-                bottom: 125%;
-                left: 50%;
-                margin-left: -60px;
-                opacity: 0;
-                transition: opacity 0.3s;
-                width: 30rem;
-              }
-          }
-    
-        }
-      }
-    }
-  }
-}

package/src/components/info-banner.scss

@@ -1,35 +0,0 @@
-.info-banner-wrap {
-  @apply bg-link-normal bg-opacity-25 m-sm p-md;
-  max-width: 960px;
-
-  background-color: #C7E0F1;
-  border-radius: 4px;
-  svg {
-    margin-top: 5px;
-    @apply rounded-full;
-  }
-
-  div {
-    @apply flex;
-  }
-
-  h2 {
-    @apply text-heading-m text-link-normal mb-md font-bold ml-sm;
-  }
-
-  p {
-    @apply text-body-l text-link-normal whitespace-pre-line;
-  }
-}
-
-@screen dt {
-  .info-banner-wrap {
-    h2 {
-      @apply text-heading-m-dt;
-    }
-
-    p {
-      @apply text-body-l-dt;
-    }
-  }
-}

package/src/components/inputotp.scss

@@ -1,15 +0,0 @@
-.input-otp-wrap {
-  @apply mb-lg;
-
-  input {
-    @apply border-2 border-solid border-input-border outline-none h-10 w-10 text-form-field text-text-primary mr-sm mb-sm text-center;
-  }
-  input::-webkit-outer-spin-button,
-  input::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
-  input[type="number"] {
-    -moz-appearance: textfield;
-  }
-}

package/src/components/keynote.scss

@@ -1,27 +0,0 @@
-.key-note-pair {
-  @apply mb-md;
-
-  h3 {
-    margin-bottom: 4px;
-    @apply font-bold text-text-primary text-heading-s;
-  }
-
-  p {
-    @apply text-text-primary text-body-l;
-  }
-  
-  .caption {
-    @apply text-body-l text-text-secondary;
-  }
-}
-
-@screen dt {
-  .key-note-pair {
-    p {
-      @apply text-body-l-dt;
-    }
-    .caption {
-      @apply text-body-l-dt text-text-secondary;
-    }
-  }
-}

package/src/components/languageSelector.scss

@@ -1,24 +0,0 @@
-.language-selector {
-  @apply flex flex-wrap;
-}
-
-.language-selector div:not(:first-child) {
-  margin-left: 10px;
-}
-.bannerCard .language-button-container button {
-  min-width:6.2rem;
-  height: 2.5rem;
-  line-height: 10px;
-}
-.bannerCard .customBtn {
-  border-color: theme(colors.text.secondary);
-}
-.bannerCard .customBtn:focus {
-  outline: none;
-}
-.bannerCard .customBtn-selected {
-  border-color: transparent;
-}
-.bannerCard .bannerHeader p {
-  font-size: 19px;
-}