From 6e6df3b830092f093f87e91b7910ee4c50af9f80 Mon Sep 17 00:00:00 2001 From: Dmitriy Zaporozhets Date: Tue, 21 Apr 2015 16:35:11 +0300 Subject: Refactor themes for new UI Signed-off-by: Dmitriy Zaporozhets --- app/assets/stylesheets/pages/header.scss | 29 +++++++ app/assets/stylesheets/pages/profile.scss | 2 +- app/assets/stylesheets/themes/dark-theme.scss | 104 ------------------------ app/assets/stylesheets/themes/gitlab-theme.scss | 75 +++++++++++++++++ app/assets/stylesheets/themes/ui_basic.scss | 7 +- app/assets/stylesheets/themes/ui_blue.scss | 2 +- app/assets/stylesheets/themes/ui_color.scss | 2 +- app/assets/stylesheets/themes/ui_gray.scss | 2 +- app/assets/stylesheets/themes/ui_mars.scss | 2 +- app/assets/stylesheets/themes/ui_modern.scss | 2 +- app/views/profiles/design.html.haml | 6 +- 11 files changed, 114 insertions(+), 119 deletions(-) delete mode 100644 app/assets/stylesheets/themes/dark-theme.scss create mode 100644 app/assets/stylesheets/themes/gitlab-theme.scss diff --git a/app/assets/stylesheets/pages/header.scss b/app/assets/stylesheets/pages/header.scss index 22b6ac8f339..e88d35939ed 100644 --- a/app/assets/stylesheets/pages/header.scss +++ b/app/assets/stylesheets/pages/header.scss @@ -26,6 +26,35 @@ header { } } + .app_logo { + @media (max-width: $screen-md-max) { + width: 52px; + h3 { + display: none; + } + } + border-bottom: 1px solid transparent; + margin-bottom: -1px; + + a { + padding: 5px 8px; + + img { + float: left; + } + + h3 { + width: 158px; + float: left; + margin: 0; + margin-left: 20px; + font-size: 18px; + line-height: 34px; + font-weight: normal; + } + } + } + .nav > li > a { color: #666; font-size: 14px; diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss index 65655d4bfa3..280e8b57174 100644 --- a/app/assets/stylesheets/pages/profile.scss +++ b/app/assets/stylesheets/pages/profile.scss @@ -37,7 +37,7 @@ } &.default { - background: #f1f1f1; + background: #888888; } &.modern { diff --git a/app/assets/stylesheets/themes/dark-theme.scss b/app/assets/stylesheets/themes/dark-theme.scss deleted file mode 100644 index c3502cb46fc..00000000000 --- a/app/assets/stylesheets/themes/dark-theme.scss +++ /dev/null @@ -1,104 +0,0 @@ -@mixin dark-theme($color-light, $color, $color-darker, $color-dark) { - header { - &.navbar-gitlab { - .navbar-inner { - .navbar-toggle { - color: #FFF; - } - - .app_logo, .navbar-toggle { - a { - color: $color-light; - } - background-color: $color-darker; - - &:hover { - background-color: $color-dark; - a { - color: #FFF; - } - } - } - - .app_logo { - @media (max-width: $screen-md-max) { - width: 52px; - h3 { - display: none; - } - } - border-bottom: 1px solid transparent; - margin-bottom: -1px; - - a { - padding: 5px 8px; - - img { - float: left; - } - - h3 { - width: 158px; - float: left; - margin: 0; - margin-left: 20px; - font-size: 18px; - line-height: 34px; - font-weight: normal; - } - } - } - } - } - } - - .page-with-sidebar { - background: $color-darker; - - .collapse-nav a { - color: #FFF; - background: $color; - } - - .sidebar-wrapper { - background: $color-darker; - border-right: 1px solid $color-darker; - } - - .nav-sidebar li { - a { - color: $color-light; - - &:hover, &:focus, &:active { - background: $color-dark; - } - - i { - color: $color-light; - } - - .count { - color: $color-light; - background: $color-dark; - } - } - - &.separate-item { - border-top: 1px solid $color; - } - - &.active a { - color: #FFF; - font-weight: bold; - - &.no-highlight { - border: none; - } - - i { - color: #FFF - } - } - } - } -} diff --git a/app/assets/stylesheets/themes/gitlab-theme.scss b/app/assets/stylesheets/themes/gitlab-theme.scss new file mode 100644 index 00000000000..929c4fa9c30 --- /dev/null +++ b/app/assets/stylesheets/themes/gitlab-theme.scss @@ -0,0 +1,75 @@ +@mixin gitlab-theme($color-light, $color, $color-darker, $color-dark) { + header { + &.navbar-gitlab { + .navbar-inner { + .navbar-toggle { + color: #FFF; + } + + .app_logo, .navbar-toggle { + a { + color: $color-light; + } + background-color: $color-darker; + + &:hover { + background-color: $color-dark; + a { + color: #FFF; + } + } + } + } + } + } + + .page-with-sidebar { + background: $color-darker; + + .collapse-nav a { + color: #FFF; + background: $color; + } + + .sidebar-wrapper { + background: $color-darker; + border-right: 1px solid $color-darker; + } + + .nav-sidebar li { + a { + color: $color-light; + + &:hover, &:focus, &:active { + background: $color-dark; + } + + i { + color: $color-light; + } + + .count { + color: $color-light; + background: $color-dark; + } + } + + &.separate-item { + border-top: 1px solid $color; + } + + &.active a { + color: #FFF; + font-weight: bold; + + &.no-highlight { + border: none; + } + + i { + color: #FFF + } + } + } + } +} diff --git a/app/assets/stylesheets/themes/ui_basic.scss b/app/assets/stylesheets/themes/ui_basic.scss index 03d98b00d49..63e8dce1e92 100644 --- a/app/assets/stylesheets/themes/ui_basic.scss +++ b/app/assets/stylesheets/themes/ui_basic.scss @@ -4,10 +4,5 @@ * */ .ui_basic { - header { - &.navbar-gitlab { - .navbar-inner { - } - } - } + @include gitlab-theme(#CCCCCC, #888888, #777777, #666666); } diff --git a/app/assets/stylesheets/themes/ui_blue.scss b/app/assets/stylesheets/themes/ui_blue.scss index e223058be8b..cf995622b6b 100644 --- a/app/assets/stylesheets/themes/ui_blue.scss +++ b/app/assets/stylesheets/themes/ui_blue.scss @@ -2,5 +2,5 @@ * Blue GitLab UI theme */ .ui_blue { - @include dark-theme(#BECDE9, #2980b9, #1970a9, #096099); + @include gitlab-theme(#BECDE9, #2980b9, #1970a9, #096099); } diff --git a/app/assets/stylesheets/themes/ui_color.scss b/app/assets/stylesheets/themes/ui_color.scss index 7ac6903b2e4..6babccec0da 100644 --- a/app/assets/stylesheets/themes/ui_color.scss +++ b/app/assets/stylesheets/themes/ui_color.scss @@ -2,5 +2,5 @@ * Violet GitLab UI theme */ .ui_color { - @include dark-theme(#98C, #548, #436, #325); + @include gitlab-theme(#98C, #548, #436, #325); } diff --git a/app/assets/stylesheets/themes/ui_gray.scss b/app/assets/stylesheets/themes/ui_gray.scss index 9257e5f4d40..f8e4a6ea7da 100644 --- a/app/assets/stylesheets/themes/ui_gray.scss +++ b/app/assets/stylesheets/themes/ui_gray.scss @@ -2,5 +2,5 @@ * Gray GitLab UI theme */ .ui_gray { - @include dark-theme(#979797, #373737, #272727, #222222); + @include gitlab-theme(#979797, #373737, #272727, #222222); } diff --git a/app/assets/stylesheets/themes/ui_mars.scss b/app/assets/stylesheets/themes/ui_mars.scss index 4caf5843d9b..fda96b64cd9 100644 --- a/app/assets/stylesheets/themes/ui_mars.scss +++ b/app/assets/stylesheets/themes/ui_mars.scss @@ -2,5 +2,5 @@ * Classic GitLab UI theme */ .ui_mars { - @include dark-theme(#979DA7, #474D57, #373D47, #24272D); + @include gitlab-theme(#979DA7, #474D57, #373D47, #24272D); } diff --git a/app/assets/stylesheets/themes/ui_modern.scss b/app/assets/stylesheets/themes/ui_modern.scss index 70449882317..8261e80b35f 100644 --- a/app/assets/stylesheets/themes/ui_modern.scss +++ b/app/assets/stylesheets/themes/ui_modern.scss @@ -2,5 +2,5 @@ * Modern GitLab UI theme */ .ui_modern { - @include dark-theme(#ADC, #019875, #018865, #017855); + @include gitlab-theme(#ADC, #019875, #018865, #017855); } diff --git a/app/views/profiles/design.html.haml b/app/views/profiles/design.html.haml index cc00d08d03b..646576c3164 100644 --- a/app/views/profiles/design.html.haml +++ b/app/views/profiles/design.html.haml @@ -12,17 +12,17 @@ = label_tag do .prev.default = f.radio_button :theme_id, 1 - Default + Graphite = label_tag do .prev.classic = f.radio_button :theme_id, 2 - Classic + Charcoal = label_tag do .prev.modern = f.radio_button :theme_id, 3 - Modern + Green = label_tag do .prev.gray -- cgit v1.2.1