/* ----------------------------- */ /* ==desktop and retina medias */ /* ----------------------------- */ /* ----------------------------- */ /* ==viewport fixing for RWD */ /* ----------------------------- */ @-webkit-viewport { width: device-width; zoom: 1.0; } @-moz-viewport { width: device-width; zoom: 1.0; } @-ms-viewport { width: device-width; zoom: 1.0; } @-o-viewport { width: device-width; zoom: 1.0; } @viewport { width: device-width; zoom: 1.0; } @include mq(medium) { /* Big resources like background-images, font-faces, etc. */ } @include mq(retina) { /* Retina-specific stuff here */ } /* ---------------------------------- */ /* ==Responsive large / small / tiny */ /* ---------------------------------- */ @include mq(large) { .large-no-float { float: none; } .large-inbl { @include inline-block(top); float: none; } .large-row { display: table; table-layout: fixed; width: 100% !important; } .large-col { display: table-cell; vertical-align: top; } /* Widths for large (l) screens */ .large-w25 { width: 25% !important; } .large-w33 { width: 33.3333% !important; } .large-w50 { width: 50% !important; } .large-w66 { width: 66.6666% !important; } .large-w75 { width: 75% !important; } .large-w100 { display: block !important; float: none !important; clear: none !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; border: 0; } /* Margins for large (l) screens */ .large-ma0, .large-man { margin: 0 !important; } } @include mq(small) { .small-no-float { float: none; } .small-inbl { @include inline-block(top); float: none; } .small-row { display: table !important; table-layout: fixed !important; width: 100% !important; } .small-col { display: table-cell !important; vertical-align: top !important; } /* widths for small (s) screens */ .small-w25 { width: 25% !important; } .small-w33 { width: 33.3333% !important; } .small-w50 { width: 50% !important; } .small-w66 { width: 66.6666% !important; } .small-w75 { width: 75% !important; } .small-w100 { display: block !important; float: none !important; clear: none !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; border: 0; } /* margins for small (s) screens */ .small-ma0, .small-man { margin: 0 !important; } } @include mq(tiny) { /* Quick smartphone reset */ .mod, .item, .col, fieldset { display: block !important; float: none !important; clear: none !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; border: 0; } .w30, .w33, .w40, .w50, .w300p, .w400p, .w500p { width: auto; } .row { display: block !important; width: 100% !important; } .tiny-no-float { float: none; } .tiny-inbl { @include inline-block(top); float: none; } .tiny-row { display: table !important; table-layout: fixed !important; width: 100% !important; } .tiny-col { display: table-cell !important; vertical-align: top !important; } /* widths for tiny (t) screens */ .tiny-w25 { width: 25% !important; } .tiny-w33 { width: 33.3333% !important; } .tiny-w50 { width: 50% !important; } .tiny-w66 { width: 66.6666% !important; } .tiny-w75 { width: 75% !important; } .tiny-w100 { display: block !important; float: none !important; clear: none !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; border: 0; } /* Margins for tiny (t) screens */ .tiny-ma0, .tiny-man { margin: 0 !important; } }