GIPainter-base 0.3.3 → 0.4.0

data/assets/stylesheets/Mixins/_position.scss

@@ -0,0 +1,108 @@
+//-----------------------------------
+// POSITION MIXINS
+//-----------------------------------
+
+////
+/// @access public
+/// @group Mixins
+/// @type string
+////
+
+/// Mixin helper to centerer block.
+/// @param {boolean} $horizontal [true] - set to false to centerer verticaly
+/// @param {boolean} $vertical [true] - set to false to centerer horizontaly
+/// @example scss - Usage
+///   .foo {
+///     @include centerer();
+///   }
+/// @example css - Result
+///   .foo {
+///     position: absolute;
+///     top: 50%;
+///     left: 50%
+///     -webkit-transform: translate(-50%, -50%);
+///     -ms-transform: translate(-50%, -50%);
+///     transform: translate(-50%, -50%);
+///   }
+
+@mixin centerer($horizontal: true, $vertical: true) {
+  position: absolute;
+  @if ($horizontal and $vertical) {
+    top: 50%;
+    left: 50%;
+    @include translate(-50%, -50%);
+  } @else if ($horizontal) {
+    left: 50%;
+    @include translate(-50%, 0);
+  } @else if ($vertical) {
+    top: 50%;
+    @include translate(0, -50%);
+  }
+}
+
+/// Mixins helper to Shorthandizes position declarations.
+/// @param {String} $type [absolute] - Either `relative`, `absolute` or `fixed`
+/// @param {Length} $left [null] - Left offset
+/// @param {Length} $right [null] - Right offset
+/// @param {Length} $top [null] - Top offset
+/// @param {Length} $bottom [null] - Bottom offset
+/// @example scss - Usage
+///   .foo {
+///     @include position(absolute, $top: 10px, $left: 10px);
+///   }
+/// @example css - Result
+///   .foo {
+///     position: absolute;
+///     left: 10px;
+///     top: 10px;
+///   }
+@mixin position($type: absolute, $top: null, $right: null, $bottom: null, $left: null) {
+  @if type-of($type) == list {
+    $coordinates: $type;
+    $position: relative;
+  }
+  position: $type;
+  top: $top;
+  right: $right;
+  bottom: $bottom;
+  left: $left;
+}
+
+/// Mixins helper to Vertically center descendent elements with the inline-block method.
+/// @param {Array} $inner [*] - A CSS selector for the inner element. Can be a single selector or a comma-separated list of selectors. In either case, wrap selectors in quotes.
+/// @example scss - Usage
+///   .foo {
+///     @include vertical-align-inline;
+///   }
+/// @example css - Result
+///   .foo:before {
+///     content: "";
+///     display: inline-block;
+///     position: static;
+///     height: 100%;
+///     vertical-align: middle;
+///     margin-right: -0.25em;
+///   }
+///   .foo > * {
+///     display: inline-block;
+///     vertical-align: middle;
+///   }
+
+@mixin vertical-align-inline ($inner...) {
+  &:before {
+    @include pseudo(inline-block, static);
+    height: 100%;
+    vertical-align: middle;
+    margin-right: -0.25em;
+    width: .1px;
+  }
+
+  $inner: if(length($inner) == 0, "*", $inner);
+  @each $cell-selector in $inner {
+    $cell-selector: unquote($cell-selector);
+    & > #{$cell-selector} {
+      display: inline-block;
+      vertical-align: middle;
+    }
+  }
+}

data/assets/stylesheets/Mixins/_pseudo.scss

@@ -0,0 +1,109 @@
+//-----------------------------------
+// PSEUDO ELEMENTS MIXINS
+//-----------------------------------
+
+////
+/// @access public
+/// @group Mixins
+/// @type string
+////
+
+/// Mixin helper set pseudo element.
+/// @param {String} $display [block] - display of you pseudo element
+/// @param {String} $pos [absolute] - position of your pseudo element
+/// @param {String} $content [''] - content of your pseudo element
+/// @example scss - Usage
+///   .foo:after {
+///     @include pseudo;
+///   }
+/// @example css - Result
+///   .foo:after {
+///     content: '';
+///     display: block;
+///     position: absolute;
+///   }
+
+@mixin pseudo($display: block, $pos: absolute, $content: ''){
+  @if type-of($pos) == list {
+    $coordinates: $pos;
+    $position: relative;
+  }
+  position: $pos;
+  content: $content;
+  display: $display;
+}
+
+/// Mixin helper to add clearfix pseudo elements
+/// @param {String} $elements [after] - pseudo element selected (before, after)
+/// @example scss - Usage
+///   .foo {
+///     @include clearfix(before);
+///   }
+/// @example css - Result
+///   .foo:before {
+///     display: table;
+///     content: "";
+///     position: static;
+///     clear: both;
+///   }
+
+@mixin clearfix ($elements: after) {
+  &:#{$elements}{
+    @include pseudo(table, static);
+    clear: both;
+  }
+}
+
+/// Mixin helper to add clearfix pseudo elements
+/// @param {Color} $color - color you want set to your triangle
+/// @param {string} $direction - direction of your triangle (top, bottom, right, left)
+/// @param {Length} $size [6px] - your triangle size
+/// @param {string} $position [absolute] - position for your triangle (absolute, static, etc...)
+/// @param {Length} $round [false] - radius of your triangle
+/// @example scss - Usage
+///   .foo:before {
+///     @include triangle(red, bottom, $round: 3px);
+///   }
+/// @example css - Result
+///   .foo:before {
+///     display: block;
+///     content: "";
+///     position: absolute;
+///     width: 0;
+///     height: 0;
+///     border-radius: 3px;
+///     border-left: 6px solid transparent;
+///     border-right: 6px solid transparent;
+///     border-top: 6px solid red;
+///     margin-top: -2.4px;
+///   }
+
+@mixin triangle($color, $direction, $size: 6px, $position: absolute, $round: false){
+  @include pseudo($pos: $position);
+  width: 0;
+  height: 0;
+  @if $round {
+    border-radius: $round;
+  }
+  @if $direction == bottom {
+    border-left: $size solid transparent;
+    border-right: $size solid transparent;
+    border-top: $size solid $color;
+    margin-top: 0 - round( $size / 2.5 );
+  } @else if $direction == top {
+    border-left: $size solid transparent;
+    border-right: $size solid transparent;
+    border-bottom: $size solid $color;
+    margin-bottom: 0 - round( $size / 2.5 );
+  } @else if $direction == right {
+    border-top: $size solid transparent;
+    border-bottom: $size solid transparent;
+    border-left: $size solid $color;
+    margin-right: -$size;
+  } @else if  $direction == left {
+    border-top: $size solid transparent;
+    border-bottom: $size solid transparent;
+    border-right: $size solid $color;
+    margin-left: -$size;
+  }
+}

data/assets/stylesheets/Mixins/_size.scss

@@ -0,0 +1,73 @@
+//-----------------------------------
+// IMAGE MIXINS
+//-----------------------------------
+
+////
+/// @access public
+/// @group Mixins
+/// @type string
+////
+
+/// Mixin helper set responsive ratio.
+/// @param {Length} $x - width of you image/media/block
+/// @param {Length} $y - height of you image/media/block
+/// @param {Boolean} $pseudo [false] - set true to make pseudo element with repsonsive ratio
+/// @example scss - Usage
+///   .foo {
+///     @include responsive-ratio(1,1, true);
+///   }
+/// @example css - Result
+///   .foo:before {
+///     display: block;
+///     position: relative;
+///     content: '';
+///     width: 100%;
+///     padding-top: 100%;
+///   }
+
+@mixin responsive-ratio($x,$y, $pseudo: false) {
+  $padding: unquote( ( $y / $x ) * 100 + '%' );
+  @if $pseudo {
+    &:before {
+      @include pseudo($pos: relative);
+      width: 100%;
+      padding-top: $padding;
+    }
+  } @else {
+    padding-top: $padding;
+  }
+}
+
+/// Mixin helper to sizing element
+/// @param {Length} $width [auto] - element width
+/// @param {Length} $height [auto] - element height
+/// @example scss - Usage
+///   .foo {
+///     @include size(300px, 30px);
+///   }
+/// @example css - Result
+///   .foo {
+///     width: 300px;
+///     height: 30px;
+///   }
+
+@mixin size($width: auto, $height: auto){
+  width: $width;
+  height: $height;
+}
+
+/// Mixin helper to sizing element square
+/// @param {Length} $size [auto] - element size
+/// @example scss - Usage
+///   .foo {
+///     @include square(300px);
+///   }
+/// @example css - Result
+///   .foo {
+///     width: 300px;
+///     height: 300px;
+///   }
+
+@mixin square($size: auto) {
+  @include size($size, $size);
+}

data/assets/stylesheets/Mixins/_typography.scss

@@ -9,7 +9,7 @@
 ////
 
 /// Mixin helper to convert font-size pixel to rem.
-/// @param {int} $font-size - font-size in pixel
+/// @param {Number} $font-size [14] - font-size in pixel
 /// @example scss - Usage
 ///   .foo {
 ///     @include font-size(16px);
@@ -20,17 +20,33 @@
 ///     font-size: 1.142857rem;
 ///   }
 
-@mixin font-size($font-size) {
-  font-size: $font-size;
+@mixin font-size($font-size: 14) {
+  font-size: $font-size  * 1px;
   font-size: ($font-size / $font-size-base) * 1rem;
 }
 
+/// Mixin helper to Generates line-height values in both pixels and rems.
+/// @param {Number} $height-value [14] - Height value
+/// @example scss - Usage
+///   .foo {
+///     @include line-height(14);
+///   }
+/// @example css - Result
+///   .foo {
+///     line-height: 14px;
+///     line-height: 1rem;
+///   }
+@mixin line-height($height-value: 14) {
+  line-height: $height-value * 1px;
+  line-height: ($height-value  / $font-size-base) * 1rem;
+}
+
 /// Mixin helper to output '@font-face'
-/// @param {string} $font-family - font-family name
-/// @param {string} $file-path - path to file without extension
-/// @param {string} $weight - weight of your font (bold, normal, 100, etc...)
-/// @param {string} $style - style of your font (italic, oblique, normal, etc...)
-/// @param {string} $formats - formats of your font files
+/// @param {String} $font-family - font-family name
+/// @param {String} $file-path - path to file without extension
+/// @param {String} $weight [normal] - weight of your font (bold, normal, 100, etc...)
+/// @param {String} $style [normal] - style of your font (italic, oblique, normal, etc...)
+/// @param {Array} $formats [eot woff2 woff ttf svg] - formats of your font files
 /// @example scss - Usage
 ///   @include font-face("Arvo", "fonts/arvo-regular-webfont");
 /// @example css - Result
@@ -65,7 +81,7 @@
 }
 
 /// Mixin helper to indent first line of paragraphe text
-/// @param {string} $indent - Indentation size
+/// @param {Length} $indent [1.5em] - Indentation size
 /// @example scss - Usage
 ///   .foo {
 ///     @include indent-text();
@@ -84,9 +100,9 @@
 }
 
 /// Mixin helper to replace underline of link with border-bottom
-/// @param {Color} $color - color of border
-/// @param {string} $style - style of border
-/// @param {string} $width - size of border
+/// @param {Color} $color [inherit] - color of border
+/// @param {string} $style [solid] - style of border
+/// @param {Length} $width [1px] - size of border
 /// @example scss - Usage
 ///   .foo {
 ///     @include link-replace-underline(red, dotted);
@@ -109,12 +125,12 @@
 }
 
 /// Mixin helper to add side line arround text
-/// @param {string} $height - height of side lines
-/// @param {string} $space - space around text
-/// @param {Color} $color - color of side lines
-/// @param {string} $style - styles of side lines
-/// @param {string} $v-adjust - adjust verticality
-/// @param {string} $double - size between 2 lines in same side
+/// @param {Length} $height [1px] - height of side lines
+/// @param {Length} $space [0.5em] - space around text
+/// @param {Color} $color [inherit] - color of side lines
+/// @param {string} $style [solid] - styles of side lines
+/// @param {Length} $v-adjust [false] - adjust verticality
+/// @param {Length} $double [false] - size between 2 lines in same side
 /// @example scss - Usage
 ///   .foo {
 ///     @include side-lined(5px, $color: red, $double: 0.3em);
@@ -186,7 +202,7 @@
 }
 
 /// Mixin helper to truncate text
-/// @param {string} $truncation-boundary - Max size of your container
+/// @param {Length} $truncation-boundary - Max size of your container
 /// @example scss - Usage
 ///   .foo {
 ///     @include truncate(100%);
@@ -207,10 +223,10 @@
 }
 
 /// Mixin helper to get action selector
-/// @param {boolean} $active - add active selector
+/// @param {Boolean} $active [false] - add active selector
 /// @example scss - Usage
 ///   .foo {
-///     @include selected() {
+///     @include selected {
 ///       background-color: red;
 ///     }
 ///   }
@@ -236,23 +252,62 @@
   }
 }
 
-/// Mixin helper to add clearfix pseudo elements
-/// @param {string} $elements - pseudo element selected (before, after)
+/// Mixin helper to hide text
+/// @param {Boolean} $break [false] - set to true to break element
+/// @param {Length} $indent [200%] - indentation text
+/// @param {String} $align [left] - text alignement
+/// @param {String} $overflow [hidden] - overflow of element
 /// @example scss - Usage
 ///   .foo {
-///     @include clearfix(before);
+///     @include hide-text;
 ///   }
 /// @example css - Result
-///   .foo:before {
-///     display: table;
-///     content: "";
-///     clear: both;
+///   .foo{
+///     text-indent: $indent;
+///     text-align: $align;
+///     font-size: 0;
+///     white-space: nowrap;
+///     overflow: $overflow;
 ///   }
 
-@mixin clearfix ($elements: after) {
-  &:#{$elements}{
-    display: table;
-    content: "";
-    clear: both;
+@mixin hide-text($break: false, $indent: 200%, $align: left, $overflow: hidden) {
+  @if $break {
+    position: absolute;
+    top: 0; left: 0;
+    pointer-events: none;
   }
+  text-indent: $indent;
+  text-align: $align;
+  font-size: 0;
+  white-space: nowrap;
+  @if $overflow {
+    overflow: $overflow;
+  }
+}
+
+/// Mixin helper to replace text with image
+/// @param {Length} $w - width of element
+/// @param {Length} $h - height of element
+/// @param {String} $file - file path
+/// @param {String} $overflow [hidden] - overflow of element
+/// @example scss - Usage
+///   .foo {
+///     @include hide-text;
+///   }
+/// @example css - Result
+///   .foo{
+///     text-indent: $indent;
+///     text-align: $align;
+///     font-size: 0;
+///     white-space: nowrap;
+///     overflow: $overflow;
+///   }
+
+@mixin text-replacement($w, $h, $file, $overflow: hidden) {
+  @include responsive-ratio($w, $h, true);
+  position: relative;
+  max-width: $w * 1px;
+  background: url($file) 50% 50% no-repeat;
+  background-size: contain;
+  @include hide-text($overflow: $overflow);
 }

data/assets/stylesheets/Variables/_typography.scss

@@ -62,4 +62,8 @@ $headings-font-family:    inherit !default;
 $headings-font-weight:    500 !default;
 $headings-line-height:    1.1 !default;
 $headings-color:          inherit !default;
-$headings-small-color:    inherit !default;
+$headings-small-color:    inherit !default;
+
+/// Links
+/// @prop {typography} headings-font-family [$headings-font-family]
+$link-color:              $main-color !default;

data/lib/GIPainter-base/version.rb

@@ -1,3 +1,3 @@
 module GIPainter_base
-  VERSION       = '0.3.3'
+  VERSION       = '0.4.0'
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: GIPainter-base
 version: !ruby/object:Gem::Version
-  version: 0.3.3
+  version: 0.4.0
 platform: ruby
 authors:
 - Genious Interactive
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2017-02-16 00:00:00.000000000 Z
+date: 2017-02-17 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: compass
@@ -130,12 +130,19 @@ extensions: []
 extra_rdoc_files: []
 files:
 - README.md
-- assets/stylesheets/Base/_normalize.scss
 - assets/stylesheets/Base/_typography.scss
 - assets/stylesheets/Functions/_typography.scss
 - assets/stylesheets/Mixins/_colors.scss
+- assets/stylesheets/Mixins/_image.scss
+- assets/stylesheets/Mixins/_list.scss
+- assets/stylesheets/Mixins/_margin.scss
 - assets/stylesheets/Mixins/_media-query.scss
+- assets/stylesheets/Mixins/_miscellaneous.scss
 - assets/stylesheets/Mixins/_opacity.scss
+- assets/stylesheets/Mixins/_padding.scss
+- assets/stylesheets/Mixins/_position.scss
+- assets/stylesheets/Mixins/_pseudo.scss
+- assets/stylesheets/Mixins/_size.scss
 - assets/stylesheets/Mixins/_typography.scss
 - assets/stylesheets/Variables/_colors.scss
 - assets/stylesheets/Variables/_media-query.scss