Merged core back into main project

client/scss/base/mixins.scss

@@ -0,0 +1,142 @@
+/**
+ * Clearfix
+ *
+ * @return     {string}  Clearfix attribute
+ */
+@mixin clearfix {
+	&:after {
+		content: "";
+		display: table;
+		clear: both;
+	}
+}
+
+/**
+ * Placeholder attribute for inputs
+ *
+ * @return     {string}  Placeholder attributes
+ */
+@mixin placeholder {
+	&::-webkit-input-placeholder {@content};
+	&::-moz-placeholder {@content}
+	&:-ms-input-placeholder {@content}
+	&:placeholder-shown {@content};
+}
+
+/**
+ * Spinner element
+ *
+ * @param      {string}  $color             - Color
+ * @param      {string}  $dur               - Animation Duration
+ * @param      {int}     $width             - Width
+ * @param      {int}     $height  [$width]  - height
+ *
+ * @return     {string}  Spinner element
+ */
+@mixin spinner($color,$dur,$width,$height:$width) {
+	width: $width;
+	height: $height;
+	border-radius: 50%;
+	box-shadow:0 0 0 1px rgba(0,0,0,0.1), 2px 1px 0 $color;
+	@include prefix(animation, spin $dur linear infinite);
+	@include keyframes(spin) {
+		100%{
+		 @include prefix(transform, rotate(360deg));
+		}
+	};
+}
+
+/**
+ * Prefixes for keyframes
+ *
+ * @param      {string}  $animation-name          - The animation name
+ *
+ * @return     {string}  Prefixed keyframes attributes
+ */
+@mixin keyframes($animation-name) {
+		@-webkit-keyframes #{$animation-name} {
+				@content;
+		}
+		@-moz-keyframes #{$animation-name} {
+				@content;
+		}
+		@-o-keyframes #{$animation-name} {
+				@content;
+		}
+		@keyframes #{$animation-name} {
+				@content;
+		}
+}
+
+/**
+ * Prefix function for browser compatibility
+ *
+ * @param      {string}  $property          - Property name
+ * @param      {any}     $value             - Property value
+ *
+ * @return     {string}  Prefixed attributes
+ */
+@mixin prefix($property, $value) {
+	-webkit-#{$property}: #{$value};
+		 -moz-#{$property}: #{$value};
+			-ms-#{$property}: #{$value};
+			 -o-#{$property}: #{$value};
+					#{$property}: #{$value};
+}
+
+/**
+ * Layout Mixins
+ */
+@mixin from($device) {
+  @media screen and (min-width: $device) {
+    @content;
+  }
+}
+
+@mixin until($device) {
+  @media screen and (max-width: $device - 1px) {
+    @content;
+  }
+}
+
+@mixin mobile {
+  @media screen and (max-width: $tablet - 1px) {
+    @content;
+  }
+}
+
+@mixin tablet {
+  @media screen and (min-width: $tablet) {
+    @content;
+  }
+}
+
+@mixin tablet-only {
+  @media screen and (min-width: $tablet) and (max-width: $desktop - 1px) {
+    @content;
+  }
+}
+
+@mixin touch {
+  @media screen and (max-width: $desktop - 1px) {
+    @content;
+  }
+}
+
+@mixin desktop {
+  @media screen and (min-width: $desktop) {
+    @content;
+  }
+}
+
+@mixin desktop-only {
+  @media screen and (min-width: $desktop) and (max-width: $widescreen - 1px) {
+    @content;
+  }
+}
+
+@mixin widescreen {
+  @media screen and (min-width: $widescreen) {
+    @content;
+  }
+}