Skip to content

Commit 7722fa5

Browse files
author
James Newell
committed
merging changes for the styleguide into master
2 parents 4dcbccd + 5e1f859 commit 7722fa5

File tree

7 files changed

+723
-191
lines changed

7 files changed

+723
-191
lines changed

‎.gitignore

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,4 @@
11
build
2-
components
2+
components
3+
index.css.map
4+
.sass-cache/

‎README.md

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,23 @@
11
# buttons
2-
3-
<a class="v2-button v2-button--primary">
4-
Continue to Payments
5-
<i class="v2-icon v2-icon--small v2-icon--arrow-right-circle"></i>
6-
</a>
72

8-
## Dependancies
3+
nib styled buttons.
94

10-
Uses Opens Sans font from Google fonts
5+
## Usage
116

12-
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
7+
<button class="v2-button v2-button--primary v2-button--large v2-button--icon-on-right">
8+
Button with icon <i class="v2-icon v2-icon--person v2-icon--smallest v2-icon--offset-descenders"></i>
9+
</button>
1310

14-
15-
## Examples
11+
See the pattern library or [example.html](example.html) for more examples.
12+
13+
**Note:** Uses `Opens Sans` and `Roboto` fonts from Google:
14+
15+
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:700|Roboto:700" />
16+
17+
## Building
18+
19+
$ sass index.scss > index.css
20+
$ component build --dev
21+
22+
**Note:** Requires SASS 3.3 to build
1623

17-
See [example.html](example.html)

‎component.json

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
11
{
22
"name": "buttons",
3-
"styles": ["index.css"]
3+
"styles": ["index.css"],
4+
"development": {
5+
"dependencies": {
6+
"nib-styles/v2-icons": "^2.1.1"
7+
}
8+
}
49
}

‎example.html

Lines changed: 0 additions & 51 deletions
This file was deleted.

‎example/example.html

Lines changed: 197 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,197 @@
1+
<!DOCTYPE html>
2+
<html class="no-touch">
3+
<head lang="en">
4+
<meta charset="UTF-8">
5+
<title>Buttons</title>
6+
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:700|Roboto:700" />
7+
<link href="../build/build.css" rel="stylesheet" type="text/css"/>
8+
<style>
9+
10+
.container {
11+
margin: 10px 0;
12+
}
13+
14+
.light-bg {
15+
float: left;
16+
box-sizing: border-box;
17+
display: block;
18+
width: 50%;
19+
padding: 20px;
20+
background-color: #fff;
21+
}
22+
23+
.dark-bg {
24+
float: left;
25+
box-sizing: border-box;
26+
display: block;
27+
width: 50%;
28+
padding: 20px;
29+
background-color: #009623;
30+
}
31+
32+
</style>
33+
</head>
34+
<body>
35+
36+
<div class="light-bg">
37+
38+
<div class="container">
39+
40+
<button class="v2-button v2-button--primary">
41+
Primary button
42+
</button>
43+
44+
<button class="v2-button v2-button--primary" disabled>
45+
Primary button (disabled)
46+
</button>
47+
48+
</div>
49+
50+
<div class="container">
51+
52+
<button class="v2-button v2-button--secondary-dark-grey">
53+
Secondary button
54+
</button>
55+
56+
<button class="v2-button v2-button--secondary-dark-grey" disabled>
57+
Secondary button (disabled)
58+
</button>
59+
60+
<br/><br/>
61+
62+
<button class="v2-button v2-button--secondary-green">
63+
Secondary button
64+
</button>
65+
66+
<button class="v2-button v2-button--secondary-green" disabled>
67+
Secondary button (disabled)
68+
</button>
69+
70+
</div>
71+
72+
<div class="container">
73+
74+
<button class="v2-button v2-button--tertiary-green">
75+
Tertiary button
76+
</button>
77+
78+
<button class="v2-button v2-button--tertiary-green" disabled>
79+
Tertiary button (disabled)
80+
</button>
81+
82+
<br/>
83+
84+
<button class="v2-button v2-button--tertiary-grey">
85+
Tertiary button
86+
</button>
87+
88+
<button class="v2-button v2-button--tertiary-grey" disabled>
89+
Tertiary button (disabled)
90+
</button>
91+
92+
</div>
93+
94+
<div class="container">
95+
96+
<button class="v2-button v2-button--supplementary-green">
97+
Supplementary button
98+
</button>
99+
100+
<button class="v2-button v2-button--supplementary-green" disabled>
101+
Supplementary button (disabled)
102+
</button>
103+
104+
<br/>
105+
106+
<button class="v2-button v2-button--supplementary-grey">
107+
Supplementary button
108+
</button>
109+
110+
<button class="v2-button v2-button--supplementary-grey" disabled>
111+
Supplementary button (disabled)
112+
</button>
113+
114+
</div>
115+
116+
</div>
117+
118+
<!-- --------------------------------------------------------------------------------------------------------------- -->
119+
120+
<div class="dark-bg">
121+
122+
<div class="container">
123+
124+
<button class="v2-button v2-button--primary">
125+
Primary button
126+
</button>
127+
128+
<button class="v2-button v2-button--primary" disabled>
129+
Primary button (disabled)
130+
</button>
131+
132+
</div>
133+
134+
<div class="container">
135+
136+
<button class="v2-button v2-button--secondary-light-grey">
137+
Secondary button
138+
</button>
139+
140+
<button class="v2-button v2-button--secondary-light-grey" disabled>
141+
Secondary button (disabled)
142+
</button>
143+
144+
</div>
145+
146+
<div class="container">
147+
148+
<button class="v2-button v2-button--tertiary-white">
149+
Tertiary button
150+
</button>
151+
152+
<button class="v2-button v2-button--tertiary-white" disabled>
153+
Tertiary button (disabled)
154+
</button>
155+
156+
</div>
157+
158+
<div class="container">
159+
160+
<button class="v2-button v2-button--supplementary-white">
161+
Supplementary button
162+
</button>
163+
164+
<button class="v2-button v2-button--supplementary-white" disabled>
165+
Supplementary button (disabled)
166+
</button>
167+
168+
</div>
169+
170+
</div>
171+
172+
<div class="container" style="clear: both;">
173+
174+
<button class="v2-button v2-button--primary">
175+
Primary button &mdash; Normal
176+
</button>
177+
178+
<br/><br/>
179+
180+
<button class="v2-button v2-button--primary v2-button--medium">
181+
Primary button &mdash; Medium
182+
</button>
183+
184+
<br/><br/>
185+
186+
<button class="v2-button v2-button--primary v2-button--large">
187+
Primary button &mdash; Large
188+
</button>
189+
190+
</div>
191+
192+
<button class="v2-button v2-button--primary v2-button--icon-on-right">
193+
Primary button &mdash; with icon <i class="v2-icon v2-icon--person v2-icon--smallest v2-icon--offset-descenders"></i>
194+
</button>
195+
196+
</body>
197+
</html>

0 commit comments

Comments
 (0)