more flexible control size using em
This commit is contained in:
Hakim El Hattab
parent
13733edaa8
commit
b784bd56d1
2 changed files with 47 additions and 50 deletions
|
|
@ -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; }
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in a new issue