Skip to content

Instantly share code, notes, and snippets.

@andy-blum

andy-blum/Carbon CSS Issue Solutions.md

Last active August 12, 2024 18:30
Show Gist options
  • Save andy-blum/119921f4516759e519b5ee6c7b85fc12 to your computer and use it in GitHub Desktop.
Save andy-blum/119921f4516759e519b5ee6c7b85fc12 to your computer and use it in GitHub Desktop.
Download ZIP
Carbon CSS Issue Solutions
Raw
aem--card__copy.scss
@use '@carbon/ibmdotcom-styles/scss/globals/utils/content-width' as *;
.aem--card__copy {
@include content-width;
}
Raw
aem--card__footer.scss
@use '@carbon/styles/scss/themes' as *;
@use '@carbon/styles/scss/theme' as * with (
$theme: $white
);
.aem--card__footer {
align-self: flex-start;
&:hover {
text-decoration: underline;
svg,
.aem--card__cta__copy {
color: $link-primary-hover;
}
}
&:active,
&:focus {
align-self: flex-start;
outline: 1px solid $focus;
}
&::after {
position: relative;
}
}
Raw
aem--content-block__heading.scss
@use '@carbon/styles/scss/type' as *;
@use '@carbon/styles/scss/spacing' as *;
@use '@carbon/styles/scss/themes' as *;
@use '@carbon/styles/scss/theme' as * with (
$theme: $white
);
.aem--content-block__heading {
@include type-style('expressive-heading-05', true);
color: $text-primary;
margin-bottom: $spacing-07;
}
Raw
aem--image__img.scss
.aem--image__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment