Mercurial > kallithea

changeset 7223:5a8aa0a38e7d

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
less: rework select2 styling - make it shorter and more complete and flexible Mainly use 'inherit' to drop select2 styling, or use variables to apply Bootstrap styling. Tested to work with alternative color scemes - especially using non-white @kallithea-theme-inverse-color .
author Mads Kiilerich <mads@kiilerich.com>
date Sun, 01 Apr 2018 23:44:26 +0200
parents d6cbe497f881
children 7156dc8f0b6b
files kallithea/public/less/kallithea-select2.less
diffstat 1 files changed, 36 insertions(+), 51 deletions(-) [+]
line wrap: on
line diff
--- a/kallithea/public/less/kallithea-select2.less	Sun Apr 01 22:39:20 2018 +0200
+++ b/kallithea/public/less/kallithea-select2.less	Sun Apr 01 23:44:26 2018 +0200
@@ -1,58 +1,43 @@
-.branch-switcher,
-.repo-switcher {
-  .select2-choice {
-    height: 100%;
-    padding: 0;
-  }
-  .select2-container,
-  .select2-choice,
-  .select2-choice > span {
-    background: transparent !important;
-    border: 0 !important;
-    box-shadow: none !important;
-    color: #FFFFFF !important;
-  }
-  .select2-choice .select2-chosen {
-    margin-right: 0;
+// Style these like Bootstrap ".navbar-inverse .navbar-nav > li"
+.branch-switcher.select2-container,
+.repo-switcher.select2-container {
+  > a.select2-choice.select2-default {
     line-height: @line-height-computed;
-  }
-  .select2-arrow {
-    display: none !important;
-  }
-}
-.branch-switcher-dropdown.select2-drop.select2-drop-active,
-.repo-switcher-dropdown.select2-drop.select2-drop-active {
-  box-shadow: none;
-  background-color: @kallithea-theme-main-color;
-  border: 1px solid rgba(0, 0, 0, 0.15);
-  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
-}
-.repo-switcher-dropdown.select2-drop.select2-drop-active {
-  color: black;
-  .select2-result.select2-highlighted {
-    color: @navbar-inverse-link-hover-color;
-    background-color: @navbar-inverse-link-hover-bg;
-  }
-  .select2-result-label {
-    color: white;
+    height: @navbar-height;
+    padding: @nav-link-padding;
+    padding-top: @navbar-padding-vertical;
+    padding-bottom: @navbar-padding-vertical;
+    color: @navbar-inverse-link-color !important;
+    background: inherit;
+    &:hover {
+      color: @navbar-inverse-link-hover-color !important;
+      background-color: @navbar-inverse-link-hover-bg;
+    }
+    border: inherit;
+    border-radius: inherit;
+    box-shadow: inherit;
+    > .select2-chosen {
+      margin-right: inherit; // don't leave room for .select2-arrow
+      line-height: inherit;
+    }
+    > .select2-arrow {
+      display: none;
+    }
   }
 }
 
-/* fix padding of select2 entries in navbar to match .navbar-nav > li > a */
-.navbar-inverse {
-  .navbar-nav {
-    > li > .select2-container a {
-      padding: @nav-link-padding;
-      height: @navbar-height;
-      padding-top:    @navbar-padding-vertical;
-      padding-bottom: @navbar-padding-vertical;
-    }
-    li.active > .select2-container,
-    .select2-container:hover,
-    .select2-container:focus,
-    .select2-container-active {
-      color: @navbar-inverse-link-hover-color;
-      background-color: @navbar-inverse-link-hover-bg;
+// Style these like Bootstrap .dropdown-menu
+.branch-switcher-dropdown.select2-drop.select2-drop-active,
+.repo-switcher-dropdown.select2-drop.select2-drop-active {
+  color: inherit;
+  background-color: @dropdown-bg;
+  border: 1px solid @dropdown-border;
+  .box-shadow(0 6px 12px rgba(0,0,0,.175));
+  > .select2-results {
+    color: @dropdown-link-color;
+    .select2-highlighted {
+      color: @dropdown-link-hover-color;
+      background-color: @dropdown-link-hover-bg;
     }
   }
 }