diff options
| -rw-r--r-- | src/client/views/DashboardView.scss | 33 |
1 files changed, 20 insertions, 13 deletions
diff --git a/src/client/views/DashboardView.scss b/src/client/views/DashboardView.scss index 90f64b393..25feca7bf 100644 --- a/src/client/views/DashboardView.scss +++ b/src/client/views/DashboardView.scss @@ -1,31 +1,39 @@ @import './global/globalCssVariables.module'; +$dashboard-left-menu-width: 250px; +$dashboard-view-padding: 20px; +$dashboard-container-height: 200px; +$dashboard-container-width: 250px; + .dashboard-view { - padding: 50px; display: flex; flex-direction: row; width: 100%; - position: absolute; height: 100%; - width: 100%; - padding-right: 0px; + position: absolute; overflow: auto; .left-menu { display: flex; justify-content: flex-start; flex-direction: column; - width: 250px; - min-width: 250px; + position: fixed; + min-width: $dashboard-left-menu-width; gap: 5px; + padding: $dashboard-view-padding; } .all-dashboards { display: flex; flex-direction: row; flex-wrap: wrap; - overflow-y: auto; width: 100%; + height: fit-content; + justify-content: flex-start; + align-items: flex-start; + padding: $dashboard-view-padding 0px 0px $dashboard-left-menu-width; + gap: 10px; + margin-bottom: 60px; } } @@ -48,13 +56,12 @@ .dashboard-container-new { border-radius: 10px; - width: 250px; - height: 200px; + width: $dashboard-container-width; + height: $dashboard-container-height; font-size: 120px; font-weight: 100; text-align: center; border: solid 2px $light-gray; - margin: 0 0px 30px 30px; cursor: pointer; color: $light-gray; display: flex; @@ -82,12 +89,12 @@ border-radius: 10px; position: relative; cursor: pointer; - width: 250px; - height: 200px; + width: $dashboard-container-width; + height: $dashboard-container-height; outline: solid 2px $light-gray; + outline-offset: -2px; display: flex; flex-direction: column; - margin: 0 0px 30px 30px; overflow: hidden; &:hover { |