oocss3-shapes 0.0.1 → 0.0.2

data/stylesheets/oocss3-shapes/figures/_oval.scss

@@ -0,0 +1,6 @@
+@mixin oval {
+  .oval{
+    @extend .rectangle;
+    border-radius: 0.5em/0.25em;
+  }
+}

data/stylesheets/oocss3-shapes/figures/_rectangle.scss

@@ -0,0 +1,6 @@
+@mixin rectangle {
+  .rectangle {
+    @extend .shape;
+    height: 0.5em;
+  }
+}

data/stylesheets/oocss3-shapes/figures/_square.scss

@@ -0,0 +1,5 @@
+@mixin square {
+  .square {
+    @extend .shape;
+  }
+}

data/stylesheets/oocss3-shapes/figures/_trianguleBottomLeft.scss

@@ -0,0 +1,10 @@
+@mixin trianguleBottomLeft {
+  .trianguleBottomLeft {
+    @extend .base;
+    @extend .resetBorder;
+    border: { 
+      right: 1em solid transparent;
+      bottom: 1em solid #C55500;
+    }
+  }
+}

data/stylesheets/oocss3-shapes/figures/_trianguleBottomRight.scss

@@ -0,0 +1,10 @@
+@mixin trianguleBottomRight {
+  .trianguleBottomRight {
+    @extend .base;
+    @extend .resetBorder;
+    border: { 
+      left: 1em solid transparent;
+      bottom: 1em solid #C55500;
+    }
+  }
+}

data/stylesheets/oocss3-shapes/figures/_trianguleDown.scss

@@ -0,0 +1,9 @@
+@mixin trianguleDown {
+  .trianguleDown {
+   @extend .triangule;
+    border: { 
+      bottom: 0;
+      top: 1em solid #C55500;
+    }
+  }
+}

data/stylesheets/oocss3-shapes/figures/_trianguleLeft.scss

@@ -0,0 +1,10 @@
+@mixin trianguleLeft {
+  .trianguleLeft {
+    @extend .base;
+    @extend .triangule;
+    border: { 
+      right: 0;
+      left: 1em solid #C55500;
+    }
+  }
+}

data/stylesheets/oocss3-shapes/figures/_trianguleRight.scss

@@ -0,0 +1,10 @@
+@mixin trianguleRight {
+  .trianguleRight {
+    @extend .base;
+    @extend .triangule;
+    border: { 
+      left: 0;
+      right: 1em solid #C55500;
+    }
+  }
+}

data/stylesheets/oocss3-shapes/figures/_trianguleTopLeft.scss

@@ -0,0 +1,10 @@
+@mixin trianguleTopLeft {
+  .trianguleTopLeft {
+    @extend .base;
+    @extend .resetBorder;
+    border: { 
+      right: 1em solid transparent;
+      top: 1em solid #C55500;
+    }
+  }
+}

data/stylesheets/oocss3-shapes/figures/_trianguleTopRight.scss

@@ -0,0 +1,10 @@
+@mixin trianguleTopRight {
+  .trianguleTopRight {
+    @extend .base;
+    @extend .resetBorder;
+    border: { 
+      left: 1em solid transparent;
+      top: 1em solid #C55500;
+    }
+  }
+}

data/stylesheets/oocss3-shapes/figures/_trianguleUp.scss

@@ -0,0 +1,9 @@
+@mixin trianguleUp {
+  .trianguleUp {
+    @extend .triangule;
+    border: { 
+      top: 0;
+      bottom: 1em solid #C55500;
+    }
+  }
+}

data/stylesheets/oocss3-shapes/figures/circle.scss

@@ -0,0 +1,6 @@
+@mixin circle {
+  .circle {
+    @extend .shape;
+    @extend .rounded;  
+  }
+}

data/stylesheets/oocss3-shapes/mediacontrols/_base.scss

@@ -0,0 +1,13 @@
+@mixin playIcon {
+  .playIcon {
+    @extend .circle;
+    &:before {
+      @extend .pseudoElement;
+      @extend .trianguleLeft;
+      border-left-color: #fff;
+      font-size: 0.5em;
+      left: 0.64em;
+      top: 0.5em;
+    }
+  }
+}

data/stylesheets/oocss3-shapes/mediacontrols/_enlarge.scss

@@ -0,0 +1,15 @@
+// 
+// @TODO: Add docs to enlargeIcon!
+//
+@mixin enlargeIcon{
+	.enlargeIcon {
+		@extend .square;
+		&:before {
+			@extend .pseudoElement;
+			@extend .square;
+			background: #fff;
+			font-size: 0.5em;
+			margin: 0.1em;
+		}
+	}
+}

data/stylesheets/oocss3-shapes/mediacontrols/_expand.scss

@@ -0,0 +1,26 @@
+// 
+// @TODO: Add docs to expand!
+//
+@mixin expandIcon {
+	.expandIcon {
+		@extend .square;
+		background: #fff;
+		height: 0.8em;
+		width: 0.8em;
+		border: {
+			style: solid;
+			width: 0.1em 0 0 0.1em ;
+			color: #C55500;
+		};
+		&:before, 	&:after {
+			font-size: 0.25em;
+			@extend .pseudoElement;
+		}
+		&:before {
+			@extend .trianguleDown;
+		}
+		&:after {
+			//@extend .trianguleLeft;
+		}
+	}
+}

data/stylesheets/oocss3-shapes/mediacontrols/_fastFoward.scss

@@ -0,0 +1,13 @@
+@mixin fastFowardIcon {
+  .fastFoward {
+    @extend .base;
+    width: 2em;
+    &:before, &:after {
+      @extend .pseudoElement;
+      @extend .trianguleLeft;
+    }
+    &:after {
+      right: 0;
+    }
+  }
+}

data/stylesheets/oocss3-shapes/mediacontrols/_pause.scss

@@ -0,0 +1,13 @@
+@mixin pauseIcon {
+  .pauseIcon {
+    @extend .circle;
+    &:before {
+      @extend .pseudoElement;
+      @extend .pauseAltIcon;
+      font-size: 0.5em;
+      top: 0.55em;
+      left: 0.65em;
+      border-color:  #fff;
+    }    
+  }
+}

data/stylesheets/oocss3-shapes/mediacontrols/_pauseAlt.scss

@@ -0,0 +1,10 @@
+@mixin pauseAltIcon {
+  .pauseAltIcon {
+    @extend .base;
+    @extend .resetBorder;
+    width: 0.25em;
+    height: 1em;
+    border: solid #C55500;
+    border-width: 0 0.25em;
+  }
+}

data/stylesheets/oocss3-shapes/mediacontrols/_play.scss

@@ -0,0 +1,13 @@
+@mixin playIcon {
+  .playIcon {
+    @extend .circle;
+    &:before {
+      @extend .pseudoElement;
+      @extend .trianguleLeft;
+      border-left-color: #fff;
+      font-size: 0.5em;
+      left: 0.64em;
+      top: 0.5em;
+    }
+  }
+}

data/stylesheets/oocss3-shapes/mediacontrols/_popOut.scss

@@ -0,0 +1,19 @@
+// 
+// @TODO: Add docs to popOutIcon!
+//
+@mixin popOutIcon {
+  	.popOutIcon{
+		@extend .square;
+		background: #fff;
+		border: 1px solid #C55500;
+		font-size: 0.8em;
+		&:before{
+			@extend .pseudoElement;
+			@extend .square;
+			background: #fff;
+			border: 1px solid #C55500;
+			top: -0.2em;
+			left: 0.125em;
+		}
+	}
+}

data/stylesheets/oocss3-shapes/mediacontrols/_stop.scss

@@ -0,0 +1,13 @@
+@mixin stopIcon {
+  .stopIcon {
+    @extend .circle;
+    &:before {
+      @extend .pseudoElement;
+      @extend .square;
+      background: #fff;
+      font-size: 0.5em;
+      left: 0.52em;
+      top: 0.53em;
+    }
+  }
+}

data/stylesheets/oocss3-shapes/miscellaneous/_denied.scss

@@ -0,0 +1,19 @@
+@mixin deniedIcon {
+  .deniedIcon {
+    @extend .rounded;
+    @extend .shape;
+    background: transparent;
+    border: 0.15em solid #C55500;
+	height: 0.8em;
+	width: 0.8em;
+    &:before {
+      @extend .pseudoElement;
+      @extend .rotateLess45;
+      @extend .horizontalAlighment;
+      background: #C55500;
+      height: 0.15em;
+	  top: 0.3em;
+	  width: 0.93em;
+    }
+  }
+}

data/stylesheets/oocss3-shapes/miscellaneous/_help.scss

@@ -0,0 +1,13 @@
+@mixin helpIcon{
+  .helpIcon {
+    @extend .circle;
+    &:before {
+      color: #fff;
+      font-style: italic;
+      @extend .pseudoElement;
+      content: "?";
+      left: 0.25em;
+      top: 0.05em;
+    }
+  }
+}

data/stylesheets/oocss3-shapes/miscellaneous/_history.scss

@@ -0,0 +1,22 @@
+@mixin historyIcon {
+    .historyIcon {
+        @extend .circle;
+        background: #fff;
+        border: 0.1em solid #C55500;
+		height: 0.8em;
+		width: 0.8em;
+        &:before {
+            font-size: 0.5em;
+            @extend .pseudoElement;
+            height: 0.7em;
+            width: 0.7em;
+            right: 0.1em;
+            top: 0.1em;
+            border: {
+                style: solid;
+                color: #C55500;
+                width: 0 0 0.2em 0.2em;
+            }
+        }
+    }
+}

data/stylesheets/oocss3-shapes/miscellaneous/_info.scss

@@ -0,0 +1,13 @@
+@mixin infoIcon {
+  .infoIcon {
+    @extend .circle;
+    &:before {
+      color: #fff;
+      font-style: italic;
+      @extend .pseudoElement;
+      content: "i";
+      left: 0.35em;
+      top: 0.05em;
+    }
+  }
+}

data/stylesheets/oocss3-shapes/miscellaneous/_pieChart.scss

@@ -0,0 +1,19 @@
+@mixin pieChartIcon {
+  .pieChartIcon {
+    @extend .circle;
+    &:before {
+      @extend .pseudoElement;
+      @extend .square;
+      @include border-radius(0 100% 0 0);
+      background: #C55500;
+      font-size: 0.5em;
+      right: -0.05em;
+      top: -0.05em;
+      border: {
+        color: #fff;
+        style: solid;
+        width: 0 0 0.1em 0.1em;
+      }
+    }
+  }
+}

data/stylesheets/oocss3-shapes/miscellaneous/_power.scss

@@ -0,0 +1,18 @@
+@mixin powerIcon {
+	.powerIcon {
+		@extend .circle;
+	    background: #fff;
+	    border: 0.1em solid #C55500;
+		height: 0.8em;
+		width: 0.8em;
+		&:before {
+			@extend .pseudoElement;
+			@extend .horizontalAlighment;
+			background: #C55500;
+			border: 0.05em solid #FFFFFF;
+			height: 0.5em;
+			top: -0.3em;
+			width: 0.09em;
+		}
+	}
+}

data/stylesheets/oocss3-shapes/miscellaneous/_success.scss

@@ -0,0 +1,14 @@
+@mixin successIcon{
+  .successIcon {
+    @extend .circle;
+    background: white;
+    &:before {
+      font-size: 0.6em;
+	  border-color: #fff;
+      top: 0.25em;
+      @extend .pseudoElement;
+      @extend .successAltIcon;
+	  @extend .horizontalAlighment;
+    }
+  }
+}

data/stylesheets/oocss3-shapes/miscellaneous/_successAlt.scss

@@ -0,0 +1,14 @@
+@mixin successAltIcon{
+  .successAltIcon {
+    @extend .shape;
+    @extend .rotate45;
+    background: transparent;
+    width: 0.4em;
+    height: 0.8em;
+    border: {
+      style: solid;
+      color:  #ccc;
+      width: 0 0.2em 0.2em 0;
+    }
+  }
+}

data/stylesheets/oocss3-shapes/miscellaneous/_views.scss

@@ -0,0 +1,13 @@
+@mixin viewsIcon {
+  .viewsIcon {
+    @extend .square;
+    @extend .rotate45;
+    @include border-radius(100% 0);
+    &:before {
+        @extend .disk;
+        font-size: 0.5em;
+        left: 0.6em;
+        top: 0.6em;
+    }
+  }
+}

data/stylesheets/oocss3-shapes/miscellaneous/_warning.scss

@@ -0,0 +1,13 @@
+@mixin warningIcon {
+  .warningIcon {
+    @extend .trianguleUp;
+    border-bottom: 1em solid yellow;
+    &:before {
+      @extend .pseudoElement;
+      content: "!";
+	  font-size: 0.8em;
+	  left: -0.17em;
+	  top: 0.25em;
+    }
+  }
+}