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) #41

Merged
tjund merged 1 commits from wip/71572-vertical-steps-mixins into main 2022-11-28 16:47:06 +01:00
Conversation 1 Commits 1 Files Changed 1 +27 -20
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();
}
}