Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-08-13 06:42:23 +04:00
Code Issues Projects Releases Wiki Activity

steps component fixes

Browse Source
This commit is contained in:
chomik
2019-04-19 23:45:17 +02:00
parent 08db701c64
commit 76ded1f378
3 changed files with 28 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/_docs/steps.md
+7 -8
View File
@@ -7,27 +7,26 @@ Steps are progress indicators of a sequence of task steps.
### Default markup ### Default markup
{% example html %} {% example html %}
{% include ui/steps.html %} {% include ui/steps.html show-title=true %}
{% endexample %} {% endexample %}
### Size ### Tooltips
{% example html %} {% example html %}
{% include ui/steps.html size="md" %} {% include ui/steps.html show-title=true show-tooltip=true %}
{% include ui/steps.html size="lg" %}
{% endexample %} {% endexample %}
### Color ### Color
{% example html %} {% example html %}
{% include ui/steps.html color="green" %} {% include ui/steps.html color="green" show-title=true %}
{% include ui/steps.html color="red" %} {% include ui/steps.html color="red" show-title=true %}
{% endexample %} {% endexample %}
### Steps with title ### Steps without title
{% example html %} {% example html %}
{% include ui/steps.html show-title=true %} {% include ui/steps.html show-tooltip=true %}
{% endexample %} {% endexample %}
### Steps with numbers ### Steps with numbers
pages/_includes/ui/steps.html
+1 -1
View File
@@ -4,7 +4,7 @@
{% for i in (1..count) %} {% for i in (1..count) %}
{% assign elem = 'a' %} {% assign elem = 'a' %}
{% if i > active %}{% assign elem = 'span' %}{% endif %} {% if i > active %}{% assign elem = 'span' %}{% endif %}
<{{ elem }} href="#" class="step-item{% if i == active %} active{% endif %}" data-toggle="tooltip" title="Step {{ i }} description">{% if include.show-title %} <{{ elem }} href="#" class="step-item{% if i == active %} active{% endif %}"{% if include.show-tooltip %} data-toggle="tooltip" title="Step {{ i }} description"{% endif %}>{% if include.show-title %}
Step {{ i }} Step {{ i }}
{% endif %}</{{ elem }}> {% endif %}</{{ elem }}>
{% endfor %} {% endfor %}
scss/ui/_steps.scss
+20 -10
View File
@@ -1,4 +1,5 @@
$steps-border-width: 2px; $steps-border-width: 2px;
$steps-color-inactive: #f3f5f5;
@mixin step-size($border-width, $dot-size: 1rem) { @mixin step-size($border-width, $dot-size: 1rem) {
.step-item { .step-item {
@@ -21,10 +22,12 @@ $steps-border-width: 2px;
&:after, &:after,
&:before { &:before {
background: $color; background: $color;
color: $white;
} }
&.active:before { &.active:before {
border-color: $color; border-color: $color;
color: inherit;
} }
} }
} }
@@ -40,14 +43,6 @@ $steps-border-width: 2px;
@include step-color($primary); @include step-color($primary);
} }
.steps-md {
@include step-size(4px);
}
.steps-lg {
@include step-size(8px);
}
@each $color, $value in $colors { @each $color, $value in $colors {
.steps-#{$color} { .steps-#{$color} {
@include step-color($value); @include step-color($value);
@@ -100,9 +95,15 @@ $steps-border-width: 2px;
} }
& ~ .step-item { & ~ .step-item {
color: $text-muted-light;
&:after, &:after,
&:before { &:before {
background: $border-color; background: $steps-color-inactive;
}
&:before {
color: $text-muted-light !important;
} }
} }
} }
@@ -110,12 +111,21 @@ $steps-border-width: 2px;
.steps-counter { .steps-counter {
counter-reset: steps; counter-reset: steps;
@include step-size(2px, 1.5rem);
.step-item { .step-item {
counter-increment: steps; counter-increment: steps;
&:before { &:before {
content: counter(steps) content: counter(steps);
line-height: 1.5rem;
font-size: 1rem;
}
&.active ~ .step-item {
&:before {
background: #fff;
}
} }
} }
} }