added text-shadow, center blocks, position, div outline

gillesbertaux · Dec 4, 2014 · 82561b1 · 82561b1
1 parent 8446661
commit 82561b1
Show file tree

Hide file tree

Showing 2 changed files with 84 additions and 23 deletions.
diff --git a/README.md b/README.md
@@ -38,29 +38,32 @@ Then call it like:
 --------
 
 **Mixins availables:**
-- Background Gradient
-- Background Size
-- Borders
-- Border Corners
-- Box Sizing
-- Center Block
-- Clearfix
-- Font Face
-- Font Size
-- Hardware Acceleration
-- Hover
-- Image Retina
-- Line-Height
-- Media Queries
-- Opacity Black
-- Opacity White
-- Radius
-- Scale
-- Shadows
-- Size
-- TranslateX
-- TranslateY
-- Transitions
+  - Background Gradient
+  - Background Size
+  - Borders
+  - Border Corners
+  - Box Sizing
+  - Center Block
+  - Centering Block: Horizontal, Vertical, Both
+  - Clearfix
+  - Div Outline
+  - Font Face
+  - Hardware Acceleration
+  - Hover
+  - Image Retina
+  - Line-Height
+  - Media Queries
+  - Opacity Black
+  - Opacity White
+  - Position
+  - Radius
+  - Scale
+  - Shadows
+  - Size
+  - Text Shadow 
+  - TranslateX
+  - TranslateY
+  - Transitions
 
 --------
 

diff --git a/andy.scss b/andy.scss
@@ -15,7 +15,9 @@ Mixins availables:
   - Border Corners
   - Box Sizing
   - Center Block
+  - Centering Block: Horizontal, Vertical, Both
   - Clearfix
+  - Div Outline
   - Font Face
   - Hardware Acceleration
   - Hover
@@ -24,10 +26,12 @@ Mixins availables:
   - Media Queries
   - Opacity Black
   - Opacity White
+  - Position
   - Radius
   - Scale
   - Shadows
   - Size
+  - Text Shadow 
   - TranslateX
   - TranslateY
   - Transitions
@@ -129,6 +133,36 @@ Mixins availables:
   margin-right: auto;
 }
 
+/* CENTERING BLOCKS ELEMENTS, HORIZONTAL, VERTICAL, BOTH */
+
+// Important: you must have a parent element with position: relative. 
+
+@mixin center-both {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%,-50%);
+  -ms-transform: translate(-50%,-50%);
+  transform: translate(-50%,-50%);
+}
+
+// if height is unknown.
+@mixin center-h {
+  position: relative;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
+}
+
+// if height is defined.
+@mixin center-h--unk($height) {
+  position: absolute;
+  top: 50%;
+  height: $height;
+  margin-top: -$height/2;
+}
+
 /* CLEARFIX */
 
 %clearfix {
@@ -142,6 +176,12 @@ Mixins availables:
   }
 }
 
+/* DIV OUTLINE */
+
+@mixin outline {
+  box-shadow: rgba(255, 255, 255, 0.5) 0 1px 0, inset rgba(0, 0, 0, 0.75) 0 1px 0;
+}
+
 /* FONT FACES */
 
 // usage example: @include font-face(gotham,/fonts/gotham.eot,/fonts/gotham.woff,/fonts/gotham.ttf,/fonts/gotham.svg, 300, normal);
@@ -247,6 +287,18 @@ Mixins availables:
   filter: alpha(opacity=($opacity * 100));
 }
 
+/* POSITION */
+
+// usage example: @include position(absolute, 10px, null, 10px, 10px);
+
+@mixin position($type,$left,$right,$top,$bottom) {
+  position: $type;
+  left: $left;
+  right: $right;
+  top: $top;
+  bottom: $bottom;
+}
+
 /* BLACK / WHITE OPACITY */
 
 @function black($opacity) {
@@ -292,6 +344,12 @@ Mixins availables:
    height: $height;
 }
 
+/* TEXT SHADOW */
+
+@mixin textshadow($value) {
+   text-shadow: rgba(255, 255, 255, $value) 0 1px 0;
+}
+
 /* TRANSLATE X */
 
 @mixin translateX($value) {