From a61a372b5215fbdf1fa3bab5a4c21ca511bfbe07 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Thu, 16 Oct 2014 12:19:20 +0200 Subject: [PATCH] use nesting for fragment styles --- css/reveal.css | 71 +++++++++++++++++++++---------------------------- css/reveal.scss | 54 +++++++++++++++++++++---------------- 2 files changed, 62 insertions(+), 63 deletions(-) diff --git a/css/reveal.css b/css/reveal.css index beb244e4..ed380abc 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -51,70 +51,67 @@ body { visibility: hidden; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } - -.reveal .slides section .fragment.visible { - opacity: 1; - visibility: visible; } + .reveal .slides section .fragment.visible { + opacity: 1; + visibility: visible; } .reveal .slides section .fragment.grow { opacity: 1; visibility: visible; } - -.reveal .slides section .fragment.grow.visible { - -webkit-transform: scale(1.3); - -ms-transform: scale(1.3); - transform: scale(1.3); } + .reveal .slides section .fragment.grow.visible { + -webkit-transform: scale(1.3); + -ms-transform: scale(1.3); + transform: scale(1.3); } .reveal .slides section .fragment.shrink { opacity: 1; visibility: visible; } - -.reveal .slides section .fragment.shrink.visible { - -webkit-transform: scale(0.7); - -ms-transform: scale(0.7); - transform: scale(0.7); } + .reveal .slides section .fragment.shrink.visible { + -webkit-transform: scale(0.7); + -ms-transform: scale(0.7); + transform: scale(0.7); } .reveal .slides section .fragment.zoom-in { -webkit-transform: scale(0.1); -ms-transform: scale(0.1); transform: scale(0.1); } - -.reveal .slides section .fragment.zoom-in.visible { - -webkit-transform: scale(1); - -ms-transform: scale(1); - transform: scale(1); } + .reveal .slides section .fragment.zoom-in.visible { + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); } .reveal .slides section .fragment.roll-in { -webkit-transform: rotateX(90deg); transform: rotateX(90deg); } - -.reveal .slides section .fragment.roll-in.visible { - -webkit-transform: rotateX(0); - transform: rotateX(0); } + .reveal .slides section .fragment.roll-in.visible { + -webkit-transform: rotateX(0); + transform: rotateX(0); } .reveal .slides section .fragment.fade-out { opacity: 1; visibility: visible; } - -.reveal .slides section .fragment.fade-out.visible { - opacity: 0; - visibility: hidden; } + .reveal .slides section .fragment.fade-out.visible { + opacity: 0; + visibility: hidden; } .reveal .slides section .fragment.semi-fade-out { opacity: 1; visibility: visible; } + .reveal .slides section .fragment.semi-fade-out.visible { + opacity: 0.5; + visibility: visible; } -.reveal .slides section .fragment.semi-fade-out.visible { - opacity: 0.5; - visibility: visible; } +.reveal .slides section .fragment.strike { + opacity: 1; } + .reveal .slides section .fragment.strike.visible { + text-decoration: line-through; } .reveal .slides section .fragment.current-visible { opacity: 0; visibility: hidden; } - -.reveal .slides section .fragment.current-visible.current-fragment { - opacity: 1; - visibility: visible; } + .reveal .slides section .fragment.current-visible.current-fragment { + opacity: 1; + 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 { opacity: 1; @@ -138,12 +135,6 @@ body { .reveal .slides section .fragment.highlight-current-blue.current-fragment { color: #1b91ff; } -.reveal .slides section .fragment.strike { - opacity: 1; } - -.reveal .slides section .fragment.strike.visible { - text-decoration: line-through; } - /********************************************* * DEFAULT ELEMENT STYLES *********************************************/ diff --git a/css/reveal.scss b/css/reveal.scss index 0d1fb823..b07643b1 100644 --- a/css/reveal.scss +++ b/css/reveal.scss @@ -78,69 +78,84 @@ body { opacity: 0; visibility: hidden; transition: all .2s ease; -} - .reveal .slides section .fragment.visible { + + &.visible { opacity: 1; visibility: visible; } +} .reveal .slides section .fragment.grow { opacity: 1; visibility: visible; -} - .reveal .slides section .fragment.grow.visible { + + &.visible { transform: scale( 1.3 ); } +} .reveal .slides section .fragment.shrink { opacity: 1; visibility: visible; -} - .reveal .slides section .fragment.shrink.visible { + + &.visible { transform: scale( 0.7 ); } +} .reveal .slides section .fragment.zoom-in { transform: scale( 0.1 ); -} - .reveal .slides section .fragment.zoom-in.visible { + &.visible { transform: scale( 1 ); } +} .reveal .slides section .fragment.roll-in { transform: rotateX( 90deg ); -} - .reveal .slides section .fragment.roll-in.visible { + + &.visible { transform: rotateX( 0 ); } +} .reveal .slides section .fragment.fade-out { opacity: 1; visibility: visible; -} - .reveal .slides section .fragment.fade-out.visible { + + &.visible { opacity: 0; visibility: hidden; } +} .reveal .slides section .fragment.semi-fade-out { opacity: 1; visibility: visible; -} - .reveal .slides section .fragment.semi-fade-out.visible { + + &.visible { opacity: 0.5; visibility: visible; } +} + +.reveal .slides section .fragment.strike { + opacity: 1; + + &.visible { + text-decoration: line-through; + } +} .reveal .slides section .fragment.current-visible { opacity: 0; visibility: hidden; -} - .reveal .slides section .fragment.current-visible.current-fragment { + + &.current-fragment { opacity: 1; visibility: visible; } +} .reveal .slides section .fragment.highlight-red, .reveal .slides section .fragment.highlight-current-red, @@ -171,13 +186,6 @@ body { color: #1b91ff; } -.reveal .slides section .fragment.strike { - opacity: 1; -} - .reveal .slides section .fragment.strike.visible { - text-decoration: line-through; - } - /********************************************* * DEFAULT ELEMENT STYLES