Skip to content

Commit b2f2aad

Browse files
author
rubenshibu
committed
added dropdown
1 parent 4ad66ae commit b2f2aad

File tree

2 files changed

+134
-1
lines changed

2 files changed

+134
-1
lines changed

‎css/dropdown.css‎

Lines changed: 87 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,87 @@
1-
/* Add your css for dropdowns */
1+
/* Add your css for dropdowns */
2+
3+
4+
*{
5+
padding: 0;
6+
margin: 0;
7+
font-family: 'Lato', sans-serif;
8+
box-sizing: border-box;
9+
}
10+
.float-right{
11+
float: right;
12+
}
13+
.fa{
14+
font-size: .8em;
15+
line-height: 22px !important;
16+
}
17+
dropdown{
18+
display: inline-block;
19+
margin: 20px 50px;
20+
}
21+
dropdown label, dropdown ul li{
22+
display: block;
23+
width: 200px;
24+
background: #ECF0F1;
25+
padding: 15px 20px;
26+
}
27+
dropdown label:hover, dropdown ul li:hover{
28+
background: #1ABC9C;
29+
color: white;
30+
cursor: pointer;
31+
}
32+
dropdown label{
33+
color: #1ABC9C;
34+
border-left: 4px solid #1ABC9C;
35+
border-radius: 0 5px 0 0;
36+
position: relative;
37+
z-index: 2;
38+
}
39+
dropdown input{
40+
display: none;
41+
}
42+
dropdown input ~ ul{
43+
position: relative;
44+
visibility: hidden;
45+
opacity: 0;
46+
top: -20px;
47+
z-index: 1;
48+
}
49+
dropdown input:checked + label{
50+
background: #1ABC9C;
51+
color: white;
52+
}
53+
54+
dropdown input:checked ~ ul{
55+
visibility: visible;
56+
opacity: 1;
57+
top: 0;
58+
}
59+
$colors: #E74C3C, #0072B5, #2C3E50;
60+
61+
@for $i from 1 through length($colors) {
62+
dropdown ul li:nth-child(#{$i}) {
63+
border-left: 4px solid nth($colors, $i);
64+
.fa{
65+
color: nth($colors, $i);
66+
}
67+
&:hover {
68+
background: nth($colors, $i);
69+
color: white;
70+
.fa{
71+
color: white;
72+
}
73+
}
74+
}
75+
}
76+
77+
.animate{
78+
-webkit-transition: all .3s;
79+
-moz-transition: all .3s;
80+
-ms-transition: all .3s;
81+
-ms-transition: all .3s;
82+
transition: all .3s;
83+
backface-visibility:hidden;
84+
-webkit-backface-visibility:hidden; /* Chrome and Safari */
85+
-moz-backface-visibility:hidden; /* Firefox */
86+
-ms-backface-visibility:hidden; /* Internet Explorer */
87+
}

‎pages/dropdown.html‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,53 @@ <h3>Add your different dropdowns</h3>
4747
<div class="container-fluid">
4848
<!-- your name -->
4949
<!-- Add your html content that you have copied from contributors.md along with you component -->
50+
<div class="row">
51+
<div class="col-lg-6">
52+
<div class="component">
53+
<div class="card magictime">
54+
<div class="card-title tonal">
55+
<strong>Textfield</strong>
56+
</div>
57+
<div class="card-content">
58+
59+
<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700,900' rel='stylesheet' type='text/css'>
60+
<link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css">
61+
<dropdown>
62+
<input id="toggle1" type="checkbox" checked>
63+
<label for="toggle1" class="animate">Editor<i class="fa fa-list float-right"></i></label>
64+
<ul class="animate">
65+
<li class="animate">Source<i class="fa fa-code float-right"></i></li>
66+
<li class="animate">Fullpage<i class="fa fa-arrows-alt float-right"></i></li>
67+
<li class="animate">Debug<i class="fa fa-cog float-right"></i></li>
68+
</ul>
69+
</dropdown>
70+
71+
</div>
72+
</div>
73+
</div>
74+
</div>
75+
<div class="col-lg-6">
76+
<div class="component">
77+
<div class="card magictime">
78+
<div class="card-title tonal">
79+
<strong>Creator</strong>
80+
</div>
81+
<div class="card-content">
82+
<div class="creater-name">
83+
<h2>
84+
<b>Name:</b>
85+
<span>
86+
<a href="https://github.com/rubenshibu">Ruben Shibu</a>
87+
</span>
88+
</h2>
89+
</div>
90+
</div>
91+
</div>
92+
</div>
93+
</div>
94+
</div>
95+
96+
5097
</div>
5198
</section>
5299
<footer>

0 commit comments

Comments
 (0)