rapido-css 0.0.3 → 0.0.4

data/stylesheets/_default-styles.scss

@@ -1,8 +1,34 @@
+/* ====================================================================================================================
+
+Default Styles
+
+One of the main reason of the existence of Rapido is because I wanted to separate pure framework code form styling.
+Every component refer to a silent class from `_default-style.scss`.
+
+These are all the classes available by default, others can be added or removed based on what component you want
+to enable or disable.
+
+Styleguide 30
+
+==================================================================================================================== */
 
 @if $default-styles {
 
-	// Titles
-	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+/* --------------------------------------------------------------------------------------------------------------------
+
+Titles
+
+    %h1                             # For <h1>
+    %h2                             # For <h2>
+    %h3                             # For <h3>
+    %h4                             # For <h4>
+    %h5                             # For <h5>
+    %h6                             # For <h6>
+
+Styleguide 30.1
+
+-------------------------------------------------------------------------------------------------------------------- */
+
 	%h1 {}
 	%h2 {}
 	%h3 {}
@@ -10,8 +36,18 @@
 	%h5 {}
 	%h6 {}
 
-	// Inputs
-	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+/* --------------------------------------------------------------------------------------------------------------------
+
+Inputs and Selects
+
+    %input                          # For the <input> and <textarea>
+    %input-addon                    # For the addon texts in forms
+    %select                         # Custom select style, by default it use %input
+
+Styleguide 30.2
+
+-------------------------------------------------------------------------------------------------------------------- */
+
 	%input {
 		border-color: $gray;
 		background-color: $grayLighter;
@@ -29,58 +65,62 @@
 		background-color: $grayLighter;
 	}
 
-	// Selects
-	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+    %select {
+        @extend %input;
+    }
 
-	%select {
-		@extend %input;
-	}
+/* --------------------------------------------------------------------------------------------------------------------
 
-	// Buttons
-	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+Buttons
+
+    %btn--default                   # Default button colors
+    %btn--primary                   # Default color for primary buttons
+    %btn--secondary                 # Default color for secondary buttons
+    %btn--scripts                   # Default buttons color for buttons used in scripts (slides, modals)
+
+    %btn__disabled                  # For disabled button
+    %btn__current                   # For current button (es. used in Pagination)
+
+Styleguide 30.3
 
-	// Default
-	%btn {
+-------------------------------------------------------------------------------------------------------------------- */
+
+    // Default
+	%btn--default {
 		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,
+		&.hover,
 		&:focus {
+			color: inherit;
 			@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 {
 			@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 {
+	%btn__disabled {
 		color: $grayLight;
 		border-color: $grayLight;
 		background: #FFF;
 	}
 
-	%btn_current {
+	%btn__current {
 		@include box-shadow(0 0 0);
 		background: $gray;
 		color: $white;
 	}
 
-	%btn-primary {
+	%btn--primary {
 		color: #fff;
 		border-color: darken(green, 10%);
 		background-color: green;
@@ -88,7 +128,9 @@
 
 		// Hover/focus state
 		&:hover,
+		&.hover,
 		&:focus {
+			color: #fff;
 			@include background-image(linear-gradient(bottom, darken(green, 10%) 0%, lighten(green, 6) 100%));
 		}
 
@@ -99,7 +141,7 @@
 		}
 	}
 
-	%btn-secondary {
+	%btn--secondary {
 		color: #fff;
 		border-color: darken(red, 10%);
 		background-color: red;
@@ -107,25 +149,22 @@
 
 		// Hover/focus state
 		&:hover,
+		&.hover,
 		&:focus {
+			color: #fff;
 			@include background-image(linear-gradient(bottom, darken(red, 10%) 0%, lighten(red, 20) 100%));
 		}
 
 		// Active state
 		&.active,
+		&.hover,
 		&:active {
 			@include background-image(linear-gradient(bottom, darken(red, 10%) 0%, red 100%));
 		}
 	}
 
-	%btn-warning {}
-	%btn-danger {}
-	%btn-info {}
-	%btn-success {}
-	%btn-inverse {}
-
-	// Generic style for buttons used by the scripts
-	%btn-scripts {
+    // Generic style for buttons For the scripts
+	%btn--scripts {
 		@include alpha-color(#000, .6, background);
 		color: #fff;
 		cursor: pointer;
@@ -140,26 +179,50 @@
 	}
 
 
-	// Captions
-	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+/* --------------------------------------------------------------------------------------------------------------------
+
+Captions
+
+    %caption                        # Used for the captions in .caption and modals
+
+Styleguide 30.4
+
+-------------------------------------------------------------------------------------------------------------------- */
+
 	%caption {
 		@include alpha-color(#000, .8, background);
 		color: #fff;
 		padding: $captions-padding;
 	}
 
-	// Pills (Labels & Badges)
-	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+/* --------------------------------------------------------------------------------------------------------------------
+
+Labels (Badges & Pills)
+
+    %pill                           # For the .badge and .pill
+
+Styleguide 30.5
+
+-------------------------------------------------------------------------------------------------------------------- */
+
 	%pill {
-		// 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;
 	}
 
-	// Dropdowns
-	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+/* --------------------------------------------------------------------------------------------------------------------
+
+Dropdowns
+
+    %dropdown                       # For the dropdown's list
+    %dropdown--open                 # For the drodpown button in .open state
+
+Styleguide 30.6
+
+-------------------------------------------------------------------------------------------------------------------- */
+
+
+
 	%dropdown {
 		background: $grayLighter;
 		border-color: $gray;
@@ -176,25 +239,28 @@
 		}
 	}
 
-	%dropdown-open {
+	%dropdown--open {
 		background: $grayLighter;
 		border-bottom: 1px solid $grayLighter;
 	}
 
 
-	// Caret per Dropdown e Select
-	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+/* --------------------------------------------------------------------------------------------------------------------
 
-	%caret {
-		&:after {
-			@include icon-font(\f078);
-		}
-	}
+Tables
+
+    %table--bordered                # For .table--bordered
+    %table--striped                 # For .table--striped
+    %table--hover                   # For .table--hover
+    %table--sortable                # For .table--sortable
+
+Styleguide 30.7
 
+-------------------------------------------------------------------------------------------------------------------- */
 
-	// Tables
-	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
-	%table-bordered {
+
+
+	%table--bordered {
 		thead {
 			th, td {
 				background-color: $gray;
@@ -206,11 +272,11 @@
 		}
 	}
 
-	%table-striped { background-color: $grayLighter;}
+	%table--striped { background-color: $grayLighter;}
 
-	%table-hover { background-color: $gray;}
+	%table--hover { background-color: $grayLighter;}
 
-	%table-sortable {
+	%table--sortable {
 		thead {
 			th {
 				&:hover {background: $grayDark }
@@ -220,22 +286,42 @@
 		}
 	}
 
-	// Navs
-	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
-	%nav-btn {}
+/* --------------------------------------------------------------------------------------------------------------------
+
+Navs
+
+    %nav--btn                       # For links in navs with .nav--btn
+    %nav--btn__hover                # For the :hover state of %nav--btn
+    %nav--btn__current              # For the current selected link
+    %nav--btn__disabled             # For the disabled links
+
+Styleguide 30.8
+
+-------------------------------------------------------------------------------------------------------------------- */
 
-	%nav-btn_hover { background-color: $grayLighter;}
+	%nav--btn {}
 
-	%nav-btn_active {
+	%nav--btn__hover { background-color: $grayLighter;}
+
+	%nav--btn__active {
 		color: $white;
 		background-color: $link-color;
 	}
 
-	%nav-btn_disabled {color: $grayLight;}
+	%nav--btn__disabled {color: $grayLight;}
+
+
+/* --------------------------------------------------------------------------------------------------------------------
+
+Breadcrumbs
 
+    %breadcrumb                     # Base style of breadcrumbs
+    %breadcrumb__current            # For the current selected link
+
+Styleguide 30.9
+
+-------------------------------------------------------------------------------------------------------------------- */
 
-	// Breadcrumbs
-	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
 	%breadcrumb {
 		> li {
 			&:after {
@@ -250,48 +336,83 @@
 				}
 			}
 		}
-		.active { color: $grayLight; }
 	}
 
-	// Pagination
-	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
-	%pagination-btn 			{ @extend %btn; }
-	%pagination-btn_hover 		{ }
-	%pagination-btn_active 		{ }
-	%pagination-btn_current 	{ @extend %btn_current; }
-	%pagination-btn_disabled 	{ @extend %btn_disabled; }
+    %breadcrumb__current { color: $grayLight; }
+
+/* --------------------------------------------------------------------------------------------------------------------
+
+Pagination
+
+    %pagination--btn                # For links in .pagination
+    %pagination--btn__hover         # For the :hover state of %pagination--btn
+    %pagination--btn__active        # For the :active  state of %pagination--btn
+    %pagination--btn__current       # For the current selected link
+    %pagination--btn__disabled      # For the disabled links
+
+Styleguide 30.10
+
+-------------------------------------------------------------------------------------------------------------------- */
+
 
-	// Pager
-	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
-	%pager-btn 					{ @extend %btn;}
-	%pager-btn_hover 			{ }
-	%pager-btn_active 			{ }
-	%pager-btn_disabled 		{ @extend %btn_disabled; }
 
+	%pagination--btn 			{ @extend %btn--default;  }
+	%pagination--btn__hover 	{ @extend %btn--default:hover;}
+	%pagination--btn__active 	{ }
+	%pagination--btn__current 	{ @extend %btn__current; }
+	%pagination--btn__disabled 	{ @extend %btn__disabled; }
 
+/* --------------------------------------------------------------------------------------------------------------------
 
-	// Loader icon
-	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
-	$loader-ico-size: 44px;
+Pager
+
+    %pager--btn                     # For the links in .pager
+    %pager--btn__hover              # For the :hover state of %pager--btn
+    %pager--btn__active             # For the :active  state of %pager--btn
+    %pager--btn__disabled           # For the disabled links
+
+Styleguide 30.11
+
+-------------------------------------------------------------------------------------------------------------------- */
+
+	%pager--btn 				{ @extend %btn--default; }
+	%pager--btn__hover 			{ }
+	%pager--btn__active 		{ }
+	%pager--btn__disabled 		{ @extend %btn__disabled; }
+
+/* --------------------------------------------------------------------------------------------------------------------
+
+Modals
+
+    %modal__btn                     # For all button links in modals
+    %modal__close                   # For the default close button
+    %modal__close--alt              # Alternative style for close button in iframes
+    %modal__btnbar-size             # Width and height of #fancybox-buttons
+    %modal__overlay                 # Color of background overlay
+    %modal__skin                    # For the modal window
+    %modal__nav                     # For the Next and Prev buttons
+    %modal__caption                 # For the caption
+    %modal__loading                 # Position and style of the loading icon
+
+Styleguide 30.12
+
+-------------------------------------------------------------------------------------------------------------------- */
 
-	%loader-ico { background: url('//cdn.jsdelivr.net/wp-advanced-ajax-page-loader/2.5.12/loaders/SMALL%20-%20Spinning%20Arrows.gif') center center no-repeat; }
 
-	// Modals
-	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
-	$modal-btn-size: em(30px);
 
 	// Buttons
-	%modal-btn {
-		@extend %btn-scripts !optional;
+	%modal__btn {
+		@extend %btn--scripts;
 		@include square($modal-btn-size);
 		line-height: $modal-btn-size;
 	}
 
-	%modal-close {
-		@include position(absolute, 0px (em(-5px) - $modal-btn-size) 0 0);
+	%modal__close {
+		$offset: -$modal-btn-size;
+		@include position(absolute, $offset .5em 0 0);
 	}
 
-	%modal-close-alt {
+	%modal__close--alt {
 		@include position(absolute, 0px 0px 0 0);
 		background-color: transparent;
 		color: $link-color;
@@ -300,12 +421,14 @@
 		}
 	}
 
-	%modal-btnbar-size {@include size($modal-btn-size, $modal-btn-size * 5);}
+	%modal__btnbar-size {@include size($modal-btn-size, $modal-btn-size * 5);}
 
 	// Other styles
-	%modal-overlay { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGNiqAcAAIgAgoGu+rEAAAAASUVORK5CYII='); }
+	%modal__overlay {
+		background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGNiqAcAAIgAgoGu+rEAAAAASUVORK5CYII=');
+	}
 
-	%modal-skin {
+	%modal__skin {
 		@include box-shadow(0 4px 10px rgba(0, 0, 0, 0.4));
 		@include border-radius($base-border-radius);
 		background: #fff;
@@ -323,30 +446,39 @@
 		.btnClose:after 			{ @include icon-font(\f00d); }
 	}
 
-	%modal-nav { margin-top: (0 - ($modal-btn-size / 2)); }
+	%modal__nav { margin-top: (0 - ($modal-btn-size / 2)); }
 
-	%modal-caption { @extend %caption !optional; }
+	%modal__caption { @extend %caption; }
 
-	%modal-loading {
+	%modal__loading {
 		margin-top: -($loader-ico-size / 2);
 		margin-left: -($loader-ico-size / 2);
-		opacity: 0.8;
+		@include opacity(.8);
 
 		div {
-			@extend %loader-ico !optional;
+			@extend %loader-ico;
 			@include square($loader-ico-size);
 
 		}
 	}
 
 
-	// Sliders
-	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
-	$slider-btn-size: em(30px);
+/* --------------------------------------------------------------------------------------------------------------------
+
+Sliders
+
+    %slider__btn                    # For all button links in sliders
+    %slider__pager                  # For the single  links in the pager
+    %slider__caption                # For the caption
+    %slider__loading                # Position and style of the loading icon
+
+Styleguide 30.13
+
+-------------------------------------------------------------------------------------------------------------------- */
 
 	// Buttons
-	%slider-btn {
-		@extend %btn-scripts !optional;
+	%slider__btn {
+		@extend %btn--scripts;
 		@include square($slider-btn-size);
 		line-height: $slider-btn-size;
 		margin-top: -($slider-btn-size / 2);
@@ -356,7 +488,7 @@
 	}
 
 	// Pager
-	%slider-pager {
+	%slider__pager {
 		@include position(absolute, 0 0 -30px 0);
 		padding-top: 20px;
 		.bx-pager-item {
@@ -372,80 +504,93 @@
 	}
 
 	// Other styles
-	%slider-caption { @extend %caption !optional; }
+	%slider__caption { @extend %caption; }
 
-	%slider-loading {
-		@extend %loader-ico !optional;
+	%slider__loading {
+		@extend %loader-ico;
 		@include alpha-color(#000, .60);
 		min-height: $loader-ico-size;
 	}
 
-	// Tabs
-	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+/* --------------------------------------------------------------------------------------------------------------------
 
-	%tab-nav {
-		//...
-	}
+Tabs
+
+    %tab__nav                       # For the tabs links container
+    %tab__btn                       # For the single tabs link
+    %tab__btn__hover                # For the :hover state of tabs link
+    %tab__btn__current              # For the current selected tab link
+    %tab__container                 # For the content continer
+
+Styleguide 30.14
 
-	%tab-btn {
+-------------------------------------------------------------------------------------------------------------------- */
+
+	%tab__nav { }
+
+	%tab__btn {
 		background: $grayLighter;
 		border: solid 1px $grayLight;
 		border-bottom: none;
 	}
 
-	%tab-btn_hover {
+	%tab__btn__hover {
 		background: $grayLighter;
 		border: solid 1px $grayLight;
 		border-bottom: none;
 	}
 
-	%tab-btn_current {
+	%tab__btn__current {
 		border-color: $gray;
 		&:after { background: $grayLighter; }
 	}
 
-	%tab-container {
+	%tab__container {
 		border: solid 1px $gray;
 		background: $grayLighter;
 	}
 
 
-	// Alerts
-	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+/* --------------------------------------------------------------------------------------------------------------------
+
+Alerts
+
+    %alert                          # For all alert messages
+
+Styleguide 30.15
+
+-------------------------------------------------------------------------------------------------------------------- */
 
 	%alert {
 		background-color: $grayLighter;
 		border: 1px solid $grayLight;
 	}
 
-	// Responsive NAV
-	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+/* --------------------------------------------------------------------------------------------------------------------
+
+Responsive Nav
+
+    %nav--responsive                # For the open nav state in responsive mode
+    %nav__toggle                    # For the toggle open/close button in responsive mode
+
+Styleguide 30.16
 
-	%nav-big {}
+-------------------------------------------------------------------------------------------------------------------- */
 
-	%nav-small {
+
+	%nav--responsive {
 		background-color: $grayLighter;
 
-		// 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;
+		a { padding: nth($btn-padding, 1) $wrapper-padding; }
+
+		> ul > li > a {
+			font-weight: bold;
+			background-color: $grayLight;
 		}
 
 	}
 
-	%nav-toggle {
+	%nav__toggle {
 		@extend .btn;
 
 		span {
@@ -457,5 +602,31 @@
 		}
 	}
 
+
+/* --------------------------------------------------------------------------------------------------------------------
+
+Shared
+
+Classes For other classes of generic elements
+
+    %caret                          # Side triangle For Dropdowns and Selects
+    %loader-ico                     # generic loader icon For all scripts
+
+Styleguide 30.17
+
+-------------------------------------------------------------------------------------------------------------------- */
+
+    %caret {
+        &:after {
+            @include icon-font(\f078);
+        }
+    }
+
+    %loader-ico {
+        background:
+            url('//cdn.jsdelivr.net/wp-advanced-ajax-page-loader/2.5.12/loaders/SMALL%20-%20Spinning%20Arrows.gif')
+            center center no-repeat;
+    }
+
 }