fix: improve border style

src/app/structure-list/components/search/search.component.html

@@ -55,9 +55,8 @@
     fxLayoutAlign="space-between"
     [ngClass]="['modal', 'modal' + modalTypeOpened]"
   >
-    <div class="borderTricks">
+    <div class="body-wrap">
       <div class="contentModal" fxLayout="row wrap" fxLayoutAlign="flex-start" *ngIf="categories.length > 0">
-        <!--<div class="blockFiltre" *ngFor="let s of services">-->
         <div class="blockFiltre" *ngFor="let c of categories">
           <h4>{{ c.name }}</h4>
 

src/app/structure-list/components/search/search.component.scss

@@ -2,6 +2,7 @@
 @import '../../../../assets/scss/color';
 @import '../../../../assets/scss/typography';
 @import '../../../../assets/scss/breakpoint';
+@import '../../../../assets/scss/shapes';
 
 .header {
   .title {
@@ -106,23 +107,16 @@
   max-height: 648px;
   max-width: 754px;
   width: 94%;
-  background: $white;
   border-left: 6.5px solid transparent;
   border-bottom: 6.5px solid transparent;
   border-radius: 11px;
   z-index: 401 !important;
-
-  //repeating-linear-gradient(37deg, transparent 0, transparent 1px, $grey 2px, $grey 2px) 12;
-  //border-image: repeating-linear-gradient(-45deg, transparent 0, transparent 4px, $grey 4px, $grey 5px) 8;
-
-  background: linear-gradient($white, $white) padding-box,
-    repeating-linear-gradient(-45deg, transparent 0, transparent 4px, $grey 4px, $grey 5px) border-box;
-  //repeating-linear-gradient(-51deg, transparent 0, transparent 1px, $grey 1px, $grey 2px) border-box;
-  box-sizing: border-box;
-  z-index: 1;
+  margin: 8px 8px 0 0;
   position: absolute;
   margin-top: 96px;
-
+  border: 1px solid $grey-5;
+  border-radius: 6px;
+  @include background-hash;
   ::-webkit-scrollbar {
     width: 10px;
   }
@@ -133,9 +127,6 @@
     background: $grey;
     border-radius: 6px;
   }
-  .borderTricks {
-    border: 1px solid #e0e0e0;
-  }
   .contentModal {
     overflow-y: auto;
     max-width: 1100px;

src/assets/scss/_shapes.scss

@@ -33,3 +33,23 @@ $mat-tab-shadow: 0px 2px 7px rgba(0, 0, 0, 0.25);
   background-repeat: no-repeat;
   background-position-y: 12px;
 }
+
+@mixin background-hash {
+  background: linear-gradient(
+    -45deg,
+    $grey 2.5%,
+    $white 2.5%,
+    $white 47.5%,
+    $grey 47.5%,
+    $grey 52.5%,
+    $white 52.5%,
+    $white 97.5%,
+    $grey 97.5%
+  );
+  background-size: 5px 5px;
+  background-position: 25px 25px;
+  padding: 0 0 8px 8px;
+  .body-wrap {
+    background-color: $white;
+  }
+}