-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
style.css
7 lines (7 loc) · 4.71 KB
/
style.css
1
2
3
4
5
6
7
@charset "UTF-8";
/*!
* Javascript Offcanvas 1.0.0
* Copyright 2021 Kenan Gündoğan
* Released under the MIT License
*/a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,img,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}table{border-collapse:collapse;border-spacing:0}input{outline:none}a{text-decoration:none;color:#333;outline:none}*{box-sizing:border-box}body{background-color:#f1f1f1;padding:20px;line-height:1.5}@media (min-width:768px){body{padding:50px}}.container{width:100%;max-width:600px;margin:auto}.container .example{width:100%;margin-bottom:50px;padding:20px;display:flex;justify-content:center;flex-wrap:wrap;border-radius:5px;background-color:#fff;box-shadow:0px 30px 30px rgba(102,102,102,0.1)}@media (min-width:768px){.container .example{padding:50px}}.container .example>.head{width:calc(100% + 100px);margin:-50px -50px 50px -50px;padding:50px;border-bottom:dashed 1px #dedede}.container .example>.head .title{font-family:"Playfair Display",serif;font-size:20px;font-weight:bold;margin-bottom:20px}.container .example>.head .description{font-family:"Roboto",sans-serif;font-size:14px}.container .example>.head .description .info{background-color:#fae898;font-weight:bold;text-decoration:underline}.container .example>.body{width:calc(100% + 100px);margin:50px -50px 0px -50px;padding:50px 50px 0px 50px;border-top:dashed 1px #dedede}.container .example>.body p{margin-bottom:20px;font-size:14px;font-family:"Roboto",sans-serif}.container .button-wrapper{width:100%;display:flex;flex-wrap:wrap}.container .button-wrapper button{cursor:pointer;padding:15px 30px;margin:10px;font-size:14px;color:#333;text-align:center;font-family:"Roboto",sans-serif;border:solid 1px #dedede;border-radius:5px;background-color:#fff;outline:none}.offcanvas-container{position:fixed;overflow:hidden;z-index:99999;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0);display:none;transition:ease 300ms}.offcanvas-container.show{display:flex}.offcanvas-container.visible{background-color:rgba(0,0,0,0.6)}.offcanvas-container.visible .offcanvas-wrapper{opacity:1}.offcanvas-container.top{justify-content:center;align-items:flex-start}.offcanvas-container.top .offcanvas-wrapper{transform:translate(0,-50px)}.offcanvas-container.left{justify-content:flex-start}.offcanvas-container.left .offcanvas-wrapper{transform:translate(-100%,0)}.offcanvas-container.right{justify-content:flex-end}.offcanvas-container.right .offcanvas-wrapper{transform:translate(100%,0)}.offcanvas-container.bottom{justify-content:center;align-items:flex-end}.offcanvas-container.bottom .offcanvas-wrapper{transform:translate(0,50px)}.offcanvas-container.small .offcanvas-wrapper{max-width:300px}.offcanvas-container.medium .offcanvas-wrapper{max-width:600px}.offcanvas-container.large .offcanvas-wrapper{max-width:1024px}.offcanvas-container.xlarge .offcanvas-wrapper{max-width:1280px}.offcanvas-container.full .offcanvas-wrapper{max-width:100%}.offcanvas-container.fullscreen .offcanvas-wrapper{max-width:100%;height:100%}.offcanvas-container.transform .offcanvas-wrapper{transform:none}.offcanvas-container .offcanvas-wrapper{position:relative;overflow:hidden;width:100%;padding:40px;background-color:#fff;opacity:0}.offcanvas-container .offcanvas-wrapper .offcanvas-close{position:absolute;top:0;right:0;width:50px;height:50px;cursor:pointer;display:flex;justify-content:center;align-items:center;background-repeat:no-repeat;background-position:center;background-size:40%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%333' width='185.113' height='185.114' viewBox='0 0 185.113 185.114'%3E%3Cpath d='M1029.112,366.6l84.653-84.653a4.63,4.63,0,1,0-6.547-6.548l-84.653,84.654L937.911,275.4a4.629,4.629,0,0,0-6.547,6.547l84.654,84.654-84.654,84.654a4.629,4.629,0,1,0,6.547,6.547l84.654-84.654,84.653,84.653a4.629,4.629,0,0,0,6.547-6.547Z' transform='translate(-930.008 -274.04)'/%3E%3C/svg%3E")}.offcanvas-container .offcanvas-wrapper .title{font-size:16px;font-weight:bold;font-family:"Playfair Display",serif;margin-bottom:10px}.offcanvas-container .offcanvas-wrapper .description{font-size:14px;font-family:"Roboto",sans-serif}
/*# sourceMappingURL=style.css.map */