/* Tourbus leg definitions element */ .tourbus-legs { display: none; } /* Container for tourbus leg */ .tourbus-leg { position: absolute; visibility: hidden; top: 0; border: 1px solid #E5E5E5; box-shadow: 0 0 2px rgba( 0, 0, 0, 0.15 ); border-radius: 2px; background: white; } /* Interior of leg, clearfixed */ .tourbus-leg-inner { padding: 20px; position: relative; zoom: 1; &:before, &:after { content: "\0020"; display: block; height: 0; overflow: hidden; } &:after { clear: both; } } /* remove top padding/margin on headings because the interior of the leg has padding */ .tourbus-leg { h1, h2, h3, h4, h5, h6 { margin-top: 0; padding-top: 0; } } /* Tourbus leg arrow */ .tourbus-arrow { &:before, &:after { border: solid rgba( 0, 0, 0, 0 ); content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: transparent; } } /* set the :after to be the _interior_ size of the arrow */ /* set the :before to be the _interior + desired border width_ */ @inner: 14px; @outer: 16px; .tourbus-arrow:after { border-width: @inner; } .tourbus-arrow:before { border-width: @outer; } /* Arrow background and border colors */ @bg: #FFF; @border: #E5E5E5; /* change margin-top/left values here to match the border width for :after above border colors here are for the _interior_ of the arrow */ .tourbus-arrow-right:after { border-right-color: @bg; margin-top: -@inner; top: 50%; } .tourbus-arrow-left:after { border-left-color: @bg; margin-top: -@inner; top: 50%; } .tourbus-arrow-bottom:after { border-bottom-color: @bg; margin-left: -@inner; left: 50%; } .tourbus-arrow-top:after { border-top-color: @bg; margin-left: -@inner; left: 50%; } /* change margin-top/left values here to match the border width for :before above border colors here are for the _border_ of the arrow */ .tourbus-arrow-right:before { border-right-color: @border; margin-top: -@outer; top: 50%; } .tourbus-arrow-left:before { border-left-color: @border; margin-top: -@outer; top: 50%; } .tourbus-arrow-bottom:before { border-bottom-color: @border; margin-left: -@outer; left: 50%; } .tourbus-arrow-top:before { border-top-color: @border; margin-left: -@outer; left: 50%; } /* you shouldn't need to change these */ .tourbus-arrow-right { &:after, &:before { right: 100%; } } .tourbus-arrow-left { &:after, &:before { left: 100%; } } .tourbus-arrow-bottom { &:after, &:before { bottom: 100%; } } .tourbus-arrow-top { &:after, &:before { top: 100%; } }