rapido-css 0.0.2.1 → 0.0.3

data/README.md

@@ -0,0 +1,13 @@
+## Rapido Framework
+
+An easy and quick sass+compass+susy prototyping framework based on Bootstrap without all the default styles.
+
+### Credits:
+Bootstrap: https://github.com/twitter/bootstrap
+Twitter Bootstrap - For Compass:  https://github.com/vwall/compass-twitter-bootstrap
+Susy [a Compass plugin]: https://github.com/ericam/susy
+HTML5 Boilerplate: https://github.com/h5bp/html5-boilerplate
+
+### License
+
+MIT License. Copyright 2013 Raffaele Rasini. http://creativebits.it

data/stylesheets/_default-styles.scss

@@ -13,12 +13,13 @@
 	// Inputs
 	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
 	%input {
-		color: $text-color;
 		border-color: $gray;
 		background-color: $grayLighter;
+		@include box-shadow(inset 0 1px 0 #fff);
+		@include background-image(linear-gradient(bottom, $white 0%, $grayLighter 100%));
 
 		&:focus {
-			background-color: $grayLight;
+			@include background-image(linear-gradient(bottom, $white 50%, $grayLighter 100%));
 		}
 	}
 
@@ -32,13 +33,7 @@
 	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
 
 	%select {
-		color: $text-color;
-		border-color: $gray;
-		background-color: $grayLighter;
-
-		&:hover {
-			background-color: $grayLight;
-		}
+		@extend %input;
 	}
 
 	// Buttons
@@ -49,54 +44,77 @@
 		color: $text-color;
 		border-color: $gray;
 		background-color: $grayLight;
+		@include box-shadow(inset 0 1px 0 rgba(255,255,255,.5));
+		@include background-image(linear-gradient(bottom, $grayLight 0%, $grayLighter 100%));
+
+		// color: #FFF;
+		// border-color: $link-color;
+		// background-color: $link-color;
+		// @include box-shadow(inset 0 1px 0 rgba(255,255,255, .4));
+		// @include background-image(linear-gradient(bottom, $link-color-hover 0%, $link-color 100%));
 
 		// Hover/focus state
 		&:hover,
 		&:focus {
-			background-color: darken($grayLight, 10% );
+			@include background-image(linear-gradient(bottom, $grayLight 0%, $white 100%));
+			// @include background-image(linear-gradient(bottom, $link-color-hover 0%, lighten($link-color, 10) 100%));
 		}
 
 		// Active state
 		&.active,
 		&:active {
-			background-color: darken($grayLight, 20% );
+			@include background-image(linear-gradient(top, $grayLight 0%, $grayLighter 100%));
+			// @include background-image(linear-gradient(top, $link-color-hover 0%, $link-color 100%));
 		}
 	}
 
+	%btn_disabled {
+		color: $grayLight;
+		border-color: $grayLight;
+		background: #FFF;
+	}
+
+	%btn_current {
+		@include box-shadow(0 0 0);
+		background: $gray;
+		color: $white;
+	}
+
 	%btn-primary {
 		color: #fff;
 		border-color: darken(green, 10%);
 		background-color: green;
+		@include background-image(linear-gradient(bottom, darken(green, 10%) 0%, green 100%));
 
 		// Hover/focus state
 		&:hover,
 		&:focus {
-			background-color: darken(green, 5%);
+			@include background-image(linear-gradient(bottom, darken(green, 10%) 0%, lighten(green, 6) 100%));
 		}
 
 		// Active state
 		&.active,
 		&:active {
-			background-color: darken(green, 10%);
+			@include background-image(linear-gradient(top, darken(green, 10%) 0%, green 100%));
 		}
 	}
 
-
 	%btn-secondary {
 		color: #fff;
 		border-color: darken(red, 10%);
 		background-color: red;
+		@include background-image(linear-gradient(bottom, darken(red, 10%) 0%, red 100%));
 
 		// Hover/focus state
 		&:hover,
 		&:focus {
-			background-color: darken(red, 5%);
+			@include background-image(linear-gradient(bottom, darken(red, 10%) 0%, lighten(red, 20) 100%));
 		}
 
 		// Active state
 		&.active,
 		&:active {
-			background-color: darken(red, 10%);
+			@include background-image(linear-gradient(bottom, darken(red, 10%) 0%, red 100%));
 		}
 	}
 
@@ -133,7 +151,10 @@
 	// Pills (Labels & Badges)
 	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
 	%pill {
-		background-color: $gray;
+		// background-color: rgba(, );
+		@include alpha-color(#000, .35);
+		@include box-shadow(inset 0px 1px 1px rgba(0,0,0,.35));
+		text-shadow: 0 1px 1px rgba(0,0,0,.35);
 		color: $white;
 	}
 
@@ -145,12 +166,11 @@
 
 		.divider { @include nav-divider($gray); margin-top: -1px }
 
-		> li > a { border-bottom: 1px dotted $gray; }
+		> li > a,
+		> li > label { border-bottom: 1px dotted $gray; }
 
 		> li > a:hover,
 		> li > a:focus {
-		// .dropdown-submenu:hover > a,
-		// .dropdown-submenu:focus > a {
 			text-decoration: none;
 			background-color: $grayLight;
 		}
@@ -158,20 +178,16 @@
 
 	%dropdown-open {
 		background: $grayLighter;
-	    &:after {background-color: $grayLighter;}
+		border-bottom: 1px solid $grayLighter;
 	}
 
 
 	// Caret per Dropdown e Select
 	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
 
-	$caret-width: em(12px);
-
 	%caret {
-		min-width: $caret-width;
 		&:after {
-			@include triangle($caret-width, $gray, down);
-			margin-top: -($caret-width / 4);
+			@include icon-font(\f078);
 		}
 	}
 
@@ -239,43 +255,18 @@
 
 	// Pagination
 	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
-	%pagination_btn {
-		  background-color: $grayLight;
-		  border-color: $gray;
-	}
-
-	%pagination_btn-hover {
-		  background-color: $grayLighter;
-	}
-
-	%pagination_btn-active {
-		  color: #fff;
-		  background-color: $gray;
-	}
-
-	%pagination_btn-disabled {
-		  color: $grayLight;
-		  background-color: transparent;
-		  border-color: $grayLight;
-	}
-
+	%pagination-btn 			{ @extend %btn; }
+	%pagination-btn_hover 		{ }
+	%pagination-btn_active 		{ }
+	%pagination-btn_current 	{ @extend %btn_current; }
+	%pagination-btn_disabled 	{ @extend %btn_disabled; }
 
 	// Pager
 	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
-	%pager-btn {
-		  background-color: $grayLight;
-		  border-color: $gray;
-	}
-
-	%pager-btn_hover {
-		background-color: $grayLighter;
-	}
-
-	%pager-btn_disabled {
-		  color: $grayLight;
-		  background-color: #fff;
-		  border-color: $grayLight;
-	}
+	%pager-btn 					{ @extend %btn;}
+	%pager-btn_hover 			{ }
+	%pager-btn_active 			{ }
+	%pager-btn_disabled 		{ @extend %btn_disabled; }
 
 
 
@@ -433,44 +424,34 @@
 	%nav-big {}
 
 	%nav-small {
-		background-color: #272c33;
-
-		a {
-			color: #fff;
-			padding: $input-padding;
-			// &:after { display: none;}
-		}
+		background-color: $grayLighter;
 
-		ul,
-		ul li,
-		ul li a {
-			width: 100%;
-			border: 0;
-			margin: 0;
-			float: none;
-			display: block;
-			position: static;
-			text-align: left;
-			@include border-radius(0);
-			background-color: transparent;
+		// li,
+		// li * {
+		// 	@include border-radius(0);
+		// 	background: transparent;
+		// 	border: 0;
+		// 	display: block;
+		// 	float: none;
+		// 	margin: 0;
+		// 	position: static;
+		// 	text-align: left;
+		// 	width: 100%;
+		// }
+
+		.btn {
+			background: $grayLight;
 		}
 
-		.open {
-			background-color: lighten(#272c33, 10);
-
-			.btn.dropdown-toggle[data-toggle=dropdown] {
-				background-color: darken(#272c33, 10);
-			}
-		}
 	}
 
 	%nav-toggle {
 		@extend .btn;
-		@include square($responsive-nav-toggle-size);
-		font-size: $responsive-nav-toggle-size * .6;
-		padding: 0;
-		line-height: $responsive-nav-toggle-size;
-		span {@include hide-text();}
+
+		span {
+			@include hide-text();
+		}
+
 		&:before {
 			@include icon-font(\f0c9);
 		}

data/stylesheets/components/_button-groups.scss

@@ -5,14 +5,20 @@
 	.btn-group {
 		@extend .clearfix;
 		@include inline-block;
-		margin-bottom: 0;
-		position: relative;
-		vertical-align: middle;
-		white-space: nowrap;
-			> li {
+		margin: 0;
+		// position: relative;
+
+		> * {
 			float: left;
 			list-style-type: none;
-			display: inline-block;
+			// position: relative;
+		}
+
+		&[data-width] .btn,
+		> *[data-width] .btn {
+			@extend %width-100;
+			padding-left: 0;
+			padding-right: 0;
 		}
 
 		// Space multiple inline groups
@@ -22,32 +28,18 @@
 		// Float button and reapply border radius
 		// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
 		> .btn,
-		> li .btn {
+		> * .btn {
 			@include border-radius(0);
 			float: left;
-			position: relative;
-		}
-
-		> .btn + .btn,
-		> li + li {
-			margin-left: -($input-border);
-		}
-
-
-		> .btn:first-child,
-		> li:first-child .btn {
-			margin-left: 0;
-			@include border-top-left-radius($base-border-radius);
-			@include border-bottom-left-radius($base-border-radius);
-		}
-
-		> .btn:last-child,
-		> .dropdown-toggle,
-		> li:last-child .btn{
-			@include border-top-right-radius($base-border-radius);
-			@include border-bottom-right-radius($base-border-radius);
 		}
 
+		> * + * 							{ margin-left: -$input-border; }
+		> *:first-child,
+		> *:first-child .btn 				{ @include border-radius($base-border-radius 0 0 $base-border-radius); }
+		> *:last-child,
+		> *:last-child .btn 				{ @include border-radius(0 $base-border-radius $base-border-radius 0); }
+		> *:last-child:first-child,
+		> *:last-child:first-child .btn 	{ @include border-radius($base-border-radius); }
 
 		// On hover/focus/active, bring the proper btn to front
 		// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
@@ -59,4 +51,5 @@
 		}
 
 	}
-}
+}
+

data/stylesheets/components/_buttons.scss

@@ -25,11 +25,12 @@
 
 		&.active, &:active {outline: 0; }
 
-		&.disabled, &[disabled] {
-			cursor: default;
-			background-image: none;
-			@include opacity(65);
+		&.disabled, &.disabled:hover,
+		&[disabled],&[disabled]:hover {
 			@include box-shadow(none);
+			@include opacity(65);
+			background-image: none;
+			cursor: default;
 		}
 	}
 
@@ -52,8 +53,8 @@
 // --------------------------------------------------------------------------------------------------------------------
 
 	.btn {
-		height: $input-height;
 		padding: $btn-padding;
+		height: $input-height;
 	}
 
 	.btn--large, .btn--small, .btn--mini {
@@ -79,18 +80,26 @@
 // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
 // Block button
 // --------------------------------------------------------------------------------------------------------------------
-	.button--block {
+	.btn--block {
 		display: block;
 		width: 100%;
 		padding-left: 0;
 		padding-right: 0;
 
-		+ .button--block {
+		+ .btn--block {
 			margin-top: rhythm(.5);
 		}
 
 	}
 
+// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+// Pill button
+// --------------------------------------------------------------------------------------------------------------------
+
+	.btn--pill {
+		@include border-radius(200px);
+	}
+
 // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
 // Link buttons
 // --------------------------------------------------------------------------------------------------------------------

data/stylesheets/components/_dropdowns.scss

@@ -4,44 +4,37 @@
 
 @if $dropdowns {
 
-	.dropdown {
+	.dropdown,
+	.dropdown__toggle {
 		position: relative;
-		display: inline-block;
 	}
 
-	.dropdown-toggle {
-		line-height: 1em;
-	}
-
-	.dropdown-toggle:active,
-	.open .dropdown-toggle {
-		outline: 0;
-	}
+	.dropdown__toggle:focus { outline: 0; }
 
 	// Dropdown arrow/caret
 	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
-	.caret {
-		display: inline-block;
+	.dropdown__caret {
 		@extend %caret !optional;
-
 	}
 
 	// The dropdown menu (ul)
 	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
-	.dropdown-menu {
+	.dropdown__menu {
 		@extend %dropdown !optional;
 		@include border-bottom-radius($base-border-radius);
+		@include position(absolute, 100% 0 0 0px);
 		border-style: solid;
 		border-width: $input-border;
 		float: left;
-		left: 0;
 		list-style: none;
 		margin: -$input-border 0 0 0;
-		min-width: em(160px);
-		position: absolute;
-		top: 100%;
 		z-index: $zindex-dropdown;
 
+		display: none;
+		// @include transition();
+		// max-height: 0;
+		// opacity: 0;
+
 		&[data-content] { min-width: em(600px); }
 
 
@@ -51,20 +44,20 @@
 			left: auto;
 		}
 
-
 		// Links list inside the dropdown
-		> li > a {
-			@include adjust-font-size-to($base-font-size);
-			display: block;
-			padding: $dropdowns-padding;
-			line-height: 1em;
+		> li > a,
+		> li > label {
 			clear: both;
+			display: block;
 			font-weight: normal;
 			white-space: nowrap;
 		}
 
-		> li:last-child > a {
-			@include border-bottom-radius($base-border-radius);
+		> li > a { padding: $dropdowns-padding;}
+		> li > label { padding: nth($dropdowns-padding, 1) nth($dropdowns-padding, 2) nth($dropdowns-padding, 1) (nth($dropdowns-padding, 2) + em($checkbox-padding-left) ) ;}
+
+		> li:last-child > a,
+		> li:last-child > label {
 			border-bottom: 0;
 		}
 
@@ -72,32 +65,30 @@
 
 	// Hover/Focus state
 	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
-	.dropdown-menu > li > a:hover,
-	.dropdown-menu > li > a:focus,
-	.dropdown-submenu:hover > a,
-	.dropdown-submenu:focus > a {
+	.dropdown__menu > li > a:hover,
+	.dropdown__menu > li > a:focus {
 		text-decoration: none;
 	}
 
 	// Active state
 	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
-	.dropdown-menu > .active > a,
-	.dropdown-menu > .active > a:hover,
-	.dropdown-menu > .active > a:focus {
+	.dropdown__menu > .active > a,
+	.dropdown__menu > .active > a:hover,
+	.dropdown__menu > .active > a:focus {
 		text-decoration: none;
 		outline: 0;
 	}
 
 	// Disabled state
 	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
-	.dropdown-menu > .disabled > a,
-	.dropdown-menu > .disabled > a:hover,
-	.dropdown-menu > .disabled > a:focus {
+	.dropdown__menu > .disabled > a,
+	.dropdown__menu > .disabled > a:hover,
+	.dropdown__menu > .disabled > a:focus {
 		color: $grayLight;
 	}
 	// Nuke hover/focus effects
-	.dropdown-menu > .disabled > a:hover,
-	.dropdown-menu > .disabled > a:focus {
+	.dropdown__menu > .disabled > a:hover,
+	.dropdown__menu > .disabled > a:focus {
 		text-decoration: none;
 		background-color: transparent;
 		background-image: none;
@@ -106,38 +97,22 @@
 
 	// Open state for the dropdown
 	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
-	.open {
-		*z-index: $zindex-dropdown ;
+	.dropdown.open {
+		z-index: $zindex-dropdown ;
 
-		.btn.dropdown-toggle[data-toggle=dropdown] {
+		.dropdown__toggle {
 			@extend %dropdown-open !optional;
-			@include border-bottom-radius(0);
-			z-index: $zindex-dropdown + 1 !important;
-
-			&:after {
-				content: "";
-				position: absolute;
-				bottom: -1px; left: 0; right: 0;
-				height: 2px ;
-				z-index: $zindex-dropdown + 2;
-			}
+			@include border-bottom-radius(0 !important);
+			z-index: $zindex-dropdown + 1;
 		}
 
-		& > .dropdown-menu {}
-	}
+		.dropdown__menu {
+			display: block;
+			// max-height: 666px;
+			// opacity: 1;
+		}
 
-	// Open/Close Animations
-	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
-	.dropdown-menu {
-		@include transition();
-		opacity: 0;
-		overflow: hidden;
-		max-height: 0;
 	}
 
-	.open > .dropdown-menu {
-		opacity: 1;
-		max-height: 600px;
-	}
 
 }