154 lines
2.9 KiB
SCSS
154 lines
2.9 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;
|
|
}
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
*:focus {outline:0;}
|
|
|
|
.float-group {
|
|
height: 15px;
|
|
&.h10 {
|
|
height: 10px;
|
|
}
|
|
|
|
&.h20 {
|
|
height: 20px;
|
|
}
|
|
|
|
&.h30 {
|
|
height: 30px;
|
|
}
|
|
clear: both;
|
|
}
|
|
|
|
button:focus {outline:0;}
|
|
|
|
|
|
.button-group {
|
|
clear: both;
|
|
height: 36px;
|
|
}
|
|
|
|
.ui-button {
|
|
background-color: $blue-color;
|
|
border: 0;
|
|
color: white;
|
|
font-weight: bold;
|
|
min-height: 36px;
|
|
font-size: 14px;
|
|
|
|
&.block {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.panel {
|
|
position: absolute;
|
|
right: 0px;
|
|
min-width: 300px;
|
|
z-index: 1000;
|
|
margin-top: 10px;
|
|
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
|
|
border: none;
|
|
background-color: white;
|
|
}
|
|
|
|
.panel-right {
|
|
left: 0px;
|
|
}
|
|
|
|
.panel-body {
|
|
padding: 15px;
|
|
}
|
|
|
|
.form-control {
|
|
display: block;
|
|
width: 100%;
|
|
height: 34px;
|
|
padding: 6px 12px;
|
|
font-size: 14px;
|
|
line-height: 1.42857;
|
|
color: #555555;
|
|
background-color: #fff;
|
|
background-image: none;
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
box-shadow: 0;
|
|
}
|
|
|
|
input, button, select, textarea {
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
line-height: inherit;
|
|
}
|
|
|
|
.checkbox {
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
margin-bottom: 10px;
|
|
|
|
input {
|
|
margin-left: 0px;
|
|
}
|
|
}
|