diff options
| author | Mitch Riedstra <Mitch@riedstra.us> | 2017-10-24 16:59:48 -0400 |
|---|---|---|
| committer | Mitch Riedstra <Mitch@riedstra.us> | 2017-10-24 16:59:48 -0400 |
| commit | 3e8b34be2fdeccf16c8b46f1ee518f970853768d (patch) | |
| tree | abcb7d0cb260790a2b4a746e3959f2e7ee3a33f7 /app/dispatch/static/materialize/sass/components/_grid.scss | |
| parent | 4ee5893fd9c82228c62306fc7f5babdfc602e4c4 (diff) | |
| download | dispatch-tracker-3e8b34be2fdeccf16c8b46f1ee518f970853768d.tar.gz dispatch-tracker-3e8b34be2fdeccf16c8b46f1ee518f970853768d.tar.xz | |
Adding in materialize source and templates
Diffstat (limited to 'app/dispatch/static/materialize/sass/components/_grid.scss')
| -rw-r--r-- | app/dispatch/static/materialize/sass/components/_grid.scss | 156 |
1 files changed, 156 insertions, 0 deletions
diff --git a/app/dispatch/static/materialize/sass/components/_grid.scss b/app/dispatch/static/materialize/sass/components/_grid.scss new file mode 100644 index 0000000..7aa9e8f --- /dev/null +++ b/app/dispatch/static/materialize/sass/components/_grid.scss @@ -0,0 +1,156 @@ +.container {
+ margin: 0 auto;
+ max-width: 1280px;
+ width: 90%;
+}
+@media #{$medium-and-up} {
+ .container {
+ width: 85%;
+ }
+}
+@media #{$large-and-up} {
+ .container {
+ width: 70%;
+ }
+}
+.container .row {
+ margin-left: (-1 * $gutter-width / 2);
+ margin-right: (-1 * $gutter-width / 2);
+}
+
+.section {
+ padding-top: 1rem;
+ padding-bottom: 1rem;
+
+ &.no-pad {
+ padding: 0;
+ }
+ &.no-pad-bot {
+ padding-bottom: 0;
+ }
+ &.no-pad-top {
+ padding-top: 0;
+ }
+}
+
+
+// Mixins to eliminate code repitition
+@mixin reset-offset {
+ margin-left: auto;
+ left: auto;
+ right: auto;
+}
+@mixin grid-classes($size, $i, $perc) {
+ &.offset-#{$size}#{$i} {
+ margin-left: $perc;
+ }
+ &.pull-#{$size}#{$i} {
+ right: $perc;
+ }
+ &.push-#{$size}#{$i} {
+ left: $perc;
+ }
+}
+
+
+.row {
+ margin-left: auto;
+ margin-right: auto;
+ margin-bottom: 20px;
+
+ // Clear floating children
+ &:after {
+ content: "";
+ display: table;
+ clear: both;
+ }
+
+ .col {
+ float: left;
+ box-sizing: border-box;
+ padding: 0 $gutter-width / 2;
+ min-height: 1px;
+
+ &[class*="push-"],
+ &[class*="pull-"] {
+ position: relative;
+ }
+
+ $i: 1;
+ @while $i <= $num-cols {
+ $perc: unquote((100 / ($num-cols / $i)) + "%");
+ &.s#{$i} {
+ width: $perc;
+ @include reset-offset;
+ }
+ $i: $i + 1;
+ }
+
+ $i: 1;
+ @while $i <= $num-cols {
+ $perc: unquote((100 / ($num-cols / $i)) + "%");
+ @include grid-classes("s", $i, $perc);
+ $i: $i + 1;
+ }
+
+ @media #{$medium-and-up} {
+
+ $i: 1;
+ @while $i <= $num-cols {
+ $perc: unquote((100 / ($num-cols / $i)) + "%");
+ &.m#{$i} {
+ width: $perc;
+ @include reset-offset;
+ }
+ $i: $i + 1
+ }
+
+ $i: 1;
+ @while $i <= $num-cols {
+ $perc: unquote((100 / ($num-cols / $i)) + "%");
+ @include grid-classes("m", $i, $perc);
+ $i: $i + 1;
+ }
+ }
+
+ @media #{$large-and-up} {
+
+ $i: 1;
+ @while $i <= $num-cols {
+ $perc: unquote((100 / ($num-cols / $i)) + "%");
+ &.l#{$i} {
+ width: $perc;
+ @include reset-offset;
+ }
+ $i: $i + 1;
+ }
+
+ $i: 1;
+ @while $i <= $num-cols {
+ $perc: unquote((100 / ($num-cols / $i)) + "%");
+ @include grid-classes("l", $i, $perc);
+ $i: $i + 1;
+ }
+ }
+
+ @media #{$extra-large-and-up} {
+
+ $i: 1;
+ @while $i <= $num-cols {
+ $perc: unquote((100 / ($num-cols / $i)) + "%");
+ &.xl#{$i} {
+ width: $perc;
+ @include reset-offset;
+ }
+ $i: $i + 1;
+ }
+
+ $i: 1;
+ @while $i <= $num-cols {
+ $perc: unquote((100 / ($num-cols / $i)) + "%");
+ @include grid-classes("xl", $i, $perc);
+ $i: $i + 1;
+ }
+ }
+ }
+}
|