This repository has been archived by the owner on Apr 6, 2018. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 8
/
test.html
114 lines (108 loc) · 4 KB
/
test.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html>
<meta charset="utf-8">
<title>ButtonGroup [component] - SUIT</title>
<meta name="viewport" content="initial-scale=1,width=device-width">
<link rel="stylesheet" href="build/build.css">
<style>
.Test-run .Button:hover,
.Test-run .Button:focus,
.Test-run .Button:active {
border-color: red;
}
.Test-run--withBorderRadius .Button {
border-radius: 5px;
}
</style>
<div class="Test">
<h1 class="Test-title">SUIT CSS: <a href="https://github.com/suitcss/components-button-group">ButtonGroup</a> component tests</h1>
<h2 class="Test-describe">.ButtonGroup</h2>
<h3 class="Test-it">renders vertically and full-width</h3>
<div class="Test-run">
<div class="ButtonGroup">
<div class="ButtonGroup-item">
<a class="Button" href="#non">Dashboard</a>
</div>
<div class="ButtonGroup-item">
<a class="Button" href="#non">Account</a>
</div>
<div class="ButtonGroup-item">
<a class="Button" href="#non">Logout</a>
</div>
</div>
</div>
<h3 class="Test-it">removes default list styles from the root element</h3>
<div class="Test-run">
<ul class="ButtonGroup">
<li class="ButtonGroup-item">
<a class="Button" href="#non">Dashboard</a>
</li>
<li class="ButtonGroup-item">
<a class="Button" href="#non">Account</a>
</li>
<li class="ButtonGroup-item">
<a class="Button" href="#non">Logout</a>
</li>
</ul>
</div>
<h2 class="Test-describe">.ButtonGroup.ButtonGroup--hz</h2>
<h3 class="Test-it">renders horizontally and buttons shrink wrap</h3>
<div class="Test-run" id="rendersHz">
<div class="ButtonGroup ButtonGroup--hz">
<div class="ButtonGroup-item">
<a class="Button" href="#non">Dashboard</a>
</div>
<div class="ButtonGroup-item">
<a class="Button" href="#non">Account</a>
</div>
<div class="ButtonGroup-item">
<a class="Button" href="#non">Logout</a>
</div>
</div>
</div>
<h2 class="Test-describe">.ButtonGroup.ButtonGroup--borderCollapse (requires plugin)</h2>
<h3 class="Test-it">overlaps adjacent borders, removes border-radius from adjacent borders, places the active button on top</h3>
<div class="Test-run Test-run--withBorderRadius" id="borderCollapse-renders">
<div class="ButtonGroup ButtonGroup--borderCollapse">
<div class="ButtonGroup-item">
<a class="Button" href="#non">Dashboard</a>
</div>
<div class="ButtonGroup-item">
<a class="Button" href="#non">Account</a>
</div>
<div class="ButtonGroup-item">
<a class="Button" href="#non">Logout</a>
</div>
</div>
</div>
<h3 class="Test-it">doesn't have an affect on single-item groups</h3>
<div class="Test-run Test-run--withBorderRadius" id="borderCollapse-single">
<div class="ButtonGroup ButtonGroup--hz">
<div class="ButtonGroup-item">
<a class="Button" href="#non">Dashboard</a>
</div>
</div>
</div>
<h2 class="Test-describe">.ButtonGroup.ButtonGroup--hz.ButtonGroup--borderCollapse (requires plugin)</h2>
<h3 class="Test-it">overlaps adjacent borders, removes border-radius from adjacent borders, places the active button on top</h3>
<div class="Test-run Test-run--withBorderRadius" id="hz-borderCollapse-renders">
<div class="ButtonGroup ButtonGroup--hz ButtonGroup--borderCollapse">
<div class="ButtonGroup-item">
<a class="Button" href="#non">Dashboard</a>
</div>
<div class="ButtonGroup-item">
<a class="Button" href="#non">Account</a>
</div>
<div class="ButtonGroup-item">
<a class="Button" href="#non">Logout</a>
</div>
</div>
</div>
<h3 class="Test-it">doesn't have an affect on single-item groups</h3>
<div class="Test-run Test-run--withBorderRadius" id="hz-borderCollapse-single">
<div class="ButtonGroup ButtonGroup--hz ButtonGroup--borderCollapse">
<div class="ButtonGroup-item">
<a class="Button" href="#non">Dashboard</a>
</div>
</div>
</div>
</div>