GIPainter-base 0.5.1 → 0.5.2

data/assets/stylesheets/Mixins/_pseudo.scss

@@ -1,109 +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;
-  }
+//-----------------------------------
+// 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

@@ -1,73 +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);
+//-----------------------------------
+// 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

@@ -1,371 +1,376 @@
-//-----------------------------------
-// TYPOGRAPHY MIXINS
-//-----------------------------------
-
-////
-/// @access public
-/// @group Mixins
-/// @type string
-////
-
-/// Mixin helper to convert font-size pixel to rem.
-/// @param {Number} $font-size [14] - font-size in pixel
-/// @example scss - Usage
-///   .foo {
-///     @include font-size(16px);
-///   }
-/// @example css - Result
-///   .foo {
-///     font-size: 16px;
-///     font-size: 1.142857rem;
-///   }
-
-@mixin font-size($font-size: 14) {
-  font-size: $font-size;
-  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;
-  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 [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
-///   @font-face {
-///     font-family: "Arvo";
-///     font-weight: normal;
-///     font-style: normal;
-///     src:  url('fonts/arvo-regular-webfont.eot');
-///     src:  url('fonts/arvo-regular-webfont.eot?#iefix') format('embedded-opentype'),
-///           url('fonts/arvo-regular-webfont.woff2') format('woff2'),
-///           url('fonts/arvo-regular-webfont.woff') format('woff'),
-///           url('fonts/arvo-regular-webfont.ttf')  format('truetype'),
-///           url('fonts/arvo-regular-webfont.svg#svgFontName') format('svg');
-///   }
-
-@mixin font-face ($font-family, $file-path, $weight: normal, $style: normal, $formats: eot woff2 woff ttf svg) {
-  @if index('italic' 'oblique', $weight) {
-    $style: $weight;
-    $weight: normal;
-  }
-
-  @font-face {
-    font-family: $font-family;
-    font-weight: $weight;
-    font-style: $style;
-
-    @if index($formats, eot) {
-      src: url('#{$file-path}.eot');
-    }
-    src: font-src($formats, $file-path, $font-family);
-  }
-}
-
-/// Mixin helper to indent first line of paragraphe text
-/// @param {Length} $indent [1.5em] - Indentation size
-/// @example scss - Usage
-///   .foo {
-///     @include indent-text();
-///   }
-/// @example css - Result
-///   .foo {
-///     margin: 0;
-///     text-indent: 1.5em;
-///   }
-
-@mixin indent-text ($indent: 1.5em) {
-  p {
-    margin: 0;
-    text-indent: $indent;
-  }
-}
-
-/// Mixin helper to replace underline of link with border-bottom
-/// @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);
-///   }
-/// @example css - Result
-///   .foo {
-///     text-decoration: none;
-///     border-bottom-width: 1px;
-///     border-bottom-style: dotted;
-///     border-bottom-color: red;
-///   }
-
-@mixin link-replace-underline ($color: inherit, $style: solid, $width: 1px) {
-  text-decoration: none;
-  border-bottom-width: $width;
-  border-bottom-style: $style;
-  @if $color != inherit {
-    border-bottom-color: $color;
-  }
-}
-
-/// Mixin helper to add side line arround text
-/// @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);
-///   }
-/// @example css - Result
-///   .foo {
-///     display: block;
-///     overflow: hidden;
-///     text-align: center;
-///   }
-///   .foo:before,
-///   .foo:after {
-///     content: "";
-///     display: inline-block;
-///     vertical-align: middle;
-///     position: relative;
-///     width: 50%;
-///     border-top-style: solid;
-///     border-top-width: 5px;
-///     border-top-color: red;
-///     height: 0.3em;
-///     border-bottom-style: solid;
-///     border-bottom-width: 5px;
-///     border-bottom-color: $color;
-///   }
-
-@mixin side-lined ($height: 1px, $space: 0.5em, $color: inherit, $style: solid, $v-adjust: false, $double: false) {
-  display: block;
-  overflow: hidden;
-  text-align: center;
-
-  &:before,
-  &:after {
-    content: "";
-    display: inline-block;
-    vertical-align: middle;
-    position: relative;
-    width: 50%;
-
-    border-top-style: $style;
-    border-top-width: $height;
-
-    @if $color != inherit {
-      border-top-color: $color;
-    }
-
-    @if $v-adjust != false {
-      bottom: $v-adjust;
-    }
-
-    @if $double != false {
-      height: $double;
-      border-bottom-style: $style;
-      border-bottom-width: $height;
-      @if $color != inherit {
-        border-bottom-color: $color;
-      }
-    }
-  }
-
-  &:before {
-    right: $space;
-    margin-left: -50%;
-  }
-  &:after {
-    left: $space;
-    margin-right: -50%;
-  }
-}
-
-/// Mixin helper to truncate text
-/// @param {Length} $truncation-boundary - Max size of your container
-/// @example scss - Usage
-///   .foo {
-///     @include truncate(100%);
-///   }
-/// @example css - Result
-///   .foo {
-///     max-width: 100%;
-///     white-space: nowrap;
-///     overflow: hidden;
-///     text-overflow: ellipsis;
-///   }
-
-@mixin truncate {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-/// Mixin helper to get action selector
-/// @param {Boolean} $active [false] - add active selector
-/// @example scss - Usage
-///   .foo {
-///     @include selected {
-///       background-color: red;
-///     }
-///   }
-/// @example css - Result
-///   .foo:hover,
-///   .foo:focus{
-///     background-color: red;
-///   }
-
-@mixin selected ($active: false) {
-  @if $active {
-    &:hover,
-    &:focus,
-    &:active {
-      @content;
-    }
-  }
-  @else {
-    &:hover,
-    &:focus {
-      @content;
-    }
-  }
-}
-
-/// 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 hide-text;
-///   }
-/// @example css - Result
-///   .foo{
-///     text-indent: $indent;
-///     text-align: $align;
-///     font-size: 0;
-///     white-space: nowrap;
-///     overflow: $overflow;
-///   }
-
-@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);
-}
-
-/// Mixin helper to color text
-/// @param {Color} $color - color of your text
-/// @example scss - Usage
-///   .foo {
-///     @include text-emphasis-variant(#c51c1c)
-///   }
-/// @example css - Result
-///   .foo{
-///     color: #c51c1c;
-///   }
-///
-///   .foo a{
-///     text-decoration: none;
-///     border-bottom-width: 1px;
-///     border-bottom-style: dotted;
-///     border-bottom-color: red;
-///   }
-///
-///   .foo a:hover{
-///     color: #941515;
-///   }
-
-@mixin text-emphasis-variant($color) {
-  color: $color;
-
-  a{
-    @include link-replace-underline;
-
-    &:hover {
-      color: darken($color, 20%);
-    }
-  }
-}
-
-/// 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 lead($font-size) {
-  margin-bottom: $line-height-computed;
-  @include font-size($font-size);
-  @include line-height($font-size);
-  font-weight: 300;
+//-----------------------------------
+// TYPOGRAPHY MIXINS
+//-----------------------------------
+
+////
+/// @access public
+/// @group Mixins
+/// @type string
+////
+
+/// Mixin helper to convert font-size pixel to rem.
+/// @param {Number} $font-size [14] - font-size in pixel
+/// @example scss - Usage
+///   .foo {
+///     @include font-size(16px);
+///   }
+/// @example css - Result
+///   .foo {
+///     font-size: 16px;
+///     font-size: 1.142857rem;
+///   }
+
+@mixin font-size($font-size: 14) {
+  font-size: $font-size;
+  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;
+  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 [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
+///   @font-face {
+///     font-family: "Arvo";
+///     font-weight: normal;
+///     font-style: normal;
+///     src:  url('fonts/arvo-regular-webfont.eot');
+///     src:  url('fonts/arvo-regular-webfont.eot?#iefix') format('embedded-opentype'),
+///           url('fonts/arvo-regular-webfont.woff2') format('woff2'),
+///           url('fonts/arvo-regular-webfont.woff') format('woff'),
+///           url('fonts/arvo-regular-webfont.ttf')  format('truetype'),
+///           url('fonts/arvo-regular-webfont.svg#svgFontName') format('svg');
+///   }
+
+@mixin font-face ($font-family, $file-path, $weight: normal, $style: normal, $formats: eot woff2 woff ttf svg) {
+  @if index('italic' 'oblique', $weight) {
+    $style: $weight;
+    $weight: normal;
+  }
+
+  @font-face {
+    font-family: $font-family;
+    font-weight: $weight;
+    font-style: $style;
+
+    @if index($formats, eot) {
+      src: url('#{$file-path}.eot');
+    }
+    src: font-src($formats, $file-path, $font-family);
+  }
+}
+
+/// Mixin helper to indent first line of paragraphe text
+/// @param {Length} $indent [1.5em] - Indentation size
+/// @example scss - Usage
+///   .foo {
+///     @include indent-text();
+///   }
+/// @example css - Result
+///   .foo {
+///     margin: 0;
+///     text-indent: 1.5em;
+///   }
+
+@mixin indent-text ($indent: 1.5em) {
+  p {
+    margin: 0;
+    text-indent: $indent;
+  }
+}
+
+/// Mixin helper to replace underline of link with border-bottom
+/// @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);
+///   }
+/// @example css - Result
+///   .foo {
+///     text-decoration: none;
+///     border-bottom-width: 1px;
+///     border-bottom-style: dotted;
+///     border-bottom-color: red;
+///   }
+
+@mixin link-replace-underline ($color: inherit, $style: solid, $width: 1px) {
+  text-decoration: none;
+  border-bottom-width: $width;
+  border-bottom-style: $style;
+  @if $color != inherit {
+    border-bottom-color: $color;
+  }
+}
+
+/// Mixin helper to add side line arround text
+/// @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);
+///   }
+/// @example css - Result
+///   .foo {
+///     display: block;
+///     overflow: hidden;
+///     text-align: center;
+///   }
+///   .foo:before,
+///   .foo:after {
+///     content: "";
+///     display: inline-block;
+///     vertical-align: middle;
+///     position: relative;
+///     width: 50%;
+///     border-top-style: solid;
+///     border-top-width: 5px;
+///     border-top-color: red;
+///     height: 0.3em;
+///     border-bottom-style: solid;
+///     border-bottom-width: 5px;
+///     border-bottom-color: $color;
+///   }
+
+@mixin side-lined ($height: 1px, $space: 0.5em, $color: inherit, $style: solid, $v-adjust: false, $double: false) {
+  display: block;
+  overflow: hidden;
+  text-align: center;
+
+  &:before,
+  &:after {
+    content: "";
+    display: inline-block;
+    vertical-align: middle;
+    position: relative;
+    width: 50%;
+
+    border-top-style: $style;
+    border-top-width: $height;
+
+    @if $color != inherit {
+      border-top-color: $color;
+    }
+
+    @if $v-adjust != false {
+      bottom: $v-adjust;
+    }
+
+    @if $double != false {
+      height: $double;
+      border-bottom-style: $style;
+      border-bottom-width: $height;
+      @if $color != inherit {
+        border-bottom-color: $color;
+      }
+    }
+  }
+
+  &:before {
+    right: $space;
+    margin-left: -50%;
+  }
+  &:after {
+    left: $space;
+    margin-right: -50%;
+  }
+}
+
+/// Mixin helper to truncate text
+/// @param {Length} $truncation-boundary - Max size of your container
+/// @example scss - Usage
+///   .foo {
+///     @include truncate(100%);
+///   }
+/// @example css - Result
+///   .foo {
+///     max-width: 100%;
+///     white-space: nowrap;
+///     overflow: hidden;
+///     text-overflow: ellipsis;
+///   }
+
+@mixin truncate {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/// Mixin helper to get action selector
+/// @param {Boolean} $active [false] - add active selector
+/// @example scss - Usage
+///   .foo {
+///     @include selected {
+///       background-color: red;
+///     }
+///   }
+/// @example css - Result
+///   .foo:hover,
+///   .foo:focus{
+///     background-color: red;
+///   }
+
+@mixin selected ($active: false) {
+  @if $active {
+    &:hover,
+    &.hover,
+    &:focus,
+    &.focus,
+    &:active,
+    &.active {
+      @content;
+    }
+  }
+  @else {
+    &:hover,
+    &.hover,
+    &:focus,
+    &.focus {
+      @content;
+    }
+  }
+}
+
+/// 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 hide-text;
+///   }
+/// @example css - Result
+///   .foo{
+///     text-indent: $indent;
+///     text-align: $align;
+///     font-size: 0;
+///     white-space: nowrap;
+///     overflow: $overflow;
+///   }
+
+@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);
+}
+
+/// Mixin helper to color text
+/// @param {Color} $color - color of your text
+/// @example scss - Usage
+///   .foo {
+///     @include text-emphasis-variant(#c51c1c)
+///   }
+/// @example css - Result
+///   .foo{
+///     color: #c51c1c;
+///   }
+///
+///   .foo a{
+///     text-decoration: none;
+///     border-bottom-width: 1px;
+///     border-bottom-style: dotted;
+///     border-bottom-color: red;
+///   }
+///
+///   .foo a:hover{
+///     color: #941515;
+///   }
+
+@mixin text-emphasis-variant($color) {
+  color: $color;
+
+  a{
+    @include link-replace-underline;
+
+    &:hover {
+      color: darken($color, 20%);
+    }
+  }
+}
+
+/// 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 lead($font-size) {
+  margin-bottom: $line-height-computed;
+  @include font-size($font-size);
+  @include line-height($font-size);
+  font-weight: 300;
 }