Sassifaction 0.0.2 → 0.0.3

data/sass/partials/components/_alerts.scss

@@ -0,0 +1,59 @@
+/*
+
+Alerts
+=====================
+
+<div class="alert alert-success">
+	<p><strong>Well done!</strong> You successfully read this important alert message.</p>
+</div>
+
+<div class="alert alert-info">
+	<p><strong>Heads up!</strong> This alert needs your attention, but it's not super important.</p>
+</div>
+
+<div class="alert alert-warning">
+	<p><strong>Warning!</strong> Best check yo self, you're not looking too good.</p>
+</div>
+
+<div class="alert alert-danger">
+	<p><strong>Oh snap!</strong> Change a few things up and try submitting again.</p>
+</div>
+
+*/
+
+.alert {
+	@include remit(margin-bottom, $doc-line-height);
+
+	border: 1px solid rgba(0, 0, 0, 0);
+	border-radius: $radius-sml;
+	padding: $doc-font-size;
+}
+
+.alert-success {
+	background-color: $success-color;
+
+	& > p {
+		color: darken($success-color, 30%);
+	}
+}
+.alert-info {
+	background-color: $info-color;
+
+	& > p {
+		color: darken($info-color, 30%);
+	}
+}
+.alert-warning {
+	background-color: $warning-color;
+
+	& > p {
+		color: darken($warning-color, 30%);
+	}
+}
+.alert-danger {
+	background-color: $danger-color;
+
+	& > p {
+		color: darken($danger-color, 30%);
+	}
+}

data/sass/partials/components/_horizontal-rules.scss

@@ -0,0 +1,46 @@
+/*
+
+Horizontal Rules
+=====================
+
+<hr class="rule">
+<hr class="rule rule--dotted">
+<hr class="rule rule--dashed">
+<hr class="rule rule--ornament">
+
+*/
+
+.rule{
+	@include remit(margin-bottom, $doc-line-height);
+
+	border:none;
+	border-bottom-width:1px;
+	border-bottom-style:solid;
+	color: pink;
+}
+
+.rule--dotted{
+	border-bottom-style:dotted;
+}
+
+.rule--dashed{
+	border-bottom-style:dashed;
+}
+
+.rule--ornament{
+	position:relative;
+
+	&:after{
+		content:"\00A7";
+		left:  0;
+		line-height:0;
+		position:absolute;
+		right: 0;
+		top:   0;
+		text-align:center;
+	}
+
+	&[data-ornament]:after{
+		content:attr(data-ornament);
+	}
+}

data/sass/partials/components/_labels.scss

@@ -0,0 +1,53 @@
+/*
+
+Labels
+======
+
+<h3>Example heading <span class="label label-default">New</span></h3>
+
+<span class="label label-default">Default</span>
+<span class="label label-primary">Primary</span>
+<span class="label label-success">Success</span>
+<span class="label label-info">Info</span>
+<span class="label label-warning">Warning</span>
+<span class="label label-danger">Danger</span>
+
+*/
+
+.label {
+	border-radius: $radius-sml;
+	color: #FFF;
+	display: inline;
+	font-size: 75%;
+	font-weight: bold;
+	line-height: 1;
+	padding: .2em .6em .3em;
+	text-align: center;
+	vertical-align: baseline;
+	white-space: nowrap;
+
+}
+
+.label-default {
+	background-color: $default-color;
+}
+
+.label-primary {
+	background-color: $primary-color;
+}
+
+.label-success {
+	background-color: $success-color;
+}
+
+.label-info {
+	background-color: $info-color;
+}
+
+.label-warning {
+	background-color: $warning-color;
+}
+
+.label-danger {
+	background-color: $danger-color;
+}

data/sass/partials/components/_wells.scss

@@ -0,0 +1,20 @@
+/*
+
+Wells
+=====
+
+<div class="well">
+	<p>This is a well</p>
+</div>
+
+*/
+
+.well {
+	@include remit(margin-bottom, $doc-line-height);
+
+	background-color: $white;
+	border: 1px solid $black;
+	border-radius: $radius-sml;
+	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
+	padding: $doc-font-size;
+}

data/sass/partials/forms/_big-form.scss

@@ -0,0 +1,125 @@
+/*
+
+Forms
+=====
+
+<form action="/">
+	<fieldset>
+		<label for="name">Name</label>
+		<input type="text" id="name" class="form-text" />
+		<p class="form-help">This is help text under the form field.</p>
+		<label for="email">Email</label>
+		<input type="email" id="email" class="form-text" />
+	</fieldset>
+	<fieldset>
+		<label for="gender">Gender</label>
+		<select id="gender">
+			<option>Male</option>
+			<option>Female</option>
+			<option>Cylon</option>
+		</select>
+	</fieldset>
+	<fieldset class="radio">
+		<label for="notifications">Notifications</label>
+		<ul>
+			<li><label><input type="radio" name="notifications" /> Send me email</label></li>
+			<li><label><input type="radio" name="notifications" /> Don't send me email</label></li>
+			<li><label><input type="radio" name="notifications" /> Send me flowers</label></li>
+		</ul>
+	</fieldset>
+	<fieldset>
+		<label for="url">URL</label>
+		<input type="url" id="url" class="form-text" placeholder="http://yourdomain.com" />
+	</fieldset>
+	<fieldset>
+		<label for="bio">Bio</label>
+		<textarea id="bio"></textarea>
+	</fieldset>
+	<fieldset class="check">
+		<label><input type="checkbox" /> I accept the terms of service and lorem ipsum.</label>
+	</fieldset>
+	<fieldset class="form-actions">
+		<button type="submit">Submit</button>
+	</fieldset>
+</form>
+
+*/
+
+
+form {
+
+}
+
+fieldset {
+
+}
+
+label {
+
+}
+input {
+
+}
+input[type="text"] {
+
+}
+input[type="email"] {
+
+}
+input[type="checkbox"] {
+
+}
+input[type="radio"] {
+
+}
+
+select {
+
+}
+
+option {
+
+}
+textarea {
+
+}
+
+.radio {
+	> ul {
+
+	}
+
+	> ul > li {
+
+	}
+
+	label {
+
+	}
+
+	input {
+
+	}
+}
+.check {
+	label {
+
+	}
+
+	input {
+
+	}
+}
+.form-actions {
+	button {
+
+		&:hover, &:focus {
+
+		}
+
+		&:active {
+
+		}
+	}
+}
+

data/sass/partials/forms/_search-form.scss

@@ -0,0 +1,35 @@
+/*
+
+Search Forms
+============
+
+	<form action="/" class="search">
+		<fieldset>
+			<input type="text" placeholder="Search" />
+			<button type="submit">Go!</button>
+		</fieldset>
+	</form>
+
+*/
+
+.search {
+
+}
+
+.search fieldset {
+
+}
+
+.search input[type="text"] {
+
+}
+
+.search button {
+
+	&:hover, &:focus {
+
+	}
+	&:active {
+
+	}
+}

data/sass/partials/images/_base64.scss

@@ -0,0 +1,17 @@
+/*
+
+Base64 Images
+==============
+
+This file is to include placeholder selectors just for Base64 images
+
+*/
+
+%icon {
+	&:before {
+		background-position: center center;
+		background-repeat: no-repeat;
+		content: '';
+		position: absolute;
+	}
+}

data/sass/partials/images/_figure.scss

@@ -0,0 +1,23 @@
+/*
+
+Figure & Figcaption
+===================
+
+    <figure>
+        <img alt="" src="img/tmp/rock-hammer-1.jpg">
+        <figcaption>Figure caption</figcaption>
+    </figure>
+
+*/
+
+figure {
+
+}
+
+figure > img {
+
+}
+
+figcaption {
+
+}

data/sass/partials/images/_images.scss

@@ -0,0 +1,25 @@
+/*
+
+Images
+======
+
+    <img alt="" class="img-rounded" src="http://fillmurray.com/300/300" />
+    <img alt="" class="img-circle" src="http://fillmurray.com/300/300" />
+    <img alt="" class="img-polaroid" src="http://fillmurray.com/300/300" />
+
+*/
+
+.img-rounded {
+	border-radius: 4px;
+}
+
+.img-circle {
+	border-radius: 50%;
+}
+
+.img-polaroid {
+	background-color: $white;
+	border: 1px solid lighten($black, 90%);
+	box-shadow: 0 1px 3px rgba(0,0,3px,0.2);
+	padding: 12px;
+}

data/sass/partials/layout/_aside.scss

@@ -0,0 +1,12 @@
+/*
+
+Aside
+=====
+
+Styles for the aside element
+
+*/
+
+aside[role="complementary"] {
+
+}

data/sass/partials/layout/_base.scss

@@ -0,0 +1,22 @@
+/*
+
+Base Styles
+===========
+
+HTML, BODY, #wrapper styles
+
+*/
+
+html {
+
+}
+
+body {
+	min-width: 260px;
+	overflow-x: hidden;
+	width: 100%;
+}
+
+#wrapper {
+
+}