Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-08-09 12:52:24 +04:00
Code Issues Projects Releases Wiki Activity

Steps improvements (#1347)

Browse Source
This commit is contained in:
Paweł Kuna
2022-11-09 20:06:19 +01:00
committed by GitHub
parent a06c8edb94
commit 56ccf9526a
5 changed files with 211 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/_data/menu.yml
+4
View File
@@ -78,6 +78,10 @@ base:
placeholder:
url: placeholder.html
title: Placeholder
steps:
url: steps.html
title: Steps
badge: New
tabs:
url: tabs.html
title: Tabs
src/pages/steps.html
+95
View File
@@ -0,0 +1,95 @@
---
title: Steps
page-header: Steps
menu: base.steps
---
<div class="row row-cards">
<div class="col-lg-8">
<div class="card">
<div class="card-body">
<h3 class="card-title">Steps horizontal</h3>
<ul class="steps steps-green my-4">
<li class="step-item">1</li>
<li class="step-item active">2</li>
<li class="step-item">3</li>
</ul>
</div>
<div class="card-body">
<ul class="steps steps-green steps-counter my-4">
<li class="step-item"></li>
<li class="step-item active"></li>
<li class="step-item"></li>
</ul>
</div>
<div class="card-body">
<ul class="steps steps-green steps-counter my-4">
<li class="step-item">Cart</li>
<li class="step-item active">Billing Information</li>
<li class="step-item">Confirmation</li>
</ul>
</div>
<div class="card-body">
<ol class="breadcrumb breadcrumb-arrows">
<li class="breadcrumb-item"><a href="#">Step one</a></li>
<li class="breadcrumb-item active"><a href="#">Step two</a></li>
<li class="breadcrumb-item disabled"><a href="#">Step three</a></li>
<li class="breadcrumb-item disabled"><a href="#">Step four</a></li>
</ol>
</div>
<div class="card-body">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">1. Step one</a></li>
<li class="breadcrumb-item"><a href="#">2. Step two</a></li>
<li class="breadcrumb-item active"><a href="#">3. Step three</a></li>
<li class="breadcrumb-item disabled"><a href="#">4. Step four</a></li>
<li class="breadcrumb-item disabled"><a href="#">5. Step fife</a></li>
</ol>
</div>
<div class="card-body">
<ol class="breadcrumb breadcrumb-muted">
<li class="breadcrumb-item"><a href="#">1. Step one</a></li>
<li class="breadcrumb-item"><a href="#">2. Step two</a></li>
<li class="breadcrumb-item active"><a href="#">3. Step three</a></li>
<li class="breadcrumb-item disabled"><a href="#">4. Step four</a></li>
<li class="breadcrumb-item disabled"><a href="#">5. Step fife</a></li>
</ol>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card">
<div class="card-body">
<h3 class="card-title">Steps vertical</h3>
<ul class="steps steps-vertical">
<li class="step-item">
<div class="h4 m-0">Order received</div>
<div class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus culpa cum expedita ipsam laborum nam ratione reprehenderit sed sint tenetur!</div>
</li>
<li class="step-item">
<div class="h4 m-0">Order received</div>
<div class="text-muted">Lorem ipsum dolor sit amet.</div>
</li>
<li class="step-item active">
<div class="h4 m-0">Out for delivery</div>
<div class="text-muted">Lorem ipsum dolor sit amet.</div>
</li>
<li class="step-item">
<div class="h4 m-0">Finalized</div>
<div class="text-muted">Lorem ipsum dolor sit amet.</div>
</li>
</ul>
</div>
<div class="card-body">
<ul class="steps steps-counter steps-vertical">
<li class="step-item">Step one</li>
<li class="step-item">Step two</li>
<li class="step-item active">Step three</li>
<li class="step-item">Step four</li>
<li class="step-item">Step five</li>
</ul>
</div>
</div>
</div>
</div>
src/scss/_variables.scss
+6 -1
View File
@@ -420,7 +420,10 @@ $alert-shadow: rgba($dark, .04) 0 2px 4px 0 !default;
// Breadcrumb
$breadcrumb-divider-color: var(--#{$prefix}muted) !default;
$breadcrumb-link-color: var(--#{$prefix}link-color) !default;
$breadcrumb-active-color: inherit !default;
$breadcrumb-active-font-weight: var(--#{$prefix}font-weight-bold) !default;
$breadcrumb-disabled-color: var(--#{$prefix}disabled-color) !default;
$breadcrumb-variants: (
dots: "·",
@@ -677,7 +680,9 @@ $status-height: 1.5rem !default;
// Steps
$steps-border-width: 2px !default;
$steps-color-inactive: #f3f5f5 !default;
$steps-color: var(--#{$prefix}primary) !default;
$steps-inactive-color: var(--#{$prefix}border-color) !default;
$steps-margin: 2rem 0 !default;
// Spinner
$spinner-width: 1.5rem !default;
src/scss/ui/_breadcrumbs.scss
+23 -1
View File
@@ -1,10 +1,13 @@
.breadcrumb {
--#{$prefix}breadcrumb-item-active-font-weight: #{$breadcrumb-active-font-weight};
--#{$prefix}breadcrumb-item-disabled-color: #{$breadcrumb-disabled-color};
--#{$prefix}breadcrumb-link-color: #{$breadcrumb-link-color};
padding: 0;
margin: 0;
background: transparent;
a {
color: var(--#{$prefix}muted);
color: var(--#{$prefix}breadcrumb-link-color);
&:hover {
text-decoration: underline;
@@ -12,8 +15,27 @@
}
}
.breadcrumb-muted {
--#{$prefix}breadcrumb-link-color: var(--#{$prefix}muted);
}
.breadcrumb-item {
&.active {
font-weight: var(--#{$prefix}breadcrumb-item-active-font-weight);
a {
color: inherit;
pointer-events: none;
}
}
&.disabled {
color: var(--#{$prefix}breadcrumb-item-disabled-color);
&:before {
color: inherit;
}
a {
color: inherit;
pointer-events: none;
src/scss/ui/_steps.scss
+83 -61
View File
@@ -1,53 +1,28 @@
// stylelint-disable declaration-no-important
@mixin step-size($border-width, $dot-size: 1rem) {
.step-item {
padding-top: add($dot-size, 4px);
&:after {
top: add($dot-size * .5, 2px);
height: $border-width;
}
&:before {
width: $dot-size;
height: $dot-size;
}
}
}
@mixin step-color($color) {
.step-item {
&:after,
&:before {
color: $white;
background: $color;
}
&.active:before {
color: inherit;
border-color: $color;
}
}
}
//
// Steps
//
.steps {
--#{$prefix}steps-color: #{$steps-color};
--#{$prefix}steps-inactive-color: #{$steps-inactive-color};
--#{$prefix}steps-dot-size: .5rem;
--#{$prefix}steps-border-width: #{$steps-border-width};
display: flex;
flex-wrap: nowrap;
width: 100%;
padding: 0;
margin: 2rem 0;
margin: 0;
list-style: none;
@include step-size(2px, .5rem);
@include step-color( var(--#{$prefix}primary) );
}
@each $color, $value in $extra-colors {
.steps-#{$color} {
@include step-color($value);
@each $name, $color in $extra-colors {
.steps-#{$name} {
--#{$prefix}steps-color: var(--#{$prefix}#{$name});
}
}
//
// Step item
//
.step-item {
position: relative;
flex: 1 1 0;
@@ -56,6 +31,7 @@
color: inherit;
text-align: center;
cursor: default;
padding-top: calc(var(--#{$prefix}steps-dot-size));
@at-root a#{&} {
cursor: pointer;
@@ -65,66 +41,112 @@
}
}
&:not(:first-child):after {
&:after,
&:before {
background: var(--#{$prefix}steps-color);
}
&:not(:last-child):after {
position: absolute;
left: -50%;
left: 50%;
width: 100%;
content: "";
transform: translateY(-50%);
}
&:after {
top: calc(var(--#{$prefix}steps-dot-size) * .5);
height: var(--#{$prefix}steps-border-width);
}
&:before {
content: "";
position: absolute;
top: 0;
left: 50%;
z-index: 1;
box-sizing: content-box;
display: block;
content: "";
border: 2px var(--#{$prefix}border-style) $card-bg;
display: flex;
align-items: center;
justify-content: center;
border-radius: $border-radius-pill;
transform: translateX(-50%);
color: var(--#{$prefix}white);
width: var(--#{$prefix}steps-dot-size);
height: var(--#{$prefix}steps-dot-size);
}
&.active {
font-weight: var(--#{$prefix}font-weight-bold);
&:before {
background: $card-bg;
&:after {
background: var(--#{$prefix}steps-inactive-color);
}
& ~ .step-item {
color: var(--#{$prefix}muted);
color: var(--#{$prefix}disabled-color);
&:after,
&:before {
background: $steps-color-inactive;
}
&:before {
color: var(--#{$prefix}muted) !important;
background: var(--#{$prefix}steps-inactive-color);
}
}
}
}
//
// Steps counter
//
.steps-counter {
--#{$prefix}steps-dot-size: 1.5rem;
counter-reset: steps;
@include step-size(2px, 1.5rem);
.step-item {
counter-increment: steps;
&:before {
font-size: $h5-font-size;
line-height: 1.5rem;
content: counter(steps);
}
&.active ~ .step-item {
&:before {
background: $white;
}
}
}
}
//
// Steps vertical
//
.steps-vertical {
--#{$prefix}steps-dot-offset: 6px;
flex-direction: column;
&.steps-counter {
--#{$prefix}steps-dot-offset: -2px;
}
.step-item {
text-align: left;
padding-top: 0;
padding-left: calc(var(--#{$prefix}steps-dot-size) + 1rem);
min-height: auto;
&:not(:first-child) {
margin-top: 1rem;
}
&:before {
top: var(--#{$prefix}steps-dot-offset);
left: 0;
transform: translate(0, 0);
}
&:not(:last-child) {
&:after {
position: absolute;
content: '';
transform: translateX(-50%);
top: var(--#{$prefix}steps-dot-offset);
left: calc(var(--#{$prefix}steps-dot-size) * 0.5);
width: var(--#{$prefix}steps-border-width);
height: calc(100% + 1rem);
}
}
}
}