entrouvert
/
publik-base-theme
15
1
Fork 1
Code Issues Pull Requests 11 Releases Wiki Activity

scss: move CSS of vertical steps to sass mixins (#71572)
gitea-wip/publik-base-theme/pipeline/pr-main This commit looks good Details
gitea-wip/publik-base-theme/pipeline/head Build started... Details

This commit is contained in:
Thomas Jund 2022-11-22 14:46:01 +01:00
parent ff65064dcd
commit 1afeae68c1
1 changed files with 27 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
static/includes/wcs/_steps.scss
View File

@ -280,7 +280,7 @@ $mq-min--wcs-steps-horizontal-layout: "min-width: #{$wcs-steps-small-layout-limi
// Vertical Steps
// Sidebar on LEFT or RIGHT, DESKTOP only
// Display All steps with marker and label. One below the other.
@include desktop-vertical-steps() {
@mixin vertical-steps() {
.wcs-steps {
font-size: 1.25em;
@ -324,6 +324,9 @@ $mq-min--wcs-steps-horizontal-layout: "min-width: #{$wcs-steps-small-layout-limi
}
}
}
@include desktop-vertical-steps() {
@include vertical-steps();
}
// OPTION marker-background-type: gradient.
// Generate automatically a gradient based on background-color
@ -393,8 +396,27 @@ $mq-min--wcs-steps-horizontal-layout: "min-width: #{$wcs-steps-small-layout-limi
}
// OPTION marker type TIED
@if (str-index('#{$wcs-step-marker-type}', 'tied')) {
@mixin tied-vertical-steps() {
.wcs-step {
&:not(:last-child) {
position: relative;
&::after {
height: calc(100% + #{$wcs-steps-spacing});
width: $wcs-step-marker-tie-width;
position: absolute;
z-index: 1;
top: $wcs-steps-spacing;
left: calc( (#{$wcs-step-marker-size} - #{$wcs-step-marker-tie-width}) / 2 );
@if $wcs-step-background != transparent {
left: calc( (#{$wcs-step-marker-size} - #{$wcs-step-marker-tie-width}) / 2 + #{$wcs-steps-spacing});
}
}
}
}
}
@if (str-index('#{$wcs-step-marker-type}', 'tied')) {
.wcs-step {
&:not(:last-child) {
@media ($mq-min--wcs-steps-horizontal-layout) {
@ -408,28 +430,13 @@ $mq-min--wcs-steps-horizontal-layout: "min-width: #{$wcs-steps-small-layout-limi
}
}
@include desktop-vertical-steps() {
position: relative;
&::after {
height: calc(100% + #{$wcs-steps-spacing});
width: $wcs-step-marker-tie-width;
position: absolute;
z-index: 1;
top: $wcs-steps-spacing;
left: calc( (#{$wcs-step-marker-size} - #{$wcs-step-marker-tie-width}) / 2 );
@if $wcs-step-background != transparent {
left: calc( (#{$wcs-step-marker-size} - #{$wcs-step-marker-tie-width}) / 2 + #{$wcs-steps-spacing});
}
}
}
}
&--marker {
position: relative;
z-index: 2;
}
}
@include desktop-vertical-steps() {
@include tied-vertical-steps();
}
}