X-Git-Url: https://gerrit.fd.io/r/gitweb?a=blobdiff_plain;ds=sidebyside;f=resources%2Ftools%2Fdash%2Fapp%2Fpal%2Fstatic%2Fsass%2Fbootstrap%2F_placeholders.scss;fp=resources%2Ftools%2Fdash%2Fapp%2Fpal%2Fstatic%2Fsass%2Fbootstrap%2F_placeholders.scss;h=6e32e1cdb9b143cacbc44888700d3bdba447f3f1;hb=f8bdd103ff86c171f6db6cef657c7ecbe97763a1;hp=0000000000000000000000000000000000000000;hpb=69fd124979890cac21bd0dbc7ef442563f175372;p=csit.git

diff --git a/resources/tools/dash/app/pal/static/sass/bootstrap/_placeholders.scss b/resources/tools/dash/app/pal/static/sass/bootstrap/_placeholders.scss
new file mode 100644
index 0000000000..6e32e1cdb9
--- /dev/null
+++ b/resources/tools/dash/app/pal/static/sass/bootstrap/_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%;
+  }
+}