akyral-layout.css

#main{bottom:0;left:0;position:absolute;right:0;top:0;}#overlay{background:rgba(0, 0, 0, 0.2);bottom:0;content:'';left:0;opacity:0;position:absolute;right:0;top:0;transition:opacity 0.6s cubic-bezier(0, 0, 0.2, 1),visibility 0 0.6s cubic-bezier(0, 0, 0.2, 1);visibility:hidden;z-index:100;}polyfill-next-selector{content:':host [main]';}::content [main]{background:#fff;}#drawer{overflow:auto;}@media screen and (min-width: 480px){#drawer{width:320px;}}@media screen and (max-width: 943px){:host{bottom:0;display:block;left:0;position:absolute;right:0;top:0;overflow-x:hidden;}polyfill-next-selector{content:':host [drawer]';}::content [drawer]{position:absolute;top:0;bottom:0;left:0;right:0;overflow:auto;}polyfill-next-selector{content:':host [main]';}::content [main]{position:absolute;top:0;bottom:0;left:0;right:0;overflow:auto;}#drawer{bottom:0;box-sizing:border-box;position:absolute;top:0;transition:-webkit-transform 0.4s cubic-bezier(0, 0, 0.2, 1);transition:transform 0.4s cubic-bezier(0, 0, 0.2, 1);}#drawer[left][parallax],#drawer[left][reveal],#drawer[left][slide]{left:0;}#drawer[right][parallax],#drawer[right][reveal],#drawer[right][slide]{right:0;}#drawer[slide]{box-shadow:0 0 20px rgba(0, 0, 0, 0.3);z-index:1;}#drawer[slide][left]{-webkit-transform:translate3d(-100%, 0, 0);transform:translate3d(-100%, 0, 0);}#drawer[slide][right]{-webkit-transform:translate3d(100%, 0, 0);transform:translate3d(100%, 0, 0);}#drawer[slide][open]{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}#drawer[pan][left]{right:100%;}#drawer[pan][left][open],#drawer[pan][left][open]+#main{-webkit-transform:translate3d(320px, 0, 0);transform:translate3d(320px, 0, 0);}#drawer[pan][right]{left:100%;}#drawer[pan][right][open],#drawer[pan][right][open]+#main{-webkit-transform:translate3d(-320px, 0, 0);transform:translate3d(-320px, 0, 0);}#drawer[pan]+#main{transition:-webkit-transform 0.4s cubic-bezier(0, 0, 0.2, 1);transition:transform 0.4s cubic-bezier(0, 0, 0.2, 1);-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}#drawer[parallax][left]{-webkit-transform:translate3d(-40%, 0, 0);transform:translate3d(-40%, 0, 0);}#drawer[parallax][right]{-webkit-transform:translate3d(40%, 0, 0);transform:translate3d(40%, 0, 0);}#drawer[parallax]+#main,#drawer[reveal]+#main{box-shadow:0 0 20px rgba(0, 0, 0, 0.3);}#drawer[parallax][left][open]+#main,#drawer[reveal][left][open]+#main{transition:-webkit-transform 0.4s cubic-bezier(0, 0, 0.2, 1);transition:transform 0.4s cubic-bezier(0, 0, 0.2, 1);-webkit-transform:translate3d(320px, 0, 0);transform:translate3d(320px, 0, 0);}#drawer[parallax][right][open]+#main,#drawer[reveal][right][open]+#main{transition:-webkit-transform 0.4s cubic-bezier(0, 0, 0.2, 1);transition:transform 0.4s cubic-bezier(0, 0, 0.2, 1);-webkit-transform:translate3d(-320px, 0, 0);transform:translate3d(-320px, 0, 0);}#drawer[parallax][open],#drawer[reveal][open]{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}#drawer[open]+#main #overlay{opacity:1;transition:opacity 0.3s cubic-bezier(0, 0, 0.2, 1);visibility:visible;}#drawer[left]+#main #overlay{cursor:e-resize;}#drawer[right]+#main #overlay{cursor:w-resize;}#drawer+#main{transition:-webkit-transform 0.4s cubic-bezier(0, 0, 0.2, 1);transition:transform 0.4s cubic-bezier(0, 0, 0.2, 1);-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}}@media screen and (min-width: 944px){:host{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;margin:auto;max-width:1264px;}#main{-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-order:2;-ms-flex-order:2;order:2;position:static;}#drawer{-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;position:relative;width:320px;}#drawer[left]{-webkit-order:1;-ms-flex-order:1;order:1;}#drawer[right]{-webkit-order:3;-ms-flex-order:3;order:3;}#overlay{visiblity:hidden;}}@media screen and (max-width: 479px){#drawer[left]{right:52px;}#drawer[left][parallax][open]+#main,#drawer[left][reveal][open]+#main{-webkit-transform:translate3d(-52px, 0, 0) translate3d(100%, 0, 0);transform:translate3d(-52px, 0, 0) translate3d(100%, 0, 0);}#drawer[left][pan]{left:calc(-100% + 52px);}#drawer[left][pan][open]{-webkit-transform:translate3d(100%, 0, 0);transform:translate3d(100%, 0, 0);}#drawer[left][pan][open]+#main{-webkit-transform:translate3d(-52px, 0, 0) translate3d(100%, 0, 0);transform:translate3d(-52px, 0, 0) translate3d(100%, 0, 0);}#drawer[right]{left:52px;}#drawer[right][parallax][open]+#main,#drawer[right][reveal][open]+#main{-webkit-transform:translate3d(52px, 0, 0) translate3d(-100%, 0, 0);transform:translate3d(52px, 0, 0) translate3d(-100%, 0, 0);}#drawer[right][pan]{right:calc(-100% + 52px);}#drawer[right][pan][open]{-webkit-transform:translate3d(-100%, 0, 0);transform:translate3d(-100%, 0, 0);}#drawer[right][pan][open]+#main{-webkit-transform:translate3d(52px, 0, 0) translate3d(-100%, 0, 0);transform:translate3d(52px, 0, 0) translate3d(-100%, 0, 0);}}