diff options
author | Hakim El Hattab <hakim.elhattab@gmail.com> | 2017-05-17 14:44:49 +0200 |
---|---|---|
committer | Hakim El Hattab <hakim.elhattab@gmail.com> | 2017-05-17 14:45:01 +0200 |
commit | b784bd56d1e72044cff89c9b7da15fa73b089055 (patch) | |
tree | 1126d70186c8b23c2dc8716db6d00c43edc13c19 | |
parent | 13733edaa8a3052f0f54b8c165a665f511674db6 (diff) | |
download | fosdem-2018-presentation-b784bd56d1e72044cff89c9b7da15fa73b089055.tar fosdem-2018-presentation-b784bd56d1e72044cff89c9b7da15fa73b089055.tar.gz |
more flexible control size using em
-rw-r--r-- | css/reveal.css | 65 | ||||
-rw-r--r-- | css/reveal.scss | 32 |
2 files changed, 47 insertions, 50 deletions
diff --git a/css/reveal.css b/css/reveal.css index bb56205..800d1bd 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -240,7 +240,8 @@ body { left: auto; z-index: 1; color: #fff; - pointer-events: none; } + pointer-events: none; + font-size: 10px; } .reveal .controls button { position: absolute; padding: 0; @@ -255,6 +256,7 @@ body { transition: color 0.2s ease, opacity 0.2s ease, transform 0.2s ease; z-index: 2; pointer-events: auto; + font-size: inherit; visibility: hidden; opacity: 0; -webkit-appearance: none; @@ -265,71 +267,68 @@ body { position: absolute; top: 0; left: 0; - width: 32px; - height: 6px; - border-radius: 3px; + width: 2.6em; + height: 0.5em; + border-radius: 0.25em; background-color: currentColor; transition: all 0.15s ease, background-color 0.8s ease; - -webkit-transform-origin: 3px 50%; - transform-origin: 3px 50%; + -webkit-transform-origin: 0.25em 50%; + transform-origin: 0.25em 50%; will-change: transform; } .reveal .controls .pagination-arrow { position: relative; - width: 46px; - height: 46px; } + width: 3.6em; + height: 3.6em; } .reveal .controls .pagination-arrow:before { - -webkit-transform: translateX(7px) translateY(20px) rotate(44deg); - transform: translateX(7px) translateY(20px) rotate(44deg); } + -webkit-transform: translateX(0.5em) translateY(1.55em) rotate(45deg); + transform: translateX(0.5em) translateY(1.55em) rotate(45deg); } .reveal .controls .pagination-arrow:after { - -webkit-transform: translateX(7px) translateY(20px) rotate(-44deg); - transform: translateX(7px) translateY(20px) rotate(-44deg); } + -webkit-transform: translateX(0.5em) translateY(1.55em) rotate(-45deg); + transform: translateX(0.5em) translateY(1.55em) rotate(-45deg); } .reveal .controls .pagination-arrow:hover:before { - -webkit-transform: translateX(7px) translateY(20px) rotate(40deg); - transform: translateX(7px) translateY(20px) rotate(40deg); } + -webkit-transform: translateX(0.5em) translateY(1.55em) rotate(40deg); + transform: translateX(0.5em) translateY(1.55em) rotate(40deg); } .reveal .controls .pagination-arrow:hover:after { - -webkit-transform: translateX(7px) translateY(20px) rotate(-40deg); - transform: translateX(7px) translateY(20px) rotate(-40deg); } + -webkit-transform: translateX(0.5em) translateY(1.55em) rotate(-40deg); + transform: translateX(0.5em) translateY(1.55em) rotate(-40deg); } .reveal .controls .pagination-arrow:active:before { - -webkit-transform: translateX(7px) translateY(20px) rotate(36deg); - transform: translateX(7px) translateY(20px) rotate(36deg); } + -webkit-transform: translateX(0.5em) translateY(1.55em) rotate(36deg); + transform: translateX(0.5em) translateY(1.55em) rotate(36deg); } .reveal .controls .pagination-arrow:active:after { - -webkit-transform: translateX(7px) translateY(20px) rotate(-36deg); - transform: translateX(7px) translateY(20px) rotate(-36deg); } + -webkit-transform: translateX(0.5em) translateY(1.55em) rotate(-36deg); + transform: translateX(0.5em) translateY(1.55em) rotate(-36deg); } .reveal .controls .navigate-left { - right: 82px; - bottom: 18px; + right: 6.4em; + bottom: 3.2em; -webkit-transform: translateX(-10px); transform: translateX(-10px); } - .reveal .controls .navigate-left .pagination-arrow { - -webkit-transform: translateY(-50%); - transform: translateY(-50%); } .reveal .controls .navigate-right { right: 0; - bottom: 18px; + bottom: 3.2em; -webkit-transform: translateX(10px); transform: translateX(10px); } .reveal .controls .navigate-right .pagination-arrow { - -webkit-transform: translateY(-50%) rotate(180deg); - transform: translateY(-50%) rotate(180deg); } + -webkit-transform: rotate(180deg); + transform: rotate(180deg); } .reveal .controls .navigate-right.highlight { -webkit-animation: bounce-right 2s 50 both ease-out; animation: bounce-right 2s 50 both ease-out; } .reveal .controls .navigate-up { - right: 18px; - bottom: 82px; + right: 1.4em; + bottom: 6.4em; -webkit-transform: translateY(-10px); transform: translateY(-10px); } .reveal .controls .navigate-up .pagination-arrow { -webkit-transform: translateX(-50%) rotate(90deg); transform: translateX(-50%) rotate(90deg); } .reveal .controls .navigate-down { - right: 18px; + right: 3.2em; bottom: 0; -webkit-transform: translateY(10px); transform: translateY(10px); } .reveal .controls .navigate-down .pagination-arrow { - -webkit-transform: translateX(-50%) rotate(-90deg); - transform: translateX(-50%) rotate(-90deg); } + -webkit-transform: rotate(-90deg); + transform: rotate(-90deg); } .reveal .controls .navigate-down.highlight { -webkit-animation: bounce-down 2s 50 both ease-out; animation: bounce-down 2s 50 both ease-out; } diff --git a/css/reveal.scss b/css/reveal.scss index a5e9560..9c80a22 100644 --- a/css/reveal.scss +++ b/css/reveal.scss @@ -248,14 +248,14 @@ body { } .reveal .controls { - $size: 46px; - $length: floor($size * 0.7); - $thickness: 6px; - $angle: 44deg; + $size: 3.6em; + $length: 2.6em; + $thickness: 0.5em; + $angle: 45deg; $angleHover: 40deg; $angleActive: 36deg; $spacing: 12px; - $innerSpacing: 18px; + $innerSpacing: 1.4em; @mixin arrowTransform( $angle ) { &:before { @@ -276,6 +276,7 @@ body { z-index: 1; color: #fff; pointer-events: none; + font-size: 10px; button { position: absolute; @@ -291,6 +292,7 @@ body { transform 0.2s ease; z-index: 2; // above slides pointer-events: auto; + font-size: inherit; visibility: hidden; opacity: 0; @@ -333,21 +335,17 @@ body { .navigate-left { right: $size + $innerSpacing*2; - bottom: $innerSpacing; + bottom: $innerSpacing + $size/2; transform: translateX( -10px ); - - .pagination-arrow { - transform: translateY(-50%); - } } .navigate-right { right: 0; - bottom: $innerSpacing; + bottom: $innerSpacing + $size/2; transform: translateX( 10px ); .pagination-arrow { - transform: translateY(-50%) rotate( 180deg ); + transform: rotate( 180deg ); } &.highlight { @@ -357,7 +355,7 @@ body { .navigate-up { right: $innerSpacing; - bottom: $size + $innerSpacing*2; + bottom: $innerSpacing*2 + $size; transform: translateY( -10px ); .pagination-arrow { @@ -366,12 +364,12 @@ body { } .navigate-down { - right: $innerSpacing; + right: $innerSpacing + $size/2; bottom: 0; transform: translateY( 10px ); .pagination-arrow { - transform: translateX(-50%) rotate( -90deg ); + transform: rotate( -90deg ); } &.highlight { @@ -380,7 +378,7 @@ body { } // Back arrow style: "faded": - // Strongly deemphasizes backwards navigation in favor of drawing + // Deemphasize backwards navigation arrows in favor of drawing // attention to forwards navigation &[data-controls-back-arrows="faded"] .navigate-left.enabled, &[data-controls-back-arrows="faded"] .navigate-up.enabled { @@ -392,7 +390,7 @@ body { } // Back arrow style: "hidden": - // Never shows any arrows for backwards navigation + // Never show arrows for backwards navigation &[data-controls-back-arrows="hidden"] .navigate-left.enabled, &[data-controls-back-arrows="hidden"] .navigate-up.enabled { opacity: 0; |