// Vertical Rule vr { height:30px; border-left:1px solid $gray-light; margin:0 10px; display: inline-block; vertical-align:middle; } .rounded, .round{ border-radius:50%; } .pointer{ cursor: pointer !important; } .handle{ cursor: hand; } .honeypot{ position:absolute !important; left:-999999px !important; width:1px !important; display:block !important; } //---------------------------------------------------------------- // Layout //---------------------------------------------------------------- .hide, .hidden{ display:none; } .right{ float:right; } .text-right{ text-align: right; } .text-center{ text-align: center; } .clear{ clear:both; } .bleed-fix{ position:static; overflow:hidden; } .no-gutter{ padding-left:0; padding-right:0; } .no-pad{ padding-left:0; padding-right:0; } .less-pad{ padding-left:5px; padding-right:5px; } .pad{ padding:10px; } //---------------------------------------------------------------- // Text //---------------------------------------------------------------- .text-overflow{ @include text-overflow; } .strong, strong, .bold{ font-weight: 700;} .light, .text-light{ font-weight: 300;} .text-normal{ font-weight: normal;} .italic{ font-style:italic;} .required{ color:$red;} .warn{ color:lighten($gray, 20); &:hover{ color:$red; } } h1, h2, h3, h4, h5, h6{ &.no-margin{ margin: 0; margin-top:10px; } &.no-margin-top{ margin-top:0; } } p.large{ font-size:1.5em; font-weight:300; margin-bottom:20px; } .nowrap{ white-space: nowrap; overflow:hidden; } //---------------------------------------------------------------- // Colors //---------------------------------------------------------------- @mixin generate-color($class){ .#{$class} { color: global-variable($class);} .#{$class}-light { color: global-variable("#{$class}-light");} .#{$class}-dark { color: global-variable("#{$class}-light");} .#{$class}-bg { background-color: global-variable($class);} .#{$class}-light-bg { background-color: global-variable("#{$class}-light");} .#{$class}-dark-bg { background-color: global-variable("#{$class}-dark");} } @include generate-color('green'); @include generate-color('blue'); @include generate-color('red'); @include generate-color('gray'); @include generate-color('yellow');