KNACSS/css/grillade-flex.css
2019-10-25 10:05:49 +02:00

1 line
10 KiB
CSS

@media (min-width:576px){[class*=" grillade-"],[class^=grillade-]{display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;flex-wrap:wrap}[class*=" grillade-"]>*,[class^=grillade-]>*{box-sizing:border-box;min-width:0;min-height:0}}@media (min-width:576px){.grillade,.grillade--reverse{display:-webkit-box;display:flex}.grillade--reverse>*,.grillade>*{-webkit-box-flex:1;flex:1 1;box-sizing:border-box;min-width:0;min-height:0}.grillade--reverse.has-gutter>*+*,.grillade.has-gutter>*+*{margin-left:calc(1rem - .01px)}.grillade--reverse.has-gutter-l>*+*,.grillade.has-gutter-l>*+*{margin-left:calc(2rem - .01px)}.grillade--reverse.has-gutter-xl>*+*,.grillade.has-gutter-xl>*+*{margin-left:calc(4rem - .01px)}}@media (min-width:576px){[class*=grillade-2]>*{width:calc(50% - .01px)}[class*=grillade-2].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grillade-2].has-gutter>*{width:calc(50% - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grillade-2].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grillade-2].has-gutter-l>*{width:calc(50% - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grillade-2].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grillade-2].has-gutter-xl>*{width:calc(50% - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grillade-3]>*{width:calc(33.33333% - .01px)}[class*=grillade-3].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grillade-3].has-gutter>*{width:calc(33.33333% - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grillade-3].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grillade-3].has-gutter-l>*{width:calc(33.33333% - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grillade-3].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grillade-3].has-gutter-xl>*{width:calc(33.33333% - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grillade-4]>*{width:calc(25% - .01px)}[class*=grillade-4].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grillade-4].has-gutter>*{width:calc(25% - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grillade-4].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grillade-4].has-gutter-l>*{width:calc(25% - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grillade-4].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grillade-4].has-gutter-xl>*{width:calc(25% - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grillade-5]>*{width:calc(20% - .01px)}[class*=grillade-5].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grillade-5].has-gutter>*{width:calc(20% - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grillade-5].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grillade-5].has-gutter-l>*{width:calc(20% - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grillade-5].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grillade-5].has-gutter-xl>*{width:calc(20% - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grillade-6]>*{width:calc(16.66667% - .01px)}[class*=grillade-6].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grillade-6].has-gutter>*{width:calc(16.66667% - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grillade-6].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grillade-6].has-gutter-l>*{width:calc(16.66667% - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grillade-6].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grillade-6].has-gutter-xl>*{width:calc(16.66667% - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grillade-7]>*{width:calc(14.28571% - .01px)}[class*=grillade-7].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grillade-7].has-gutter>*{width:calc(14.28571% - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grillade-7].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grillade-7].has-gutter-l>*{width:calc(14.28571% - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grillade-7].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grillade-7].has-gutter-xl>*{width:calc(14.28571% - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grillade-8]>*{width:calc(12.5% - .01px)}[class*=grillade-8].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grillade-8].has-gutter>*{width:calc(12.5% - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grillade-8].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grillade-8].has-gutter-l>*{width:calc(12.5% - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grillade-8].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grillade-8].has-gutter-xl>*{width:calc(12.5% - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grillade-9]>*{width:calc(11.11111% - .01px)}[class*=grillade-9].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grillade-9].has-gutter>*{width:calc(11.11111% - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grillade-9].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grillade-9].has-gutter-l>*{width:calc(11.11111% - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grillade-9].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grillade-9].has-gutter-xl>*{width:calc(11.11111% - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grillade-10]>*{width:calc(10% - .01px)}[class*=grillade-10].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grillade-10].has-gutter>*{width:calc(10% - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grillade-10].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grillade-10].has-gutter-l>*{width:calc(10% - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grillade-10].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grillade-10].has-gutter-xl>*{width:calc(10% - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grillade-11]>*{width:calc(9.09091% - .01px)}[class*=grillade-11].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grillade-11].has-gutter>*{width:calc(9.09091% - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grillade-11].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grillade-11].has-gutter-l>*{width:calc(9.09091% - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grillade-11].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grillade-11].has-gutter-xl>*{width:calc(9.09091% - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grillade-12]>*{width:calc(8.33333% - .01px)}[class*=grillade-12].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grillade-12].has-gutter>*{width:calc(8.33333% - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grillade-12].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grillade-12].has-gutter-l>*{width:calc(8.33333% - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grillade-12].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grillade-12].has-gutter-xl>*{width:calc(8.33333% - 4rem - .01px);margin-right:2rem;margin-left:2rem}}.push{margin-left:auto!important}.pull{margin-right:auto!important}.item-first{-webkit-box-ordinal-group:0;order:-1}.item-last{-webkit-box-ordinal-group:2;order:1}[class*=grillade-][class*="--reverse"]{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;flex-direction:row-reverse}@media (min-width:576px){.full{-webkit-box-flex:0;flex:0 0 auto;width:calc(100% - .01px)}.has-gutter>.full{width:calc(100% - 1rem - .01px)}.has-gutter-l>.full{width:calc(100% - 2rem - .01px)}.has-gutter-xl>.full{width:calc(100% - 4rem - .01px)}.one-half{-webkit-box-flex:0;flex:0 0 auto;width:calc(50% - .01px)}.has-gutter>.one-half{width:calc(50% - 1rem - .01px)}.has-gutter-l>.one-half{width:calc(50% - 2rem - .01px)}.has-gutter-xl>.one-half{width:calc(50% - 4rem - .01px)}.one-third{-webkit-box-flex:0;flex:0 0 auto;width:calc(33.33333% - .01px)}.has-gutter>.one-third{width:calc(33.33333% - 1rem - .01px)}.has-gutter-l>.one-third{width:calc(33.33333% - 2rem - .01px)}.has-gutter-xl>.one-third{width:calc(33.33333% - 4rem - .01px)}.one-quarter{-webkit-box-flex:0;flex:0 0 auto;width:calc(25% - .01px)}.has-gutter>.one-quarter{width:calc(25% - 1rem - .01px)}.has-gutter-l>.one-quarter{width:calc(25% - 2rem - .01px)}.has-gutter-xl>.one-quarter{width:calc(25% - 4rem - .01px)}.one-fifth{-webkit-box-flex:0;flex:0 0 auto;width:calc(20% - .01px)}.has-gutter>.one-fifth{width:calc(20% - 1rem - .01px)}.has-gutter-l>.one-fifth{width:calc(20% - 2rem - .01px)}.has-gutter-xl>.one-fifth{width:calc(20% - 4rem - .01px)}.one-sixth{-webkit-box-flex:0;flex:0 0 auto;width:calc(16.66667% - .01px)}.has-gutter>.one-sixth{width:calc(16.66667% - 1rem - .01px)}.has-gutter-l>.one-sixth{width:calc(16.66667% - 2rem - .01px)}.has-gutter-xl>.one-sixth{width:calc(16.66667% - 4rem - .01px)}.two-thirds{-webkit-box-flex:0;flex:0 0 auto;width:calc(66.66667% - .01px)}.has-gutter>.two-thirds{width:calc(66.66667% - 1rem - .01px)}.has-gutter-l>.two-thirds{width:calc(66.66667% - 2rem - .01px)}.has-gutter-xl>.two-thirds{width:calc(66.66667% - 4rem - .01px)}.three-quarters{-webkit-box-flex:0;flex:0 0 auto;width:calc(75% - .01px)}.has-gutter>.three-quarters{width:calc(75% - 1rem - .01px)}.has-gutter-l>.three-quarters{width:calc(75% - 2rem - .01px)}.has-gutter-xl>.three-quarters{width:calc(75% - 4rem - .01px)}.five-sixths{-webkit-box-flex:0;flex:0 0 auto;width:calc(83.33333% - .01px)}.has-gutter>.five-sixths{width:calc(83.33333% - 1rem - .01px)}.has-gutter-l>.five-sixths{width:calc(83.33333% - 2rem - .01px)}.has-gutter-xl>.five-sixths{width:calc(83.33333% - 4rem - .01px)}}@media (min-width:576px) and (max-width:767px){[class*=-small-1]>*{width:calc(100% - .01px)}[class*=-small-1].has-gutter>*{width:calc(100% - 1rem - .01px)}[class*=-small-1].has-gutter-l>*{width:calc(100% - 2rem - .01px)}[class*=-small-1].has-gutter-xl>*{width:calc(100% - 4rem - .01px)}[class*=-small-2]>*{width:calc(50% - .01px)}[class*=-small-2].has-gutter>*{width:calc(50% - 1rem - .01px)}[class*=-small-2].has-gutter-l>*{width:calc(50% - 2rem - .01px)}[class*=-small-2].has-gutter-xl>*{width:calc(50% - 4rem - .01px)}[class*=-small-3]>*{width:calc(33.33333% - .01px)}[class*=-small-3].has-gutter>*{width:calc(33.33333% - 1rem - .01px)}[class*=-small-3].has-gutter-l>*{width:calc(33.33333% - 2rem - .01px)}[class*=-small-3].has-gutter-xl>*{width:calc(33.33333% - 4rem - .01px)}[class*=-small-4]>*{width:calc(25% - .01px)}[class*=-small-4].has-gutter>*{width:calc(25% - 1rem - .01px)}[class*=-small-4].has-gutter-l>*{width:calc(25% - 2rem - .01px)}[class*=-small-4].has-gutter-xl>*{width:calc(25% - 4rem - .01px)}}