From c839b554122cb50a2968a28c1644084f7cf39c96 Mon Sep 17 00:00:00 2001 From: lotte Date: Tue, 27 Nov 2018 16:26:58 +0100 Subject: [PATCH] finishing touches to menu --- package.json | 2 +- .../admin-sidebar.component.scss | 4 ++ ...dable-admin-sidebar-section.component.html | 9 ++-- ...dable-admin-sidebar-section.component.scss | 1 - src/app/app.component.scss | 2 +- src/styles/_custom_variables.scss | 3 ++ src/styles/_mixins.scss | 48 +++++++++++++++---- yarn.lock | 35 ++------------ 8 files changed, 57 insertions(+), 47 deletions(-) diff --git a/package.json b/package.json index de6d2f23ef..bf9741c870 100644 --- a/package.json +++ b/package.json @@ -183,7 +183,7 @@ "karma-webdriver-launcher": "1.0.5", "karma-webpack": "3.0.0", "ngrx-store-freeze": "^0.2.4", - "node-sass": "^4.7.2", + "node-sass": "^4.11.0", "nodemon": "^1.15.0", "npm-run-all": "4.1.3", "postcss": "^7.0.2", diff --git a/src/app/+admin/admin-sidebar/admin-sidebar.component.scss b/src/app/+admin/admin-sidebar/admin-sidebar.component.scss index 62daa6336f..06997a91a4 100644 --- a/src/app/+admin/admin-sidebar/admin-sidebar.component.scss +++ b/src/app/+admin/admin-sidebar/admin-sidebar.component.scss @@ -1,4 +1,5 @@ @import '../../../styles/variables.scss'; +@import '../../../styles/mixins.scss'; $icon-z-index: 10; :host { @@ -15,6 +16,7 @@ $icon-z-index: 10; &.sidebar-top-level-items { flex: 1; overflow: auto; + @include dark-scrollbar; } } @@ -51,6 +53,8 @@ $icon-z-index: 10; .shortcut-icon { padding-left: $spacer; padding-right: $spacer; + } + .shortcut-icon, .icon-wrapper { background-color: inherit; z-index: $icon-z-index; } diff --git a/src/app/+admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.html b/src/app/+admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.html index 0a145948a7..7843cd3436 100644 --- a/src/app/+admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.html +++ b/src/app/+admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.html @@ -2,10 +2,11 @@ [@bgColor]="{ value: ((collapsed | async) ? 'startBackground' : 'endBackground'), params: {endColor: (sidebarActiveBg | async)}}"> - - - +
+ + + +
diff --git a/src/app/+admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.scss b/src/app/+admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.scss index 0194afbd43..98ef4aa9c7 100644 --- a/src/app/+admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.scss +++ b/src/app/+admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.scss @@ -16,5 +16,4 @@ .sidebar-collapsible { display: flex; flex-direction: column; - } \ No newline at end of file diff --git a/src/app/app.component.scss b/src/app/app.component.scss index 4a401b604a..c0e5d839ef 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -1,7 +1,7 @@ @import '../styles/variables.scss'; @import '../styles/helpers/font_awesome_imports.scss'; @import '../../node_modules/bootstrap/scss/bootstrap.scss'; -@import '../../node_modules/nouislider/distribute/nouislider.min.css'; +@import '../../node_modules/nouislider/distribute/nouislider.min'; html { position: relative; diff --git a/src/styles/_custom_variables.scss b/src/styles/_custom_variables.scss index 23095c9bf2..abd8101a1e 100644 --- a/src/styles/_custom_variables.scss +++ b/src/styles/_custom_variables.scss @@ -19,3 +19,6 @@ $admin-sidebar-bg: $dark; $admin-sidebar-active-bg: darken($dark, 3%); $admin-sidebar-header-bg: darken($dark, 7%); $admin-sidebar-width: 250px; + +$dark-scrollbar-background: $admin-sidebar-active-bg; +$dark-scrollbar-foreground: #47495d; \ No newline at end of file diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss index 2155396164..40bb9b8f3e 100644 --- a/src/styles/_mixins.scss +++ b/src/styles/_mixins.scss @@ -1,15 +1,43 @@ @import '../../node_modules/bootstrap/scss/functions.scss'; @import '../../node_modules/bootstrap/scss/mixins.scss'; -@import '../../node_modules/bootstrap/scss/variables.scss'; +@import 'variables.scss'; @mixin word-wrap() { - overflow-wrap: break-word; - word-wrap: break-word; - -ms-word-break: break-all; - word-break: break-all; - word-break: break-word; - -ms-hyphens: auto; - -moz-hyphens: auto; - -webkit-hyphens: auto; - hyphens: auto; + overflow-wrap: break-word; + word-wrap: break-word; + -ms-word-break: break-all; + word-break: break-all; + word-break: break-word; + -ms-hyphens: auto; + -moz-hyphens: auto; + -webkit-hyphens: auto; + hyphens: auto; +} + +@mixin dark-scrollbar() { + &::-webkit-scrollbar { + width: 8px; + height: 3px; + } + &::-webkit-scrollbar-button { + background-color: $dark-scrollbar-background; + } + &::-webkit-scrollbar-track { + background-color: lighten($dark-scrollbar-background, 2%); + } + &::-webkit-scrollbar-track-piece { + background-color: $dark-scrollbar-background; + } + &::-webkit-scrollbar-thumb { + height: 50px; + background-color: $dark-scrollbar-foreground; + border-radius: 3px; + } + &::-webkit-scrollbar-corner { + background-color: lighten($dark-scrollbar-background, 2%); + } + &::-webkit-resizer { + background-color: $dark-scrollbar-background; + } + } diff --git a/yarn.lock b/yarn.lock index ff613dffe5..4351cb8711 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5495,9 +5495,9 @@ node-releases@^1.0.0-alpha.11: dependencies: semver "^5.3.0" -node-sass@^4.7.2: - version "4.9.3" - resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-4.9.3.tgz#f407cf3d66f78308bb1e346b24fa428703196224" +node-sass@^4.11.0: + version "4.11.0" + resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-4.11.0.tgz#183faec398e9cbe93ba43362e2768ca988a6369a" dependencies: async-foreach "^0.1.3" chalk "^1.1.1" @@ -5514,7 +5514,7 @@ node-sass@^4.7.2: nan "^2.10.0" node-gyp "^3.8.0" npmlog "^4.0.0" - request "2.87.0" + request "^2.88.0" sass-graph "^2.2.4" stdout-stream "^1.4.0" "true-case-path" "^1.0.2" @@ -7029,32 +7029,7 @@ request@2.85.0: tunnel-agent "^0.6.0" uuid "^3.1.0" -request@2.87.0: - version "2.87.0" - resolved "https://registry.yarnpkg.com/request/-/request-2.87.0.tgz#32f00235cd08d482b4d0d68db93a829c0ed5756e" - dependencies: - aws-sign2 "~0.7.0" - aws4 "^1.6.0" - caseless "~0.12.0" - combined-stream "~1.0.5" - extend "~3.0.1" - forever-agent "~0.6.1" - form-data "~2.3.1" - har-validator "~5.0.3" - http-signature "~1.2.0" - is-typedarray "~1.0.0" - isstream "~0.1.2" - json-stringify-safe "~5.0.1" - mime-types "~2.1.17" - oauth-sign "~0.8.2" - performance-now "^2.1.0" - qs "~6.5.1" - safe-buffer "^5.1.1" - tough-cookie "~2.3.3" - tunnel-agent "^0.6.0" - uuid "^3.1.0" - -request@^2.74.0, request@^2.79.0, request@^2.81.0, request@^2.87.0: +request@^2.74.0, request@^2.79.0, request@^2.81.0, request@^2.87.0, request@^2.88.0: version "2.88.0" resolved "https://registry.yarnpkg.com/request/-/request-2.88.0.tgz#9c2fca4f7d35b592efe57c7f0a55e81052124fef" dependencies: