rapido-css 0.1.1 → 0.1.2

data/stylesheets/_functions.scss

@@ -1,4 +1,4 @@
-/* ====================================================================================================================
+/*
 
 Functions
 
@@ -6,51 +6,63 @@ For 99% of the framework I used Compass' and Susy's functions but I've made some
 
 Styleguide 24
 
-==================================================================================================================== */
+*/
 
-// Convert Easing from Transform to Transition
-// --------------------------------------------------------------------------------------------------------------------
+/*
+
+Easing
+
+There are lots of easing options available, from the basic ``linear`` or ``ease-in`` to more complex like ``easeInOutCirc``. For an example of all of these in use see [Easings.net](http://easings.net).
+
+* **Base**: linear, ease, ease-in, ease-out, ease-in-out
+* **easeIn**: easeInQuad, easeInCubic, easeInQuart, easeInQuint, easeInSine, easeInExpo, easeInCirc, easeInBack
+* **easeOut**: easeOutQuad, easeOutCubic, easeOutQuart, easeOutQuint, easeOutSine, easeOutExpo, easeOutCirc, easeOutBack
+* **easeInOut**: easeInOutQuad, easeInOutCubic, easeInOutQuart, easeInOutQuint, easeInOutSine, easeInOutExpo, easeInOutCirc, easeInOutBack
+
+Styleguide 20.2
+
+*/
 
 @function toBezier($easing) {
 
-	@if 	$easing == linear         { @return linear; }
-	@elseif $easing == ease           { @return ease; }
-	@elseif $easing == ease-in        { @return ease-in; }
-	@elseif $easing == ease-out       { @return ease-out; }
-	@elseif $easing == ease-in-out    { @return ease-in-out; }
-
-	@elseif $easing == easeInQuad     { @return cubic-bezier(0.550, 0.085, 0.680, 0.530); }
-	@elseif $easing == easeInCubic    { @return cubic-bezier(0.550, 0.055, 0.675, 0.190); }
-	@elseif $easing == easeInQuart    { @return cubic-bezier(0.895, 0.030, 0.685, 0.220); }
-	@elseif $easing == easeInQuint    { @return cubic-bezier(0.755, 0.050, 0.855, 0.060); }
-	@elseif $easing == easeInSine     { @return cubic-bezier(0.470, 0.000, 0.745, 0.715); }
-	@elseif $easing == easeInExpo     { @return cubic-bezier(0.950, 0.050, 0.795, 0.035); }
-	@elseif $easing == easeInCirc     { @return cubic-bezier(0.600, 0.040, 0.980, 0.335); }
-	@elseif $easing == easeInBack     { @return cubic-bezier(.600, -0.280, 0.735, 0.045); }
-
-	@elseif $easing == easeOutQuad    { @return cubic-bezier(0.250, 0.460, 0.450, 0.940); }
-	@elseif $easing == easeOutCubic   { @return cubic-bezier(0.215, 0.610, 0.355, 1.000); }
-	@elseif $easing == easeOutQuart   { @return cubic-bezier(0.165, 0.840, 0.440, 1.000); }
-	@elseif $easing == easeOutQuint   { @return cubic-bezier(0.230, 1.000, 0.320, 1.000); }
-	@elseif $easing == easeOutSine    { @return cubic-bezier(0.390, 0.575, 0.565, 1.000); }
-	@elseif $easing == easeOutExpo    { @return cubic-bezier(0.190, 1.000, 0.220, 1.000); }
-	@elseif $easing == easeOutCirc    { @return cubic-bezier(0.075, 0.820, 0.165, 1.000); }
-	@elseif $easing == easeOutBack    { @return cubic-bezier(0.175, 0.885, 0.320, 1.275); }
-
-	@elseif $easing == easeInOutQuad  { @return cubic-bezier(0.455, 0.030, 0.515, 0.955); }
-	@elseif $easing == easeInOutCubic { @return cubic-bezier(0.645, 0.045, 0.355, 1.000); }
-	@elseif $easing == easeInOutQuart { @return cubic-bezier(0.770, 0.000, 0.175, 1.000); }
-	@elseif $easing == easeInOutQuint { @return cubic-bezier(0.860, 0.000, 0.070, 1.000); }
-	@elseif $easing == easeInOutSine  { @return cubic-bezier(0.445, 0.050, 0.550, 0.950); }
-	@elseif $easing == easeInOutExpo  { @return cubic-bezier(1.000, 0.000, 0.000, 1.000); }
-	@elseif $easing == easeInOutCirc  { @return cubic-bezier(0.785, 0.135, 0.150, 0.860); }
-	@elseif $easing == easeInOutBack  { @return cubic-bezier(.680, -0.550, 0.265, 1.550); }
-	@else 							  { @return null; }
+    @if     $easing == linear         { @return linear; }
+    @elseif $easing == ease           { @return ease; }
+    @elseif $easing == ease-in        { @return ease-in; }
+    @elseif $easing == ease-out       { @return ease-out; }
+    @elseif $easing == ease-in-out    { @return ease-in-out; }
+
+    @elseif $easing == easeInQuad     { @return cubic-bezier(0.550, 0.085, 0.680, 0.530); }
+    @elseif $easing == easeInCubic    { @return cubic-bezier(0.550, 0.055, 0.675, 0.190); }
+    @elseif $easing == easeInQuart    { @return cubic-bezier(0.895, 0.030, 0.685, 0.220); }
+    @elseif $easing == easeInQuint    { @return cubic-bezier(0.755, 0.050, 0.855, 0.060); }
+    @elseif $easing == easeInSine     { @return cubic-bezier(0.470, 0.000, 0.745, 0.715); }
+    @elseif $easing == easeInExpo     { @return cubic-bezier(0.950, 0.050, 0.795, 0.035); }
+    @elseif $easing == easeInCirc     { @return cubic-bezier(0.600, 0.040, 0.980, 0.335); }
+    @elseif $easing == easeInBack     { @return cubic-bezier(.600, -0.280, 0.735, 0.045); }
+
+    @elseif $easing == easeOutQuad    { @return cubic-bezier(0.250, 0.460, 0.450, 0.940); }
+    @elseif $easing == easeOutCubic   { @return cubic-bezier(0.215, 0.610, 0.355, 1.000); }
+    @elseif $easing == easeOutQuart   { @return cubic-bezier(0.165, 0.840, 0.440, 1.000); }
+    @elseif $easing == easeOutQuint   { @return cubic-bezier(0.230, 1.000, 0.320, 1.000); }
+    @elseif $easing == easeOutSine    { @return cubic-bezier(0.390, 0.575, 0.565, 1.000); }
+    @elseif $easing == easeOutExpo    { @return cubic-bezier(0.190, 1.000, 0.220, 1.000); }
+    @elseif $easing == easeOutCirc    { @return cubic-bezier(0.075, 0.820, 0.165, 1.000); }
+    @elseif $easing == easeOutBack    { @return cubic-bezier(0.175, 0.885, 0.320, 1.275); }
+
+    @elseif $easing == easeInOutQuad  { @return cubic-bezier(0.455, 0.030, 0.515, 0.955); }
+    @elseif $easing == easeInOutCubic { @return cubic-bezier(0.645, 0.045, 0.355, 1.000); }
+    @elseif $easing == easeInOutQuart { @return cubic-bezier(0.770, 0.000, 0.175, 1.000); }
+    @elseif $easing == easeInOutQuint { @return cubic-bezier(0.860, 0.000, 0.070, 1.000); }
+    @elseif $easing == easeInOutSine  { @return cubic-bezier(0.445, 0.050, 0.550, 0.950); }
+    @elseif $easing == easeInOutExpo  { @return cubic-bezier(1.000, 0.000, 0.000, 1.000); }
+    @elseif $easing == easeInOutCirc  { @return cubic-bezier(0.785, 0.135, 0.150, 0.860); }
+    @elseif $easing == easeInOutBack  { @return cubic-bezier(.680, -0.550, 0.265, 1.550); }
+    @else                             { @return null; }
 
 }
 
 
-/* --------------------------------------------------------------------------------------------------------------------
+/*
 
 neg()
 
@@ -58,21 +70,21 @@ Convert a value to negative.
 
 Example:
 
-	left: neg(10em);
+    left: neg(10em);
 
 Become:
 
-	left: -10em
+    left: -10em
 
 Styleguide 24.2
 
--------------------------------------------------------------------------------------------------------------------- */
+*/
 
 @function neg($n) {
-	@return (0 - $n);
+    @return (0 - $n);
 }
 
-/* --------------------------------------------------------------------------------------------------------------------
+/*
 
 rhythm_neg()
 
@@ -81,22 +93,22 @@ Vertical Rhythm](http://compass-style.org/reference/compass/typography/vertical_
 
 Example:
 
-	margin-left: rhythm_neg(1);
+    margin-left: rhythm_neg(1);
 
 Become:
 
-	margin-left: -1.42857em;
+    margin-left: -1.42857em;
 
 Styleguide 24.3
 
--------------------------------------------------------------------------------------------------------------------- */
+*/
 
 @function rhythm_neg($i: 1) {
-	@return -(rhythm($i));
+    @return -(rhythm($i));
 }
 
 
-/* --------------------------------------------------------------------------------------------------------------------
+/*
 
 space_neg()
 
@@ -105,9 +117,24 @@ Similar to `rhythm_neg()` but for Susy's `space()` function, more info:
 
 Styleguide 24.4
 
--------------------------------------------------------------------------------------------------------------------- */
+*/
 
 @function space_neg($w: 1, $c: 12) {
-	@return -(space($w, $c));
+    @return -(space($w, $c));
 }
 
+/*
+
+strip_units()
+
+Remove eny type of unit from a number, more info:
+[StackOverflow](http://stackoverflow.com/questions/12328259/how-do-you-strip-the-unit-from-any-number-in-sass).
+
+Styleguide 24.5
+
+*/
+
+
+@function strip_units($number) {
+    @return $number / ($number * 0 + 1);
+}

data/stylesheets/_susy.scss

@@ -1,13 +1,16 @@
-// Susy
-// ====================================================================================================================
+// ---------------------------------------------------------------------------
+// Partials
 
-@import "susy/susy_support";
-@import "susy/susy_units";
-@import "susy/susy_settings";
-@import "susy/susy_functions";
-@import "susy/susy_grid";
-@import "susy/susy_isolation";
-@import "susy/susy_padding";
-@import "susy/susy_margin";
-@import "susy/susy_media";
-@import "susy/susy_background";
+// temporary
+@import "susy/support";
+@import "susy/units";
+
+// permanent
+@import "susy/settings";
+@import "susy/functions";
+@import "susy/grid";
+@import "susy/isolation";
+@import "susy/padding";
+@import "susy/margin";
+@import "susy/media";
+@import "susy/background";

data/stylesheets/components/_alerts.scss

@@ -1,4 +1,4 @@
-/* ====================================================================================================================
+/*
 
 Alerts
 
@@ -12,25 +12,25 @@ Markup:
 
 Styleguide 1
 
-==================================================================================================================== */
+*/
 
 @if $alerts {
 
-	.alert {
-		padding: $alerts-padding;
-		margin-bottom: rhythm();
-		@extend %alert;
+  .alert {
+    padding: $alerts-padding;
+    margin-bottom: rhythm();
+    @extend %alert;
 
-		p { margin: 0; }
+    p { margin: 0; }
 
-		.close {
-			position: relative;
-			top: 0;
-			right: 0;
-		}
-	}
+    .close {
+      position: relative;
+      top: 0;
+      right: 0;
+    }
+  }
 
-/* --------------------------------------------------------------------------------------------------------------------
+/*
 
 Alert Block
 
@@ -45,14 +45,14 @@ Markup:
   <p>The field Total Expenses is required and must contain a value.</p>
 </div>
 
-Styleguide 1.2
+Styleguide 1.1
 
--------------------------------------------------------------------------------------------------------------------- */
+*/
 
 
-	.alert--block {
-		* { margin-bottom: 0; }
-		* + * {  margin-top: 5px; }
-	}
+  .alert--block {
+    * { margin-bottom: 0; }
+    * + * {  margin-top: 5px; }
+  }
 
-}
+}

data/stylesheets/components/_breadcrumbs.scss

@@ -1,32 +1,32 @@
-/* ====================================================================================================================
+/*
 
 Breadcrumbs
 
 Add a breadcrumb with a list with class `.breadcrumb`.
 
-	<ul class="breadcrumbs">
-	  <li><a href="#">Home</a></li>
-	  <li><a href="#">Library</a></li>
-	  <li class="current">Data</li>
-	</ul>
+    <ul class="breadcrumbs">
+      <li><a href="#">Home</a></li>
+      <li><a href="#">Library</a></li>
+      <li class="current">Data</li>
+    </ul>
 
 **`.active`**: Selected element style
 
-Styleguide 2.1
+Styleguide 2
 
-==================================================================================================================== */
+*/
 
 
 @if $breadcrumbs {
 
-	.breadcrumbs {
-		margin: 0 0 rhythm();
-		list-style: none;
-		@extend %breadcrumbs !optional;
+    .breadcrumbs {
+        margin: 0 0 rhythm();
+        list-style: none;
+        @extend %breadcrumbs !optional;
 
-		> li { @include inline-block(); }
+        > li { @include inline-block(); }
 
-		.current {@extend %breadcrumbs__current !optional;}
-	}
+        .current {@extend %breadcrumbs__current !optional;}
+    }
 
 }

data/stylesheets/components/_button-groups.scss

@@ -1,4 +1,4 @@
-/* ====================================================================================================================
+/*
 
 Button Groups
 
@@ -13,68 +13,66 @@ Markup:
 
 Styleguide 4
 
-==================================================================================================================== */
+*/
 
 @if $button-groups {
 
-	.btn-group {
-		@extend .clearfix;
-		@include inline-block;
-		margin: 0;
-
-		> * {
-			float: left;
-			list-style-type: none;
-		}
-
-		&[data-width] .btn,
-		> *[data-width] .btn {
-			@extend %width-100;
-			padding-left: 0;
-			padding-right: 0;
-		}
-
-		// Space multiple inline groups
-		+ .btn-group { margin-left: em(5px); }
-
-		// Float button and reapply border radius
-		> .btn,
-		> li .btn {
-			float: left;
-			@include border-radius(0);
-		}
-
-		> li + li { margin-left: -$input-border; }
-
-		// On hover/focus/active, bring the proper btn to front
-		> .btn:hover,
-		> .btn:focus,
-		> .btn:active,
-		> .btn.active {
-			z-index: 2;
-		}
-
-	}
+    .btn-group {
+        @extend .clearfix;
+        @include inline-block;
+        margin: 0;
+
+        > * {
+            float: left;
+            list-style-type: none;
+        }
+
+        &[data-width] .btn,
+        > *[data-width] .btn {
+            @extend %width-100;
+            padding-left: 0;
+            padding-right: 0;
+        }
+
+        // Space multiple inline groups
+        + .btn-group { margin-left: em(5px); }
+
+        // Float button and reapply border radius
+        > .btn,
+        > li .btn {
+            float: left;
+            @include border-radius(0);
+        }
+
+        > li + li { margin-left: -$input-border; }
+
+        // On hover/focus/active, bring the proper btn to front
+        > .btn:hover,
+        > .btn:focus,
+        > .btn:active,
+        > .btn.active {
+            z-index: 2;
+        }
+
+    }
 
 // Generic
-// --------------------------------------------------------------------------------------------------------------------
 
-	.btn-group > li:first-child .btn					{ @include border-left-radius($base-border-radius); }
-	.btn-group > li:last-child .btn						{ @include border-right-radius($base-border-radius);	}
-	div.btn-group .btn									{ @include border-radius($base-border-radius); }
+    .btn-group > li:first-child .btn                    { @include border-left-radius($base-border-radius); }
+    .btn-group > li:last-child .btn                     { @include border-right-radius($base-border-radius);    }
+    div.btn-group .btn                                  { @include border-radius($base-border-radius); }
 
 // In Forms
-// --------------------------------------------------------------------------------------------------------------------
 
-	.form__controls--multi {
-		.btn-group:first-child > li:first-child .btn	{ }
-		.btn-group:first-child > li:last-child .btn		{ @include border-right-radius(0); }
-		div.btn-group:first-child .btn					{ @include border-right-radius(0); }
+    .form__controls--multi {
+        .btn-group:first-child > li:first-child .btn    { }
+        .btn-group:first-child > li:last-child .btn     { @include border-right-radius(0); }
+        div.btn-group:first-child .btn                  { @include border-right-radius(0); }
 
-		.btn-group:last-child > li:first-child .btn		{ @include border-left-radius(0); }
-		.btn-group:last-child > li:last-child .btn		{ }
-		div.btn-group:last-child > .btn					{ @include border-left-radius(0); }
-	}
+        .btn-group:last-child > li:first-child .btn     { @include border-left-radius(0); }
+        .btn-group:last-child > li:last-child .btn      { }
+        div.btn-group:last-child > .btn                 { @include border-left-radius(0); }
+    }
 
 }