CGM_Public/pretix_original
2
0
Fork 1
mirror of https://github.com/pretix/pretix.git synced 2026-05-06 15:24:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

Implement progress indicator during checkout (#677)

Browse Source 
* Implement progress indicator during checkout

* Do not extend bars to the edge

* Wording

* Add a bit more margin
This commit is contained in:
Raphael Michel
2017-11-16 21:24:55 +01:00
committed by GitHub
parent e4167380b9
commit d22427f578
7 changed files with 141 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
src/pretix/static/pretixpresale/scss/_checkout.scss Normal file
View File

@@ -0,0 +1,86 @@
.checkout-flow {
display: flex;
flex-direction: row;
margin: 15px 0 13px 0;
.checkout-step {
flex: 1;
text-align: center;
padding: 10px 0;
position: relative;
.checkout-step-icon {
border: 1px solid $text-muted;
display: inline-block;
width: 30px;
height: 30px;
line-height: 28px;
border-radius: 15px;
color: $text-muted;
z-index: 200;
background: white;
position: relative;
}
.checkout-step-label {
padding-top: 10px;
color: $text-muted;
}
.checkout-step-bar-left {
position: absolute;
top: 22px;
left: 0;
width: 50%;
height: 6px;
background: $gray-lighter;
z-index: 100;
}
.checkout-step-bar-right {
position: absolute;
top: 22px;
left: 50%;
width: 50%;
height: 6px;
background: $gray-lighter;
z-index: 100;
}
&.step-done .checkout-step-icon {
border: 1px solid $brand-success;
background: $brand-success;
color: white;
}
&.step-done .checkout-step-label {
color: $brand-success;
}
&.step-done .checkout-step-bar-left, &.step-done .checkout-step-bar-right {
background: $brand-success;
}
&.step-current .checkout-step-icon {
border: 1px solid darken($brand-info, 20%);
background: darken($brand-info, 20%);
color: white;
}
&.step-current .checkout-step-label {
color: darken($brand-info, 20%);
}
&.step-current .checkout-step-bar-left {
background: $brand-success;
}
&:last-child .checkout-step-bar-right,
&:first-child .checkout-step-bar-left {
background: transparent;
}
&:hover, &:active {
text-decoration: none;
}
}
}
@media(max-width: $screen-sm-max) {
.checkout-step-label {
display: none;
}
}

1
src/pretix/static/pretixpresale/scss/main.scss
View File

@@ -7,6 +7,7 @@
@import "_cart.scss";
@import "_forms.scss";
@import "_calendar.scss";
@import "_checkout.scss";
@import "../../pretixbase/scss/webfont.scss";
footer {