google
/
material-design-lite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixing up CSS class names for column layout.

master
Sérgio Gomes 2014-12-17 16:35:00 +00:00
parent 8420eab629
commit 4c85e9e760
4 changed files with 47 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
app/styleguide/column-layout/_column-layout.scss
View File

@ -1,26 +1,26 @@
/* Cutoff points for devices */
$min_tablet_size: 768px;
$min_desktop_size: 1024px;
$columns-tablet-size: 768px;
$columns-desktop-size: 1024px;
/* Web (desktop) layout. Columns are fixed width, and there's a maximum number
of 3 columns, after which we just add padding to either side. */
$web_columns: 3;
$web_column_size: 360px;
$web_gutter: 40px;
$columns-web-count: 3;
$columns-web-size: 360px;
$columns-web-gutter: 40px;
/* Tablet layout. There's a fixed number of columns, which grow to fill the
entire container. */
$tablet_columns: 2;
$tablet_gutter: 24px;
$columns-tablet-count: 2;
$columns-tablet-gutter: 24px;
/* Phone layout. There's a fixed number of columns, which grow to fill the
entire container. */
$phone_columns: 1;
$phone_gutter: 16px;
$columns-phone-count: 1;
$columns-phone-gutter: 16px;
/* Web layout */
.column-layout {
.wsk-column-layout {
display: flex;
flex-direction: row;
flex-wrap: wrap;
@ -28,13 +28,13 @@ $phone_gutter: 16px;
margin: 0;
box-sizing: border-box;
padding: $web_gutter / 2;
padding: $columns-web-gutter / 2;
}
.column-layout > * {
min-width: $web_column_size;
width: $web_column_size;
margin: $web_gutter / 2;
.wsk-column-layout > * {
min-width: $columns-web-size;
width: $columns-web-size;
margin: $columns-web-gutter / 2;
box-sizing: border-box;
}
@ -44,7 +44,7 @@ $phone_gutter: 16px;
last line to align correctly, while keeping the flexbox centered on its
container.
TODO(sgomes): Explore a different way of doing this. */
.column-layout > .wrap-hack {
.wsk-column-layout > .wsk-column-layout__wrap-hack {
height: 0;
min-height: 0;
max-height: 0;
@ -56,42 +56,43 @@ $phone_gutter: 16px;
/* Add padding to avoid the flexbox growing beyond 3 columns.
Yes, we use padding with calc. I promise this is the last hack. */
$web_block_size: $web_column_size + $web_gutter;
$web_padding_size: $web_columns * ($web_column_size + $web_gutter) / 2;
$columns-web-block-size: $columns-web-size + $columns-web-gutter;
$columns-web-padding-size: $columns-web-count *
($columns-web-size + $columns-web-gutter) / 2;
@media screen
and (min-width: ($web_columns + 1) * $web_block_size) {
.column-layout {
padding-left: calc(50% - #{$web_padding_size});
padding-right: calc(50% - #{$web_padding_size});
and (min-width: ($columns-web-count + 1) * $columns-web-block-size) {
.wsk-column-layout {
padding-left: calc(50% - #{$columns-web-padding-size});
padding-right: calc(50% - #{$columns-web-padding-size});
}
}
/* Tablet layout */
$tablet_column_percent: 100% / $tablet_columns;
$columns-tablet-percent: 100% / $columns-tablet-count;
@media screen
and (min-width: $min_tablet_size)
and (max-width: $min_desktop_size - 1px) {
.column-layout {
padding: $tablet_gutter / 2;
and (min-width: $columns-tablet-size)
and (max-width: $columns-desktop-size - 1px) {
.wsk-column-layout {
padding: $columns-tablet-gutter / 2;
}
.column-layout > * {
margin: $tablet_gutter / 2;
min-width: calc(#{$tablet_column_percent} - #{$tablet_gutter});
width: calc(#{$tablet_column_percent} - #{$tablet_gutter});
.wsk-column-layout > * {
margin: $columns-tablet-gutter / 2;
min-width: calc(#{$columns-tablet-percent} - #{$columns-tablet-gutter});
width: calc(#{$columns-tablet-percent} - #{$columns-tablet-gutter});
}
}
/* Phone layout */
$phone_column_percent: 100% / $phone_columns;
@media screen and (max-width: $min_tablet_size - 1px) {
.column-layout {
padding: $phone_gutter / 2;
$columns-phone-percent: 100% / $columns-phone-count;
@media screen and (max-width: $columns-tablet-size - 1px) {
.wsk-column-layout {
padding: $columns-phone-gutter / 2;
}
.column-layout > * {
margin: $phone_gutter / 2;
width: calc(#{$phone_column_percent} - #{$phone_gutter});
min-width: calc(#{$phone_column_percent} - #{$phone_gutter});
.wsk-column-layout > * {
margin: $columns-phone-gutter / 2;
width: calc(#{$columns-phone-percent} - #{$columns-phone-gutter});
min-width: calc(#{$columns-phone-percent} - #{$columns-phone-gutter});
}
}

4
app/styleguide/column-layout/column-layout.js
View File

@ -2,9 +2,9 @@
(function() {
window.addEventListener('load', function() {
var INVISIBLE_WRAPPING_ELEMENT_CLASS = 'wrap-hack';
var INVISIBLE_WRAPPING_ELEMENT_CLASS = 'wsk-column-layout__wrap-hack';
var INVISIBLE_WRAPPING_ELEMENT_COUNT = 3;
var columnLayouts = document.querySelectorAll('.column-layout');
var columnLayouts = document.querySelectorAll('.wsk-column-layout');
for (var i = 0; i < columnLayouts.length; i++) {
var columnLayout = columnLayouts[i];

2
app/styleguide/column-layout/demo.html
View File

@ -12,7 +12,7 @@
<link rel="stylesheet" href="demo.css">
</head>
<body>
<div class="column-layout">
<div class="wsk-column-layout">
<div>Each child</div>
<div>gets to be</div>
<div>an independent entity</div>

8
app/styleguide/column-layout/demo.scss
View File

@ -2,20 +2,20 @@
@import '../palette/palette';
@import '_column-layout';
.column-layout {
.wsk-column-layout {
background-color: nth($palette-grey, 2);
}
.column-layout > * {
.wsk-column-layout > * {
min-height: 300px;
background-color: nth($palette-green, 2);
padding: 16px;
}
.column-layout > *:nth-of-type(3n+1) {
.wsk-column-layout > *:nth-of-type(3n+1) {
background-color: nth($palette-red, 2);
}
.column-layout > *:nth-of-type(3n+2) {
.wsk-column-layout > *:nth-of-type(3n+2) {
background-color: nth($palette-blue, 2);
}