rapido-css 0.0.1

data/stylesheets/components/_buttons.scss

@@ -0,0 +1,121 @@
+//
+// Buttons
+// --------------------------------------------------
+
+
+// Base styles
+// --------------------------------------------------
+
+@if $buttons {
+	// Core
+	// .btn, a[class*="btn"], button[class*="btn"], input[class*="btn"] {
+	// [class^="btn"] {
+	[class*="btn"] {
+		@include border-radius($base-border-radius);
+		border-style: solid;
+		border-width: $input-border;
+		cursor: pointer;
+		display: inline-block;
+		line-height: 1em;
+		margin-bottom: 0;
+		text-align: center;
+		vertical-align: middle;
+
+		&:hover, &:focus { text-decoration: none; }
+
+		&:focus { @include tab-focus(); }
+
+		&.active, &:active {outline: 0; }
+
+		&.disabled, &[disabled] {
+			cursor: default;
+			background-image: none;
+			@include opacity(65);
+			@include box-shadow(none);
+		}
+
+
+		// Button Colors
+		// --------------------------------------------------
+		& 							{ @extend %btn !optional; }
+		&[class*="-primary"] 		{ @extend %btn-primary !optional; }
+		&[class*="-secondary"] 		{ @extend %btn-secondary !optional; }
+		&[class*="-warning"] 		{ @extend %btn-warning !optional; }
+		&[class*="-danger"] 		{ @extend %btn-danger !optional; }
+		&[class*="-info"] 			{ @extend %btn-info !optional; }
+		&[class*="-success"] 		{ @extend %btn-success !optional; }
+		&[class*="-inverse"] 		{ @extend %btn-inverse !optional; }
+
+		// Button Sizes
+		// --------------------------------------------------
+		& {
+			height: $input-height;
+			padding: $btn-padding;
+		}
+
+		&[class*="-large"],
+		&[class*="-small"],
+		&[class*="-mini"] {
+			height: auto;
+		}
+
+		&[class*="-large"] {
+			@include adjust-font-size-to($h5-size);
+			padding: $btn-large-padding;
+		}
+
+		&[class*="-small"] {
+			@include adjust-font-size-to($milli-size);
+			padding: $btn-small-padding;
+		}
+
+		&[class*="-mini"] {
+			@include adjust-font-size-to($micro-size);
+			padding: $btn-mini-padding;
+		}
+
+		// Block button
+		// -------------------------
+
+		&[class*="-block"] {
+			display: block;
+			width: 100%;
+			padding-left: 0;
+			padding-right: 0;
+		}
+
+		&[class*="-block"] + [class^="btn"][class*="-block"] {
+			margin-top: rhythm(.5);
+		}
+
+		// Link buttons
+		// --------------------------------------------------
+		&[class*="-link"],
+		&[class*="-link"]:active,
+		&[class*="-link"][disabled] {
+			background-color: transparent;
+			background-image: none;
+			@include box-shadow(none);
+		}
+		&[class*="-link"] {
+			border-color: transparent;
+			cursor: pointer;
+			color: $link-color;
+			@include border-radius(0);
+		}
+		&[class*="-link"]:hover,
+		&[class*="-link"]:focus {
+			color: $link-color-hover;
+			text-decoration: underline;
+			background-color: transparent;
+		}
+		&[class*="-link"][disabled]:hover,
+		&[class*="-link"][disabled]:focus {
+			color: $grayDark;
+			text-decoration: none;
+		}
+
+
+	}
+
+}

data/stylesheets/components/_captions.scss

@@ -0,0 +1,54 @@
+@if $captions {
+	[class^="caption-"] {
+		position: relative;
+		display: inline-block;
+		width: auto;
+		overflow: hidden;
+		line-height: 0;
+
+		&:after {
+			@extend %caption !optional;
+			display: inline-block;
+			content: attr(data-content);
+			position: absolute;
+			line-height: rhythm();
+		}
+
+		&[class*="top"]:after 		{ top:0; }
+		&[class*="bottom"]:after 	{ bottom:0; }
+		&[class*="left"]:after 		{ left:0; }
+		&[class*="right"]:after 	{ right:0; }
+
+		&[class$="top"]:after,
+		&[class$="bottom"]:after 	{ left: 0; right: 0; }
+
+		// Animations
+		// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+		&[class*="fade"],
+		&[class*="float"] {
+
+			&:after {
+				@include transition();
+				opacity: 0;
+				visibility: hidden;
+			}
+
+			&:hover:after {
+				opacity: 1;
+				visibility: visible;
+			}
+		}
+
+		// Float Animation
+		&[class*="float"][class*="top"] {
+			&:after { top: -10px; }
+			&:hover:after { top: 0; }
+		}
+
+		&[class*="float"][class*="bottom"] {
+			&:after { bottom: -10px; }
+			&:hover:after { bottom: 0; }
+		}
+
+	}
+}

data/stylesheets/components/_close.scss

@@ -0,0 +1,27 @@
+//
+// Close icons
+// --------------------------------------------------
+@if $close {
+	.close {
+		float: right;
+		font-size: 1em;
+		font-weight: bold;
+		color: $black;
+		@include opacity(20);
+		&:hover,
+		&:focus {
+			color: $black;
+			text-decoration: none;
+			cursor: pointer;
+			@include opacity(40);
+		}
+	}
+
+	button.close {
+		padding: 0;
+		cursor: pointer;
+		background: transparent;
+		border: 0;
+		-webkit-appearance: none;
+	}
+}

data/stylesheets/components/_dropdowns.scss

@@ -0,0 +1,190 @@
+//
+// Dropdown menus
+// --------------------------------------------------
+
+@if $dropdowns {
+	// Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns
+	.dropdown {
+		position: relative;
+		display: inline-block;
+
+	}
+	.dropdown-toggle {
+		line-height: 1em;
+	}
+
+	.dropdown-toggle:active,
+	.open .dropdown-toggle {
+		outline: 0;
+	}
+
+	// Dropdown arrow/caret
+	// --------------------
+	.caret {
+		display: inline-block;
+		@extend %caret !optional;
+
+	}
+
+	// The dropdown menu (ul)
+	// ----------------------
+	.dropdown-menu {
+		@extend %dropdown !optional;
+		@include border-bottom-radius($base-border-radius);
+		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;
+
+		&[data-content] { min-width: em(600px); }
+
+
+		// Aligns the dropdown menu to right
+		&.pull-right {
+			right: 0;
+			left: auto;
+		}
+
+
+		// Semplice lista di links dentro al dropdown
+		> li > a {
+			@include adjust-font-size-to($base-font-size);
+			display: block;
+			padding: $dropdowns-padding;
+			line-height: 1em;
+			clear: both;
+			font-weight: normal;
+			white-space: nowrap;
+		}
+
+		> li:last-child > a {
+			@include border-bottom-radius($base-border-radius);
+			border-bottom: 0;
+		}
+
+	}
+
+	// Hover/Focus state
+	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+	.dropdown-menu > li > a:hover,
+	.dropdown-menu > li > a:focus,
+	.dropdown-submenu:hover > a,
+	.dropdown-submenu:focus > a {
+		text-decoration: none;
+	}
+
+	// Active state
+	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+	.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 {
+		color: $grayLight;
+	}
+	// Nuke hover/focus effects
+	.dropdown-menu > .disabled > a:hover,
+	.dropdown-menu > .disabled > a:focus {
+		text-decoration: none;
+		background-color: transparent;
+		background-image: none; // Remove CSS gradient
+		// @include reset-filter();
+		cursor: default;
+	}
+
+	// Open state for the dropdown
+	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+	.open {
+		*z-index: $zindex-dropdown ;
+
+		.btn.dropdown-toggle[data-toggle=dropdown] {
+			@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;
+			}
+		}
+
+		& > .dropdown-menu {}
+	}
+
+	// Right aligned dropdowns
+	// ---------------------------
+	.pull-right > .dropdown-menu {
+		right: 0;
+		left: auto;
+	}
+
+
+	// Stili per tutti gli allineamenti
+	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+
+
+	// // Sub menus
+	// // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+	// .dropdown-submenu {
+	//	 position: relative;
+	// }
+
+	// .dropdown-submenu > .dropdown-menu {
+	//	 top: 0;
+	//	 left: 100%;
+	//	 @include border-radius(0 $base-border-radius $base-border-radius $base-border-radius);
+	// }
+
+	// .dropdown-submenu:hover > .dropdown-menu {
+	//	 // display: block;
+	//	 // @extend %fadeIn;
+	// }
+
+	// .dropdown-submenu > a {
+	//		 @extend %caret-side !optional;
+	//		 &:after {margin-left: em(10px);}
+	// }
+
+
+	// Animazione Apertura / Chiusura
+	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+
+	.dropdown-menu {
+		@include transition();
+		opacity: 0;
+		overflow: hidden;
+		max-height: 0;
+	}
+
+	// .dropdown-submenu:hover > .dropdown-menu,
+	.open > .dropdown-menu {
+		opacity: 1;
+		max-height: 600px;
+	}
+
+	// Apertura on hover per dropdown se dentro <nav>
+	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+	// nav {
+	// 	.dropdown:hover > .dropdown-menu {
+	// 		// display: block;
+	// 		// @extend .open > .dropdown-menu;
+	// 			opacity: 1;
+	// 	}
+	// }
+}