/
waffle-grid.min.css
6 lines (6 loc) · 6.81 KB
/
waffle-grid.min.css
1
2
3
4
5
6
/*!
* waffle-grid - v1.3.6 - (https://lucasgruwez.github.io/waffle-grid)
* Copyright 2017 Lucas Gruwez.
* Licensed under MIT
* https://lucasgruwez.github.io/waffle-grid
*/.container,.grid{width:960px;max-width:80%;margin:0 auto}.grid,.row{display:-webkit-box;display:-ms-flexbox;display:flex}.grid{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.grid.full-width{width:100%;max-width:100%}.row{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;width:100%;-ms-flex-wrap:wrap;flex-wrap:wrap}.col{-webkit-box-sizing:border-box;box-sizing:border-box;margin:10px;vertical-align:top}.center,.left{margin-right:auto}.center,.right{margin-left:auto}.w-auto{-webkit-box-flex:1;-ms-flex:1;flex:1}.col-1-of-4,.col-2-of-8,.col-3-of-12{width:calc(25% - 20px)}.push-1-of-4,.push-2-of-8,.push-3-of-12{margin-left:calc(25% + 20px / 2)}.pull-1-of-4,.pull-2-of-8,.pull-3-of-12{margin-right:calc(25% + 20px / 2)}.col-2-of-4,.col-4-of-8,.col-6-of-12{width:calc(50% - 20px)}.push-2-of-4,.push-4-of-8,.push-6-of-12{margin-left:calc(50% + 20px / 2)}.pull-2-of-4,.pull-4-of-8,.pull-6-of-12{margin-right:calc(50% + 20px / 2)}.col-3-of-4,.col-6-of-8,.col-9-of-12{width:calc(75% - 20px)}.push-3-of-4,.push-6-of-8,.push-9-of-12{margin-left:calc(75% + 20px / 2)}.pull-3-of-4,.pull-6-of-8,.pull-9-of-12{margin-right:calc(75% + 20px / 2)}.col-12-of-12,.col-4-of-4,.col-8-of-8{width:calc(100% - 20px)}.push-12-of-12,.push-4-of-4,.push-8-of-8{margin-left:calc(100% + 20px / 2)}.pull-12-of-12,.pull-4-of-4,.pull-8-of-8{margin-right:calc(100% + 20px / 2)}.col-1-of-8{width:calc(12.5% - 20px)}.push-1-of-8{margin-left:calc(12.5% + 20px / 2)}.pull-1-of-8{margin-right:calc(12.5% + 20px / 2)}.col-3-of-8{width:calc(37.5% - 20px)}.push-3-of-8{margin-left:calc(37.5% + 20px / 2)}.pull-3-of-8{margin-right:calc(37.5% + 20px / 2)}.col-5-of-8{width:calc(62.5% - 20px)}.push-5-of-8{margin-left:calc(62.5% + 20px / 2)}.pull-5-of-8{margin-right:calc(62.5% + 20px / 2)}.col-7-of-8{width:calc(87.5% - 20px)}.push-7-of-8{margin-left:calc(87.5% + 20px / 2)}.pull-7-of-8{margin-right:calc(87.5% + 20px / 2)}.col-1-of-12{width:calc(8.33333% - 20px)}.push-1-of-12{margin-left:calc(8.33333% + 20px / 2)}.pull-1-of-12{margin-right:calc(8.33333% + 20px / 2)}.col-2-of-12{width:calc(16.66667% - 20px)}.push-2-of-12{margin-left:calc(16.66667% + 20px / 2)}.pull-2-of-12{margin-right:calc(16.66667% + 20px / 2)}.col-4-of-12{width:calc(33.33333% - 20px)}.push-4-of-12{margin-left:calc(33.33333% + 20px / 2)}.pull-4-of-12{margin-right:calc(33.33333% + 20px / 2)}.col-5-of-12{width:calc(41.66667% - 20px)}.push-5-of-12{margin-left:calc(41.66667% + 20px / 2)}.pull-5-of-12{margin-right:calc(41.66667% + 20px / 2)}.col-7-of-12{width:calc(58.33333% - 20px)}.push-7-of-12{margin-left:calc(58.33333% + 20px / 2)}.pull-7-of-12{margin-right:calc(58.33333% + 20px / 2)}.col-8-of-12{width:calc(66.66667% - 20px)}.push-8-of-12{margin-left:calc(66.66667% + 20px / 2)}.pull-8-of-12{margin-right:calc(66.66667% + 20px / 2)}.col-10-of-12{width:calc(83.33333% - 20px)}.push-10-of-12{margin-left:calc(83.33333% + 20px / 2)}.pull-10-of-12{margin-right:calc(83.33333% + 20px / 2)}.col-11-of-12{width:calc(91.66667% - 20px)}.push-11-of-12{margin-left:calc(91.66667% + 20px / 2)}.pull-11-of-12{margin-right:calc(91.66667% + 20px / 2)}@media (max-width:840px){.m-hide{display:none}.w-m-auto{-webkit-box-flex:1;-ms-flex:1;flex:1}.m-un-push{margin-left:10px}.m-un-pull{margin-right:10px}.col-m-1-of-4,.col-m-2-of-8{width:calc(25% - 20px)}.push-m-1-of-4,.push-m-2-of-8{margin-left:calc(25% + 20px / 2)}.pull-m-1-of-4,.pull-m-2-of-8{margin-right:calc(25% + 20px / 2)}.col-m-2-of-4,.col-m-3-of-6,.col-m-4-of-8{width:calc(50% - 20px)}.push-m-2-of-4,.push-m-3-of-6,.push-m-4-of-8{margin-left:calc(50% + 20px / 2)}.pull-m-2-of-4,.pull-m-3-of-6,.pull-m-4-of-8{margin-right:calc(50% + 20px / 2)}.col-m-3-of-4,.col-m-6-of-8{width:calc(75% - 20px)}.push-m-3-of-4,.push-m-6-of-8{margin-left:calc(75% + 20px / 2)}.pull-m-3-of-4,.pull-m-6-of-8{margin-right:calc(75% + 20px / 2)}.col-m-4-of-4,.col-m-6-of-6,.col-m-8-of-8{width:calc(100% - 20px)}.push-m-4-of-4,.push-m-6-of-6,.push-m-8-of-8{margin-left:calc(100% + 20px / 2)}.pull-m-4-of-4,.pull-m-6-of-6,.pull-m-8-of-8{margin-right:calc(100% + 20px / 2)}.col-m-1-of-6{width:calc(16.66667% - 20px)}.push-m-1-of-6{margin-left:calc(16.66667% + 20px / 2)}.pull-m-1-of-6{margin-right:calc(16.66667% + 20px / 2)}.col-m-2-of-6{width:calc(33.33333% - 20px)}.push-m-2-of-6{margin-left:calc(33.33333% + 20px / 2)}.pull-m-2-of-6{margin-right:calc(33.33333% + 20px / 2)}.col-m-4-of-6{width:calc(66.66667% - 20px)}.push-m-4-of-6{margin-left:calc(66.66667% + 20px / 2)}.pull-m-4-of-6{margin-right:calc(66.66667% + 20px / 2)}.col-m-5-of-6{width:calc(83.33333% - 20px)}.push-m-5-of-6{margin-left:calc(83.33333% + 20px / 2)}.pull-m-5-of-6{margin-right:calc(83.33333% + 20px / 2)}.col-m-1-of-8{width:calc(12.5% - 20px)}.push-m-1-of-8{margin-left:calc(12.5% + 20px / 2)}.pull-m-1-of-8{margin-right:calc(12.5% + 20px / 2)}.col-m-3-of-8{width:calc(37.5% - 20px)}.push-m-3-of-8{margin-left:calc(37.5% + 20px / 2)}.pull-m-3-of-8{margin-right:calc(37.5% + 20px / 2)}.col-m-5-of-8{width:calc(62.5% - 20px)}.push-m-5-of-8{margin-left:calc(62.5% + 20px / 2)}.pull-m-5-of-8{margin-right:calc(62.5% + 20px / 2)}.col-m-7-of-8{width:calc(87.5% - 20px)}.push-m-7-of-8{margin-left:calc(87.5% + 20px / 2)}.pull-m-7-of-8{margin-right:calc(87.5% + 20px / 2)}}@media (max-width:480px){.s-hide{display:none}.w-s-auto{-webkit-box-flex:1;-ms-flex:1;flex:1}.s-un-push{margin-left:10px}.s-un-pull{margin-right:10px}.col-s-1-of-4{width:calc(25% - 20px)}.push-s-1-of-4{margin-left:calc(25% + 20px / 2)}.pull-s-1-of-4{margin-right:calc(25% + 20px / 2)}.col-s-2-of-4,.col-s-3-of-6{width:calc(50% - 20px)}.push-s-2-of-4,.push-s-3-of-6{margin-left:calc(50% + 20px / 2)}.pull-s-2-of-4,.pull-s-3-of-6{margin-right:calc(50% + 20px / 2)}.col-s-3-of-4{width:calc(75% - 20px)}.push-s-3-of-4{margin-left:calc(75% + 20px / 2)}.pull-s-3-of-4{margin-right:calc(75% + 20px / 2)}.col-s-4-of-4,.col-s-6-of-6{width:calc(100% - 20px)}.push-s-4-of-4,.push-s-6-of-6{margin-left:calc(100% + 20px / 2)}.pull-s-4-of-4,.pull-s-6-of-6{margin-right:calc(100% + 20px / 2)}.col-s-1-of-6{width:calc(16.66667% - 20px)}.push-s-1-of-6{margin-left:calc(16.66667% + 20px / 2)}.pull-s-1-of-6{margin-right:calc(16.66667% + 20px / 2)}.col-s-2-of-6{width:calc(33.33333% - 20px)}.push-s-2-of-6{margin-left:calc(33.33333% + 20px / 2)}.pull-s-2-of-6{margin-right:calc(33.33333% + 20px / 2)}.col-s-4-of-6{width:calc(66.66667% - 20px)}.push-s-4-of-6{margin-left:calc(66.66667% + 20px / 2)}.pull-s-4-of-6{margin-right:calc(66.66667% + 20px / 2)}.col-s-5-of-6{width:calc(83.33333% - 20px)}.push-s-5-of-6{margin-left:calc(83.33333% + 20px / 2)}.pull-s-5-of-6{margin-right:calc(83.33333% + 20px / 2)}}@media (min-width:480px){.s-and-lower{display:none}}@media (min-width:840px){.m-and-lower{display:none}}