From 39b7c75b13dd982e1a4f106f412ff18acc0026ec Mon Sep 17 00:00:00 2001
From: Jaume Sala <jaumesala@gmail.com>
Date: Tue, 3 Aug 2021 17:59:00 +0200
Subject: 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>
---
 scss/_placeholders.scss | 51 +++++++++++++++++++++++++++++++++++++++++++++++++
 scss/_variables.scss    |  7 +++++++
 scss/bootstrap.scss     |  1 +
 3 files changed, 59 insertions(+)
 create mode 100644 scss/_placeholders.scss

(limited to 'scss')

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";
-- 
cgit v1.2.3