Skip to content

Commit f97fc67

Browse files
mlsamuelsonmlsamuelson
authored
Merge pull request #162 from ASU/uds-459
fix(bootstrap4-theme): update icon-only buttons
2 parents 8d8f61d + eb048b6 commit f97fc67

File tree

3 files changed

+111
-4
lines changed

3 files changed

+111
-4
lines changed

‎packages/bootstrap4-theme/src/scss/design-tokens/_variables.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -428,4 +428,4 @@ $uds-component-tab-container-border-color: #747474;
428428
$uds-component-tab-container-border-width-px: 1px;
429429
$uds-component-tab-active-border-bottom: 8px solid #8c1d40;
430430
$uds-component-tab-active-color: #8c1d40;
431-
$uds-component-tab-disabled-opacity: 50%;
431+
$uds-component-tab-disabled-opacity: 50%;

‎packages/bootstrap4-theme/src/scss/extends/_buttons.scss‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,11 @@
5353
height: $uds-size-spacing-8;
5454
font-size: 1.5rem;
5555
}
56+
&.btn-circle-x-large {
57+
width: 6.5rem;
58+
height: 6.5rem;
59+
font-size: 3rem;
60+
}
5661
}
5762
&:hover {
5863
transform: none;
@@ -62,6 +67,10 @@
6267
}
6368
}
6469

70+
.bg-light-gray {
71+
background-color: $gray-1;
72+
}
73+
6574
// Remove background changing hover effects from all buttons
6675
@each $color, $value in $theme-colors {
6776
.btn-#{$color} {

‎packages/bootstrap4-theme/stories/components/buttons/buttons.stories.js‎

Lines changed: 101 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -85,9 +85,107 @@ storiesOf('Components/Buttons', module)
8585
`
8686
)
8787

88-
.add(
89-
'Prev/next buttons',
90-
() => `
88+
.add('Icon-only buttons - Color and sizes', () => `
89+
<div class="container-fluid">
90+
<div class="row">
91+
<div class="col col-12 col-lg-4 bg-white p-3">
92+
<button type="button" class="btn btn-circle btn-circle-x-large btn-circle-alt-gray">
93+
<i class="fas fa-times"></i>
94+
<span class="sr-only" >Close</span>
95+
</button>
96+
<button type="button" class="btn btn-circle btn-circle-large btn-circle-alt-gray">
97+
<i class="fas fa-times"></i>
98+
<span class="sr-only" >Close</span>
99+
</button>
100+
<button type="button" class="btn btn-circle btn-circle-alt-gray">
101+
<i class="fas fa-times"></i>
102+
<span class="sr-only" >Close</span>
103+
</button>
104+
</div>
105+
106+
<div class="col col-12 col-lg-4 bg-white p-3">
107+
<button type="button" class="btn btn-circle btn-circle-x-large btn-circle-alt-white">
108+
<i class="fas fa-times"></i>
109+
<span class="sr-only" >Close</span>
110+
</button>
111+
<button type="button" class="btn btn-circle btn-circle-large btn-circle-alt-white">
112+
<i class="fas fa-times"></i>
113+
<span class="sr-only" >Close</span>
114+
</button>
115+
<button type="button" class="btn btn-circle btn-circle-alt-white">
116+
<i class="fas fa-times"></i>
117+
<span class="sr-only" >Close</span>
118+
</button>
119+
</div>
120+
</div>
121+
</div>
122+
`)
123+
124+
125+
.add('Icon-only buttons - Color Combinations', () => `
126+
<div class="container-fluid">
127+
<div class="row">
128+
<div class="col col-12 col-lg-4 bg-white p-3">
129+
<button type="button" class="btn btn-circle btn-circle-x-large btn-circle-alt-white">
130+
<i class="fas fa-times"></i>
131+
<span class="sr-only" >Close</span>
132+
</button>
133+
<button type="button" class="btn btn-circle btn-circle-large btn-circle-alt-white">
134+
<i class="fas fa-times"></i>
135+
<span class="sr-only" >Close</span>
136+
</button>
137+
<button type="button" class="btn btn-circle btn-circle-alt-white">
138+
<i class="fas fa-times"></i>
139+
<span class="sr-only" >Close</span>
140+
</button>
141+
</div>
142+
<div class="col col-12 col-lg-4 bg-light-gray p-3">
143+
<button type="button" class="btn btn-circle btn-circle-x-large btn-circle-alt-white">
144+
<i class="fas fa-times"></i>
145+
<span class="sr-only" >Close</span>
146+
</button>
147+
<button type="button" class="btn btn-circle btn-circle-large btn-circle-alt-white">
148+
<i class="fas fa-times"></i>
149+
<span class="sr-only" >Close</span>
150+
</button>
151+
<button type="button" class="btn btn-circle btn-circle-alt-white">
152+
<i class="fas fa-times"></i>
153+
<span class="sr-only" >Close</span>
154+
</button>
155+
</div>
156+
<div class="col col-12 col-lg-4 bg-light p-3">
157+
<button type="button" class="btn btn-circle btn-circle-x-large btn-circle-alt-gray">
158+
<i class="fas fa-times"></i>
159+
<span class="sr-only" >Close</span>
160+
</button>
161+
<button type="button" class="btn btn-circle btn-circle-large btn-circle-alt-gray">
162+
<i class="fas fa-times"></i>
163+
<span class="sr-only" >Close</span>
164+
</button>
165+
<button type="button" class="btn btn-circle btn-circle-alt-gray">
166+
<i class="fas fa-times"></i>
167+
<span class="sr-only" >Close</span>
168+
</button>
169+
</div>
170+
<div class="col col-12 col-lg-4 bg-dark p-3">
171+
<button type="button" class="btn btn-circle btn-circle-x-large btn-circle-alt-gray">
172+
<i class="fas fa-times"></i>
173+
<span class="sr-only" >Close</span>
174+
</button>
175+
<button type="button" class="btn btn-circle btn-circle-large btn-circle-alt-gray">
176+
<i class="fas fa-times"></i>
177+
<span class="sr-only" >Close</span>
178+
</button>
179+
<button type="button" class="btn btn-circle btn-circle-alt-gray">
180+
<i class="fas fa-times"></i>
181+
<span class="sr-only" >Close</span>
182+
</button>
183+
</div>
184+
</div>
185+
</div>
186+
`)
187+
188+
.add('Prev/next buttons', () => `
91189
<div class="container-fluid">
92190
<div class="row">
93191
<div class="col col-12 col-lg-4 bg-white p-3">

0 commit comments

Comments
 (0)