Browse Source

use nesting for fragment styles

Hakim El Hattab 10 years ago
parent
commit
a61a372b52
2 changed files with 62 additions and 63 deletions
  1. 31 40
      css/reveal.css
  2. 31 23
      css/reveal.scss

+ 31 - 40
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
  *********************************************/

+ 31 - 23
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