@selco/installation-ui-css 1.0.0

package/src/components/inboxv2/horizontalNav.scss

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

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

@@ -0,0 +1,169 @@
+@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:theme(colors.primary.main);
+                        fill:theme(colors.primary.main);
+                        path{
+                            fill:theme(colors.primary.main);
+                        }
+                    }
+                }
+            }
+            &.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 : theme(colors.primary.main);
+                    .inbox-search-links-component {
+                        height: 100% !important;
+                        width: 100%;
+                    }
+                }
+                &.filter {
+                    @extend .light-paper-primary;
+                    @extend .light-text-color-primary;
+                    height: fit-content;
+                }
+                &.tab{
+                    display: block;
+                    background-color: #eee;
+                    box-shadow: none;
+                    .search-wrapper{
+                        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.16);
+                    }
+                }
+            }
+        }
+    }
+}
+
+@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;
+                    }
+                }
+            }
+        }
+    }
+}
+
+.global-search-results-table-wrapper{
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+}
+
+.global-search-results-table{
+  margin-bottom: 1.5rem;
+
+
+  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4)  {
+    /* Media query for tablets */
+    min-width: 27.5rem;
+  }
+
+  @media (max-aspect-ratio: 9/16) {
+    /* Media query for mobile */
+    min-width: 100%;
+    width: 100%;
+  }
+
+  @media (min-aspect-ratio: 3/4) {
+    /* Media query for desktop */
+    min-width: 37.5rem;
+  }
+}

package/src/components/inboxv2/index.scss

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

package/src/components/inboxv2/searchComponentTable.scss

@@ -0,0 +1,45 @@
+.search-component-table {
+  width: 100%;
+  display: block;
+  overflow-x: auto;
+  overflow-y:hidden;
+  table {
+    th {
+      background-color: #FFFFFF;
+      .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

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

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

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

@@ -0,0 +1,23 @@
+.language-selector {
+  @apply flex flex-wrap;
+}
+
+.language-selector div:not(:first-child) {
+  margin-left: 10px;
+}
+.bannerCard .language-button-container button {
+  width: 6.2rem;
+  height: 2.5rem;
+}
+.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;
+}