diff options
| author | Jaume Sala <jaumesala@gmail.com> | 2021-08-03 18:59:00 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-08-03 18:59:00 +0300 |
| commit | 39b7c75b13dd982e1a4f106f412ff18acc0026ec (patch) | |
| tree | bfc384cf3a4488870661e46047a3b3ed953b8d82 /scss | |
| parent | f64df40dfa21283992d395dbe3115fdad98fe463 (diff) | |
Add new placeholder component (#31859)
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Co-authored-by: Jaume Sala <jaumesala@gmail.com>
Co-authored-by: Mark Otto <markdotto@gmail.com>
Co-authored-by: Patrick H. Lauke <redux@splintered.co.uk>
Diffstat (limited to 'scss')
| -rw-r--r-- | scss/_placeholders.scss | 51 | ||||
| -rw-r--r-- | scss/_variables.scss | 7 | ||||
| -rw-r--r-- | scss/bootstrap.scss | 1 |
3 files changed, 59 insertions, 0 deletions
diff --git a/scss/_placeholders.scss b/scss/_placeholders.scss new file mode 100644 index 0000000000..2f647cc9ba --- /dev/null +++ b/scss/_placeholders.scss @@ -0,0 +1,51 @@ +.placeholder { + display: inline-block; + min-height: 1em; + vertical-align: middle; + cursor: wait; + background-color: currentColor; + opacity: $placeholder-opacity-max; + + &.btn::before { + display: inline-block; + content: ""; + } +} + +// Sizing +.placeholder-xs { + min-height: .6em; +} + +.placeholder-sm { + min-height: .8em; +} + +.placeholder-lg { + min-height: 1.2em; +} + +// Animation +.placeholder-glow { + .placeholder { + animation: placeholder-glow 2s ease-in-out infinite; + } +} + +@keyframes placeholder-glow { + 50% { + opacity: $placeholder-opacity-min; + } +} + +.placeholder-wave { + mask-image: linear-gradient(130deg, $black 55%, rgba(0, 0, 0, (1 - $placeholder-opacity-min)) 75%, $black 95%); + mask-size: 200% 100%; + animation: placeholder-wave 2s linear infinite; +} + +@keyframes placeholder-wave { + 100% { + mask-position: -200% 0%; + } +} diff --git a/scss/_variables.scss b/scss/_variables.scss index b6aa1b1e95..9e921c07ef 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1203,6 +1203,13 @@ $pagination-border-radius-lg: $border-radius-lg !default; // scss-docs-end pagination-variables +// Placeholders + +// scss-docs-start placeholders +$placeholder-opacity-max: .5 !default; +$placeholder-opacity-min: .2 !default; +// scss-docs-end placeholders + // Cards // scss-docs-start card-variables diff --git a/scss/bootstrap.scss b/scss/bootstrap.scss index eb047a3f29..f051c59a99 100644 --- a/scss/bootstrap.scss +++ b/scss/bootstrap.scss @@ -43,6 +43,7 @@ @import "carousel"; @import "spinners"; @import "offcanvas"; +@import "placeholders"; // Helpers @import "helpers"; |