Sassifaction 0.0.2 → 0.0.3

data/sass/base/mixins/_placeholder.scss

@@ -0,0 +1,14 @@
+@mixin placeholder ($placeholder-color) {
+	&::webkit-input-placeholder {
+		color: $placeholder-color;
+	}
+	&:-moz-placeholder {
+		color: $placeholder-color;
+	}
+	&::-moz-placeholder {
+		color: $placeholder-color;
+	}
+	&:-ms-input-placeholder {
+		color: $placeholder-color;
+	}
+}

data/sass/base/mixins/_rwd-padding-margin.scss

@@ -0,0 +1,52 @@
+// *** pixeless padding
+
+// vertical and horizontal pixeless padding
+
+@mixin rwdpad($content, $paddingHEIGHT, $paddingWIDTH) {
+  padding: $paddingHEIGHT +px percentage($paddingWIDTH/$content);
+  padding: $paddingHEIGHT/$doc-font-size +rem percentage($paddingWIDTH/$content);
+}
+
+// horizontal pixeless padding
+
+@mixin rwdpadhoz($content, $paddingLEFT, $paddingRIGHT: $paddingLEFT) {
+  padding-left: percentage($paddingLEFT/$content);
+  padding-right: percentage($paddingRIGHT/$content);
+}
+
+// vertical pixeless padding
+
+@mixin rwdpadver($paddingHEIGHT) {
+  padding-top: $paddingHEIGHT +px;
+  padding-top: $paddingHEIGHT/$doc-font-size +rem;
+  padding-bottom: $paddingHEIGHT +px;
+  padding-bottom: $paddingHEIGHT/$doc-font-size +rem;
+}
+
+
+
+// *** pixeless margins
+
+
+// vertical and horizontal pixeless margins
+
+@mixin rwdmar($marginHEIGHT, $marginWIDTH, $content) {
+  margin: $marginHEIGHT +px percentage($marginWIDTH/$content);
+  margin: $marginHEIGHT/$doc-font-size +rem percentage($marginWIDTH/$content);
+}
+
+// horizontal pixeless margins
+
+@mixin rwdmarhoz($content, $marginLEFT, $marginRIGHT: $marginLEFT) {
+  margin-left: percentage($marginLEFT/$content);
+  margin-right: percentage($marginRIGHT/$content);
+}
+
+// vertical pixeless margins
+
+@mixin rwdmarver($marginHEIGHT) {
+  margin-top: $marginHEIGHT +px;
+  margin-top: $marginHEIGHT/$doc-font-size +rem;
+  margin-bottom: $marginHEIGHT +px;
+  margin-bottom: $marginHEIGHT/$doc-font-size +rem;
+}

data/sass/base/mixins/_shapes.scss

@@ -0,0 +1,24 @@
+// circles
+
+@mixin circle($size: 0) {
+  border-radius: 50%;
+  height: auto;
+  padding-bottom: 0% + $size;
+  width: 0% + $size;
+}
+
+// square
+
+@mixin square($size: 0) {
+  height: auto;
+  padding-bottom: 0% + $size;
+  width: 0% + $size;
+}
+
+// rectangle
+
+@mixin rectangle($size: 0) {
+  height: 0;
+  padding-bottom: 0% + $size / 3 *2;
+  width: 0% + $size;
+}

data/sass/base/mixins/_tint-and-shade.scss

@@ -0,0 +1,39 @@
+/*
+
+	Compass style tine & shade functions
+	////////////////////////////////////
+
+	Compass comes with two more colour functions that aren't available in 'bog standard' Sass.
+	These are the option to tint and shade a colour with white and black.
+	Tint & Shade are different to lighten and darken.
+
+	You would use these like you do any other Sass colour function.
+
+		body {
+			background-color: tint(red, 30%);
+		}
+		p {
+			color: shade(red, 70%);
+		}
+
+	Which would give the output
+
+		body {
+			background-color: #ff4c4c;
+		}
+
+		p {
+			color: #4c0000;
+		}
+
+*/
+
+	// Add percentage of white to a colour to recreate Compass' tint
+	@function tint($color, $percent){
+		@return mix(white, $color, $percent);
+	}
+
+	// Add percentage of black to a colour to recreate Compass' shade
+	@function shade($color, $percent){
+		@return mix(black, $color, $percent);
+	}

data/sass/base/mixins/_triangles.scss

@@ -0,0 +1,23 @@
+//==== Example: @include css-triangle ("up", 10px, #fff);
+@mixin css-triangle ($direction: "down", $size: 20px, $color: #000) {
+	width: 0;
+	height: 0;
+	border-left: $size solid #{setTriangleColor($direction, "left", $color)};
+	border-right: $size solid #{setTriangleColor($direction, "right", $color)};
+	border-bottom: $size solid #{setTriangleColor($direction, "bottom", $color)};
+	border-top: $size solid #{setTriangleColor($direction, "top", $color)};
+}
+
+//Utility function to return the relevant colour depending on what type of arrow it is
+@function setTriangleColor($direction, $side, $color) {
+
+	@if $direction == "left" and $side == "right"
+	or  $direction == "right" and $side == "left"
+	or $direction == "down" and $side == "top"
+	or $direction == "up" and $side == "bottom" {
+		@return $color
+	} @else {
+		@return "transparent";
+	}
+
+}

data/sass/base/mixins/_typography.scss

@@ -0,0 +1,91 @@
+/*
+
+Vertical Rhythm Mixin
+
+This mixin is to help create a typograhpical baseline grid but also to allow for specifying different line heights or bottom margins if you need to.
+
+In this mixin you can specifiy the font size in PX and it will calculate the REM based on your $doc-font-size & $doc-line-height variables.
+
+	@include font-size(24);
+
+It will also create a bottom margin based on the $doc-font-size & $doc-line-height variables unless you specify that it shouldn't have one -
+
+	@include font-size(24, no);
+
+Or if you want to specify a different bottom margin to be generated -
+
+	@include font-size(24,32);
+
+This mixin also generates a pixel-less line height by default unless you specify that you either don't want one where I'd suggest declaring 1 within the mixin -
+
+	@include font-size(24, yes, 1);
+
+There's also the option to specify a different line-height for it to generate to, where you would specify the line-height in (effectively) it's pixel value -
+
+	@include font-size(24, yes, 40);
+
+*/
+
+// the magic mixin
+//////////////////
+
+  @mixin font-size($size, $margin: yes, $line-height: $doc-line-height) {
+
+  // generates the font-size in REMs with a PX fallback
+
+    font-size: 0px + $size;
+    font-size: 0rem + $size / $doc-font-size;
+
+  // line-height functions
+  ////////////////////////
+
+  // if you a line-height is specified in the mixin
+    @if $line-height != $doc-line-height and $line-height != 1 {
+      line-height: ceil($size / $line-height) * ($line-height / $size);
+    }
+
+  // if $line-height == 1 because, typing 1 is quicker than 16
+    @else if $line-height == 1 {
+      line-height: 1;
+    }
+
+  // normal $line-height if the line-height is left.
+    @else {
+      line-height: ceil($size / $doc-line-height) * ($doc-line-height / $size);
+    }
+
+    // margin-bottom functions
+    //////////////////////////
+
+      // if no is bottom margin is required
+      @if $margin == no {
+        margin-bottom: 0;
+      }
+
+    // if a specific bottom margin is required
+      @else if $margin != yes and $margin != no {
+        margin-bottom: 0px + $margin;
+        margin-bottom: 0rem + ($margin / $doc-font-size);
+      }
+
+    // if you're keeping the vertical rhythm with the margin
+      @else {
+        margin-bottom: 0px + $doc-line-height;
+        margin-bottom: 0rem + ($doc-line-height / $doc-font-size);
+      }
+  }
+
+/*
+
+	REMs with PX fallback mixin
+
+	Sometimes you would only want to define the fonts' size on an element.
+	Rather than make the vertical rhythm mixin more convoluted here is a separate mixin
+	to be used to give REMs for modern browsers and PX for OldIE and Opera mini
+
+*/
+
+@mixin font-rem($size) {
+  font-size: 0px + $size;
+  font-size: $size / $doc-font-size +rem;
+}

data/sass/partials/buttons/_buttons.scss

@@ -0,0 +1,137 @@
+// -------------------------------------
+//   beuticons
+// -------------------------------------
+
+
+// beautons is a beautifully simple button toolkit.
+//
+// Copyright 2013 Harry Roberts
+
+
+
+// - BASE -----------------------------
+
+@mixin btn{
+	display:inline-block;
+	vertical-align:middle;
+	white-space:nowrap;
+	font-family:inherit;
+	font-size:100%;
+	cursor:pointer;
+	border:none;
+	margin:0;
+	background-color: $button-bg-color;
+	color: $button-color;
+	border-radius:4px;
+	overflow:visible;
+	text-decoration: none;
+	&:hover, &:active, &:focus, &:visited {
+		text-decoration: none;
+	}
+	&:hover{
+		box-shadow:0 0 5px rgba(0, 0, 0, 0.5);
+	}
+	&:active, &:focus {
+		outline:none;
+		box-shadow:0 0 5px rgba(0, 0, 0, 0.5) inset;
+	}
+	&::-moz-focus-inner {
+		border: 0;
+		padding: 0;
+	}
+}
+@mixin btn-norm {
+	line-height:3;
+	height: 3em;
+	padding: 0 1em;
+}
+
+// - SIZES ----------------------------
+
+@mixin btn--small{
+	padding: 0 0.5em;
+	line-height:2;
+	height:     2em;
+}
+
+@mixin btn--large{
+	padding: 0 1.5em;
+	line-height:4;
+	height:     4em;
+}
+
+@mixin btn--huge{
+	padding: 0 2em;
+	line-height:5;
+	height:     5em;
+}
+
+@mixin btn--full{
+	width:100%;
+	padding-right:0;
+	padding-left: 0;
+	text-align:center;
+}
+
+// - FONT SIZES -----------------------
+
+@mixin btn--alpha{
+	font-size:3rem;
+}
+
+@mixin btn--beta{
+	font-size:2rem;
+}
+
+@mixin btn--gamma{
+	font-size:1rem;
+}
+
+
+@mixin btn--natural{
+	vertical-align:baseline;
+	font-size:inherit;
+	line-height:inherit;
+	height:auto;
+	padding-right:0.5em;
+	padding-left: 0.5em;
+}
+
+// - FUNCTIONS ------------------------
+
+@mixin btn--primary{}
+@mixin btn--secondary{}
+@mixin btn--tertiary{}
+
+
+@mixin btn--positive{
+	background-color:#4A993E;
+	color:#fff;
+}
+
+@mixin btn--negative{
+	background-color:#b33630;
+	color:#fff;
+}
+
+@mixin btn--inactive{
+	&:hover,
+	&:active,
+	&:focus{
+		background-color:#ddd;
+		color:#777;
+		cursor:default;
+		box-shadow:none;
+	}
+}
+
+// - STYLES ---------------------------
+
+
+@mixin btn--soft{
+	border-radius:5em;
+}
+
+@mixin btn--hard{
+	border-radius:0;
+}

data/sass/partials/colors/_colors.scss

@@ -0,0 +1,58 @@
+/*
+
+## Colors
+
+This is for a color-swatch, requires Compass at the moment.
+
+<ul class="swatch theme-colors">
+	<li></li>
+	<li></li>
+	<li></li>
+	<li></li>
+	<li></li>
+	<li></li>
+	<li></li>
+</ul>
+
+*/
+
+.swatch {
+	clear: both;
+	float: left;
+	max-width: 640px;
+	li {
+		border: 1px solid black;
+		border-radius: 8px;
+		float: left;
+		height: 120px;
+		list-style: none;
+		margin: 0 4px 4px 0;
+		width: 120px;
+	}
+}
+
+.theme-colors {
+	li {
+		background-color: $base-color;
+		&:nth-child(2) {
+			background-color: $comp-color;
+		}
+		&:nth-child(3) {
+			background-color: $tertiary-color;
+		}
+		&:nth-child(4) {
+			background-color: $alt-1;
+		}
+		&:nth-child(5) {
+			background-color: $alt-2;
+		}
+		&:nth-child(6) {
+			clear: both;
+			background-color: $white;
+		}
+		&:nth-child(7) {
+			background-color: $black;
+		}
+	}
+}
+