##// END OF EJS Templates
forced user-menu dropdown to align to right when open
Liviu -
r3619:a027b596 new-ui
parent child Browse files
Show More
@@ -1,327 +1,326 b''
1 //LOGIN
1 //LOGIN
2
2
3
3
4 .loginbox {
4 .loginbox {
5 max-width: 65%;
5 max-width: 65%;
6 margin: @pagepadding auto;
6 margin: @pagepadding auto;
7 font-family: @text-light;
7 font-family: @text-light;
8 border: @border-thickness solid @grey5;
8 border: @border-thickness solid @grey5;
9 box-sizing: border-box;
9 box-sizing: border-box;
10
10
11 @media (max-width:1200px) {
11 @media (max-width:1200px) {
12 max-width: 85%;
12 max-width: 85%;
13 }
13 }
14
14
15 @media (max-width:768px) {
15 @media (max-width:768px) {
16 max-width: 100%;
16 max-width: 100%;
17 width: 100%;
17 width: 100%;
18 margin: 0;
18 margin: 0;
19 }
19 }
20
20
21 .title {
21 .title {
22 float: none;
22 float: none;
23 }
23 }
24
24
25 .header {
25 .header {
26 width: 100%;
26 width: 100%;
27 padding: 0 35px;
27 padding: 0 35px;
28 box-sizing: border-box;
28 box-sizing: border-box;
29
29
30 .title {
30 .title {
31 padding: 0;
31 padding: 0;
32 }
32 }
33 }
33 }
34
34
35 .loginwrapper {
35 .loginwrapper {
36 float: left;
36 float: left;
37 height: 100%;
37 height: 100%;
38 width: 100%;
38 width: 100%;
39 padding: 35px 55px 35px 35px;
39 padding: 35px 55px 35px 35px;
40 background-color: white;
40 background-color: white;
41 box-sizing: border-box;
41 box-sizing: border-box;
42
42
43 @media (max-width:414px) {
43 @media (max-width:414px) {
44 padding: 35px;
44 padding: 35px;
45 }
45 }
46 }
46 }
47
47
48 .left-column {
48 .left-column {
49 float: left;
49 float: left;
50 position: relative;
50 position: relative;
51 width: 50%;
51 width: 50%;
52 height: 100%;
52 height: 100%;
53
53
54 @media (max-width:414px) {
54 @media (max-width:414px) {
55 display:none;
55 display:none;
56 }
56 }
57 }
57 }
58
58
59 .right-column {
59 .right-column {
60 float: right;
60 float: right;
61 position: relative;
61 position: relative;
62 width: 50%;
62 width: 50%;
63
63
64 @media (max-width:414px) {
64 @media (max-width:414px) {
65 width: 100%;
65 width: 100%;
66 }
66 }
67 }
67 }
68
68
69 .sign-in-image {
69 .sign-in-image {
70 display: block;
70 display: block;
71 width: 65%;
71 width: 65%;
72 margin: 5% auto;
72 margin: 5% auto;
73 }
73 }
74
74
75 .sign-in-title {
75 .sign-in-title {
76
76
77 h4 {
77 h4 {
78 margin: @padding*2 0;
78 margin: @padding*2 0;
79 }
79 }
80 }
80 }
81
81
82 .form {
82 .form {
83 label {
83 label {
84 display: block;
84 display: block;
85 }
85 }
86
86
87 input {
87 input {
88 width: 100%;
88 width: 100%;
89 margin: 0 10% @padding 0;
89 margin: 0 10% @padding 0;
90 .box-sizing(border-box) ;
90 .box-sizing(border-box) ;
91
91
92 &[type="checkbox"] {
92 &[type="checkbox"] {
93 clear: both;
93 clear: both;
94 width: auto;
94 width: auto;
95 margin: 0 1em @padding 0;
95 margin: 0 1em @padding 0;
96 }
96 }
97 }
97 }
98
98
99 .checkbox {
99 .checkbox {
100 display: inline;
100 display: inline;
101 width: auto;
101 width: auto;
102 }
102 }
103
103
104 .sign-in {
104 .sign-in {
105 clear: both;
105 clear: both;
106 width: 100%;
106 width: 100%;
107 margin: @padding 0;
107 margin: @padding 0;
108 }
108 }
109 .pwd_reset {
109 .pwd_reset {
110 font-weight: normal;
110 font-weight: normal;
111 }
111 }
112 .new_account {
112 .new_account {
113 font-weight: bold;
113 font-weight: bold;
114 }
114 }
115 }
115 }
116 .register_message,
116 .register_message,
117 .activation_msg {
117 .activation_msg {
118 padding: 0 0 @padding;
118 padding: 0 0 @padding;
119 }
119 }
120
120
121 .buttons,
121 .buttons,
122 .links {
122 .links {
123 padding: 0;
123 padding: 0;
124 }
124 }
125
125
126 .buttons {
126 .buttons {
127 input {
127 input {
128 margin-right: 0;
128 margin-right: 0;
129 .box-sizing(border-box);
129 .box-sizing(border-box);
130 }
130 }
131
131
132 #sign_up, #send {
132 #sign_up, #send {
133 width: 100%;
133 width: 100%;
134 }
134 }
135 }
135 }
136
136
137 .fields {
137 .fields {
138 .field.field-compact {
138 .field.field-compact {
139 margin-bottom: 0px;
139 margin-bottom: 0px;
140 }
140 }
141
141
142 .buttons {
142 .buttons {
143 margin: 0;
143 margin: 0;
144 }
144 }
145
145
146 .field {
146 .field {
147 margin-bottom: 15px;
147 margin-bottom: 15px;
148
148
149 input {
149 input {
150 width: 100%;
150 width: 100%;
151 .box-sizing(border-box);
151 .box-sizing(border-box);
152 }
152 }
153
153
154 .input {
154 .input {
155 margin-left: 0;
155 margin-left: 0;
156 }
156 }
157
157
158 .label {
158 .label {
159 padding-top: 0;
159 padding-top: 0;
160 }
160 }
161 }
161 }
162 }
162 }
163
163
164 .checkbox {
164 .checkbox {
165 margin: 0 0 @textmargin 0;
165 margin: 0 0 @textmargin 0;
166
166
167 input[type="checkbox"] {
167 input[type="checkbox"] {
168 width: auto;
168 width: auto;
169 }
169 }
170
170
171 label {
171 label {
172 padding: 0;
172 padding: 0;
173 min-height: 0;
173 min-height: 0;
174 }
174 }
175 }
175 }
176
176
177 .activation_msg {
177 .activation_msg {
178 padding: @padding 0 0;
178 padding: @padding 0 0;
179 color: @grey4;
179 color: @grey4;
180 }
180 }
181
181
182 .links {
182 .links {
183 float: right;
183 float: right;
184 margin: 0;
184 margin: 0;
185 padding: 0;
185 padding: 0;
186 line-height: 1;
186 line-height: 1;
187
187
188 p {
188 p {
189 float: right;
189 float: right;
190 margin: 0;
190 margin: 0;
191 line-height: 1.5em;
191 line-height: 1.5em;
192 }
192 }
193 }
193 }
194
194
195 p.help-block {
195 p.help-block {
196 margin-left: 0;
196 margin-left: 0;
197 }
197 }
198 }
198 }
199
199
200 .user-menu.submenu {
200 .user-menu.submenu {
201 right: 0;
201 right: 0!important;
202 left: auto;
202 left: auto!important;
203 min-width: 290px;
203 min-width: 290px;
204 }
204 }
205
205
206
207 .user-menu {
206 .user-menu {
208 .bookmark-items {
207 .bookmark-items {
209 border-top: @border-thickness solid @grey6;
208 border-top: @border-thickness solid @grey6;
210 margin-top: 1em;
209 margin-top: 1em;
211 padding: 1em .5em;
210 padding: 1em .5em;
212 color: @grey3;
211 color: @grey3;
213 border-bottom: @grey3;
212 border-bottom: @grey3;
214
213
215 a {
214 a {
216 padding: 0 !important;
215 padding: 0 !important;
217 color: @rcblue !important;
216 color: @rcblue !important;
218 }
217 }
219 }
218 }
220 a.bookmark-item {
219 a.bookmark-item {
221 color: @rcblue !important;
220 color: @rcblue !important;
222 }
221 }
223 }
222 }
224
223
225
224
226 #quick_login {
225 #quick_login {
227 left: auto;
226 left: auto;
228 right: 0;
227 right: 0;
229 padding: @menupadding;
228 padding: @menupadding;
230 z-index: 999;
229 z-index: 999;
231 overflow: hidden;
230 overflow: hidden;
232 background-color: @white;
231 background-color: @white;
233 border: 1px solid @grey5;
232 border: 1px solid @grey5;
234 color: @grey2;
233 color: @grey2;
235 box-shadow: @dropdown-shadow;
234 box-shadow: @dropdown-shadow;
236
235
237 h4 {
236 h4 {
238 margin-bottom: 12px;
237 margin-bottom: 12px;
239 }
238 }
240
239
241 .form {
240 .form {
242 width: auto;
241 width: auto;
243 }
242 }
244
243
245 label, .field {
244 label, .field {
246 margin-bottom: 0;
245 margin-bottom: 0;
247 }
246 }
248
247
249 .label {
248 .label {
250 padding-top: 0;
249 padding-top: 0;
251 }
250 }
252
251
253 input {
252 input {
254 min-width: 215px;
253 min-width: 215px;
255 margin: 8px 0 @padding;
254 margin: 8px 0 @padding;
256 }
255 }
257
256
258 input[type="submit"] {
257 input[type="submit"] {
259 &:extend(.btn-primary);
258 &:extend(.btn-primary);
260 width:100%;
259 width:100%;
261 min-width: 0;
260 min-width: 0;
262 }
261 }
263
262
264 .forgot_password,
263 .forgot_password,
265 .buttons .register {
264 .buttons .register {
266 a {
265 a {
267 color: @rcblue;
266 color: @rcblue;
268
267
269 &:hover {
268 &:hover {
270 color: @rcdarkblue;
269 color: @rcdarkblue;
271 }
270 }
272 }
271 }
273 }
272 }
274
273
275 .buttons {
274 .buttons {
276 margin: 0;
275 margin: 0;
277 }
276 }
278
277
279 .buttons a {
278 .buttons a {
280 padding: 8px 0;
279 padding: 8px 0;
281 line-height: 1.4em;
280 line-height: 1.4em;
282 color: @grey4;
281 color: @grey4;
283
282
284 &:hover {
283 &:hover {
285 color: @grey2;
284 color: @grey2;
286 }
285 }
287 }
286 }
288
287
289 #sign_in {
288 #sign_in {
290 margin-bottom: 0
289 margin-bottom: 0
291 }
290 }
292
291
293 .big_gravatar {
292 .big_gravatar {
294 float: left;
293 float: left;
295 display: block;
294 display: block;
296 padding: .5em;
295 padding: .5em;
297 }
296 }
298
297
299 .full_name {
298 .full_name {
300 margin: 0 0 0 70px;
299 margin: 0 0 0 70px;
301 padding-top: 1em;
300 padding-top: 1em;
302 }
301 }
303
302
304 .email {
303 .email {
305 margin: 0 0 0 70px;
304 margin: 0 0 0 70px;
306 font-family: @text-light;
305 font-family: @text-light;
307 }
306 }
308
307
309 ol.links {
308 ol.links {
310 clear:both;
309 clear:both;
311 margin: 0;
310 margin: 0;
312 padding: @padding 0 0 0;
311 padding: @padding 0 0 0;
313
312
314 li {
313 li {
315 input {
314 input {
316 margin: @padding 0 0 0;
315 margin: @padding 0 0 0;
317 }
316 }
318 }
317 }
319 }
318 }
320 }
319 }
321 .submenu #quick_login li:hover {
320 .submenu #quick_login li:hover {
322 background-color: transparent;
321 background-color: transparent;
323 }
322 }
324
323
325 #quick_login_link:hover + #quick_login {
324 #quick_login_link:hover + #quick_login {
326 display: block;
325 display: block;
327 }
326 }
General Comments 0
You need to be logged in to leave comments. Login now