Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Remove a-link__bg modifier #1661

Merged
merged 1 commit into from
Jun 23, 2023
Merged

Remove a-link__bg modifier #1661

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 2 additions & 14 deletions docs/pages/links.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,11 +116,11 @@ variation_groups:

- variation_group_name: Links with icons
variation_group_description: >-
* An icon should appear after the text it represents.
* An icon should appear after the text it represents.

* Each icon should be used exclusively and consistently for one action.

* The color and font-size of an icon should be the same as the text it represents, including state changes.
* The color and font-size of an icon should be the same as the text it represents, including state changes.

* Icons should never be underlined.
variations:
Expand Down Expand Up @@ -200,18 +200,6 @@ variation_groups:
{% include icons/left.svg %}
<span class="a-link_text">Jump link with icon on left</span>
</a>
- variation_name: Jump link with background modifier
variation_code_snippet: |-
<a class="a-link
a-link__jump
a-link__icon-after-text
a-link__bg"
href="#">
<span class="a-link_text">Jump link with grey background and
solid borders on small screens</span>
{% include icons/right.svg %}
</a>
variation_description: A grey background is added on small screens.
variation_group_description: Jump links are standalone links that respond to
small screens by converting to full block links that have a
finger-friendly touch area. Reduce screen size to see these in action.
Expand Down
2 changes: 1 addition & 1 deletion packages/cfpb-typography/cfpb-typography.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

26 changes: 1 addition & 25 deletions packages/cfpb-typography/src/atoms/links.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@
font-size: unit((@size-iv / @base-font-size-px), em);
}

// Mobile size.
.respond-to-max( @bp-xs-max, {
.u-block-link();

Expand All @@ -54,31 +55,6 @@
&.a-link__icon-before-text .cf-icon-svg {
left: 0;
}

&.a-link__bg {
border: solid @jump-link_border;
border-width: 1px 0;

background: @jump-link_bg;

&.a-link__icon-after-text .cf-icon-svg {
right: 1em;
}

&.a-link__icon-before-text .cf-icon-svg {
left: 1em;
}

&.a-link__icon-after-text {
padding-left: 1em;
padding-right: 2.25em;
}

&.a-link__icon-before-text {
padding-left: 2.25em;
padding-right: 1em;
}
}
} );
}

Expand Down
24 changes: 0 additions & 24 deletions packages/cfpb-typography/usage.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -355,30 +355,6 @@ Jump links can also have icons before the text, like icon links.
</a>
```

#### Jump link with background modifier (only visible on small screens)

<a class="a-link
a-link__jump
a-link__icon-after-text
a-link__bg"
href="#">
<span class="a-link_text">Jump link with grey background and
solid borders on small screens</span>
{% include icons/right.svg %}
</a>

```
<a class="a-link
a-link__jump
a-link__icon-after-text
a-link__bg"
href="#">
<span class="a-link_text">Jump link with grey background and
solid borders on small screens</span>
{% raw %}{% include icons/right.svg %}{% endraw %}
</a>
```

## Lists

### Unstyled list modifier
Expand Down