Download as
Browse Code »

Commit 3a4b4fb4cde7809f033822a171b9feae19d41fff

Authored by Dmitriy Zaporozhets
1 parent 065c200c
Exists in master and in 4 other branches 6-8-stable, 7-0-stable, 7-0-stable-spb, spb-stable

Moving ui styles to one scss file, Added ui class to body

Showing 9 changed files with 210 additions and 240 deletions   Show diff stats
app/assets/stylesheets/main.scss
  Diff comments   View file @3a4b4fb
... ... @@ -58,9 +58,8 @@ $hover: #FDF5D9;
58 58 border-radius: $radius;
59 59 }
60 60  
61   -
  61 +@import "ui_basic.scss";
62 62 @import "common.scss";
63   -@import "top_panel.scss";
64 63  
65 64 @import "projects.css.scss";
66 65 @import "commits.css.scss";
... ...
app/assets/stylesheets/top_panel.scss
View file @065c200
... ... @@ -1,232 +0,0 @@
1   -body header {
2   - width:100%;
3   - padding:0;
4   - margin:0;
5   - top:1px;
6   - left:0;
7   - background: #F1F1F1; /* for non-css3 browsers */
8   - border-bottom: 1px solid #ccc;
9   - box-shadow: 0 -1px 0 white inset;
10   - -moz-box-shadow: 0 -1px 0 white inset;
11   - -webkit-box-shadow: 0 -1px 0 white inset;
12   -
13   - z-index:10;
14   - height:60px;
15   -
16   - .wrapper {
17   - margin:auto;
18   - min-width:$min_app_width;
19   - max-width:$max_app_width;
20   - position:relative;
21   - padding:15px 0;
22   -
23   - .top_panel_content {
24   - margin:0 $app_padding;
25   - }
26   - }
27   -
28   -
29   -
30   - .project_name {
31   - float:left;
32   - width:400px;
33   - margin:0;
34   - margin-right:30px;
35   - font-size:20px;
36   - line-height:34px;
37   - font-weight:bold;
38   - color:$style_color;
39   - text-shadow: 0 1px 1px #FFF;
40   - }
41   -
42   - .git_url_wrapper {
43   - padding:0px;
44   - margin:0px;
45   - float:left;
46   -
47   - .git-url {
48   - padding:0px;
49   - margin:0px;
50   - font-size: 12px;
51   -
52   - margin-right:10px;
53   - border-radius: 4px;
54   - -moz-border-radius: 4px;
55   -
56   -
57   - color: #666;
58   - border: 1px solid #AAA;
59   - padding: 0 10px 0 30px;
60   - background: transparent url('images.png') no-repeat 8px -42px;
61   - width: 260px;
62   - height:26px;
63   - }
64   - }
65   -}
66   -
67   -.app_logo {
68   - width:230px;
69   - float:left;
70   -
71   - a {
72   - float:left;
73   -
74   - h1 {
75   - float:left;
76   - margin-left:5px;
77   - font-size:20px;
78   - line-height:34px;
79   - font-weight:bold;
80   - color:#aaa;
81   - text-shadow: 0 1px 1px #FFF;
82   - }
83   -
84   - img {
85   - float: left;
86   - position: relative;
87   - top: -9px;
88   - width:46px;
89   - }
90   - }
91   -}
92   -
93   -.dashboard_links {
94   - padding:7px;
95   - float:left;
96   - a {
97   - margin: 0 14px;
98   - float: left;
99   - font-size: 14px;
100   -
101   - &.active {
102   - color:$active_link_color;
103   - }
104   - &:hover {
105   - color:$active_link_color;
106   - }
107   - }
108   -}
109   -
110   -.top-tabs {
111   - margin: 0;
112   - padding: 5px;
113   - font-size: 14px;
114   - padding-bottom:10px;
115   - margin-bottom:20px;
116   - height:26px;
117   - border-bottom:1px solid #ccc;
118   -
119   - .tab {
120   - font-weight: bold;
121   - background:none;
122   - padding: 10px;
123   - float:left;
124   - padding-left:0px;
125   - padding-right:40px;
126   -
127   - &.active {
128   - color: $active_link_color;
129   - }
130   - }
131   -}
132   -
133   -
134   -.rss-icon {
135   - margin:0 15px;
136   - padding:3px;
137   - border-radius:3px;
138   -}
139   -
140   -
141   -
142   -/* Account box */
143   -header .account-box{
144   - position: absolute;
145   - right: 0;
146   - top: 13px;
147   - z-index: 10000;
148   - width: 128px;
149   - font-size: 11px;
150   - float: right;
151   - display: block;
152   - cursor: pointer;}
153   -header .account-box img{
154   - border-radius: 4px;
155   - right: 20px;
156   - position: absolute;
157   - width: 33px; height: 33px;
158   - display: block; top:0;}
159   -header .account-box img:after{
160   - content: " ";
161   - display: block;
162   - position: absolute;
163   - top: 0;
164   - right: 0;
165   -left: 0;
166   - bottom: 0;
167   -float: right;
168   - border-radius: 5px;
169   - border: 1px solid rgba(255, 255, 255, .1);
170   - border-bottom: 0;
171   - background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, .15)), to(rgba(0, 0, 0, .25))), -webkit-gradient(linear, left top, right bottom, color-stop(0, rgba(255, 255, 255, 0)), color-stop(0.5, rgba(255, 255, 255, .1)), color-stop(0.501, rgba(255, 255, 255, 0)), color-stop(1, rgba(255, 255, 255, 0)));
172   - background: -moz-linear-gradient(top, rgba(255, 255, 255, .15), rgba(0, 0, 0, .25)), -moz-linear-gradient(left top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .1) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0));
173   - background: linear-gradient(top, rgba(255, 255, 255, .15), rgba(0, 0, 0, .25)), linear-gradient(left top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .1) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0));
174   - -webkit-background-origin: border-box;
175   - -moz-background-origin: border;
176   - background-origin: border-box;
177   -}
178   -
179   -.account-box.hover{height: 138px;}
180   -.account-box:hover > .account-links{display: block;}
181   -header .account-links{ background: #79C3E0; display: none; border-radius: 5px; width: 100px; margin-top: 0; float: right; box-shadow: 0 1px 1px rgba(0,0,0,.2); position:relative;}
182   -
183   -header .account-links:before {
184   - content: ".";
185   - width:0;
186   - height:0;
187   - position:absolute;
188   - border:5px solid transparent;
189   - border-color:rgba(255,255,255,0);
190   - border-bottom-color:#333;
191   - text-indent:-9999px;
192   - top:-10px;
193   - line-height:0;
194   - right:10px;
195   - z-index:10;
196   -}
197   -
198   -header .account-links{
199   - background: #333;
200   - display: none;
201   - z-index: 100000;
202   - border-radius: 5px;
203   - width: 100px;
204   - position: absolute;
205   - right: 20px;
206   - top: 46px;
207   - margin-top: 0;
208   - float: right;
209   - box-shadow: 0 1px 1px rgba(0,0,0,.2);
210   -}
211   -
212   -header .account-links a{color: #EEE; padding: 6px 10px; display: block; text-shadow: none; border-bottom: 1px solid #555}
213   -header .account-links a:hover{ background: #444;}
214   -.account-box.hover .arrow-up{top: 41px; right: 6px; position: absolute}
215   -header .account-links a:first-child{
216   - -webkit-border-top-left-radius: 5px;
217   - -webkit-border-top-right-radius: 5px;
218   - -moz-border-radius-topleft: 5px;
219   - -moz-border-radius-topright: 5px;
220   - border-top-left-radius: 5px;
221   - border-top-right-radius: 5px;
222   -}
223   -
224   -header .account-links a:last-child{
225   - -webkit-border-bottom-right-radius: 5px;
226   - -webkit-border-bottom-left-radius: 5px;
227   - -moz-border-radius-bottomright: 5px;
228   - -moz-border-radius-bottomleft: 5px;
229   - border-bottom-right-radius: 5px;
230   - border-bottom-left-radius: 5px;
231   - border-bottom: 0;
232   -}
app/assets/stylesheets/ui_basic.scss 0 → 100644
  Diff comments   View file @3a4b4fb
... ... @@ -0,0 +1,203 @@
  1 +.ui_basic {
  2 + /*
  3 + * Application Header
  4 + *
  5 + */
  6 + header {
  7 + width:100%;
  8 + padding:0;
  9 + margin:0;
  10 + top:1px;
  11 + left:0;
  12 + background: #F1F1F1; /* for non-css3 browsers */
  13 + border-bottom: 1px solid #ccc;
  14 + box-shadow: 0 -1px 0 white inset;
  15 + -moz-box-shadow: 0 -1px 0 white inset;
  16 + -webkit-box-shadow: 0 -1px 0 white inset;
  17 + z-index:10;
  18 + height:60px;
  19 +
  20 + .app_logo {
  21 + width:230px;
  22 + float:left;
  23 +
  24 + a {
  25 + float:left;
  26 +
  27 + h1 {
  28 + float:left;
  29 + margin-left:5px;
  30 + font-size:20px;
  31 + line-height:34px;
  32 + font-weight:bold;
  33 + color:#aaa;
  34 + text-shadow: 0 1px 1px #FFF;
  35 + }
  36 +
  37 + img {
  38 + float: left;
  39 + position: relative;
  40 + top: -9px;
  41 + width:46px;
  42 + }
  43 + }
  44 + }
  45 + .wrapper {
  46 + margin:auto;
  47 + min-width:$min_app_width;
  48 + max-width:$max_app_width;
  49 + position:relative;
  50 + padding:15px 0;
  51 +
  52 + .top_panel_content {
  53 + margin:0 $app_padding;
  54 + }
  55 + }
  56 +
  57 + .project_name {
  58 + float:left;
  59 + width:400px;
  60 + margin:0;
  61 + margin-right:30px;
  62 + font-size:20px;
  63 + line-height:34px;
  64 + font-weight:bold;
  65 + color:$style_color;
  66 + text-shadow: 0 1px 1px #FFF;
  67 + }
  68 +
  69 + .git_url_wrapper {
  70 + padding:0px;
  71 + margin:0px;
  72 + float:left;
  73 +
  74 + .git-url {
  75 + padding:0px;
  76 + margin:0px;
  77 + font-size: 12px;
  78 + margin-right:10px;
  79 + border-radius: 4px;
  80 + -moz-border-radius: 4px;
  81 + color: #666;
  82 + border: 1px solid #AAA;
  83 + padding: 0 10px 0 30px;
  84 + background: transparent url('images.png') no-repeat 8px -42px;
  85 + width: 260px;
  86 + height:26px;
  87 + }
  88 + }
  89 +
  90 + /* Account box */
  91 + .account-box {
  92 + position: absolute;
  93 + right: 0;
  94 + top: 13px;
  95 + z-index: 10000;
  96 + width: 128px;
  97 + font-size: 11px;
  98 + float: right;
  99 + display: block;
  100 + cursor: pointer;
  101 + img {
  102 + border-radius: 4px;
  103 + right: 20px;
  104 + position: absolute;
  105 + width: 33px;
  106 + height: 33px;
  107 + display: block;
  108 + top: 0;
  109 + &:after {
  110 + content: " ";
  111 + display: block;
  112 + position: absolute;
  113 + top: 0;
  114 + right: 0;
  115 + left: 0;
  116 + bottom: 0;
  117 + float: right;
  118 + border-radius: 5px;
  119 + border: 1px solid rgba(255, 255, 255, 0.1);
  120 + border-bottom: 0;
  121 + background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, 0.15)), to(rgba(0, 0, 0, 0.25))), -webkit-gradient(linear, left top, right bottom, color-stop(0, rgba(255, 255, 255, 0)), color-stop(0.5, rgba(255, 255, 255, 0.1)), color-stop(0.501, rgba(255, 255, 255, 0)), color-stop(1, rgba(255, 255, 255, 0)));
  122 + background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.25)), -moz-linear-gradient(left top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0));
  123 + background: linear-gradient(top, rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.25)), linear-gradient(left top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0));
  124 + -webkit-background-origin: border-box;
  125 + -moz-background-origin: border;
  126 + background-origin: border-box; } } }
  127 +
  128 + .account-box {
  129 + &.hover {
  130 + height: 138px; }
  131 + &:hover > .account-links {
  132 + display: block; } }
  133 +
  134 + .account-links {
  135 + background: #79C3E0;
  136 + display: none;
  137 + border-radius: 5px;
  138 + width: 100px;
  139 + margin-top: 0;
  140 + float: right;
  141 + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  142 + position: relative;
  143 + &:before {
  144 + content: ".";
  145 + width: 0;
  146 + height: 0;
  147 + position: absolute;
  148 + border: 5px solid transparent;
  149 + border-color: rgba(255, 255, 255, 0);
  150 + border-bottom-color: #333;
  151 + text-indent: -9999px;
  152 + top: -10px;
  153 + line-height: 0;
  154 + right: 10px;
  155 + z-index: 10; }
  156 + background: #333;
  157 + display: none;
  158 + z-index: 100000;
  159 + border-radius: 5px;
  160 + width: 100px;
  161 + position: absolute;
  162 + right: 20px;
  163 + top: 46px;
  164 + margin-top: 0;
  165 + float: right;
  166 + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  167 + a {
  168 + color: #EEE;
  169 + padding: 6px 10px;
  170 + display: block;
  171 + text-shadow: none;
  172 + border-bottom: 1px solid #555;
  173 + &:hover {
  174 + background: #444; } } }
  175 +
  176 + .account-box.hover .arrow-up {
  177 + top: 41px;
  178 + right: 6px;
  179 + position: absolute; }
  180 +
  181 + .account-links a {
  182 + &:first-child {
  183 + -webkit-border-top-left-radius: 5px;
  184 + -webkit-border-top-right-radius: 5px;
  185 + -moz-border-radius-topleft: 5px;
  186 + -moz-border-radius-topright: 5px;
  187 + border-top-left-radius: 5px;
  188 + border-top-right-radius: 5px; }
  189 + &:last-child {
  190 + -webkit-border-bottom-right-radius: 5px;
  191 + -webkit-border-bottom-left-radius: 5px;
  192 + -moz-border-radius-bottomright: 5px;
  193 + -moz-border-radius-bottomleft: 5px;
  194 + border-bottom-right-radius: 5px;
  195 + border-bottom-left-radius: 5px;
  196 + border-bottom: 0; } }
  197 +
  198 + }
  199 + /*
  200 + * End of Application Header
  201 + *
  202 + */
  203 +}
... ...
app/views/layouts/admin.html.haml
  Diff comments   View file @3a4b4fb
1 1 !!! 5
2 2 %html{ :lang => "en"}
3 3 = render "layouts/head"
4   - %body.admin
  4 + %body.ui_basic.admin
5 5 = render "layouts/flash"
6 6 = render "layouts/head_panel", :title => "Admin area"
7 7 .container
... ...
app/views/layouts/application.html.haml
  Diff comments   View file @3a4b4fb
1 1 !!! 5
2 2 %html{ :lang => "en"}
3 3 = render "layouts/head"
4   - %body.application
  4 + %body.ui_basic.application
5 5 = render "layouts/flash"
6 6 = render "layouts/head_panel", :title => "Dashboard"
7 7 .container
... ...
app/views/layouts/devise.html.haml
  Diff comments   View file @3a4b4fb
1 1 !!! 5
2 2 %html{ :lang => "en"}
3 3 = render "layouts/head"
4   - %body.login-page
  4 + %body.ui_basic.login-page
5 5 = render :partial => "layouts/flash"
6 6 .container= yield
... ...
app/views/layouts/error.html.haml
  Diff comments   View file @3a4b4fb
1 1 !!! 5
2 2 %html{ :lang => "en"}
3 3 = render "layouts/head"
4   - %body.application
  4 + %body.ui_basic.application
5 5 = render "layouts/flash"
6 6 = render "layouts/head_panel", :title => ""
7 7 .container
... ...
app/views/layouts/profile.html.haml
  Diff comments   View file @3a4b4fb
1 1 !!! 5
2 2 %html{ :lang => "en"}
3 3 = render "layouts/head"
4   - %body.profile
  4 + %body.ui_basic.profile
5 5 = render "layouts/flash"
6 6 = render "layouts/head_panel", :title => "Profile"
7 7 .container
... ...
app/views/layouts/project.html.haml
  Diff comments   View file @3a4b4fb
1 1 !!! 5
2 2 %html{ :lang => "en"}
3 3 = render "layouts/head"
4   - %body.project
  4 + %body.ui_basic.project
5 5 = render "layouts/flash"
6 6 = render "layouts/head_panel", :title => @project.name
7 7 .container
... ...