tamem-scss 1.0.2

data/sass/core/_flexbox.scss

@@ -0,0 +1,321 @@
+///
+/// Flex helper
+///
+/// @group flexbox
+/// @param {string | number} $value
+///
+/// @example scss
+///   .box {
+///     @include flex(1);
+///   }
+///
+///   // CSS Output
+///   .box {
+///     -webkit-flex: 1;
+///        -moz-flex: 1;
+///         -ms-flex: 1;
+///          -o-flex: 1;
+///   }
+///
+@mixin flex($value) {
+  -webkit-flex: $value; // Chrome 21.0, Safari 6.1
+     -moz-flex: $value; // Firefox 18.0
+      -ms-flex: $value; // IE 10.0
+          flex: $value;
+}
+
+///
+/// Flex basis helper
+///
+/// @group flexbox
+/// @param {number} $value
+///
+/// @example scss
+///   .box {
+///     @include flex-basis(10px);
+///   }
+///
+///   // CSS Output
+///   .box {
+///     -webkit-flex-basis: 10px;
+///        -moz-flex-basis: 10px;
+///          -o-flex-basis: 10px;
+///   }
+///
+@mixin flex-basis($value) {
+  -webkit-flex-basis: $value; // Chrome 21.0, Safari 6.1
+     -moz-flex-basis: $value; // Firefox 18.0
+          flex-basis: $value;
+}
+
+///
+/// Flex direction helper
+///
+/// @group flexbox
+/// @param {string} $value
+///
+/// @example scss
+///   .box {
+///     @include flex-direction(row-reverse);
+///   }
+///
+///   // CSS Output
+///   .box {
+///     -webkit-flex-direction: row-reverse;
+///        -moz-flex-direction: row-reverse;
+///          -o-flex-direction: row-reverse;
+///   }
+///
+@mixin flex-direction($value) {
+  -webkit-flex-direction: $value; // Chrome 21.0, Safari 6.1
+     -moz-flex-direction: $value; // Firefox 18.0
+          flex-direction: $value;
+}
+
+///
+/// Flex flow helper
+///
+/// @group flexbox
+/// @param {list | string} $value
+///
+/// @example scss
+///   .box {
+///     @include flex-flow(row-reverse wrap);
+///   }
+///
+///   // CSS Output
+///   .box {
+///     -webkit-flex-flow: row-reverse wrap;
+///        -moz-flex-flow: row-reverse wrap;
+///          -o-flex-flow: row-reverse wrap;
+///   }
+///
+@mixin flex-flow($value) {
+  -webkit-flex-flow: $value; // Chrome 21.0, Safari 6.1
+     -moz-flex-flow: $value; // Firefox 18.0
+          flex-flow: $value;
+}
+
+///
+/// Flex grow helper
+///
+/// @group flexbox
+/// @param {number | string} $value
+///
+/// @example scss
+///   .box {
+///     @include flex-grow(1);
+///   }
+///
+///   // CSS Output
+///   .box {
+///     -webkit-flex-grow: 1;
+///        -moz-flex-grow: 1;
+///          -o-flex-grow: 1;
+///   }
+///
+@mixin flex-grow($value) {
+  -webkit-flex-grow: $value; // Chrome 21.0, Safari 6.1
+     -moz-flex-grow: $value; // Firefox 18.0
+          flex-grow: $value;
+}
+
+///
+/// Flex shrink helper
+///
+/// @group flexbox
+/// @param {number | string} $value
+///
+/// @example scss
+///   .box {
+///     @include flex-shrink(1);
+///   }
+///
+///   // CSS Output
+///   .box {
+///     -webkit-flex-shring: 1;
+///        -moz-flex-shring: 1;
+///          -o-flex-shring: 1;
+///   }
+///
+@mixin flex-shrink($value) {
+  -webkit-flex-shrink: $value; // Chrome 21.0, Safari 6.1
+     -moz-flex-shrink: $value; // Firefox 18.0
+          flex-shrink: $value;
+}
+
+///
+/// Flex wrap helper
+///
+/// @group flexbox
+/// @param {string} $value
+///
+/// @example scss
+///   .box {
+///     @include flex-wrap(wrap);
+///   }
+///
+///   // CSS Output
+///   .box {
+///     -webkit-flex-wrap: wrap;
+///        -moz-flex-wrap: wrap;
+///          -o-flex-wrap: wrap;
+///   }
+///
+@mixin flex-wrap($value) {
+  -webkit-flex-wrap: $value; // Chrome 21.0, Safari 6.1
+     -moz-flex-wrap: $value; // Firefox 18.0
+          flex-wrap: $value;
+}
+
+///
+/// align content helper
+///
+/// @group flexbox
+/// @param {string} $value
+///
+/// @example scss
+///   .box {
+///     @include align-content(flex-start);
+///   }
+///
+///   // CSS Output
+///   .box {
+///     -webkit-align-content: flex-start;
+///             align-content: flex-start;
+///   }
+///
+@mixin align-content($value) {
+  -webkit-align-content: $value; // Safari 7.0
+          align-content: $value;
+}
+
+///
+/// align items helper
+///
+/// @group flexbox
+/// @param {string} $value
+///
+/// @example scss
+///   .box {
+///     @include align-items(flex-start);
+///   }
+///
+///   // CSS Output
+///   .box {
+///     -webkit-align-items: flex-start;
+///             align-items: flex-start;
+///   }
+///
+@mixin align-items($value) {
+  -webkit-align-items: $value; // Safari 7.0
+          align-items: $value;
+}
+
+///
+/// align self helper
+///
+/// @group flexbox
+/// @param {string} $value
+///
+/// @example scss
+///   .box {
+///     @include align-self(flex-start);
+///   }
+///
+///   // CSS Output
+///   .box {
+///     -webkit-align-self: flex-start;
+///             align-self: flex-start;
+///   }
+///
+@mixin align-self($value) {
+  -webkit-align-self: $value; // Safari 7.0
+          align-self: $value;
+}
+
+///
+/// display flex helper
+///
+/// @group flexbox
+///
+/// @example scss
+///   .box {
+///     @include display-flex;
+///   }
+///
+///   // CSS Output
+///   .box {
+///     display: -webkit-flex;
+///     display: flex;
+///   }
+///
+@mixin display-flex() {
+  display: -webkit-flex;
+  display: flex;
+}
+
+///
+/// display inline flex helper
+///
+/// @group flexbox
+///
+/// @example scss
+///   .box {
+///     @include display-inline-flex;
+///   }
+///
+///   // CSS Output
+///   .box {
+///     display: -webkit-inline-flex;
+///     display: inline-flex;
+///   }
+///
+@mixin display-inline-flex() {
+  display: -webkit-inline-flex;
+  display: inline-flex;
+}
+
+///
+/// justify content helper
+///
+/// @group flexbox
+/// @param {string} $value
+///
+/// @example scss
+///   .box {
+///     @include justify-content(flex-start);
+///   }
+///
+///   // CSS Output
+///   .box {
+///     -webkit-justify-content: flex-start;
+///             justify-content: flex-start;
+///   }
+///
+@mixin justify-content($value) {
+  -webkit-justify-content: $value; // Safari 9.0
+          justify-content: $value;
+}
+
+///
+/// order helper
+///
+/// @group flexbox
+/// @param {number} $value
+///
+/// @example scss
+///   .box {
+///     @include order(2);
+///   }
+///
+///   // CSS Output
+///   .box {
+///     -webkit-order: 2;
+///             order: 2;
+///   }
+///
+@mixin order($value) {
+  -webkit-order: $value; // Safari 7.0
+          order: $value;
+}

data/sass/core/_helpers.scss

@@ -0,0 +1,452 @@
+///
+/// Remove the unit of a length
+/// @param {Number} $number - Number to remove unit from
+/// @return {Number} - Unitless number
+///
+/// @example scss - strip-unit function
+///   line-height: strip-unit(1.3333px);
+///
+///   // CSS Output
+///   line-height: 1.33333;
+///
+@function strip-unit($number) {
+  @if type-of($number) == 'number' and not unitless($number) {
+    @return $number / ($number * 0 + 1);
+  }
+
+  @return $number;
+}
+
+///
+/// Clearfix pseudo element
+///
+/// @example scss
+///   .container {
+///     @include clearfix;
+///   }
+///
+///   // CSS Output
+///   .container:after, .container:before {
+///     display: table;
+///     content: " ";
+///   }
+///
+///   .container:after {
+///     clear: both;
+///   }
+///
+@mixin clearfix() {
+  &:after,
+  &:before {
+    display: table;
+    content: " ";
+  }
+
+  &:after {
+    clear: both;
+  }
+}
+
+%clearfix {
+  @include clearfix();
+}
+
+///
+/// create grid system
+///
+/// @param {string} $prefix-name - prefix name for the grid system
+/// @param {number} $count - number of grid
+/// @param {number} $padding-size - size of padding
+///
+/// @example scss
+///   @include create-grid('.col-', 2, $padding-size);
+///
+///   // CSS Output
+///   .col1, .col2 {
+///     position: relative;
+///     float: left;
+///     min-height: 1px;
+///     padding-left: 15px;
+///     padding-right: 15px;
+///   }
+///
+///    .col1 {
+///       width: 50%;
+///    }
+///    .col2 {
+///      width: 100%;
+///    }
+///
+@mixin create-grid($prefix-name, $count, $padding-size) {
+  $elem: "";
+  @for $i from 1 through $count {
+    $elem: #{$elem + $prefix-name + $i};
+    @if $i != $count {
+      $elem: #{$elem + ","};
+    }
+  }
+
+  #{$elem} {
+    position: relative;
+    float: left;
+    min-height: 1px;
+    padding-left: $padding-size;
+    padding-right: $padding-size;
+  }
+
+  @for $i from 1 through $count  {
+    #{$prefix-name + $i} {
+      width: (100 / $count) * $i * 1%;
+    }
+  }
+
+}
+
+///
+/// create offset grid system
+///
+/// @param {number} $prefix-name - prefix name for grid offset system
+/// @param {number} $count - number of grid offset
+///
+/// @example scss
+///   @include create-grid-offset('.col-offset-', 2);
+///
+///   // CSS Output
+///   .col-offset-1 {
+///     margin-left: 50%;
+///   }
+///   .col-offset-2 {
+///     margin-left: 100%;
+///   }
+///
+@mixin create-grid-offset($prefix-name, $count) {
+  @for $i from 1 through $count  {
+    #{$prefix-name + $i} {
+      margin-left: (100 / $count) * $i * 1%;
+    }
+  }
+}
+
+///
+/// Sizing for square
+///
+/// @param {number} $size - size of square
+///
+/// @example scss
+///   .box {
+///     @include size(2px);
+///   }
+///
+///   // CSS Output
+///   .box {
+///     width:2px;
+///     height:2px;
+///   }
+///
+@mixin square($size) {
+  width: $size;
+  height: $size;
+}
+
+///
+/// Sizing pseudo element
+///
+/// @param {number} $width
+/// @param {number} $height
+///
+/// @example scss
+///   .box {
+///     @include size(2px, 10px);
+///   }
+///
+///   // CSS Output
+///   .box {
+///     width: 2px;
+///     height: 10px;
+///   }
+///
+@mixin size($width, $height) {
+  width: $width;
+  height: $height;
+}
+
+///
+/// Margin top and bottom pseudo element
+///
+/// @param {number} $size - margin size
+///
+/// @example scss
+///   .box {
+///     @include margin-vertical(2px);
+///   }
+///
+///   // CSS Output
+///   .box {
+///     margin-top: 2px;
+///     margin-bottom: 2px;
+///   }
+///
+@mixin margin-vertical($size) {
+  margin-top: $size;
+  margin-bottom: $size;
+}
+
+///
+/// Margin left and right pseudo element
+///
+/// @param {number} $size - margin size
+///
+/// @example scss
+///   .box {
+///     @include margin-horizontal(2px);
+///   }
+///
+///   // CSS Output
+///   .box {
+///     margin-left: 2px;
+///     margin-right: 2px;
+///   }
+///
+@mixin margin-horizontal($size) {
+  margin-left: $size;
+  margin-right: $size;
+}
+
+///
+/// Padding top and bottom pseudo element
+///
+/// @param {number} $size - padding size
+///
+/// @example scss
+///   .box {
+///     @include padding-vertical(2px);
+///   }
+///
+///   // CSS Output
+///   .box {
+///     padding-top: 2px;
+///     padding-bottom: 2px;
+///   }
+///
+@mixin padding-vertical($size) {
+  padding-top: $size;
+  padding-bottom: $size;
+}
+
+///
+/// Padding left and right pseudo element
+///
+/// @param {number} $size - padding size
+///
+/// @example scss
+///   .box {
+///     @include padding-horizontal(2px);
+///   }
+///
+///   // CSS Output
+///   .box {
+///     padding-left: 2px;
+///     padding-right: 2px;
+///   }
+///
+@mixin padding-horizontal($size) {
+  padding-left: $size;
+  padding-right: $size;
+}
+
+///
+/// Truncating text
+///
+/// @example scss
+///   .brand {
+///     @include text-overflow;
+///   }
+///
+///   // CSS Output
+///   .brand {
+///     overflow: hidden;
+///     text-overflow: ellipsis;
+///     white-space: nowrap;
+///   }
+@mixin text-overflow() {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+///
+/// Font face from local
+///
+/// @param {string} $font-family - Font name for used
+/// @param {string} $source - Source where font have been placed. Don't add extension here
+/// @param {list}   $extensions - list of extensions used for font
+///
+/// @example scss
+///   @include font-face-src('MyFont', '../fonts/MyFont', ttf otf);
+///
+///   // CSS Output
+///   @font-face {
+///     font-family: "MyFont";
+///     src: url('../fonts/MyFont.ttf') format('truetype'),
+///          url('../fonts/MyFont.otf') format('opentype');
+///   }
+///
+@mixin font-face-src($font-family, $source, $extensions) {
+  $map: (
+    'eot': #{"url('#{$source}.eot#iefix')"} #{"format('embedded-opentype')"},
+    'woff2': #{"url('#{$source}.woff2')"} #{"format('woff2')"},
+    'woff': #{"url('#{$source}.woff')"} #{"format('woff')"},
+    'ttf': #{"url('#{$source}.ttf')"} #{"format('truetype')"},
+    'otf': #{"url('#{$source}.otf')"} #{"format('opentype')"},
+    'svg': #{"url('#{$source}.svg#svfFontName')"} #{"format('svg')"}
+  );
+
+  $src: "";
+  @each $ext in $extensions {
+     $i: index($extensions, $ext);
+     $src: #{$src + map-get($map, $ext)};
+     @if $i != length($extensions) {
+      $src: #{$src + ","};
+     }
+  }
+
+  @font-face {
+    font-family: $font-family;
+    @if(index($extensions, 'eot')) {
+      src: url('#{$source}.eot');
+    }
+    src: $src;
+  }
+}
+
+///
+/// Opacity helper
+///
+/// @param {number} $value - Value of opacity must be between 0 and 1
+///
+/// @example scss
+///   .box {
+///     @include opacity(.3);
+///   }
+///
+///   // CSS Output
+///   .box {
+///     opacity: 0.2;
+///     filter: "alpha(opacity=20)";
+///   }
+///
+@mixin opacity($value) {
+  $opacity-ie: $value * 100; // opacity on IE is between 0 and 100
+  opacity: $value;
+  filter: "alpha(opacity=#{$opacity-ie})";
+}
+
+///
+/// Placeholder helper input element
+///
+/// @param {number} $selector - Pseudo element selector
+///
+/// @example scss
+///   @include placeholder('.form-control') {
+///     color: #DDDDDD;
+///   }
+///
+///   // CSS Output
+///   .form-control::-moz-placeholder {
+///     color: #FFFFFF;
+///   }
+///
+///   .form-control:-ms-input-placeholder {
+///     color: #FFFFFF;
+///   }
+///
+///   .form-control::-webkit-input-placeholder {
+///     color: #FFFFFF;
+///   }
+///
+@mixin placeholder($selector) {
+  #{$selector}::-moz-placeholder {
+    @content
+  }
+  #{$selector}:-ms-input-placeholder {
+    @content
+  }
+  #{$selector}::-webkit-input-placeholder {
+    @content
+  }
+}
+
+///
+/// Box shadow helper
+///
+/// @param {number} $value
+///
+/// @example scss
+///   .box {
+///     @include box-shadow(0px 2px 4px rgba(0,0,0,.4));
+///   }
+///
+///   // CSS Output
+///   .box {
+///     -webkit-box-shadow: 0px 2px 4px rgba(0,0,0,0.4);
+///        -moz-box-shadow: 0px 2px 4px rgba(0,0,0,0.4);
+///             box-shadow: 0px 2px 4px rgba(0,0,0,0.4);
+///   }
+///
+@mixin box-shadow($value) {
+  -webkit-box-shadow: $value; // Chrome 4.0, Safari 3.1
+     -moz-box-shadow: $value; // Firefox 3.5
+          box-shadow: $value;
+}
+
+///
+/// Box Sizing helper
+///
+/// @param {number} $value - box type
+///
+/// @example scss
+///   *,
+///   *:after,
+///   *:before {
+///     @include box-sizing(border-box);
+///   }
+///
+///   // CSS Output
+///   *,
+///   *:after,
+///   *:before {
+///     -webkit-box-sizing: border-box;
+///        -moz-box-sizing: border-box;
+///             box-sizing: border-box;
+///   }
+///
+@mixin box-sizing($value) {
+  -webkit-box-sizing: $value; // Chrome 4.0, Safari 3.2
+     -moz-box-sizing: $value; // Firefox 2.0
+          box-sizing: $value;
+}
+
+///
+/// User select helper
+///
+/// @param {number} $value
+///
+/// @example scss
+///   button {
+///     @include user-select(none);
+///   }
+///
+///   // CSS Output
+///   button {
+///     -webkit-user-select: none;
+///        -moz-user-select: none;
+///         -ms-user-select: none;
+///             user-select: none;
+///   }
+///
+@mixin user-select($value) {
+  -webkit-user-select: $value; // Chrome 6.0, Safari 3.1, Opera 15.0
+     -moz-user-select: $value; // Firefox 2.0
+      -ms-user-select: $value; // IE 10.0
+          user-select: $value;
+}