ch4o5/locomotive-boilerplate
Template
1
0
Fork 0
mirror of https://github.com/locomotivemtl/locomotive-boilerplate.git synced 2026-01-15 00:55:08 +08:00
Code Issues Projects Releases Wiki Activity

Change width variables

Browse Source
This commit is contained in:
Antoine Boulanger
2015-02-02 14:52:41 -05:00
parent a367d5ba3f
commit dd57056af1
3 changed files with 22 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
project-x/modules/boilerplate/assets/styles/dist/main.css vendored
View File

@@ -431,21 +431,21 @@ button {
.two-thirds {
width: 66.6666666667%; } }
@media (min-width: 768px) {
@media (min-width: 768px) and (max-width: 1023px) {
.quarter {
width: 50%; } }
@media (min-width: 1024px) {
.quarter {
width: 25%; } }
@media (min-width: 768px) {
@media (min-width: 768px) and (max-width: 1023px) {
.three-quarters {
width: 50%; } }
@media (min-width: 1024px) {
.three-quarters {
width: 75%; } }
@media (min-width: 768px) {
@media (min-width: 768px) and (max-width: 1023px) {
.fifth {
width: 50%; } }
@media (min-width: 1024px) {

18
project-x/modules/boilerplate/assets/styles/src/_settings.scss
View File

@@ -46,14 +46,16 @@ $z-index3: 250;
/* Screen widths
========================================================================== */
$from-tablet: 768px;
$to-tablet: $from-tablet - 1;
$from-laptop: 1024px;
$to-laptop: $from-laptop - 1;
$from-desktop: 1280px;
$to-desktop: $from-desktop - 1;
$from-wide: 1680px;
$to-wide: $from-wide - 1;
$from-xs: 414px;
$to-xs: $from-xs - 1;
$from-s: 768px;
$to-s: $from-s - 1;
$from-m: 1024px;
$to-m: $from-m - 1;
$from-l: 1280px;
$to-l: $from-l - 1;
$from-xl: 1680px;
$to-xl: $from-xl - 1;
/* Transitions
========================================================================== */

18
project-x/modules/boilerplate/assets/styles/src/base/_grid.scss
View File

@@ -37,7 +37,7 @@
.half {
@extend .grid__item;
@media (min-width: $from-desktop) {
@media (min-width: $from-m) {
width: 50%;
}
}
@@ -45,7 +45,7 @@
.third {
@extend .grid__item;
@media (min-width: $from-desktop) {
@media (min-width: $from-m) {
width: span(1/3);
}
}
@@ -53,7 +53,7 @@
.two-thirds {
@extend .grid__item;
@media (min-width: $from-desktop) {
@media (min-width: $from-m) {
width: span(2/3);
}
}
@@ -61,11 +61,11 @@
.quarter {
@extend .grid__item;
@media (min-width: $from-tablet) {
@media (min-width: $from-s) and (max-width: $to-m) {
width: 50%;
}
@media (min-width: $from-desktop) {
@media (min-width: $from-m) {
width: span(1/4);
}
}
@@ -73,11 +73,11 @@
.three-quarters {
@extend .grid__item;
@media (min-width: $from-tablet) {
@media (min-width: $from-s) and (max-width: $to-m) {
width: 50%;
}
@media (min-width: $from-desktop) {
@media (min-width: $from-m) {
width: span(3/4);
}
}
@@ -85,11 +85,11 @@
.fifth {
@extend .grid__item;
@media (min-width: $from-tablet) {
@media (min-width: $from-s) and (max-width: $to-m) {
width: 50%;
}
@media (min-width: $from-desktop) {
@media (min-width: $from-m) {
width: span(1/5);
}
}