(css) Fix breakpoints

This commit is contained in:
Francis Lachapelle
2016-07-21 14:34:46 -04:00
parent 5ad962d7b2
commit e804e5b7c0
3 changed files with 22 additions and 4 deletions

View File

@@ -683,7 +683,7 @@
</md-fab-actions>
</md-fab-speed-dial>
</div>
<div id="detailView" class="view-detail hide show-gt-md md-default-theme md-background md-bg md-hue-2"
<div id="detailView" class="view-detail hide show-gt-xs md-default-theme md-background md-bg md-hue-2"
layout="column" ui-view="calendarView">
<!-- calendar view -->
</div>

View File

@@ -18,15 +18,15 @@
// using "Breakpoint" (https://github.com/at-import/breakpoint)
@mixin at($breakpoint) {
$min_idx: index($slicer-breakpoint-names, $breakpoint);
$min: nth($slicer-breakpoints, $min_idx) + 1;
$max: nth($slicer-breakpoints, $min_idx + 1);
$min: nth($slicer-breakpoints, $min_idx);
$max: nth($slicer-breakpoints, $min_idx + 1) - 1;
@include breakpoint($min $max) {
@content;
}
}
@mixin from($breakpoint) {
$min_idx: index($slicer-breakpoint-names, $breakpoint);
$min: nth($slicer-breakpoints, $min_idx + 1);
$min: nth($slicer-breakpoints, $min_idx);
@include breakpoint($min) {
@content;
}

View File

@@ -64,6 +64,24 @@ $touch-zone: $touch-zone-width;
// angular-material share breakpoint values between sass and js files (/core/constant.js)
// we might consider using a sass library to import values as json single source for both
/**
* Breakpoint: 0 600px 960px 1024px 1280px
* ├───────────────────┼─────────┼─────────┼───────────┼─────────>
* Slice : xs · sm · md · lg . xl
* · · · · ·
* · · · at(md) · ·
* · · ├─────────┤ ·
* · · · · ·
* · · · from(md) · ·
* · · ├───────────────────────────────>
* · · · ·
* · · to(md) · ·
* ├─────────────────────────────────────────┤ ·
* · ·
* · between(sm, lg) ·
* ├───────────────────────────────┤
*/
$layout-breakpoint-xs: 600px !default;
$layout-breakpoint-sm: 960px !default;
$layout-breakpoint-md: 1280px !default;