/* ------------------------------------------------------------------------------
*
* # Helper classes
*
* Custom helper classes
*
* Version: 1.0
* Latest update: May 25, 2015
*
* ---------------------------------------------------------------------------- */
// Content helpers
// -------------------------
// Edges
.no-edge-top {
top: 0;
}
.no-edge-bottom {
bottom: 0;
}
.no-edge-left {
left: 0;
}
.no-edge-right {
right: 0;
}
// Pulling elements right on different screens
.pull-right-lg {
@media (min-width: @screen-lg-min) {
float: right;
}
}
.pull-right-md {
@media (min-width: @screen-md-min) {
float: right;
}
}
.pull-right-sm {
@media (min-width: @screen-sm-min) {
float: right;
}
}
.pull-right-xs {
@media (min-width: @screen-xs-min) {
float: right;
}
}
// Vertical alignment
.valign-top {
vertical-align: top;
}
.valign-middle {
vertical-align: middle;
}
.valign-bottom {
vertical-align: bottom;
}
.valign-baseline {
vertical-align: baseline;
}
.valign-text-top {
vertical-align: top;
}
.valign-text-bottom {
vertical-align: text-bottom;
}
// Positions
.position-relative {
position: relative;
}
.position-static {
position: static;
}
// Display elements
.display-block,
label.display-block {
display: block;
}
.display-inline-block {
display: inline-block;
}
// Cursors
.cursor-pointer {
cursor: pointer;
}
.cursor-move {
cursor: move;
}
.cursor-default {
cursor: default;
}
// Overflow
.overflow-hidden {
overflow: hidden;
}
.overflow-visible {
overflow: visible;
}
.overflow-auto {
overflow: auto;
}
// Content group
.content-group-xs {
margin-bottom: (@line-height-computed - 10)!important;
}
.content-group-sm {
margin-bottom: (@line-height-computed - 5)!important;
}
.content-group {
margin-bottom: (@line-height-computed)!important;
}
.content-group-lg {
margin-bottom: (@line-height-computed + 10)!important;
}
// Margins
// -------------------------
// Remove margins
.no-margin {
margin: 0!important;
}
.no-margin-top {
margin-top: 0!important;
}
.no-margin-bottom {
margin-bottom: 0!important;
}
.no-margin-left {
margin-left: 0!important;
}
.no-margin-right {
margin-right: 0!important;
}
//
// Add margins
//
// All sides
.m-5 {
margin: 5px!important;
}
.m-10 {
margin: 10px!important;
}
.m-15 {
margin: 15px!important;
}
.m-20 {
margin: 20px!important;
}
// Top
.mt-5 {
margin-top: 5px!important;
}
.mt-10 {
margin-top: 10px!important;
}
.mt-15 {
margin-top: 15px!important;
}
.mt-20 {
margin-top: 20px!important;
}
// Bottom
.mb-5 {
margin-bottom: 5px!important;
}
.mb-10 {
margin-bottom: 10px!important;
}
.mb-15 {
margin-bottom: 15px!important;
}
.mb-20 {
margin-bottom: 20px!important;
}
// Left
.ml-5 {
margin-left: 5px!important;
}
.ml-10 {
margin-left: 10px!important;
}
.ml-15 {
margin-left: 15px!important;
}
.ml-20 {
margin-left: 20px!important;
}
// Right
.mr-5 {
margin-right: 5px!important;
}
.mr-10 {
margin-right: 10px!important;
}
.mr-15 {
margin-right: 15px!important;
}
.mr-20 {
margin-right: 20px!important;
}
// Paddings
// -------------------------
// Remove paddings
.no-padding {
padding: 0!important;
}
.no-padding-top {
padding-top: 0!important;
}
.no-padding-bottom {
padding-bottom: 0!important;
}
.no-padding-left {
padding-left: 0!important;
}
.no-padding-right {
padding-right: 0!important;
}
//
// Add paddings
//
// All sides
.p-5 {
padding: 5px!important;
}
.p-10 {
padding: 10px!important;
}
.p-15 {
padding: 15px!important;
}
.p-20 {
padding: 20px!important;
}
// Top
.pt-5 {
padding-top: 5px!important;
}
.pt-10 {
padding-top: 10px!important;
}
.pt-15 {
padding-top: 15px!important;
}
.pt-20 {
padding-top: 20px!important;
}
// Bottom
.pb-5 {
padding-bottom: 5px!important;
}
.pb-10 {
padding-bottom: 10px!important;
}
.pb-15 {
padding-bottom: 15px!important;
}
.pb-20 {
padding-bottom: 20px!important;
}
// Left
.pl-5 {
padding-left: 5px!important;
}
.pl-10 {
padding-left: 10px!important;
}
.pl-15 {
padding-left: 15px!important;
}
.pl-20 {
padding-left: 20px!important;
}
// Right
.pr-5 {
padding-right: 5px!important;
}
.pr-10 {
padding-right: 10px!important;
}
.pr-15 {
padding-right: 15px!important;
}
.pr-20 {
padding-right: 20px!important;
}
// Borders
// -------------------------
// Remove borders
.no-border {
border: 0!important;
}
.no-border-top {
border-top: 0!important;
}
.no-border-bottom {
border-bottom: 0!important;
}
.no-border-left {
border-left: 0!important;
}
.no-border-right {
border-right: 0!important;
}
// Remove border radius
.no-border-radius {
border-radius: 0;
}
.no-border-radius-top {
.border-top-radius(0);
}
.no-border-radius-bottom {
.border-bottom-radius(0);
}
.no-border-radius-left {
.border-left-radius(0);
}
.no-border-radius-right {
.border-right-radius(0);
}
// Add borders
.border-top {
border-top: 1px solid;
}
.border-bottom {
border-bottom: 1px solid;
}
.border-left {
border-left: 1px solid;
}
.border-right {
border-right: 1px solid;
}
//
// Border widths
//
// Large
.border-lg {
border-width: 2px;
}
.border-top-lg {
border-top: 2px solid;
}
.border-bottom-lg {
border-bottom: 2px solid;
}
.border-left-lg {
border-left: 2px solid;
}
.border-right-lg {
border-right: 2px solid;
}
// XLarge
.border-xlg {
border-width: 3px;
}
.border-top-xlg {
border-top: 3px solid;
}
.border-bottom-xlg {
border-bottom: 3px solid;
}
.border-left-xlg {
border-left: 3px solid;
}
.border-right-xlg {
border-right: 3px solid;
}
// Sizing
// -------------------------
//
// Element widths
//
// Full width
.full-width {
width: 100%;
}
// Fixed widths
@media (min-width: @grid-float-breakpoint) {
.width-200 {
min-width: 200px;
}
.width-250 {
min-width: 250px;
}
.width-300 {
min-width: 300px;
}
.width-350 {
min-width: 350px;
}
.width-400 {
min-width: 400px;
}
.width-450 {
min-width: 450px;
}
.width-500 {
min-width: 500px;
}
.width-550 {
min-width: 550px;
}
.width-600 {
min-width: 600px;
}
.width-650 {
min-width: 650px;
}
}
//
// Image sizing
//
// Large
.img-lg {
width: 44px!important;
height: 44px!important;
}
// Small
.img-sm {
width: 36px!important;
height: 36px!important;
}
// Mini
.img-xs {
width: 32px!important;
height: 32px!important;
}