.ld-ext-right, .ld-ext-left, .ld-ext-bottom, .ld-ext-top, .ld-over, .ld-over-inverse, .ld-over-full, .ld-over-full-inverse { position: relative; transition: all 0.3s; transition-timing-function: ease-in; } .ld-ext-right > .ld, .ld-ext-left > .ld, .ld-ext-bottom > .ld, .ld-ext-top > .ld, .ld-over > .ld, .ld-over-inverse > .ld, .ld-over-full > .ld, .ld-over-full-inverse > .ld { position: absolute; top: 50%; left: 50%; width: 1em; height: 1em; margin: -0.5em; opacity: 0; z-index: -1; transition: all 0.3s; transition-timing-function: ease-in; } .ld-ext-right > .ld > *, .ld-ext-left > .ld > *, .ld-ext-bottom > .ld > *, .ld-ext-top > .ld > *, .ld-over > .ld > *, .ld-over-inverse > .ld > *, .ld-over-full > .ld > *, .ld-over-full-inverse > .ld > * { width: 1em; height: 1em; position: absolute; top: 50%; left: 50%; transform: translate(-0.5em, -0.5em); } .ld-ext-right.running > .ld, .ld-ext-left.running > .ld, .ld-ext-bottom.running > .ld, .ld-ext-top.running > .ld, .ld-over.running > .ld, .ld-over-inverse.running > .ld, .ld-over-full.running > .ld, .ld-over-full-inverse.running > .ld { opacity: 1; z-index: auto; visibility: visible; } .ld-ext-right.running { padding-right: 2.5em !important; } .ld-ext-right > .ld { top: 50%; left: auto; right: 1.25em; } .ld-ext-left.running { padding-left: 2.5em !important; } .ld-ext-left > .ld { top: 50%; right: auto; left: 1.25em; } .ld-ext-bottom.running { padding-bottom: 2.5em !important; } .ld-ext-bottom > .ld { top: auto; left: 50%; bottom: 1.25em; } .ld-ext-top.running { padding-top: 2.5em !important; } .ld-ext-top > .ld { bottom: auto; left: 50%; top: 1.25em; } .ld-over:before, .ld-over-inverse:before, .ld-over-full:before, .ld-over-full-inverse:before { content: " "; display: block; opacity: 0; position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; transition: all 0.3s; transition-timing-function: ease-in; background: rgba(240, 240, 240, 0.8); } .ld-over.running > .ld, .ld-over-inverse.running > .ld, .ld-over-full.running > .ld, .ld-over-full-inverse.running > .ld { z-index: 4001; } .ld-over.running:before, .ld-over-inverse.running:before, .ld-over-full.running:before, .ld-over-full-inverse.running:before { opacity: 1; z-index: 4000; display: block; } .ld-over-full.running > .ld, .ld-over-full-inverse.running > .ld, .ld-over-full.running:before, .ld-over-full-inverse.running:before { position: fixed; } .ld-over-full > .ld { color: rgba(0, 0, 0, 0.8); } .ld-over-full:before, .ld-over-full-inverse:before { background: rgba(255, 255, 255, 0.8); } .ld-over-inverse > .ld { color: rgba(255, 255, 255, 0.8); } .ld-over-inverse:before { background: rgba(0, 0, 0, 0.6); } .ld-over-full-inverse > .ld { color: rgba(255, 255, 255, 0.8); } .ld-over-full-inverse:before { background: rgba(0, 0, 0, 0.6); }