From 3d45ba5323372d4b5241ec5313ff1c36f5e6af1a Mon Sep 17 00:00:00 2001
From: Hugo SUBTIL <ext.sopra.husubtil@grandlyon.com>
Date: Tue, 27 Oct 2020 10:48:27 +0100
Subject: [PATCH] fix: improve border style
---
.../components/search/search.component.html | 3 +--
.../components/search/search.component.scss | 19 +++++-------------
src/assets/scss/_shapes.scss | 20 +++++++++++++++++++
3 files changed, 26 insertions(+), 16 deletions(-)
diff --git a/src/app/structure-list/components/search/search.component.html b/src/app/structure-list/components/search/search.component.html
index f59c9ba93..68ef0abfa 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 b904c1283..5b8230750 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 21c498f05..22281d819 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;
+ }
+}
--
GitLab