Commit 755e4a470015ad83337943d62a32ede2921eda53
1 parent
eb1004f7
Exists in
master
and in
4 other branches
Removed css declarations out of main.scss, so main is only a collector
Fonts, variables and mixins are now all in their own stylesheets
Showing
4 changed files
with
106 additions
and
94 deletions
Show diff stats
@@ -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/main.scss
@@ -5,101 +5,26 @@ $baseLineHeight: 18px !default; | @@ -5,101 +5,26 @@ $baseLineHeight: 18px !default; | ||
5 | // BOOTSTRAP | 5 | // BOOTSTRAP |
6 | // ------------------ | 6 | // ------------------ |
7 | @import "bootstrap"; | 7 | @import "bootstrap"; |
8 | +@import "bootstrap-responsive"; | ||
9 | +@import "font-awesome"; | ||
8 | 10 | ||
9 | -// BOOTSTRAP RESPONSIVE | ||
10 | -// ------------------ | ||
11 | -@import "bootstrap/responsive-utilities"; | ||
12 | -@import "bootstrap/responsive-1200px-min"; | ||
13 | - | ||
14 | -// FONT AWESOME | ||
15 | -@import 'font-awesome'; | ||
16 | - | ||
17 | -/** GitLab colors **/ | ||
18 | -$link_color: #3A89A3; | ||
19 | -$blue_link: #2FA0BB; | ||
20 | -$style_color: #474D57; | ||
21 | -$hover: #D9EDF7; | ||
22 | -$hover_border: #ADF; | ||
23 | - | ||
24 | -/** GitLab Fonts **/ | ||
25 | -@font-face { font-family: Korolev; src: font-url('korolev-medium-compressed.otf'); } | ||
26 | -$monospace: 'Menlo', 'Liberation Mono', 'Consolas', 'Courier New', 'andale mono', 'lucida console', monospace; | ||
27 | - | ||
28 | -/** MIXINS **/ | ||
29 | -@mixin shade { | ||
30 | - -moz-box-shadow: 0 0 3px #ddd; | ||
31 | - -webkit-box-shadow: 0 0 3px #ddd; | ||
32 | - box-shadow: 0 0 3px #ddd; | ||
33 | -} | ||
34 | - | ||
35 | -@mixin solid_shade { | ||
36 | - -moz-box-shadow: 0 0 0 3px #f1f1f1; | ||
37 | - -webkit-box-shadow: 0 0 0 3px #f1f1f1; | ||
38 | - box-shadow: 0 0 0 3px #f1f1f1; | ||
39 | -} | ||
40 | - | ||
41 | -@mixin border-radius($radius) { | ||
42 | - -moz-border-radius: $radius; | ||
43 | - -webkit-border-radius: $radius; | ||
44 | - border-radius: $radius; | ||
45 | -} | ||
46 | - | ||
47 | -@mixin round-borders-bottom($radius) { | ||
48 | - border-top: 1px solid #eaeaea; | ||
49 | - -moz-border-radius-bottomright: $radius; | ||
50 | - -moz-border-radius-bottomleft: $radius; | ||
51 | - border-bottom-right-radius: $radius; | ||
52 | - border-bottom-left-radius: $radius; | ||
53 | - -webkit-border-bottom-left-radius: $radius; | ||
54 | - -webkit-border-bottom-right-radius: $radius; | ||
55 | -} | ||
56 | - | ||
57 | -@mixin round-borders-top($radius) { | ||
58 | - border-top: 1px solid #eaeaea; | ||
59 | - -moz-border-radius-topright: $radius; | ||
60 | - -moz-border-radius-topleft: $radius; | ||
61 | - border-top-right-radius: $radius; | ||
62 | - border-top-left-radius: $radius; | ||
63 | - -webkit-border-top-left-radius: $radius; | ||
64 | - -webkit-border-top-right-radius: $radius; | ||
65 | -} | ||
66 | - | ||
67 | -@mixin round-borders-all($radius) { | ||
68 | - border: 1px solid #eaeaea; | ||
69 | - -moz-border-radius: $radius; | ||
70 | - -webkit-border-radius: $radius; | ||
71 | - border-radius: $radius; | ||
72 | -} | ||
73 | - | ||
74 | -@mixin bg-gradient($from, $to) { | ||
75 | - background-image: -webkit-gradient(linear, 0 0, 0 100%, from($from), to($to)); | ||
76 | - background-image: -webkit-linear-gradient($from, $to); | ||
77 | - background-image: -moz-linear-gradient($from, $to); | ||
78 | - background-image: -o-linear-gradient($from, $to); | ||
79 | -} | ||
80 | - | ||
81 | -@mixin bg-light-gray-gradient { | ||
82 | - background:#f1f1f1; | ||
83 | - background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, #f5f5f5), to(#e1e1e1)); | ||
84 | - background-image: -webkit-linear-gradient(#f5f5f5 6.6%, #e1e1e1); | ||
85 | - background-image: -moz-linear-gradient(#f5f5f5 6.6%, #e1e1e1); | ||
86 | - background-image: -o-linear-gradient(#f5f5f5 6.6%, #e1e1e1); | ||
87 | -} | ||
88 | - | ||
89 | -@mixin bg-gray-gradient { | ||
90 | - background:#eee; | ||
91 | - background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, #eee), to(#dfdfdf)); | ||
92 | - background-image: -webkit-linear-gradient(#eee 6.6%, #dfdfdf); | ||
93 | - background-image: -moz-linear-gradient(#eee 6.6%, #dfdfdf); | ||
94 | - background-image: -o-linear-gradient(#eee 6.6%, #dfdfdf); | ||
95 | -} | ||
96 | - | ||
97 | -@mixin bg-dark-gray-gradient { | ||
98 | - background:#eee; | ||
99 | - background-image: -webkit-linear-gradient(#e9e9e9, #d7d7d7); | ||
100 | - background-image: -moz-linear-gradient(#e9e9e9, #d7d7d7); | ||
101 | - background-image: -o-linear-gradient(#e9e9e9, #d7d7d7); | ||
102 | -} | 11 | +/** |
12 | + * Variables | ||
13 | + * Contains colors | ||
14 | + */ | ||
15 | +@import "variables.scss"; | ||
16 | + | ||
17 | +/** | ||
18 | + * Custom fonts | ||
19 | + * Contains @font-face font Korolev and default $monotype | ||
20 | + */ | ||
21 | +@import "fonts.scss"; | ||
22 | + | ||
23 | +/** | ||
24 | + * General mixins. | ||
25 | + * Contains rounded borders, gradients and shades | ||
26 | + */ | ||
27 | +@import "mixins.scss"; | ||
103 | 28 | ||
104 | /** | 29 | /** |
105 | * Header of application. | 30 | * Header of application. |
@@ -0,0 +1,74 @@ | @@ -0,0 +1,74 @@ | ||
1 | +@mixin shade { | ||
2 | + -moz-box-shadow: 0 0 3px #ddd; | ||
3 | + -webkit-box-shadow: 0 0 3px #ddd; | ||
4 | + box-shadow: 0 0 3px #ddd; | ||
5 | +} | ||
6 | + | ||
7 | +@mixin solid_shade { | ||
8 | + -moz-box-shadow: 0 0 0 3px #f1f1f1; | ||
9 | + -webkit-box-shadow: 0 0 0 3px #f1f1f1; | ||
10 | + box-shadow: 0 0 0 3px #f1f1f1; | ||
11 | +} | ||
12 | + | ||
13 | +@mixin border-radius($radius) { | ||
14 | + -moz-border-radius: $radius; | ||
15 | + -webkit-border-radius: $radius; | ||
16 | + border-radius: $radius; | ||
17 | +} | ||
18 | + | ||
19 | +@mixin round-borders-bottom($radius) { | ||
20 | + border-top: 1px solid #eaeaea; | ||
21 | + -webkit-border-bottom-left-radius: $radius; | ||
22 | + -webkit-border-bottom-right-radius: $radius; | ||
23 | + -moz-border-radius-bottomright: $radius; | ||
24 | + -moz-border-radius-bottomleft: $radius; | ||
25 | + border-bottom-right-radius: $radius; | ||
26 | + border-bottom-left-radius: $radius; | ||
27 | +} | ||
28 | + | ||
29 | +@mixin round-borders-top($radius) { | ||
30 | + border-top: 1px solid #eaeaea; | ||
31 | + -moz-border-radius-topright: $radius; | ||
32 | + -moz-border-radius-topleft: $radius; | ||
33 | + border-top-right-radius: $radius; | ||
34 | + border-top-left-radius: $radius; | ||
35 | + -webkit-border-top-left-radius: $radius; | ||
36 | + -webkit-border-top-right-radius: $radius; | ||
37 | +} | ||
38 | + | ||
39 | +@mixin round-borders-all($radius) { | ||
40 | + border: 1px solid #eaeaea; | ||
41 | + -moz-border-radius: $radius; | ||
42 | + -webkit-border-radius: $radius; | ||
43 | + border-radius: $radius; | ||
44 | +} | ||
45 | + | ||
46 | +@mixin bg-gradient($from, $to) { | ||
47 | + background-image: -webkit-gradient(linear, 0 0, 0 100%, from($from), to($to)); | ||
48 | + background-image: -webkit-linear-gradient($from, $to); | ||
49 | + background-image: -moz-linear-gradient($from, $to); | ||
50 | + background-image: -o-linear-gradient($from, $to); | ||
51 | +} | ||
52 | + | ||
53 | +@mixin bg-light-gray-gradient { | ||
54 | + background:#f1f1f1; | ||
55 | + background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, #f5f5f5), to(#e1e1e1)); | ||
56 | + background-image: -webkit-linear-gradient(#f5f5f5 6.6%, #e1e1e1); | ||
57 | + background-image: -moz-linear-gradient(#f5f5f5 6.6%, #e1e1e1); | ||
58 | + background-image: -o-linear-gradient(#f5f5f5 6.6%, #e1e1e1); | ||
59 | +} | ||
60 | + | ||
61 | +@mixin bg-gray-gradient { | ||
62 | + background:#eee; | ||
63 | + background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, #eee), to(#dfdfdf)); | ||
64 | + background-image: -webkit-linear-gradient(#eee 6.6%, #dfdfdf); | ||
65 | + background-image: -moz-linear-gradient(#eee 6.6%, #dfdfdf); | ||
66 | + background-image: -o-linear-gradient(#eee 6.6%, #dfdfdf); | ||
67 | +} | ||
68 | + | ||
69 | +@mixin bg-dark-gray-gradient { | ||
70 | + background:#eee; | ||
71 | + background-image: -webkit-linear-gradient(#e9e9e9, #d7d7d7); | ||
72 | + background-image: -moz-linear-gradient(#e9e9e9, #d7d7d7); | ||
73 | + background-image: -o-linear-gradient(#e9e9e9, #d7d7d7); | ||
74 | +} |