forked from CGM_Public/pretix_original
A11y improvements (#2081)
Co-authored-by: Raphael Michel <michel@rami.io> Co-authored-by: Raphael Michel <mail@raphaelmichel.de>
This commit is contained in:
committed by
GitHub
parent
cc13ca1c3f
commit
3dcfa57b70
@@ -2,6 +2,7 @@
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin: 15px 0 13px 0;
|
||||
list-style: none;
|
||||
|
||||
.checkout-step {
|
||||
flex: 1;
|
||||
@@ -26,8 +27,13 @@
|
||||
padding-top: 10px;
|
||||
color: $text-muted;
|
||||
}
|
||||
a .checkout-step-label {
|
||||
color: $brand-primary;
|
||||
}
|
||||
|
||||
.checkout-step-bar-left {
|
||||
&:before, &:after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: 0;
|
||||
@@ -36,14 +42,15 @@
|
||||
background: $gray-lighter;
|
||||
z-index: 100;
|
||||
}
|
||||
.checkout-step-bar-right {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
&:after {
|
||||
left: 50%;
|
||||
width: 50%;
|
||||
height: 6px;
|
||||
background: $gray-lighter;
|
||||
z-index: 100;
|
||||
}
|
||||
&.step-done:before, &.step-done:after, &.step-current:before {
|
||||
background: $brand-primary;
|
||||
}
|
||||
&:last-child:after,
|
||||
&:first-child:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.step-done .checkout-step-icon {
|
||||
@@ -51,12 +58,9 @@
|
||||
background: $brand-primary;
|
||||
color: white;
|
||||
}
|
||||
&.step-done .checkout-step-label {
|
||||
&.step-done .checkout-step-label a {
|
||||
color: $brand-primary;
|
||||
}
|
||||
&.step-done .checkout-step-bar-left, &.step-done .checkout-step-bar-right {
|
||||
background: $brand-primary;
|
||||
}
|
||||
|
||||
&.step-current .checkout-step-icon {
|
||||
border: 1px solid $brand-primary;
|
||||
@@ -66,25 +70,26 @@
|
||||
&.step-current .checkout-step-label {
|
||||
color: $brand-primary;
|
||||
}
|
||||
&.step-current .checkout-step-bar-left {
|
||||
background: $brand-primary;
|
||||
}
|
||||
&:last-child .checkout-step-bar-right,
|
||||
&:first-child .checkout-step-bar-left {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&:hover, &:active {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
a {
|
||||
outline: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
@media(max-width: $screen-sm-max) {
|
||||
.checkout-step-label {
|
||||
display: none;
|
||||
/* visually hide, but keep for screen-readers */
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user