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   -/*
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 @@
  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   -@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 0 \ No newline at end of file
app/assets/stylesheets/gitlab_bootstrap.scss 0 → 100644
  Diff comments   View file @9826db1
... ... @@ -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 @@
  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 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 @@
  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 @@
  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   -/** 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   -/**
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 4 *
5 5 */
6 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 7 .app_logo {
20 8 .separator {
21 9 margin-left: 0;
... ...
app/assets/stylesheets/variables.scss
View file @4ea9b33
... ... @@ -1,5 +0,0 @@
1   -/** Colors **/
2   -$primary_color: #2FA0BB;
3   -$link_color: #3A89A3;
4   -$style_color: #474D57;
5   -$hover: #D9EDF7;