Refactor gitlab themes css

6 files changed, 77 insertions, 200 deletions

diff --git a/app/assets/stylesheets/sections/header.scss b/app/assets/stylesheets/sections/header.scss
index 363bc2e9a24..28fbe03ee75 100644
--- a/app/assets/stylesheets/sections/header.scss
+++ b/app/assets/stylesheets/sections/header.scss
@@ -173,68 +173,6 @@ header {
       @include transition(all 0.15s ease-in 0s);
     }
   }
-
-
-  /*
-   * Dark header
-   *
-   */
-  &.header-dark {
-    &.navbar-gitlab {
-      .navbar-inner {
-        background: #708090;
-        border-bottom: 1px solid #AAA;
-
-        .navbar-toggle { color: #fff; }
-
-        .nav > li > a {
-          color: #AAA;
-
-          &:hover, &:focus, &:active {
-            background: none;
-            color: #FFF;
-          }
-        }
-      }
-    }
-
-    .turbolink-spinner {
-      color: #FFF;
-    }
-
-    .search {
-      .search-input {
-        background-color: #D2D5DA;
-        background-color: rgba(255, 255, 255, 0.5);
-        border: 1px solid #AAA;
-
-        &:focus {
-          background-color: white;
-        }
-      }
-    }
-    .search-input::-webkit-input-placeholder {
-      color: #666;
-    }
-    .app_logo {
-      a {
-        h1 {
-          background: image-url('logo-white.png') no-repeat center center;
-          background-size: 32px;
-          color: #fff;
-        }
-      }
-    }
-    .title {
-      a {
-        color: #FFF;
-        &:hover {
-          text-decoration: underline;
-        }
-      }
-      color: #fff;
-    }
-  }
 }
 
 .search .search-input {
diff --git a/app/assets/stylesheets/themes/dark-theme.scss b/app/assets/stylesheets/themes/dark-theme.scss
new file mode 100644
index 00000000000..abb1ba6686d
--- /dev/null
+++ b/app/assets/stylesheets/themes/dark-theme.scss
@@ -0,0 +1,69 @@
+@mixin dark-theme($color-light, $color, $color-darker, $color-dark) {
+  header {
+    &.navbar-gitlab {
+      .navbar-inner {
+        background: $color;
+
+        .navbar-toggle {
+          color: #FFF;
+        }
+
+        .app_logo, .navbar-toggle {
+          &:hover {
+            background-color: $color-darker;
+          }
+
+          h1 {
+            background: image-url('logo-white.png') no-repeat center center;
+            background-size: 32px;
+            color: #FFF;
+          }
+        }
+
+        .app_logo {
+          background-color: $color-dark;
+        }
+
+        .title {
+          color: #FFF;
+
+          a {
+            color: #FFF;
+            &:hover {
+              text-decoration: underline;
+            }
+          }
+        }
+
+        .search {
+          .search-input {
+            background-color: $color-light;
+            background-color: rgba(255, 255, 255, 0.5);
+            border: 1px solid $color-light;
+
+            &:focus {
+              background-color: white;
+            }
+          }
+        }
+
+        .search-input::-webkit-input-placeholder {
+          color: #666;
+        }
+
+        .nav > li > a {
+          color: $color-light;
+
+          &:hover, &:focus, &:active {
+            background: none;
+            color: #FFF;
+          }
+        }
+
+        .search-input {
+          border-color: $color-light;
+        }
+      }
+    }
+  }
+}
diff --git a/app/assets/stylesheets/themes/ui_color.scss b/app/assets/stylesheets/themes/ui_color.scss
index 3c441a8e098..7ac6903b2e4 100644
--- a/app/assets/stylesheets/themes/ui_color.scss
+++ b/app/assets/stylesheets/themes/ui_color.scss
@@ -1,42 +1,6 @@
 /**
- * This file represent some UI that can be changed
- * during web app restyle or theme select.
- *
- * Next items should be placed there
- * - link colors
- * - header restyles
- *
+ * Violet GitLab UI theme
  */
 .ui_color {
-  /*
-   *  Application Header
-   *
-   */
-  header {
-    @extend .header-dark;
-    &.navbar-gitlab {
-      .navbar-inner {
-        background: #548;
-        border-bottom: 1px solid #436;
-        .app_logo, .navbar-toggle {
-          &:hover {
-            background-color: #436;
-          }
-        }
-        .app_logo {
-          background-color: #325;
-        }
-        .nav > li > a {
-          color: #98C;
-        }
-        .search-input {
-          border-color: #98C;
-        }
-      }
-    }
-  }
-
-  .nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
-    background: #659;
-  }
+  @include dark-theme(#98C, #548, #436, #325);
 }
diff --git a/app/assets/stylesheets/themes/ui_gray.scss b/app/assets/stylesheets/themes/ui_gray.scss
index 8df08ccaeec..9257e5f4d40 100644
--- a/app/assets/stylesheets/themes/ui_gray.scss
+++ b/app/assets/stylesheets/themes/ui_gray.scss
@@ -1,32 +1,6 @@
 /**
- * This file represent some UI that can be changed
- * during web app restyle or theme select.
- *
- * Next items should be placed there
- * - link colors
- * - header restyles
- *
+ * Gray GitLab UI theme
  */
 .ui_gray {
-  /*
-   *  Application Header
-   *
-   */
-  header {
-    @extend .header-dark;
-    &.navbar-gitlab {
-      .navbar-inner {
-        background: #373737;
-        border-bottom: 1px solid #272727;
-        .app_logo, .navbar-toggle {
-          &:hover {
-            background-color: #272727;
-          }
-        }
-        .app_logo {
-          background-color: #222;
-        }
-      }
-    }
-  }
+  @include dark-theme(#979797, #373737, #272727, #222222);
 }
diff --git a/app/assets/stylesheets/themes/ui_mars.scss b/app/assets/stylesheets/themes/ui_mars.scss
index b08cbda6c4f..4caf5843d9b 100644
--- a/app/assets/stylesheets/themes/ui_mars.scss
+++ b/app/assets/stylesheets/themes/ui_mars.scss
@@ -1,38 +1,6 @@
 /**
- * This file represent some UI that can be changed
- * during web app restyle or theme select.
- *
- * Next items should be placed there
- * - link colors
- * - header restyles
- *
+ * Classic GitLab UI theme
  */
 .ui_mars {
-  /*
-   *  Application Header
-   *
-   */
-  header {
-    @extend .header-dark;
-    &.navbar-gitlab {
-      .navbar-inner {
-        background: #474D57;
-        border-bottom: 1px solid #373D47;
-        .app_logo, .navbar-toggle {
-          &:hover {
-            background-color: #373D47;
-          }
-        }
-        .app_logo {
-          background-color: #24272D;
-        }
-        .nav > li > a {
-          color: #979DA7;
-        }
-        .search-input {
-          border-color: #979DA7;
-        }
-      }
-    }
-  }
+  @include dark-theme(#979DA7, #474D57, #373D47, #24272D);
 }
diff --git a/app/assets/stylesheets/themes/ui_modern.scss b/app/assets/stylesheets/themes/ui_modern.scss
index 34f39614ca4..70449882317 100644
--- a/app/assets/stylesheets/themes/ui_modern.scss
+++ b/app/assets/stylesheets/themes/ui_modern.scss
@@ -1,42 +1,6 @@
 /**
- * This file represent some UI that can be changed
- * during web app restyle or theme select.
- *
- * Next items should be placed there
- * - link colors
- * - header restyles
- *
+ * Modern GitLab UI theme
  */
 .ui_modern {
-  /*
-   *  Application Header
-   *
-   */
-  header {
-    @extend .header-dark;
-    &.navbar-gitlab {
-      .navbar-inner {
-        background: #019875;
-        border-bottom: 1px solid #019875;
-        .app_logo, .navbar-toggle {
-          &:hover {
-            background-color: #018865;
-          }
-        }
-        .app_logo {
-          background-color: #017855;
-        }
-        .nav > li > a {
-          color: #ADC;
-        }
-        .search-input {
-          border-color: #8ba;
-        }
-      }
-    }
-  }
-
-  .nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
-    background: #019875;
-  }
+  @include dark-theme(#ADC, #019875, #018865, #017855);
 }