Download as
Browse Code »

Commit 9826db17e756c71eed5abdf75e3b5d2d105dff1a

Authored by Dmitriy Zaporozhets
2 parents 4ea9b333 9b57bf78
Exists in master and in 4 other branches 6-8-stable, 7-0-stable, 7-0-stable-spb, spb-stable

Merge pull request #2311 from gitlabhq/refactor_scss 

Better organization of styles
Showing 11 changed files with 154 additions and 244 deletions   Show diff stats
app/assets/stylesheets/application.css
View file @4ea9b33
@@ -1,10 +0,0 @@ @@ -1,10 +0,0 @@
1 -/*  
2 - * This is a manifest file that'll automatically include all the stylesheets available in this directory  
3 - * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at  
4 - * the top of the compiled file, but it's generally better to create a new file per style scope.  
5 - *= require jquery.ui.gitlab  
6 - *= require jquery.atwho  
7 - *= require chosen  
8 - *= require_self  
9 - *= require main  
10 -*/  
app/assets/stylesheets/application.scss 0 → 100644
  Diff comments   View file @9826db1
@@ -0,0 +1,47 @@ @@ -0,0 +1,47 @@
  1 +/*
  2 + * This is a manifest file that'll automatically include all the stylesheets available in this directory
  3 + * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
  4 + * the top of the compiled file, but it's generally better to create a new file per style scope.
  5 + *= require jquery.ui.gitlab
  6 + *= require jquery.atwho
  7 + *= require chosen
  8 + *= require_self
  9 +*/
  10 +
  11 +/**
  12 + * GitLab bootstrap:
  13 + */
  14 +@import "gitlab_bootstrap.scss";
  15 +
  16 +@import "common.scss";
  17 +@import "ref_select.scss";
  18 +
  19 +@import "sections/header.scss";
  20 +@import "sections/nav.scss";
  21 +@import "sections/commits.scss";
  22 +@import "sections/issues.scss";
  23 +@import "sections/projects.scss";
  24 +@import "sections/snippets.scss";
  25 +@import "sections/votes.scss";
  26 +@import "sections/merge_requests.scss";
  27 +@import "sections/graph.scss";
  28 +@import "sections/events.scss";
  29 +@import "sections/themes.scss";
  30 +@import "sections/tree.scss";
  31 +@import "sections/notes.scss";
  32 +@import "sections/profile.scss";
  33 +@import "sections/login.scss";
  34 +@import "sections/editor.scss";
  35 +
  36 +@import "highlight/white.scss";
  37 +@import "highlight/dark.scss";
  38 +
  39 +/**
  40 + * UI themes:
  41 + */
  42 +@import "themes/ui_basic.scss";
  43 +@import "themes/ui_mars.scss";
  44 +@import "themes/ui_modern.scss";
  45 +@import "themes/ui_gray.scss";
  46 +@import "themes/ui_color.scss";
  47 +
app/assets/stylesheets/fonts.scss
View file @4ea9b33
@@ -1,7 +0,0 @@ @@ -1,7 +0,0 @@
1 -@font-face{  
2 - font-family: Korolev;  
3 - src: font-url('korolev-medium-compressed.otf');  
4 -}  
5 -  
6 -/** Typo **/  
7 -$monospace: 'Menlo', 'Liberation Mono', 'Consolas', 'Courier New', 'andale mono', 'lucida console', monospace;  
8 \ No newline at end of file 0 \ No newline at end of file
app/assets/stylesheets/gitlab_bootstrap.scss 0 → 100644
  Diff comments   View file @9826db1
@@ -0,0 +1,26 @@ @@ -0,0 +1,26 @@
  1 +/** Override bootstrap variables **/
  2 +$baseFontSize: 13px !default;
  3 +$baseLineHeight: 18px !default;
  4 +
  5 +// BOOTSTRAP
  6 +@import "bootstrap";
  7 +@import "bootstrap/responsive-utilities";
  8 +@import "bootstrap/responsive-1200px-min";
  9 +
  10 +@import "font-awesome";
  11 +
  12 +/**
  13 + * GitLab bootstrap.
  14 + * Overrides some styles of twitter bootstrap.
  15 + * Also give some common classes for GitLab app
  16 + */
  17 +@import "gitlab_bootstrap/variables.scss";
  18 +@import "gitlab_bootstrap/fonts.scss";
  19 +@import "gitlab_bootstrap/mixins.scss";
  20 +@import "gitlab_bootstrap/common.scss";
  21 +@import "gitlab_bootstrap/typography.scss";
  22 +@import "gitlab_bootstrap/buttons.scss";
  23 +@import "gitlab_bootstrap/blocks.scss";
  24 +@import "gitlab_bootstrap/files.scss";
  25 +@import "gitlab_bootstrap/tables.scss";
  26 +@import "gitlab_bootstrap/lists.scss";
app/assets/stylesheets/gitlab_bootstrap/fonts.scss 0 → 100644
  Diff comments   View file @9826db1
@@ -0,0 +1,7 @@ @@ -0,0 +1,7 @@
  1 +@font-face{
  2 + font-family: Korolev;
  3 + src: font-url('korolev-medium-compressed.otf');
  4 +}
  5 +
  6 +/** Typo **/
  7 +$monospace: 'Menlo', 'Liberation Mono', 'Consolas', 'Courier New', 'andale mono', 'lucida console', monospace;
0 \ No newline at end of file 8 \ No newline at end of file
app/assets/stylesheets/gitlab_bootstrap/mixins.scss 0 → 100644
  Diff comments   View file @9826db1
@@ -0,0 +1,69 @@ @@ -0,0 +1,69 @@
  1 +/**
  2 + * Generic mixins
  3 + */
  4 + @mixin box-shadow($shadow) {
  5 + -webkit-box-shadow: $shadow;
  6 + -moz-box-shadow: $shadow;
  7 + -ms-box-shadow: $shadow;
  8 + -o-box-shadow: $shadow;
  9 + box-shadow: $shadow;
  10 +}
  11 +
  12 +@mixin border-radius($radius) {
  13 + -webkit-border-radius: $radius;
  14 + -moz-border-radius: $radius;
  15 + -ms-border-radius: $radius;
  16 + -o-border-radius: $radius;
  17 + border-radius: $radius;
  18 +}
  19 +
  20 +@mixin linear-gradient($from, $to) {
  21 + background-image: -webkit-gradient(linear, 0 0, 0 100%, from($from), to($to));
  22 + background-image: -webkit-linear-gradient($from, $to);
  23 + background-image: -moz-linear-gradient($from, $to);
  24 + background-image: -o-linear-gradient($from, $to);
  25 +}
  26 +
  27 +/**
  28 + * Prefilled mixins
  29 + * Mixins with fixed values
  30 + */
  31 +@mixin bg-light-gray-gradient {
  32 + background: #f1f1f1;
  33 + background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, #f5f5f5), to(#e1e1e1));
  34 + background-image: -webkit-linear-gradient(#f5f5f5 6.6%, #e1e1e1);
  35 + background-image: -moz-linear-gradient(#f5f5f5 6.6%, #e1e1e1);
  36 + background-image: -o-linear-gradient(#f5f5f5 6.6%, #e1e1e1);
  37 +}
  38 +
  39 +@mixin bg-gray-gradient {
  40 + background: #eee;
  41 + background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, #eee), to(#dfdfdf));
  42 + background-image: -webkit-linear-gradient(#eee 6.6%, #dfdfdf);
  43 + background-image: -moz-linear-gradient(#eee 6.6%, #dfdfdf);
  44 + background-image: -o-linear-gradient(#eee 6.6%, #dfdfdf);
  45 +}
  46 +
  47 +@mixin bg-dark-gray-gradient {
  48 + background: #eee;
  49 + background-image: -webkit-linear-gradient(#e9e9e9, #d7d7d7);
  50 + background-image: -moz-linear-gradient(#e9e9e9, #d7d7d7);
  51 + background-image: -o-linear-gradient(#e9e9e9, #d7d7d7);
  52 +}
  53 +
  54 +@mixin shade {
  55 + @include box-shadow(0 0 3px #ddd);
  56 +}
  57 +
  58 +@mixin solid-shade {
  59 + @include box-shadow(0 0 0 3px #f1f1f1);
  60 +}
  61 +
  62 +@mixin header-font {
  63 + color: $style_color;
  64 + text-shadow: 0 1px 1px #FFF;
  65 + font-family: 'Korolev', sans-serif;
  66 + font-size: 28px;
  67 + line-height: 48px;
  68 + font-weight: normal;
  69 +}
app/assets/stylesheets/gitlab_bootstrap/variables.scss 0 → 100644
  Diff comments   View file @9826db1
@@ -0,0 +1,5 @@ @@ -0,0 +1,5 @@
  1 +/** Colors **/
  2 +$primary_color: #2FA0BB;
  3 +$link_color: #3A89A3;
  4 +$style_color: #474D57;
  5 +$hover: #D9EDF7;
app/assets/stylesheets/main.scss
View file @4ea9b33
@@ -1,141 +0,0 @@ @@ -1,141 +0,0 @@
1 -/** Override bootstrap variables **/  
2 -$baseFontSize: 13px !default;  
3 -$baseLineHeight: 18px !default;  
4 -  
5 -// BOOTSTRAP  
6 -@import "bootstrap";  
7 -@import "bootstrap/responsive-utilities";  
8 -@import "bootstrap/responsive-1200px-min";  
9 -  
10 -// FONT AWESOME  
11 -@import "font-awesome";  
12 -  
13 -/**  
14 - * Variables  
15 - * Contains colors  
16 - */  
17 -@import "variables.scss";  
18 -  
19 -/**  
20 - * Custom fonts  
21 - * Contains @font-face font Korolev and default $monotype  
22 - */  
23 -@import "fonts.scss";  
24 -  
25 -/**  
26 - * General mixins.  
27 - * Contains rounded borders, gradients and shades  
28 - */  
29 -@import "mixins.scss";  
30 -  
31 -/**  
32 - * Header of application.  
33 - * Contain application logo, search panel, profile icon  
34 - */  
35 -@import "sections/header.scss";  
36 -  
37 -/**  
38 - * Navigation menu of application.  
39 - * Panel with links to pages depends on project, profile or admin area  
40 - */  
41 -@import "sections/nav.scss";  
42 -  
43 -/**  
44 - * This file represent some UI that can be changed  
45 - * during web app restyle or theme select.  
46 - *  
47 - * Next items should be placed there  
48 - * - link, button colors  
49 - * - header restyles  
50 - * - main menu restyles  
51 - *  
52 - */  
53 -@import "themes/ui_basic.scss";  
54 -  
55 -/**  
56 - * UI themes:  
57 - */  
58 -@import "themes/ui_mars.scss";  
59 -@import "themes/ui_modern.scss";  
60 -@import "themes/ui_gray.scss";  
61 -@import "themes/ui_color.scss";  
62 -  
63 -/**  
64 - * GitLab bootstrap.  
65 - * Overrides some styles of twitter bootstrap.  
66 - * Also give some common classes for GitLab app  
67 - */  
68 -@import "gitlab_bootstrap/common.scss";  
69 -@import "gitlab_bootstrap/typography.scss";  
70 -@import "gitlab_bootstrap/buttons.scss";  
71 -@import "gitlab_bootstrap/blocks.scss";  
72 -@import "gitlab_bootstrap/files.scss";  
73 -@import "gitlab_bootstrap/tables.scss";  
74 -@import "gitlab_bootstrap/lists.scss";  
75 -  
76 -  
77 -/**  
78 - * Most of application styles placed here.  
79 - * This file represent common UI that should not be changed between themes  
80 - * or project restyling like form width or user avatar class or commit title  
81 - *  
82 - * TODO: clean it  
83 - */  
84 -@import "common.scss";  
85 -  
86 -/**  
87 - * Styles related to specific part of app  
88 - */  
89 -@import "sections/commits.scss";  
90 -@import "sections/issues.scss";  
91 -@import "sections/projects.scss";  
92 -@import "sections/snippets.scss";  
93 -@import "sections/votes.scss";  
94 -@import "sections/merge_requests.scss";  
95 -@import "sections/graph.scss";  
96 -@import "sections/events.scss";  
97 -@import "sections/themes.scss";  
98 -  
99 -/**  
100 - * This scss file redefine chozen selectbox styles for  
101 - * project Branch/Tag select element  
102 - */  
103 -@import "ref_select.scss";  
104 -  
105 -/**  
106 - * Code (files list) styles. Browsing project files there  
107 - */  
108 -@import "sections/tree.scss";  
109 -  
110 -/**  
111 - * This file represent notes(comments) styles  
112 - */  
113 -@import "sections/notes.scss";  
114 -  
115 -/**  
116 - * This file represent profile styles  
117 - */  
118 -@import "sections/profile.scss";  
119 -  
120 -/**  
121 - * Devise styles  
122 - */  
123 -@import "sections/login.scss";  
124 -  
125 -/**  
126 - * CODE HIGHTLIGHT BASE  
127 - *  
128 - */  
129 -@import "highlight/white.scss";  
130 -  
131 -/**  
132 - * CODE HIGHTLIGHT DARK schema  
133 - *  
134 - */  
135 -@import "highlight/dark.scss";  
136 -  
137 -/**  
138 - * File Editor styles  
139 - *  
140 - */  
141 -@import "sections/editor.scss";  
app/assets/stylesheets/mixins.scss
View file @4ea9b33
@@ -1,69 +0,0 @@ @@ -1,69 +0,0 @@
1 -/**  
2 - * Generic mixins  
3 - */  
4 - @mixin box-shadow($shadow) {  
5 - -webkit-box-shadow: $shadow;  
6 - -moz-box-shadow: $shadow;  
7 - -ms-box-shadow: $shadow;  
8 - -o-box-shadow: $shadow;  
9 - box-shadow: $shadow;  
10 -}  
11 -  
12 -@mixin border-radius($radius) {  
13 - -webkit-border-radius: $radius;  
14 - -moz-border-radius: $radius;  
15 - -ms-border-radius: $radius;  
16 - -o-border-radius: $radius;  
17 - border-radius: $radius;  
18 -}  
19 -  
20 -@mixin linear-gradient($from, $to) {  
21 - background-image: -webkit-gradient(linear, 0 0, 0 100%, from($from), to($to));  
22 - background-image: -webkit-linear-gradient($from, $to);  
23 - background-image: -moz-linear-gradient($from, $to);  
24 - background-image: -o-linear-gradient($from, $to);  
25 -}  
26 -  
27 -/**  
28 - * Prefilled mixins  
29 - * Mixins with fixed values  
30 - */  
31 -@mixin bg-light-gray-gradient {  
32 - background: #f1f1f1;  
33 - background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, #f5f5f5), to(#e1e1e1));  
34 - background-image: -webkit-linear-gradient(#f5f5f5 6.6%, #e1e1e1);  
35 - background-image: -moz-linear-gradient(#f5f5f5 6.6%, #e1e1e1);  
36 - background-image: -o-linear-gradient(#f5f5f5 6.6%, #e1e1e1);  
37 -}  
38 -  
39 -@mixin bg-gray-gradient {  
40 - background: #eee;  
41 - background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, #eee), to(#dfdfdf));  
42 - background-image: -webkit-linear-gradient(#eee 6.6%, #dfdfdf);  
43 - background-image: -moz-linear-gradient(#eee 6.6%, #dfdfdf);  
44 - background-image: -o-linear-gradient(#eee 6.6%, #dfdfdf);  
45 -}  
46 -  
47 -@mixin bg-dark-gray-gradient {  
48 - background: #eee;  
49 - background-image: -webkit-linear-gradient(#e9e9e9, #d7d7d7);  
50 - background-image: -moz-linear-gradient(#e9e9e9, #d7d7d7);  
51 - background-image: -o-linear-gradient(#e9e9e9, #d7d7d7);  
52 -}  
53 -  
54 -@mixin shade {  
55 - @include box-shadow(0 0 3px #ddd);  
56 -}  
57 -  
58 -@mixin solid-shade {  
59 - @include box-shadow(0 0 0 3px #f1f1f1);  
60 -}  
61 -  
62 -@mixin header-font {  
63 - color: $style_color;  
64 - text-shadow: 0 1px 1px #FFF;  
65 - font-family: 'Korolev', sans-serif;  
66 - font-size: 28px;  
67 - line-height: 48px;  
68 - font-weight: normal;  
69 -}  
app/assets/stylesheets/themes/ui_basic.scss
  Diff comments   View file @9826db1
@@ -4,18 +4,6 @@ @@ -4,18 +4,6 @@
4 * 4 *
5 */ 5 */
6 .ui_basic { 6 .ui_basic {
7 - /*  
8 - * Common styles  
9 - *  
10 - */  
11 - a {  
12 - color: $link_color;  
13 - &:hover {  
14 - text-decoration: none;  
15 - color: $primary_color;  
16 - }  
17 - }  
18 -  
19 .app_logo { 7 .app_logo {
20 .separator { 8 .separator {
21 margin-left: 0; 9 margin-left: 0;
app/assets/stylesheets/variables.scss
View file @4ea9b33
@@ -1,5 +0,0 @@ @@ -1,5 +0,0 @@
1 -/** Colors **/  
2 -$primary_color: #2FA0BB;  
3 -$link_color: #3A89A3;  
4 -$style_color: #474D57;  
5 -$hover: #D9EDF7;