125 lines
2.4 KiB
SCSS
125 lines
2.4 KiB
SCSS
//== Media queries breakpoints
|
|
//
|
|
//## Define the breakpoints at which your layout will change, adapting to different screen sizes.
|
|
|
|
// Extra small screen / phone
|
|
//** Deprecated `$screen-xs` as of v3.0.1
|
|
$screen-xs: 480px !default;
|
|
//** Deprecated `$screen-xs-min` as of v3.2.0
|
|
$screen-xs-min: $screen-xs !default;
|
|
|
|
// Small screen / tablet
|
|
//** Deprecated `$screen-sm` as of v3.0.1
|
|
$screen-sm: 768px !default;
|
|
$screen-sm-min: $screen-sm !default;
|
|
|
|
// Medium screen / desktop
|
|
//** Deprecated `$screen-md` as of v3.0.1
|
|
$screen-md: 992px !default;
|
|
$screen-md-min: $screen-md !default;
|
|
//** Deprecated `$screen-desktop` as of v3.0.1
|
|
$screen-desktop: $screen-md-min !default;
|
|
|
|
// Large screen / wide desktop
|
|
//** Deprecated `$screen-lg` as of v3.0.1
|
|
$screen-lg: 1200px !default;
|
|
$screen-lg-min: $screen-lg !default;
|
|
//** Deprecated `$screen-lg-desktop` as of v3.0.1
|
|
$screen-lg-desktop: $screen-lg-min !default;
|
|
|
|
// So media queries don't overlap when required, provide a maximum
|
|
$screen-xs-max: ($screen-sm-min - 1) !default;
|
|
$screen-sm-max: ($screen-md-min - 1) !default;
|
|
$screen-md-max: ($screen-lg-min - 1) !default;
|
|
|
|
@mixin MQ-Xsmall() {
|
|
@media (max-width: $screen-xs-max) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@mixin MQ-Small() {
|
|
@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@mixin MQ-Medium() {
|
|
@media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
|
|
@mixin MQ-Large() {
|
|
@media (min-width: $screen-lg-min) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
|
|
display: none !important;
|
|
}
|
|
|
|
.selectable {
|
|
user-select: text !important;
|
|
cursor: text;
|
|
}
|
|
|
|
.mt-5 {
|
|
margin-top: 5px !important;
|
|
}
|
|
|
|
.mt-10 {
|
|
margin-top: 10px !important;
|
|
}
|
|
|
|
.mr-5 {
|
|
margin-right: 5px !important;
|
|
}
|
|
|
|
.mr-8 {
|
|
margin-right: 8px !important;
|
|
}
|
|
|
|
.faded {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.center-align {
|
|
text-align: center !important;
|
|
}
|
|
|
|
.block {
|
|
display: block !important;
|
|
}
|
|
|
|
.inline {
|
|
display: inline-block;
|
|
}
|
|
|
|
.wrap {
|
|
word-wrap: break-word;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.medium-padding {
|
|
padding: 10px !important;
|
|
}
|
|
|
|
.bold {
|
|
font-weight: bold !important;
|
|
}
|
|
|
|
.normal {
|
|
font-weight: normal !important;
|
|
}
|
|
|
|
.small-text {
|
|
font-size: 10px;
|
|
}
|
|
|
|
.medium-text {
|
|
font-size: 14px !important;
|
|
}
|