Move breadcrumb styles to a modifier class

Signed-off-by: Maurício Meneghini Fauth <mauricio@fauth.dev>
phpmyadmin · Apr 24, 2021 · 55c2b7a · 55c2b7a
1 parent f568a72
commit 55c2b7a
Show file tree

Hide file tree

Showing 17 changed files with 94 additions and 107 deletions.
diff --git a/templates/menu/breadcrumbs.twig b/templates/menu/breadcrumbs.twig
@@ -1,6 +1,6 @@
 <div id="floating_menubar"></div>
 <nav id="server-breadcrumb" aria-label="breadcrumb">
-  <ol class="breadcrumb">
+  <ol class="breadcrumb breadcrumb-navbar">
     <li class="breadcrumb-item">
       {{ show_icons('TabsMode') ? get_image('s_host') }}
       <a href="{{ url(server.url) }}" data-raw-text="{{ server.name }}">

diff --git a/themes/bootstrap/scss/_breadcrumb.scss b/themes/bootstrap/scss/_breadcrumb.scss
@@ -1,13 +1,15 @@
-.breadcrumb {
-  padding-left: 1.8rem;
-}
+.breadcrumb-navbar {
+  padding: $breadcrumb-navbar-padding-y $breadcrumb-navbar-padding-x;
+  margin-bottom: $breadcrumb-navbar-margin-bottom;
+  background-color: $breadcrumb-navbar-bg;
 
-.breadcrumb-item {
-  + .breadcrumb-comment {
-    padding-left: $breadcrumb-item-padding-x;
-  }
+  .breadcrumb-item {
+    + .breadcrumb-comment {
+      padding-left: $breadcrumb-item-padding-x;
+    }
 
-  .icon {
-    margin: 0;
+    .icon {
+      margin: 0;
+    }
   }
 }
diff --git a/themes/bootstrap/scss/_common.scss b/themes/bootstrap/scss/_common.scss
@@ -622,7 +622,7 @@ div#tablestatistics table {
   top: 0;
   right: 0;
   z-index: 99;
-  padding: $breadcrumb-padding-y $breadcrumb-padding-x;
+  padding: $breadcrumb-navbar-padding-y $breadcrumb-padding-x;
 }
 
 #page_settings_icon {

diff --git a/themes/bootstrap/scss/_variables.scss b/themes/bootstrap/scss/_variables.scss
@@ -1,10 +1,10 @@
 // Variables
 
-$navigation-width: 240px;
+$navigation-width: 240px !default;
 
 // Breadcrumbs
 
-$breadcrumb-bg: #e9ecef; // $gray-200
-$breadcrumb-padding-y: 0.5rem;
-$breadcrumb-margin-bottom: 0;
-$breadcrumb-border-radius: 0;
+$breadcrumb-navbar-padding-y: 0.5rem !default;
+$breadcrumb-navbar-padding-x: 1.8rem !default;
+$breadcrumb-navbar-margin-bottom: 0 !default;
+$breadcrumb-navbar-bg: #e9ecef !default; // $gray-200
diff --git a/themes/metro/scss/_breadcrumb.scss b/themes/metro/scss/_breadcrumb.scss
@@ -0,0 +1,32 @@
+@import "../../bootstrap/scss/breadcrumb";
+
+.breadcrumb-navbar {
+  color: $button-color;
+
+  a {
+    color: inherit;
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+
+  .breadcrumb-item {
+    + .breadcrumb-item::before,
+    &::before {
+      width: 10px;
+      color: #eee;
+
+      /* The arrow "U+0203A" (SINGLE RIGHT-POINTING ANGLE QUOTATION MARK) */
+      content: "\203A";
+    }
+
+    .icon {
+      display: none;
+    }
+  }
+
+  .breadcrumb-comment {
+    font-style: italic;
+  }
+}
diff --git a/themes/metro/scss/_breadcrumbs.scss b/themes/metro/scss/_breadcrumbs.scss
diff --git a/themes/metro/scss/_common.scss b/themes/metro/scss/_common.scss
@@ -806,7 +806,7 @@ div#tablestatistics table {
   top: 0;
   right: 0;
   z-index: 99;
-  padding: $breadcrumb-padding-y $breadcrumb-padding-x;
+  padding: $breadcrumb-navbar-padding-y $breadcrumb-padding-x;
 }
 
 #page_settings_icon {

diff --git a/themes/metro/scss/_variables.scss b/themes/metro/scss/_variables.scss
@@ -256,12 +256,12 @@ $accordion-button-active-bg: $button-background;
 
 // Breadcrumbs
 
-$breadcrumb-padding-y: 0.89rem;
-$breadcrumb-margin-bottom: 0;
-$breadcrumb-bg: $navi-background;
+$breadcrumb-navbar-padding-y: 0.89rem;
+$breadcrumb-navbar-padding-x: 2rem;
+$breadcrumb-navbar-margin-bottom: 0;
+$breadcrumb-navbar-bg: $navi-background;
 $breadcrumb-divider-color: $button-color;
 $breadcrumb-divider: none;
-$breadcrumb-border-radius: 0;
 
 // Alert
 

diff --git a/themes/metro/scss/theme.scss b/themes/metro/scss/theme.scss
@@ -17,7 +17,7 @@
 @import "nav";
 @import "navbar";
 @import "card";
-@import "breadcrumbs";
+@import "breadcrumb";
 @import "alert";
 @import "list-group";
 @import "modal";
diff --git a/themes/original/scss/_breadcrumb.scss b/themes/original/scss/_breadcrumb.scss
@@ -0,0 +1,12 @@
+@import "../../bootstrap/scss/breadcrumb";
+
+.breadcrumb-navbar {
+  font-weight: bold;
+
+  .breadcrumb-comment {
+    color: #d6d6d6;
+    font-weight: bold;
+    font-style: italic;
+    text-shadow: none;
+  }
+}
diff --git a/themes/original/scss/_breadcrumbs.scss b/themes/original/scss/_breadcrumbs.scss
diff --git a/themes/original/scss/_common.scss b/themes/original/scss/_common.scss
@@ -678,7 +678,7 @@ div#tablestatistics table {
   top: 0;
   right: 0;
   z-index: 99;
-  padding: $breadcrumb-padding-y $breadcrumb-padding-x;
+  padding: $breadcrumb-navbar-padding-y $breadcrumb-padding-x;
 }
 
 #page_settings_icon {

diff --git a/themes/original/scss/_variables.scss b/themes/original/scss/_variables.scss
@@ -145,12 +145,12 @@ $accordion-button-active-bg: $bg-one;
 
 // Breadcrumbs
 
-$breadcrumb-padding-y: 0.1rem;
-$breadcrumb-margin-bottom: 0;
-$breadcrumb-bg: white;
+$breadcrumb-navbar-padding-y: 0.1rem;
+$breadcrumb-navbar-padding-x: 2.2em;
+$breadcrumb-navbar-margin-bottom: 0;
+$breadcrumb-navbar-bg: white;
 $breadcrumb-divider-color: inherit;
 $breadcrumb-divider: quote("»");
-$breadcrumb-border-radius: 0;
 
 // Alert
 

diff --git a/themes/original/scss/theme.scss b/themes/original/scss/theme.scss
@@ -16,7 +16,7 @@
 @import "nav";
 @import "navbar";
 @import "card";
-@import "breadcrumbs";
+@import "breadcrumb";
 @import "alert";
 @import "list-group";
 @import "modal";
diff --git a/themes/pmahomme/scss/_breadcrumb.scss b/themes/pmahomme/scss/_breadcrumb.scss
@@ -1,25 +1,22 @@
-.breadcrumb {
-  padding-left: 2.2em;
+@import "../../bootstrap/scss/breadcrumb";
+
+.breadcrumb-navbar {
   text-shadow: 0 1px 0 #000;
-}
 
-.breadcrumb-item {
-  + .breadcrumb-comment {
-    padding-left: 0.5rem;
-  }
+  .breadcrumb-item {
+    + .breadcrumb-comment {
+      padding-left: 0.5rem;
+    }
 
-  .icon {
-    margin: 0;
+    a {
+      color: #fff;
+    }
   }
 
-  a {
-    color: #fff;
+  .breadcrumb-comment {
+    color: #d6d6d6;
+    font-weight: bold;
+    font-style: italic;
+    text-shadow: none;
   }
 }
-
-.breadcrumb-comment {
-  color: #d6d6d6;
-  font-weight: bold;
-  font-style: italic;
-  text-shadow: none;
-}
diff --git a/themes/pmahomme/scss/_common.scss b/themes/pmahomme/scss/_common.scss
@@ -812,7 +812,7 @@ div#tablestatistics table {
   top: 0;
   right: 0;
   z-index: 99;
-  padding: $breadcrumb-padding-y $breadcrumb-padding-x;
+  padding: $breadcrumb-navbar-padding-y $breadcrumb-padding-x;
 }
 
 #page_settings_icon {

diff --git a/themes/pmahomme/scss/_variables.scss b/themes/pmahomme/scss/_variables.scss
@@ -149,12 +149,12 @@ $accordion-button-active-bg: $navi-background;
 
 // Breadcrumbs
 
-$breadcrumb-padding-y: 0.1rem;
-$breadcrumb-margin-bottom: 0;
-$breadcrumb-bg: #888;
+$breadcrumb-navbar-padding-y: 0.1rem;
+$breadcrumb-navbar-padding-x: 2.2em;
+$breadcrumb-navbar-margin-bottom: 0;
+$breadcrumb-navbar-bg: #888;
 $breadcrumb-divider-color: #fff;
 $breadcrumb-divider: quote("»");
-$breadcrumb-border-radius: 0;
 
 // Modals