Skip to content

Commit

Permalink
fix(feature-card-block-large): focus outline now wraps around card pr…
Browse files Browse the repository at this point in the history
…operly (carbon-design-system#4139)

### Related Ticket(s)

carbon-design-system#3881 

### Description

The previous FeatureCardBlockLarge wasn't focusing correctly due to reusing the `outline` values meant for the `Default` and `Medium` CardBlocks. Inserting custom values to the Large `:focus` state makes it fit more adequately. 

Before (notice bottom right):
![Screen Shot 2020-10-05 at 3 59 55 PM](https://user-images.githubusercontent.com/24970122/95140488-dc86be80-0723-11eb-85ad-952e0dd832ab.png)

After: 
![Screen Shot 2020-10-05 at 3 58 13 PM](https://user-images.githubusercontent.com/24970122/95140401-a77a6c00-0723-11eb-87ea-f3e73aa816ad.png)



### Changelog

**New**

- Added new `outline` values to `.bx--feature-card-block-large .bx--card:focus` 

<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "package: vanilla": Vanilla -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "package: styles": Carbon Expressive, React (Expressive) -->
<!-- *** "RTL": React (RTL) -->
<!-- *** "feature flag": React (experimental) -->
  • Loading branch information
IgnacioBecerra authored and ariellalgilmore committed Oct 20, 2020
1 parent e3bd11e commit 19b9afe
Showing 1 changed file with 5 additions and 0 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,11 @@ $fcb-breakpoint-up--lg: map-get(
background: none;
height: 100%;

&:focus {
outline-width: 3px;
outline-offset: 1px;
}

@include carbon--breakpoint-between(
$fcb-large-custom-bp-copy,
$fcb-breakpoint-up--lg
Expand Down

0 comments on commit 19b9afe

Please sign in to comment.