Skip to content

Commit 04f5ea9

Browse files
mlsamuelsonmlsamuelson
authored
Merge pull request #128 from ASU/uds-311-alerts-banners-fix
fix(bootstrap4-theme): Fixed close button opacity and banner heading spacing
2 parents 0217973 + f3e5ee2 commit 04f5ea9

File tree

7 files changed

+34
-19
lines changed

7 files changed

+34
-19
lines changed

‎packages/bootstrap4-theme/src/fontawesome/css/svg-with-js.css‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,7 @@ svg:not(:root).svg-inline--fa {
99
display: inline-block;
1010
font-size: inherit;
1111
height: 1em;
12-
overflow: visible;
13-
vertical-align: -.125em; }
12+
overflow: visible; }
1413
.svg-inline--fa.fa-lg {
1514
vertical-align: -.225em; }
1615
.svg-inline--fa.fa-w-1 {

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11

22
// Do not edit directly
3-
// Generated on Tue, 02 Mar 2021 19:26:48 GMT
3+
// Generated on Mon, 08 Mar 2021 04:37:46 GMT
44

55
$uds-asset-font-icon-name: "FontAwesome";
66
$uds-asset-font-icon-ttf: "assets/fontawesome/webfonts/fa-regular-400.ttf";
@@ -175,7 +175,7 @@ $uds-component-button-badge-border-radius: 400rem;
175175
$uds-component-button-badge-font-weight: normal;
176176
$uds-component-button-badge-height: 1.375rem; // Magic number: 22px not a multiple of 8
177177
$uds-component-button-close-height: 2rem;
178-
$uds-component-button-close-opacity: 50%;
178+
$uds-component-button-close-opacity: 100%;
179179
$uds-component-button-close-width: 2rem;
180180
$uds-component-button-close-padding-top: 0;
181181
$uds-component-button-close-padding-bottom: 0.125rem;
@@ -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/_alerts.scss‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,13 @@
2222
// Edits close button content (i.e. "X" inside bubble)
2323
.close
2424
{
25-
padding-top: $btn-close-padding-top;
26-
padding-bottom: $btn-close-padding-bottom;
25+
opacity: $uds-component-button-close-opacity;
26+
font-size: 1rem;
27+
28+
&:hover
29+
{
30+
opacity: $uds-component-button-close-opacity;
31+
}
2732
}
2833
}
2934
}

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

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,8 +40,13 @@
4040
// Edits close button content (i.e. "X" inside bubble)
4141
.close
4242
{
43-
padding-top: $btn-close-padding-top;
44-
padding-bottom: $btn-close-padding-bottom;
43+
opacity: $uds-component-button-close-opacity;
44+
font-size: 1rem;
45+
46+
&:hover
47+
{
48+
opacity: $uds-component-button-close-opacity;
49+
}
4550
}
4651
}
4752
}
@@ -96,13 +101,19 @@
96101
flex-direction: column;
97102
.banner-icon {
98103
text-align: left;
104+
margin-bottom: $uds-size-spacing-1;
105+
99106
svg {
100107
font-size: $uds-size-spacing-5;
101108
margin: $uds-size-spacing-0;
102109
}
103110
}
104111
.banner-content {
105112
margin-bottom: $uds-size-spacing-2;
113+
114+
h3 {
115+
margin-bottom: $uds-size-spacing-2;
116+
}
106117
}
107118
.banner-close {
108119
position: absolute;

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ storiesOf('Components/Alerts', module)
1717
Bootstrap 4 .alert-warning class</a>.
1818
</div>
1919
<div class="alert-close">
20-
<button type="button" class="btn btn-circle btn-circle-alt-white close" aria-label="Close" onclick="event.target.parentNode.parentNode.style.display='none';">x</button>
20+
<button type="button" class="btn btn-circle btn-circle-alt-black close" aria-label="Close" onclick="event.target.parentNode.parentNode.style.display='none';"><i class="fas fa-times"></i></button>
2121
</div>
2222
</div>
2323
@@ -31,7 +31,7 @@ storiesOf('Components/Alerts', module)
3131
Bootstrap 4 .alert-success class</a>.
3232
</div>
3333
<div class="alert-close">
34-
<button type="button" class="btn btn-circle btn-circle-alt-white close" aria-label="Close" onclick="event.target.parentNode.parentNode.style.display='none';">x</button>
34+
<button type="button" class="btn btn-circle btn-circle-alt-black close" aria-label="Close" onclick="event.target.parentNode.parentNode.style.display='none';"><i class="fas fa-times"></i></button>
3535
</div>
3636
</div>
3737
@@ -45,7 +45,7 @@ storiesOf('Components/Alerts', module)
4545
Bootstrap 4 .alert-info class</a>.
4646
</div>
4747
<div class="alert-close">
48-
<button type="button" class="btn btn-circle btn-circle-alt-white close" aria-label="Close" onclick="event.target.parentNode.parentNode.style.display='none';">x</button>
48+
<button type="button" class="btn btn-circle btn-circle-alt-black close" aria-label="Close" onclick="event.target.parentNode.parentNode.style.display='none';"><i class="fas fa-times"></i></button>
4949
</div>
5050
</div>
5151
@@ -59,7 +59,7 @@ storiesOf('Components/Alerts', module)
5959
Bootstrap 4 .alert-danger class</a>.
6060
</div>
6161
<div class="alert-close">
62-
<button type="button" class="btn btn-circle btn-circle-alt-white close" aria-label="Close" onclick="event.target.parentNode.parentNode.style.display='none';">x</button>
62+
<button type="button" class="btn btn-circle btn-circle-alt-black close" aria-label="Close" onclick="event.target.parentNode.parentNode.style.display='none';"><i class="fas fa-times"></i></button>
6363
</div>
6464
</div>
6565

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ storiesOf('Components/Banners', module)
2525
<a href="https://students.asu.edu/faq" type="button" class="btn btn-sm btn-dark">FAQ Page</a>
2626
</div>
2727
<div class="banner-close">
28-
<button type="button" class="btn btn-circle btn-circle-alt-white close" aria-label="Close" onclick="event.target.parentNode.parentNode.style.display='none';">x</button>
28+
<button type="button" class="btn btn-circle btn-circle-alt-black close" aria-label="Close" onclick="event.target.parentNode.parentNode.style.display='none';"><i class="fas fa-times"></i></button>
2929
</div>
3030
</div>
3131
`)
@@ -47,7 +47,7 @@ storiesOf('Components/Banners', module)
4747
<a href="https://students.asu.edu/faq" type="button" class="btn btn-sm btn-dark">FAQ Page</a>
4848
</div>
4949
<div class="banner-close">
50-
<button type="button" class="btn btn-circle btn-circle-alt-white close" aria-label="Close" onclick="event.target.parentNode.parentNode.style.display='none';">x</button>
50+
<button type="button" class="btn btn-circle btn-circle-alt-black close" aria-label="Close" onclick="event.target.parentNode.parentNode.style.display='none';"><i class="fas fa-times"></i></button>
5151
</div>
5252
</div>
5353
`)
@@ -69,7 +69,7 @@ storiesOf('Components/Banners', module)
6969
<a href="https://students.asu.edu/faq" type="button" class="btn btn-sm btn-dark">FAQ Page</a>
7070
</div>
7171
<div class="banner-close">
72-
<button type="button" class="btn btn-circle btn-circle-alt-white close" aria-label="Close" onclick="event.target.parentNode.parentNode.style.display='none';">x</button>
72+
<button type="button" class="btn btn-circle btn-circle-alt-black close" aria-label="Close" onclick="event.target.parentNode.parentNode.style.display='none';"><i class="fas fa-times"></i></button>
7373
</div>
7474
</div>
7575
`)
@@ -91,7 +91,7 @@ storiesOf('Components/Banners', module)
9191
<a href="https://students.asu.edu/faq" type="button" class="btn btn-sm btn-dark">FAQ Page</a>
9292
</div>
9393
<div class="banner-close">
94-
<button type="button" class="btn btn-circle btn-circle-alt-white close" aria-label="Close" onclick="event.target.parentNode.parentNode.style.display='none';">x</button>
94+
<button type="button" class="btn btn-circle btn-circle-alt-black close" aria-label="Close" onclick="event.target.parentNode.parentNode.style.display='none';"><i class="fas fa-times"></i></button>
9595
</div>
9696
</div>
9797
`)
@@ -113,7 +113,7 @@ storiesOf('Components/Banners', module)
113113
<a href="https://students.asu.edu/faq" type="button" class="btn btn-sm btn-gold">FAQ Page</a>
114114
</div>
115115
<div class="banner-close">
116-
<button type="button" class="btn btn-circle btn-circle-alt-white close" aria-label="Close" onclick="event.target.parentNode.parentNode.style.display='none';">x</button>
116+
<button type="button" class="btn btn-circle btn-circle-alt-black close" aria-label="Close" onclick="event.target.parentNode.parentNode.style.display='none';"><i class="fas fa-times"></i></button>
117117
</div>
118118
</div>
119119
`)

‎packages/design-tokens/components/button.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@
9393
"value": "2"
9494
},
9595
"opacity": {
96-
"value": "50%"
96+
"value": "100%"
9797
},
9898
"width": {
9999
"value": "2"

0 commit comments

Comments
 (0)