New statuses (#965)

gulpfile.js

@@ -146,7 +146,7 @@ gulp.task('clean-jekyll', (cb) => {
  * Compile SASS to CSS and move it to dist directory
  */
 gulp.task('sass', () => {
-	return gulp
+	const g = gulp
 		.src(`${srcDir}/scss/!(_)*.scss`)
 		.pipe(debug())
 		.pipe(sass({
@@ -167,11 +167,17 @@ gulp.task('sass', () => {
 		.pipe(browserSync.reload({
 			stream: true,
 		}))
+
+	if (BUILD) {
+		g
 			.pipe(rtlcss())
 			.pipe(rename((path) => {
 				path.basename += '.rtl'
 			}))
 			.pipe(gulp.dest(`${distDir}/css/`))
+	}
+
+	return g
 })
 
 /**

src/pages/_data/charts.yml

@@ -227,6 +227,23 @@ development-activity:
       color: blue
       data: [3, 5, 4, 6, 7, 5, 6, 8, 24, 7, 12, 5, 6, 3, 8, 4, 14, 30, 17, 19, 15, 14, 25, 32, 40, 55, 60, 48, 52, 70]
 
+uptime:
+  type: area
+  datetime: true
+  series:
+    - name: 'Uptime'
+      color: blue
+      data: [ 150, 160, 170, 161, 167, 162, 161, 152, 141, 144, 154, 166, 176, 187, 198, 210, 196, 207, 200, 187, 192, 204, 193, 204, 208, 196, 193, 178, 191, 204, 218, 211, 218, 216, 201, 197, 190, 179, 172, 158, 159, 147, 152, 152, 144, 137, 136, 123, 112, 99, 100, 95, 105, 116, 125, 124, 133, 129, 116, 119, 109, 114, 115, 111, 96, 104, 104, 102, 116, 126, 117, 130, 124, 126, 131, 143, 130, 116, 118, 122, 132, 126, 136, 123, 112, 116, 113, 113, 109, 99, 100, 95, 83, 79, 64, 79, 81, 94, 99, 97, 83, 71, 75, 69, 71, 75, 84, 90, 100, 96, 108, 102, 116, 112, 112, 102, 115, 120, 118, 118 ]
+
+uptime-incidents:
+  type: bar
+  y-max: 20
+  datetime: true
+  series:
+    - name: 'Uptime incidents'
+      color: red
+      data: [ 1, 2, 6, 3, 1, 1, 2, 5, 2, 5, 6, 2, 4, 3, 4, 5, 4, 3, 2, 1, 2, 0, 2, 1, 1 ]
+
 line:
   type: line
   categories: ['2013', '2014', '2015', '2016', '2017', '2018']

src/pages/_data/docs.yml

@@ -120,6 +120,9 @@ components:
     spinners:
       title: Spinners
       url: docs/spinners.html
+    statuses:
+      title: Statuses
+      url: docs/statuses.html
     steps:
       title: Steps
       url: docs/steps.html

src/pages/_data/menu.yml

@@ -149,6 +149,9 @@ extra:
     music:
       title: Music
       url: music.html
+    uptime:
+      title: Uptime monitor
+      url: uptime.html
     widgets:
       title: Widgets
       url: widgets.html

src/pages/_docs/badges.md

@@ -29,6 +29,15 @@ The default badges are square and come in the basic set of colors.
 {% endcapture %}
 {% include example.html code=code %}
 
+## Outline badges
+
+{% capture code %}
+{% for color in site.colors %}
+<span class="badge badge-outline text-{{ color[0] }}">{{ color[0] }}</span>
+{% endfor %}
+{% endcapture %}
+{% include example.html code=code centered=true %}
+
 ## Pill badges
 
 Use the `.badge-pill` class if you want to create a badge with rounded corners. Its width will adjust to the label text.
@@ -65,18 +74,6 @@ Place the badge within an `<a>` element if you want it to perform the function o
 {% include example.html code=code centered=true %}
 
 
-## Empty badges
-
-Leave the HTML element empty if you want to create badges without any text. Empty badges are particularly useful if you want to make an interface element more noticeable regardless of limited space.
-
-{% capture code %}
-{% for color in site.colors %}
-<a href="#" class="badge bg-{{ color[0] }}"></a>
-{% endfor %}
-{% endcapture %}
-{% include example.html code=code centered=true %}
-
-
 ## Button with badge
 
 Badges can be used as part of links or buttons to provide a counter.

src/pages/_docs/page-headers.md

@@ -7,34 +7,34 @@ description: Page heading examples for Tabler
 ## Simple header
 
 {% capture code %}
-{% include layout/page-header-5.html %}
+{% include layout/headers/page-header-5.html %}
 {% endcapture %}
 {% include example.html code=code columns=2 %}
 
 ## With meta, avatar and actions
 
 {% capture code %}
-{% include layout/page-header-1.html %}
+{% include layout/headers/page-header-1.html %}
 {% endcapture %}
 {% include example.html code=code columns=2 %}
 
 ## With meta, search and actions
 
 {% capture code %}
-{% include layout/page-header-2.html %}
+{% include layout/headers/page-header-2.html %}
 {% endcapture %}
 {% include example.html code=code columns=2 %}
 
 ## Bordered header
 
 {% capture code %}
-{% include layout/page-header-3.html %}
+{% include layout/headers/page-header-3.html %}
 {% endcapture %}
 {% include example.html code=code columns=2 %}
 
 ## Header with breadcrumb and actions
 
 {% capture code %}
-{% include layout/page-header-4.html %}
+{% include layout/headers/page-header-4.html %}
 {% endcapture %}
 {% include example.html code=code columns=2 %}

src/pages/_docs/statuses.md

@@ -0,0 +1,77 @@
+---
+title: Statuses
+menu: docs.components.statuses
+description: Status dots are particularly useful if you want to make an interface element more noticeable regardless of limited space.
+---
+
+## Default markup
+
+{% capture code %}
+{% for color in site.colors %}
+{% assign c = color[0] %}
+{% assign t = color[1].title %}
+{% include ui/status.html color=c text=t %}
+{% endfor %}
+{% endcapture %}
+{% include example.html code=code centered=true wrapper="btn-list" %}
+
+## Status with dot
+
+{% capture code %}
+{% for color in site.colors %}
+{% assign c = color[0] %}
+{% assign t = color[1].title %}
+{% include ui/status.html color=c text=t dot=true %}
+{% endfor %}
+{% endcapture %}
+{% include example.html code=code centered=true wrapper="btn-list" %}
+
+### Animated dot
+
+{% capture code %}
+{% for color in site.colors %}
+{% assign c = color[0] %}
+{% assign t = color[1].title %}
+{% include ui/status.html color=c text=t dot=true animated=true %}
+{% endfor %}
+{% endcapture %}
+{% include example.html code=code centered=true wrapper="btn-list" %}
+
+## Lite status
+
+{% capture code %}
+{% for color in site.colors %}
+{% assign c = color[0] %}
+{% assign t = color[1].title %}
+{% include ui/status.html color=c text=t dot=true lite=true %}
+{% endfor %}
+{% endcapture %}
+{% include example.html code=code centered=true wrapper="btn-list" %}
+
+## Status dots
+
+{% capture code %}
+{% for color in site.colors %}
+<span class="status-dot status-{{ color[0] }}"></span>
+{% endfor %}
+{% endcapture %}
+{% include example.html code=code centered=true wrapper="btn-list" %}
+
+### Animated dots
+
+{% capture code %}
+{% for color in site.colors %}
+<span class="status-dot status-dot-animated status-{{ color[0] }}"></span>
+{% endfor %}
+{% endcapture %}
+{% include example.html code=code centered=true wrapper="btn-list" %}
+
+## Status indicator 
+
+{% capture code %}
+{% for color in site.colors %}
+{% assign c = color[0] %}
+{% include ui/status-indicator.html animated=true color=c %}
+{% endfor %}
+{% endcapture %}
+{% include example.html code=code centered=true wrapper="btn-list" %}

src/pages/_includes/layout/headers/uptime.html

@@ -0,0 +1,26 @@
+<div class="page-header d-print-none">
+	<div class="row align-items-center">
+		<div class="col-auto">
+			{% include ui/status-indicator.html animated=true color="green" %}
+		</div>
+
+		<div class="col">
+			<h2 class="page-title">
+				tabler-icons.io
+			</h2>
+			<div class="text-muted">
+				<ul class="list-inline list-inline-dots mb-0">
+					<li class="list-inline-item"><span class="text-green">Up</span></li>
+					<li class="list-inline-item">Checked every 3 minutes</li>
+				</ul>
+			</div>
+		</div>
+
+		<div class="col-auto ms-auto d-print-none">
+			<div class="btn-list">
+				{% include ui/button.html text="Configure" icon="settings" %}
+				{% include ui/button.html color="primary" text="Pause this monitor" icon="player-pause" %}
+			</div>
+		</div>
+	</div>
+</div>

src/pages/_includes/layout/page-header.html

@@ -6,7 +6,9 @@
 {% assign icon = page.page-header-icon | default: layout.page-header-icon %}
 
 
-{% if page-header %}
+{% if page.page-header-file %}
+	{% include layout/headers/{{ page.page-header-file }}.html %}
+{% elsif page-header %}
 <!-- Page title -->
 <div class="page-header{% if class %} {{ class }}{% endif %} d-print-none">
 

src/pages/_includes/ui/chart.html

@@ -174,6 +174,9 @@
 				labels: {
 					padding: 4
 				},
+				{% if data.y-max %}
+				max: {{ data.y-max }},
+				{% endif %}
 				{% if data.y-title %}
 				title: {
 					text: '{{ data.y-title | escape }}'

src/pages/_includes/ui/status-dot.html

@@ -0,0 +1 @@
+<span class="status-dot{% if include.color %} status-{{ include.color }}{% endif %}{% if include.animated %} status-dot-animated{% endif %}"></span>

src/pages/_includes/ui/status-indicator.html

@@ -0,0 +1,5 @@
+<span class="status-indicator{% if include.color %} status-{{ include.color }}{% endif %}{% if include.animated %} status-indicator-animated{% endif %}">
+	<span class="status-indicator-circle"></span>
+	<span class="status-indicator-circle"></span>
+	<span class="status-indicator-circle"></span>
+</span>

src/pages/_includes/ui/status.html

@@ -0,0 +1,6 @@
+<span class="status{% if include.color %} status-{{ include.color }}{% endif %}{% if include.lite %} status-lite{% endif %}">
+	{% if include.dot %}
+	<span class="status-dot{% if include.animated %} status-dot-animated{% endif %}"></span>
+	{% endif %}
+	{{ include.text | default: 'Status' }}
+</span>

src/pages/_layouts/default.html

@@ -13,7 +13,6 @@ layout: base
 		{% include layout/navbar.html condensed=page.layout-navbar-condensed overlap=page.layout-navbar-overlap dark=page.layout-navbar-dark hide-brand=page.layout-navbar-hide-brand hide-menu=page.layout-navbar-hide-menu sticky=page.layout-navbar-sticky transparent=page.layout-topbar-transparent class=page.layout-navbar-class %}
 	{% endunless %}
 
-
 	<div class="page-wrapper{% if page.layout-wrapper-full %} page-wrapper-full{% endif %}">
 		<div class="container{% if page.layout-fluid %}-fluid{% else %}-xl{% endif %}">
 			{% include layout/page-header.html %}
@@ -26,9 +25,7 @@ layout: base
 			{% unless no-container %}
 			<div class="container{% if page.layout-fluid %}-fluid{% else %}-xl{% endif %}{% if page.container-centered %} d-flex flex-column justify-content-center{% endif %}">
 			{% endunless %}
-
 				{{ content }}
-
 			{% unless no-container %}
 			</div>
 			{% endunless %}

src/pages/search-results.html

@@ -4,12 +4,12 @@ page-header-description: About 2,410 result (0.19 seconds)
 menu: extra.search-results
 ---
 
-<div class="row g-3">
+<div class="row g-4">
 	<div class="col-3">
 		{% include parts/nav/nav-aside.html %}
 	</div>
 	<div class="col-9">
-		<div class="row">
+		<div class="row row-cards">
 			{% assign photos = site.data.photos | where: "horizontal", true %}
 
 			{% for photo in photos %}

src/pages/uptime.html

@@ -0,0 +1,108 @@
+---
+page-header-file: uptime
+libs: apexcharts
+menu: extra.uptime
+---
+
+<div class="row row-cards">
+	<div class="col-4">
+		<div class="card">
+			<div class="card-body">
+				<div class="subheader">Currently up for</div>
+				<div class="h3 m-0">14 days 2 hours 54 mins 34 seconds</div>
+			</div>
+		</div>
+	</div>
+	<div class="col-4">
+		<div class="card">
+			<div class="card-body">
+				<div class="subheader">Last checked at</div>
+				<div class="h3 m-0">27 seconds ago</div>
+			</div>
+		</div>
+	</div>
+	<div class="col-4">
+		<div class="card">
+			<div class="card-body">
+				<div class="subheader">Incidents</div>
+				<div class="h3 m-0">3</div>
+			</div>
+		</div>
+	</div>
+	<div class="col-8">
+		<div class="card">
+			<div class="card-body">
+				<h3 class="card-title">Response times across regions in the last day</h3>
+				{% include ui/chart.html chart-id="uptime" height=15 %}
+			</div>
+		</div>
+	</div>
+	<div class="col-4">
+		<div class="card">
+			<div class="card-body">
+				<h3 class="card-title">Uptime incidents per day</h3>
+				{% include ui/chart.html chart-id="uptime-incidents" height=15 %}
+			</div>
+		</div>
+	</div>
+	<div class="col-12">
+		<div class="card">
+			<div class="card-table table-responsive">
+				<table class="table">
+					<thead>
+					<tr>
+						<th>Time period</th>
+						<th>Availability</th>
+						<th>Downtime</th>
+						<th>Incidents</th>
+						<th>Longest incident</th>
+						<th>Avg. incident</th>
+					</tr>
+					</thead>
+					<tbody><tr>
+						<td>Today</td>
+						<td>98.9533%</td>
+						<td>1 minute</td>
+						<td>1</td>
+						<td>1 minute</td>
+						<td>1 minute</td>
+					</tr>
+					<tr>
+						<td>Last 7 days</td>
+						<td>98.9533%</td>
+						<td>1 minute</td>
+						<td>1</td>
+						<td>1 minute</td>
+						<td>1 minute</td>
+					</tr>
+					<tr>
+						<td>Last 30 days</td>
+						<td>98.9533%</td>
+						<td>1 minute</td>
+						<td>1</td>
+						<td>1 minute</td>
+						<td>1 minute</td>
+					</tr>
+					<tr>
+						<td>Last 365 days</td>
+						<td>98.9533%</td>
+						<td>1 minute</td>
+						<td>1</td>
+						<td>1 minute</td>
+						<td>1 minute</td>
+					</tr>
+					<tr>
+						<td>All time</td>
+						<td>98.9533%</td>
+						<td>1 minute</td>
+						<td>1</td>
+						<td>1 minute</td>
+						<td>1 minute</td>
+					</tr>
+					</tbody>
+				</table>
+			</div>
+		</div>
+	</div>
+</div>
+

src/scss/_core.scss

@@ -45,6 +45,7 @@
 @import "ui/markdown";
 @import "ui/placeholder";
 @import "ui/steps";
+@import "ui/status";
 @import "ui/switch-icon";
 @import "ui/tables";
 @import "ui/toasts";

src/scss/_variables.scss

@@ -328,7 +328,6 @@ $breadcrumb-variants: (
 $badge-font-size: $code-font-size !default;
 $badge-line-height: $code-line-height !default;
 $badge-font-weight: $font-weight-medium !default;
-$badge-empty-size: .5rem !default;
 $badge-padding-y: .25em !default;
 $badge-padding-x: .5em !default;
 
@@ -520,6 +519,8 @@ $pagination-bg: transparent !default;
 $pagination-disabled-bg: transparent !default;
 $pagination-disabled-color: rgba($text-muted, .5) !default;
 
+//statuses
+$status-dot-size: .5rem !default;
 
 //steps
 $steps-border-width: 2px !default;

src/scss/layout/_page.scss

@@ -97,7 +97,7 @@
   margin: 0;
   font-size: $h2-font-size;
   line-height: $h2-line-height;
-  font-weight: $font-weight-medium;
+  font-weight: $font-weight-bold;
   color: inherit;
   display: flex;
   align-items: center;

src/scss/mixins/_functions.scss

@@ -10,6 +10,20 @@
   @return shade-color($color, 10%);
 }
 
+@function theme-colors($social: true) {
+  $colors: $theme-colors;
+
+  @if $enable-extra-colors {
+    $colors: map-merge($colors, $extra-colors);
+  }
+
+  @if ($enable-social-colors and $social) {
+    $colors: map-merge($colors, $social-colors);
+  }
+
+  @return $colors;
+}
+
 @function str-replace($string, $search, $replace: "") {
   $index: str-index($string, $search);
 

src/scss/ui/_badges.scss

@@ -1,14 +1,15 @@
 .badge {
-  display: inline-flex;
   justify-content: center;
   align-items: center;
   background: $gray-500;
   overflow: hidden;
   user-select: none;
   border: 1px solid transparent;
-  min-width: ($badge-padding-y * 2 ) + ($badge-font-size / 100% * 1em);
+  min-width: ($badge-padding-y * 2 ) + (divide($badge-font-size, 100%) * 1em);
   font-weight: $headings-font-weight;
   letter-spacing: .04em;
+  vertical-align: bottom;
+  text-transform: uppercase;
 
   @at-root a#{&} {
     color: $white;
@@ -24,11 +25,18 @@
     border-radius: $border-radius-pill;
   }
 
+  .avatar {
+    box-sizing: content-box;
+    width: 1.25rem;
+    height: 1.25rem;
+    margin: 0 .5rem 0 -.5rem;
+  }
+
   .icon {
     width: 1em;
     height: 1em;
     font-size: 1rem;
-    margin: 0 .25rem 0 0;
+    stroke-width: 2;
   }
 }
 

src/scss/ui/_breadcrumbs.scss

@@ -23,8 +23,6 @@
 
 @each $name, $symbol in $breadcrumb-variants {
   .breadcrumb-#{$name} {
-    .breadcrumb-item + .breadcrumb-item:before {
-      content: $symbol;
-    }
+    --#{$variable-prefix}breadcrumb-divider: "#{quote($symbol)}";
   }
 }

src/scss/ui/_buttons.scss

@@ -175,17 +175,7 @@
 //
 // Button color variations
 //
-$btn-colors: $theme-colors;
-
-@if $enable-extra-colors {
-  $btn-colors: map-merge($btn-colors, $extra-colors);
-}
-
-@if $enable-social-colors {
-  $btn-colors: map-merge($btn-colors, $social-colors);
-}
-
-@each $name, $color in $btn-colors {
+@each $name, $color in theme-colors() {
   .btn-#{$name},
   .btn-outline-#{$name},
   .btn-ghost-#{$name} {

src/scss/ui/_status.scss

@@ -0,0 +1,172 @@
+@keyframes status-pulsate-main {
+  40% {
+    transform: scale(1.25, 1.25);
+  }
+  60% {
+    transform: scale(1.25, 1.25);
+  }
+}
+
+@keyframes status-pulsate-secondary {
+  10% {
+    transform: scale(1, 1)
+  }
+  30% {
+    transform: scale(3, 3)
+  }
+  80% {
+    transform: scale(3, 3)
+  }
+  100% {
+    transform: scale(1, 1)
+  }
+}
+
+@keyframes status-pulsate-tertiary {
+  25% {
+    transform: scale(1, 1);
+  }
+  80% {
+    transform: scale(3, 3);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(3, 3);
+    opacity: 0;
+  }
+}
+
+//
+// Status
+//
+.status {
+  --#{$variable-prefix}status-color: #{$text-muted};
+  --#{$variable-prefix}status-color-rgb: #{to-rgb($text-muted)};
+
+  display: inline-flex;
+  align-items: center;
+  height: 2rem;
+  padding: .5rem .75rem;
+  gap: .5rem;
+  color: var(--#{$variable-prefix}status-color);
+  background: rgba(var(--#{$variable-prefix}status-color-rgb), .1);
+  font-size: $font-size-base;
+  text-transform: none;
+  letter-spacing: normal;
+  border-radius: $border-radius-pill;
+  font-weight: $font-weight-medium;
+  line-height: 1;
+  margin: 0;
+
+  .status-dot {
+    background: var(--#{$variable-prefix}status-color);
+  }
+
+  .icon {
+    font-size: 1.25rem;
+  }
+}
+
+.status-lite {
+  border: 1px solid var(--#{$variable-prefix}border-color) !important;
+  background: transparent !important;
+  color: var(--#{$variable-prefix}body-text) !important;
+}
+
+@each $name, $color in theme-colors() {
+  .status-#{$name} {
+    --#{$variable-prefix}status-color: #{$color};
+    --#{$variable-prefix}status-color-rgb: #{to-rgb($color)};
+  }
+}
+
+//
+// Status dot
+//
+.status-dot {
+  --#{$variable-prefix}status-dot-color: var(--#{$variable-prefix}status-color, #{$text-muted});
+  --#{$variable-prefix}status-size: #{$status-dot-size};
+  position: relative;
+  display: inline-block;
+  width: var(--#{$variable-prefix}status-size);
+  height: var(--#{$variable-prefix}status-size);
+  background: var(--#{$variable-prefix}status-dot-color);
+  border-radius: $border-radius-pill;
+}
+
+.status-dot-animated {
+  &:before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+    background: inherit;
+    border-radius: inherit;
+    opacity: .6;
+    animation: 1s linear 2s backwards infinite status-pulsate-tertiary;
+  }
+}
+
+$btn-colors: $theme-colors;
+
+@if $enable-extra-colors {
+  $btn-colors: map-merge($btn-colors, $extra-colors);
+}
+
+@if $enable-social-colors {
+  $btn-colors: map-merge($btn-colors, $social-colors);
+}
+
+//
+// Status indicator
+//
+.status-indicator {
+  --#{$variable-prefix}status-indicator-size: 2.5rem;
+  --#{$variable-prefix}status-indicator-color: var(--#{$variable-prefix}status-color, #{$text-muted});
+  display: block;
+  position: relative;
+  width: var(--#{$variable-prefix}status-indicator-size);
+  height: var(--#{$variable-prefix}status-indicator-size);
+}
+
+.status-indicator-circle {
+  --#{$variable-prefix}status-circle-size: .75rem;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  margin: calc(var(--#{$variable-prefix}status-circle-size) / -2) 0 0 calc(var(--#{$variable-prefix}status-circle-size) / -2);
+  width: var(--#{$variable-prefix}status-circle-size);
+  height: var(--#{$variable-prefix}status-circle-size);
+  border-radius: $border-radius-pill;
+  background: var(--#{$variable-prefix}status-color);
+
+  &:nth-child(1) {
+    z-index: 3;
+  }
+
+  &:nth-child(2) {
+    z-index: 2;
+    opacity: .1;
+  }
+
+  &:nth-child(3) {
+    z-index: 1;
+    opacity: .3;
+  }
+}
+
+.status-indicator-animated {
+  .status-indicator-circle {
+    &:nth-child(1) {
+      animation: 2s linear 1s infinite backwards status-pulsate-main;
+    }
+
+    &:nth-child(2) {
+      animation: 2s linear 1s infinite backwards status-pulsate-secondary;
+    }
+
+    &:nth-child(3) {
+      animation: 2s linear 1s infinite backwards status-pulsate-tertiary;
+    }
+  }
+}

src/scss/utils/_colors.scss

@@ -14,20 +14,8 @@
       background-color: $value !important;
     }
 
-    .text-#{"" + $color} {
-      color: $value !important;
-    }
-
-    .bg-#{"" + $color}-lt {
-      color: $value !important;
-      background: theme-color-lighter($value, true) !important;
-    }
-  }
-}
-
-// Social colors
-@if $enable-social-colors {
-  @each $color, $value in $social-colors {
+// All colors
+@each $color, $value in theme-colors() {
   .bg-#{"" + $color} {
     color: #ffffff !important;
     background: $value !important;
@@ -42,4 +30,3 @@
     background: theme-color-lighter($value, true) !important;
   }
 }
-}