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 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 17 * Twitter bootstrap:
... ... @@ -28,6 +29,10 @@ $font-size-base: 13px !default;
28 29 */
29 30 @import "generic.scss";
30 31  
  32 +
  33 +/**
  34 + * Unrefactored css
  35 + */
31 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 1 @import "generic/avatar.scss";
5 2 @import "generic/nav.scss";
6 3 @import "generic/common.scss";
... ...
app/assets/stylesheets/generic/fonts.scss
View file @da41efc
... ... @@ -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   -/**
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   -/**
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 @@
  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 @@
  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 @@
  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;
... ...