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

Commit 148907d

Browse files
sfrisksfrisk
committed
Buttons: Initial pass at buttons, covering sizes, options, and states
Fixes gh-96
1 parent 17fa2a8 commit 148907d

File tree

4 files changed

+366
-1
lines changed

4 files changed

+366
-1
lines changed

‎demos/buttons.html

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>CSS Chassis - Buttons</title>
6+
<meta name="description" content="Typography 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>Button tag</h2>
17+
18+
<p>Use the button classes on an <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>, or <code>&lt;input&gt;</code> element.
19+
20+
21+
<form>
22+
<a class="ui-button--default" href="#" role="button">Link</a>
23+
<button class="ui-button--default" type="submit">Button</button>
24+
<input class="ui-button--default" type="button" value="Input">
25+
<input class="ui-button--default" type="submit" value="Submit">
26+
</form>
27+
28+
<h2>Options</h2>
29+
30+
<form>
31+
<button class="ui-button--primary" type="submit">Primary</button>
32+
<button class="ui-button--default" type="submit">Default</button>
33+
</form>
34+
35+
<h3>Sizes</h3>
36+
37+
<form>
38+
<p>
39+
<button class="ui-button--primary--large" type="submit">Large Button</button>
40+
<button class="ui-button--default--large" type="submit">Large Button</button>
41+
</p>
42+
<p>
43+
<button class="ui-button--primary" type="submit">Default Button</button>
44+
<button class="ui-button--default" type="submit">Default Button</button>
45+
</p>
46+
<p>
47+
<button class="ui-button--primary--small" type="submit">Small Button</button>
48+
<button class="ui-button--default--small" type="submit">Small Button</button>
49+
</p>
50+
<p>
51+
<button class="ui-button--primary--extra-small" type="submit">Extra Small Button</button>
52+
<button class="ui-button--default--extra-small" type="submit">Extra Small Button</button>
53+
</p>
54+
</form>
55+
56+
57+
<h2>Disabled State</h2>
58+
59+
<h3>Button Element</h3>
60+
61+
<p>Add the <code>disabled</code> attribute to <code>&lt;button&gt;</code> buttons.</p>
62+
63+
<form>
64+
<p>
65+
<button class="ui-button--primary--large" disabled="disabled" type="submit">Large Button</button>
66+
<button class="ui-button--default--large" disabled="disabled" type="submit">Large Button</button>
67+
</p>
68+
<p>
69+
<button class="ui-button--primary" disabled="disabled" type="submit">Default Button</button>
70+
<button class="ui-button--default" disabled="disabled" type="submit">Default Button</button>
71+
</p>
72+
<p>
73+
<button class="ui-button--primary--small" disabled="disabled" type="submit">Small Button</button>
74+
<button class="ui-button--default--small" disabled="disabled" type="submit">Small Button</button>
75+
</p>
76+
<p>
77+
<button class="ui-button--primary--extra-small" disabled="disabled" type="submit">Extra Small Button</button>
78+
<button class="ui-button--default--extra-small" disabled="disabled" type="submit">Extra Small Button</button>
79+
</p>
80+
</form>
81+
82+
<h3>Anchor Element</h3>
83+
<p>Add <code>--disabled</code> to the end of the button class.</p>
84+
<form>
85+
<p>
86+
<a class="ui-button--primary--large--disabled" href="#" role="button">Large Link</a>
87+
<a class="ui-button--default--large--disabled" href="#" role="button">Large Link</a>
88+
</p>
89+
<p>
90+
<a class="ui-button--primary--disabled" href="#" role="button">Default Link</a>
91+
<a class="ui-button--default--disabled" href="#" role="button">Default Link</a>
92+
</p>
93+
<p>
94+
<a class="ui-button--primary--small--disabled" href="#" role="button">Small Link</a>
95+
<a class="ui-button--default--small--disabled" href="#" role="button">Small Link</a>
96+
</p>
97+
<p>
98+
<a class="ui-button--primary--extra-small--disabled" href="#" role="button">Extra Small Link</a>
99+
<a class="ui-button--default--extra-small--disabled" href="#" role="button">Extra Small Link</a>
100+
</p>
101+
</form>
102+
103+
</body>
104+
</html>

‎scss/atoms/buttons/_buttons.scss

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
/*
2+
* ==========================================================================
3+
* Buttons
4+
* ==========================================================================
5+
*/
6+
7+
@import "extends";
8+
9+
.ui-button {
10+
&--default {
11+
@extend %ui-button;
12+
@extend %ui-button--default;
13+
@extend %ui-button--default--hover;
14+
@extend %ui-button--default--focus;
15+
@extend %ui-button--default--active;
16+
@extend %ui-button--default--disabled;
17+
@extend %ui-button--default-size;
18+
19+
&--disabled {
20+
@extend %ui-button;
21+
@extend %ui-button--default;
22+
@extend %ui-button--disabled;
23+
@extend %ui-button--default-size;
24+
}
25+
26+
&--large {
27+
@extend %ui-button;
28+
@extend %ui-button--default;
29+
@extend %ui-button--default--hover;
30+
@extend %ui-button--default--focus;
31+
@extend %ui-button--default--active;
32+
@extend %ui-button--default--disabled;
33+
@extend %ui-button--large;
34+
35+
&--disabled {
36+
@extend %ui-button;
37+
@extend %ui-button--default;
38+
@extend %ui-button--disabled;
39+
@extend %ui-button--large;
40+
}
41+
}
42+
43+
&--small {
44+
@extend %ui-button;
45+
@extend %ui-button--default;
46+
@extend %ui-button--default--hover;
47+
@extend %ui-button--default--focus;
48+
@extend %ui-button--default--active;
49+
@extend %ui-button--default--disabled;
50+
@extend %ui-button--small;
51+
52+
&--disabled {
53+
@extend %ui-button;
54+
@extend %ui-button--default;
55+
@extend %ui-button--disabled;
56+
@extend %ui-button--small;
57+
}
58+
}
59+
60+
&--extra-small {
61+
@extend %ui-button;
62+
@extend %ui-button--default;
63+
@extend %ui-button--default--hover;
64+
@extend %ui-button--default--focus;
65+
@extend %ui-button--default--active;
66+
@extend %ui-button--default--disabled;
67+
@extend %ui-button--extra-small;
68+
69+
&--disabled {
70+
@extend %ui-button;
71+
@extend %ui-button--default;
72+
@extend %ui-button--disabled;
73+
@extend %ui-button--extra-small;
74+
}
75+
}
76+
}
77+
78+
&--primary {
79+
@extend %ui-button;
80+
@extend %ui-button--primary;
81+
@extend %ui-button--primary--hover;
82+
@extend %ui-button--primary--focus;
83+
@extend %ui-button--primary--active;
84+
@extend %ui-button--primary--disabled;
85+
@extend %ui-button--default-size;
86+
87+
&--disabled {
88+
@extend %ui-button;
89+
@extend %ui-button--primary;
90+
@extend %ui-button--disabled;
91+
@extend %ui-button--default-size;
92+
}
93+
94+
&--large {
95+
@extend %ui-button;
96+
@extend %ui-button--primary;
97+
@extend %ui-button--primary--hover;
98+
@extend %ui-button--primary--focus;
99+
@extend %ui-button--primary--active;
100+
@extend %ui-button--primary--disabled;
101+
@extend %ui-button--large;
102+
103+
&--disabled {
104+
@extend %ui-button;
105+
@extend %ui-button--primary;
106+
@extend %ui-button--disabled;
107+
@extend %ui-button--large;
108+
}
109+
}
110+
111+
&--small {
112+
@extend %ui-button;
113+
@extend %ui-button--primary;
114+
@extend %ui-button--primary--hover;
115+
@extend %ui-button--primary--focus;
116+
@extend %ui-button--primary--active;
117+
@extend %ui-button--primary--disabled;
118+
@extend %ui-button--small;
119+
120+
&--disabled {
121+
@extend %ui-button;
122+
@extend %ui-button--primary;
123+
@extend %ui-button--disabled;
124+
@extend %ui-button--small;
125+
}
126+
}
127+
128+
&--extra-small {
129+
@extend %ui-button;
130+
@extend %ui-button--primary;
131+
@extend %ui-button--primary--hover;
132+
@extend %ui-button--primary--focus;
133+
@extend %ui-button--primary--active;
134+
@extend %ui-button--primary--disabled;
135+
@extend %ui-button--extra-small;
136+
137+
&--disabled {
138+
@extend %ui-button;
139+
@extend %ui-button--primary;
140+
@extend %ui-button--disabled;
141+
@extend %ui-button--extra-small;
142+
}
143+
}
144+
}
145+
}

‎scss/atoms/buttons/_extends.scss

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
/*
2+
* ==========================================================================
3+
* Buttons (Extends)
4+
* ==========================================================================
5+
*/
6+
7+
/* These colors won't remain here, will be removed with jsass */
8+
$background: #fff;
9+
$chassis-blue: #4fc0c8;
10+
$chassis-gray-light: #f2f2f2;
11+
$chassis-gray-dark: #383838;
12+
13+
%ui-button {
14+
border: 0;
15+
box-sizing: border-box;
16+
display: inline-block;
17+
font-weight: 500;
18+
margin: .25em;
19+
text-align: center;
20+
text-decoration: none;
21+
text-transform: uppercase;
22+
}
23+
24+
%ui-button--large {
25+
font-size: 20px;
26+
line-height: 20px;
27+
padding: .75em;
28+
}
29+
30+
%ui-button--default-size {
31+
font-size: 16px;
32+
line-height: 16px;
33+
padding: .5em;
34+
}
35+
36+
%ui-button--small {
37+
font-size: 14px;
38+
line-height: 14px;
39+
padding: .2em .5em;
40+
height: 20px;
41+
}
42+
43+
%ui-button--extra-small {
44+
font-size: 12px;
45+
line-height: 12px;
46+
padding: .2em .5em;
47+
}
48+
49+
%ui-button--default {
50+
background: $background;
51+
color: $chassis-gray-dark;
52+
}
53+
54+
%ui-button--default--active {
55+
&:active,
56+
&:active:focus {
57+
background: darken($background, 20%);
58+
}
59+
}
60+
61+
%ui-button--default--focus {
62+
&:focus {
63+
background: darken($background, 15%);
64+
}
65+
}
66+
67+
%ui-button--default--hover {
68+
&:hover {
69+
background: darken($background, 10%);
70+
}
71+
}
72+
73+
%ui-button--default--disabled {
74+
&:disabled {
75+
opacity: .6;
76+
background: $background;
77+
}
78+
}
79+
80+
81+
%ui-button--primary {
82+
background: $chassis-blue;
83+
color: $chassis-gray-light;
84+
}
85+
86+
%ui-button--primary--active {
87+
&:active,
88+
&:active:focus {
89+
background: darken($chassis-blue, 20%);
90+
}
91+
}
92+
93+
%ui-button--primary--focus {
94+
&:focus {
95+
background: darken($chassis-blue, 15%);
96+
}
97+
}
98+
99+
%ui-button--primary--hover {
100+
&:hover {
101+
background: darken($chassis-blue, 10%);
102+
}
103+
}
104+
105+
%ui-button--primary--disabled {
106+
&:disabled {
107+
background: $chassis-blue;
108+
opacity: .6;
109+
}
110+
}
111+
112+
%ui-button--disabled {
113+
opacity: .6;
114+
cursor: default;
115+
}

‎scss/lint.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,8 @@
1515

1616
@import
1717
"atoms/icons/icons",
18-
"atoms/typography/typography";
18+
"atoms/typography/typography",
19+
"atoms/buttons/buttons";
1920

2021
@import
2122
"views/main";

0 commit comments

Comments
 (0)