oocss3-shapes 0.0.1 → 0.0.2

data/stylesheets/_oocss3-shapes.scss

@@ -0,0 +1,14 @@
+// This is your framework's main stylesheet. Use it to import all default modules.
+@import "compass/css3";
+@import "compass/css3/transform";
+
+@import "oocss3-shapes/base.scss";
+@import "oocss3-shapes/arrows.scss";
+@import "oocss3-shapes/chains.scss";
+@import "oocss3-shapes/figures.scss";
+@import "oocss3-shapes/mediacontrols.scss";
+@import "oocss3-shapes/miscellaneous.scss";
+@import "oocss3-shapes/objects.scss";
+@import "oocss3-shapes/ribbons.scss";
+@import "oocss3-shapes/vectors.scss";
+

data/stylesheets/oocss3-shapes/_arrows.scss

@@ -0,0 +1,12 @@
+@import 'arrows/back.scss';
+@import 'arrows/backAlt.scss';
+@import 'arrows/down.scss';	
+@import 'arrows/forward.scss';
+@import 'arrows/forwardAlt.scss';
+@import 'arrows/up.scss';
+
+@include backAltIcon;
+@include downIcon;
+@include forwardIcon;
+@include upIcon;
+@include backIcon;

data/stylesheets/oocss3-shapes/_base.scss

@@ -0,0 +1,117 @@
+.base {
+  position: relative;
+  display: inline-block;
+}
+
+.pseudoElement {
+  content: "";
+  position: absolute;
+}
+
+.resetBorder {
+    width: 0;
+    height: 0;
+}
+
+.horizontalAlighment {
+  left: 0;
+  right: 0;
+  margin: auto;
+}
+
+
+.horizontalLine {
+    height: 0.1em;
+    width: 0.6em;
+}
+
+.verticalLine {
+    height: 0.6em;
+    width: 0.1em;
+}
+
+.verticalLine, 
+.horizontalLine{
+  @extend .pseudoElement;
+  @extend .horizontalAlighment;
+  background: red;
+  top: 0;
+  bottom: 0;
+}
+
+
+
+.shape {
+  width: 1em;
+  height: 1em;
+  background: #C55500;
+  @extend .base;
+}
+
+.triangule {
+    @extend .base;
+    @extend .resetBorder;
+    border: 0.5em solid transparent;
+}
+
+.disk {
+    @extend .pseudoElement;
+    @extend .rounded;
+    border: 0.25em solid #FFFFFF;
+    width: 0.25em;
+    height: 0.25em
+}
+
+.ribbon {
+    @extend .resetBorder;
+    @extend .base;
+    border: {
+        width: 0.5em;
+        style: solid;
+    }
+}
+
+.rightArrow {
+	&:before{
+		@extend .pseudoElement;
+		border:{
+			color: transparent red;
+			style: solid;
+			width: 0.5em 0.5em 0.5em 0.5em;
+		}
+	}
+	&:after{
+		@extend .pseudoElement;
+		background: red;
+		height: 0.4em;
+		width: 0.5em;
+	}
+}
+
+.topArrow {
+	&:before{
+		@extend .pseudoElement;
+		border:{
+			color: red transparent;
+			width: 0em 0.5em 0.5em 0.5em;
+		}
+	}
+	&:after {
+		@extend .pseudoElement;
+		height: 0.5em;
+		width: 0.4em;
+		@extend .horizontalAlighment;
+	}
+}
+
+.rotate45 {
+    @include rotate(45deg);
+}
+
+.rotateLess45 {
+    @include rotate(-45deg);
+}
+
+.rounded {
+  @include border-radius(50%);
+}

data/stylesheets/oocss3-shapes/_chains.scss

@@ -0,0 +1,3 @@
+@import 'chains/permaLink.scss';
+
+@Include permalinkIcon;

data/stylesheets/oocss3-shapes/_figures.scss

@@ -0,0 +1,24 @@
+@import 'figures/circle.scss';
+@import 'figures/oval.scss';
+@import 'figures/rectangle.scss';
+@import 'figures/square.scss';
+@import 'figures/trianguleBottomLeft.scss';
+@import 'figures/trianguleBottomRight.scss';
+@import 'figures/trianguleDown.scss';
+@import 'figures/trianguleLeft.scss';
+@import 'figures/trianguleRight.scss';
+@import 'figures/trianguleTopLeft.scss';
+@import 'figures/trianguleTopRight.scss';
+@import 'figures/trianguleUp.scss';
+
+@include oval;
+@include rectangle;
+@include square;
+@include trianguleUp;
+@include trianguleDown;
+@include trianguleLeft;
+@include trianguleRight;
+@include trianguleTopLeft;
+@include trianguleTopRight;
+@include trianguleBottomLeft;
+@include trianguleBottomRight;

data/stylesheets/oocss3-shapes/_mediacontrols.scss

@@ -0,0 +1,11 @@
+@import 'mediacontrols/play.scss';
+@import 'mediacontrols/stop.scss';
+@import 'mediacontrols/pause.scss';
+@import 'mediacontrols/pauseALt.scss';
+@import 'mediacontrols/fastFoward.scss';
+
+@include playIcon;
+@include stopIcon;
+@include pauseAltIcon;
+@include pauseIcon;
+//@include fastFowardIcon;

data/stylesheets/oocss3-shapes/_miscellaneous.scss

@@ -0,0 +1,21 @@
+@import 'miscellaneous/denied.scss';
+@import 'miscellaneous/help.scss';
+@import 'miscellaneous/history.scss';
+@import 'miscellaneous/info.scss';
+@import 'miscellaneous/pieChart.scss';
+@import 'miscellaneous/power.scss';
+@import 'miscellaneous/success.scss';
+@import 'miscellaneous/successAlt.scss';
+@import 'miscellaneous/views.scss';
+@import 'miscellaneous/warning.scss';
+
+@include deniedIcon;
+@include helpIcon;
+@include historyIcon;
+@include infoIcon;
+@include pieChartIcon;
+@include powerIcon;
+@include successIcon;
+@include successAltIcon;
+@include viewsIcon;
+@include warningIcon;

data/stylesheets/oocss3-shapes/_objects.scss

@@ -0,0 +1,7 @@
+@import 'objects/headPhone.scss';
+@import 'objects/ipod.scss';
+@import 'objects/tool.scss';
+
+@include headPhoneIcon;
+@include ipodIcon;
+@include toolIcon;

data/stylesheets/oocss3-shapes/_ribbons.scss

@@ -0,0 +1,9 @@
+@import 'ribbons/downRibbon.scss';
+@import 'ribbons/leftRibbon.scss';
+@import 'ribbons/rightRibbon.scss';
+@import 'ribbons/upRibbon.scss';
+
+@include downRibbonIcon;
+@include upRibbonIcon;
+@include leftRibbonIcon;
+@include rightRibbonIcon;

data/stylesheets/oocss3-shapes/_vectors.scss

@@ -0,0 +1,17 @@
+@import 'vectors/less.scss';
+@import 'vectors/minor.scss';
+@import 'vectors/minorRounded.scss';
+@import 'vectors/more.scss';
+@import 'vectors/plus.scss';
+@import 'vectors/plusRounded.scss';
+@import 'vectors/remove.scss';
+@import 'vectors/roundedRemove.scss';
+
+@include plusIcon;
+@include minorIcon;
+@include minorRoundedIcon;
+@include plusRoundedIcon;
+@include removeIcon;
+@include roundedRemoveIcon;
+@include moreIcon;
+@include lessIcon;

data/stylesheets/oocss3-shapes/arrows/_backALt.scss

@@ -0,0 +1,15 @@
+@mixin backAltIcon {
+	.backAltIcon {
+		@extend .circle;
+		@extend .backIcon;
+		&:before, &:after{
+			font-size: 0.8em;
+		}
+		&:before{
+			top: 0.14em;
+		}
+		&:after{
+			top: 0.39em;
+		}
+	}
+}

data/stylesheets/oocss3-shapes/arrows/_down.scss

@@ -0,0 +1,15 @@
+@mixin downIcon {
+	.downIcon {
+		@extend .upIcon;
+		&:before{
+			bottom: 0;
+			border:{
+				width: 0.5em 0.5em 0em 0.5em;
+			}
+		}
+		&:after {
+			top: 0em;
+			@extend .horizontalAlighment;
+		}
+	}
+}

data/stylesheets/oocss3-shapes/arrows/_forward.scss

@@ -0,0 +1,14 @@
+@mixin forwardIcon {
+	.forwardIcon {
+		@extend .shape;
+		@extend .rightArrow;
+		background: blue;
+		&:before {
+			right: 0;
+			border-width: 0.5em 0em 0.5em 0.5em;
+		}
+		&:after {
+			top: 0.24em;
+		}
+	}
+}

data/stylesheets/oocss3-shapes/arrows/_forwardAlt.scss

@@ -0,0 +1,17 @@
+@mixin fowardAltIcon {
+	.forwardAltIcon {
+		@extend .circle;
+		@extend .forwardIcon;
+		&:before, &:after{
+			font-size: 0.8em;
+		}
+		&:before{
+			top: 0.14em;
+			right: 0.1em;
+		}
+		&:after{
+			left: 0.2em;
+			top: 0.39em;
+		}
+	}
+}

data/stylesheets/oocss3-shapes/arrows/_up.scss

@@ -0,0 +1,11 @@
+@mixin upIcon {
+	.upIcon {
+		@extend .shape;
+		@extend .rightArrow;
+		@extend .topArrow;
+		background: blue;
+		&:after{
+			top: 0.5em;
+		}
+	}
+}

data/stylesheets/oocss3-shapes/arrows/back.scss

@@ -0,0 +1,14 @@
+@mixin backIcon {
+	.backIcon {
+		@extend .forwardIcon;
+		&:before{
+			right: 0.5em;
+			border-width: 0.5em 0.5em 0.5em 0em;
+			
+		}
+		&:after{
+			right: 0;
+			top: 0.29em;
+		}
+	}
+}

data/stylesheets/oocss3-shapes/chains/_permaLink.scss

@@ -0,0 +1,12 @@
+@mixin permalinkIcon {
+    .permalinkIcon {
+        @extend .base;
+        @extend .rotateLess45;
+        height: 0.5em;
+        width: 0.125em;
+        background: #C55500;
+        &:before, &:after {
+            @extend .pseudoElement;
+        }
+    }
+ }

data/stylesheets/oocss3-shapes/example/index.haml

@@ -0,0 +1,61 @@
+!!! 5
+%html
+  %head
+    %link{:rel=>'stylesheet', :type=>'text/css', :href=>"stylesheets/screen.css"}
+    %script{:type=>"text/javascript", :src=>"http://localhost:8001/vogue-client.js"}
+  %body
+    .rectangle
+    .circle
+    .oval
+    .trianguleUp
+    .trianguleDown
+    .trianguleLeft
+    .trianguleRight
+    .trianguleTopLeft
+    .trianguleTopRight
+    .trianguleBottomLeft
+    .trianguleBottomRight
+
+    .downRibbonIcon
+    .upRibbonIcon
+    .leftRibbonIcon
+    .rightRibbonIcon
+    
+    .playIcon
+    .stopIcon
+    .pauseIcon
+    .pauseAltIcon
+    .square
+    .fastFoward 
+  
+    .infoIcon
+    .helpIcon
+    .successIcon
+    .successAltIcon
+    .warningIcon
+    .deniedIcon
+    .pieChartIcon
+    .viewsIcon
+    /.headPhoneIcon
+    .ipodIcon
+    .toolIcon
+    .historyIcon
+    .powerIcon
+    .enlargeIcon
+    .popOutIcon
+    /.expandIcon
+    .forwardIcon
+    .backIcon
+    .upIcon
+    .downIcon
+    .forwardAltIcon
+    .backAltIcon
+    .plusIcon
+    .minorIcon
+    .removeIcon
+    .roundedRemoveIcon
+    .minorRoundedIcon
+    .plusRoundedIcon
+    .moreIcon
+    .lessIcon
+    /.permalinkIcon

data/stylesheets/oocss3-shapes/example/index.html

@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link href='stylesheets/screen.css' rel='stylesheet' type='text/css'>
+    <script src='http://localhost:8001/vogue-client.js' type='text/javascript'></script>
+  </head>
+  <body>
+    <div class='rectangle'></div>
+    <div class='circle'></div>
+    <div class='oval'></div>
+    <div class='trianguleUp'></div>
+    <div class='trianguleDown'></div>
+    <div class='trianguleLeft'></div>
+    <div class='trianguleRight'></div>
+    <div class='trianguleTopLeft'></div>
+    <div class='trianguleTopRight'></div>
+    <div class='trianguleBottomLeft'></div>
+    <div class='trianguleBottomRight'></div>
+    <div class='downRibbonIcon'></div>
+    <div class='upRibbonIcon'></div>
+    <div class='leftRibbonIcon'></div>
+    <div class='rightRibbonIcon'></div>
+    <div class='playIcon'></div>
+    <div class='stopIcon'></div>
+    <div class='pauseIcon'></div>
+    <div class='pauseAltIcon'></div>
+    <div class='square'></div>
+    <div class='fastFoward'></div>
+    <div class='infoIcon'></div>
+    <div class='helpIcon'></div>
+    <div class='successIcon'></div>
+    <div class='successAltIcon'></div>
+    <div class='warningIcon'></div>
+    <div class='deniedIcon'></div>
+    <div class='pieChartIcon'></div>
+    <div class='viewsIcon'></div>
+    <!-- .headPhoneIcon -->
+    <div class='ipodIcon'></div>
+    <div class='toolIcon'></div>
+    <div class='historyIcon'></div>
+    <div class='powerIcon'></div>
+    <div class='enlargeIcon'></div>
+    <div class='popOutIcon'></div>
+    <!-- .expandIcon -->
+    <div class='forwardIcon'></div>
+    <div class='backIcon'></div>
+    <div class='upIcon'></div>
+    <div class='downIcon'></div>
+    <div class='forwardAltIcon'></div>
+    <div class='backAltIcon'></div>
+    <div class='plusIcon'></div>
+    <div class='minorIcon'></div>
+    <div class='removeIcon'></div>
+    <div class='roundedRemoveIcon'></div>
+    <div class='minorRoundedIcon'></div>
+    <div class='plusRoundedIcon'></div>
+    <div class='moreIcon'></div>
+    <div class='lessIcon'></div>
+    <!-- .permalinkIcon -->
+  </body>
+</html>