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

[Skeleton] fix FF support! #2887

Merged
merged 1 commit into from
Aug 30, 2018
Merged

[Skeleton] fix FF support! #2887

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
3 changes: 2 additions & 1 deletion packages/core/src/components/skeleton/_common.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@

@import "../../common/variables";

$skeleton-animation: ($pt-transition-duration * 20) linear infinite glow !default;
$skeleton-animation:
($pt-transition-duration * 10) linear infinite alternate skeleton-glow !default;
$skeleton-color-start: rgba($gray4, 0.2) !default;
$skeleton-color-end: rgba($gray1, 0.2) !default;
19 changes: 10 additions & 9 deletions packages/core/src/components/skeleton/_skeleton.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,27 +21,28 @@ Markup:
Styleguide skeleton
*/

@keyframes glow {
0%,
100% {
@keyframes skeleton-glow {
from {
border-color: $skeleton-color-start;
background-color: $skeleton-color-start;
background: $skeleton-color-start;
}

50% {
to {
border-color: $skeleton-color-end;
background-color: $skeleton-color-end;
background: $skeleton-color-end;
}
}

// This class hides content with a glowing, rounded rectangle. CSS properties that should always
// override consumer values use the "!important" rule.
// This class hides content with a glowing, rounded rectangle.
// CSS properties that should always override consumer values use the "!important" rule.
/* stylelint-disable declaration-no-important */
.#{$ns}-skeleton {
border-color: $skeleton-color-start !important;
border-radius: 2px;
box-shadow: none !important;
background: $skeleton-color-start !important;

// do not !important this for Firefox support
background: $skeleton-color-start;

// Prevent background color from extending to the border and overlappping
background-clip: padding-box !important;
Expand Down