From 52fbcd45a4df8e93b04791fe25ff39c58f524bfa Mon Sep 17 00:00:00 2001 From: Dmitriy Zaporozhets Date: Wed, 19 Dec 2012 18:34:24 +0200 Subject: Better organization of styles --- app/assets/stylesheets/gitlab_bootstrap.scss | 26 ++++++ app/assets/stylesheets/main.scss | 128 +++------------------------ app/assets/stylesheets/themes/ui_basic.scss | 12 --- 3 files changed, 38 insertions(+), 128 deletions(-) create mode 100644 app/assets/stylesheets/gitlab_bootstrap.scss diff --git a/app/assets/stylesheets/gitlab_bootstrap.scss b/app/assets/stylesheets/gitlab_bootstrap.scss new file mode 100644 index 00000000000..d2efe1fa06a --- /dev/null +++ b/app/assets/stylesheets/gitlab_bootstrap.scss @@ -0,0 +1,26 @@ +/** Override bootstrap variables **/ +$baseFontSize: 13px !default; +$baseLineHeight: 18px !default; + +// BOOTSTRAP +@import "bootstrap"; +@import "bootstrap/responsive-utilities"; +@import "bootstrap/responsive-1200px-min"; + +@import "font-awesome"; +@import "variables.scss"; +@import "fonts.scss"; +@import "mixins.scss"; + +/** + * GitLab bootstrap. + * Overrides some styles of twitter bootstrap. + * Also give some common classes for GitLab app + */ +@import "gitlab_bootstrap/common.scss"; +@import "gitlab_bootstrap/typography.scss"; +@import "gitlab_bootstrap/buttons.scss"; +@import "gitlab_bootstrap/blocks.scss"; +@import "gitlab_bootstrap/files.scss"; +@import "gitlab_bootstrap/tables.scss"; +@import "gitlab_bootstrap/lists.scss"; diff --git a/app/assets/stylesheets/main.scss b/app/assets/stylesheets/main.scss index ccae351eb8f..e74bc9d15cb 100644 --- a/app/assets/stylesheets/main.scss +++ b/app/assets/stylesheets/main.scss @@ -1,91 +1,13 @@ -/** Override bootstrap variables **/ -$baseFontSize: 13px !default; -$baseLineHeight: 18px !default; - -// BOOTSTRAP -@import "bootstrap"; -@import "bootstrap/responsive-utilities"; -@import "bootstrap/responsive-1200px-min"; - -// FONT AWESOME -@import "font-awesome"; - /** - * Variables - * Contains colors + * GitLab bootstrap: */ -@import "variables.scss"; +@import "gitlab_bootstrap.scss"; -/** - * Custom fonts - * Contains @font-face font Korolev and default $monotype - */ -@import "fonts.scss"; - -/** - * General mixins. - * Contains rounded borders, gradients and shades - */ -@import "mixins.scss"; +@import "common.scss"; +@import "ref_select.scss"; -/** - * Header of application. - * Contain application logo, search panel, profile icon - */ @import "sections/header.scss"; - -/** - * Navigation menu of application. - * Panel with links to pages depends on project, profile or admin area - */ @import "sections/nav.scss"; - -/** - * This file represent some UI that can be changed - * during web app restyle or theme select. - * - * Next items should be placed there - * - link, button colors - * - header restyles - * - main menu restyles - * - */ -@import "themes/ui_basic.scss"; - -/** - * UI themes: - */ -@import "themes/ui_mars.scss"; -@import "themes/ui_modern.scss"; -@import "themes/ui_gray.scss"; -@import "themes/ui_color.scss"; - -/** - * GitLab bootstrap. - * Overrides some styles of twitter bootstrap. - * Also give some common classes for GitLab app - */ -@import "gitlab_bootstrap/common.scss"; -@import "gitlab_bootstrap/typography.scss"; -@import "gitlab_bootstrap/buttons.scss"; -@import "gitlab_bootstrap/blocks.scss"; -@import "gitlab_bootstrap/files.scss"; -@import "gitlab_bootstrap/tables.scss"; -@import "gitlab_bootstrap/lists.scss"; - - -/** - * Most of application styles placed here. - * This file represent common UI that should not be changed between themes - * or project restyling like form width or user avatar class or commit title - * - * TODO: clean it - */ -@import "common.scss"; - -/** - * Styles related to specific part of app - */ @import "sections/commits.scss"; @import "sections/issues.scss"; @import "sections/projects.scss"; @@ -95,47 +17,21 @@ $baseLineHeight: 18px !default; @import "sections/graph.scss"; @import "sections/events.scss"; @import "sections/themes.scss"; - -/** - * This scss file redefine chozen selectbox styles for - * project Branch/Tag select element - */ -@import "ref_select.scss"; - -/** - * Code (files list) styles. Browsing project files there - */ @import "sections/tree.scss"; - -/** - * This file represent notes(comments) styles - */ @import "sections/notes.scss"; - -/** - * This file represent profile styles - */ @import "sections/profile.scss"; - -/** - * Devise styles - */ @import "sections/login.scss"; +@import "sections/editor.scss"; -/** - * CODE HIGHTLIGHT BASE - * - */ @import "highlight/white.scss"; - -/** - * CODE HIGHTLIGHT DARK schema - * - */ @import "highlight/dark.scss"; /** - * File Editor styles - * + * UI themes: */ -@import "sections/editor.scss"; +@import "themes/ui_basic.scss"; +@import "themes/ui_mars.scss"; +@import "themes/ui_modern.scss"; +@import "themes/ui_gray.scss"; +@import "themes/ui_color.scss"; + diff --git a/app/assets/stylesheets/themes/ui_basic.scss b/app/assets/stylesheets/themes/ui_basic.scss index fee179899ce..b377727779a 100644 --- a/app/assets/stylesheets/themes/ui_basic.scss +++ b/app/assets/stylesheets/themes/ui_basic.scss @@ -4,18 +4,6 @@ * */ .ui_basic { - /* - * Common styles - * - */ - a { - color: $link_color; - &:hover { - text-decoration: none; - color: $primary_color; - } - } - .app_logo { .separator { margin-left: 0; -- cgit v1.2.1 From 965102b3f654544adada3283dcd0fab92028f253 Mon Sep 17 00:00:00 2001 From: Dmitriy Zaporozhets Date: Wed, 19 Dec 2012 19:02:12 +0200 Subject: Move mixins and variables under gitlab bootstrap --- app/assets/stylesheets/fonts.scss | 7 --- app/assets/stylesheets/gitlab_bootstrap.scss | 6 +- app/assets/stylesheets/gitlab_bootstrap/fonts.scss | 7 +++ .../stylesheets/gitlab_bootstrap/mixins.scss | 69 ++++++++++++++++++++++ .../stylesheets/gitlab_bootstrap/variables.scss | 5 ++ app/assets/stylesheets/mixins.scss | 69 ---------------------- app/assets/stylesheets/variables.scss | 5 -- 7 files changed, 84 insertions(+), 84 deletions(-) delete mode 100644 app/assets/stylesheets/fonts.scss create mode 100644 app/assets/stylesheets/gitlab_bootstrap/fonts.scss create mode 100644 app/assets/stylesheets/gitlab_bootstrap/mixins.scss create mode 100644 app/assets/stylesheets/gitlab_bootstrap/variables.scss delete mode 100644 app/assets/stylesheets/mixins.scss delete mode 100644 app/assets/stylesheets/variables.scss diff --git a/app/assets/stylesheets/fonts.scss b/app/assets/stylesheets/fonts.scss deleted file mode 100644 index 88c966d18f7..00000000000 --- a/app/assets/stylesheets/fonts.scss +++ /dev/null @@ -1,7 +0,0 @@ -@font-face{ - font-family: Korolev; - src: font-url('korolev-medium-compressed.otf'); -} - -/** Typo **/ -$monospace: 'Menlo', 'Liberation Mono', 'Consolas', 'Courier New', 'andale mono', 'lucida console', monospace; \ No newline at end of file diff --git a/app/assets/stylesheets/gitlab_bootstrap.scss b/app/assets/stylesheets/gitlab_bootstrap.scss index d2efe1fa06a..f53e0e50bab 100644 --- a/app/assets/stylesheets/gitlab_bootstrap.scss +++ b/app/assets/stylesheets/gitlab_bootstrap.scss @@ -8,15 +8,15 @@ $baseLineHeight: 18px !default; @import "bootstrap/responsive-1200px-min"; @import "font-awesome"; -@import "variables.scss"; -@import "fonts.scss"; -@import "mixins.scss"; /** * GitLab bootstrap. * Overrides some styles of twitter bootstrap. * Also give some common classes for GitLab app */ +@import "gitlab_bootstrap/variables.scss"; +@import "gitlab_bootstrap/fonts.scss"; +@import "gitlab_bootstrap/mixins.scss"; @import "gitlab_bootstrap/common.scss"; @import "gitlab_bootstrap/typography.scss"; @import "gitlab_bootstrap/buttons.scss"; diff --git a/app/assets/stylesheets/gitlab_bootstrap/fonts.scss b/app/assets/stylesheets/gitlab_bootstrap/fonts.scss new file mode 100644 index 00000000000..88c966d18f7 --- /dev/null +++ b/app/assets/stylesheets/gitlab_bootstrap/fonts.scss @@ -0,0 +1,7 @@ +@font-face{ + font-family: Korolev; + src: font-url('korolev-medium-compressed.otf'); +} + +/** Typo **/ +$monospace: 'Menlo', 'Liberation Mono', 'Consolas', 'Courier New', 'andale mono', 'lucida console', monospace; \ No newline at end of file diff --git a/app/assets/stylesheets/gitlab_bootstrap/mixins.scss b/app/assets/stylesheets/gitlab_bootstrap/mixins.scss new file mode 100644 index 00000000000..81830368c4c --- /dev/null +++ b/app/assets/stylesheets/gitlab_bootstrap/mixins.scss @@ -0,0 +1,69 @@ +/** + * Generic mixins + */ + @mixin box-shadow($shadow) { + -webkit-box-shadow: $shadow; + -moz-box-shadow: $shadow; + -ms-box-shadow: $shadow; + -o-box-shadow: $shadow; + box-shadow: $shadow; +} + +@mixin border-radius($radius) { + -webkit-border-radius: $radius; + -moz-border-radius: $radius; + -ms-border-radius: $radius; + -o-border-radius: $radius; + border-radius: $radius; +} + +@mixin linear-gradient($from, $to) { + background-image: -webkit-gradient(linear, 0 0, 0 100%, from($from), to($to)); + background-image: -webkit-linear-gradient($from, $to); + background-image: -moz-linear-gradient($from, $to); + background-image: -o-linear-gradient($from, $to); +} + +/** + * Prefilled mixins + * Mixins with fixed values + */ +@mixin bg-light-gray-gradient { + background: #f1f1f1; + background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, #f5f5f5), to(#e1e1e1)); + background-image: -webkit-linear-gradient(#f5f5f5 6.6%, #e1e1e1); + background-image: -moz-linear-gradient(#f5f5f5 6.6%, #e1e1e1); + background-image: -o-linear-gradient(#f5f5f5 6.6%, #e1e1e1); +} + +@mixin bg-gray-gradient { + background: #eee; + background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, #eee), to(#dfdfdf)); + background-image: -webkit-linear-gradient(#eee 6.6%, #dfdfdf); + background-image: -moz-linear-gradient(#eee 6.6%, #dfdfdf); + background-image: -o-linear-gradient(#eee 6.6%, #dfdfdf); +} + +@mixin bg-dark-gray-gradient { + background: #eee; + background-image: -webkit-linear-gradient(#e9e9e9, #d7d7d7); + background-image: -moz-linear-gradient(#e9e9e9, #d7d7d7); + background-image: -o-linear-gradient(#e9e9e9, #d7d7d7); +} + +@mixin shade { + @include box-shadow(0 0 3px #ddd); +} + +@mixin solid-shade { + @include box-shadow(0 0 0 3px #f1f1f1); +} + +@mixin header-font { + color: $style_color; + text-shadow: 0 1px 1px #FFF; + font-family: 'Korolev', sans-serif; + font-size: 28px; + line-height: 48px; + font-weight: normal; +} diff --git a/app/assets/stylesheets/gitlab_bootstrap/variables.scss b/app/assets/stylesheets/gitlab_bootstrap/variables.scss new file mode 100644 index 00000000000..869eb168c0d --- /dev/null +++ b/app/assets/stylesheets/gitlab_bootstrap/variables.scss @@ -0,0 +1,5 @@ +/** Colors **/ +$primary_color: #2FA0BB; +$link_color: #3A89A3; +$style_color: #474D57; +$hover: #D9EDF7; diff --git a/app/assets/stylesheets/mixins.scss b/app/assets/stylesheets/mixins.scss deleted file mode 100644 index 81830368c4c..00000000000 --- a/app/assets/stylesheets/mixins.scss +++ /dev/null @@ -1,69 +0,0 @@ -/** - * Generic mixins - */ - @mixin box-shadow($shadow) { - -webkit-box-shadow: $shadow; - -moz-box-shadow: $shadow; - -ms-box-shadow: $shadow; - -o-box-shadow: $shadow; - box-shadow: $shadow; -} - -@mixin border-radius($radius) { - -webkit-border-radius: $radius; - -moz-border-radius: $radius; - -ms-border-radius: $radius; - -o-border-radius: $radius; - border-radius: $radius; -} - -@mixin linear-gradient($from, $to) { - background-image: -webkit-gradient(linear, 0 0, 0 100%, from($from), to($to)); - background-image: -webkit-linear-gradient($from, $to); - background-image: -moz-linear-gradient($from, $to); - background-image: -o-linear-gradient($from, $to); -} - -/** - * Prefilled mixins - * Mixins with fixed values - */ -@mixin bg-light-gray-gradient { - background: #f1f1f1; - background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, #f5f5f5), to(#e1e1e1)); - background-image: -webkit-linear-gradient(#f5f5f5 6.6%, #e1e1e1); - background-image: -moz-linear-gradient(#f5f5f5 6.6%, #e1e1e1); - background-image: -o-linear-gradient(#f5f5f5 6.6%, #e1e1e1); -} - -@mixin bg-gray-gradient { - background: #eee; - background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, #eee), to(#dfdfdf)); - background-image: -webkit-linear-gradient(#eee 6.6%, #dfdfdf); - background-image: -moz-linear-gradient(#eee 6.6%, #dfdfdf); - background-image: -o-linear-gradient(#eee 6.6%, #dfdfdf); -} - -@mixin bg-dark-gray-gradient { - background: #eee; - background-image: -webkit-linear-gradient(#e9e9e9, #d7d7d7); - background-image: -moz-linear-gradient(#e9e9e9, #d7d7d7); - background-image: -o-linear-gradient(#e9e9e9, #d7d7d7); -} - -@mixin shade { - @include box-shadow(0 0 3px #ddd); -} - -@mixin solid-shade { - @include box-shadow(0 0 0 3px #f1f1f1); -} - -@mixin header-font { - color: $style_color; - text-shadow: 0 1px 1px #FFF; - font-family: 'Korolev', sans-serif; - font-size: 28px; - line-height: 48px; - font-weight: normal; -} diff --git a/app/assets/stylesheets/variables.scss b/app/assets/stylesheets/variables.scss deleted file mode 100644 index 869eb168c0d..00000000000 --- a/app/assets/stylesheets/variables.scss +++ /dev/null @@ -1,5 +0,0 @@ -/** Colors **/ -$primary_color: #2FA0BB; -$link_color: #3A89A3; -$style_color: #474D57; -$hover: #D9EDF7; -- cgit v1.2.1 From 9b57bf78112017072ff3303946f9f2129a015cba Mon Sep 17 00:00:00 2001 From: Dmitriy Zaporozhets Date: Wed, 19 Dec 2012 20:57:41 +0200 Subject: Remove main. Use application.scss instead --- app/assets/stylesheets/application.css | 10 ------- app/assets/stylesheets/application.scss | 47 +++++++++++++++++++++++++++++++++ app/assets/stylesheets/main.scss | 37 -------------------------- 3 files changed, 47 insertions(+), 47 deletions(-) delete mode 100644 app/assets/stylesheets/application.css create mode 100644 app/assets/stylesheets/application.scss delete mode 100644 app/assets/stylesheets/main.scss diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css deleted file mode 100644 index a23d4532915..00000000000 --- a/app/assets/stylesheets/application.css +++ /dev/null @@ -1,10 +0,0 @@ -/* - * This is a manifest file that'll automatically include all the stylesheets available in this directory - * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at - * the top of the compiled file, but it's generally better to create a new file per style scope. - *= require jquery.ui.gitlab - *= require jquery.atwho - *= require chosen - *= require_self - *= require main -*/ diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss new file mode 100644 index 00000000000..54690e73f81 --- /dev/null +++ b/app/assets/stylesheets/application.scss @@ -0,0 +1,47 @@ +/* + * This is a manifest file that'll automatically include all the stylesheets available in this directory + * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at + * the top of the compiled file, but it's generally better to create a new file per style scope. + *= require jquery.ui.gitlab + *= require jquery.atwho + *= require chosen + *= require_self +*/ + +/** + * GitLab bootstrap: + */ +@import "gitlab_bootstrap.scss"; + +@import "common.scss"; +@import "ref_select.scss"; + +@import "sections/header.scss"; +@import "sections/nav.scss"; +@import "sections/commits.scss"; +@import "sections/issues.scss"; +@import "sections/projects.scss"; +@import "sections/snippets.scss"; +@import "sections/votes.scss"; +@import "sections/merge_requests.scss"; +@import "sections/graph.scss"; +@import "sections/events.scss"; +@import "sections/themes.scss"; +@import "sections/tree.scss"; +@import "sections/notes.scss"; +@import "sections/profile.scss"; +@import "sections/login.scss"; +@import "sections/editor.scss"; + +@import "highlight/white.scss"; +@import "highlight/dark.scss"; + +/** + * UI themes: + */ +@import "themes/ui_basic.scss"; +@import "themes/ui_mars.scss"; +@import "themes/ui_modern.scss"; +@import "themes/ui_gray.scss"; +@import "themes/ui_color.scss"; + diff --git a/app/assets/stylesheets/main.scss b/app/assets/stylesheets/main.scss deleted file mode 100644 index e74bc9d15cb..00000000000 --- a/app/assets/stylesheets/main.scss +++ /dev/null @@ -1,37 +0,0 @@ -/** - * GitLab bootstrap: - */ -@import "gitlab_bootstrap.scss"; - -@import "common.scss"; -@import "ref_select.scss"; - -@import "sections/header.scss"; -@import "sections/nav.scss"; -@import "sections/commits.scss"; -@import "sections/issues.scss"; -@import "sections/projects.scss"; -@import "sections/snippets.scss"; -@import "sections/votes.scss"; -@import "sections/merge_requests.scss"; -@import "sections/graph.scss"; -@import "sections/events.scss"; -@import "sections/themes.scss"; -@import "sections/tree.scss"; -@import "sections/notes.scss"; -@import "sections/profile.scss"; -@import "sections/login.scss"; -@import "sections/editor.scss"; - -@import "highlight/white.scss"; -@import "highlight/dark.scss"; - -/** - * UI themes: - */ -@import "themes/ui_basic.scss"; -@import "themes/ui_mars.scss"; -@import "themes/ui_modern.scss"; -@import "themes/ui_gray.scss"; -@import "themes/ui_color.scss"; - -- cgit v1.2.1