diff --git a/src/app/structure-list/components/search/search.component.html b/src/app/structure-list/components/search/search.component.html index f59c9ba93e37368e3d6e3c507ba3a80a286d8654..68ef0abfa6b97c469388fc01a1eead6f112e528e 100644 --- a/src/app/structure-list/components/search/search.component.html +++ b/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> diff --git a/src/app/structure-list/components/search/search.component.scss b/src/app/structure-list/components/search/search.component.scss index b904c128331e903bb2219b6ada35ecdfed4f5ddc..5b8230750f523310fab59bb349bc77172c567b6d 100644 --- a/src/app/structure-list/components/search/search.component.scss +++ b/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; diff --git a/src/assets/scss/_shapes.scss b/src/assets/scss/_shapes.scss index 21c498f0589f3ee7ff3511ae8b11a825baeba1ef..22281d819191fb527d9bfd1eb5169624320278bf 100644 --- a/src/assets/scss/_shapes.scss +++ b/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; + } +}