Skip to content

Commit 104edd1

Browse files
committed
fix bg-none css helper
1 parent bb187a0 commit 104edd1

File tree

2 files changed

+22
-1
lines changed

2 files changed

+22
-1
lines changed

addon/styles/backgrounds.css

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,10 @@
6565
background: var(--color-info);
6666
}
6767

68-
.bg-none {
68+
.bg-none,
69+
.bg-none a,
70+
.bg-none a:link,
71+
.bg-none a:visited {
6972
background: none;
7073
}
7174

docs/css/helpers.md

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -170,3 +170,21 @@ If you would like to hide any element only on mobile screens you can use the `.h
170170

171171
<p>If you can see the secret message above try resizing the window!</p>
172172
```
173+
174+
## Turn off link-underline styles
175+
176+
You will probably have noticed that all links automatically have custom underline functionality:
177+
178+
```html
179+
<div class="p-3">
180+
<a href="https://emberjs.com/">Ember Homepage</a>
181+
</div>
182+
```
183+
184+
To get the style that we wanted we needed to implement a custom background image for all links instead of making use of the `text-decoration: underline` styles. If you have a link (or a set of links) that you would like to turn off this behaviour then you can use the `bg-none` helper to turn off this styling:
185+
186+
```html
187+
<div class="p-3 bg-none">
188+
<a href="https://emberjs.com/">Ember Homepage</a>
189+
</div>
190+
```

0 commit comments

Comments
 (0)