stylesheets/utilities/_helper-classes.scss in rapido-css-0.0.3 vs stylesheets/utilities/_helper-classes.scss in rapido-css-0.0.4
- old
+ new
@@ -1,9 +1,62 @@
-// ====================================================================================================================
-// HELPER CLASSES
-// ====================================================================================================================
+/* ====================================================================================================================
+Helper Classes
+
+There are provided some helper classes usually used with `@extend` for applying effects or common styles.
+
+Styleguide 22.
+
+==================================================================================================================== */
+
+/* --------------------------------------------------------------------------------------------------------------------
+
+Generic
+
+Add a a simple `transition all`, used as a generic extend for element that can accept transition on all attributes.
+ .transition
+Simple divider class used in some components (like dropdowns).␣␣
+ .divider
+
+Styleguide 22.1
+
+-------------------------------------------------------------------------------------------------------------------- */
+
+.clearfix {
+ &:after {
+ content: "";
+ display: table;
+ clear: both;
+ }
+}
+
+.transition {
+ @include transition();
+}
+
+.divider {
+ @include nav-divider();
+}
+
+/* --------------------------------------------------------------------------------------------------------------------
+
+Wrappers
+
+Flexible wrapper to center the layout, max-width width `$desk-end`.
+
+ .wrapper
+ .w
+
+Same a `.wrapper` but with fixed width.
+
+ .fixed-wrapper
+ .fw
+
+Styleguide 22.2
+
+-------------------------------------------------------------------------------------------------------------------- */
+
.wrapper, .w {
@extend .clearfix;
margin: 0 auto;
max-width: $desk-end;
padding-left: $wrapper-padding;
@@ -14,35 +67,99 @@
@extend .clearfix;
margin: 0 auto;
width: $desk-end;
}
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
-// Sizes
-// --------------------------------------------------------------------------------------------------------------------
+.left {float: left;}
+.right {float: right;}
+
+
+/* --------------------------------------------------------------------------------------------------------------------
+
+Elements width
+
+Add `data-width="n"` to any html element to set the width.
+
+ [data-width="n"]
+
+* **n**: Width in percentage in increments of 5 of the element.
+
+Example:
+
+ data-width="50"
+
+Corrispond to:
+
+ width: 50% !important;
+
+Styleguide 22.3
+
+-------------------------------------------------------------------------------------------------------------------- */
+
$i: 100;
@while $i > 0 {
%width-#{$i} { width: $i * 1% !important; }
- [data-width="#{$i}"] { @extend %width-#{$i}; }
+ @if $width-helper-classes {
+ [data-width="#{$i}"] { @extend %width-#{$i}; }
+ }
$i: $i - 1;
}
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
-// Transition class for @extend
-// --------------------------------------------------------------------------------------------------------------------
+/* --------------------------------------------------------------------------------------------------------------------
-.transition {
- @include transition();
-}
+Typography
-.divider {
- @include nav-divider();
+Styleguide 22.4
+
+-------------------------------------------------------------------------------------------------------------------- */
+
+.lead { @include adjust-font-size-to($h4-size); }
+.muted { color: $gray; }
+
+.pull-left { float: left; }
+.pull-right { float: right; }
+
+.text-left { text-align: left; }
+.text-right { text-align: right; }
+.text-center { text-align: center; }
+
+/* --------------------------------------------------------------------------------------------------------------------
+
+Sprites
+
+Styleguide 22.5
+
+-------------------------------------------------------------------------------------------------------------------- */
+
+.s {
+ content: "";
+ display: inline-block;
+ overflow:hidden;
+ vertical-align:middle;
+ text-align:center;
+ font-style:normal;
+ zoom:1;
+ text-indent:-9999px;
}
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
-// Text replacement (from http://html5boilerplate.com/)
-// --------------------------------------------------------------------------------------------------------------------
+/* --------------------------------------------------------------------------------------------------------------------
+
+Text replacement
+
+All the text replacement classes from from [html5boilerplate](http://html5boilerplate.com/).
+
+ .ir
+ .ir
+ .hidden
+ .visuallyhidden
+ .visuallyhidden
+ .invisible
+
+Styleguide 22.6
+
+-------------------------------------------------------------------------------------------------------------------- */
+
.ir{background-color:transparent;border:0;overflow:hidden;text-indent:-9999px;line-height:0;font-size:0;}
.ir:before{content:"";display:block;width:0;height:150%}
.hidden{display:none!important;visibility:hidden}
.visuallyhidden{border:0;clip:rect(0000);height:1px;overflow:hidden;position:absolute;width:1px;margin:-1px;padding:0}
.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus{clip:auto;height:auto;overflow:visible;position:static;width:auto;margin:0}
\ No newline at end of file