You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
480 lines
6.6 KiB
480 lines
6.6 KiB
/* ------------------------------------------------------------------------------ |
|
* |
|
* # Helper classes |
|
* |
|
* Custom helper classes |
|
* |
|
* Version: 1.1 |
|
* Latest update: Mar 10, 2016 |
|
* |
|
* ---------------------------------------------------------------------------- */ |
|
|
|
|
|
// 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; |
|
} |
|
|
|
|