Skip to content
This repository was archived by the owner on Dec 11, 2021. It is now read-only.

Commit 4d3769f

Browse files
sfrisksfrisk
committed
Buttons: Base Styling of Button Classes
Fixes gh-96 Closes gh-138
1 parent 2958621 commit 4d3769f

File tree

10 files changed

+642
-53
lines changed

10 files changed

+642
-53
lines changed

‎.csslintrc

+2
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44
"box-sizing": false,
55
"compatible-vendor-prefixes": false,
66
"duplicate-background-images": false,
7+
"fallback-colors": false,
8+
"font-sizes": false,
79
"import": false,
810
"important": false,
911
"outline-none": false,

‎demos/buttons.html

+259
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,259 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>CSS Chassis - Typography</title>
6+
<meta name="description" content="Button skeleton for styling">
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
<link rel="stylesheet" href="../dist/css/chassis.css">
9+
<link rel="stylesheet" href="demos.css">
10+
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700,400italic,700italic" rel="stylesheet">
11+
</head>
12+
<body>
13+
14+
<h1>CSS Chassis</h1>
15+
16+
<h2>Extra Small Buttons</h2>
17+
<p>
18+
<button class="btn btn-default btn-xs">Default</button>
19+
<button class="btn btn-primary btn-xs">Primary</button>
20+
<button class="btn btn-success btn-xs">Success</button>
21+
<button class="btn btn-info btn-xs">Info</button>
22+
<button class="btn btn-warning btn-xs">Warning</button>
23+
<button class="btn btn-danger btn-xs">Danger</button>
24+
</p>
25+
26+
<h3>Extra Small Disabled</h3>
27+
<p>
28+
<button disabled="disabled" class="btn btn-default btn-xs">Default</button>
29+
<button disabled="disabled" class="btn btn-primary btn-xs">Primary</button>
30+
<button disabled="disabled" class="btn btn-success btn-xs">Success</button>
31+
<button disabled="disabled" class="btn btn-info btn-xs">Info</button>
32+
<button disabled="disabled" class="btn btn-warning btn-xs">Warning</button>
33+
<button disabled="disabled" class="btn btn-danger btn-xs">Danger</button>
34+
</p>
35+
36+
<h3>Extra Small Active</h3>
37+
<p>
38+
<button class="btn btn-default btn-xs active">Default</button>
39+
<button class="btn btn-primary btn-xs active">Primary</button>
40+
<button class="btn btn-success btn-xs active">Success</button>
41+
<button class="btn btn-info btn-xs active">Info</button>
42+
<button class="btn btn-warning btn-xs active">Warning</button>
43+
<button class="btn btn-danger btn-xs active">Danger</button>
44+
</p>
45+
46+
<h3>Extra Small Focus</h3>
47+
<p>
48+
<button class="btn btn-default btn-xs focus">Default</button>
49+
<button class="btn btn-primary btn-xs focus">Primary</button>
50+
<button class="btn btn-success btn-xs focus">Success</button>
51+
<button class="btn btn-info btn-xs focus">Info</button>
52+
<button class="btn btn-warning btn-xs focus">Warning</button>
53+
<button class="btn btn-danger btn-xs focus">Danger</button>
54+
</p>
55+
56+
<h3>Extra Small Hover</h3>
57+
<p>
58+
<button class="btn btn-default btn-xs hover">Default</button>
59+
<button class="btn btn-primary btn-xs hover">Primary</button>
60+
<button class="btn btn-success btn-xs hover">Success</button>
61+
<button class="btn btn-info btn-xs hover">Info</button>
62+
<button class="btn btn-warning btn-xs hover">Warning</button>
63+
<button class="btn btn-danger btn-xs hover">Danger</button>
64+
</p>
65+
66+
67+
<h2>Small Buttons</h2>
68+
<p>
69+
<button class="btn btn-default btn-sm">Default</button>
70+
<button class="btn btn-primary btn-sm">Primary</button>
71+
<button class="btn btn-success btn-sm">Success</button>
72+
<button class="btn btn-info btn-sm">Info</button>
73+
<button class="btn btn-warning btn-sm">Warning</button>
74+
<button class="btn btn-danger btn-sm">Danger</button>
75+
</p>
76+
77+
<h3>Small Disabled</h3>
78+
<p>
79+
<button disabled="disabled" class="btn btn-default btn-sm">Default</button>
80+
<button disabled="disabled" class="btn btn-primary btn-sm">Primary</button>
81+
<button disabled="disabled" class="btn btn-success btn-sm">Success</button>
82+
<button disabled="disabled" class="btn btn-info btn-sm">Info</button>
83+
<button disabled="disabled" class="btn btn-warning btn-sm">Warning</button>
84+
<button disabled="disabled" class="btn btn-danger btn-sm">Danger</button>
85+
</p>
86+
87+
<h3>Small Active</h3>
88+
<p>
89+
<button class="btn btn-default btn-sm active">Default</button>
90+
<button class="btn btn-primary btn-sm active">Primary</button>
91+
<button class="btn btn-success btn-sm active">Success</button>
92+
<button class="btn btn-info btn-sm active">Info</button>
93+
<button class="btn btn-warning btn-sm active">Warning</button>
94+
<button class="btn btn-danger btn-sm active">Danger</button>
95+
</p>
96+
97+
<h3>Small Focus</h3>
98+
<p>
99+
<button class="btn btn-default btn-sm focus">Default</button>
100+
<button class="btn btn-primary btn-sm focus">Primary</button>
101+
<button class="btn btn-success btn-sm focus">Success</button>
102+
<button class="btn btn-info btn-sm focus">Info</button>
103+
<button class="btn btn-warning btn-sm focus">Warning</button>
104+
<button class="btn btn-danger btn-sm focus">Danger</button>
105+
</p>
106+
107+
<h3>Small Hover</h3>
108+
<p>
109+
<button class="btn btn-default btn-sm hover">Default</button>
110+
<button class="btn btn-primary btn-sm hover">Primary</button>
111+
<button class="btn btn-success btn-sm hover">Success</button>
112+
<button class="btn btn-info btn-sm hover">Info</button>
113+
<button class="btn btn-warning btn-sm hover">Warning</button>
114+
<button class="btn btn-danger btn-sm hover">Danger</button>
115+
</p>
116+
117+
<h2>Medium Buttons</h2>
118+
<p>
119+
<button class="btn btn-default btn-md">Default</button>
120+
<button class="btn btn-primary btn-md">Primary</button>
121+
<button class="btn btn-success btn-md">Success</button>
122+
<button class="btn btn-info btn-md">Info</button>
123+
<button class="btn btn-warning btn-md">Warning</button>
124+
<button class="btn btn-danger btn-md">Danger</button>
125+
</p>
126+
127+
<h3>Medium Disabled</h3>
128+
<p>
129+
<button disabled="disabled" class="btn btn-default btn-md">Default</button>
130+
<button disabled="disabled" class="btn btn-primary btn-md">Primary</button>
131+
<button disabled="disabled" class="btn btn-success btn-md">Success</button>
132+
<button disabled="disabled" class="btn btn-info btn-md">Info</button>
133+
<button disabled="disabled" class="btn btn-warning btn-md">Warning</button>
134+
<button disabled="disabled" class="btn btn-danger btn-md">Danger</button>
135+
</p>
136+
137+
<h3>Medium Active</h3>
138+
<p>
139+
<button class="btn btn-default btn-md active">Default</button>
140+
<button class="btn btn-primary btn-md active">Primary</button>
141+
<button class="btn btn-success btn-md active">Success</button>
142+
<button class="btn btn-info btn-md active">Info</button>
143+
<button class="btn btn-warning btn-md active">Warning</button>
144+
<button class="btn btn-danger btn-md active">Danger</button>
145+
</p>
146+
147+
<h3>Medium Focus</h3>
148+
<p>
149+
<button class="btn btn-default btn-md focus">Default</button>
150+
<button class="btn btn-primary btn-md focus">Primary</button>
151+
<button class="btn btn-success btn-md focus">Success</button>
152+
<button class="btn btn-info btn-md focus">Info</button>
153+
<button class="btn btn-warning btn-md focus">Warning</button>
154+
<button class="btn btn-danger btn-md focus">Danger</button>
155+
</p>
156+
157+
<h3>Medium Hover</h3>
158+
<p>
159+
<button class="btn btn-default btn-md hover">Default</button>
160+
<button class="btn btn-primary btn-md hover">Primary</button>
161+
<button class="btn btn-success btn-md hover">Success</button>
162+
<button class="btn btn-info btn-md hover">Info</button>
163+
<button class="btn btn-warning btn-md hover">Warning</button>
164+
<button class="btn btn-danger btn-md hover">Danger</button>
165+
</p>
166+
167+
<h2>Large Buttons</h2>
168+
<p>
169+
<button class="btn btn-default btn-lg">Default</button>
170+
<button class="btn btn-primary btn-lg">Primary</button>
171+
<button class="btn btn-success btn-lg">Success</button>
172+
<button class="btn btn-info btn-lg">Info</button>
173+
<button class="btn btn-warning btn-lg">Warning</button>
174+
<button class="btn btn-danger btn-lg">Danger</button>
175+
</p>
176+
177+
<h3>Large Disabled</h3>
178+
<p>
179+
<button disabled="disabled" class="btn btn-default btn-lg">Default</button>
180+
<button disabled="disabled" class="btn btn-primary btn-lg">Primary</button>
181+
<button disabled="disabled" class="btn btn-success btn-lg">Success</button>
182+
<button disabled="disabled" class="btn btn-info btn-lg">Info</button>
183+
<button disabled="disabled" class="btn btn-warning btn-lg">Warning</button>
184+
<button disabled="disabled" class="btn btn-danger btn-lg">Danger</button>
185+
</p>
186+
187+
<h3>Large Active</h3>
188+
<p>
189+
<button class="btn btn-default btn-lg active">Default</button>
190+
<button class="btn btn-primary btn-lg active">Primary</button>
191+
<button class="btn btn-success btn-lg active">Success</button>
192+
<button class="btn btn-info btn-lg active">Info</button>
193+
<button class="btn btn-warning btn-lg active">Warning</button>
194+
<button class="btn btn-danger btn-lg active">Danger</button>
195+
</p>
196+
197+
<h3>Large Focus</h3>
198+
<p>
199+
<button class="btn btn-default btn-lg focus">Default</button>
200+
<button class="btn btn-primary btn-lg focus">Primary</button>
201+
<button class="btn btn-success btn-lg focus">Success</button>
202+
<button class="btn btn-info btn-lg focus">Info</button>
203+
<button class="btn btn-warning btn-lg focus">Warning</button>
204+
<button class="btn btn-danger btn-lg focus">Danger</button>
205+
</p>
206+
207+
<h3>Large Hover</h3>
208+
<p>
209+
<button class="btn btn-default btn-lg hover">Default</button>
210+
<button class="btn btn-primary btn-lg hover">Primary</button>
211+
<button class="btn btn-success btn-lg hover">Success</button>
212+
<button class="btn btn-info btn-lg hover">Info</button>
213+
<button class="btn btn-warning btn-lg hover">Warning</button>
214+
<button class="btn btn-danger btn-lg hover">Danger</button>
215+
</p>
216+
217+
<h3>Anchor Links as Buttons</h3>
218+
<p>
219+
<a href="#" class="btn btn-default btn-md" role="button">Default</a>
220+
<a href="#" class="btn btn-primary btn-md" role="button">Primary</a>
221+
<a href="#" class="btn btn-success btn-md" role="button">Success</a>
222+
<a href="#" class="btn btn-info btn-md" role="button">Info</a>
223+
<a href="#" class="btn btn-warning btn-md" role="button">Warning</a>
224+
<a href="#" class="btn btn-danger btn-md" role="button">Danger</a>
225+
</p>
226+
227+
<h3>Input[type=submit]</h3>
228+
<p>
229+
<input type="submit" class="btn btn-default btn-md" value="Default">
230+
<input type="submit" class="btn btn-primary btn-md" value="Primary">
231+
<input type="submit" class="btn btn-success btn-md" value="Success">
232+
<input type="submit" class="btn btn-info btn-md" value="Info">
233+
<input type="submit" class="btn btn-warning btn-md" value="Warning">
234+
<input type="submit" class="btn btn-danger btn-md" value="Danger">
235+
</p>
236+
237+
<h2>Block Buttons</h2>
238+
<p>
239+
<button class="btn btn-default btn-lg btn-block">Default</button>
240+
<button class="btn btn-primary btn-lg btn-block">Primary</button>
241+
<button class="btn btn-success btn-lg btn-block">Success</button>
242+
<button class="btn btn-info btn-lg btn-block">Info</button>
243+
<button class="btn btn-warning btn-lg btn-block">Warning</button>
244+
<button class="btn btn-danger btn-lg btn-block">Danger</button>
245+
</p>
246+
247+
<h2>Button Bar</h2>
248+
<p class="btn-group">
249+
<button class="btn-group--btn btn-default btn-lg">Default</button>
250+
<button class="btn-group--btn btn-primary btn-lg">Primary</button>
251+
<button class="btn-group--btn btn-success btn-lg">Success</button>
252+
<button class="btn-group--btn btn-info btn-lg">Info</button>
253+
<button class="btn-group--btn btn-warning btn-lg">Warning</button>
254+
<button class="btn-group--btn btn-danger btn-lg">Danger</button>
255+
</p>
256+
257+
258+
</body>
259+
</html>

‎demos/demos.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
body {
2-
max-width: 700px;
2+
max-width: 900px;
33
margin: 3em auto;
44
padding: 0 1em;
55
}

‎scss/_utilities/_functions.scss

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
/*
2+
* ==========================================================================
3+
* Misc. Sass Functions to ease calculations
4+
* ==========================================================================
5+
*/
6+
7+
@function map-deep-get($map, $keys...) {
8+
$value: $map;
9+
@each $key in $keys {
10+
$value: map-get($value, $key);
11+
}
12+
@return $value;
13+
}

‎scss/atoms/buttons/_buttons.scss

+87
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
/*
2+
* ==========================================================================
3+
* Buttons
4+
* ==========================================================================
5+
*/
6+
7+
@import
8+
"dist/chassis",
9+
"mixins";
10+
11+
.btn-group {
12+
position: relative;
13+
display: inline-block;
14+
vertical-align: middle;
15+
16+
&--btn {
17+
float: left;
18+
@include btn(0);
19+
}
20+
21+
&--btn:first-child {
22+
border-top-right-radius: 0;
23+
border-bottom-right-radius: 0;
24+
}
25+
26+
&--btn:last-child {
27+
border-top-left-radius: 0;
28+
border-bottom-left-radius: 0;
29+
}
30+
31+
&--btn:not(:first-child):not(:last-child) {
32+
border-radius: 0;
33+
}
34+
}
35+
36+
.btn-block {
37+
display: block;
38+
width: 100%;
39+
}
40+
41+
.btn {
42+
@include btn( map-get($ui-btn, margin));
43+
}
44+
45+
/* Button Colors */
46+
47+
.btn-default {
48+
@include btn-colors($ui-btn-default);
49+
}
50+
51+
.btn-primary {
52+
@include btn-colors($ui-btn-primary);
53+
}
54+
55+
.btn-success {
56+
@include btn-colors($ui-btn-success);
57+
}
58+
59+
.btn-info {
60+
@include btn-colors($ui-btn-info);
61+
}
62+
63+
.btn-warning {
64+
@include btn-colors($ui-btn-warning);
65+
}
66+
67+
.btn-danger {
68+
@include btn-colors($ui-btn-danger );
69+
}
70+
71+
/* Button Sizes */
72+
73+
.btn-lg {
74+
@include btn-size($ui-btn-lg);
75+
}
76+
77+
.btn-md {
78+
@include btn-size($ui-btn-md);
79+
}
80+
81+
.btn-sm {
82+
@include btn-size($ui-btn-sm);
83+
}
84+
85+
.btn-xs {
86+
@include btn-size($ui-btn-xs);
87+
}

0 commit comments

Comments
 (0)