1 | // Copyright 2016 Palantir Technologies, Inc. All rights reserved.
|
2 | // Licensed under the Apache License, Version 2.0.
|
3 |
|
4 | @import "./common";
|
5 |
|
6 | /*
|
7 | Skeletons
|
8 |
|
9 | Markup:
|
10 | <div class="#{$ns}-card">
|
11 | <h5 class="#{$ns}-heading"><a class="{{.modifier}}" href="#" tabindex="-1">Card heading</a></h5>
|
12 | <p class="{{.modifier}}">
|
13 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eget tortor felis.
|
14 | Fusce dapibus metus in dapibus mollis. Quisque eget ex diam.
|
15 | </p>
|
16 | <button type="button" class="#{$ns}-button #{$ns}-icon-add {{.modifier}}" tabindex="-1">Submit</button>
|
17 | </div>
|
18 |
|
19 | .#{$ns}-skeleton - Render this element as a skeleton, an outline of its true self.
|
20 |
|
21 | Styleguide skeleton
|
22 | */
|
23 |
|
24 | @keyframes skeleton-glow {
|
25 | from {
|
26 | background: $skeleton-color-start;
|
27 | border-color: $skeleton-color-start;
|
28 | }
|
29 |
|
30 | to {
|
31 | background: $skeleton-color-end;
|
32 | border-color: $skeleton-color-end;
|
33 | }
|
34 | }
|
35 |
|
36 | // This class hides content with a glowing, rounded rectangle.
|
37 | // CSS properties that should always override consumer values use the "!important" rule.
|
38 | /* stylelint-disable declaration-no-important */
|
39 | .#{$ns}-skeleton {
|
40 | animation: $skeleton-animation;
|
41 |
|
42 | // do not !important this for Firefox support
|
43 | background: $skeleton-color-start;
|
44 |
|
45 | // Prevent background color from extending to the border and overlappping
|
46 | background-clip: padding-box ;
|
47 | border-color: $skeleton-color-start ;
|
48 | border-radius: 2px;
|
49 | box-shadow: none ;
|
50 |
|
51 | // Transparent text will occupy space but be invisible to the user
|
52 | color: transparent ;
|
53 | cursor: default;
|
54 | pointer-events: none;
|
55 | user-select: none;
|
56 |
|
57 | // Make pseudo-elements (CSS icons) and children invisible
|
58 | &::before,
|
59 | &::after,
|
60 | * {
|
61 | visibility: hidden ;
|
62 | }
|
63 | }
|
64 | /* stylelint-enable declaration-no-important */
|