Skip to content

Commit 5d81c90

Browse files
CITguyCITguy
authored
Merge pull request #56 from rackerlabs/SURF-503-build-buttons
surf-503-build-buttons
2 parents 95f5d0a + 981c644 commit 5d81c90

File tree

9 files changed

+213
-36
lines changed

9 files changed

+213
-36
lines changed

‎source/components/button/button-docs.less‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
@import (reference) 'button';
2+
3+
.hxBtn {
4+
&.pseudo-hover {
5+
&:extend(.hxBtn:hover);
6+
pointer-events: none;
7+
}
8+
9+
&.pseudo-active {
10+
&:extend(.hxBtn:active);
11+
pointer-events: none;
12+
}
13+
14+
&.pseudo-focus {
15+
&:extend(.hxBtn:focus);
16+
pointer-events: none;
17+
}
18+
19+
&--primary {
20+
&.pseudo-hover {
21+
&:extend(.hxBtn--primary:hover);
22+
pointer-events: none;
23+
}
24+
25+
&.pseudo-active {
26+
&:extend(.hxBtn--primary:active);
27+
pointer-events: none;
28+
}
29+
30+
&.pseudo-focus {
31+
&:extend(.hxBtn--primary:focus);
32+
pointer-events: none;
33+
}
34+
}
35+
36+
&--link {
37+
&.pseudo-hover {
38+
&:extend(.hxBtn--link:hover);
39+
pointer-events: none;
40+
}
41+
42+
&.pseudo-active {
43+
&:extend(.hxBtn--link:active);
44+
pointer-events: none;
45+
}
46+
}
47+
}

‎source/components/button/button.less‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
.hxBtn {
2+
background-color: transparent;
3+
border: 1px solid @cyan-900;
4+
border-radius: 2px;
5+
color: @cyan-900;
6+
font-weight: 500;
7+
line-height: 1;
8+
margin: 0;
9+
10+
&:hover {
11+
background-color: @cyan-500;
12+
border-color: transparent;
13+
color: @gray-0;
14+
}
15+
16+
&:active {
17+
background-color: @cyan-700;
18+
border-color: transparent;
19+
color: @gray-0;
20+
}
21+
22+
&:focus {
23+
box-shadow: 0 0 4px 0 fade(@cyan-700, 50%);
24+
outline: none;
25+
}
26+
27+
&[disabled] {
28+
background-color: transparent;
29+
border-color: @gray-400;
30+
color: @gray-400;
31+
cursor: not-allowed;
32+
}
33+
34+
&--lg {
35+
font-size: 1rem;
36+
padding: 15px 16px;
37+
}
38+
39+
& {
40+
font-size: 0.875rem;
41+
padding: 8px 12px;
42+
}
43+
44+
&--sm {
45+
padding: 2px 8px;
46+
}
47+
}
48+
49+
.hxBtn--primary {
50+
background-color: @cyan-900;
51+
color: @gray-0;
52+
53+
&[disabled] {
54+
background-color: @gray-400;
55+
border-color: transparent;
56+
color: @gray-700;
57+
}
58+
}
59+
60+
.hxBtn--link {
61+
background-color: transparent;
62+
border: none;
63+
padding-left: 0;
64+
padding-right: 0;
65+
66+
&:hover {
67+
background-color: transparent;
68+
border-color: transparent;
69+
color: @cyan-500;
70+
}
71+
72+
&:active {
73+
background-color: transparent;
74+
border-color: transparent;
75+
color: @cyan-700;
76+
}
77+
78+
&:focus {
79+
box-shadow: none;
80+
}
81+
82+
&[disabled] {
83+
background-color: transparent;
84+
border-color: transparent;
85+
color: @gray-400;
86+
}
87+
}

‎source/components/button/index.html‎

Lines changed: 64 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,103 @@
11
---
22
title: Button
33
assets:
4-
- bootstrap.helix.css
4+
- helix-ui.css
55
---
66
{% extends 'component.njk' %}
77
{% block content %}
88
<!-- explanation goes here -->
99

1010
<section>
11-
<h2 class="hxSectionTitle" id="size-variants">Size Variants</h2>
11+
<h2 class="hxSectionTitle" id="default-button">Default Button</h2>
1212

1313
<!-- explanation goes here -->
1414

1515
<div class="demo">
16-
<p>
17-
<button type="button" class="btn btn-default btn-lg">Large Button</button>
18-
<button type="button" class="btn btn-default">Default Button</button>
19-
<button type="button" class="btn btn-default btn-sm">Compact Button</button>
20-
</p>
16+
<button class="hxBtn">Default Button</button>
2117
</div>
18+
{% code 'html' %}
19+
<button class="hxBtn">Default Button</button>
20+
{% endcode %}
2221
</section>
2322

2423
<section>
25-
<h2 class="hxSectionTitle" id="default">Default Buttons</h2>
24+
<h2 class="hxSectionTitle" id="primary-button">Primary Button</h2>
2625

2726
<!-- explanation goes here -->
2827

2928
<div class="demo">
30-
<p>
31-
<button class="btn btn-default">Default Button</button>
32-
<button class="btn btn-default" disabled>Default Button (disabled)</button>
33-
</p>
29+
<button class="hxBtn hxBtn--primary">Primary Button</button>
3430
</div>
31+
{% code 'html' %}
32+
<button class="hxBtn hxBtn--primary">Primary Button</button>
33+
{% endcode %}
3534
</section>
3635

3736
<section>
38-
<h2 class="hxSectionTitle" id="default">Primary Buttons</h2>
37+
<h2 class="hxSectionTitle" id="link-button">Link Button</h2>
3938

4039
<!-- explanation goes here -->
4140

4241
<div class="demo">
43-
<p>
44-
<button class="btn btn-primary">Primary Button</button>
45-
<button class="btn btn-primary" disabled>Primary Button (disabled)</button>
46-
</p>
42+
<button class="hxBtn hxBtn--link">Link Button</button>
4743
</div>
44+
{% code 'html' %}
45+
<button class="hxBtn hxBtn--link">Link Button</button>
46+
{% endcode %}
4847
</section>
4948

5049
<section>
51-
<h2 class="hxSectionTitle" id="link-buttons">Link Buttons</h2>
52-
50+
<h2 class="hxSectionTitle" id="button-sizing">Button Sizing</h2>
51+
5352
<!-- explanation goes here -->
5453

5554
<div class="demo">
56-
<p>
57-
<button class="btn btn-link">Link Button</button>
58-
<button class="btn btn-link" disabled>Link Button (disabled)</button>
59-
</p>
55+
<button type="button" class="hxBtn hxBtn--lg">Large Button</button>
56+
<button type="button" class="hxBtn">Default Button</button>
57+
<button type="button" class="hxBtn hxBtn--sm">Compact Button</button>
6058
</div>
59+
60+
{% code 'html' %}
61+
<button type="button" class="hxBtn hxBtn--lg">Large Button</button>
62+
<button type="button" class="hxBtn">Default Button</button>
63+
<button type="button" class="hxBtn hxBtn--sm">Compact Button</button>
64+
{% endcode %}
65+
</section>
66+
67+
<section data-visreg="button-states">
68+
<h2 class="hxSectionTitle" id="button-states">Button States</h2>
69+
<table class="table">
70+
<tbody>
71+
<tr>
72+
<td>Default</td>
73+
<td><button class="hxBtn">Normal</button></td>
74+
<td><button class="hxBtn pseudo-hover">Hover</button></td>
75+
<td><button class="hxBtn pseudo-active">Pressed</button></td>
76+
<td><button class="hxBtn" disabled>Disabled</button></td>
77+
</tr>
78+
<tr>
79+
<td>Primary</td>
80+
<td><button class="hxBtn hxBtn--primary">Normal</button></td>
81+
<td><button class="hxBtn hxBtn--primary pseudo-hover">Hover</button></td>
82+
<td><button class="hxBtn hxBtn--primary pseudo-active">Pressed</button></td>
83+
<td><button class="hxBtn hxBtn--primary" disabled>Disabled</button></td>
84+
</tr>
85+
<tr>
86+
<td>Link</td>
87+
<td><button class="hxBtn hxBtn--link">Normal</button></td>
88+
<td><button class="hxBtn hxBtn--link pseudo-hover">Hover</button></td>
89+
<td><button class="hxBtn hxBtn--link pseudo-active">Pressed</button></td>
90+
<td><button class="hxBtn hxBtn--link" disabled>Disabled</button></td>
91+
</tr>
92+
</tbody>
93+
</table>
94+
</section>
95+
96+
<section>
97+
<h2 class="hxSectionTitle" id="attributes">Attributes</h2>
98+
<dl>
99+
<dt>disabled</dt>
100+
<dd>Boolean attribute. When present, prevents button interaction.</dd>
101+
</dl>
61102
</section>
62103
{% endblock %}

‎source/components/dropdown/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
<div class="row">
1212
<div class="col-xs-12 col-md-4">
1313
<div class="dropdown">
14-
<button class="btn btn-default" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
14+
<button class="hxBtn" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
1515
Dropdown
1616
<span class="caret"></span>
1717
</button>

‎source/components/form/index.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@
9797
<span class="input-group-addon">$</span>
9898
<input type="text" class="form-control">
9999
<span class="input-group-btn">
100-
<button class="btn btn-default" type="button">Button</button>
100+
<button class="hxBtn" type="button">Button</button>
101101
</span>
102102
</div>
103103
</div>
@@ -122,8 +122,8 @@
122122
</div>
123123
<div class="row">
124124
<div class="col-xs-6">
125-
<button type="submit" class="btn btn-primary">Submit</button>
126-
<button class="btn btn-default">Cancel</button>
125+
<button type="submit" class="hxBtn hxBtn--primary">Submit</button>
126+
<button class="hxBtn">Cancel</button>
127127
</div>
128128
</div>
129129
</form>

‎source/components/modal/index.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -25,15 +25,15 @@ <h4 class="modal-title">h4.modal-title</h4>
2525
</p>
2626
</div>
2727
<div class="modal-footer">
28-
<button type="button" class="btn btn-primary">Save changes</button>
29-
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
28+
<button type="button" class="hxBtn hxBtn--primary">Save changes</button>
29+
<button type="button" class="hxBtn" data-dismiss="modal">Close</button>
3030
</div>
3131
</div>
3232
</div>
3333
</div>
3434

3535
<div>
36-
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
36+
<button type="button" class="hxBtn hxBtn--primary hxBtn--lg" data-toggle="modal" data-target="#myModal">
3737
Launch demo modal
3838
</button>
3939

@@ -55,8 +55,8 @@ <h4 class="modal-title" id="myModalLabel">Modal title</h4>
5555
</p>
5656
</div>
5757
<div class="modal-footer">
58-
<button type="button" class="btn btn-primary">Save changes</button>
59-
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
58+
<button type="button" class="hxBtn hxBtn--primary">Save changes</button>
59+
<button type="button" class="hxBtn" data-dismiss="modal">Close</button>
6060
</div>
6161
</div>
6262
</div>

‎source/components/tooltip/index.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ <h2 class="hxSectionTitle" id="demo">Demonstration</h2>
3333

3434
<div class="demo">
3535
<button
36-
class="btn btn-default"
36+
class="hxBtn"
3737
data-toggle="tooltip"
3838
data-placement="left"
3939
title="Tooltip on Left">
@@ -42,7 +42,7 @@ <h2 class="hxSectionTitle" id="demo">Demonstration</h2>
4242
</button>
4343

4444
<button
45-
class="btn btn-default"
45+
class="hxBtn"
4646
data-toggle="tooltip"
4747
data-placement="top"
4848
title="Tooltip on Top">
@@ -51,7 +51,7 @@ <h2 class="hxSectionTitle" id="demo">Demonstration</h2>
5151
</button>
5252

5353
<button
54-
class="btn btn-default"
54+
class="hxBtn"
5555
data-toggle="tooltip"
5656
data-placement="bottom"
5757
title="Tooltip on Bottom">
@@ -60,7 +60,7 @@ <h2 class="hxSectionTitle" id="demo">Demonstration</h2>
6060
</button>
6161

6262
<button
63-
class="btn btn-default"
63+
class="hxBtn"
6464
data-toggle="tooltip"
6565
data-placement="right"
6666
title="Tooltip on Right">

‎source/docs.less‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,7 @@ main {
7878
}
7979
}
8080

81+
@import 'button/button-docs';
8182
@import 'dropdown/dropdown-docs';
8283
@import 'grid/grid-docs';
8384
@import 'icon/icon-docs';

‎source/helix-ui.less‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
@import 'alert/alert';
1818
@import 'code/code';
1919
@import 'breadcrumb/breadcrumb';
20+
@import 'button/button';
2021
@import 'grid/grid';
2122
@import 'icon/icon';
2223
@import 'list/list';

0 commit comments

Comments
 (0)