@djb25/digit-ui-css 1.0.0

package/src/components/inboxv2/inboxSearchComposer.scss

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

@@ -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,44 @@
+.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

@@ -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;
+    }
+  }
+}