Added numbers to tour examples

This commit is contained in:
ポール ウェッブ 2018-08-24 14:58:07 -05:00
parent ee9535a8b1
commit 7f442d777f
3 changed files with 21 additions and 2 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -36,6 +36,7 @@
* @class .tour__sidebar * @class .tour__sidebar
* *
* @class .tour__sidebar__example * @class .tour__sidebar__example
* @selector {::before}
* @selector {:last-of-type} * @selector {:last-of-type}
* @state {.active} * @state {.active}
* @state {:hover} * @state {:hover}
@ -53,12 +54,27 @@
.tour__sidebar__example { .tour__sidebar__example {
cursor: pointer; cursor: pointer;
position: relative;
&::before {
width: 1rem; height: 1rem;
top: 0.5rem; left: 0;
border: 1px solid;
border-radius: 50%;
content: attr(data-example);
font-size: 0.8rem;
line-height: 1.1;
position: absolute;
text-align: center;
}
&:not(:last-of-type) { &:not(:last-of-type) {
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
&:not(.active) { &:not(.active) {
&::before,
button, button,
span { span {
color: rgba($black, 0.3); color: rgba($black, 0.3);
@ -71,11 +87,13 @@
color: $teal; color: $teal;
} }
&::before,
span { span {
color: $black; color: $black;
} }
} }
&::before,
button, button,
span { span {
transition: color 0.2s; transition: color 0.2s;
@ -85,6 +103,7 @@
background-color: transparent; background-color: transparent;
font-size: 1.25rem; font-size: 1.25rem;
font-weight: 600; font-weight: 600;
padding-left: 1.3rem;
} }
span { span {