tamem-scss 1.0.2

data/sass/core/_rounded.scss

@@ -0,0 +1,143 @@
+///
+/// Rounded corner helper
+///
+/// @group rounded-corner
+/// @param {number} $size
+///
+/// @example scss
+///   .box {
+///     @include rounded(2px);
+///   }
+///
+///   // CSS Output
+///   .box {
+///     -webkit-border-radius: 2px;
+///        -moz-border-radius: 2px;
+///             border-radius: 2px;
+///   }
+///
+@mixin rounded($size) {
+  -webkit-border-radius: $size;
+     -moz-border-radius: $size;
+          border-radius: $size;
+}
+
+///
+/// Rounded corner on left side helper
+///
+/// @group rounded-corner
+/// @param {number} $size
+///
+/// @example scss
+///   .box {
+///     @include left-rounded(2px);
+///   }
+///
+///   // CSS Output
+///   .box {
+///     -webkit-border-top-left-radius: 2px;
+///     -webkit-border-bottom-left-radius: 2px;
+///        -moz-border-radius-topleft: 2px;
+///        -moz-border-radius-bottomleft: 2px;
+///             border-top-left-radius: 2px;
+///             border-bottom-left-radius: 2px;
+///   }
+///
+@mixin left-rounded($size) {
+  -webkit-border-top-left-radius: $size;
+  -webkit-border-bottom-left-radius: $size;
+     -moz-border-radius-topleft: $size;
+     -moz-border-radius-bottomleft: $size;
+          border-top-left-radius: $size;
+          border-bottom-left-radius: $size;
+}
+
+///
+/// Rounded corner on right side helper
+///
+/// @group rounded-corner
+/// @param {number} $size
+///
+/// @example scss
+///   .box {
+///     @include left-rounded(2px);
+///   }
+///
+///   // CSS Output
+///   .box {
+///     -webkit-border-top-right-radius: 2px;
+///     -webkit-border-bottom-right-radius: 2px;
+///        -moz-border-radius-topright: 2px;
+///        -moz-border-radius-bottomright: 2px;
+///             border-top-right-radius: 2px;
+///             border-bottom-right-radius: 2px;
+///   }
+///
+@mixin right-rounded($size) {
+  -webkit-border-top-right-radius: $size;
+  -webkit-border-bottom-right-radius: $size;
+     -moz-border-radius-topright: $size;
+     -moz-border-radius-bottomright: $size;
+          border-top-right-radius: $size;
+          border-bottom-right-radius: $size;
+}
+
+///
+/// Rounded corner on bottom helper
+///
+/// @group rounded-corner
+/// @param {number} $size
+///
+/// @example scss
+///   .box {
+///     @include left-rounded(2px);
+///   }
+///
+///   // CSS Output
+///   .box {
+///     -webkit-border-bottom-left-radius: 2px;
+///     -webkit-border-bottom-right-radius: 2px;
+///        -moz-border-radius-bottomleft: 2px;
+///        -moz-border-radius-bottomright: 2px;
+///             border-bottom-left-radius: 2px;
+///             border-bottom-right-radius: 2px;
+///   }
+///
+@mixin bottom-rounded($size) {
+  -webkit-border-bottom-left-radius: $size;
+  -webkit-border-bottom-right-radius: $size;
+     -moz-border-radius-bottomleft: $size;
+     -moz-border-radius-bottomright: $size;
+          border-bottom-left-radius: $size;
+          border-bottom-right-radius: $size;
+}
+
+///
+/// Rounded corner on top helper
+///
+/// @group rounded-corner
+/// @param {number} $size
+///
+/// @example scss
+///   .box {
+///     @include left-rounded(2px);
+///   }
+///
+///   // CSS Output
+///   .box {
+///     -webkit-border-top-left-radius: 2px;
+///     -webkit-border-top-right-radius: 2px;
+///        -moz-border-radius-topleft: 2px;
+///        -moz-border-radius-topright: 2px;
+///             border-top-left-radius: 2px;
+///             border-top-right-radius: 2px;
+///   }
+///
+@mixin top-rounded($size) {
+  -webkit-border-top-left-radius: $size;
+  -webkit-border-top-right-radius: $size;
+     -moz-border-radius-topleft: $size;
+     -moz-border-radius-topright: $size;
+          border-top-left-radius: $size;
+          border-top-right-radius: $size;
+}

data/sass/core/_transformation.scss

@@ -0,0 +1,647 @@
+///
+/// Transform helper
+///
+/// @group transform
+/// @param {string | list} $value
+///
+/// @example scss
+///   .box {
+///     @include transform(translate(50%, 50%));
+///   }
+///
+///   // CSS Output
+///   .box {
+///     -webkit-transform: translate(50%, 50%);
+///        -moz-transform: translate(50%, 50%);
+///         -ms-transform: translate(50%, 50%);
+///          -o-transform: translate(50%, 50%);
+///             transform: translate(50%, 50%);
+///   }
+///
+@mixin transform($value) {
+  -webkit-transform: $value;
+     -moz-transform: $value;
+      -ms-transform: $value;
+       -o-transform: $value;
+          transform: $value;
+}
+
+///
+/// Transform origin helper
+///
+/// @group transform
+/// @param {number | list} $value
+///
+/// @example scss
+///   .box {
+///     @include transform-origin(2px 4px);
+///   }
+///
+///   // CSS Output
+///   .box {
+///     -webkit-transform-origin: 2px 4px;
+///        -moz-transform-origin: 2px 4px;
+///         -ms-transform-origin: 2px 4px;
+///          -o-transform-origin: 2px 4px;
+///             transform-origin: 2px 4px;
+///   }
+///
+@mixin transform-origin($value) {
+  -webkit-transform-origin: $value;
+     -moz-transform-origin: $value;
+      -ms-transform-origin: $value;
+       -o-transform-origin: $value;
+          transform-origin: $value;
+}
+
+///
+/// Transform style helper
+///
+/// @group transform
+/// @param {string} $value
+///
+/// @example scss
+///   .box {
+///     @include transform-style(flat);
+///   }
+///
+///   // CSS Output
+///   .box {
+///     -webkit-transform-style: flat;
+///        -moz-transform-style: flat;
+///         -ms-transform-style: flat;
+///          -o-transform-style: flat;
+///             transform-style: flat;
+///   }
+///
+@mixin transform-style($value) {
+  -webkit-transform-style: $value;
+     -moz-transform-style: $value;
+      -ms-transform-style: $value;
+       -o-transform-style: $value;
+          transform-style: $value;
+}
+
+///
+/// Transform translate helper
+///
+/// @group transform
+/// @param {number} $x
+/// @param {number} $y
+///
+/// @example scss
+///   .box {
+///     @include translate(50%, 50%);
+///   }
+///
+///   // CSS Output
+///   .box {
+///     -webkit-transform: translate(50%, 50%);
+///        -moz-transform: translate(50%, 50%);
+///         -ms-transform: translate(50%, 50%);
+///          -o-transform: translate(50%, 50%);
+///             transform: translate(50%, 50%);
+///   }
+///
+@mixin translate($x, $y) {
+  -webkit-transform: translate($x, $y);
+     -moz-transform: translate($x, $y);
+      -ms-transform: translate($x, $y);
+       -o-transform: translate($x, $y);
+          transform: translate($x, $y);
+}
+
+///
+/// Transform translate3d helper
+///
+/// @group transform
+/// @param {number} $x
+/// @param {number} $y
+/// @param {number} $z
+///
+/// @example scss
+///   .box {
+///     @include translate3d(50%, 50%, 10%);
+///   }
+///
+///   // CSS Output
+///   .box {
+///     -webkit-transform: translate3d(50%, 50%, 10%);
+///        -moz-transform: translate3d(50%, 50%, 10%);
+///         -ms-transform: translate3d(50%, 50%, 10%);
+///          -o-transform: translate3d(50%, 50%, 10%);
+///             transform: translate3d(50%, 50%, 10%);
+///   }
+///
+@mixin translate3d($x, $y, $z) {
+  -webkit-transform: translate3d($x, $y, $z);
+     -moz-transform: translate3d($x, $y, $z);
+      -ms-transform: translate3d($x, $y, $z);
+       -o-transform: translate3d($x, $y, $z);
+          transform: translate3d($x, $y, $z);
+}
+
+///
+/// Transform translateX helper
+///
+/// @group transform
+/// @param {number} $x
+///
+/// @example scss
+///   .box {
+///     @include translateX(20px);
+///   }
+///
+///   // CSS Output
+///   .box {
+///     -webkit-transform: translateX(20px);
+///        -moz-transform: translateX(20px);
+///         -ms-transform: translateX(20px);
+///          -o-transform: translateX(20px);
+///             transform: translateX(20px);
+///   }
+///
+@mixin translateX($x) {
+  -webkit-transform: translateX($x);
+     -moz-transform: translateX($x);
+      -ms-transform: translateX($x);
+       -o-transform: translateX($x);
+          transform: translateX($x);
+}
+
+///
+/// Transform translateY helper
+///
+/// @group transform
+/// @param {number} $y
+///
+/// @example scss
+///   .box {
+///     @include translateY(20px);
+///   }
+///
+///   // CSS Output
+///   .box {
+///     -webkit-transform: translateY(20px);
+///        -moz-transform: translateY(20px);
+///         -ms-transform: translateY(20px);
+///          -o-transform: translateY(20px);
+///             transform: translateY(20px);
+///   }
+///
+@mixin translateY($y) {
+  -webkit-transform: translateY($y);
+     -moz-transform: translateY($y);
+      -ms-transform: translateY($y);
+       -o-transform: translateY($y);
+          transform: translateY($y);
+}
+
+///
+/// Transform translateZ helper
+///
+/// @group transform
+/// @param {number} $z
+///
+/// @example scss
+///   .box {
+///     @include translateZ(20px);
+///   }
+///
+///   // CSS Output
+///   .box {
+///     -webkit-transform: translateZ(20px);
+///        -moz-transform: translateZ(20px);
+///         -ms-transform: translateZ(20px);
+///          -o-transform: translateZ(20px);
+///             transform: translateZ(20px);
+///   }
+///
+@mixin translateZ($z) {
+  -webkit-transform: translateZ($z);
+     -moz-transform: translateZ($z);
+      -ms-transform: translateZ($z);
+       -o-transform: translateZ($z);
+          transform: translateZ($z);
+}
+
+///
+/// Transform scale helper
+///
+/// @group transform
+/// @param {number} $x
+/// @param {number} $y
+///
+/// @example scss
+///   .box {
+///     @include scale(0.5, 0.5);
+///   }
+///
+///   // CSS Output
+///   .box {
+///     -webkit-transform: scale(0.5, 0.5);
+///        -moz-transform: scale(0.5, 0.5);
+///         -ms-transform: scale(0.5, 0.5);
+///          -o-transform: scale(0.5, 0.5);
+///             transform: scale(0.5, 0.5);
+///   }
+///
+@mixin scale($x, $y) {
+  -webkit-transform: scale($x, $y);
+     -moz-transform: scale($x, $y);
+      -ms-transform: scale($x, $y);
+       -o-transform: scale($x, $y);
+          transform: scale($x, $y);
+}
+
+///
+/// Transform scale3d helper
+///
+/// @group transform
+/// @param {number} $x
+/// @param {number} $y
+/// @param {number} $z
+///
+/// @example scss
+///   .box {
+///     @include scale3d(0.2, 0.1, 0.3);
+///   }
+///
+///   // CSS Output
+///   .box {
+///     -webkit-transform: scale3d(0.2, 0.1, 0.3);
+///        -moz-transform: scale3d(0.2, 0.1, 0.3);
+///         -ms-transform: scale3d(0.2, 0.1, 0.3);
+///          -o-transform: scale3d(0.2, 0.1, 0.3);
+///             transform: scale3d(0.2, 0.1, 0.3);
+///   }
+///
+@mixin scale3d($x, $y, $z) {
+  -webkit-transform: scale3d($x, $y, $z);
+     -moz-transform: scale3d($x, $y, $z);
+      -ms-transform: scale3d($x, $y, $z);
+       -o-transform: scale3d($x, $y, $z);
+          transform: scale3d($x, $y, $z);
+}
+
+///
+/// Transform scaleX helper
+///
+/// @group transform
+/// @param {number} $x
+///
+/// @example scss
+///   .box {
+///     @include scaleX(2);
+///   }
+///
+///   // CSS Output
+///   .box {
+///     -webkit-transform: scaleX(2);
+///        -moz-transform: scaleX(2);
+///         -ms-transform: scaleX(2);
+///          -o-transform: scaleX(2);
+///             transform: scaleX(2);
+///   }
+///
+@mixin scaleX($x) {
+  -webkit-transform: scaleX($x);
+     -moz-transform: scaleX($x);
+      -ms-transform: scaleX($x);
+       -o-transform: scaleX($x);
+          transform: scaleX($x);
+}
+
+///
+/// Transform scaleY helper
+///
+/// @group transform
+/// @param {number} $y
+///
+/// @example scss
+///   .box {
+///     @include scaleY(2);
+///   }
+///
+///   // CSS Output
+///   .box {
+///     -webkit-transform: scaleY(2);
+///        -moz-transform: scaleY(2);
+///         -ms-transform: scaleY(2);
+///          -o-transform: scaleY(2);
+///             transform: scaleY(2);
+///   }
+///
+@mixin scaleY($y) {
+  -webkit-transform: scaleY($y);
+     -moz-transform: scaleY($y);
+      -ms-transform: scaleY($y);
+       -o-transform: scaleY($y);
+          transform: scaleY($y);
+}
+
+///
+/// Transform scaleZ helper
+///
+/// @group transform
+/// @param {number} $z
+///
+/// @example scss
+///   .box {
+///     @include scaleZ(2);
+///   }
+///
+///   // CSS Output
+///   .box {
+///     -webkit-transform: scaleZ(2);
+///        -moz-transform: scaleZ(2);
+///         -ms-transform: scaleZ(2);
+///          -o-transform: scaleZ(2);
+///             transform: scaleZ(2);
+///   }
+///
+@mixin scaleZ($z) {
+  -webkit-transform: scaleZ($z);
+     -moz-transform: scaleZ($z);
+      -ms-transform: scaleZ($z);
+       -o-transform: scaleZ($z);
+          transform: scaleZ($z);
+}
+
+///
+/// Transform skew helper
+///
+/// @group transform
+/// @param {number} $x - x-axis
+/// @param {number} $Y - y-axis
+///
+/// @example scss
+///   .box {
+///     @include skew(5deg, 5deg);
+///   }
+///
+///   // CSS Output
+///   .box {
+///     -webkit-transform: skew(5deg, 5deg);
+///        -moz-transform: skew(5deg, 5deg);
+///         -ms-transform: skew(5deg, 5deg);
+///          -o-transform: skew(5deg, 5deg);
+///             transform: skew(5deg, 5deg);
+///   }
+///
+@mixin skew($x, $y) {
+  -webkit-transform: skew($x, $y);
+     -moz-transform: skew($x, $y);
+      -ms-transform: skew($x, $y);
+       -o-transform: skew($x, $y);
+          transform: skew($x, $y);
+}
+
+///
+/// Transform skewX helper
+///
+/// @group transform
+/// @param {number} $x - x-axis
+///
+/// @example scss
+///   .box {
+///     @include skewX(5deg);
+///   }
+///
+///   // CSS Output
+///   .box {
+///     -webkit-transform: skewX(5deg);
+///        -moz-transform: skewX(5deg);
+///         -ms-transform: skewX(5deg);
+///          -o-transform: skewX(5deg);
+///             transform: skewX(5deg);
+///   }
+///
+@mixin skewX($x) {
+  -webkit-transform: skewX($x);
+     -moz-transform: skewX($x);
+      -ms-transform: skewX($x);
+       -o-transform: skewX($x);
+          transform: skewX($x);
+}
+
+///
+/// Transform skewY helper
+///
+/// @group transform
+/// @param {number} $y - y-axis
+///
+/// @example scss
+///   .box {
+///     @include skewY(5deg);
+///   }
+///
+///   // CSS Output
+///   .box {
+///     -webkit-transform: skewY(5deg);
+///        -moz-transform: skewY(5deg);
+///         -ms-transform: skewY(5deg);
+///          -o-transform: skewY(5deg);
+///             transform: skewY(5deg);
+///   }
+///
+@mixin skewY($y) {
+  -webkit-transform: skewY($y);
+     -moz-transform: skewY($y);
+      -ms-transform: skewY($y);
+       -o-transform: skewY($y);
+          transform: skewY($y);
+}
+
+///
+/// Transform rotate helper
+///
+/// @group transform
+/// @param {number} $deg - angle for rotate
+///
+/// @example scss
+///   .box {
+///     @include rotate(5deg);
+///   }
+///
+///   // CSS Output
+///   .box {
+///     -webkit-transform: rotate(5deg);
+///        -moz-transform: rotate(5deg);
+///         -ms-transform: rotate(5deg);
+///          -o-transform: rotate(5deg);
+///             transform: rotate(5deg);
+///   }
+///
+@mixin rotate($deg) {
+  -webkit-transform: rotate($deg);
+     -moz-transform: rotate($deg);
+      -ms-transform: rotate($deg);
+       -o-transform: rotate($deg);
+          transform: rotate($deg);
+}
+
+///
+/// Transform rotate3d helper
+///
+/// @group transform
+/// @param {number} $x - x-axis
+/// @param {number} $y - y-axis
+/// @param {number} $z - z-axis
+/// @param {number} $deg - angle for rotation
+///
+/// @example scss
+///   .box {
+///     @include rotate3d(5deg);
+///   }
+///
+///   // CSS Output
+///   .box {
+///     -webkit-transform: rotate3d(5deg);
+///        -moz-transform: rotate3d(5deg);
+///         -ms-transform: rotate3d(5deg);
+///          -o-transform: rotate3d(5deg);
+///             transform: rotate3d(5deg);
+///   }
+///
+@mixin rotate3d($x, $y, $z, $deg) {
+  -webkit-transform: rotate($x, $y, $z, $deg);
+     -moz-transform: rotate($x, $y, $z, $deg);
+      -ms-transform: rotate($x, $y, $z, $deg);
+       -o-transform: rotate($x, $y, $z, $deg);
+          transform: rotate($x, $y, $z, $deg);
+}
+
+///
+/// Transform rotateX helper
+///
+/// @group transform
+/// @param {number} $deg - x-axis to rotate
+///
+/// @example scss
+///   .box {
+///     @include rotateX(5deg);
+///   }
+///
+///   // CSS Output
+///   .box {
+///     -webkit-transform: rotateX(5deg);
+///        -moz-transform: rotateX(5deg);
+///         -ms-transform: rotateX(5deg);
+///          -o-transform: rotateX(5deg);
+///             transform: rotateX(5deg);
+///   }
+///
+@mixin rotateX($deg) {
+  -webkit-transform: rotateX($deg);
+     -moz-transform: rotateX($deg);
+      -ms-transform: rotateX($deg);
+       -o-transform: rotateX($deg);
+          transform: rotateX($deg);
+}
+
+///
+/// Transform rotateY helper
+///
+/// @group transform
+/// @param {number} $deg - y-axis to rotate
+///
+/// @example scss
+///   .box {
+///     @include rotateY(5deg);
+///   }
+///
+///   // CSS Output
+///   .box {
+///     -webkit-transform: rotateY(5deg);
+///        -moz-transform: rotateY(5deg);
+///         -ms-transform: rotateY(5deg);
+///          -o-transform: rotateY(5deg);
+///             transform: rotateY(5deg);
+///   }
+///
+@mixin rotateY($deg) {
+  -webkit-transform: rotateY($deg);
+     -moz-transform: rotateY($deg);
+      -ms-transform: rotateY($deg);
+       -o-transform: rotateY($deg);
+          transform: rotateY($deg);
+}
+
+///
+/// Transform rotateZ helper
+///
+/// @group transform
+/// @param {number} $deg - z-axis to rotate
+///
+/// @example scss
+///   .box {
+///     @include rotateZ(5deg);
+///   }
+///
+///   // CSS Output
+///   .box {
+///     -webkit-transform: rotateZ(5deg);
+///        -moz-transform: rotateZ(5deg);
+///         -ms-transform: rotateZ(5deg);
+///          -o-transform: rotateZ(5deg);
+///             transform: rotateZ(5deg);
+///   }
+///
+@mixin rotateZ($deg) {
+  -webkit-transform: rotateZ($deg);
+     -moz-transform: rotateZ($deg);
+      -ms-transform: rotateZ($deg);
+       -o-transform: rotateZ($deg);
+          transform: rotateZ($deg);
+}
+
+///
+/// Perspective helper
+///
+/// @group Perspective
+/// @param {number} $value
+///
+/// @example scss
+///   .box {
+///     @include perspective(200px);
+///   }
+///
+///   // CSS Output
+///   .box {
+///     -webkit-perspective: 200px;
+///        -moz-perspective: 200px;
+///             perspective: 200px;
+///   }
+///
+@mixin perspective($value) {
+  -webkit-perspective: $value;
+     -moz-perspective: $value;
+          perspective: $value;
+}
+
+///
+/// Perspective origin helper
+///
+/// @group Perspective
+/// @param {string | list} $value
+///
+/// @example scss
+///   .box {
+///     @include perspective-origin(50% 50%);
+///   }
+///
+///   // CSS Output
+///   .box {
+///     -webkit-perspective-origin: 50% 50%;
+///        -moz-perspective-origin: 50% 50%;
+///         -ms-perspective-origin: 50% 50%;
+///             perspective-origin: 50% 50%;
+///   }
+///
+@mixin perspective-origin($value) {
+  -webkit-perspective-origin: $value;
+     -moz-perspective-origin: $value;
+      -ms-perspective-origin: $value;
+          perspective-origin: $value;
+}