436 lines
9.0 KiB
SCSS
436 lines
9.0 KiB
SCSS
// Form steps
|
|
// template : wcs/front/formdata_steps.html
|
|
|
|
//
|
|
// Config
|
|
//
|
|
|
|
// Steps Bloc
|
|
$wcs-steps-background: transparent !default;
|
|
$wcs-steps-spacing: 0.35rem !default; // half of default 0.7rem used in publik
|
|
|
|
// Step
|
|
$wcs-step-color: #868686 !default; // color for default marker & label
|
|
$wcs-step-current-color: $primary-color !default;
|
|
$wcs-step-background: transparent !default;
|
|
$wcs-step-current-background: $wcs-step-background !default;
|
|
$wcs-step-border-bottom: 1px solid $wcs-step-color !default;
|
|
$wcs-step-current-border-bottom: 3px solid $wcs-step-current-color !default;
|
|
@if ($wcs-step-border-bottom == none) {
|
|
$wcs-step-current-border-bottom: none;
|
|
}
|
|
// Step option
|
|
$wsc-step-before-piled: false !default;
|
|
|
|
// marker
|
|
$wcs-step-marker-color: $wcs-step-color !default;
|
|
$wcs-step-current-marker-color: $wcs-step-current-color !default;
|
|
$wcs-step-marker-background: $wcs-step-background !default;
|
|
$wcs-step-current-marker-background: $wcs-step-current-background !default;
|
|
// marker options
|
|
$wcs-step-marker-size: 2.1em !default;
|
|
$wcs-step-current-marker-enlarge: 1 !default;
|
|
$wcs-step-marker-type: square !default; // square || tied || disc || disc tied
|
|
$wcs-step-marker-tie-color: $wcs-step-color !default;
|
|
$wcs-step-marker-tie-width: 5px !default;
|
|
$wcs-step-marker-background-type: solid !default;
|
|
|
|
// Label
|
|
$wcs-step-current-label-color: $wcs-step-current-color !default;
|
|
|
|
// Breakpoints between small & horizontal layout
|
|
$wcs-steps-small-layout-limit: $very-small-limit !default;
|
|
|
|
// UTILS for custom code
|
|
// media queries between small & horizontal layout
|
|
$mq-max--wcs-steps-small-layout: "max-width: #{$wcs-steps-small-layout-limit}";
|
|
$mq-min--wcs-steps-horizontal-layout: "min-width: #{$wcs-steps-small-layout-limit+1}";
|
|
// Desktop Steps orientation sass mixins
|
|
// Steps orientations depend on media-queries & $form-sidebar-position
|
|
@mixin desktop-horizontal-steps() {
|
|
@if ($form-sidebar-position == top) {
|
|
@media ($min-desktop-viewport) {
|
|
@content;
|
|
}
|
|
}
|
|
}
|
|
@mixin desktop-vertical-steps() {
|
|
@if ($form-sidebar-position == left or $form-sidebar-position == right) {
|
|
@media ($min-desktop-viewport) {
|
|
@content;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
//
|
|
// Default Steps (with SQUARES markers)
|
|
//
|
|
|
|
// Steps bloc
|
|
.wcs-steps {
|
|
background: $wcs-steps-background;
|
|
margin-bottom: 0.7rem;
|
|
border-radius: $border-radius;
|
|
|
|
@if $wcs-steps-background != transparent {
|
|
padding: $wcs-steps-spacing;
|
|
}
|
|
|
|
// hide injected h2
|
|
h2 {
|
|
display: none;
|
|
}
|
|
|
|
// hide if only one step
|
|
&.steps-1 {
|
|
display: none;
|
|
}
|
|
|
|
&--list {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
color: $wcs-step-color;
|
|
}
|
|
}
|
|
|
|
// Step item
|
|
.wcs-step {
|
|
border-radius: $border-radius;
|
|
background-color: $wcs-step-background;
|
|
display: flex;
|
|
|
|
&--marker {
|
|
// marker is abbr tag
|
|
text-decoration: none;
|
|
|
|
font-size: 1em;
|
|
text-align: center;
|
|
|
|
display: flex;
|
|
|
|
color: $wcs-step-marker-color;
|
|
background: $wcs-step-marker-background;
|
|
border-radius: $border-radius;
|
|
|
|
width: $wcs-step-marker-size;
|
|
height: $wcs-step-marker-size;
|
|
flex: 0 0 $wcs-step-marker-size;
|
|
|
|
&-nb {
|
|
margin: auto;
|
|
}
|
|
|
|
&-total {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&--label {
|
|
display: block;
|
|
align-self: center;
|
|
letter-spacing: 1px;
|
|
line-height: 1.25;
|
|
}
|
|
|
|
|
|
// If step is current
|
|
&.current {
|
|
font-weight: bold;
|
|
background: $wcs-step-current-background;
|
|
}
|
|
|
|
&.current & {
|
|
&--marker {
|
|
background: $wcs-step-current-marker-background;
|
|
color: $wcs-step-current-marker-color;
|
|
@if ($wcs-step-current-marker-enlarge != 1) {
|
|
transform: scale($wcs-step-current-marker-enlarge);
|
|
}
|
|
}
|
|
&--label {
|
|
color: $wcs-step-current-label-color;
|
|
}
|
|
}
|
|
|
|
// If step is NOT current
|
|
&:not(.current) & {
|
|
&--label {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Sidebar on TOP, SMALL LAYOUT (very-small viewport)
|
|
// Display only current step with nb and total in marker
|
|
@media ($mq-max--wcs-steps-small-layout) {
|
|
.wcs-step {
|
|
@if ($wcs-step-background != transparent or $wcs-step-current-background != transparent) {
|
|
padding: $wcs-steps-spacing;
|
|
}
|
|
|
|
&--marker {
|
|
|
|
$size: $wcs-step-marker-size + 0.8;
|
|
|
|
width: $size;
|
|
height: $size;
|
|
flex: 0 0 auto;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
&-nb {
|
|
margin: 0;
|
|
transform: translateY(-0.5em);
|
|
order: 1;
|
|
}
|
|
|
|
&-total {
|
|
display: block;
|
|
transform: translateY(0.5em);
|
|
font-size: 0.75em;
|
|
font-weight: normal;
|
|
order: 3;
|
|
}
|
|
|
|
// add slash
|
|
&::before {
|
|
content: "";
|
|
display: block;
|
|
flex: 0 0 0.1em;
|
|
height: 2em;
|
|
margin: 0 0.1em;
|
|
background: currentColor;
|
|
transform: rotate(30deg);
|
|
order: 2;
|
|
}
|
|
}
|
|
|
|
&--label {
|
|
margin-left: $wcs-steps-spacing*2;
|
|
}
|
|
|
|
// If step is NOT current
|
|
&:not(.current) {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Horizontal Layout
|
|
// Sidebar on TOP, SMALL and more viewport
|
|
// Diplay all marker, but only current Label
|
|
@media ($mq-min--wcs-steps-horizontal-layout) {
|
|
|
|
.wcs-steps {
|
|
&--list {
|
|
position: relative;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
|
|
// keep space for label
|
|
margin-bottom: 2em;
|
|
}
|
|
}
|
|
|
|
.wcs-step {
|
|
margin-bottom: $wcs-steps-spacing;
|
|
margin-right: $wcs-steps-spacing*2;
|
|
border-bottom: $wcs-step-border-bottom;
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
|
|
&--label {
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
width: 100%;
|
|
padding-bottom: $wcs-steps-spacing;
|
|
text-align: left;
|
|
}
|
|
|
|
&.current {
|
|
border-bottom: $wcs-step-current-border-bottom;
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
@include desktop-horizontal-steps() {
|
|
.wcs-steps {
|
|
font-size: 1.25em;
|
|
&--list {
|
|
justify-content: center;
|
|
}
|
|
}
|
|
.wcs-step {
|
|
margin-bottom: $wcs-steps-spacing*3;
|
|
margin-right: $wcs-steps-spacing*3;
|
|
&--label {
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Vertical Steps
|
|
// Sidebar on LEFT or RIGHT, DESKTOP only
|
|
// Display All steps with marker and label. One below the other.
|
|
@include desktop-vertical-steps() {
|
|
.wcs-steps {
|
|
font-size: 1.25em;
|
|
|
|
// display even if only one step
|
|
&.steps-1 {
|
|
display: block;
|
|
}
|
|
|
|
&--list {
|
|
flex-wrap: nowrap;
|
|
flex-direction: column;
|
|
// remove keep space for label
|
|
padding-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.wcs-step {
|
|
margin-bottom: $wcs-steps-spacing;
|
|
|
|
@if $wcs-step-border-bottom != none {
|
|
padding-bottom: $wcs-steps-spacing;
|
|
}
|
|
@if ($wcs-step-background != transparent or $wcs-step-current-background != transparent) {
|
|
padding: $wcs-steps-spacing;
|
|
}
|
|
|
|
margin-right: 0;
|
|
|
|
&--label {
|
|
position: static;
|
|
font-size: 0.7em;
|
|
margin-left: $wcs-steps-spacing;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
// If step is NOT current
|
|
&:not(.current) & {
|
|
&--label {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// OPTION marker-background-type: gradient.
|
|
// Generate automatically a gradient based on background-color
|
|
@if $wcs-step-marker-background-type == gradient {
|
|
.wcs-step {
|
|
&--marker {
|
|
background-attachment: fixed;
|
|
@media (min-width: $very-small-limit + 1) {
|
|
background-image: linear-gradient(to right, lighten($wcs-step-marker-background, 10%), darken($wcs-step-marker-background, 10%));
|
|
}
|
|
|
|
@include desktop-vertical-steps() {
|
|
background-image: linear-gradient(to bottom, lighten($wcs-step_marker-background, 10%), darken($wcs-step_marker-background, 10%));
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// OPTION Pile Step Before
|
|
// Work only for
|
|
// * horizontal mode: desktop breakpoint and sidebar on left or right
|
|
// * with background-color on step
|
|
@if ($wsc-step-before-piled ) {
|
|
@include desktop-vertical-steps() {
|
|
.wcs-step {
|
|
&:not(:first-child) {
|
|
&.step-before,
|
|
&.current {
|
|
box-shadow: 0 -4px 4px -4px darken($wcs-step-background, 40%);
|
|
}
|
|
}
|
|
|
|
&.step-before,
|
|
&.current {
|
|
z-index: 1;
|
|
transition: margin 400ms, box-shadow 400ms;
|
|
}
|
|
|
|
&.step-before {
|
|
margin-bottom: calc( (#{$wcs-step-marker-size} + #{$wcs-steps-spacing * 2}) / 2 * -1);
|
|
|
|
&:hover {
|
|
margin-bottom: $wcs-steps-spacing;
|
|
|
|
& + .wcs-step {
|
|
box-shadow: 0 0 0 0 darken($wcs-step-background, 40%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// OPTION marker type DISC
|
|
@if (str-index('#{$wcs-step-marker-type}', 'disc')) {
|
|
.wcs-step {
|
|
&--marker {
|
|
border-radius: 50% !important;
|
|
|
|
@media ($mq-max--wcs-steps-small-layout) {
|
|
$size: $wcs-step-marker-size + 1.4;
|
|
width: $size;
|
|
height: $size;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// OPTION marker type TIED
|
|
@if (str-index('#{$wcs-step-marker-type}', 'tied')) {
|
|
|
|
.wcs-step {
|
|
&:not(:last-child) {
|
|
@media ($mq-min--wcs-steps-horizontal-layout) {
|
|
&::after {
|
|
content: "";
|
|
display: block;
|
|
height: $wcs-step-marker-tie-width;
|
|
flex: 0 0 calc(100% + #{$wcs-steps-spacing});
|
|
background-color: $wcs-step-marker-tie-color;
|
|
margin: auto;
|
|
}
|
|
}
|
|
|
|
@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;
|
|
}
|
|
}
|
|
}
|