diff options
Diffstat (limited to 'app/assets/sass/_plan.scss')
-rw-r--r-- | app/assets/sass/_plan.scss | 121 |
1 files changed, 121 insertions, 0 deletions
diff --git a/app/assets/sass/_plan.scss b/app/assets/sass/_plan.scss new file mode 100644 index 0000000..7b8808d --- /dev/null +++ b/app/assets/sass/_plan.scss @@ -0,0 +1,121 @@ +$connector-height: 12px; +$connector-line: 2px solid darken($line-color, 10%); + +.plan { + padding-bottom: $padding-lg * 3; + overflow: auto; + height: 100%; + width: 100%; + + ul { + display: flex; + padding-top: $connector-height; + position: relative; + margin: auto; + transition: all 0.5s; + margin-top: -5px; + + // vertical connector + ul::before { + content: ''; + position: absolute; top: 0; left: 50%; + border-left: $connector-line; + height: $connector-height; + width: 0; + } + + li { + float: left; text-align: center; + list-style-type: none; + position: relative; + padding: $connector-height $padding-sm 0 $padding-sm; + transition: all 0.5s; + + // connectors + &:before, &:after { + content: ''; + position: absolute; top: 0; right: 50%; + border-top: $connector-line; + width: 50%; height: $connector-height; + } + + &:after { + right: auto; left: 50%; + border-left: $connector-line; + } + + &:only-child { + padding-top: 0; + &:after, &:before { + display: none; + } + } + + &:first-child::before, &:last-child::after { + border: 0 none; + } + + &:last-child::before { + border-right: $connector-line; + border-radius: 0 $border-radius-lg 0 0; + } + + &:first-child::after { + border-radius: $border-radius-lg 0 0 0; + } + + //hovers + .plan-node:hover+ul::before { + border-color: $highlight-color; + } + + .plan-node:hover+ul li::after, + .plan-node:hover+ul li::before, + .plan-node:hover+ul ul::before{ + border-color: $highlight-color-dark; + } + } + } +} + +.plan-stats { + display: flex; + font-size: $font-size-base; + margin: 0 auto $padding-lg auto; + padding-bottom: $padding-lg; + border-bottom: 1px solid $line-color; + border-radius: $border-radius-lg*2; + width: 650px; + position: relative; + + div { + padding-right: $padding-lg; + flex-grow: 1; + } + + .stat-value { + display: block; + text-align: center; + font-size: $font-size-lg; + } + + .stat-label { + display: block; + text-align: center; + font-size: $font-size-sm; + } + + $triangle-size: 9px; + &:after { + content:''; + position: absolute; + top: 100%; + left: 50%; + margin-left: $triangle-size*-1; + width: 0; + height: 0; + border-top: solid $triangle-size $line-color; + border-left: solid $triangle-size transparent; + border-right: solid $triangle-size transparent; + } +} |