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.
Connected.Components/Styles/utilities/layout/_display.scss

66 lines
1.1 KiB

2 years ago
@import '../../abstracts/variables';
@mixin display-mixin ($breakpoint) {
.d-#{$breakpoint}none {
display: none !important;
}
.d-#{$breakpoint}inline {
display: inline !important;
}
.d-#{$breakpoint}inline-block {
display: inline-block !important;
}
.d-#{$breakpoint}block {
display: block !important;
}
.d-#{$breakpoint}table {
display: table !important;
}
.d-#{$breakpoint}table-row {
display: table-row !important;
}
.d-#{$breakpoint}table-cell {
display: table-cell !important;
}
.d-#{$breakpoint}flex {
display: flex !important;
}
.d-#{$breakpoint}inline-flex {
display: inline-flex !important;
}
}
// XS >
@include display-mixin("");
@media (min-width:$breakpoint-sm) {
@include display-mixin("sm-");
}
@media (min-width:$breakpoint-md) {
@include display-mixin("md-");
}
@media (min-width:$breakpoint-lg) {
@include display-mixin("lg-");
}
@media (min-width:$breakpoint-xl) {
@include display-mixin("xl-");
}
@media (min-width:$breakpoint-xxl) {
@include display-mixin("xxl-");
}