Merge branch 'main' of https://github.com/tabler/tabler into dev

src/pages/_data/docs.yml

@@ -114,9 +114,9 @@ components:
     ribbons:
       title: Ribbons
       url: docs/ribbons.html
-    skeleton:
-      title: Skeleton
-      url: docs/skeleton.html
+    placeholder:
+      title: Placeholder
+      url: docs/placeholder.html
     spinners:
       title: Spinners
       url: docs/spinners.html

src/pages/_data/menu.yml

@@ -57,9 +57,9 @@ base:
       url: pagination.html
       title: Pagination
       icon: pie-chart
-    skeleton:
-      url: skeleton.html
-      title: Skeleton
+    placeholder:
+      url: placeholder.html
+      title: Placeholder
     tabs:
       url: tabs.html
       title: Tabs

src/pages/_docs/placeholder.md

+---
+title: Placeholder
+menu: docs.components.placeholder
+description: Placeholder is used to reserve space for content that soon will appear in a layout.
+redirect_from:
+    - /docs/skeleton.html
+---
+
+## Placeholder line
+
+Placeholder lines can contain have lines of text. Their length is different and depends on the `col-` class.
+
+{% capture code %}
+<div class="placeholder col-9"></div>
+<div class="placeholder col-11"></div>
+<div class="placeholder col-10"></div>
+<div class="placeholder col-8"></div>
+{% endcapture %}
+{% include example.html code=code %}
+
+However, it may be useful, however, to specify the full width in order to fit the content more effectively.
+
+{% capture code %}
+<div class="placeholder col-12"></div>
+<div class="placeholder col-12"></div>
+<div class="placeholder col-12"></div>
+<div class="placeholder col-12"></div>
+{% endcapture %}
+{% include example.html code=code %}
+
+You can also move the lines to right or to center:
+
+{% capture code %}
+<div class="text-end">
+  <div class="placeholder col-11"></div>
+  <div class="placeholder col-10"></div>
+  <div class="placeholder col-8"></div>
+</div>
+<div class="text-center mt-3">
+  <div class="placeholder col-11"></div>
+  <div class="placeholder col-10"></div>
+  <div class="placeholder col-8"></div>
+</div>
+{% endcapture %}
+{% include example.html code=code %}
+
+
+## Placeholder heading
+
+A placeholder can contain also a header element looks like header:
+
+{% capture code %}
+<div class="placeholder col-9 mb-3"></div>
+<div class="placeholder placeholder-xs col-10"></div>
+<div class="placeholder placeholder-xs col-11"></div>
+{% endcapture %}
+{% include example.html code=code %}
+
+## Placeholder avatar
+
+You can make your placeholder item look like an avatar.
+
+{% capture code %}
+<div class="row">
+  <div class="col-auto">
+    <div class="avatar placeholder"></div>
+  </div>
+  <div class="col">
+    <div class="placeholder col-9"></div>
+    <div class="placeholder col-11"></div>
+  </div>
+</div>
+{% endcapture %}
+{% include example.html code=code %}
+
+The size of avatars is exactly the same as a regular avatar.
+
+{% capture code %}
+<div class="avatar avatar-xl placeholder"></div>
+<div class="avatar avatar-lg placeholder"></div>
+<div class="avatar avatar-md placeholder"></div>
+<div class="avatar placeholder"></div>
+<div class="avatar avatar-sm placeholder"></div>
+<div class="avatar avatar-xs placeholder"></div>
+{% endcapture %}
+{% include example.html code=code %}
+
+## Placeholder image
+
+You can use a placeholder, which will look like a picture. You can use the `ratio` component, and get the image in the right proportions.
+
+
+You can also use the `ratio` component, and get the image in the right proportions.
+
+{% capture code %}
+<div class="ratio ratio-1x1 placeholder">
+  <div class="placeholder-image"></div>
+</div>
+<div class="ratio ratio-4x3 placeholder">
+  <div class="placeholder-image"></div>
+</div>
+<div class="ratio ratio-16x9 placeholder">
+  <div class="placeholder-image"></div>
+</div>
+<div class="ratio ratio-21x9 placeholder">
+  <div class="placeholder-image"></div>
+</div>
+{% endcapture %}
+{% include example.html code=code max-width="200px" wrapper="space-y" %}
+
+## Placeholder color
+
+By default, the `placeholder` uses `currentColor`. This can be overridden with a custom color or utility class.
+
+{% capture code %}
+<span class="placeholder col-12"></span>
+
+<span class="placeholder col-12 bg-primary"></span>
+<span class="placeholder col-12 bg-secondary"></span>
+<span class="placeholder col-12 bg-success"></span>
+<span class="placeholder col-12 bg-danger"></span>
+<span class="placeholder col-12 bg-warning"></span>
+<span class="placeholder col-12 bg-info"></span>
+<span class="placeholder col-12 bg-light"></span>
+<span class="placeholder col-12 bg-dark"></span>
+{% endcapture %}
+{% include example.html code=code wrapper="space-y" %}
+
+## Placeholder sizing
+
+The size of `.placeholders` are based on the typographic style of the parent element. Customize them with sizing modifiers: `.placeholder-lg`, `.placeholder-sm`, or `.placeholder-xs`.
+
+{% capture code %}
+<span class="placeholder col-12 placeholder-lg"></span>
+<span class="placeholder col-12"></span>
+<span class="placeholder col-12 placeholder-sm"></span>
+<span class="placeholder col-12 placeholder-xs"></span>
+{% endcapture %}
+{% include example.html code=code wrapper="space-y" %}
+
+## Animation
+
+Animate placeholders with `.placeholder-glow` or `.placeholder-wave` to better convey the perception of something being actively loaded.
+
+{% capture code %}
+<p class="placeholder-glow">
+  <span class="placeholder col-12"></span>
+</p>
+<p class="placeholder-wave">
+  <span class="placeholder col-12"></span>
+</p>
+{% endcapture %}
+{% include example.html code=code wrapper="space-y" %}
+
+## Live examples
+
+See in the following examples how else you can use the placeholder component
+
+{% capture code %}
+{% include cards/placeholder/card-1.html %}
+{% include cards/placeholder/card-2.html %}
+{% include cards/placeholder/card-3.html %}
+{% include cards/placeholder/card-4.html %}
+{% include cards/placeholder/card-6.html %}
+{% endcapture %}
+{% include example.html code=code columns=1 wrapper="space-y" %}
\ No newline at end of file

src/pages/_docs/skeleton.md

----
-title: Skeleton
-menu: docs.components.skeleton
-description: Skeleton is used to reserve space for content that soon will appear in a layout.
----
-
-## Skeleton line
-
-Skeleton lines can contain have lines of text. Their length is different and depends on the `text-align` property.
-
-{% capture code %}
-<div class="skeleton-line"></div>
-<div class="skeleton-line"></div>
-<div class="skeleton-line"></div>
-<div class="skeleton-line"></div>
-{% endcapture %}
-{% include example.html code=code %}
-
-However, it may be useful, however, to specify the full width in order to fit the content more effectively.
-
-{% capture code %}
-<div class="skeleton-line skeleton-line-full"></div>
-<div class="skeleton-line skeleton-line-full"></div>
-<div class="skeleton-line skeleton-line-full"></div>
-<div class="skeleton-line skeleton-line-full"></div>
-{% endcapture %}
-{% include example.html code=code %}
-
-You can also move the lines to right or to center:
-
-{% capture code %}
-<div class="text-end">
-  <div class="skeleton-line"></div>
-  <div class="skeleton-line"></div>
-  <div class="skeleton-line"></div>
-</div>
-<div class="text-center mt-3">
-  <div class="skeleton-line"></div>
-  <div class="skeleton-line"></div>
-  <div class="skeleton-line"></div>
-</div>
-{% endcapture %}
-{% include example.html code=code %}
-
-
-## Skeleton heading
-
-A skeleton can contain also a header element looks like header:
-
-{% capture code %}
-<div class="skeleton-heading"></div>
-<div class="skeleton-line"></div>
-<div class="skeleton-line"></div>
-{% endcapture %}
-{% include example.html code=code %}
-
-## Skeleton avatar
-
-You can make your skeleton item look like an avatar.
-
-{% capture code %}
-<div class="row">
-  <div class="col-auto">
-    <div class="skeleton-avatar"></div>
-  </div>
-  <div class="col">
-    <div class="skeleton-line"></div>
-    <div class="skeleton-line"></div>
-  </div>
-</div>
-{% endcapture %}
-{% include example.html code=code %}
-
-The size of avatars is exactly the same as a regular avatar.
-
-{% capture code %}
-<div class="skeleton-avatar skeleton-avatar-xl"></div>
-<div class="skeleton-avatar skeleton-avatar-lg"></div>
-<div class="skeleton-avatar skeleton-avatar-md"></div>
-<div class="skeleton-avatar"></div>
-<div class="skeleton-avatar skeleton-avatar-sm"></div>
-<div class="skeleton-avatar skeleton-avatar-xs"></div>
-{% endcapture %}
-{% include example.html code=code %}
-
-## Skeleton image
-
-You can use a skeleton, which will look like a picture. You can easily change its height and width. Standard image ratio is 16:9.
-
-{% capture code %}
-<div class="skeleton-image"></div>
-<div class="skeleton-image" style="width: 80px; height: 200px;"></div>
-<div class="skeleton-image" style="width: 80px; height: 80px;"></div>
-{% endcapture %}
-{% include example.html code=code max-width="200px" wrapper="space-y" %}
-
-You can also use the `ratio` component, and get the image in the right proportions.
-
-{% capture code %}
-<div class="ratio ratio-1x1">
-  <div class="skeleton-image"></div>
-</div>
-<div class="ratio ratio-4x3">
-  <div class="skeleton-image"></div>
-</div>
-<div class="ratio ratio-16x9">
-  <div class="skeleton-image"></div>
-</div>
-<div class="ratio ratio-21x9">
-  <div class="skeleton-image"></div>
-</div>
-{% endcapture %}
-{% include example.html code=code max-width="200px" wrapper="space-y" %}
-
-## Live examples
-
-See in the following examples how else you can use the skeleton component
-
-{% capture code %}
-{% include cards/skeleton/card-1.html %}
-{% include cards/skeleton/card-2.html %}
-{% include cards/skeleton/card-3.html %}
-{% include cards/skeleton/card-4.html %}
-{% include cards/skeleton/card-6.html %}
-{% endcapture %}
-{% include example.html code=code columns=1 wrapper="space-y" %}
\ No newline at end of file

src/pages/_includes/cards/placeholder/card-1.html

+<div class="card placeholder-glow">
+	<div class="ratio ratio-21x9 card-img-top placeholder"></div>
+	<div class="card-body">
+		<div class="placeholder col-9 mb-3"></div>
+		<div class="placeholder placeholder-xs col-10"></div>
+		<div class="placeholder placeholder-xs col-11"></div>
+
+		<div class="mt-3">
+			<a href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-4" aria-hidden="true"></a>
+		</div>
+	</div>
+</div>
\ No newline at end of file

src/pages/_includes/cards/placeholder/card-2.html

+<div class="card">
+	<div class="row g-0 align-items-center placeholder-glow">
+		<div class="col-3">
+			<div class="ratio ratio-1x1 card-img-start placeholder"></div>
+		</div>
+		<div class="col">
+			<div class="card-body">
+				<div class="placeholder col-9 mb-3"></div>
+				<div class="placeholder placeholder-xs col-10"></div>
+				<div class="placeholder placeholder-xs col-11"></div>
+			</div>
+		</div>
+	</div>
+</div>
\ No newline at end of file

src/pages/_includes/cards/skeleton/card-3.html → src/pages/_includes/cards/placeholder/card-3.html

@@ -2,11 +2,11 @@
 	<div class="card-body">
 		<div class="row">
 			<div class="col-auto">
-				<div class="skeleton-avatar"></div>
+				<div class="avatar avatar-rounded placeholder"></div>
 			</div>
 			<div class="col">
-				<div class="skeleton-line"></div>
-				<div class="skeleton-line"></div>
+				<div class="placeholder placeholder-xs col-9"></div>
+				<div class="placeholder placeholder-xs col-7"></div>
 			</div>
 		</div>
 	</div>

src/pages/_includes/cards/skeleton/card-4.html → src/pages/_includes/cards/placeholder/card-4.html

 <div class="card">
 	<div class="card-body py-5 text-center">
 		<div>
-			<div class="skeleton-avatar skeleton-avatar-lg"></div>
+			<div class="avatar avatar-rounded avatar-lg placeholder mb-3"></div>
 		</div>
 		<div class="mt w-75 mx-auto">
-			<div class="skeleton-heading"></div>
-			<div class="skeleton-line"></div>
+			<div class="placeholder col-9 mb-3"></div>
+			<div class="placeholder placeholder-xs col-10"></div>
 		</div>
 	</div>
 </div>
\ No newline at end of file

src/pages/_includes/cards/placeholder/card-5.html

+<div class="card">
+	<div class="card-body text-end placeholder-glow">
+		<div class="placeholder col-9 mb-3"></div>
+		<div class="placeholder placeholder-xs col-10"></div>
+		<div class="placeholder placeholder-xs col-12"></div>
+		<div class="placeholder placeholder-xs col-11"></div>
+		<div class="placeholder placeholder-xs col-8"></div>
+		<div class="placeholder placeholder-xs col-10"></div>
+	</div>
+</div>
\ No newline at end of file

src/pages/_includes/cards/skeleton/card-6.html → src/pages/_includes/cards/placeholder/card-6.html

 <div class="card">
-	<ul class="list-group list-group-flush">
+	<ul class="list-group list-group-flush placeholder-glow">
 		{% for i in (1..4) %}
 		<li class="list-group-item">
 			<div class="row align-items-center">
 				<div class="col-auto">
-					<div class="skeleton-avatar"></div>
+					<div class="avatar avatar-rounded placeholder"></div>
 				</div>
 				<div class="col-7">
-					<div class="skeleton-line"></div>
-					<div class="skeleton-line"></div>
+					<div class="placeholder placeholder-xs col-9"></div>
+					<div class="placeholder placeholder-xs col-7"></div>
 				</div>
 				<div class="col-2 ms-auto text-end">
-					<div class="skeleton-line"></div>
-					<div class="skeleton-line"></div>
+					<div class="placeholder placeholder-xs col-8"></div>
+					<div class="placeholder placeholder-xs col-10"></div>
 				</div>
 			</div>
 		</li>

src/pages/_includes/cards/skeleton/card-1.html

-<div class="card">
-	<div class="ratio ratio-21x9 card-img-top">
-		<div class="skeleton-image"></div>
-	</div>
-	<div class="card-body">
-		<div class="skeleton-heading"></div>
-		<div class="skeleton-line"></div>
-		<div class="skeleton-line"></div>
-	</div>
-</div>
\ No newline at end of file

src/pages/_includes/cards/skeleton/card-2.html

-<div class="card">
-	<div class="row g-0 align-items-center">
-		<div class="col-3">
-			<div class="ratio ratio-1x1 card-img-left">
-				<div class="skeleton-image"></div>
-			</div>
-		</div>
-		<div class="col">
-			<div class="card-body">
-				<div class="skeleton-heading"></div>
-				<div class="skeleton-line"></div>
-				<div class="skeleton-line"></div>
-			</div>
-		</div>
-	</div>
-</div>
\ No newline at end of file

src/pages/_includes/cards/skeleton/card-5.html

-<div class="card">
-	<div class="card-body text-end">
-		<div class="skeleton-heading"></div>
-		<div class="skeleton-line"></div>
-		<div class="skeleton-line"></div>
-		<div class="skeleton-line"></div>
-		<div class="skeleton-line"></div>
-		<div class="skeleton-line"></div>
-	</div>
-</div>
\ No newline at end of file

src/pages/skeleton.html → src/pages/placeholder.html

 ---
-page-header: Skeleton
-menu: base.skeleton
+page-header: Placeholder
+menu: base.placeholder
 ---
 
 <div class="row row-cards">
 	{% for i in (1..4) %}
 		<div class="col-3">
-			{% include cards/skeleton/card-1.html %}
+			{% include cards/placeholder/card-1.html %}
 		</div>
 	{% endfor %}
 	<div class="col-4">
 		<div class="row row-cards">
 			<div class="col-12">
-				{% include cards/skeleton/card-3.html %}
+				{% include cards/placeholder/card-3.html %}
 			</div>
 			<div class="col-12">
-				{% include cards/skeleton/card-4.html %}
+				{% include cards/placeholder/card-4.html %}
 			</div>
 		</div>
 	</div>
 	<div class="col-4">
 		<div class="row row-cards">
 			<div class="col-12">
-				{% include cards/skeleton/card-1.html %}
+				{% include cards/placeholder/card-1.html %}
 			</div>
 			<div class="col-12">
-				{% include cards/skeleton/card-2.html %}
+				{% include cards/placeholder/card-2.html %}
 			</div>
 		</div>
 	</div>
 	<div class="col-4">
 		<div class="row row-cards">
 			<div class="col-12">
-				{% include cards/skeleton/card-5.html %}
+				{% include cards/placeholder/card-5.html %}
 			</div>
 			<div class="col-12">
-				{% include cards/skeleton/card-6.html %}
+				{% include cards/placeholder/card-6.html %}
 			</div>
 		</div>
 	</div>

src/scss/_core.scss

@@ -43,7 +43,7 @@
 @import "ui/progress";
 @import "ui/ribbons";
 @import "ui/markdown";
-@import "ui/skeleton";
+@import "ui/placeholder";
 @import "ui/steps";
 @import "ui/switch-icon";
 @import "ui/tables";

src/scss/_variables.scss

@@ -620,4 +620,8 @@ $flag-sizes: $avatar-sizes !default;
 $payment-sizes: $avatar-sizes !default;
 
 // Offcanvas
-$offcanvas-border-color: $border-color-transparent !default;
\ No newline at end of file
+$offcanvas-border-color: $border-color-transparent !default;
+
+// Placeholder
+$placeholder-opacity-min: .1 !default;
+$placeholder-opacity-max: .2 !default;
\ No newline at end of file

src/scss/ui/_placeholder.scss

+.placeholder {
+  &:not(.btn):not([class*="bg-"]) {
+    background-color: currentColor !important;
+  }
+
+  &:not(.avatar):not([class*="card-img-"]), {
+    border-radius: $border-radius;
+  }
+}
\ No newline at end of file

src/scss/ui/_skeleton.scss

-@keyframes skeleton-load {
-  from {
-    background-position: 0 0;
-  }
-  to {
-    background-position: 100vw 0;
-  }
-}
-
-%skeleton-common {
-  background-image: linear-gradient(to right, mix($body-bg, $body-color, 98%) 0, mix($body-bg, $body-color, 90%) 40%, mix($body-bg, $body-color, 98%) 80%);
-  background-size: 50vw 100%;
-  background-attachment: fixed;
-  animation: skeleton-load 2s linear infinite
-}
-
-.skeleton-avatar {
-  @extend %skeleton-common;
-  display: inline-block;
-  vertical-align: bottom;
-  width: $avatar-size;
-  height: $avatar-size;
-  border-radius: $border-radius-pill;
-
-  @each $name, $size in $avatar-sizes {
-    &-#{$name} {
-      width: $size;
-      height: $size;
-    }
-  }
-}
-
-.skeleton-line {
-  padding: .375rem 0;
-  display: block;
-  line-height: 0;
-  height: $font-size-base * $line-height-base;
-
-  &:after {
-    content: '';
-    display: inline-block;
-    height: 100%;
-    border-radius: $border-radius;
-    width: 100%;
-    @extend %skeleton-common;
-  }
-
-  &:nth-child(5n+2):after {
-    width: 80%;
-  }
-
-  &:nth-child(5n+3):after {
-    width: 90%;
-  }
-
-  &:nth-child(5n+4):after {
-    width: 95%;
-  }
-
-  &:nth-child(5n+5):after {
-    width: 85%;
-  }
-}
-
-.skeleton-line-full {
-  &:after {
-    width: 100% !important;
-  }
-}
-
-.skeleton-heading {
-  @extend .skeleton-line;
-  height: 1.5rem;
-  margin-bottom: .5rem;
-
-  &:after {
-    width: 70%;
-  }
-}
-
-.skeleton-image {
-  @extend %skeleton-common;
-
-  &:after {
-    content: '';
-    padding-top: percentage(divide(9, 16));
-    display: block;
-  }
-}
-
-.card-img-top,
-.card-img-bottom,
-.card-img-left,
-.card-img-right {
-  .skeleton-image {
-    border-radius: inherit;
-  }
-}
\ No newline at end of file