diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/steps.less | 70 | ||||
| -rw-r--r-- | src/tooltips.less | 1 | ||||
| -rw-r--r-- | src/utilities.less | 13 |
3 files changed, 83 insertions, 1 deletions
diff --git a/src/steps.less b/src/steps.less new file mode 100644 index 0000000..ef46249 --- /dev/null +++ b/src/steps.less @@ -0,0 +1,70 @@ +// Steps +.step { + display: flex; + flex-wrap: nowrap; + list-style: none; + margin: .5rem 0; + width: 100%; + + .step-item { + flex: 1 1 0; + margin-top: 0; + min-height: 2rem; + text-align: center; + position: relative; + + &:not(:first-child)::before { + background: @core-color; + content: ""; + height: .4rem; + left: -50%; + position: absolute; + top: .8rem; + width: 100%; + } + + a { + color: @core-meta-color; + display: inline-block; + padding: 2rem 1rem 0; + text-decoration: none; + + &::before { + background: @core-color; + border: .2rem solid @core-light-color; + border-radius: 50%; + content: ""; + display: block; + height: 1.4rem; + left: 50%; + position: absolute; + top: .3rem; + transform: translateX(-50%); + width: 1.4rem; + z-index: 99; + } + } + + &.active { + a { + &::before { + background: @core-light-color; + border: .4rem solid @core-color; + } + } + + & ~ .step-item { + &::before { + background: @core-border-color; + } + + a { + + &::before { + background: @control-color; + } + } + } + } + } +} diff --git a/src/tooltips.less b/src/tooltips.less index 80468ac..f11ed26 100644 --- a/src/tooltips.less +++ b/src/tooltips.less @@ -20,6 +20,7 @@ text-overflow: ellipsis; transform: translate(-50%, 0); transition: all .216s ease; + white-space: nowrap; z-index: 99; } &:focus, diff --git a/src/utilities.less b/src/utilities.less index 916ca51..336a210 100644 --- a/src/utilities.less +++ b/src/utilities.less @@ -135,9 +135,20 @@ background: transparent; border: 0; color: transparent; - font: 0/0 a; + font-size: 0; + line-height: 0; text-shadow: none; } +.text-assistive { + border: 0; + clip: rect(0,0,0,0); + height: .1rem; + margin: -.1rem; + overflow: hidden; + padding: 0; + position: absolute; + width: .1rem; +} // Text .text-left { text-align: left; |