From 82561b12819d475f98a4b87e402c5d3d914e7fb5 Mon Sep 17 00:00:00 2001 From: Gilles Bertaux Date: Thu, 4 Dec 2014 15:39:02 +0100 Subject: [PATCH] added text-shadow, center blocks, position, div outline --- README.md | 49 ++++++++++++++++++++++++---------------------- andy.scss | 58 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 84 insertions(+), 23 deletions(-) diff --git a/README.md b/README.md index 0866aa3..c8c90d7 100644 --- 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 index 170bf2f..dea7b53 100644 --- 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) {