halleyx-ui-framework 11.7.94 → 11.7.96

package/dist/src/assets/styles/filterandsearch.scss

@@ -0,0 +1,230 @@
+@mixin flex {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+}
+
+.filter-serach-cover {
+    border: 1px solid #d8d8d8;
+    background-color: white;
+
+    border-radius: 8px;
+    height: 36px;
+    @include flex;
+
+    .filter-search-input-box {
+        border: none;
+        width: 90%;
+        font-family: OpenSans;
+        font-size: 14px;
+    }
+    .filter-search-tag{
+        .custom-container-box{
+            border: 0px;
+            padding: 0px;
+        }
+        .custom-container-box .custom-upload_inside_email1 .custom-overflow-count {
+            top: -1px;
+        }
+    }
+
+    .search-logo {
+        color: #a6a6a6;
+        padding: 8px 12px 8px 8px;
+    }
+    .filter{
+        width: fit-content;
+        display: flex;
+        align-items: center;
+        color:#54BD95;
+        padding:6px;
+        margin-right: 12px;
+        border-radius:4px;
+        position: relative; 
+        gap: 1px;
+        background-color: #DCF9EA;
+
+    .filter-logo {
+        cursor: pointer;
+    }
+    .filter-total-count{
+         
+            font-family: OpenSans;
+            font-size:12px;
+            font-weight: 400;  
+        }
+    }
+
+
+}
+
+.search-drop-down {
+    height: fit-content;
+    max-height: 382px;
+    // background-color:green;
+    border: 1px solid #d8d8d8;
+    border-radius: 8px;
+    overflow: scroll;
+    overflow-x: hidden ;
+
+    .active-filter {
+      
+        align-items: center;
+        flex-direction: row;
+        padding: 22px 7px 8px 8px;
+        flex-wrap: wrap;
+        padding-bottom: 22px;
+
+        .active-filter-header {
+            color: #777777;
+            font-size: 12px;
+            font-family: OpenSans;
+            height: 100%;
+        }
+
+        .active-filter-tag {
+            margin-left: 4px;
+            font-family: OpenSans;
+            font-weight: 400;
+            font-size: 12px;
+
+            .hlx-tag{
+                background-color:#A8DEC9;
+                margin-bottom: 4px;
+                max-height: 22px;
+            }
+            .hlx-tag > .content{
+                color:#265E4B;
+            }
+            .icon-times-regular:before{
+                color:#265E4B;
+                font-weight:700;
+            }
+        }
+    }
+    .search-checkbox{
+        padding:4px;
+    }
+}
+
+.filter-icon {
+    margin-top: 8px;
+    width: 232px;
+    max-width: 242px;
+    float: right;
+    max-height: 288px;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    background-color: white;
+    border: 1px solid #EBEBEB;
+    border-radius: 3px;
+
+    .filter-top {
+        padding-top: 12px;
+        padding-left: 16px;
+        border-bottom: 1px solid #d8d8d8;
+        padding-bottom: 12px;
+        position: sticky;
+        top: 0;
+        z-index: 1;
+        background-color: white;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        .filter-heading {
+            font-family: QuickSand;
+            font-weight: 600;
+           
+        }
+
+        i {
+            cursor: pointer;
+            padding-right: 14px;
+            color: #A6A6A6;
+            padding-top: 6px;
+            font-size: 16px;
+            font-weight: 600;
+            margin-bottom: 6px;
+        }
+        
+
+        i:hover {
+            color: black;
+        }
+    }
+
+
+    .filter-search-accordion {
+
+        .accordion-item {
+            .accordion-header {
+                padding: 8px 16px 8px 16px !important;
+                border-bottom: 1px solid var(--hlx-border-color) !important;
+            }
+
+            .accordion-content {
+                background-color: white !important;
+                padding: 8px 8px 8px 16px !important;
+                flex-direction: column !important;
+            }
+        }
+
+
+        .filter-title-cover{
+            display: flex;
+
+        .filter-title {
+           
+            border: none;
+            font-weight: 400;
+            font-size: 12px;
+            font-family: OpenSans;
+
+            .selected-filter-count{
+                padding-left: 6px;
+                color: #54BD95;
+                font-size: 10px;
+            }
+        }
+    }
+
+        .filter-content {
+            display: flex;
+            align-items: center;
+            border: none;
+            background-color: white;
+            padding: 0;
+
+            .filter-content-header {
+                // text-overflow: ellipsis;
+                width: 128px;
+                
+                white-space: normal;
+                overflow: hidden;
+                font-weight: 300;
+                font-family: OpenSans;
+                font-size: 12px;
+            }
+
+            // .filter-content-header:hover {
+            //     // cursor: pointer;
+            //     white-space: normal;
+            //     overflow: visible;
+            //     background-color: white;
+            //     z-index: 1;
+            // }
+
+            .filter-content-count {
+                padding-left: 6px;
+                font-size: 10px;
+                color: #a6a6a6;
+            }
+
+            .filter-check-box {
+                margin-left: auto;
+                padding-left: 8px;
+            }
+        }
+    }
+}

package/dist/src/assets/styles/fonts.scss

@@ -0,0 +1,45 @@
+@use './common/var.scss' as*;
+//Roboto Slab
+@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;200;300;400;500&display=swap');
+//Merriweather
+@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700;1,900&display=swap');
+//Playfair Display and lora
+@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,700;1,400;1,500&family=Playfair+Display:ital,wght@0,400;0,500;1,400;1,500&display=swap');
+// PT Serif
+@import url('https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');
+
+//Best Sans Serif Fonts
+//Montserrat
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+//Poppins
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+
+//Best Display Fonts
+//Bebas neue
+@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
+//mono space fonts
+//roboto mono
+@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100;0,200;0,400;0,500;0,700;1,100;1,200;1,700&display=swap');
+
+@font-face {
+  font-family: 'Open Sans';
+  src: url('../fonts/OpenSans.ttf') format('truetype');
+  // src: url("#{$font-path}/OpenSans.ttf") format("truetype");
+}
+@font-face {
+  font-family: QuickSand;
+  src: url('../fonts/Quicksand.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: Pacifico;
+  src: url('../fonts/Pacifico.ttf') format('truetype');
+}
+@font-face {
+  font-family: OstrichSans;
+  src: url('../fonts/ostrich-regular.ttf') format('truetype');
+}
+@font-face {
+  font-family: JosefinSans;
+  src: url('../fonts/JosefinSans-Regular.ttf') format('truetype');
+}