You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
143 lines
2.8 KiB
SCSS
143 lines
2.8 KiB
SCSS
// Margin and Padding
|
|
|
|
@each $prop, $abbrev in (margin: m, padding: p) {
|
|
@each $size, $length in $spacers {
|
|
|
|
.#{$abbrev}-#{$size} { #{$prop}: $length !important; }
|
|
.#{$abbrev}t-#{$size} { #{$prop}-top: $length !important; }
|
|
.#{$abbrev}r-#{$size} { #{$prop}-right: $length !important; }
|
|
.#{$abbrev}b-#{$size} { #{$prop}-bottom: $length !important; }
|
|
.#{$abbrev}l-#{$size} { #{$prop}-left: $length !important; }
|
|
.#{$abbrev}x-#{$size} {
|
|
#{$prop}-right: $length !important;
|
|
#{$prop}-left: $length !important;
|
|
}
|
|
.#{$abbrev}y-#{$size} {
|
|
#{$prop}-top: $length !important;
|
|
#{$prop}-bottom: $length !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
@each $key, $val in $grid-breakpoints {
|
|
@include media-breakpoint-up($key) {
|
|
$y: map-get($extreme-padding, $key);
|
|
.e-px {
|
|
padding-left: $y;
|
|
padding-right: $y;
|
|
}
|
|
}
|
|
}
|
|
|
|
.img-fluid {
|
|
max-width: 100%;
|
|
height:auto;
|
|
}
|
|
|
|
.inline-ul>li {
|
|
display: inline;
|
|
}
|
|
|
|
.list-inline-div>div {
|
|
display: inline-block;
|
|
}
|
|
|
|
// Center text on mobile
|
|
.center-on-small-only {
|
|
@media #{$medium-and-down} {
|
|
text-align: center;
|
|
.img-fluid {
|
|
display: inline;
|
|
}
|
|
}
|
|
}
|
|
|
|
.flex-center {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100%;
|
|
p {
|
|
margin: 0;
|
|
}
|
|
ul {
|
|
text-align: center;
|
|
li {
|
|
margin-bottom: 1rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.hidden-md-down {
|
|
@media (max-width: $medium-screen){
|
|
display: none!important;
|
|
}
|
|
}
|
|
|
|
.mb-r {
|
|
@media (min-width: $medium-screen){
|
|
margin-bottom: 3rem!important;
|
|
}
|
|
@media (max-width: $medium-screen){
|
|
margin-bottom: 2rem!important;
|
|
}
|
|
}
|
|
|
|
.font-bold {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.font-up {
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
// Dividers light and dark variations
|
|
.hr-light {
|
|
border-top: 1px solid #fff;
|
|
}
|
|
|
|
.hr-dark {
|
|
border-top: 1px solid #666;
|
|
}
|
|
|
|
// Blockquote contextual
|
|
.blockquote {
|
|
.bq-title {
|
|
font-weight: 400;
|
|
font-size: 1.5rem;
|
|
margin-bottom: 0;
|
|
}
|
|
p {
|
|
font-size: 1.1rem;
|
|
}
|
|
}
|
|
|
|
.bq-primary {
|
|
border-left: 3px solid $primary-color;
|
|
.bq-title {
|
|
color: $primary-color;
|
|
}
|
|
}
|
|
|
|
.bq-warning {
|
|
border-left: 3px solid $warning-color;
|
|
.bq-title {
|
|
color: $warning-color;
|
|
}
|
|
}
|
|
|
|
.bq-danger {
|
|
border-left: 3px solid $danger-color;
|
|
.bq-title {
|
|
color: $danger-color;
|
|
}
|
|
}
|
|
|
|
.bq-success {
|
|
border-left: 3px solid $success-color;
|
|
.bq-title {
|
|
color: $success-color;
|
|
}
|
|
} |