Skip to content

Commit 8416690

Browse files
iurevychiurevych
committed
Imac login screen
1 parent a27df53 commit 8416690

File tree

9 files changed

+194
-9
lines changed

9 files changed

+194
-9
lines changed

‎css/flat-ui.css

Lines changed: 80 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -435,9 +435,6 @@ h6 {
435435
.demo-text-box a:hover {
436436
color: #1abc9c; }
437437

438-
.demo-imac {
439-
margin-bottom: 77px; }
440-
441438
.demo-browser {
442439
background: #2c3e50 url("../images/demo/browser.png") 0 0 no-repeat;
443440
background-size: 659px 42px;
@@ -1619,7 +1616,7 @@ textarea,
16191616
font-weight: 500;
16201617
opacity: 0.8; }
16211618
.palette dd {
1622-
font-weight: 100;
1619+
font-weight: 200;
16231620
margin-left: 0;
16241621
opacity: 0.8; }
16251622

@@ -2298,6 +2295,85 @@ body.vjs-full-window {
22982295
-o-animation: sharp 2s ease infinite;
22992296
animation: sharp 2s ease infinite; }
23002297

2298+
.login {
2299+
background: url("../images/login/imac.png") 0 0 no-repeat;
2300+
color: white;
2301+
margin-bottom: 77px;
2302+
padding: 38px 38px 267px;
2303+
position: relative; }
2304+
2305+
.login-screen {
2306+
background-color: #1abc9c;
2307+
min-height: 317px;
2308+
padding: 123px 199px 33px 306px; }
2309+
2310+
.login-icon {
2311+
left: 200px;
2312+
position: absolute;
2313+
top: 160px;
2314+
width: 96px; }
2315+
.login-icon > img {
2316+
display: block;
2317+
margin-bottom: 6px;
2318+
width: 100%; }
2319+
.login-icon > h4 {
2320+
font-size: 17px;
2321+
font-weight: 200;
2322+
line-height: 34px;
2323+
opacity: 0.95; }
2324+
.login-icon > h4 small {
2325+
color: inherit;
2326+
display: block;
2327+
font-size: inherit;
2328+
font-weight: 700; }
2329+
2330+
.login-form {
2331+
background-color: #eceff1;
2332+
border-radius: 6px;
2333+
padding: 24px 23px 20px;
2334+
position: relative; }
2335+
.login-form:before {
2336+
content: "";
2337+
border-style: solid;
2338+
border-width: 12px 12px 12px 0;
2339+
border-color: transparent #eceff1 transparent transparent;
2340+
height: 0px;
2341+
position: absolute;
2342+
left: -12px;
2343+
top: 35px;
2344+
width: 0;
2345+
-webkit-transform: rotate(360deg); }
2346+
.login-form .control-group {
2347+
margin-bottom: 6px;
2348+
position: relative; }
2349+
.login-form .login-field {
2350+
border-color: transparent;
2351+
font-size: 17px;
2352+
padding-bottom: 11px;
2353+
padding-top: 11px;
2354+
text-indent: 3px;
2355+
width: 299px; }
2356+
.login-form .login-field:focus + .login-field-icon {
2357+
color: #1abc9c; }
2358+
.login-form .login-field-icon {
2359+
color: #bfc9ca;
2360+
font-size: 16px;
2361+
position: absolute;
2362+
right: 13px;
2363+
top: 14px;
2364+
-webkit-transition: 0.25s;
2365+
-moz-transition: 0.25s;
2366+
-o-transition: 0.25s;
2367+
transition: 0.25s;
2368+
-webkit-backface-visibility: hidden; }
2369+
2370+
.login-link {
2371+
color: #bfc9ca;
2372+
display: block;
2373+
font-size: 13px;
2374+
margin-top: 15px;
2375+
text-align: center; }
2376+
23012377
.ptn, .pvn, .pan {
23022378
padding-top: 0; }
23032379

‎images/demo/imac.png

-45 KB
Binary file not shown.

‎images/login/icon.png

7.33 KB
Loading

‎images/login/imac.png

7.66 KB
Loading

‎index.html

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -686,7 +686,29 @@ <h3 class="tile-title">Free for Share</h3>
686686
</div>
687687
</div> <!-- /tiles -->
688688

689-
<img src="images/demo/imac.png" alt="Retina iMac" class="demo-imac" />
689+
<div class="login">
690+
<div class="login-screen">
691+
<div class="login-icon">
692+
<img src="images/login/icon.png" alt="Welcome to Mail App" />
693+
<h4>Welcome to <small>Mail App</small></h4>
694+
</div>
695+
696+
<div class="login-form">
697+
<div class="control-group">
698+
<input type="text" class="login-field" value="" placeholder="Enter your name" id="login-name" />
699+
<label class="login-field-icon fui-man-16" for="login-name"></label>
700+
</div>
701+
702+
<div class="control-group">
703+
<input type="password" class="login-field" value="" placeholder="Password" id="login-pass" />
704+
<label class="login-field-icon fui-lock-16" for="login-pass"></label>
705+
</div>
706+
707+
<a class="btn btn-primary btn-large btn-block" href="#">Login</a>
708+
<a class="login-link" href="#">Lost your password?</a>
709+
</div>
710+
</div>
711+
</div>
690712

691713
<div class="row">
692714
<div class="span9">

‎sass/flat-ui.sass

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@
3232
@import 'modules/todo'
3333
@import 'modules/footer'
3434
@import 'modules/video'
35+
@import 'modules/login'
3536

3637
// Spaces
3738
@import 'spaces'

‎sass/modules/_demo.sass

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -144,9 +144,6 @@
144144
a:hover
145145
color: $firm
146146

147-
.demo-imac
148-
margin-bottom: 77px
149-
150147
.demo-browser
151148
background: scale-color($base, $lightness: -15%) url('../images/demo/browser.png') 0 0 no-repeat
152149
background-size: 659px 42px

‎sass/modules/_login.sass

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
$form-color: scale-color(desaturate($base, 15%), $lightness: 91%)
2+
3+
// Login screen
4+
.login
5+
background: url('../images/login/imac.png') 0 0 no-repeat
6+
color: $inverse
7+
margin-bottom: 77px
8+
padding: 38px 38px 267px
9+
position: relative
10+
11+
.login-screen
12+
background-color: $firm
13+
min-height: 317px
14+
padding: 123px 199px 33px 306px
15+
16+
.login-icon
17+
left: 200px
18+
position: absolute
19+
top: 160px
20+
width: 96px
21+
22+
> img
23+
display: block
24+
margin-bottom: 6px
25+
width: 100%
26+
27+
> h4
28+
font-size: 17px
29+
font-weight: 200
30+
line-height: 34px
31+
opacity: .95
32+
33+
small
34+
color: inherit
35+
display: block
36+
font-size: inherit
37+
font-weight: 700
38+
39+
// Login form
40+
.login-form
41+
background-color: $form-color
42+
border-radius: 6px
43+
padding: 24px 23px 20px
44+
position: relative
45+
46+
// Ear
47+
&:before
48+
content: ''
49+
border-style: solid
50+
border-width: 12px 12px 12px 0
51+
border-color: transparent $form-color transparent transparent
52+
height: 0px
53+
position: absolute
54+
left: -12px
55+
top: 35px
56+
width: 0
57+
// Make corners smooth
58+
-webkit-transform: rotate(360deg)
59+
60+
.control-group
61+
margin-bottom: 6px
62+
position: relative
63+
64+
.login-field
65+
border-color: transparent
66+
font-size: 17px
67+
padding-bottom: 11px
68+
padding-top: 11px
69+
text-indent: 3px
70+
width: 299px
71+
&:focus
72+
& + .login-field-icon
73+
color: $firm
74+
75+
.login-field-icon
76+
color: scale-color($gray, $lightness: 40%)
77+
font-size: 16px
78+
position: absolute
79+
right: 13px
80+
top: 14px
81+
+transition(.25s)
82+
83+
.login-link
84+
color: scale-color($gray, $lightness: 40%)
85+
display: block
86+
font-size: 13px
87+
margin-top: 15px
88+
text-align: center
89+

‎sass/modules/_palette.sass

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
opacity: .8
1919

2020
dd
21-
font-weight: 100
21+
font-weight: 200
2222
margin-left: 0
2323
opacity: .8
2424

0 commit comments

Comments
 (0)