Skip to content

Commit ecf8c0e

Browse files
smakoshsmakosh
committed
adding disabled buttons and navbar
1 parent ee8da5e commit ecf8c0e

File tree

5 files changed

+136
-1
lines changed

5 files changed

+136
-1
lines changed

‎source/app/index.html

Lines changed: 40 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,25 @@ <h4 class="download">Or download both</h4>
7979
<a href="http://smakosh.com/unnamed-css.zip" class="btn btn-rounded btn-outlined purple-btn push-up" download>Download</a>
8080
</div>
8181

82+
<div class="container navbar">
83+
<h3 class="title">
84+
Navbar
85+
</h3>
86+
<div class="divider"></div>
87+
88+
<div class="nav navbar-green">
89+
<div class="brand-logo">
90+
<a href="" class="branding"></a>
91+
</div>
92+
<div class="links">
93+
<a href="">Home</a>
94+
<a href="">About</a>
95+
<a href="">Help</a>
96+
<a href="">Contact</a>
97+
</div>
98+
</div>
99+
</div>
100+
82101
<div class="container buttons" id="doc">
83102
<h3 class="title">Buttons</h3>
84103
<div class="divider"></div>
@@ -107,6 +126,26 @@ <h3 class="title">Buttons</h3>
107126
<button href="#" class="btn btn-rounded btn-outlined purple-btn">btn-outlined</button>
108127
</div>
109128

129+
<h3 class="title">Disabled buttons</h3>
130+
<div class="divider"></div>
131+
<div class="type-buttons">
132+
<button href="#" class="btn btn-primary gradient-black" disabled>btn-primary</button>
133+
<button href="#" class="btn btn-rounded gradient-black" disabled>btn-rounded</button>
134+
<button href="#" class="btn btn-rounded btn-outlined black-btn" disabled>btn-outlined</button>
135+
</div>
136+
137+
<div class="type-buttons">
138+
<button href="#" class="btn btn-primary gradient-green" disabled>btn-primary</button>
139+
<button href="#" class="btn btn-rounded gradient-green" disabled>btn-rounded</button>
140+
<button href="#" class="btn btn-rounded btn-outlined green-btn" disabled>btn-outlined</button>
141+
</div>
142+
143+
<div class="type-buttons">
144+
<button href="#" class="btn btn-primary gradient-orange" disabled>btn-primary</button>
145+
<button href="#" class="btn btn-rounded gradient-orange" disabled>btn-rounded</button>
146+
<button href="#" class="btn btn-rounded btn-outlined orange-btn" disabled>btn-outlined</button>
147+
</div>
148+
110149
<h4 class="description">There are 3 types of buttons and you can change the colors just
111150
by changing the color name, something like this</h4>
112151
<p>for black use <pre class="little">.gradient-black</pre></p>
@@ -125,7 +164,7 @@ <h4 class="description">For the outlined button use these classes</h4>
125164

126165
<div class="code">
127166
<h4 class="pad">Buttons</h4>
128-
<pre><span class="class-name">.btn btn-hover btn-primary gradient-black</span><br><br><span class="class-name">.btn btn-hover btn-primary gradient-purple</span><br><br><span class="class-name">.btn btn-hover btn-rounded gradient-purple</span><br><br><span class="class-name">.btn btn-rounded btn-outlined gradient-purple</span></pre>
167+
<pre><span class="class-name">.btn btn-hover btn-primary gradient-black</span><br><br><span class="class-name">.btn btn-hover btn-primary gradient-purple</span><br><br><span class="class-name">.btn btn-hover btn-rounded gradient-purple</span><br><br><span class="class-name">.btn btn-rounded btn-outlined purple-btn</span></pre>
129168
</div>
130169
</div>
131170

‎source/app/styles/buttons.scss

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,3 +75,18 @@
7575
background-color: $purple-btn;
7676
}
7777
}
78+
79+
button:disabled {
80+
81+
box-shadow: unset;
82+
opacity: .8;
83+
background: #505050;
84+
color: #fff;
85+
border: unset;
86+
}
87+
88+
button:disabled:hover {
89+
90+
box-shadow: unset;
91+
background: #505050;
92+
}

‎source/app/styles/gradient.scss

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,3 +79,21 @@
7979
transition: all 0.5s;
8080
}
8181
}
82+
83+
.navbar-green {
84+
@include linear-gradient($green, $blue);
85+
box-shadow: 0px 4px 7px 0px rgba(18, 194, 211, 0.48);
86+
transition: all 0.5s;
87+
}
88+
89+
.navbar-orange {
90+
@include linear-gradient($yellow, $orange);
91+
box-shadow: 0px 4px 7px 0px rgba(255, 50, 39, 0.48);
92+
transition: all 0.5s;
93+
}
94+
95+
.navbar-purple {
96+
@include linear-gradient($dark-blue, $purple);
97+
box-shadow: 0px 4px 7px 0px rgba(170, 49, 255, 0.48);
98+
transition: all 0.5s;
99+
}

‎source/app/styles/main.scss

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
@import "default";
99
@import "gradient";
1010
@import "buttons";
11+
@import "navbar";
1112

1213
body {
1314
font-family: 'roboto';
@@ -95,6 +96,19 @@ body {
9596
}
9697
}
9798

99+
.nav {
100+
101+
.brand-logo {
102+
103+
.branding {
104+
105+
background-color: #fff;
106+
padding: .5rem 1rem;
107+
border-radius: 5px;
108+
}
109+
}
110+
}
111+
98112
.buttons {
99113

100114
a {

‎source/app/styles/navbar.scss

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
@import 'grid';
2+
.nav {
3+
4+
display: flex;
5+
justify-content: space-between;
6+
align-items: center;
7+
padding: 2rem 1rem;
8+
@media screen and (max-width: $mobile) {
9+
10+
flex-direction: column;
11+
justify-content: center;
12+
}
13+
.brand-logo {
14+
15+
@media screen and (max-width: $mobile) {
16+
17+
margin-bottom: 2rem;
18+
}
19+
.branding {
20+
21+
background-position: center;
22+
background-size: cover;
23+
background-repeat: no-repeat;
24+
cursor: pointer;
25+
}
26+
}
27+
28+
.links {
29+
30+
display: flex;
31+
align-items: center;
32+
@media screen and (max-width: $mobile) {
33+
34+
flex-direction: column;
35+
justify-content: center;
36+
}
37+
a {
38+
39+
padding: 0 2rem;
40+
color: #fff;
41+
transition: .5s;
42+
&:hover {
43+
44+
color: #212121;
45+
transition: .5s;
46+
}
47+
}
48+
}
49+
}

0 commit comments

Comments
 (0)