Download as
Browse Code »

Commit 71d4474684bb9bf38908e1aea296264b15f9060e

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

Move diff css to separate file 

Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>
Showing 3 changed files with 330 additions and 330 deletions   Show diff stats
app/assets/stylesheets/application.scss
  Diff comments   View file @71d4474
... ... @@ -48,6 +48,7 @@
48 48 @import "sections/header.scss";
49 49 @import "sections/nav.scss";
50 50 @import "sections/commits.scss";
  51 +@import "sections/diff.scss";
51 52 @import "sections/issues.scss";
52 53 @import "sections/projects.scss";
53 54 @import "sections/snippets.scss";
... ...
app/assets/stylesheets/sections/commits.scss
  Diff comments   View file @71d4474
... ... @@ -10,336 +10,6 @@
10 10 }
11 11 }
12 12  
13   -.diff-file {
14   - border: 1px solid #CCC;
15   - margin-bottom: 1em;
16   -
17   - .diff-header {
18   - @extend .clearfix;
19   - background: #DDD;
20   - border-bottom: 1px solid #CCC;
21   - padding: 5px 5px 5px 10px;
22   - color: #555;
23   -
24   - > span {
25   - font-family: $monospace_font;
26   - font-size: 14px;
27   - line-height: 2;
28   - }
29   -
30   - .diff-btn-group {
31   - float: right;
32   -
33   - .btn {
34   - background-color: #EEE;
35   - color: #666;
36   - font-weight: bolder;
37   - }
38   - }
39   -
40   - .commit-short-id {
41   - font-family: $monospace_font;
42   - font-size: smaller;
43   - }
44   -
45   - .file-mode {
46   - font-family: $monospace_font;
47   - }
48   - }
49   - .diff-content {
50   - overflow: auto;
51   - overflow-y: hidden;
52   - background: #FFF;
53   - color: #333;
54   - font-size: 12px;
55   - .old {
56   - span.idiff {
57   - background-color: #FAA;
58   - }
59   - }
60   - .new {
61   - span.idiff {
62   - background-color: #AFA;
63   - }
64   - }
65   -
66   - table {
67   - width: 100%;
68   - font-family: $monospace_font;
69   - border: none;
70   - margin: 0px;
71   - padding: 0px;
72   - td {
73   - line-height: 18px;
74   - font-size: 12px;
75   - }
76   - }
77   - .old_line, .new_line, .diff_line {
78   - margin: 0px;
79   - padding: 0px;
80   - border: none;
81   - background: #EEE;
82   - color: #666;
83   - padding: 0px 5px;
84   - border-right: 1px solid #ccc;
85   - text-align: right;
86   - min-width: 35px;
87   - max-width: 50px;
88   - width: 35px;
89   - @include user-select(none);
90   - a {
91   - float: left;
92   - width: 35px;
93   - font-weight: normal;
94   - color: #666;
95   - &:hover {
96   - text-decoration: underline;
97   - }
98   - }
99   - &.new {
100   - background: #CFD;
101   - }
102   - &.old {
103   - background: #FDD;
104   - }
105   - }
106   - .diff_line {
107   - padding: 0;
108   - }
109   - .line_holder {
110   - &.old .old_line,
111   - &.old .new_line {
112   - background: #FCC;
113   - border-color: #E7BABA;
114   - }
115   - &.new .old_line,
116   - &.new .new_line {
117   - background: #CFC;
118   - border-color: #B9ECB9;
119   - }
120   - }
121   - .line_content {
122   - display: block;
123   - white-space: pre;
124   - height: 18px;
125   - margin: 0px;
126   - padding: 0px 0.5em;
127   - border: none;
128   - &.new {
129   - background: #CFD;
130   - }
131   - &.old {
132   - background: #FDD;
133   - }
134   - &.matched {
135   - color: #ccc;
136   - background: #fafafa;
137   - }
138   - &.parallel {
139   - display: table-cell;
140   - overflow: hidden;
141   - width: 50%;
142   - }
143   - }
144   - }
145   - .image {
146   - background: #ddd;
147   - text-align: center;
148   - padding: 30px;
149   - .wrap{
150   - display: inline-block;
151   - }
152   -
153   - .frame {
154   - display: inline-block;
155   - background-color: #fff;
156   - line-height: 0;
157   - img{
158   - border: 1px solid #FFF;
159   - background: url('trans_bg.gif');
160   - max-width: 100%;
161   - }
162   - &.deleted {
163   - border: 1px solid $deleted;
164   - }
165   -
166   - &.added {
167   - border: 1px solid $added;
168   - }
169   - }
170   - .image-info{
171   - font-size: 12px;
172   - margin: 5px 0 0 0;
173   - color: grey;
174   - }
175   -
176   - .view.swipe{
177   - position: relative;
178   -
179   - .swipe-frame{
180   - display: block;
181   - margin: auto;
182   - position: relative;
183   - }
184   - .swipe-wrap{
185   - overflow: hidden;
186   - border-left: 1px solid #999;
187   - position: absolute;
188   - display: block;
189   - top: 13px;
190   - right: 7px;
191   - }
192   - .frame{
193   - top: 0;
194   - right: 0;
195   - position: absolute;
196   - &.deleted{
197   - margin: 0;
198   - display: block;
199   - top: 13px;
200   - right: 7px;
201   - }
202   - }
203   - .swipe-bar{
204   - display: block;
205   - height: 100%;
206   - width: 15px;
207   - z-index: 100;
208   - position: absolute;
209   - cursor: pointer;
210   - &:hover{
211   - .top-handle{
212   - background-position: -15px 3px;
213   - }
214   - .bottom-handle{
215   - background-position: -15px -11px;
216   - }
217   - };
218   - .top-handle{
219   - display: block;
220   - height: 14px;
221   - width: 15px;
222   - position: absolute;
223   - top: 0px;
224   - background: url('swipemode_sprites.gif') 0 3px no-repeat;
225   - }
226   - .bottom-handle{
227   - display: block;
228   - height: 14px;
229   - width: 15px;
230   - position: absolute;
231   - bottom: 0px;
232   - background: url('swipemode_sprites.gif') 0 -11px no-repeat;
233   - }
234   - }
235   - } //.view.swipe
236   - .view.onion-skin{
237   - .onion-skin-frame{
238   - display: block;
239   - margin: auto;
240   - position: relative;
241   - }
242   - .frame.added, .frame.deleted {
243   - position: absolute;
244   - display: block;
245   - top: 0px;
246   - left: 0px;
247   - }
248   - .controls{
249   - display: block;
250   - height: 14px;
251   - width: 300px;
252   - z-index: 100;
253   - position: absolute;
254   - bottom: 0px;
255   - left: 50%;
256   - margin-left: -150px;
257   -
258   - .drag-track{
259   - display: block;
260   - position: absolute;
261   - left: 12px;
262   - height: 10px;
263   - width: 276px;
264   - background: url('onion_skin_sprites.gif') -4px -20px repeat-x;
265   - }
266   -
267   - .dragger {
268   - display: block;
269   - position: absolute;
270   - left: 0px;
271   - top: 0px;
272   - height: 14px;
273   - width: 14px;
274   - background: url('onion_skin_sprites.gif') 0px -34px repeat-x;
275   - cursor: pointer;
276   - }
277   -
278   - .transparent {
279   - display: block;
280   - position: absolute;
281   - top: 2px;
282   - right: 0px;
283   - height: 10px;
284   - width: 10px;
285   - background: url('onion_skin_sprites.gif') -2px 0px no-repeat;
286   - }
287   -
288   - .opaque {
289   - display: block;
290   - position: absolute;
291   - top: 2px;
292   - left: 0px;
293   - height: 10px;
294   - width: 10px;
295   - background: url('onion_skin_sprites.gif') -2px -10px no-repeat;
296   - }
297   - }
298   - } //.view.onion-skin
299   - }
300   - .view-modes{
301   -
302   - padding: 10px;
303   - text-align: center;
304   -
305   - background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, #eee), to(#dfdfdf));
306   - background-image: -webkit-linear-gradient(#eee 6.6%, #dfdfdf);
307   - background-image: -moz-linear-gradient(#eee 6.6%, #dfdfdf);
308   - background-image: -ms-linear-gradient(#eee 6.6%, #dfdfdf);
309   - background-image: -o-linear-gradient(#eee 6.6%, #dfdfdf);
310   -
311   - ul, li{
312   - list-style: none;
313   - margin: 0;
314   - padding: 0;
315   - display: inline-block;
316   - }
317   -
318   - li{
319   - color: grey;
320   - border-left: 1px solid #c1c1c1;
321   - padding: 0 12px 0 16px;
322   - cursor: pointer;
323   - &:first-child{
324   - border-left: none;
325   - }
326   - &:hover{
327   - text-decoration: underline;
328   - }
329   - &.active{
330   - &:hover{
331   - text-decoration: none;
332   - }
333   - cursor: default;
334   - color: #333;
335   - }
336   - &.disabled{
337   - display: none;
338   - }
339   - }
340   - }
341   -}
342   -
343 13 /** COMMIT BLOCK **/
344 14 .commit-title{
345 15 display: block;
... ...
app/assets/stylesheets/sections/diff.scss 0 → 100644
  Diff comments   View file @71d4474
... ... @@ -0,0 +1,329 @@
  1 +.diff-file {
  2 + border: 1px solid #CCC;
  3 + margin-bottom: 1em;
  4 +
  5 + .diff-header {
  6 + @extend .clearfix;
  7 + background: #DDD;
  8 + border-bottom: 1px solid #CCC;
  9 + padding: 5px 5px 5px 10px;
  10 + color: #555;
  11 +
  12 + > span {
  13 + font-family: $monospace_font;
  14 + font-size: 14px;
  15 + line-height: 2;
  16 + }
  17 +
  18 + .diff-btn-group {
  19 + float: right;
  20 +
  21 + .btn {
  22 + background-color: #EEE;
  23 + color: #666;
  24 + font-weight: bolder;
  25 + }
  26 + }
  27 +
  28 + .commit-short-id {
  29 + font-family: $monospace_font;
  30 + font-size: smaller;
  31 + }
  32 +
  33 + .file-mode {
  34 + font-family: $monospace_font;
  35 + }
  36 + }
  37 + .diff-content {
  38 + overflow: auto;
  39 + overflow-y: hidden;
  40 + background: #FFF;
  41 + color: #333;
  42 + font-size: 12px;
  43 + .old {
  44 + span.idiff {
  45 + background-color: #FAA;
  46 + }
  47 + }
  48 + .new {
  49 + span.idiff {
  50 + background-color: #AFA;
  51 + }
  52 + }
  53 +
  54 + table {
  55 + width: 100%;
  56 + font-family: $monospace_font;
  57 + border: none;
  58 + margin: 0px;
  59 + padding: 0px;
  60 + td {
  61 + line-height: 18px;
  62 + font-size: 12px;
  63 + }
  64 + }
  65 + .old_line, .new_line, .diff_line {
  66 + margin: 0px;
  67 + padding: 0px;
  68 + border: none;
  69 + background: #EEE;
  70 + color: #666;
  71 + padding: 0px 5px;
  72 + border-right: 1px solid #ccc;
  73 + text-align: right;
  74 + min-width: 35px;
  75 + max-width: 50px;
  76 + width: 35px;
  77 + @include user-select(none);
  78 + a {
  79 + float: left;
  80 + width: 35px;
  81 + font-weight: normal;
  82 + color: #666;
  83 + &:hover {
  84 + text-decoration: underline;
  85 + }
  86 + }
  87 + &.new {
  88 + background: #CFD;
  89 + }
  90 + &.old {
  91 + background: #FDD;
  92 + }
  93 + }
  94 + .diff_line {
  95 + padding: 0;
  96 + }
  97 + .line_holder {
  98 + &.old .old_line,
  99 + &.old .new_line {
  100 + background: #FCC;
  101 + border-color: #E7BABA;
  102 + }
  103 + &.new .old_line,
  104 + &.new .new_line {
  105 + background: #CFC;
  106 + border-color: #B9ECB9;
  107 + }
  108 + }
  109 + .line_content {
  110 + display: block;
  111 + white-space: pre;
  112 + height: 18px;
  113 + margin: 0px;
  114 + padding: 0px 0.5em;
  115 + border: none;
  116 + &.new {
  117 + background: #CFD;
  118 + }
  119 + &.old {
  120 + background: #FDD;
  121 + }
  122 + &.matched {
  123 + color: #ccc;
  124 + background: #fafafa;
  125 + }
  126 + &.parallel {
  127 + display: table-cell;
  128 + overflow: hidden;
  129 + width: 50%;
  130 + }
  131 + }
  132 + }
  133 + .image {
  134 + background: #ddd;
  135 + text-align: center;
  136 + padding: 30px;
  137 + .wrap{
  138 + display: inline-block;
  139 + }
  140 +
  141 + .frame {
  142 + display: inline-block;
  143 + background-color: #fff;
  144 + line-height: 0;
  145 + img{
  146 + border: 1px solid #FFF;
  147 + background: url('trans_bg.gif');
  148 + max-width: 100%;
  149 + }
  150 + &.deleted {
  151 + border: 1px solid $deleted;
  152 + }
  153 +
  154 + &.added {
  155 + border: 1px solid $added;
  156 + }
  157 + }
  158 + .image-info{
  159 + font-size: 12px;
  160 + margin: 5px 0 0 0;
  161 + color: grey;
  162 + }
  163 +
  164 + .view.swipe{
  165 + position: relative;
  166 +
  167 + .swipe-frame{
  168 + display: block;
  169 + margin: auto;
  170 + position: relative;
  171 + }
  172 + .swipe-wrap{
  173 + overflow: hidden;
  174 + border-left: 1px solid #999;
  175 + position: absolute;
  176 + display: block;
  177 + top: 13px;
  178 + right: 7px;
  179 + }
  180 + .frame{
  181 + top: 0;
  182 + right: 0;
  183 + position: absolute;
  184 + &.deleted{
  185 + margin: 0;
  186 + display: block;
  187 + top: 13px;
  188 + right: 7px;
  189 + }
  190 + }
  191 + .swipe-bar{
  192 + display: block;
  193 + height: 100%;
  194 + width: 15px;
  195 + z-index: 100;
  196 + position: absolute;
  197 + cursor: pointer;
  198 + &:hover{
  199 + .top-handle{
  200 + background-position: -15px 3px;
  201 + }
  202 + .bottom-handle{
  203 + background-position: -15px -11px;
  204 + }
  205 + };
  206 + .top-handle{
  207 + display: block;
  208 + height: 14px;
  209 + width: 15px;
  210 + position: absolute;
  211 + top: 0px;
  212 + background: url('swipemode_sprites.gif') 0 3px no-repeat;
  213 + }
  214 + .bottom-handle{
  215 + display: block;
  216 + height: 14px;
  217 + width: 15px;
  218 + position: absolute;
  219 + bottom: 0px;
  220 + background: url('swipemode_sprites.gif') 0 -11px no-repeat;
  221 + }
  222 + }
  223 + } //.view.swipe
  224 + .view.onion-skin{
  225 + .onion-skin-frame{
  226 + display: block;
  227 + margin: auto;
  228 + position: relative;
  229 + }
  230 + .frame.added, .frame.deleted {
  231 + position: absolute;
  232 + display: block;
  233 + top: 0px;
  234 + left: 0px;
  235 + }
  236 + .controls{
  237 + display: block;
  238 + height: 14px;
  239 + width: 300px;
  240 + z-index: 100;
  241 + position: absolute;
  242 + bottom: 0px;
  243 + left: 50%;
  244 + margin-left: -150px;
  245 +
  246 + .drag-track{
  247 + display: block;
  248 + position: absolute;
  249 + left: 12px;
  250 + height: 10px;
  251 + width: 276px;
  252 + background: url('onion_skin_sprites.gif') -4px -20px repeat-x;
  253 + }
  254 +
  255 + .dragger {
  256 + display: block;
  257 + position: absolute;
  258 + left: 0px;
  259 + top: 0px;
  260 + height: 14px;
  261 + width: 14px;
  262 + background: url('onion_skin_sprites.gif') 0px -34px repeat-x;
  263 + cursor: pointer;
  264 + }
  265 +
  266 + .transparent {
  267 + display: block;
  268 + position: absolute;
  269 + top: 2px;
  270 + right: 0px;
  271 + height: 10px;
  272 + width: 10px;
  273 + background: url('onion_skin_sprites.gif') -2px 0px no-repeat;
  274 + }
  275 +
  276 + .opaque {
  277 + display: block;
  278 + position: absolute;
  279 + top: 2px;
  280 + left: 0px;
  281 + height: 10px;
  282 + width: 10px;
  283 + background: url('onion_skin_sprites.gif') -2px -10px no-repeat;
  284 + }
  285 + }
  286 + } //.view.onion-skin
  287 + }
  288 + .view-modes{
  289 +
  290 + padding: 10px;
  291 + text-align: center;
  292 +
  293 + background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, #eee), to(#dfdfdf));
  294 + background-image: -webkit-linear-gradient(#eee 6.6%, #dfdfdf);
  295 + background-image: -moz-linear-gradient(#eee 6.6%, #dfdfdf);
  296 + background-image: -ms-linear-gradient(#eee 6.6%, #dfdfdf);
  297 + background-image: -o-linear-gradient(#eee 6.6%, #dfdfdf);
  298 +
  299 + ul, li{
  300 + list-style: none;
  301 + margin: 0;
  302 + padding: 0;
  303 + display: inline-block;
  304 + }
  305 +
  306 + li{
  307 + color: grey;
  308 + border-left: 1px solid #c1c1c1;
  309 + padding: 0 12px 0 16px;
  310 + cursor: pointer;
  311 + &:first-child{
  312 + border-left: none;
  313 + }
  314 + &:hover{
  315 + text-decoration: underline;
  316 + }
  317 + &.active{
  318 + &:hover{
  319 + text-decoration: none;
  320 + }
  321 + cursor: default;
  322 + color: #333;
  323 + }
  324 + &.disabled{
  325 + display: none;
  326 + }
  327 + }
  328 + }
  329 +}
... ...