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>