Download as
Browse Code »

Commit da587351cf74b952043e58050a2cc09c62b4f835

Authored by Dmitriy Zaporozhets
1 parent da41efcf
Exists in spb-stable and in 3 other branches 6-8-stable, 7-0-stable, 7-0-stable-spb

refactor scss pt3 

Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>
Showing 8 changed files with 173 additions and 168 deletions   Show diff stats
app/assets/stylesheets/application.scss
  Diff comments   View file @da58735
@@ -9,8 +9,9 @@ @@ -9,8 +9,9 @@
9 *= require_self 9 *= require_self
10 */ 10 */
11 11
12 -/** Override bootstrap variables **/  
13 -$font-size-base: 13px !default; 12 +@import "main/variables.scss";
  13 +@import "main/mixins.scss";
  14 +@import "main/fonts.scss";
14 15
15 /** 16 /**
16 * Twitter bootstrap: 17 * Twitter bootstrap:
@@ -28,6 +29,10 @@ $font-size-base: 13px !default; @@ -28,6 +29,10 @@ $font-size-base: 13px !default;
28 */ 29 */
29 @import "generic.scss"; 30 @import "generic.scss";
30 31
  32 +
  33 +/**
  34 + * Unrefactored css
  35 + */
31 @import "common.scss"; 36 @import "common.scss";
32 37
33 38
app/assets/stylesheets/generic.scss
  Diff comments   View file @da58735
1 -@import "generic/variables.scss";  
2 -@import "generic/fonts.scss";  
3 -@import "generic/mixins.scss";  
4 @import "generic/avatar.scss"; 1 @import "generic/avatar.scss";
5 @import "generic/nav.scss"; 2 @import "generic/nav.scss";
6 @import "generic/common.scss"; 3 @import "generic/common.scss";
app/assets/stylesheets/generic/fonts.scss
View file @da41efc
@@ -1,2 +0,0 @@ @@ -1,2 +0,0 @@
1 -/** Typo **/  
2 -$monospace_font: 'Menlo', 'Liberation Mono', 'Consolas', 'Courier New', 'andale mono', 'lucida console', monospace;  
app/assets/stylesheets/generic/mixins.scss
View file @da41efc
@@ -1,148 +0,0 @@ @@ -1,148 +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 border-radius-left($radius) {  
21 - @include border-radius($radius 0 0 $radius)  
22 -}  
23 -  
24 -@mixin linear-gradient($from, $to) {  
25 - background-image: -webkit-gradient(linear, 0 0, 0 100%, from($from), to($to));  
26 - background-image: -webkit-linear-gradient($from, $to);  
27 - background-image: -moz-linear-gradient($from, $to);  
28 - background-image: -ms-linear-gradient($from, $to);  
29 - background-image: -o-linear-gradient($from, $to);  
30 -}  
31 -  
32 -@mixin transition($transition) {  
33 - -webkit-transition: $transition;  
34 - -moz-transition: $transition;  
35 - -ms-transition: $transition;  
36 - -o-transition: $transition;  
37 - transition: $transition;  
38 -}  
39 -  
40 -/**  
41 - * Prefilled mixins  
42 - * Mixins with fixed values  
43 - */  
44 -@mixin bg-light-gray-gradient {  
45 - background: #f1f1f1;  
46 - background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, #f5f5f5), to(#e1e1e1));  
47 - background-image: -webkit-linear-gradient(#f5f5f5 6.6%, #e1e1e1);  
48 - background-image: -moz-linear-gradient(#f5f5f5 6.6%, #e1e1e1);  
49 - background-image: -ms-linear-gradient(#f5f5f5 6.6%, #e1e1e1);  
50 - background-image: -o-linear-gradient(#f5f5f5 6.6%, #e1e1e1);  
51 -}  
52 -  
53 -@mixin bg-gray-gradient {  
54 - background: #eee;  
55 - background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, #eee), to(#dfdfdf));  
56 - background-image: -webkit-linear-gradient(#eee 6.6%, #dfdfdf);  
57 - background-image: -moz-linear-gradient(#eee 6.6%, #dfdfdf);  
58 - background-image: -ms-linear-gradient(#eee 6.6%, #dfdfdf);  
59 - background-image: -o-linear-gradient(#eee 6.6%, #dfdfdf);  
60 -}  
61 -  
62 -@mixin bg-dark-gray-gradient {  
63 - background: #eee;  
64 - background-image: -webkit-linear-gradient(#e9e9e9, #d7d7d7);  
65 - background-image: -moz-linear-gradient(#e9e9e9, #d7d7d7);  
66 - background-image: -ms-linear-gradient(#e9e9e9, #d7d7d7);  
67 - background-image: -o-linear-gradient(#e9e9e9, #d7d7d7);  
68 -}  
69 -  
70 -@mixin shade {  
71 - @include box-shadow(0 0 3px #ddd);  
72 -}  
73 -  
74 -@mixin solid-shade {  
75 - @include box-shadow(0 0 0 3px #f1f1f1);  
76 -}  
77 -  
78 -@mixin header-font {  
79 - color: $style_color;  
80 - text-shadow: 0 1px 1px #FFF;  
81 - font-size: 16px;  
82 - line-height: 44px;  
83 - font-weight: normal;  
84 -}  
85 -  
86 -@mixin md-typography {  
87 - img {  
88 - max-width: 100%;  
89 - }  
90 -  
91 - *:first-child {  
92 - margin-top: 0;  
93 - }  
94 -  
95 - code { padding: 0 4px; }  
96 -  
97 - h1 {  
98 - margin-top: 45px;  
99 - font-size: 2.5em;  
100 - }  
101 -  
102 - h2 {  
103 - margin-top: 40px;  
104 - font-size: 2em;  
105 - }  
106 -  
107 - h3 {  
108 - margin-top: 35px;  
109 - font-size: 2em;  
110 - }  
111 -  
112 - h4 {  
113 - margin-top: 30px;  
114 - font-size: 1.5em;  
115 - }  
116 -  
117 - blockquote p {  
118 - color: #888;  
119 - font-size: 14px;  
120 - line-height: 1.5;  
121 - }  
122 -  
123 - table {  
124 - @extend .table;  
125 - @extend .table-bordered;  
126 - th {  
127 - background: #EEE;  
128 - }  
129 - }  
130 -  
131 - code {  
132 - font-size: inherit;  
133 - font-weight: inherit;  
134 - color: #555;  
135 - }  
136 -  
137 - li {  
138 - line-height: 1.5;  
139 - }  
140 -}  
141 -  
142 -@mixin page-title {  
143 - color: #333;  
144 - font-size: 20px;  
145 - line-height: 1.5;  
146 - margin-top: 0px;  
147 - margin-bottom: 15px;  
148 -}  
app/assets/stylesheets/generic/variables.scss
View file @da41efc
@@ -1,13 +0,0 @@ @@ -1,13 +0,0 @@
1 -/**  
2 - * General Colors  
3 - */  
4 -$primary_color: #2FA0BB;  
5 -$link_color: #3A89A3;  
6 -$style_color: #474D57;  
7 -$hover: #D9EDF7;  
8 -  
9 -/**  
10 - * Commit Diff Colors  
11 - */  
12 -$added: #63c363;  
13 -$deleted: #f77;  
app/assets/stylesheets/main/fonts.scss 0 → 100644
  Diff comments   View file @da58735
@@ -0,0 +1,2 @@ @@ -0,0 +1,2 @@
  1 +/** Typo **/
  2 +$monospace_font: 'Menlo', 'Liberation Mono', 'Consolas', 'Courier New', 'andale mono', 'lucida console', monospace;
app/assets/stylesheets/main/mixins.scss 0 → 100644
  Diff comments   View file @da58735
@@ -0,0 +1,148 @@ @@ -0,0 +1,148 @@
  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 border-radius-left($radius) {
  21 + @include border-radius($radius 0 0 $radius)
  22 +}
  23 +
  24 +@mixin linear-gradient($from, $to) {
  25 + background-image: -webkit-gradient(linear, 0 0, 0 100%, from($from), to($to));
  26 + background-image: -webkit-linear-gradient($from, $to);
  27 + background-image: -moz-linear-gradient($from, $to);
  28 + background-image: -ms-linear-gradient($from, $to);
  29 + background-image: -o-linear-gradient($from, $to);
  30 +}
  31 +
  32 +@mixin transition($transition) {
  33 + -webkit-transition: $transition;
  34 + -moz-transition: $transition;
  35 + -ms-transition: $transition;
  36 + -o-transition: $transition;
  37 + transition: $transition;
  38 +}
  39 +
  40 +/**
  41 + * Prefilled mixins
  42 + * Mixins with fixed values
  43 + */
  44 +@mixin bg-light-gray-gradient {
  45 + background: #f1f1f1;
  46 + background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, #f5f5f5), to(#e1e1e1));
  47 + background-image: -webkit-linear-gradient(#f5f5f5 6.6%, #e1e1e1);
  48 + background-image: -moz-linear-gradient(#f5f5f5 6.6%, #e1e1e1);
  49 + background-image: -ms-linear-gradient(#f5f5f5 6.6%, #e1e1e1);
  50 + background-image: -o-linear-gradient(#f5f5f5 6.6%, #e1e1e1);
  51 +}
  52 +
  53 +@mixin bg-gray-gradient {
  54 + background: #eee;
  55 + background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, #eee), to(#dfdfdf));
  56 + background-image: -webkit-linear-gradient(#eee 6.6%, #dfdfdf);
  57 + background-image: -moz-linear-gradient(#eee 6.6%, #dfdfdf);
  58 + background-image: -ms-linear-gradient(#eee 6.6%, #dfdfdf);
  59 + background-image: -o-linear-gradient(#eee 6.6%, #dfdfdf);
  60 +}
  61 +
  62 +@mixin bg-dark-gray-gradient {
  63 + background: #eee;
  64 + background-image: -webkit-linear-gradient(#e9e9e9, #d7d7d7);
  65 + background-image: -moz-linear-gradient(#e9e9e9, #d7d7d7);
  66 + background-image: -ms-linear-gradient(#e9e9e9, #d7d7d7);
  67 + background-image: -o-linear-gradient(#e9e9e9, #d7d7d7);
  68 +}
  69 +
  70 +@mixin shade {
  71 + @include box-shadow(0 0 3px #ddd);
  72 +}
  73 +
  74 +@mixin solid-shade {
  75 + @include box-shadow(0 0 0 3px #f1f1f1);
  76 +}
  77 +
  78 +@mixin header-font {
  79 + color: $style_color;
  80 + text-shadow: 0 1px 1px #FFF;
  81 + font-size: 16px;
  82 + line-height: 44px;
  83 + font-weight: normal;
  84 +}
  85 +
  86 +@mixin md-typography {
  87 + img {
  88 + max-width: 100%;
  89 + }
  90 +
  91 + *:first-child {
  92 + margin-top: 0;
  93 + }
  94 +
  95 + code { padding: 0 4px; }
  96 +
  97 + h1 {
  98 + margin-top: 45px;
  99 + font-size: 2.5em;
  100 + }
  101 +
  102 + h2 {
  103 + margin-top: 40px;
  104 + font-size: 2em;
  105 + }
  106 +
  107 + h3 {
  108 + margin-top: 35px;
  109 + font-size: 2em;
  110 + }
  111 +
  112 + h4 {
  113 + margin-top: 30px;
  114 + font-size: 1.5em;
  115 + }
  116 +
  117 + blockquote p {
  118 + color: #888;
  119 + font-size: 14px;
  120 + line-height: 1.5;
  121 + }
  122 +
  123 + table {
  124 + @extend .table;
  125 + @extend .table-bordered;
  126 + th {
  127 + background: #EEE;
  128 + }
  129 + }
  130 +
  131 + code {
  132 + font-size: inherit;
  133 + font-weight: inherit;
  134 + color: #555;
  135 + }
  136 +
  137 + li {
  138 + line-height: 1.5;
  139 + }
  140 +}
  141 +
  142 +@mixin page-title {
  143 + color: #333;
  144 + font-size: 20px;
  145 + line-height: 1.5;
  146 + margin-top: 0px;
  147 + margin-bottom: 15px;
  148 +}
app/assets/stylesheets/main/variables.scss 0 → 100644
  Diff comments   View file @da58735
@@ -0,0 +1,16 @@ @@ -0,0 +1,16 @@
  1 +/** Override bootstrap variables **/
  2 +$font-size-base: 13px !default;
  3 +
  4 +/**
  5 + * General Colors
  6 + */
  7 +$primary_color: #2FA0BB;
  8 +$link_color: #3A89A3;
  9 +$style_color: #474D57;
  10 +$hover: #D9EDF7;
  11 +
  12 +/**
  13 + * Commit Diff Colors
  14 + */
  15 +$added: #63c363;
  16 +$deleted: #f77;