Skip to content

Commit ec99e01

Browse files
Davidtiger92Davidtiger92
committed
Forms > Column sizing, Control sizing
Profile dropdown menu
1 parent 04ce3e2 commit ec99e01

21 files changed

Lines changed: 551 additions & 508 deletions

File tree

‎src/app/_common/header/nav/profile/profile.hbs‎

Lines changed: 9 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -18,43 +18,27 @@
1818
<ul class="dropdown-menu profile-dropdown-menu">
1919
<li>
2020
<a href="">
21-
<div class="col-xs-2 profile-dropdown-menu-icon">
22-
<i class="fa fa-user"></i>
23-
</div>
24-
<div class="col-xs-10 profile-dropdown-menu-topic">
25-
<span>Profile</span>
26-
</div>
21+
<i class="fa fa-user"></i>
22+
<span>Profile</span>
2723
</a>
2824
</li>
2925
<li>
30-
<a href="">
31-
<div class="col-xs-2 profile-dropdown-menu-icon">
32-
<i class="fa fa-bell"></i>
33-
</div>
34-
<div class="col-xs-10 profile-dropdown-menu-topic">
35-
<span>Notifications</span>
36-
</div>
26+
<a href="">
27+
<i class="fa fa-bell"></i>
28+
<span>Notifications</span>
3729
</a>
3830
</li>
3931
<li>
4032
<a href="">
41-
<div class="col-xs-2 profile-dropdown-menu-icon">
42-
<i class="fa fa-gear"></i>
43-
</div>
44-
<div class="col-xs-10 profile-dropdown-menu-topic">
45-
<span>Settings</span>
46-
</div>
33+
<i class="fa fa-gear"></i>
34+
<span>Settings</span>
4735
</a>
4836
</li>
4937
<li class="divider"></li>
5038
<li class="logout">
5139
<a href="login.html">
52-
<div class="col-xs-2 profile-dropdown-menu-icon">
53-
<i class="fa fa-power-off"></i>
54-
</div>
55-
<div class="col-xs-10 profile-dropdown-menu-topic">
56-
<span>Logout</span>
57-
</div>
40+
<i class="fa fa-power-off"></i>
41+
<span>Logout</span>
5842
</a>
5943
</li>
6044
</ul>

‎src/app/_common/header/nav/profile/profile.scss‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,15 @@
6363

6464
li a {
6565
padding: 10px 15px;
66+
67+
i {
68+
color: $color-primary;
69+
}
70+
71+
span {
72+
color: $color-text-light;
73+
}
74+
6675
}
6776

6877
.logout {

‎src/app/forms/basic-form/basic-form.hbs‎

Lines changed: 13 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,19 +4,17 @@
44
Basic Forms
55
</h3>
66
</div>
7-
<section class="section">
8-
<form role="form">
9-
<div class="form-group">
10-
<label for="exampleInputEmail1">Email address</label>
11-
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
12-
</div>
13-
<div class="form-group">
14-
<label for="exampleInputPassword1">Password</label>
15-
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
16-
</div>
17-
<div class="form-group">
18-
<button type="submit" class="btn btn-primary">Submit</button>
19-
</div>
20-
</form>
21-
</section>
7+
<form role="form">
8+
<div class="form-group">
9+
<label for="exampleInputEmail1">Email address</label>
10+
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
11+
</div>
12+
<div class="form-group">
13+
<label for="exampleInputPassword1">Password</label>
14+
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
15+
</div>
16+
<div class="form-group">
17+
<button type="submit" class="btn btn-primary">Submit</button>
18+
</div>
19+
</form>
2220
</div>

‎src/app/forms/boxed-validation/boxed-validation.hbs‎

Lines changed: 32 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -4,38 +4,36 @@
44
Boxed Inputs Validation
55
</h3>
66
</div>
7-
<div class="panel-body">
8-
<form role="form">
9-
<div class="form-group has-success">
10-
<label class="control-label" for="inputSuccess1">Input with success</label>
11-
<input type="text" class="form-control boxed" id="inputSuccess1">
12-
<span class="has-success">Success message.</span>
13-
</div>
14-
<div class="form-group has-warning">
15-
<label class="control-label" for="inputWarning1">Input with warning</label>
16-
<input type="text" class="form-control boxed" id="inputWarning1">
17-
<span class="has-warning">Warning message.</span>
18-
</div>
19-
<div class="form-group has-error">
20-
<label class="control-label" for="inputError1">Input with error</label>
21-
<input type="text" class="form-control boxed" id="inputError1">
22-
<span class="has-error">Error message.</span>
23-
</div>
24-
<div class="form-group has-success has-feedback">
25-
<label class="control-label" for="inputSuccess2">Input with success icon</label>
26-
<input type="text" class="form-control boxed" id="inputSuccess2">
27-
<span class="fa fa-check form-control-feedback"></span>
28-
</div>
29-
<div class="form-group has-warning has-feedback">
30-
<label class="control-label" for="inputWarning2">Input with warning icon</label>
31-
<input type="text" class="form-control boxed" id="inputWarning2">
32-
<span class="fa fa-exclamation form-control-feedback"></span>
33-
</div>
34-
<div class="form-group has-error has-feedback">
35-
<label class="control-label" for="inputError2">Input with error icon</label>
36-
<input type="text" class="form-control boxed" id="inputError2">
37-
<span class="fa fa-times form-control-feedback"></span>
38-
</div>
39-
</form>
40-
</div>
7+
<form role="form">
8+
<div class="form-group has-success">
9+
<label class="control-label" for="inputSuccess1">Input with success</label>
10+
<input type="text" class="form-control boxed" id="inputSuccess1">
11+
<span class="has-success">Success message.</span>
12+
</div>
13+
<div class="form-group has-warning">
14+
<label class="control-label" for="inputWarning1">Input with warning</label>
15+
<input type="text" class="form-control boxed" id="inputWarning1">
16+
<span class="has-warning">Warning message.</span>
17+
</div>
18+
<div class="form-group has-error">
19+
<label class="control-label" for="inputError1">Input with error</label>
20+
<input type="text" class="form-control boxed" id="inputError1">
21+
<span class="has-error">Error message.</span>
22+
</div>
23+
<div class="form-group has-success has-feedback">
24+
<label class="control-label" for="inputSuccess2">Input with success icon</label>
25+
<input type="text" class="form-control boxed" id="inputSuccess2">
26+
<span class="fa fa-check form-control-feedback"></span>
27+
</div>
28+
<div class="form-group has-warning has-feedback">
29+
<label class="control-label" for="inputWarning2">Input with warning icon</label>
30+
<input type="text" class="form-control boxed" id="inputWarning2">
31+
<span class="fa fa-exclamation form-control-feedback"></span>
32+
</div>
33+
<div class="form-group has-error has-feedback">
34+
<label class="control-label" for="inputError2">Input with error icon</label>
35+
<input type="text" class="form-control boxed" id="inputError2">
36+
<span class="fa fa-times form-control-feedback"></span>
37+
</div>
38+
</form>
4139
</div>

‎src/app/forms/boxed/boxed.hbs‎

Lines changed: 30 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -5,37 +5,35 @@
55
Boxed Inputs
66
</h3>
77
</div>
8-
<section class="section">
9-
<form>
10-
<div class="form-group">
11-
<label class="control-label">Input Text</label>
12-
<input type="text" class="form-control boxed">
13-
</div>
14-
<div class="form-group">
15-
<label class="control-label">Input Password</label>
16-
<input type="password" class="form-control boxed">
17-
</div>
18-
<div class="form-group">
19-
<label class="control-label">Placeholder Input</label>
20-
<input type="text" class="form-control boxed" placeholder="Placeholder text">
21-
</div>
22-
<div class="form-group">
23-
<label class="control-label">Disabled Input</label>
24-
<input type="text" disabled="disabled" class="form-control boxed" placeholder="Disabled input text">
25-
</div>
26-
<div class="form-group">
27-
<label class="control-label">Static control</label>
28-
<p class="form-control-static boxed">email@example.com</p>
29-
</div>
30-
<div class="form-group">
31-
<label class="control-label">Readonly Input</label>
32-
<input type="text" readonly="readonly" class="form-control boxed" value="Readonly input text">
33-
</div>
34-
<div class="form-group">
35-
<label class="control-label">Textarea</label>
36-
<textarea rows="3" class="form-control boxed"></textarea>
37-
</div>
38-
</form>
39-
</section>
8+
<form>
9+
<div class="form-group">
10+
<label class="control-label">Input Text</label>
11+
<input type="text" class="form-control boxed">
12+
</div>
13+
<div class="form-group">
14+
<label class="control-label">Input Password</label>
15+
<input type="password" class="form-control boxed">
16+
</div>
17+
<div class="form-group">
18+
<label class="control-label">Placeholder Input</label>
19+
<input type="text" class="form-control boxed" placeholder="Placeholder text">
20+
</div>
21+
<div class="form-group">
22+
<label class="control-label">Disabled Input</label>
23+
<input type="text" disabled="disabled" class="form-control boxed" placeholder="Disabled input text">
24+
</div>
25+
<div class="form-group">
26+
<label class="control-label">Static control</label>
27+
<p class="form-control-static boxed">email@example.com</p>
28+
</div>
29+
<div class="form-group">
30+
<label class="control-label">Readonly Input</label>
31+
<input type="text" readonly="readonly" class="form-control boxed" value="Readonly input text">
32+
</div>
33+
<div class="form-group">
34+
<label class="control-label">Textarea</label>
35+
<textarea rows="3" class="form-control boxed"></textarea>
36+
</div>
37+
</form>
4038
</div>
4139
</div>

‎src/app/forms/checboxes/checboxes.hbs‎

Lines changed: 56 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,68 @@
11
<div class="card">
22
<div class="card-block">
3-
43
<div class="card-title-block">
54
<h3 class="title">
65
Checkboxe Types
76
</h3>
87
</div>
9-
<section class="section">
10-
<form role="form">
11-
<div class="form-group">
12-
<label class="control-label">Checkboxes</label>
13-
<div>
14-
<label>
15-
<input class="checkbox" type="checkbox">
16-
<span>Option one</span>
17-
</label>
18-
</div>
19-
<div>
20-
<label>
21-
<input class="checkbox" type="checkbox" checked="checked">
22-
<span>Option two checked</span>
23-
</label>
24-
</div>
25-
<div>
26-
<label>
27-
<input class="checkbox" type="checkbox" disabled="disabled" checked="checked">
28-
<span>Option three checked and disabled</span>
29-
</label>
30-
</div>
31-
<div>
32-
<label>
33-
<input class="checkbox" type="checkbox" disabled="disabled" >
34-
<span>Option four disabled</span>
35-
</label>
36-
</div>
8+
<form role="form">
9+
<div class="form-group">
10+
<label class="control-label">Checkboxes</label>
11+
<div>
12+
<label>
13+
<input class="checkbox" type="checkbox">
14+
<span>Option one</span>
15+
</label>
3716
</div>
38-
<div class="form-group">
39-
<label class="control-label">Inline Checkboxes</label>
40-
<div>
41-
<label>
42-
<input class="checkbox" type="checkbox">
43-
<span>a</span>
44-
</label>
45-
<label>
46-
<input class="checkbox" type="checkbox">
47-
<span>b</span>
48-
</label>
49-
<label>
50-
<input class="checkbox" type="checkbox">
51-
<span>c</span>
52-
</label>
53-
</div>
17+
<div>
18+
<label>
19+
<input class="checkbox" type="checkbox" checked="checked">
20+
<span>Option two checked</span>
21+
</label>
5422
</div>
55-
<div class="form-group">
56-
<label class="control-label">Rounded Checkboxes</label>
57-
<div>
58-
<label>
59-
<input class="checkbox rounded" checked="checked" type="checkbox">
60-
<span>Checked</span>
61-
</label>
62-
<label>
63-
<input class="checkbox rounded" type="checkbox">
64-
<span>Unchecked</span>
65-
</label>
66-
</div>
23+
<div>
24+
<label>
25+
<input class="checkbox" type="checkbox" disabled="disabled" checked="checked">
26+
<span>Option three checked and disabled</span>
27+
</label>
6728
</div>
68-
</form>
69-
</section>
29+
<div>
30+
<label>
31+
<input class="checkbox" type="checkbox" disabled="disabled" >
32+
<span>Option four disabled</span>
33+
</label>
34+
</div>
35+
</div>
36+
<div class="form-group">
37+
<label class="control-label">Inline Checkboxes</label>
38+
<div>
39+
<label>
40+
<input class="checkbox" type="checkbox">
41+
<span>a</span>
42+
</label>
43+
<label>
44+
<input class="checkbox" type="checkbox">
45+
<span>b</span>
46+
</label>
47+
<label>
48+
<input class="checkbox" type="checkbox">
49+
<span>c</span>
50+
</label>
51+
</div>
52+
</div>
53+
<div class="form-group">
54+
<label class="control-label">Rounded Checkboxes</label>
55+
<div>
56+
<label>
57+
<input class="checkbox rounded" checked="checked" type="checkbox">
58+
<span>Checked</span>
59+
</label>
60+
<label>
61+
<input class="checkbox rounded" type="checkbox">
62+
<span>Unchecked</span>
63+
</label>
64+
</div>
65+
</div>
66+
</form>
7067
</div>
7168
</div>

0 commit comments

Comments
 (0)