(OPC-20956) Added ability to customize some styles (#30)

OpusCapita · Mar 23, 2022 · f521871 · f521871
1 parent 498301b
commit f521871
Show file tree

Hide file tree

Showing 9 changed files with 28 additions and 20 deletions.
diff --git a/src/client/less/bootstrap/variables.less b/src/client/less/bootstrap/variables.less
@@ -199,6 +199,10 @@
 @input-group-addon-bg:           @gray-lighter;
 //** Border color for textual input addons
 @input-group-addon-border-color: @input-border;
+//** Color for facet header
+@search-filter-header-color:     #EC6608;
+//** Search bar height
+@search-bar-height:              46px;
 
 
 //== Dropdowns

diff --git a/src/client/less/extensions/navigation/Menu.less b/src/client/less/extensions/navigation/Menu.less
@@ -7,17 +7,7 @@
   margin-bottom: 20px;
   min-width: 320px;
   transition: all 180ms ease-in;
-
-  &:after {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    height: 1px;
-    background-color: #000;
-    opacity: 0.22;
-  }
+  box-shadow: inset 0 -@header-bottom-line-height @header-bottom-line-color;
 }
 
 .oc-menu--no-margin,
@@ -96,6 +86,7 @@
 
 .oc-menu__navigation-bar {
   z-index: 1;
+  box-shadow: inset 0 -@header-bottom-line-height @header-bottom-line-color;
 }
 
 .oc-menu__middle-col {

diff --git a/src/client/less/extensions/navigation/MenuDropdownGrid.less b/src/client/less/extensions/navigation/MenuDropdownGrid.less
@@ -56,7 +56,7 @@
 
 .oc-menu-dropdown-grid__item--active,
 .oc-menu-dropdown-grid__item--active:hover {
-  border-color: #EC6608;
+  border-color: @navigation-item-active-border-color;
 }
 
 .oc-menu-dropdown-grid__item-image {

diff --git a/src/client/less/extensions/navigation/MenuIcon.less b/src/client/less/extensions/navigation/MenuIcon.less
@@ -141,12 +141,13 @@
 
 .oc-menu-icon__button .oc-button {
   background-color: transparent;
-  fill: #fff;
-  color: #fff;
+  fill: @navigation-text-color;
+  color: @navigation-text-color;
 
   &:hover,
   &:focus {
-    text-decoration: none;
+    text-decoration: @navigation-text-decoration;
+    -webkit-text-decoration: @navigation-text-decoration;
   }
 }
 

diff --git a/src/client/less/extensions/navigation/NavigationBar.less b/src/client/less/extensions/navigation/NavigationBar.less
@@ -32,7 +32,7 @@
 .oc-navigation-bar__top-level-item {
   display: inline-flex;
   padding: 0;
-  border-bottom: 4px solid transparent;
+  border-bottom: @navigation-item-active-border-height solid transparent;
   position: relative;
   font-weight: normal;
 }

diff --git a/src/client/less/extensions/navigation/opuscapita-dark.less b/src/client/less/extensions/navigation/opuscapita-dark.less
@@ -17,7 +17,7 @@
   }
 
   & .oc-navigation-bar__top-level-item--active {
-    border-bottom-color: @navigation-item-active-border-color;
+    border-bottom: @navigation-item-active-border-height solid @navigation-item-active-border-color;
   }
 
   & .oc-menu-search__search-icon,

diff --git a/src/client/less/extensions/navigation/variables.less b/src/client/less/extensions/navigation/variables.less
@@ -3,13 +3,16 @@
 // --------------------------------------------------
 
 //== Navigation
-//
-//## Define colors for navigation menu
+
 
 @navigation-bg: #3b4a56;
+@header-bottom-line-height: 1px;
+@header-bottom-line-color: #000;
 @navigation-text-color: #fff;
+@navigation-text-decoration: none;
 @navigation-notification-text-color: #fff;
 @navigation-notification-bg-color: #ec6608;
+@navigation-item-active-border-height: 4px;
 @navigation-item-active-border-color: #ec6608;
 @navigation-item-vertical-active-bg-color: @navigation-item-active-border-color;
 

diff --git a/src/client/less/extensions/opc/forms.less b/src/client/less/extensions/opc/forms.less
@@ -47,3 +47,12 @@
   line-height: 1.5;
   padding: 5px 10px;
 }
+
+.search-filter-header, .more {
+  color: @search-filter-header-color !important;
+  cursor: pointer;
+}
+
+.search-bar .btn {
+  height: @search-bar-height;
+}
diff --git a/src/client/less/opuscapita-theme/type.less b/src/client/less/opuscapita-theme/type.less
@@ -297,5 +297,5 @@ dl dt, dl dd {
 }
 
 .btn-primary-bg {
-  background: @btn-primary-bg;
+  background: @btn-primary-bg !important;
 }