1486 lines
24 KiB
Plaintext
1486 lines
24 KiB
Plaintext
/*=================================================
|
|
HELPERS
|
|
===================================================
|
|
A. List Helpers
|
|
=================================================== */
|
|
|
|
/* list item spacing helpers */
|
|
.list-spacing-3 li + li {
|
|
padding-top: 3px;
|
|
}
|
|
.list-spacing-5 li + li {
|
|
padding-top: 5px;
|
|
}
|
|
.list-spacing-8 li + li {
|
|
padding-top: 8px;
|
|
}
|
|
.list-spacing-10 li + li {
|
|
padding-top: 10px;
|
|
}
|
|
.list-spacing-15 li + li {
|
|
padding-top: 15px;
|
|
}
|
|
|
|
/*divide li items with border and extra spacing*/
|
|
.list-divide-items {
|
|
margin: 0;
|
|
padding-left: 10px;
|
|
list-style: none;
|
|
}
|
|
.list-divide-items li + li {
|
|
margin-top: 13px;
|
|
padding-top: 13px;
|
|
border-top: 1px solid #EEE;
|
|
}
|
|
|
|
/*===================================================
|
|
B. Height Helpers
|
|
===================================================== */
|
|
/* Height helpers, primarly used with panel widgets */
|
|
.fixed-height .panel-body {
|
|
overflow: auto;
|
|
}
|
|
.hover-height {
|
|
overflow: hidden;
|
|
transition: all 0.2s ease;
|
|
}
|
|
.mh-20 {
|
|
max-height: 20px !important;
|
|
}
|
|
.mh-25 {
|
|
max-height: 25px !important;
|
|
}
|
|
.mh-30 {
|
|
max-height: 30px !important;
|
|
}
|
|
.mh-35 {
|
|
max-height: 35px !important;
|
|
}
|
|
.mh-40 {
|
|
max-height: 40px !important;
|
|
}
|
|
.mh-50 {
|
|
max-height: 50px !important;
|
|
}
|
|
.mh-100 {
|
|
max-height: 100px !important;
|
|
}
|
|
.mh-200 {
|
|
max-height: 200px !important;
|
|
}
|
|
.mh-300 {
|
|
max-height: 300px !important;
|
|
}
|
|
.mh-400 {
|
|
max-height: 400px !important;
|
|
}
|
|
.mh-500 {
|
|
max-height: 500px !important;
|
|
}
|
|
.mh-600 {
|
|
max-height: 600px !important;
|
|
}
|
|
.mh-700 {
|
|
max-height: 700px !important;
|
|
}
|
|
.mh-800 {
|
|
max-height: 800px !important;
|
|
}
|
|
.mh-900 {
|
|
max-height: 900px !important;
|
|
}
|
|
.mh-1000 {
|
|
max-height: 1000px !important;
|
|
}
|
|
.h-20 {
|
|
height: 20px !important;
|
|
}
|
|
.h-25 {
|
|
height: 25px !important;
|
|
}
|
|
.h-30 {
|
|
height: 30px !important;
|
|
}
|
|
.h-35 {
|
|
height: 35px !important;
|
|
}
|
|
.h-40 {
|
|
height: 40px !important;
|
|
}
|
|
.h-50 {
|
|
height: 50px !important;
|
|
}
|
|
.h-80 {
|
|
height: 80px !important;
|
|
}
|
|
.h-100 {
|
|
height: 100px !important;
|
|
}
|
|
.h-120 {
|
|
height: 120px !important;
|
|
}
|
|
.h-150 {
|
|
height: 150px !important;
|
|
}
|
|
.h-170 {
|
|
height: 170px !important;
|
|
}
|
|
.h-200 {
|
|
height: 200px !important;
|
|
}
|
|
.h-300 {
|
|
height: 300px !important;
|
|
}
|
|
.h-400 {
|
|
height: 400px !important;
|
|
}
|
|
.h-500 {
|
|
height: 500px !important;
|
|
}
|
|
.h-600 {
|
|
height: 600px !important;
|
|
}
|
|
.h-700 {
|
|
height: 700px !important;
|
|
}
|
|
.h-800 {
|
|
height: 800px !important;
|
|
}
|
|
.h-900 {
|
|
height: 900px !important;
|
|
}
|
|
.h-1000 {
|
|
height: 1000px !important;
|
|
}
|
|
|
|
/*===================================================
|
|
A. General/Misc Helpers
|
|
===================================================== */
|
|
|
|
/* Transform Center Helper(experimental) */
|
|
.t-center {
|
|
text-align: center;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
|
|
/* BG Helpers */
|
|
.bg-none {
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
/* box-shadow Helpers */
|
|
.no-boxshadow {
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
/* height helpers */
|
|
.h-a {
|
|
height: auto !important
|
|
}
|
|
|
|
/* overflow Helpers */
|
|
.of-a {
|
|
overflow: auto !important
|
|
}
|
|
.of-h {
|
|
overflow: hidden !important
|
|
}
|
|
.of-v {
|
|
overflow: visible !important
|
|
}
|
|
.of-x-a {
|
|
overflow-x: auto !important
|
|
}
|
|
.of-x-h {
|
|
overflow-x: hidden !important
|
|
}
|
|
.of-x-v {
|
|
overflow-x: visible !important
|
|
}
|
|
.of-y-a {
|
|
overflow-y: auto !important
|
|
}
|
|
.of-y-h {
|
|
overflow-y: hidden !important
|
|
}
|
|
.of-y-v {
|
|
overflow-y: visible !important
|
|
}
|
|
|
|
/* Center Grid Column Helper */
|
|
.center-column {
|
|
float: none !important;
|
|
margin-left: auto !important;
|
|
margin-right: auto !important;
|
|
display: block !important;
|
|
}
|
|
|
|
/* Vertical Align Helpers */
|
|
.va-t {
|
|
vertical-align: top !important
|
|
}
|
|
.va-m {
|
|
vertical-align: middle !important
|
|
}
|
|
.va-b {
|
|
vertical-align: bottom !important
|
|
}
|
|
.va-s {
|
|
vertical-align: super !important
|
|
}
|
|
|
|
/* Relative Position Helper */
|
|
.posr {
|
|
position: relative !important
|
|
}
|
|
|
|
/* Inline Block Helper */
|
|
.ib,
|
|
.inline-object {
|
|
display: inline-block !important
|
|
}
|
|
|
|
/* pointer cursor */
|
|
.cursor {
|
|
cursor: pointer !important
|
|
}
|
|
|
|
/* Useful for emphasizing a disabled input */
|
|
.option-disabled {
|
|
opacity: 0.6 !important
|
|
}
|
|
|
|
/* unstyled input */
|
|
.input-unstyled,
|
|
.input-unstyled:hover,
|
|
.input-unstyled:focus {
|
|
border: none !important;
|
|
background: none !important;
|
|
box-shadow: none !important;
|
|
outline: none !important;
|
|
}
|
|
|
|
/*===================================================
|
|
B. Table Layout Helpers - specifically for widgets
|
|
===================================================== */
|
|
|
|
/* table-layout for connecting panels */
|
|
.panel-group.table-layout > .panel {}
|
|
.panel-group.table-layout > .panel + .panel {
|
|
border-left: 0;
|
|
}
|
|
.panel-group.table-layout + .panel-group.table-layout > .panel {
|
|
border-top: 0;
|
|
}
|
|
|
|
/* table-layout when attached to row */
|
|
.row.table-layout {
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
}
|
|
.table-layout {
|
|
display: table;
|
|
table-layout: fixed;
|
|
width: 100%;
|
|
margin: 0;
|
|
}
|
|
|
|
/* table-layout helper content */
|
|
.table-layout > div,
|
|
.table-layout > aside,
|
|
.table-layout > section {
|
|
vertical-align: middle;
|
|
display: table-cell;
|
|
float: none;
|
|
}
|
|
@media (max-width: 1300px) {
|
|
.table-layout.table-clear-md,
|
|
.table-layout.table-clear-md > div,
|
|
.table-layout.table-clear-md > aside,
|
|
.table-layout.table-clear-md > section {
|
|
display: block;
|
|
float: none;
|
|
}
|
|
}
|
|
@media (max-width: 992px) {
|
|
.table-layout.table-clear-sm,
|
|
.table-layout.table-clear-sm > div,
|
|
.table-layout.table-clear-sm > aside,
|
|
.table-layout.table-clear-sm > section {
|
|
display: block;
|
|
float: none;
|
|
}
|
|
}
|
|
@media (max-width: 767px) {
|
|
.table-layout.table-clear-xs,
|
|
.table-layout.table-clear-xs > div,
|
|
.table-layout.table-clear-xs > aside,
|
|
.table-layout.table-clear-xs > section {
|
|
display: block;
|
|
float: none;
|
|
}
|
|
}
|
|
|
|
/*===============================================
|
|
C. Text Helpers
|
|
================================================= */
|
|
.text-uppercase {
|
|
text-transform: uppercase !important
|
|
}
|
|
.fw200 {
|
|
font-weight: 200 !important
|
|
}
|
|
.fw300 {
|
|
font-weight: 300 !important
|
|
}
|
|
.fw400 {
|
|
font-weight: 400 !important
|
|
}
|
|
.fw600 {
|
|
font-weight: 600 !important
|
|
}
|
|
.fs3 {
|
|
font-size: 4px !important
|
|
}
|
|
.fs4 {
|
|
font-size: 4px !important
|
|
}
|
|
.fs5 {
|
|
font-size: 5px !important
|
|
}
|
|
.fs6 {
|
|
font-size: 6px !important
|
|
}
|
|
.fs7 {
|
|
font-size: 7px !important
|
|
}
|
|
.fs8 {
|
|
font-size: 8px !important
|
|
}
|
|
.fs9 {
|
|
font-size: 9px !important
|
|
}
|
|
.fs10 {
|
|
font-size: 10px !important
|
|
}
|
|
.fs11 {
|
|
font-size: 11px !important
|
|
}
|
|
.fs12 {
|
|
font-size: 12px !important
|
|
}
|
|
.fs13 {
|
|
font-size: 13px !important
|
|
}
|
|
.fs14 {
|
|
font-size: 14px !important
|
|
}
|
|
.fs15 {
|
|
font-size: 15px !important
|
|
}
|
|
.fs16 {
|
|
font-size: 16px !important
|
|
}
|
|
.fs17 {
|
|
font-size: 17px !important
|
|
}
|
|
.fs18 {
|
|
font-size: 18px !important
|
|
}
|
|
.fs20 {
|
|
font-size: 20px !important
|
|
}
|
|
.fs22 {
|
|
font-size: 22px !important
|
|
}
|
|
.fs24 {
|
|
font-size: 24px !important
|
|
}
|
|
.fs26 {
|
|
font-size: 26px !important
|
|
}
|
|
.fs28 {
|
|
font-size: 28px !important
|
|
}
|
|
.fs30 {
|
|
font-size: 30px !important
|
|
}
|
|
.fs35 {
|
|
font-size: 35px !important
|
|
}
|
|
.fs40 {
|
|
font-size: 40px !important
|
|
}
|
|
.fs45 {
|
|
font-size: 45px !important
|
|
}
|
|
.fs50 {
|
|
font-size: 50px !important
|
|
}
|
|
.fs60 {
|
|
font-size: 60px !important
|
|
}
|
|
.fs70 {
|
|
font-size: 70px !important
|
|
}
|
|
.fs80 {
|
|
font-size: 80px !important
|
|
}
|
|
.fs90 {
|
|
font-size: 90px !important
|
|
}
|
|
.fs100 {
|
|
font-size: 100px !important
|
|
}
|
|
|
|
/*===============================================
|
|
D. Padding Helpers
|
|
================================================= */
|
|
.pn {
|
|
padding: 0 !important
|
|
}
|
|
.p1 {
|
|
padding: 1px !important
|
|
}
|
|
.p2 {
|
|
padding: 2px !important
|
|
}
|
|
.p3 {
|
|
padding: 3px !important
|
|
}
|
|
.p4 {
|
|
padding: 4px !important
|
|
}
|
|
.p5 {
|
|
padding: 5px !important
|
|
}
|
|
.p6 {
|
|
padding: 6px !important
|
|
}
|
|
.p7 {
|
|
padding: 7px !important
|
|
}
|
|
.p8 {
|
|
padding: 8px !important
|
|
}
|
|
.p10 {
|
|
padding: 10px !important
|
|
}
|
|
.p12 {
|
|
padding: 12px !important
|
|
}
|
|
.p15 {
|
|
padding: 15px !important
|
|
}
|
|
.p20 {
|
|
padding: 20px !important
|
|
}
|
|
.p25 {
|
|
padding: 25px !important
|
|
}
|
|
.p30 {
|
|
padding: 30px !important
|
|
}
|
|
.p35 {
|
|
padding: 35px !important
|
|
}
|
|
.p40 {
|
|
padding: 40px !important
|
|
}
|
|
.p50 {
|
|
padding: 50px !important
|
|
}
|
|
.ptn {
|
|
padding-top: 0 !important
|
|
}
|
|
.pt5 {
|
|
padding-top: 5px !important
|
|
}
|
|
.pt10 {
|
|
padding-top: 10px !important
|
|
}
|
|
.pt15 {
|
|
padding-top: 15px !important
|
|
}
|
|
.pt20 {
|
|
padding-top: 20px !important
|
|
}
|
|
.pt25 {
|
|
padding-top: 25px !important
|
|
}
|
|
.pt30 {
|
|
padding-top: 30px !important
|
|
}
|
|
.pt35 {
|
|
padding-top: 35px !important
|
|
}
|
|
.pt40 {
|
|
padding-top: 40px !important
|
|
}
|
|
.pt50 {
|
|
padding-top: 50px !important
|
|
}
|
|
.prn {
|
|
padding-right: 0 !important
|
|
}
|
|
.pr5 {
|
|
padding-right: 5px !important
|
|
}
|
|
.pr10 {
|
|
padding-right: 10px !important
|
|
}
|
|
.pr15 {
|
|
padding-right: 15px !important
|
|
}
|
|
.pr20 {
|
|
padding-right: 20px !important
|
|
}
|
|
.pr25 {
|
|
padding-right: 25px !important
|
|
}
|
|
.pr30 {
|
|
padding-right: 30px !important
|
|
}
|
|
.pr35 {
|
|
padding-right: 35px !important
|
|
}
|
|
.pr40 {
|
|
padding-right: 40px !important
|
|
}
|
|
.pr50 {
|
|
padding-right: 50px !important
|
|
}
|
|
.pbn {
|
|
padding-bottom: 0 !important
|
|
}
|
|
.pb5 {
|
|
padding-bottom: 5px !important
|
|
}
|
|
.pb10 {
|
|
padding-bottom: 10px !important
|
|
}
|
|
.pb15 {
|
|
padding-bottom: 15px !important
|
|
}
|
|
.pb20 {
|
|
padding-bottom: 20px !important
|
|
}
|
|
.pb25 {
|
|
padding-bottom: 25px !important
|
|
}
|
|
.pb30 {
|
|
padding-bottom: 30px !important
|
|
}
|
|
.pb35 {
|
|
padding-bottom: 35px !important
|
|
}
|
|
.pb40 {
|
|
padding-bottom: 40px !important
|
|
}
|
|
.pb50 {
|
|
padding-bottom: 50px !important
|
|
}
|
|
.pln {
|
|
padding-left: 0 !important
|
|
}
|
|
.pl5 {
|
|
padding-left: 5px !important
|
|
}
|
|
.pl10 {
|
|
padding-left: 10px !important
|
|
}
|
|
.pl15 {
|
|
padding-left: 15px !important
|
|
}
|
|
.pl20 {
|
|
padding-left: 20px !important
|
|
}
|
|
.pl25 {
|
|
padding-left: 25px !important
|
|
}
|
|
.pl30 {
|
|
padding-left: 30px !important
|
|
}
|
|
.pl35 {
|
|
padding-left: 35px !important
|
|
}
|
|
.pl40 {
|
|
padding-left: 40px !important
|
|
}
|
|
.pl50 {
|
|
padding-left: 50px !important
|
|
}
|
|
|
|
/* Axis Padding (both top/bottom or left/right) */
|
|
.pv5 {
|
|
padding-top: 5px !important;
|
|
padding-bottom: 5px !important;
|
|
}
|
|
.pv8 {
|
|
padding-top: 8px !important;
|
|
padding-bottom: 8px !important;
|
|
}
|
|
.pv10 {
|
|
padding-top: 10px !important;
|
|
padding-bottom: 10px !important;
|
|
}
|
|
.pv15 {
|
|
padding-top: 15px !important;
|
|
padding-bottom: 15px !important;
|
|
}
|
|
.pv20 {
|
|
padding-top: 20px !important;
|
|
padding-bottom: 20px !important;
|
|
}
|
|
.pv25 {
|
|
padding-top: 25px !important;
|
|
padding-bottom: 25px !important;
|
|
}
|
|
.pv30 {
|
|
padding-top: 30px !important;
|
|
padding-bottom: 30px !important;
|
|
}
|
|
.pv40 {
|
|
padding-top: 40px !important;
|
|
padding-bottom: 40px !important;
|
|
}
|
|
.pv50 {
|
|
padding-top: 50px !important;
|
|
padding-bottom: 50px !important;
|
|
}
|
|
.ph5 {
|
|
padding-left: 5px !important;
|
|
padding-right: 5px !important;
|
|
}
|
|
.ph8 {
|
|
padding-left: 8px !important;
|
|
padding-right: 8px !important;
|
|
}
|
|
.ph10 {
|
|
padding-left: 10px !important;
|
|
padding-right: 10px !important;
|
|
}
|
|
.ph15 {
|
|
padding-left: 15px !important;
|
|
padding-right: 15px !important;
|
|
}
|
|
.ph20 {
|
|
padding-left: 20px !important;
|
|
padding-right: 20px !important;
|
|
}
|
|
.ph25 {
|
|
padding-left: 25px !important;
|
|
padding-right: 25px !important;
|
|
}
|
|
.ph30 {
|
|
padding-left: 30px !important;
|
|
padding-right: 30px !important;
|
|
}
|
|
.ph40 {
|
|
padding-left: 40px !important;
|
|
padding-right: 40px !important;
|
|
}
|
|
.ph50 {
|
|
padding-left: 50px !important;
|
|
padding-right: 50px !important;
|
|
}
|
|
|
|
/* responsive padding helpers */
|
|
@media (min-width: 1140px) {
|
|
.ptn-lg {
|
|
padding-top: 0 !important;
|
|
}
|
|
.prn-lg {
|
|
padding-right: 0 !important;
|
|
}
|
|
.pbn-lg {
|
|
padding-bottom: 0 !important;
|
|
}
|
|
.pln-lg {
|
|
padding-left: 0 !important;
|
|
}
|
|
.pt5-lg {
|
|
padding-top: 5px !important;
|
|
}
|
|
.pr5-lg {
|
|
padding-right: 5px !important;
|
|
}
|
|
.pb5-lg {
|
|
padding-bottom: 5px !important;
|
|
}
|
|
.pl5-lg {
|
|
padding-left: 5px !important;
|
|
}
|
|
}
|
|
@media (min-width: 992px) {
|
|
.ptn-md {
|
|
padding-top: 0 !important;
|
|
}
|
|
.prn-md {
|
|
padding-right: 0 !important;
|
|
}
|
|
.pbn-md {
|
|
padding-bottom: 0 !important;
|
|
}
|
|
.pln-md {
|
|
padding-left: 0 !important;
|
|
}
|
|
.pt5-md {
|
|
padding-top: 5px !important;
|
|
}
|
|
.pr5-md {
|
|
padding-right: 5px !important;
|
|
}
|
|
.pb5-md {
|
|
padding-bottom: 5px !important;
|
|
}
|
|
.pl5-md {
|
|
padding-left: 5px !important;
|
|
}
|
|
}
|
|
|
|
/*===============================================
|
|
E. Margin Helpers
|
|
================================================= */
|
|
|
|
/* margin center helper */
|
|
.mauto {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
.mn {
|
|
margin: 0 !important
|
|
}
|
|
.m1 {
|
|
margin: 1px !important
|
|
}
|
|
.m2 {
|
|
margin: 2px !important
|
|
}
|
|
.m3 {
|
|
margin: 3px !important
|
|
}
|
|
.m4 {
|
|
margin: 4px !important
|
|
}
|
|
.m5 {
|
|
margin: 5px !important
|
|
}
|
|
.m8 {
|
|
margin: 8px !important
|
|
}
|
|
.m10 {
|
|
margin: 10px !important
|
|
}
|
|
.m15 {
|
|
margin: 15px !important
|
|
}
|
|
.m20 {
|
|
margin: 20px !important
|
|
}
|
|
.m25 {
|
|
margin: 25px !important
|
|
}
|
|
.m30 {
|
|
margin: 30px !important
|
|
}
|
|
.m35 {
|
|
margin: 35px !important
|
|
}
|
|
.m40 {
|
|
margin: 40px !important
|
|
}
|
|
.m50 {
|
|
margin: 50px !important
|
|
}
|
|
.mtn {
|
|
margin-top: 0 !important
|
|
}
|
|
.mt5 {
|
|
margin-top: 5px !important
|
|
}
|
|
.mt10 {
|
|
margin-top: 10px !important
|
|
}
|
|
.mt15 {
|
|
margin-top: 15px !important
|
|
}
|
|
.mt20 {
|
|
margin-top: 20px !important
|
|
}
|
|
.mt25 {
|
|
margin-top: 25px !important
|
|
}
|
|
.mt30 {
|
|
margin-top: 30px !important
|
|
}
|
|
.mt35 {
|
|
margin-top: 35px !important
|
|
}
|
|
.mt40 {
|
|
margin-top: 40px !important
|
|
}
|
|
.mt50 {
|
|
margin-top: 50px !important
|
|
}
|
|
.mt70 {
|
|
margin-top: 70px !important
|
|
}
|
|
.mrn {
|
|
margin-right: 0 !important
|
|
}
|
|
.mr5 {
|
|
margin-right: 5px !important
|
|
}
|
|
.mr10 {
|
|
margin-right: 10px !important
|
|
}
|
|
.mr15 {
|
|
margin-right: 15px !important
|
|
}
|
|
.mr20 {
|
|
margin-right: 20px !important
|
|
}
|
|
.mr25 {
|
|
margin-right: 25px !important
|
|
}
|
|
.mr30 {
|
|
margin-right: 30px !important
|
|
}
|
|
.mr35 {
|
|
margin-right: 35px !important
|
|
}
|
|
.mr40 {
|
|
margin-right: 40px !important
|
|
}
|
|
.mr50 {
|
|
margin-right: 50px !important
|
|
}
|
|
.mbn {
|
|
margin-bottom: 0 !important
|
|
}
|
|
.mb5 {
|
|
margin-bottom: 5px !important
|
|
}
|
|
.mb10 {
|
|
margin-bottom: 10px !important
|
|
}
|
|
.mb15 {
|
|
margin-bottom: 15px !important
|
|
}
|
|
.mb20 {
|
|
margin-bottom: 20px !important
|
|
}
|
|
.mb25 {
|
|
margin-bottom: 25px !important
|
|
}
|
|
.mb30 {
|
|
margin-bottom: 30px !important
|
|
}
|
|
.mb35 {
|
|
margin-bottom: 35px !important
|
|
}
|
|
.mb40 {
|
|
margin-bottom: 40px !important
|
|
}
|
|
.mb50 {
|
|
margin-bottom: 50px !important
|
|
}
|
|
.mb70 {
|
|
margin-bottom: 70px !important
|
|
}
|
|
.mln {
|
|
margin-left: 0 !important
|
|
}
|
|
.ml5 {
|
|
margin-left: 5px !important
|
|
}
|
|
.ml10 {
|
|
margin-left: 10px !important
|
|
}
|
|
.ml15 {
|
|
margin-left: 15px !important
|
|
}
|
|
.ml20 {
|
|
margin-left: 20px !important
|
|
}
|
|
.ml25 {
|
|
margin-left: 25px !important
|
|
}
|
|
.ml30 {
|
|
margin-left: 30px !important
|
|
}
|
|
.ml35 {
|
|
margin-left: 35px !important
|
|
}
|
|
.ml40 {
|
|
margin-left: 40px !important
|
|
}
|
|
.ml50 {
|
|
margin-left: 50px !important
|
|
}
|
|
|
|
/* Axis Margins (both top/bottom or left/right) */
|
|
.mv5 {
|
|
margin-top: 5px !important;
|
|
margin-bottom: 5px !important;
|
|
}
|
|
.mv10 {
|
|
margin-top: 10px !important;
|
|
margin-bottom: 10px !important;
|
|
}
|
|
.mv15 {
|
|
margin-top: 15px !important;
|
|
margin-bottom: 15px !important;
|
|
}
|
|
.mv20 {
|
|
margin-top: 20px !important;
|
|
margin-bottom: 20px !important;
|
|
}
|
|
.mv25 {
|
|
margin-top: 25px !important;
|
|
margin-bottom: 25px !important;
|
|
}
|
|
.mv30 {
|
|
margin-top: 30px !important;
|
|
margin-bottom: 30px !important;
|
|
}
|
|
.mv40 {
|
|
margin-top: 40px !important;
|
|
margin-bottom: 40px !important;
|
|
}
|
|
.mv50 {
|
|
margin-top: 50px !important;
|
|
margin-bottom: 50px !important;
|
|
}
|
|
.mv70 {
|
|
margin-top: 70px !important;
|
|
margin-bottom: 70px !important;
|
|
}
|
|
.mh5 {
|
|
margin-left: 5px !important;
|
|
margin-right: 5px !important;
|
|
}
|
|
.mh10 {
|
|
margin-left: 10px !important;
|
|
margin-right: 10px !important;
|
|
}
|
|
.mh15 {
|
|
margin-left: 15px !important;
|
|
margin-right: 15px !important;
|
|
}
|
|
.mh20 {
|
|
margin-left: 20px !important;
|
|
margin-right: 20px !important;
|
|
}
|
|
.mh25 {
|
|
margin-left: 25px !important;
|
|
margin-right: 25px !important;
|
|
}
|
|
.mh30 {
|
|
margin-left: 30px !important;
|
|
margin-right: 30px !important;
|
|
}
|
|
.mh40 {
|
|
margin-left: 40px !important;
|
|
margin-right: 40px !important;
|
|
}
|
|
.mh50 {
|
|
margin-left: 50px !important;
|
|
margin-right: 50px !important;
|
|
}
|
|
.mh70 {
|
|
margin-left: 70px !important;
|
|
margin-right: 70px !important;
|
|
}
|
|
|
|
/* Negative Margin Helpers */
|
|
.mtn5 {
|
|
margin-top: -5px !important;
|
|
}
|
|
.mtn10 {
|
|
margin-top: -10px !important;
|
|
}
|
|
.mtn15 {
|
|
margin-top: -15px !important;
|
|
}
|
|
.mtn20 {
|
|
margin-top: -20px !important;
|
|
}
|
|
.mtn30 {
|
|
margin-top: -30px !important;
|
|
}
|
|
.mrn5 {
|
|
margin-right: -5px !important;
|
|
}
|
|
.mrn10 {
|
|
margin-right: -10px !important;
|
|
}
|
|
.mrn15 {
|
|
margin-right: -15px !important;
|
|
}
|
|
.mrn20 {
|
|
margin-right: -20px !important;
|
|
}
|
|
.mrn30 {
|
|
margin-right: -30px !important;
|
|
}
|
|
.mbn5 {
|
|
margin-bottom: -5px !important;
|
|
}
|
|
.mbn10 {
|
|
margin-bottom: -10px !important;
|
|
}
|
|
.mbn15 {
|
|
margin-bottom: -15px !important;
|
|
}
|
|
.mbn20 {
|
|
margin-bottom: -20px !important;
|
|
}
|
|
.mbn30 {
|
|
margin-bottom: -30px !important;
|
|
}
|
|
.mln5 {
|
|
margin-left: -5px !important;
|
|
}
|
|
.mln10 {
|
|
margin-left: -10px !important;
|
|
}
|
|
.mln15 {
|
|
margin-left: -15px !important;
|
|
}
|
|
.mln20 {
|
|
margin-left: -20px !important;
|
|
}
|
|
.mln30 {
|
|
margin-left: -30px !important;
|
|
}
|
|
|
|
/* Vertical Negative Margin "mv" + "n" + "x" */
|
|
.mvn5 {
|
|
margin-top: -5px !important;
|
|
margin-bottom: -5px !important;
|
|
}
|
|
.mvn10 {
|
|
margin-top: -10px !important;
|
|
margin-bottom: -10px !important;
|
|
}
|
|
.mvn15 {
|
|
margin-top: -15px !important;
|
|
margin-bottom: -15px !important;
|
|
}
|
|
.mvn20 {
|
|
margin-top: -20px !important;
|
|
margin-bottom: -20px !important;
|
|
}
|
|
.mvn30 {
|
|
margin-top: -30px !important;
|
|
margin-bottom: -30px !important;
|
|
}
|
|
|
|
/* Horizontal Negative Margin "mh" + "n" + "x" */
|
|
.mhn5 {
|
|
margin-left: -5px !important;
|
|
margin-right: -5px !important;
|
|
}
|
|
.mhn10 {
|
|
margin-left: -10px !important;
|
|
margin-right: -10px !important;
|
|
}
|
|
.mhn15 {
|
|
margin-left: -15px !important;
|
|
margin-right: -15px !important;
|
|
}
|
|
.mhn20 {
|
|
margin-left: -20px !important;
|
|
margin-right: -20px !important;
|
|
}
|
|
.mhn30 {
|
|
margin-left: -30px !important;
|
|
margin-right: -30px !important;
|
|
}
|
|
|
|
/*===============================================
|
|
F. LineHeight Helpers
|
|
================================================= */
|
|
.lh0 {
|
|
line-height: 0 !important;
|
|
}
|
|
.lh5 {
|
|
line-height: 5px !important;
|
|
}
|
|
.lh10 {
|
|
line-height: 10px !important;
|
|
}
|
|
.lh15 {
|
|
line-height: 15px !important;
|
|
}
|
|
.lh20 {
|
|
line-height: 20px !important;
|
|
}
|
|
.lh25 {
|
|
line-height: 25px !important;
|
|
}
|
|
.lh30 {
|
|
line-height: 30px !important;
|
|
}
|
|
.lh35 {
|
|
line-height: 35px !important;
|
|
}
|
|
.lh40 {
|
|
line-height: 40px !important;
|
|
}
|
|
|
|
/*===============================================
|
|
G. Border Helpers
|
|
================================================= */
|
|
|
|
/* Border Disables */
|
|
.br-l-n {
|
|
border-left: none !important
|
|
}
|
|
.br-r-n {
|
|
border-right: none !important
|
|
}
|
|
.br-t-n {
|
|
border-top: none !important
|
|
}
|
|
.br-b-n {
|
|
border-bottom: none !important
|
|
}
|
|
.br-n {
|
|
border: none !important
|
|
}
|
|
.br-v-n {
|
|
// v - "vertical"
|
|
border-top: none !important;
|
|
border-bottom: none !important;
|
|
}
|
|
.br-h-n {
|
|
// h - "horizontal"
|
|
border-left: none !important;
|
|
border-right: none !important;
|
|
}
|
|
|
|
/* Default Borders */
|
|
.br-a {
|
|
border: 1px solid #EEE !important
|
|
} // "-a" = all sides
|
|
.br-l {
|
|
border-left: 1px solid #EEE !important
|
|
}
|
|
.br-r {
|
|
border-right: 1px solid #EEE !important
|
|
}
|
|
.br-t {
|
|
border-top: 1px solid #EEE !important
|
|
}
|
|
.br-b {
|
|
border-bottom: 1px solid #EEE !important
|
|
}
|
|
|
|
/* Border Style */
|
|
.br-dashed {
|
|
border-style: dotted !important
|
|
}
|
|
|
|
/* Border Radius */
|
|
.br0 {
|
|
border-radius: 0px !important
|
|
}
|
|
.br1 {
|
|
border-radius: 1px !important
|
|
}
|
|
.br2 {
|
|
border-radius: 2px !important
|
|
}
|
|
.br3 {
|
|
border-radius: 3px !important
|
|
}
|
|
.br4 {
|
|
border-radius: 4px !important
|
|
}
|
|
.br6 {
|
|
border-radius: 6px !important
|
|
}
|
|
.br8 {
|
|
border-radius: 8px !important
|
|
}
|
|
.br12 {
|
|
border-radius: 12px !important
|
|
}
|
|
.br24 {
|
|
border-radius: 24px !important
|
|
}
|
|
.br64 {
|
|
border-radius: 64px !important
|
|
} // circle
|
|
|
|
/* Border Width */
|
|
.bw1 {
|
|
border-width: 1px !important
|
|
}
|
|
.bw2 {
|
|
border-width: 2px !important
|
|
}
|
|
.bw3 {
|
|
border-width: 3px !important
|
|
}
|
|
.bw4 {
|
|
border-width: 4px !important
|
|
}
|
|
.bw5 {
|
|
border-width: 5px !important
|
|
}
|
|
.bw8 {
|
|
border-width: 8px !important
|
|
}
|
|
.bw10 {
|
|
border-width: 10px !important
|
|
}
|
|
.bw15 {
|
|
border-width: 15px !important
|
|
}
|
|
|
|
/*Border Colors Generate contextual modifier classes for colorizing the alert.
|
|
*/
|
|
.br-white {
|
|
border-color: #FFF !important
|
|
}
|
|
.br-lighter {
|
|
border-color: #EEE !important
|
|
} // Default
|
|
.br-light {
|
|
border-color: #E7E7E7 !important
|
|
}
|
|
.br-grey {
|
|
border-color: #d9d9d9 !important
|
|
}
|
|
.br-greyer {
|
|
border-color: #CCC !important
|
|
}
|
|
.br-dark {
|
|
.br-variant(@brand-dark);
|
|
}
|
|
.br-primary {
|
|
.br-variant(@brand-primary);
|
|
}
|
|
.br-info {
|
|
.br-variant(@brand-info);
|
|
}
|
|
.br-success {
|
|
.br-variant(@brand-success);
|
|
}
|
|
.br-warning {
|
|
.br-variant(@brand-warning);
|
|
}
|
|
.br-danger {
|
|
.br-variant(@brand-danger);
|
|
}
|
|
.br-alert {
|
|
.br-variant(@brand-alert);
|
|
}
|
|
.br-system {
|
|
.br-variant(@brand-system);
|
|
}
|
|
.br-tp-top {
|
|
border-top-color: rgba(0, 0, 0, 0.1);
|
|
}
|
|
.br-tp-right {
|
|
border-right-color: rgba(0, 0, 0, 0.1);
|
|
}
|
|
.br-tp-left {
|
|
border-left-color: rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
/*===============================================
|
|
H. Max Width Helpers
|
|
================================================= */
|
|
.fluid-width {
|
|
width: 100% !important
|
|
}
|
|
.mw10 {
|
|
max-width: 10px !important
|
|
}
|
|
.mw20 {
|
|
max-width: 20px !important
|
|
}
|
|
.mw30 {
|
|
max-width: 30px !important
|
|
}
|
|
.mw35 {
|
|
max-width: 35px !important
|
|
}
|
|
.mw40 {
|
|
max-width: 40px !important
|
|
}
|
|
.mw45 {
|
|
max-width: 45px !important
|
|
}
|
|
.mw50 {
|
|
max-width: 50px !important
|
|
}
|
|
.mw60 {
|
|
max-width: 60px !important
|
|
}
|
|
.mw80 {
|
|
max-width: 80px !important
|
|
}
|
|
.mw100 {
|
|
max-width: 100px !important
|
|
}
|
|
.mw140 {
|
|
max-width: 140px !important
|
|
}
|
|
.mw160 {
|
|
max-width: 160px !important
|
|
}
|
|
.mw180 {
|
|
max-width: 180px !important
|
|
}
|
|
.mw200 {
|
|
max-width: 200px !important
|
|
}
|
|
.mw240 {
|
|
max-width: 240px !important
|
|
}
|
|
.mw280 {
|
|
max-width: 280px !important
|
|
}
|
|
.mw320 {
|
|
max-width: 320px !important
|
|
}
|
|
.mw400 {
|
|
max-width: 400px !important
|
|
}
|
|
.mw450 {
|
|
max-width: 450px !important
|
|
}
|
|
.mw500 {
|
|
max-width: 500px !important
|
|
}
|
|
.mw600 {
|
|
max-width: 600px !important
|
|
}
|
|
.mw700 {
|
|
max-width: 700px !important
|
|
}
|
|
.mw800 {
|
|
max-width: 800px !important
|
|
}
|
|
.mw900 {
|
|
max-width: 900px !important
|
|
}
|
|
.mw1000 {
|
|
max-width: 1000px !important
|
|
}
|
|
.mw1100 {
|
|
max-width: 1100px !important
|
|
}
|
|
.mw1200 {
|
|
max-width: 1200px !important
|
|
}
|
|
|
|
/*Regular Width Helpers. Primarily used
|
|
on tables, feel free to add more*/
|
|
.w20 {
|
|
width: 20px !important
|
|
}
|
|
.w30 {
|
|
width: 30px !important
|
|
}
|
|
.w40 {
|
|
width: 40px !important
|
|
}
|
|
.w50 {
|
|
width: 50px !important
|
|
}
|
|
.w75 {
|
|
width: 75px !important
|
|
}
|
|
.w100 {
|
|
width: 100px !important
|
|
}
|
|
.w125 {
|
|
width: 125px !important
|
|
}
|
|
.w150 {
|
|
width: 150px !important
|
|
}
|
|
.w175 {
|
|
width: 175px !important
|
|
}
|
|
.w200 {
|
|
width: 200px !important
|
|
}
|
|
.w225 {
|
|
width: 225px !important
|
|
}
|
|
.w250 {
|
|
width: 250px !important
|
|
}
|
|
.w300 {
|
|
width: 300px !important
|
|
}
|
|
.w320 {
|
|
width: 320px !important
|
|
}
|
|
.w350 {
|
|
width: 350px !important
|
|
}
|
|
.w400 {
|
|
width: 400px !important
|
|
}
|
|
.w450 {
|
|
width: 450px !important
|
|
}
|
|
.mnw20 {
|
|
min-width: 20px !important
|
|
}
|
|
.mnw30 {
|
|
min-width: 30px !important
|
|
}
|
|
.mnw40 {
|
|
min-width: 40px !important
|
|
}
|
|
.mnw50 {
|
|
min-width: 50px !important
|
|
}
|
|
.mnw75 {
|
|
min-width: 75px !important
|
|
}
|
|
.mnw100 {
|
|
min-width: 100px !important
|
|
}
|
|
.mnw125 {
|
|
min-width: 125px !important
|
|
}
|
|
.mnw150 {
|
|
min-width: 150px !important
|
|
}
|
|
.mnw175 {
|
|
min-width: 175px !important
|
|
}
|
|
.mnw200 {
|
|
min-width: 200px !important
|
|
}
|
|
.mnw250 {
|
|
min-width: 250px !important
|
|
}
|
|
.mnw300 {
|
|
min-width: 300px !important
|
|
}
|
|
.mnw500 {
|
|
min-width: 500px !important
|
|
}
|
|
.mnw700 {
|
|
min-width: 700px !important
|
|
}
|
|
.mnw1000 {
|
|
min-width: 1000px !important
|
|
}
|