diff --git a/src/doc.css b/src/doc.css index 5fa3bd8..4d06e79 100644 --- a/src/doc.css +++ b/src/doc.css @@ -1 +1 @@ -@import url("//fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900&display=swap");@import url("//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css");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,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}.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px);white-space:nowrap}.hljs{display:block;overflow-x:auto;padding:.5em;background:#011627;color:#d6deeb}.hljs-keyword{color:#c792ea;font-style:italic}.hljs-built_in{color:#addb67;font-style:italic}.hljs-type{color:#82aaff}.hljs-literal{color:#ff5874}.hljs-number{color:#F78C6C}.hljs-regexp{color:#5ca7e4}.hljs-string{color:#ecc48d}.hljs-subst{color:#d3423e}.hljs-symbol{color:#82aaff}.hljs-class{color:#ffcb8b}.hljs-function{color:#82AAFF}.hljs-title{color:#DCDCAA;font-style:italic}.hljs-params{color:#7fdbca}.hljs-comment{color:#637777;font-style:italic}.hljs-doctag{color:#7fdbca}.hljs-meta{color:#82aaff}.hljs-meta-keyword{color:#82aaff}.hljs-meta-string{color:#ecc48d}.hljs-section{color:#82b1ff}.hljs-builtin-name,.hljs-name,.hljs-tag{color:#7fdbca}.hljs-attr{color:#7fdbca}.hljs-attribute{color:#80cbc4}.hljs-variable{color:#addb67}.hljs-bullet{color:#d9f5dd}.hljs-code{color:#80CBC4}.hljs-emphasis{color:#c792ea;font-style:italic}.hljs-strong{color:#addb67;font-weight:bold}.hljs-formula{color:#c792ea}.hljs-link{color:#ff869a}.hljs-quote{color:#697098;font-style:italic}.hljs-selector-tag{color:#ff6363}.hljs-selector-id{color:#fad430}.hljs-selector-class{color:#addb67;font-style:italic}.hljs-selector-attr,.hljs-selector-pseudo{color:#c792ea;font-style:italic}.hljs-template-tag{color:#c792ea}.hljs-template-variable{color:#addb67}.hljs-addition{color:#addb67ff;font-style:italic}.hljs-deletion{color:#EF535090;font-style:italic}body{background:#fff;border:30px solid #f0f5f8;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"}.container{max-width:57.5rem;margin:0 auto;padding:0.9375rem}h1,h2,h3,h4,h5,h6{font-family:"Poppins", Helvetica, Arial, sans-serif}h1{font-weight:800;font-size:2.625rem;margin:0.625rem 0 1.875rem 0}h2{font-size:36px;font-weight:700;margin:0.625rem 0 1.875rem 0}h3{font-size:30px;font-weight:700;margin:0.625rem 0 1.875rem 0}p{font-size:1rem;line-height:1.5;margin-bottom:1.875rem}p.lead{font-size:1.25rem;font-weight:500}a{color:#2d53fe;text-decoration:underline}a:focus,a:hover{color:#2d53fe;text-decoration:none}img{max-width:100%}small{font-size:50%}button{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;border-radius:0;-webkit-box-shadow:0;box-shadow:0}.demo-slider{background:#2d53fe;color:white;position:relative;margin-bottom:100px}.demo-slider:before{content:'';position:absolute;z-index:-1;top:-45px;right:-50px;display:block;width:100px;height:100px;opacity:.2;background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23161616;%7D%3C/style%3E%3C/defs%3E%3Cg id='Calque_2' data-name='Calque 2'%3E%3Ccircle class='cls-1' cx='32.5' cy='2.5' r='2.5'/%3E%3Ccircle class='cls-1' cx='2.5' cy='2.5' r='2.5'/%3E%3Ccircle class='cls-1' cx='32.5' cy='32.5' r='2.5'/%3E%3Ccircle class='cls-1' cx='2.5' cy='32.5' r='2.5'/%3E%3C/g%3E%3C/svg%3E")}.demo-slider #demo{position:relative;z-index:1}.demo-slider #demo>div>div{display:-webkit-box;display:-ms-flexbox;display:flex;height:300px}.demo-slider #demo>div>div .media{-webkit-box-flex:1;-ms-flex:1 0 400px;flex:1 0 400px;background-repeat:no-repeat;background-size:cover}.demo-slider #demo>div>div .captation{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-ms-flex-line-pack:stretch;align-content:stretch;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;padding:0 50px 0 40px}.demo-slider #demo>div>div .captation h3{margin-top:0;text-transform:uppercase}.demo-slider #demo>div>div .captation p{text-align:justify}.demo-slider #demo>div>div .captation a{color:white;text-decoration:underline}.demo-slider #demo>div>div .captation a:focus,.demo-slider #demo>div>div .captation a:hover{text-decoration:none}.demo-slider #demo-play{background:white;width:42px;height:42px;position:absolute;z-index:10;top:4px;left:4px;color:transparent;font-size:0;line-height:0}.demo-slider #demo-play:after{display:inline-block;content:"\f04c";font-weight:700;font-family:"Font Awesome 5 Free";text-indent:0;color:#2d53fe;line-height:32px;font-size:14px}.demo-slider #demo-play:hover{background:#333}.demo-slider #demo-play:hover:after{color:white}.demo-slider #demo-play.paused:after{content:"\f04b"}.demo-slider #demo-next,.demo-slider #demo-prev{background:white;width:42px;height:42px;position:absolute;z-index:10;top:50%;left:-21px;color:transparent;font-size:0;line-height:0;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);-webkit-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s;-webkit-box-shadow:0 0 10px rgba(0, 0, 0, 0.3);box-shadow:0 0 10px rgba(0, 0, 0, 0.3)}.demo-slider #demo-next:after,.demo-slider #demo-prev:after{display:inline-block;content:"\f053";font-weight:700;font-family:"Font Awesome 5 Free";text-indent:0;color:#2d53fe;line-height:32px;font-size:16px}.demo-slider #demo-next:focus,.demo-slider #demo-next:hover,.demo-slider #demo-prev:focus,.demo-slider #demo-prev:hover{left:-30px;background:#333}.demo-slider #demo-next:focus:after,.demo-slider #demo-next:hover:after,.demo-slider #demo-prev:focus:after,.demo-slider #demo-prev:hover:after{color:white}.demo-slider #demo-next{left:auto;right:-21px}.demo-slider #demo-next:after{content:"\f054"}.demo-slider #demo-next:focus,.demo-slider #demo-next:hover{left:auto;right:-30px;background:#333}.demo-slider .dots{position:absolute;z-index:10;left:0;right:0;bottom:-40px;text-align:center}.demo-slider .dots button{display:inline-block;margin:0 5px;position:relative;color:transparent;font-size:0;line-height:0;width:20px;height:20px;background:#2d53fe;border-radius:50%}.demo-slider .dots button.active:after{content:"";position:absolute;top:5px;left:5px;height:10px;width:10px;border-radius:50%;background:white}.demo-slider .dots button:focus,.demo-slider .dots button:hover{background:#333}.btn{background:#2d53fe;color:white;padding:20px 90px;text-transform:uppercase;text-indent:0}.btn:focus,.btn:hover{background:#333}code,pre{font-family:SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}pre{margin-bottom:40px}table{width:100%}table thead th{text-transform:uppercase;padding:15px;font-weight:bold}table tbody tr:nth-of-type(odd){background:#f8f8f8;border-top:1px solid #e5e5e5;border-bottom:1px solid #e5e5e5}table tbody tr td{padding:15px}footer{text-align:center;margin:4.5rem 0 3rem 0} \ No newline at end of file +@import url("//fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900&display=swap");@import url("//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css");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,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}.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px);white-space:nowrap}.hljs{display:block;overflow-x:auto;padding:.5em;background:#011627;color:#d6deeb}.hljs-keyword{color:#c792ea;font-style:italic}.hljs-built_in{color:#addb67;font-style:italic}.hljs-type{color:#82aaff}.hljs-literal{color:#ff5874}.hljs-number{color:#F78C6C}.hljs-regexp{color:#5ca7e4}.hljs-string{color:#ecc48d}.hljs-subst{color:#d3423e}.hljs-symbol{color:#82aaff}.hljs-class{color:#ffcb8b}.hljs-function{color:#82AAFF}.hljs-title{color:#DCDCAA;font-style:italic}.hljs-params{color:#7fdbca}.hljs-comment{color:#637777;font-style:italic}.hljs-doctag{color:#7fdbca}.hljs-meta{color:#82aaff}.hljs-meta-keyword{color:#82aaff}.hljs-meta-string{color:#ecc48d}.hljs-section{color:#82b1ff}.hljs-builtin-name,.hljs-name,.hljs-tag{color:#7fdbca}.hljs-attr{color:#7fdbca}.hljs-attribute{color:#80cbc4}.hljs-variable{color:#addb67}.hljs-bullet{color:#d9f5dd}.hljs-code{color:#80CBC4}.hljs-emphasis{color:#c792ea;font-style:italic}.hljs-strong{color:#addb67;font-weight:bold}.hljs-formula{color:#c792ea}.hljs-link{color:#ff869a}.hljs-quote{color:#697098;font-style:italic}.hljs-selector-tag{color:#ff6363}.hljs-selector-id{color:#fad430}.hljs-selector-class{color:#addb67;font-style:italic}.hljs-selector-attr,.hljs-selector-pseudo{color:#c792ea;font-style:italic}.hljs-template-tag{color:#c792ea}.hljs-template-variable{color:#addb67}.hljs-addition{color:#addb67ff;font-style:italic}.hljs-deletion{color:#EF535090;font-style:italic}body{background:#fff;border:30px solid #f0f5f8;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"}.container{max-width:57.5rem;margin:0 auto;padding:0.9375rem}h1,h2,h3,h4,h5,h6{font-family:"Poppins", Helvetica, Arial, sans-serif}h1{font-weight:800;font-size:2.625rem;margin:0.625rem 0 1.875rem 0}h2{font-size:36px;font-weight:700;margin:0.625rem 0 1.875rem 0}h3{font-size:30px;font-weight:700;margin:0.625rem 0 1.875rem 0}p{font-size:1rem;line-height:1.5;margin-bottom:1.875rem}p.lead{font-size:1.25rem;font-weight:500}a{color:#2d53fe;text-decoration:underline}a:focus,a:hover{color:#2d53fe;text-decoration:none}img{max-width:100%}small{font-size:50%}button{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;border-radius:0;-webkit-box-shadow:0;box-shadow:0}.demo-slider{background:#2d53fe;color:white;position:relative;margin-bottom:100px}.demo-slider:before{content:'';position:absolute;z-index:-1;top:-45px;right:-50px;display:block;width:100px;height:100px;opacity:.2;background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23161616;%7D%3C/style%3E%3C/defs%3E%3Cg id='Calque_2' data-name='Calque 2'%3E%3Ccircle class='cls-1' cx='32.5' cy='2.5' r='2.5'/%3E%3Ccircle class='cls-1' cx='2.5' cy='2.5' r='2.5'/%3E%3Ccircle class='cls-1' cx='32.5' cy='32.5' r='2.5'/%3E%3Ccircle class='cls-1' cx='2.5' cy='32.5' r='2.5'/%3E%3C/g%3E%3C/svg%3E")}.demo-slider #demo{position:relative;z-index:1}.demo-slider #demo>div>div{display:-webkit-box;display:-ms-flexbox;display:flex;height:300px}.demo-slider #demo>div>div .media{-webkit-box-flex:1;-ms-flex:1 0 400px;flex:1 0 400px;background-repeat:no-repeat;background-size:cover}.demo-slider #demo>div>div .captation{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-ms-flex-line-pack:stretch;align-content:stretch;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;padding:0 50px 0 40px}.demo-slider #demo>div>div .captation h3{margin-top:0;text-transform:uppercase}.demo-slider #demo>div>div .captation p{text-align:justify}.demo-slider #demo>div>div .captation a{color:white;text-decoration:underline}.demo-slider #demo>div>div .captation a:focus,.demo-slider #demo>div>div .captation a:hover{text-decoration:none}.demo-slider #demo-play{background:white;width:42px;height:42px;position:absolute;z-index:10;top:4px;left:4px;color:transparent;font-size:0;line-height:0;-webkit-transition:all .3s;-o-transition:all .3s;transition:all .3s}.demo-slider #demo-play:after{display:inline-block;content:"\f04c";font-weight:700;font-family:"Font Awesome 5 Free";text-indent:0;color:#2d53fe;line-height:32px;font-size:14px}.demo-slider #demo-play:hover{background:#333}.demo-slider #demo-play:hover:after{color:white}.demo-slider #demo-play.paused:after{content:"\f04b"}.demo-slider #demo-next,.demo-slider #demo-prev{background:white;width:42px;height:42px;position:absolute;z-index:10;top:50%;left:-21px;color:transparent;font-size:0;line-height:0;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);-webkit-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s;-webkit-box-shadow:0 0 10px rgba(0, 0, 0, 0.3);box-shadow:0 0 10px rgba(0, 0, 0, 0.3)}.demo-slider #demo-next:after,.demo-slider #demo-prev:after{display:inline-block;content:"\f053";font-weight:700;font-family:"Font Awesome 5 Free";text-indent:0;color:#2d53fe;line-height:32px;font-size:16px}.demo-slider #demo-next:focus,.demo-slider #demo-next:hover,.demo-slider #demo-prev:focus,.demo-slider #demo-prev:hover{left:-30px;background:#333}.demo-slider #demo-next:focus:after,.demo-slider #demo-next:hover:after,.demo-slider #demo-prev:focus:after,.demo-slider #demo-prev:hover:after{color:white}.demo-slider #demo-next{left:auto;right:-21px}.demo-slider #demo-next:after{content:"\f054"}.demo-slider #demo-next:focus,.demo-slider #demo-next:hover{left:auto;right:-30px;background:#333}.demo-slider .dots{position:absolute;z-index:10;left:0;right:0;bottom:-40px;text-align:center}.demo-slider .dots button{display:inline-block;margin:0 5px;position:relative;color:transparent;font-size:0;line-height:0;width:20px;height:20px;background:#2d53fe;border-radius:50%;-webkit-transition:all .3s;-o-transition:all .3s;transition:all .3s}.demo-slider .dots button.active:after{content:"";position:absolute;top:5px;left:5px;height:10px;width:10px;border-radius:50%;background:white}.demo-slider .dots button:focus,.demo-slider .dots button:hover{background:#333}.btn{background:#2d53fe;color:white;padding:20px 90px;text-transform:uppercase;text-indent:0}.btn:focus,.btn:hover{background:#333}code,pre{font-family:SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}pre{margin-bottom:40px}table{width:100%}table thead th{text-transform:uppercase;padding:15px;font-weight:bold}table tbody tr:nth-of-type(odd){background:#f8f8f8;border-top:1px solid #e5e5e5;border-bottom:1px solid #e5e5e5}table tbody tr td{padding:15px}footer{text-align:center;margin:4.5rem 0 3rem 0} \ No newline at end of file diff --git a/src/doc.scss b/src/doc.scss index 5cba10b..3c3c419 100644 --- a/src/doc.scss +++ b/src/doc.scss @@ -293,6 +293,7 @@ button { color: transparent; font-size: 0; line-height: 0; + transition: all .3s; &:after { display: inline-block; @@ -392,6 +393,7 @@ button { height: 20px; background: $primary; border-radius: 50%; + transition: all .3s; &.active { &:after {