Merge pull request #2311 from gitlabhq/refactor_scss

Better organization of styles

8 files changed, 73 insertions, 163 deletions

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/gitlab_bootstrap.scss b/app/assets/stylesheets/gitlab_bootstrap.scss
new file mode 100644
index 00000000000..f53e0e50bab
--- /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";
+
+/**
+ * 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";
+@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/fonts.scss b/app/assets/stylesheets/gitlab_bootstrap/fonts.scss
index 88c966d18f7..88c966d18f7 100644
--- a/app/assets/stylesheets/fonts.scss
+++ b/app/assets/stylesheets/gitlab_bootstrap/fonts.scss
diff --git a/app/assets/stylesheets/mixins.scss b/app/assets/stylesheets/gitlab_bootstrap/mixins.scss
index 81830368c4c..81830368c4c 100644
--- a/app/assets/stylesheets/mixins.scss
+++ b/app/assets/stylesheets/gitlab_bootstrap/mixins.scss
diff --git a/app/assets/stylesheets/variables.scss b/app/assets/stylesheets/gitlab_bootstrap/variables.scss
index 869eb168c0d..869eb168c0d 100644
--- a/app/assets/stylesheets/variables.scss
+++ b/app/assets/stylesheets/gitlab_bootstrap/variables.scss
diff --git a/app/assets/stylesheets/main.scss b/app/assets/stylesheets/main.scss
deleted file mode 100644
index ccae351eb8f..00000000000
--- a/app/assets/stylesheets/main.scss
+++ /dev/null
@@ -1,141 +0,0 @@
-/** 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
- */
-@import "variables.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";
-
-/**
- * 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";
-@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";
-
-/**
- * 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";
-
-/**
- * CODE HIGHTLIGHT BASE
- *
- */
-@import "highlight/white.scss";
-
-/**
- * CODE HIGHTLIGHT DARK schema
- *
- */
-@import "highlight/dark.scss";
-
-/**
- * File Editor styles
- *
- */
-@import "sections/editor.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;