381 lines
6.8 KiB
SCSS
381 lines
6.8 KiB
SCSS
//
|
|
// Utils
|
|
// --------------------------------------------------
|
|
|
|
//** Borders ********************************************************************************//
|
|
|
|
// Add borders
|
|
.bordered {
|
|
border: 1px solid $panels-border-color;
|
|
}
|
|
|
|
.bordered[class*='bg-'],
|
|
[class*='bg-'] .border-t {
|
|
border-color: #fff;
|
|
border-color: rgba(0,0,0,.2);
|
|
}
|
|
|
|
.border-t {
|
|
border-top: 1px solid $panels-border-color;
|
|
}
|
|
|
|
// Remove borders
|
|
.no-border {
|
|
border-width: 0 !important;
|
|
}
|
|
|
|
// Remove horizontal borders
|
|
.no-border-hr {
|
|
border-left-width: 0 !important;
|
|
border-right-width: 0 !important;
|
|
}
|
|
|
|
// Remove vertical borders
|
|
.no-border-vr {
|
|
border-top-width: 0 !important;
|
|
border-bottom-width: 0 !important;
|
|
}
|
|
|
|
// Remove top border
|
|
.no-border-t {
|
|
border-top-width: 0 !important;
|
|
}
|
|
|
|
// Remove right border
|
|
body:not(.right-to-left) .no-border-r {
|
|
border-right-width: 0 !important;
|
|
}
|
|
|
|
|
|
// Remove bottom border
|
|
.no-border-b {
|
|
border-bottom-width: 0 !important;
|
|
}
|
|
|
|
// Remove left border
|
|
body:not(.right-to-left) .no-border-l {
|
|
border-left-width: 0 !important;
|
|
}
|
|
|
|
|
|
//** Margins ********************************************************************************//
|
|
|
|
// Make div page-wide
|
|
.no-grid-gutter-h {
|
|
margin-left: -$content-wrapper-padding !important;
|
|
margin-right: -$content-wrapper-padding !important;
|
|
}
|
|
|
|
// Make panel page-wide
|
|
.panel-wide {
|
|
margin-left: -$panel-content-padding !important;
|
|
margin-right: -$panel-content-padding !important;
|
|
}
|
|
|
|
// Add bottom gutter margin
|
|
.grid-gutter-margin-b {
|
|
margin-bottom: $grid-gutter-width;
|
|
}
|
|
|
|
// Remove margins
|
|
.no-margin {
|
|
margin: 0 !important;
|
|
}
|
|
|
|
// Remove horizontal margins
|
|
.no-margin-hr {
|
|
margin-left: 0 !important;
|
|
margin-right: 0 !important;
|
|
}
|
|
|
|
// Remove vertical margins
|
|
.no-margin-vr {
|
|
margin-top: 0 !important;
|
|
margin-bottom: 0 !important;
|
|
}
|
|
|
|
// Remove bottom margin
|
|
.no-margin-b {
|
|
margin-bottom: 0 !important;
|
|
}
|
|
|
|
// Remove top margin
|
|
.no-margin-t {
|
|
margin-top: 0 !important;
|
|
}
|
|
|
|
// Add form-group's margin
|
|
.form-group-margin {
|
|
margin-bottom: 15px !important;
|
|
}
|
|
|
|
|
|
//** Paddings *******************************************************************************//
|
|
|
|
// Add panel body's padding
|
|
.panel-padding {
|
|
padding: $panel-content-padding !important;
|
|
}
|
|
|
|
// Add grid column's padding
|
|
.grid-gutter-padding-h {
|
|
padding-left: $content-wrapper-padding;
|
|
padding-right: $content-wrapper-padding;
|
|
}
|
|
|
|
// Add tab content's padding
|
|
.tab-content-padding {
|
|
padding: 15px 0 !important;
|
|
}
|
|
|
|
// Add horizontal panel body's padding
|
|
.panel-padding-h {
|
|
padding-left: $panel-content-padding !important;
|
|
padding-right: $panel-content-padding !important;
|
|
}
|
|
|
|
// Reduce padding
|
|
.padding-sm {
|
|
padding: 10px 15px !important;
|
|
}
|
|
|
|
// Small horizontal padding
|
|
.padding-sm-hr {
|
|
padding-left: 15px !important;
|
|
padding-right: 15px !important;
|
|
}
|
|
|
|
// Extra small horizontal padding
|
|
.padding-xs-hr {
|
|
padding-left: 10px !important;
|
|
padding-right: 10px !important;
|
|
}
|
|
|
|
// Small vertical padding
|
|
.padding-sm-vr {
|
|
padding-top: 15px !important;
|
|
padding-bottom: 15px !important;
|
|
}
|
|
|
|
// Extra small vertical padding
|
|
.padding-xs-vr {
|
|
padding-top: 10px !important;
|
|
padding-bottom: 10px !important;
|
|
}
|
|
|
|
// Remove padding
|
|
.no-padding {
|
|
padding: 0 !important;
|
|
}
|
|
|
|
// Remove horizontal padding
|
|
.no-padding-hr {
|
|
padding-left: 0 !important;
|
|
padding-right: 0 !important;
|
|
}
|
|
|
|
// Remove vertical padding
|
|
.no-padding-vr {
|
|
padding-top: 0 !important;
|
|
padding-bottom: 0 !important;
|
|
}
|
|
|
|
// Remove bottom padding
|
|
.no-padding-b {
|
|
padding-bottom: 0 !important;
|
|
}
|
|
|
|
// Remove top padding
|
|
.no-padding-t {
|
|
padding-top: 0 !important;
|
|
}
|
|
|
|
|
|
//** Text position **************************************************************************//
|
|
|
|
// Left-aligned text
|
|
.text-left {
|
|
text-align: left;
|
|
}
|
|
|
|
// Center-aligned text
|
|
.text-center {
|
|
text-align: center;
|
|
}
|
|
|
|
// Right-aligned text
|
|
.text-right {
|
|
text-align: right;
|
|
}
|
|
|
|
// Responsive
|
|
|
|
@media (min-width: $screen-sm-min) {
|
|
.text-left-sm { text-align: left; }
|
|
.text-center-sm { text-align: center; }
|
|
.text-right-sm { text-align: right; }
|
|
}
|
|
|
|
@media (min-width: $screen-md-min) {
|
|
.text-left-md { text-align: left; }
|
|
.text-center-md { text-align: center; }
|
|
.text-right-md { text-align: right; }
|
|
}
|
|
|
|
@media (min-width: $screen-lg-min) {
|
|
.text-left-lg { text-align: left; }
|
|
.text-center-lg { text-align: center; }
|
|
.text-right-lg { text-align: right; }
|
|
}
|
|
|
|
|
|
|
|
// Vertical align in table cells
|
|
//
|
|
|
|
// Aligned top
|
|
.valign-top,
|
|
.valign-top td,
|
|
.valign-top th {
|
|
vertical-align: top !important;
|
|
}
|
|
|
|
// Aligned middle
|
|
.valign-middle,
|
|
.valign-middle td,
|
|
.valign-middle th {
|
|
vertical-align: middle !important;
|
|
}
|
|
|
|
// Aligned bottom
|
|
.valign-bottom,
|
|
.valign-bottom td,
|
|
.valign-bottom th {
|
|
vertical-align: bottom !important;
|
|
}
|
|
|
|
|
|
//** Text sizes *****************************************************************************//
|
|
|
|
// Extra small text
|
|
.text-xs {
|
|
font-size: 11px;
|
|
}
|
|
|
|
// Small text
|
|
.text-sm {
|
|
font-size: 12px;
|
|
}
|
|
|
|
// Big text
|
|
.text-bg {
|
|
font-size: 17px;
|
|
}
|
|
|
|
// Large text
|
|
.text-lg {
|
|
font-size: 23px;
|
|
}
|
|
|
|
// Extra large text
|
|
.text-xlg {
|
|
font-size: 30px;
|
|
}
|
|
|
|
// Super large text
|
|
.text-slg {
|
|
font-size: 50px;
|
|
}
|
|
|
|
|
|
//** Text weights ***************************************************************************//
|
|
|
|
.text-slim {
|
|
font-weight: 300 !important;
|
|
}
|
|
|
|
.text-normal {
|
|
font-weight: 400 !important;
|
|
}
|
|
|
|
.text-semibold {
|
|
font-weight: 600 !important;
|
|
}
|
|
|
|
.text-bold {
|
|
font-weight: 700 !important;
|
|
}
|
|
|
|
|
|
//** Text colors ****************************************************************************//
|
|
|
|
.text-default {
|
|
@include pixel-text-color(darken(#98a3a4, 8%));
|
|
}
|
|
.text-success {
|
|
@include pixel-text-color(darken($success-color, 8%));
|
|
}
|
|
.text-danger {
|
|
@include pixel-text-color(darken($danger-color, 8%));
|
|
}
|
|
.text-warning {
|
|
@include pixel-text-color(darken($warning-color, 8%));
|
|
}
|
|
.text-info {
|
|
@include pixel-text-color(darken($info-color, 8%));
|
|
}
|
|
.text-light-gray {
|
|
@include pixel-text-color(#bbb);
|
|
}
|
|
|
|
|
|
//** Background colors **********************************************************************//
|
|
|
|
.bg-default {
|
|
@include pixel-bg-color(#98a3a4);
|
|
}
|
|
.bg-success {
|
|
@include pixel-bg-color($success-color);
|
|
}
|
|
.bg-danger {
|
|
@include pixel-bg-color($danger-color);
|
|
}
|
|
.bg-warning {
|
|
@include pixel-bg-color($warning-color);
|
|
}
|
|
.bg-info {
|
|
@include pixel-bg-color($info-color);
|
|
}
|
|
.bg-panel {
|
|
background: $panel-heading-bg;
|
|
}
|
|
.no-bg {
|
|
background: none !important;
|
|
}
|
|
|
|
|
|
//** Rounded borders **********************************************************************//
|
|
|
|
// Round element
|
|
.rounded {
|
|
border-radius: 999999px !important;
|
|
}
|
|
// Remove rounded borders
|
|
.no-border-radius {
|
|
border-radius: 0 !important;
|
|
}
|
|
|
|
//** Columns sizing **********************************************************************//
|
|
|
|
@media (min-width: $screen-sm-min) {
|
|
.col-sm-auto { width: auto; }
|
|
}
|
|
|
|
@media (min-width: $screen-md-min) {
|
|
.col-md-auto { width: auto; }
|
|
}
|
|
|
|
@media (min-width: $screen-lg-min) {
|
|
.col-lg-auto { width: auto; }
|
|
}
|