Mercurial > gemma
changeset 1256:3c84035b1f1b
adjusted box shadows
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Wed, 21 Nov 2018 12:36:06 +0100 |
parents | 13abf612cd9d |
children | d1114305a311 |
files | client/src/application/Contextbox.vue client/src/application/Search.vue client/src/application/Sidebar.vue client/src/application/assets/application.sass client/src/zoom/zoom.vue |
diffstat | 5 files changed, 10 insertions(+), 6 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/application/Contextbox.vue Wed Nov 21 12:29:43 2018 +0100 +++ b/client/src/application/Contextbox.vue Wed Nov 21 12:36:06 2018 +0100 @@ -37,7 +37,7 @@ ...mapState("application", ["showSearchbarLastState", "showInContextBox"]), style() { return [ - "ui-element shadow contextbox pt-3 ml-3 rounded-bottom border-top", + "ui-element shadow-xs contextbox pt-3 ml-3 rounded-bottom border-top", { contextboxcollapsed: !this.showInContextBox, contextboxextended: this.showInContextBox
--- a/client/src/application/Search.vue Wed Nov 21 12:29:43 2018 +0100 +++ b/client/src/application/Search.vue Wed Nov 21 12:36:06 2018 +0100 @@ -114,7 +114,7 @@ }, searchbarContainerStyle() { return [ - "input-group searchcontainer ml-3 shadow", + "input-group searchcontainer ml-3 shadow-xs", { "searchbar-collapsed": !this.showSearchbar, "searchbar-expanded": this.showSearchbar,
--- a/client/src/application/Sidebar.vue Wed Nov 21 12:29:43 2018 +0100 +++ b/client/src/application/Sidebar.vue Wed Nov 21 12:36:06 2018 +0100 @@ -107,7 +107,7 @@ }, sidebarStyle() { return [ - "ui-element position-relative sidebar rounded shadow d-print-none mb-auto", + "ui-element position-relative sidebar rounded shadow-xs d-print-none mb-auto", { sidebarcollapsed: !this.showSidebar, sidebarextended: this.showSidebar
--- a/client/src/application/assets/application.sass Wed Nov 21 12:29:43 2018 +0100 +++ b/client/src/application/assets/application.sass Wed Nov 21 12:36:06 2018 +0100 @@ -14,6 +14,7 @@ */ $basic-shadow-light: 1px 1px 12px 1px rgba(235, 235, 235, 0.75) $basic-shadow: 1px 3px 8px 2px rgba(220, 220, 220, 0.75) +$shadow-xs: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.2) $border-radius: 0.25rem $icon-height: 2rem $icon-width: 2rem @@ -46,13 +47,16 @@ .ui-element pointer-events: auto +.shadow-xs + box-shadow: $shadow-xs + .box max-height: 0 max-width: 0 overflow: hidden margin-left: 0 margin-right: 0 - box-shadow: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.2) + box-shadow: $shadow-xs transition: max-width .4s, max-height .4s, margin-left .4s, margin-right .4s .expanded @@ -70,7 +74,7 @@ background: #fff margin-bottom: $offset border-radius: $border-radius - box-shadow: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.2) + box-shadow: $shadow-xs z-index: 2 pointer-events: auto .inverted
--- a/client/src/zoom/zoom.vue Wed Nov 21 12:29:43 2018 +0100 +++ b/client/src/zoom/zoom.vue Wed Nov 21 12:36:06 2018 +0100 @@ -1,5 +1,5 @@ <template> - <div class="d-flex buttoncontainer shadow mb-3 position-absolute" :style="showSplitscreen ? 'margin-bottom: 51vh' : ''"> + <div class="d-flex buttoncontainer shadow-xs mb-3 position-absolute" :style="showSplitscreen ? 'margin-bottom: 51vh' : ''"> <button class="zoomButton border-0 bg-white rounded-left ui-element border-right" @click="zoomIn"> <i class="fa fa-plus"></i> </button>