use nesting for fragment styles

This commit is contained in:
Hakim El Hattab 2014-10-16 12:19:20 +02:00
parent a3a2ad039e
commit a61a372b52
2 changed files with 62 additions and 63 deletions

View File

@ -51,70 +51,67 @@ body {
visibility: hidden; visibility: hidden;
-webkit-transition: all 0.2s ease; -webkit-transition: all 0.2s ease;
transition: all 0.2s ease; } transition: all 0.2s ease; }
.reveal .slides section .fragment.visible {
.reveal .slides section .fragment.visible { opacity: 1;
opacity: 1; visibility: visible; }
visibility: visible; }
.reveal .slides section .fragment.grow { .reveal .slides section .fragment.grow {
opacity: 1; opacity: 1;
visibility: visible; } visibility: visible; }
.reveal .slides section .fragment.grow.visible {
.reveal .slides section .fragment.grow.visible { -webkit-transform: scale(1.3);
-webkit-transform: scale(1.3); -ms-transform: scale(1.3);
-ms-transform: scale(1.3); transform: scale(1.3); }
transform: scale(1.3); }
.reveal .slides section .fragment.shrink { .reveal .slides section .fragment.shrink {
opacity: 1; opacity: 1;
visibility: visible; } visibility: visible; }
.reveal .slides section .fragment.shrink.visible {
.reveal .slides section .fragment.shrink.visible { -webkit-transform: scale(0.7);
-webkit-transform: scale(0.7); -ms-transform: scale(0.7);
-ms-transform: scale(0.7); transform: scale(0.7); }
transform: scale(0.7); }
.reveal .slides section .fragment.zoom-in { .reveal .slides section .fragment.zoom-in {
-webkit-transform: scale(0.1); -webkit-transform: scale(0.1);
-ms-transform: scale(0.1); -ms-transform: scale(0.1);
transform: scale(0.1); } transform: scale(0.1); }
.reveal .slides section .fragment.zoom-in.visible {
.reveal .slides section .fragment.zoom-in.visible { -webkit-transform: scale(1);
-webkit-transform: scale(1); -ms-transform: scale(1);
-ms-transform: scale(1); transform: scale(1); }
transform: scale(1); }
.reveal .slides section .fragment.roll-in { .reveal .slides section .fragment.roll-in {
-webkit-transform: rotateX(90deg); -webkit-transform: rotateX(90deg);
transform: rotateX(90deg); } transform: rotateX(90deg); }
.reveal .slides section .fragment.roll-in.visible {
.reveal .slides section .fragment.roll-in.visible { -webkit-transform: rotateX(0);
-webkit-transform: rotateX(0); transform: rotateX(0); }
transform: rotateX(0); }
.reveal .slides section .fragment.fade-out { .reveal .slides section .fragment.fade-out {
opacity: 1; opacity: 1;
visibility: visible; } visibility: visible; }
.reveal .slides section .fragment.fade-out.visible {
.reveal .slides section .fragment.fade-out.visible { opacity: 0;
opacity: 0; visibility: hidden; }
visibility: hidden; }
.reveal .slides section .fragment.semi-fade-out { .reveal .slides section .fragment.semi-fade-out {
opacity: 1; opacity: 1;
visibility: visible; } visibility: visible; }
.reveal .slides section .fragment.semi-fade-out.visible {
opacity: 0.5;
visibility: visible; }
.reveal .slides section .fragment.semi-fade-out.visible { .reveal .slides section .fragment.strike {
opacity: 0.5; opacity: 1; }
visibility: visible; } .reveal .slides section .fragment.strike.visible {
text-decoration: line-through; }
.reveal .slides section .fragment.current-visible { .reveal .slides section .fragment.current-visible {
opacity: 0; opacity: 0;
visibility: hidden; } visibility: hidden; }
.reveal .slides section .fragment.current-visible.current-fragment {
.reveal .slides section .fragment.current-visible.current-fragment { opacity: 1;
opacity: 1; visibility: visible; }
visibility: visible; }
.reveal .slides section .fragment.highlight-red, .reveal .slides section .fragment.highlight-current-red, .reveal .slides section .fragment.highlight-green, .reveal .slides section .fragment.highlight-current-green, .reveal .slides section .fragment.highlight-blue, .reveal .slides section .fragment.highlight-current-blue { .reveal .slides section .fragment.highlight-red, .reveal .slides section .fragment.highlight-current-red, .reveal .slides section .fragment.highlight-green, .reveal .slides section .fragment.highlight-current-green, .reveal .slides section .fragment.highlight-blue, .reveal .slides section .fragment.highlight-current-blue {
opacity: 1; opacity: 1;
@ -138,12 +135,6 @@ body {
.reveal .slides section .fragment.highlight-current-blue.current-fragment { .reveal .slides section .fragment.highlight-current-blue.current-fragment {
color: #1b91ff; } color: #1b91ff; }
.reveal .slides section .fragment.strike {
opacity: 1; }
.reveal .slides section .fragment.strike.visible {
text-decoration: line-through; }
/********************************************* /*********************************************
* DEFAULT ELEMENT STYLES * DEFAULT ELEMENT STYLES
*********************************************/ *********************************************/

View File

@ -78,69 +78,84 @@ body {
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
transition: all .2s ease; transition: all .2s ease;
}
.reveal .slides section .fragment.visible { &.visible {
opacity: 1; opacity: 1;
visibility: visible; visibility: visible;
} }
}
.reveal .slides section .fragment.grow { .reveal .slides section .fragment.grow {
opacity: 1; opacity: 1;
visibility: visible; visibility: visible;
}
.reveal .slides section .fragment.grow.visible { &.visible {
transform: scale( 1.3 ); transform: scale( 1.3 );
} }
}
.reveal .slides section .fragment.shrink { .reveal .slides section .fragment.shrink {
opacity: 1; opacity: 1;
visibility: visible; visibility: visible;
}
.reveal .slides section .fragment.shrink.visible { &.visible {
transform: scale( 0.7 ); transform: scale( 0.7 );
} }
}
.reveal .slides section .fragment.zoom-in { .reveal .slides section .fragment.zoom-in {
transform: scale( 0.1 ); transform: scale( 0.1 );
}
.reveal .slides section .fragment.zoom-in.visible { &.visible {
transform: scale( 1 ); transform: scale( 1 );
} }
}
.reveal .slides section .fragment.roll-in { .reveal .slides section .fragment.roll-in {
transform: rotateX( 90deg ); transform: rotateX( 90deg );
}
.reveal .slides section .fragment.roll-in.visible { &.visible {
transform: rotateX( 0 ); transform: rotateX( 0 );
} }
}
.reveal .slides section .fragment.fade-out { .reveal .slides section .fragment.fade-out {
opacity: 1; opacity: 1;
visibility: visible; visibility: visible;
}
.reveal .slides section .fragment.fade-out.visible { &.visible {
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
} }
}
.reveal .slides section .fragment.semi-fade-out { .reveal .slides section .fragment.semi-fade-out {
opacity: 1; opacity: 1;
visibility: visible; visibility: visible;
}
.reveal .slides section .fragment.semi-fade-out.visible { &.visible {
opacity: 0.5; opacity: 0.5;
visibility: visible; visibility: visible;
} }
}
.reveal .slides section .fragment.strike {
opacity: 1;
&.visible {
text-decoration: line-through;
}
}
.reveal .slides section .fragment.current-visible { .reveal .slides section .fragment.current-visible {
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
}
.reveal .slides section .fragment.current-visible.current-fragment { &.current-fragment {
opacity: 1; opacity: 1;
visibility: visible; visibility: visible;
} }
}
.reveal .slides section .fragment.highlight-red, .reveal .slides section .fragment.highlight-red,
.reveal .slides section .fragment.highlight-current-red, .reveal .slides section .fragment.highlight-current-red,
@ -171,13 +186,6 @@ body {
color: #1b91ff; color: #1b91ff;
} }
.reveal .slides section .fragment.strike {
opacity: 1;
}
.reveal .slides section .fragment.strike.visible {
text-decoration: line-through;
}
/********************************************* /*********************************************
* DEFAULT ELEMENT STYLES * DEFAULT ELEMENT STYLES