Merge pull request #2311 from gitlabhq/refactor_scss

Better organization of styles

app/assets/stylesheets/application.css → app/assets/stylesheets/application.scss

@@ -6,5 +6,42 @@
  *= require jquery.atwho
  *= require chosen
  *= require_self
- *= require main
 */
+
+/**
+ * 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";
+

app/assets/stylesheets/gitlab_bootstrap.scss

+/** 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";

app/assets/stylesheets/main.scss

-/** 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";

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;