From ac542ec954cacc98cc80551317add812aeda8fd9 Mon Sep 17 00:00:00 2001
From: Bram Wiepjes <bramw@protonmail.com>
Date: Mon, 4 Mar 2019 22:34:19 +0100
Subject: [PATCH] refactored the grid styling so that it works according design
---
web-frontend/public/grid.html | 581 +++++++++++-------
web-frontend/src/scss/base/_helpers.scss | 9 +
.../src/scss/components/views/_grid.scss | 90 ++-
3 files changed, 430 insertions(+), 250 deletions(-)
diff --git a/web-frontend/public/grid.html b/web-frontend/public/grid.html
index 787fc2d88..e810ff89d 100644
--- a/web-frontend/public/grid.html
+++ b/web-frontend/public/grid.html
@@ -177,236 +177,351 @@
<div class="layout-col-3-2 content">
<div class="grid-view">
<div class="grid-view-left" style="width: 200px;">
- <div class="grid-view-header">
- <div class="grid-view-row">
- <div class="grid-view-column" style="width: 200px;">
- header column 1
+ <div class="grid-view-outer remove-scrollbar">
+ <div class="grid-view-inner" style="min-width: 200px;">
+ <div class="grid-view-head">
+ <div class="grid-view-column" style="width: 200px;">head 1</div>
</div>
- </div>
- </div>
- <div class="grid-view-data" data-match-height>
- <div class="grid-view-row">
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">
- data column 1
+ <div class="grid-view-body">
+ <div class="grid-view-body-outer remove-scrollbar" data-match-scroll-top>
+ <div class="grid-view-body-inner">
+ <div class="grid-view-row">
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 1</div>
+ </div>
+ </div>
+ <div class="grid-view-row">
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 1</div>
+ </div>
+ </div>
+ <div class="grid-view-row">
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 1</div>
+ </div>
+ </div>
+ <div class="grid-view-row">
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 1</div>
+ </div>
+ </div>
+ <div class="grid-view-row">
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 1</div>
+ </div>
+ </div>
+ <div class="grid-view-row">
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 1</div>
+ </div>
+ </div>
+ <div class="grid-view-row">
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 1</div>
+ </div>
+ </div>
+ <div class="grid-view-row">
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 1</div>
+ </div>
+ </div>
+ <div class="grid-view-row">
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 1</div>
+ </div>
+ </div>
+ <div class="grid-view-row">
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 1</div>
+ </div>
+ </div>
+ <div class="grid-view-row">
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 1</div>
+ </div>
+ </div>
+ <div class="grid-view-row">
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 1</div>
+ </div>
+ </div>
+ </div>
</div>
</div>
- </div>
- <div class="grid-view-row">
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">
- data column 1
- </div>
+ <div class="grid-view-foot">
+ <div class="grid-view-column">footer 1</div>
</div>
</div>
- <div class="grid-view-row">
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">
- data column 1
- </div>
- </div>
- </div>
- <div class="grid-view-row">
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">
- data column 1
- </div>
- </div>
- </div>
- <div class="grid-view-row">
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">
- data column 1
- </div>
- </div>
- </div>
- <div class="grid-view-row">
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">
- data column 1
- </div>
- </div>
- </div>
- <div class="grid-view-row">
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">
- data column 1
- </div>
- </div>
- </div>
- <div class="grid-view-row">
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">
- data column 1
- </div>
- </div>
- </div>
- <div class="grid-view-spacer"></div>
- </div>
- <div class="grid-view-footer">
- <div class="grid-view-footer-column" style="width: 200px;">
- 18 records
- </div>
</div>
</div>
- <div class="grid-view-right-wrapper" style="left: 200px;">
- <div class="grid-view-right" style="min-width: 700px;">
- <div class="grid-view-header">
- <div class="grid-view-row">
- <div class="grid-view-column" style="width: 200px;">
- header column 2
- </div>
- <div class="grid-view-column" style="width: 200px;">
- header column 3
- </div>
- <div class="grid-view-column" style="width: 200px;">
- header column 4
- </div>
- <div class="grid-view-column" style="width: 100px;">
- +
+ <div class="grid-view-divider" style="left: 200px;"></div>
+ <div class="grid-view-right" style="left: 200px;">
+ <div class="grid-view-outer remove-scrollbar">
+ <div class="grid-view-inner" style="min-width: 1400px;">
+ <div class="grid-view-head">
+ <div class="grid-view-column" style="width: 200px;">head 2</div>
+ <div class="grid-view-column" style="width: 200px;">head 3</div>
+ <div class="grid-view-column" style="width: 200px;">head 4</div>
+ <div class="grid-view-column" style="width: 200px;">head 5</div>
+ <div class="grid-view-column" style="width: 200px;">head 6</div>
+ <div class="grid-view-column" style="width: 200px;">head 7</div>
+ <div class="grid-view-column" style="width: 100px;">+</div>
+ </div>
+ <div class="grid-view-body">
+ <div class="grid-view-body-outer remove-scrollbar" data-match-scroll-top>
+ <div class="grid-view-body-inner">
+ <div class="grid-view-row">
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 2</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 3</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 4</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 5</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 6</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 7</div>
+ </div>
+ </div>
+ <div class="grid-view-row">
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 2</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 3</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell active">body 4</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 5</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 6</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 7</div>
+ </div>
+ </div>
+ <div class="grid-view-row">
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 2</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 3</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 4</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 5</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 6</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 7</div>
+ </div>
+ </div>
+ <div class="grid-view-row">
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 2</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 3</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 4</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 5</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 6</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 7</div>
+ </div>
+ </div>
+ <div class="grid-view-row">
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 2</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 3</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 4</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 5</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 6</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 7</div>
+ </div>
+ </div>
+ <div class="grid-view-row">
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 2</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 3</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 4</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 5</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 6</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 7</div>
+ </div>
+ </div>
+ <div class="grid-view-row">
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 2</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 3</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 4</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 5</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 6</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 7</div>
+ </div>
+ </div>
+ <div class="grid-view-row">
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 2</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 3</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 4</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 5</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 6</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 7</div>
+ </div>
+ </div>
+ <div class="grid-view-row">
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 2</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 3</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 4</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 5</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 6</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 7</div>
+ </div>
+ </div>
+ <div class="grid-view-row">
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 2</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 3</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 4</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 5</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 6</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 7</div>
+ </div>
+ </div>
+ <div class="grid-view-row">
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 2</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 3</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 4</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 5</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 6</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 7</div>
+ </div>
+ </div>
+ <div class="grid-view-row">
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 2</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 3</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 4</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 5</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 6</div>
+ </div>
+ <div class="grid-view-column" style="width: 200px;">
+ <div class="grid-view-cell">body 7</div>
+ </div>
+ </div>
+ </div>
</div>
</div>
+ <div class="grid-view-foot">
+ <div class="grid-view-column" style="width: 200px;">footer 2</div>
+ <div class="grid-view-column" style="width: 200px;">footer 3</div>
+ <div class="grid-view-column" style="width: 200px;">footer 4</div>
+ <div class="grid-view-column" style="width: 200px;">footer 5</div>
+ <div class="grid-view-column" style="width: 200px;">footer 6</div>
+ <div class="grid-view-column" style="width: 200px;">footer 7</div>
+ </div>
</div>
- <div class="grid-view-data" data-match-height>
- <div class="grid-view-row">
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">
- data column 2
- </div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">
- data column 3
- </div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">
- data column 4
- </div>
- </div>
- </div>
- <div class="grid-view-row">
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">
- data column 2
- </div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">
- data column 3
- </div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">
- data column 4
- </div>
- </div>
- </div>
- <div class="grid-view-row">
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">
- data column 2
- </div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">
- data column 3
- </div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">
- data column 4
- </div>
- </div>
- </div>
- <div class="grid-view-row">
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">
- data column 2
- </div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">
- data column 3
- </div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">
- data column 4
- </div>
- </div>
- </div>
- <div class="grid-view-row">
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">
- data column 2
- </div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">
- data column 3
- </div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">
- data column 4
- </div>
- </div>
- </div>
- <div class="grid-view-row">
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">
- data column 2
- </div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">
- data column 3
- </div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">
- data column 4
- </div>
- </div>
- </div>
- <div class="grid-view-row">
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">
- data column 2
- </div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">
- data column 3
- </div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">
- data column 4
- </div>
- </div>
- </div>
- <div class="grid-view-row">
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">
- data column 2
- </div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">
- data column 3
- </div>
- </div>
- <div class="grid-view-column" style="width: 200px;">
- <div class="grid-view-cell">
- data column 4
- </div>
- </div>
- </div>
- <div class="grid-view-spacer"></div>
- </div>
- <div class="grid-view-footer">right footer</div>
</div>
</div>
</div>
@@ -417,7 +532,7 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/antiscroll/0.9/antiscroll.js"></script>
<script>
(function() {
- $matchHeight = $("[data-match-height]");
+ $matchHeight = $("[data-match-scroll-top]");
var ignore = false;
$matchHeight.scroll(function(e) {
@@ -432,6 +547,30 @@
}
});
});
+
+ var size = scrollbarSize();
+ function scrollbarSize () {
+ var div = $(
+ '<div class="remove-scrollbar"' +
+ ' style="width:50px;height:50px;overflow-y:scroll;position:absolute;top:-200px;left:-200px;">' +
+ ' <div style="height:100px;width:100%"/>' +
+ '</div>'
+ );
+
+ $('body').append(div);
+ var w1 = $(div).innerWidth();
+ var w2 = $('div', div).innerWidth();
+ $(div).remove();
+
+ return size = w1 - w2;
+ };
+
+ $(".remove-scrollbar").each(function(i, object) {
+ $(object).css({
+ "bottom": "-" + size + "px",
+ "right": "-" + size + "px"
+ });
+ });
})();
</script>
</body>
diff --git a/web-frontend/src/scss/base/_helpers.scss b/web-frontend/src/scss/base/_helpers.scss
index f6f6764a2..ee7531a43 100644
--- a/web-frontend/src/scss/base/_helpers.scss
+++ b/web-frontend/src/scss/base/_helpers.scss
@@ -12,6 +12,15 @@
text-align: right;
}
+.remove-scrollbar {
+ -ms-overflow-style: none;
+
+ &::-webkit-scrollbar {
+ width: 0;
+ height: 0;
+ }
+}
+
@keyframes spin {
0% {
transform: rotate(0deg);
diff --git a/web-frontend/src/scss/components/views/_grid.scss b/web-frontend/src/scss/components/views/_grid.scss
index 996e9c065..e7d1a9ae6 100644
--- a/web-frontend/src/scss/components/views/_grid.scss
+++ b/web-frontend/src/scss/components/views/_grid.scss
@@ -1,3 +1,5 @@
+// @TODO make this a bit clearer
+
.grid-view {
position: absolute;
left: 0;
@@ -7,41 +9,53 @@
overflow: hidden;
}
-.grid-view-left,
-.grid-view-right-wrapper {
+.grid-view-divider {
position: absolute;
top: 0;
- bottom: -17px;
- overflow-x: scroll;
+ bottom: 0;
+ border-right: 1px solid $color-neutral-300;
+}
+
+.grid-view-left,
+.grid-view-right {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ overflow: hidden;
}
.grid-view-left {
+ left: 0;
background-color: $color-neutral-50;
-
- &:after {
- content: "";
- position: absolute;
- right: 0;
- top: 0;
- bottom: 0;
- border-right: 1px solid $color-neutral-300;
- }
-}
-
-.grid-view-right-wrapper {
- right: 0;
}
.grid-view-right {
+ right: 0;
+}
+
+.grid-view-outer {
+ position: absolute;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ overflow: scroll;
+}
+
+.grid-view-inner {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
- overflow: hidden;
}
-.grid-view-header {
+.grid-view-divider {
+ z-index: 2;
+ border-right: 1px solid $color-neutral-300;
+}
+
+.grid-view-head {
position: absolute;
left: 0;
top: 0;
@@ -51,22 +65,29 @@
border-bottom: 1px solid $color-neutral-200;
}
-.grid-view-data {
+.grid-view-body {
position: absolute;
left: 0;
top: 33px;
- right: -17px;
- bottom: 48px - 17px;
+ right: 0;
+ bottom: 48px;
+ overflow: hidden;
+}
+
+.grid-view-body-outer {
+ position: absolute;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
overflow: scroll;
}
-.grid-view-spacer {
- display: block;
- height: 50px;
- width: 100%;
+.grid-view-body-inner {
+ padding-bottom: 100px;
}
-.grid-view-footer {
+.grid-view-foot {
position: absolute;
left: 0;
bottom: 0;
@@ -88,12 +109,17 @@
border-right: 1px solid $color-neutral-200;
border-bottom: 1px solid $color-neutral-200;
- .grid-view-header & {
+ .grid-view-head & {
height: 32px;
border-bottom: none;
background-color: $color-neutral-100;
}
+ .grid-view-foot & {
+ border-right: 0;
+ border-bottom: 0;
+ }
+
.grid-view-left & {
border-right: none;
}
@@ -108,6 +134,12 @@
background-color: $white;
&.active {
-
+ z-index: 2;
+ left: -2px;
+ top: -2px;
+ right: -2px;
+ bottom: -2px;
+ border: 2px solid $color-primary-500;
+ border-radius: 2px;
}
}