Contents

// ====================================================================================================================
// CAPTIONS
// ====================================================================================================================

@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; }
		}

	}
}

Version data entries

2 entries across 2 versions & 1 rubygems

Version	Path
rapido-css-0.0.3	stylesheets/components/_captions.scss
rapido-css-0.0.2.1	stylesheets/components/_captions.scss