Add extractor and builder
Tested and working
This commit is contained in:
Angelos Chalaris
@ -1,45 +0,0 @@
|
||||
.back-to-top-button {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
background: white;
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
position: fixed;
|
||||
right: 2rem;
|
||||
bottom: 2rem;
|
||||
border-radius: 50%;
|
||||
user-select: none;
|
||||
box-shadow: 0 0.4rem 0.8rem -0.1rem rgba(0, 32, 128, 0.15);
|
||||
transition: all 0.2s ease-out;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
z-index: 1;
|
||||
border: 1px solid rgba(0, 32, 128, 0.1);
|
||||
outline: 0;
|
||||
color: inherit;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 0.8rem 1.6rem -0.2rem rgba(0, 32, 128, 0.15);
|
||||
color: #35a8ff;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 0.8rem 1.6rem -0.2rem rgba(0, 32, 128, 0.15), 0 0 2px 2px #35a8ff;
|
||||
outline-style: none;
|
||||
}
|
||||
|
||||
&.is-visible {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.feather {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
}
|
||||
}
|
||||
@ -1,73 +0,0 @@
|
||||
html {
|
||||
font-size: 0.95rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
*,
|
||||
*::after,
|
||||
*::before {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, Roboto, Segoe UI, 'Helvetica Neue', Helvetica,
|
||||
Arial, sans-serif;
|
||||
background: #f2f3f8;
|
||||
color: rgb(50, 75, 100);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #157bda;
|
||||
text-decoration: none;
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
|
||||
&:hover {
|
||||
color: #0090ff;
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
border: 0;
|
||||
border-top: 1px solid rgba(0, 32, 128, 0.1);
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 64rem;
|
||||
padding: 0 2%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.main > .container {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 579px) {
|
||||
.main > .container {
|
||||
padding: 0 2%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
html {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.content-wrapper {
|
||||
margin-left: 20%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1400px) {
|
||||
.content-wrapper {
|
||||
margin-left: 275px;
|
||||
}
|
||||
}
|
||||
@ -1,76 +0,0 @@
|
||||
.btn {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
font-weight: bold;
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
color: #8385aa;
|
||||
white-space: nowrap;
|
||||
border: 1px solid #c8cbf2;
|
||||
border-radius: 2px;
|
||||
vertical-align: middle;
|
||||
line-height: 2;
|
||||
padding: 0 0.5rem;
|
||||
margin-right: 0.5rem;
|
||||
transition: all 0.1s ease-out;
|
||||
outline: 0;
|
||||
|
||||
&.is-large {
|
||||
font-size: 0.95rem;
|
||||
border-radius: 0.2rem;
|
||||
|
||||
.feather {
|
||||
top: -2px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.feather {
|
||||
vertical-align: middle;
|
||||
margin-right: 0.25rem;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
button.btn {
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
margin-bottom: 1rem;
|
||||
margin-right: 1rem;
|
||||
background: white;
|
||||
|
||||
&:hover {
|
||||
background: #8385aa;
|
||||
border-color: #8385aa;
|
||||
color: white;
|
||||
}
|
||||
|
||||
&.focus-visible:focus {
|
||||
box-shadow: 0 0 0 0.25rem transparentize(#8385aa, 0.5);
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow: inset 0 0.1rem 0.1rem 0.1rem rgba(0, 0, 0, 0.2);
|
||||
background: darken(#8385aa, 10);
|
||||
border-color: darken(#8385aa, 10);
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
background: #7983ff;
|
||||
border-color: #7983ff;
|
||||
color: white;
|
||||
|
||||
&.focus-visible:focus {
|
||||
box-shadow: 0 0 0 0.25rem transparentize(#7983ff, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
&.codepen-btn {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
}
|
||||
@ -1,927 +0,0 @@
|
||||
/*!
|
||||
* Hamburgers
|
||||
* @description Tasty CSS-animated hamburgers
|
||||
* @author Jonathan Suh @jonsuh
|
||||
* @site https://jonsuh.com/hamburgers
|
||||
* @link https://github.com/jonsuh/hamburgers
|
||||
*/
|
||||
.hamburger {
|
||||
padding: 1rem;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
transition-property: opacity, filter;
|
||||
transition-duration: 0.15s;
|
||||
transition-timing-function: linear;
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
text-transform: none;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
overflow: visible;
|
||||
outline: 0;
|
||||
}
|
||||
.hamburger:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.hamburger-box {
|
||||
width: 40px;
|
||||
height: 20px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hamburger-inner {
|
||||
display: block;
|
||||
top: 50%;
|
||||
}
|
||||
.hamburger-inner,
|
||||
.hamburger-inner::before,
|
||||
.hamburger-inner::after {
|
||||
width: 36px;
|
||||
height: 2px;
|
||||
background-color: #e3f5ff;
|
||||
border-radius: 4px;
|
||||
position: absolute;
|
||||
transition-property: transform;
|
||||
transition-duration: 0.15s;
|
||||
transition-timing-function: ease;
|
||||
}
|
||||
.hamburger-inner::before,
|
||||
.hamburger-inner::after {
|
||||
content: '';
|
||||
display: block;
|
||||
}
|
||||
.hamburger-inner::before {
|
||||
top: -10px;
|
||||
}
|
||||
.hamburger-inner::after {
|
||||
bottom: -10px;
|
||||
}
|
||||
|
||||
/*
|
||||
* 3DX
|
||||
*/
|
||||
.hamburger--3dx .hamburger-box {
|
||||
perspective: 80px;
|
||||
}
|
||||
|
||||
.hamburger--3dx .hamburger-inner {
|
||||
transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1),
|
||||
background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
}
|
||||
.hamburger--3dx .hamburger-inner::before,
|
||||
.hamburger--3dx .hamburger-inner::after {
|
||||
transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
}
|
||||
|
||||
.hamburger--3dx.is-active .hamburger-inner {
|
||||
background-color: transparent;
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
.hamburger--3dx.is-active .hamburger-inner::before {
|
||||
transform: translate3d(0, 10px, 0) rotate(45deg);
|
||||
}
|
||||
.hamburger--3dx.is-active .hamburger-inner::after {
|
||||
transform: translate3d(0, -10px, 0) rotate(-45deg);
|
||||
}
|
||||
|
||||
/*
|
||||
* 3DX Reverse
|
||||
*/
|
||||
.hamburger--3dx-r .hamburger-box {
|
||||
perspective: 80px;
|
||||
}
|
||||
|
||||
.hamburger--3dx-r .hamburger-inner {
|
||||
transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1),
|
||||
background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
}
|
||||
.hamburger--3dx-r .hamburger-inner::before,
|
||||
.hamburger--3dx-r .hamburger-inner::after {
|
||||
transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
}
|
||||
|
||||
.hamburger--3dx-r.is-active .hamburger-inner {
|
||||
background-color: transparent;
|
||||
transform: rotateY(-180deg);
|
||||
}
|
||||
.hamburger--3dx-r.is-active .hamburger-inner::before {
|
||||
transform: translate3d(0, 10px, 0) rotate(45deg);
|
||||
}
|
||||
.hamburger--3dx-r.is-active .hamburger-inner::after {
|
||||
transform: translate3d(0, -10px, 0) rotate(-45deg);
|
||||
}
|
||||
|
||||
/*
|
||||
* 3DY
|
||||
*/
|
||||
.hamburger--3dy .hamburger-box {
|
||||
perspective: 80px;
|
||||
}
|
||||
|
||||
.hamburger--3dy .hamburger-inner {
|
||||
transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1),
|
||||
background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
}
|
||||
.hamburger--3dy .hamburger-inner::before,
|
||||
.hamburger--3dy .hamburger-inner::after {
|
||||
transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
}
|
||||
|
||||
.hamburger--3dy.is-active .hamburger-inner {
|
||||
background-color: transparent;
|
||||
transform: rotateX(-180deg);
|
||||
}
|
||||
.hamburger--3dy.is-active .hamburger-inner::before {
|
||||
transform: translate3d(0, 10px, 0) rotate(45deg);
|
||||
}
|
||||
.hamburger--3dy.is-active .hamburger-inner::after {
|
||||
transform: translate3d(0, -10px, 0) rotate(-45deg);
|
||||
}
|
||||
|
||||
/*
|
||||
* 3DY Reverse
|
||||
*/
|
||||
.hamburger--3dy-r .hamburger-box {
|
||||
perspective: 80px;
|
||||
}
|
||||
|
||||
.hamburger--3dy-r .hamburger-inner {
|
||||
transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1),
|
||||
background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
}
|
||||
.hamburger--3dy-r .hamburger-inner::before,
|
||||
.hamburger--3dy-r .hamburger-inner::after {
|
||||
transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
}
|
||||
|
||||
.hamburger--3dy-r.is-active .hamburger-inner {
|
||||
background-color: transparent;
|
||||
transform: rotateX(180deg);
|
||||
}
|
||||
.hamburger--3dy-r.is-active .hamburger-inner::before {
|
||||
transform: translate3d(0, 10px, 0) rotate(45deg);
|
||||
}
|
||||
.hamburger--3dy-r.is-active .hamburger-inner::after {
|
||||
transform: translate3d(0, -10px, 0) rotate(-45deg);
|
||||
}
|
||||
|
||||
/*
|
||||
* 3DXY
|
||||
*/
|
||||
.hamburger--3dxy .hamburger-box {
|
||||
perspective: 80px;
|
||||
}
|
||||
|
||||
.hamburger--3dxy .hamburger-inner {
|
||||
transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1),
|
||||
background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
}
|
||||
.hamburger--3dxy .hamburger-inner::before,
|
||||
.hamburger--3dxy .hamburger-inner::after {
|
||||
transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
}
|
||||
|
||||
.hamburger--3dxy.is-active .hamburger-inner {
|
||||
background-color: transparent;
|
||||
transform: rotateX(180deg) rotateY(180deg);
|
||||
}
|
||||
.hamburger--3dxy.is-active .hamburger-inner::before {
|
||||
transform: translate3d(0, 10px, 0) rotate(45deg);
|
||||
}
|
||||
.hamburger--3dxy.is-active .hamburger-inner::after {
|
||||
transform: translate3d(0, -10px, 0) rotate(-45deg);
|
||||
}
|
||||
|
||||
/*
|
||||
* 3DXY Reverse
|
||||
*/
|
||||
.hamburger--3dxy-r .hamburger-box {
|
||||
perspective: 80px;
|
||||
}
|
||||
|
||||
.hamburger--3dxy-r .hamburger-inner {
|
||||
transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1),
|
||||
background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
}
|
||||
.hamburger--3dxy-r .hamburger-inner::before,
|
||||
.hamburger--3dxy-r .hamburger-inner::after {
|
||||
transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
}
|
||||
|
||||
.hamburger--3dxy-r.is-active .hamburger-inner {
|
||||
background-color: transparent;
|
||||
transform: rotateX(180deg) rotateY(180deg) rotateZ(-180deg);
|
||||
}
|
||||
.hamburger--3dxy-r.is-active .hamburger-inner::before {
|
||||
transform: translate3d(0, 10px, 0) rotate(45deg);
|
||||
}
|
||||
.hamburger--3dxy-r.is-active .hamburger-inner::after {
|
||||
transform: translate3d(0, -10px, 0) rotate(-45deg);
|
||||
}
|
||||
|
||||
/*
|
||||
* Arrow
|
||||
*/
|
||||
.hamburger--arrow.is-active .hamburger-inner::before {
|
||||
transform: translate3d(-8px, 0, 0) rotate(-45deg) scale(0.7, 1);
|
||||
}
|
||||
|
||||
.hamburger--arrow.is-active .hamburger-inner::after {
|
||||
transform: translate3d(-8px, 0, 0) rotate(45deg) scale(0.7, 1);
|
||||
}
|
||||
|
||||
/*
|
||||
* Arrow Right
|
||||
*/
|
||||
.hamburger--arrow-r.is-active .hamburger-inner::before {
|
||||
transform: translate3d(8px, 0, 0) rotate(45deg) scale(0.7, 1);
|
||||
}
|
||||
|
||||
.hamburger--arrow-r.is-active .hamburger-inner::after {
|
||||
transform: translate3d(8px, 0, 0) rotate(-45deg) scale(0.7, 1);
|
||||
}
|
||||
|
||||
/*
|
||||
* Arrow Alt
|
||||
*/
|
||||
.hamburger--arrowalt .hamburger-inner::before {
|
||||
transition: top 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
|
||||
}
|
||||
|
||||
.hamburger--arrowalt .hamburger-inner::after {
|
||||
transition: bottom 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
|
||||
}
|
||||
|
||||
.hamburger--arrowalt.is-active .hamburger-inner::before {
|
||||
top: 0;
|
||||
transform: translate3d(-8px, -10px, 0) rotate(-45deg) scale(0.7, 1);
|
||||
transition: top 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
|
||||
}
|
||||
|
||||
.hamburger--arrowalt.is-active .hamburger-inner::after {
|
||||
bottom: 0;
|
||||
transform: translate3d(-8px, 10px, 0) rotate(45deg) scale(0.7, 1);
|
||||
transition: bottom 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
|
||||
}
|
||||
|
||||
/*
|
||||
* Arrow Alt Right
|
||||
*/
|
||||
.hamburger--arrowalt-r .hamburger-inner::before {
|
||||
transition: top 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
|
||||
}
|
||||
|
||||
.hamburger--arrowalt-r .hamburger-inner::after {
|
||||
transition: bottom 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
|
||||
}
|
||||
|
||||
.hamburger--arrowalt-r.is-active .hamburger-inner::before {
|
||||
top: 0;
|
||||
transform: translate3d(8px, -10px, 0) rotate(45deg) scale(0.7, 1);
|
||||
transition: top 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
|
||||
}
|
||||
|
||||
.hamburger--arrowalt-r.is-active .hamburger-inner::after {
|
||||
bottom: 0;
|
||||
transform: translate3d(8px, 10px, 0) rotate(-45deg) scale(0.7, 1);
|
||||
transition: bottom 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
|
||||
}
|
||||
|
||||
/*
|
||||
* Arrow Turn
|
||||
*/
|
||||
.hamburger--arrowturn.is-active .hamburger-inner {
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
.hamburger--arrowturn.is-active .hamburger-inner::before {
|
||||
transform: translate3d(8px, 0, 0) rotate(45deg) scale(0.7, 1);
|
||||
}
|
||||
.hamburger--arrowturn.is-active .hamburger-inner::after {
|
||||
transform: translate3d(8px, 0, 0) rotate(-45deg) scale(0.7, 1);
|
||||
}
|
||||
|
||||
/*
|
||||
* Arrow Turn Right
|
||||
*/
|
||||
.hamburger--arrowturn-r.is-active .hamburger-inner {
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
.hamburger--arrowturn-r.is-active .hamburger-inner::before {
|
||||
transform: translate3d(-8px, 0, 0) rotate(-45deg) scale(0.7, 1);
|
||||
}
|
||||
.hamburger--arrowturn-r.is-active .hamburger-inner::after {
|
||||
transform: translate3d(-8px, 0, 0) rotate(45deg) scale(0.7, 1);
|
||||
}
|
||||
|
||||
/*
|
||||
* Boring
|
||||
*/
|
||||
.hamburger--boring .hamburger-inner,
|
||||
.hamburger--boring .hamburger-inner::before,
|
||||
.hamburger--boring .hamburger-inner::after {
|
||||
transition-property: none;
|
||||
}
|
||||
|
||||
.hamburger--boring.is-active .hamburger-inner {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
.hamburger--boring.is-active .hamburger-inner::before {
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
.hamburger--boring.is-active .hamburger-inner::after {
|
||||
bottom: 0;
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
/*
|
||||
* Collapse
|
||||
*/
|
||||
.hamburger--collapse .hamburger-inner {
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
transition-duration: 0.13s;
|
||||
transition-delay: 0.13s;
|
||||
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||
}
|
||||
.hamburger--collapse .hamburger-inner::after {
|
||||
top: -20px;
|
||||
transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear;
|
||||
}
|
||||
.hamburger--collapse .hamburger-inner::before {
|
||||
transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1),
|
||||
transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||
}
|
||||
|
||||
.hamburger--collapse.is-active .hamburger-inner {
|
||||
transform: translate3d(0, -10px, 0) rotate(-45deg);
|
||||
transition-delay: 0.22s;
|
||||
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
.hamburger--collapse.is-active .hamburger-inner::after {
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear;
|
||||
}
|
||||
.hamburger--collapse.is-active .hamburger-inner::before {
|
||||
top: 0;
|
||||
transform: rotate(-90deg);
|
||||
transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333),
|
||||
transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
|
||||
/*
|
||||
* Collapse Reverse
|
||||
*/
|
||||
.hamburger--collapse-r .hamburger-inner {
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
transition-duration: 0.13s;
|
||||
transition-delay: 0.13s;
|
||||
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||
}
|
||||
.hamburger--collapse-r .hamburger-inner::after {
|
||||
top: -20px;
|
||||
transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear;
|
||||
}
|
||||
.hamburger--collapse-r .hamburger-inner::before {
|
||||
transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1),
|
||||
transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||
}
|
||||
|
||||
.hamburger--collapse-r.is-active .hamburger-inner {
|
||||
transform: translate3d(0, -10px, 0) rotate(45deg);
|
||||
transition-delay: 0.22s;
|
||||
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
.hamburger--collapse-r.is-active .hamburger-inner::after {
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear;
|
||||
}
|
||||
.hamburger--collapse-r.is-active .hamburger-inner::before {
|
||||
top: 0;
|
||||
transform: rotate(90deg);
|
||||
transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333),
|
||||
transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
|
||||
/*
|
||||
* Elastic
|
||||
*/
|
||||
.hamburger--elastic .hamburger-inner {
|
||||
top: 2px;
|
||||
transition-duration: 0.275s;
|
||||
transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
}
|
||||
.hamburger--elastic .hamburger-inner::before {
|
||||
top: 10px;
|
||||
transition: opacity 0.125s 0.275s ease;
|
||||
}
|
||||
.hamburger--elastic .hamburger-inner::after {
|
||||
top: 20px;
|
||||
transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
}
|
||||
|
||||
.hamburger--elastic.is-active .hamburger-inner {
|
||||
transform: translate3d(0, 10px, 0) rotate(135deg);
|
||||
transition-delay: 0.075s;
|
||||
}
|
||||
.hamburger--elastic.is-active .hamburger-inner::before {
|
||||
transition-delay: 0s;
|
||||
opacity: 0;
|
||||
}
|
||||
.hamburger--elastic.is-active .hamburger-inner::after {
|
||||
transform: translate3d(0, -20px, 0) rotate(-270deg);
|
||||
transition-delay: 0.075s;
|
||||
}
|
||||
|
||||
/*
|
||||
* Elastic Reverse
|
||||
*/
|
||||
.hamburger--elastic-r .hamburger-inner {
|
||||
top: 2px;
|
||||
transition-duration: 0.275s;
|
||||
transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
}
|
||||
.hamburger--elastic-r .hamburger-inner::before {
|
||||
top: 10px;
|
||||
transition: opacity 0.125s 0.275s ease;
|
||||
}
|
||||
.hamburger--elastic-r .hamburger-inner::after {
|
||||
top: 20px;
|
||||
transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
}
|
||||
|
||||
.hamburger--elastic-r.is-active .hamburger-inner {
|
||||
transform: translate3d(0, 10px, 0) rotate(-135deg);
|
||||
transition-delay: 0.075s;
|
||||
}
|
||||
.hamburger--elastic-r.is-active .hamburger-inner::before {
|
||||
transition-delay: 0s;
|
||||
opacity: 0;
|
||||
}
|
||||
.hamburger--elastic-r.is-active .hamburger-inner::after {
|
||||
transform: translate3d(0, -20px, 0) rotate(270deg);
|
||||
transition-delay: 0.075s;
|
||||
}
|
||||
|
||||
/*
|
||||
* Emphatic
|
||||
*/
|
||||
.hamburger--emphatic {
|
||||
overflow: hidden;
|
||||
}
|
||||
.hamburger--emphatic .hamburger-inner {
|
||||
transition: background-color 0.125s 0.175s ease-in;
|
||||
}
|
||||
.hamburger--emphatic .hamburger-inner::before {
|
||||
left: 0;
|
||||
transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear,
|
||||
left 0.125s 0.175s ease-in;
|
||||
}
|
||||
.hamburger--emphatic .hamburger-inner::after {
|
||||
top: 10px;
|
||||
right: 0;
|
||||
transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear,
|
||||
right 0.125s 0.175s ease-in;
|
||||
}
|
||||
.hamburger--emphatic.is-active .hamburger-inner {
|
||||
transition-delay: 0s;
|
||||
transition-timing-function: ease-out;
|
||||
background-color: transparent;
|
||||
}
|
||||
.hamburger--emphatic.is-active .hamburger-inner::before {
|
||||
left: -80px;
|
||||
top: -80px;
|
||||
transform: translate3d(80px, 80px, 0) rotate(45deg);
|
||||
transition: left 0.125s ease-out, top 0.05s 0.125s linear,
|
||||
transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1);
|
||||
}
|
||||
.hamburger--emphatic.is-active .hamburger-inner::after {
|
||||
right: -80px;
|
||||
top: -80px;
|
||||
transform: translate3d(-80px, 80px, 0) rotate(-45deg);
|
||||
transition: right 0.125s ease-out, top 0.05s 0.125s linear,
|
||||
transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1);
|
||||
}
|
||||
|
||||
/*
|
||||
* Emphatic Reverse
|
||||
*/
|
||||
.hamburger--emphatic-r {
|
||||
overflow: hidden;
|
||||
}
|
||||
.hamburger--emphatic-r .hamburger-inner {
|
||||
transition: background-color 0.125s 0.175s ease-in;
|
||||
}
|
||||
.hamburger--emphatic-r .hamburger-inner::before {
|
||||
left: 0;
|
||||
transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear,
|
||||
left 0.125s 0.175s ease-in;
|
||||
}
|
||||
.hamburger--emphatic-r .hamburger-inner::after {
|
||||
top: 10px;
|
||||
right: 0;
|
||||
transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear,
|
||||
right 0.125s 0.175s ease-in;
|
||||
}
|
||||
.hamburger--emphatic-r.is-active .hamburger-inner {
|
||||
transition-delay: 0s;
|
||||
transition-timing-function: ease-out;
|
||||
background-color: transparent;
|
||||
}
|
||||
.hamburger--emphatic-r.is-active .hamburger-inner::before {
|
||||
left: -80px;
|
||||
top: 80px;
|
||||
transform: translate3d(80px, -80px, 0) rotate(-45deg);
|
||||
transition: left 0.125s ease-out, top 0.05s 0.125s linear,
|
||||
transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1);
|
||||
}
|
||||
.hamburger--emphatic-r.is-active .hamburger-inner::after {
|
||||
right: -80px;
|
||||
top: 80px;
|
||||
transform: translate3d(-80px, -80px, 0) rotate(45deg);
|
||||
transition: right 0.125s ease-out, top 0.05s 0.125s linear,
|
||||
transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1);
|
||||
}
|
||||
|
||||
/*
|
||||
* Minus
|
||||
*/
|
||||
.hamburger--minus .hamburger-inner::before,
|
||||
.hamburger--minus .hamburger-inner::after {
|
||||
transition: bottom 0.08s 0s ease-out, top 0.08s 0s ease-out, opacity 0s linear;
|
||||
}
|
||||
|
||||
.hamburger--minus.is-active .hamburger-inner::before,
|
||||
.hamburger--minus.is-active .hamburger-inner::after {
|
||||
opacity: 0;
|
||||
transition: bottom 0.08s ease-out, top 0.08s ease-out, opacity 0s 0.08s linear;
|
||||
}
|
||||
|
||||
.hamburger--minus.is-active .hamburger-inner::before {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.hamburger--minus.is-active .hamburger-inner::after {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Slider
|
||||
*/
|
||||
.hamburger--slider .hamburger-inner {
|
||||
top: 2px;
|
||||
}
|
||||
.hamburger--slider .hamburger-inner::before {
|
||||
top: 10px;
|
||||
transition-property: transform, opacity;
|
||||
transition-timing-function: ease;
|
||||
transition-duration: 0.15s;
|
||||
}
|
||||
.hamburger--slider .hamburger-inner::after {
|
||||
top: 20px;
|
||||
}
|
||||
|
||||
.hamburger--slider.is-active .hamburger-inner {
|
||||
transform: translate3d(0, 10px, 0) rotate(45deg);
|
||||
}
|
||||
.hamburger--slider.is-active .hamburger-inner::before {
|
||||
transform: rotate(-45deg) translate3d(-5.71429px, -6px, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
.hamburger--slider.is-active .hamburger-inner::after {
|
||||
transform: translate3d(0, -20px, 0) rotate(-90deg);
|
||||
}
|
||||
|
||||
/*
|
||||
* Slider Reverse
|
||||
*/
|
||||
.hamburger--slider-r .hamburger-inner {
|
||||
top: 2px;
|
||||
}
|
||||
.hamburger--slider-r .hamburger-inner::before {
|
||||
top: 10px;
|
||||
transition-property: transform, opacity;
|
||||
transition-timing-function: ease;
|
||||
transition-duration: 0.15s;
|
||||
}
|
||||
.hamburger--slider-r .hamburger-inner::after {
|
||||
top: 20px;
|
||||
}
|
||||
|
||||
.hamburger--slider-r.is-active .hamburger-inner {
|
||||
transform: translate3d(0, 10px, 0) rotate(-45deg);
|
||||
}
|
||||
.hamburger--slider-r.is-active .hamburger-inner::before {
|
||||
transform: rotate(45deg) translate3d(5.71429px, -6px, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
.hamburger--slider-r.is-active .hamburger-inner::after {
|
||||
transform: translate3d(0, -20px, 0) rotate(90deg);
|
||||
}
|
||||
|
||||
/*
|
||||
* Spin
|
||||
*/
|
||||
.hamburger--spin .hamburger-inner {
|
||||
transition-duration: 0.22s;
|
||||
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||
}
|
||||
.hamburger--spin .hamburger-inner::before {
|
||||
transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in;
|
||||
}
|
||||
.hamburger--spin .hamburger-inner::after {
|
||||
transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||
}
|
||||
|
||||
.hamburger--spin.is-active .hamburger-inner {
|
||||
transform: rotate(225deg);
|
||||
transition-delay: 0.12s;
|
||||
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
.hamburger--spin.is-active .hamburger-inner::before {
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out;
|
||||
}
|
||||
.hamburger--spin.is-active .hamburger-inner::after {
|
||||
bottom: 0;
|
||||
transform: rotate(-90deg);
|
||||
transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
|
||||
/*
|
||||
* Spin Reverse
|
||||
*/
|
||||
.hamburger--spin-r .hamburger-inner {
|
||||
transition-duration: 0.22s;
|
||||
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||
}
|
||||
.hamburger--spin-r .hamburger-inner::before {
|
||||
transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in;
|
||||
}
|
||||
.hamburger--spin-r .hamburger-inner::after {
|
||||
transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||
}
|
||||
|
||||
.hamburger--spin-r.is-active .hamburger-inner {
|
||||
transform: rotate(-225deg);
|
||||
transition-delay: 0.12s;
|
||||
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
.hamburger--spin-r.is-active .hamburger-inner::before {
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out;
|
||||
}
|
||||
.hamburger--spin-r.is-active .hamburger-inner::after {
|
||||
bottom: 0;
|
||||
transform: rotate(90deg);
|
||||
transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
|
||||
/*
|
||||
* Spring
|
||||
*/
|
||||
.hamburger--spring .hamburger-inner {
|
||||
top: 2px;
|
||||
transition: background-color 0s 0.13s linear;
|
||||
}
|
||||
.hamburger--spring .hamburger-inner::before {
|
||||
top: 10px;
|
||||
transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1),
|
||||
transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||
}
|
||||
.hamburger--spring .hamburger-inner::after {
|
||||
top: 20px;
|
||||
transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1),
|
||||
transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||
}
|
||||
|
||||
.hamburger--spring.is-active .hamburger-inner {
|
||||
transition-delay: 0.22s;
|
||||
background-color: transparent;
|
||||
}
|
||||
.hamburger--spring.is-active .hamburger-inner::before {
|
||||
top: 0;
|
||||
transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333),
|
||||
transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
transform: translate3d(0, 10px, 0) rotate(45deg);
|
||||
}
|
||||
.hamburger--spring.is-active .hamburger-inner::after {
|
||||
top: 0;
|
||||
transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333),
|
||||
transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
transform: translate3d(0, 10px, 0) rotate(-45deg);
|
||||
}
|
||||
|
||||
/*
|
||||
* Spring Reverse
|
||||
*/
|
||||
.hamburger--spring-r .hamburger-inner {
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
transition-duration: 0.13s;
|
||||
transition-delay: 0s;
|
||||
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||
}
|
||||
.hamburger--spring-r .hamburger-inner::after {
|
||||
top: -20px;
|
||||
transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0s linear;
|
||||
}
|
||||
.hamburger--spring-r .hamburger-inner::before {
|
||||
transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1),
|
||||
transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||
}
|
||||
|
||||
.hamburger--spring-r.is-active .hamburger-inner {
|
||||
transform: translate3d(0, -10px, 0) rotate(-45deg);
|
||||
transition-delay: 0.22s;
|
||||
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
.hamburger--spring-r.is-active .hamburger-inner::after {
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0s 0.22s linear;
|
||||
}
|
||||
.hamburger--spring-r.is-active .hamburger-inner::before {
|
||||
top: 0;
|
||||
transform: rotate(90deg);
|
||||
transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333),
|
||||
transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
|
||||
/*
|
||||
* Stand
|
||||
*/
|
||||
.hamburger--stand .hamburger-inner {
|
||||
transition: transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19),
|
||||
background-color 0s 0.075s linear;
|
||||
}
|
||||
.hamburger--stand .hamburger-inner::before {
|
||||
transition: top 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||
}
|
||||
.hamburger--stand .hamburger-inner::after {
|
||||
transition: bottom 0.075s 0.075s ease-in,
|
||||
transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||
}
|
||||
|
||||
.hamburger--stand.is-active .hamburger-inner {
|
||||
transform: rotate(90deg);
|
||||
background-color: transparent;
|
||||
transition: transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1),
|
||||
background-color 0s 0.15s linear;
|
||||
}
|
||||
.hamburger--stand.is-active .hamburger-inner::before {
|
||||
top: 0;
|
||||
transform: rotate(-45deg);
|
||||
transition: top 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
.hamburger--stand.is-active .hamburger-inner::after {
|
||||
bottom: 0;
|
||||
transform: rotate(45deg);
|
||||
transition: bottom 0.075s 0.1s ease-out,
|
||||
transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
|
||||
/*
|
||||
* Stand Reverse
|
||||
*/
|
||||
.hamburger--stand-r .hamburger-inner {
|
||||
transition: transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19),
|
||||
background-color 0s 0.075s linear;
|
||||
}
|
||||
.hamburger--stand-r .hamburger-inner::before {
|
||||
transition: top 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||
}
|
||||
.hamburger--stand-r .hamburger-inner::after {
|
||||
transition: bottom 0.075s 0.075s ease-in,
|
||||
transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||
}
|
||||
|
||||
.hamburger--stand-r.is-active .hamburger-inner {
|
||||
transform: rotate(-90deg);
|
||||
background-color: transparent;
|
||||
transition: transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1),
|
||||
background-color 0s 0.15s linear;
|
||||
}
|
||||
.hamburger--stand-r.is-active .hamburger-inner::before {
|
||||
top: 0;
|
||||
transform: rotate(-45deg);
|
||||
transition: top 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
.hamburger--stand-r.is-active .hamburger-inner::after {
|
||||
bottom: 0;
|
||||
transform: rotate(45deg);
|
||||
transition: bottom 0.075s 0.1s ease-out,
|
||||
transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
|
||||
/*
|
||||
* Squeeze
|
||||
*/
|
||||
.hamburger--squeeze .hamburger-inner {
|
||||
transition-duration: 0.075s;
|
||||
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||
}
|
||||
.hamburger--squeeze .hamburger-inner::before {
|
||||
transition: top 0.075s 0.12s ease, opacity 0.075s ease;
|
||||
}
|
||||
.hamburger--squeeze .hamburger-inner::after {
|
||||
transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||
}
|
||||
|
||||
.hamburger--squeeze.is-active .hamburger-inner {
|
||||
transform: rotate(45deg);
|
||||
transition-delay: 0.12s;
|
||||
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
.hamburger--squeeze.is-active .hamburger-inner::before {
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
transition: top 0.075s ease, opacity 0.075s 0.12s ease;
|
||||
}
|
||||
.hamburger--squeeze.is-active .hamburger-inner::after {
|
||||
bottom: 0;
|
||||
transform: rotate(-90deg);
|
||||
transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
|
||||
/*
|
||||
* Vortex
|
||||
*/
|
||||
.hamburger--vortex .hamburger-inner {
|
||||
transition-duration: 0.2s;
|
||||
transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
|
||||
}
|
||||
.hamburger--vortex .hamburger-inner::before,
|
||||
.hamburger--vortex .hamburger-inner::after {
|
||||
transition-duration: 0s;
|
||||
transition-delay: 0.1s;
|
||||
transition-timing-function: linear;
|
||||
}
|
||||
.hamburger--vortex .hamburger-inner::before {
|
||||
transition-property: top, opacity;
|
||||
}
|
||||
.hamburger--vortex .hamburger-inner::after {
|
||||
transition-property: bottom, transform;
|
||||
}
|
||||
|
||||
.hamburger--vortex.is-active .hamburger-inner {
|
||||
transform: rotate(765deg);
|
||||
transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
|
||||
}
|
||||
.hamburger--vortex.is-active .hamburger-inner::before,
|
||||
.hamburger--vortex.is-active .hamburger-inner::after {
|
||||
transition-delay: 0s;
|
||||
}
|
||||
.hamburger--vortex.is-active .hamburger-inner::before {
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
.hamburger--vortex.is-active .hamburger-inner::after {
|
||||
bottom: 0;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
/*
|
||||
* Vortex Reverse
|
||||
*/
|
||||
.hamburger--vortex-r .hamburger-inner {
|
||||
transition-duration: 0.2s;
|
||||
transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
|
||||
}
|
||||
.hamburger--vortex-r .hamburger-inner::before,
|
||||
.hamburger--vortex-r .hamburger-inner::after {
|
||||
transition-duration: 0s;
|
||||
transition-delay: 0.1s;
|
||||
transition-timing-function: linear;
|
||||
}
|
||||
.hamburger--vortex-r .hamburger-inner::before {
|
||||
transition-property: top, opacity;
|
||||
}
|
||||
.hamburger--vortex-r .hamburger-inner::after {
|
||||
transition-property: bottom, transform;
|
||||
}
|
||||
|
||||
.hamburger--vortex-r.is-active .hamburger-inner {
|
||||
transform: rotate(-765deg);
|
||||
transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
|
||||
}
|
||||
.hamburger--vortex-r.is-active .hamburger-inner::before,
|
||||
.hamburger--vortex-r.is-active .hamburger-inner::after {
|
||||
transition-delay: 0s;
|
||||
}
|
||||
.hamburger--vortex-r.is-active .hamburger-inner::before {
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
.hamburger--vortex-r.is-active .hamburger-inner::after {
|
||||
bottom: 0;
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
@ -1,127 +0,0 @@
|
||||
.header {
|
||||
position: relative;
|
||||
padding: 5rem 1rem 4rem;
|
||||
background: #5b67ff;
|
||||
background: linear-gradient(25deg, #95e2ff, #5f79ff, #8ed5ff);
|
||||
color: white;
|
||||
margin-bottom: 2rem;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 150%;
|
||||
height: 150%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 0.1;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='m12 0l12 12h-24z' fill='%23f2f3f8'/%3E%3C/svg%3E");
|
||||
background-size: 24px 24px;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
height: 24px;
|
||||
bottom: -7px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
&__content {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
&__logo {
|
||||
height: 146px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
&__heading {
|
||||
font-weight: 300;
|
||||
font-size: 3rem;
|
||||
margin: 1rem 0;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: 1.5rem;
|
||||
max-width: 600px;
|
||||
margin: 0 auto 2rem;
|
||||
font-weight: 300;
|
||||
letter-spacing: 0.4px;
|
||||
}
|
||||
|
||||
&__css {
|
||||
font-size: 4rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&__github-button-wrapper {
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
&__github-button {
|
||||
color: white;
|
||||
}
|
||||
|
||||
&__leaves {
|
||||
position: absolute;
|
||||
width: 250px;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
|
||||
#header__blob {
|
||||
position: absolute;
|
||||
width: 240px;
|
||||
left: -25px;
|
||||
top: 50px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
#header__leaves1 {
|
||||
right: -100px;
|
||||
top: -50px;
|
||||
}
|
||||
|
||||
#header__leaves2 {
|
||||
left: -250px;
|
||||
bottom: -100px;
|
||||
transform: rotate(235deg);
|
||||
z-index: 2;
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
@media (min-width: 1150px) {
|
||||
#header__leaves2 {
|
||||
left: -100px;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
#header__blob {
|
||||
left: 50px;
|
||||
top: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 579px) {
|
||||
.header {
|
||||
padding: 6rem 0 5rem;
|
||||
|
||||
&__heading {
|
||||
font-size: 3.75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.header {
|
||||
padding: 2.5rem 0 5rem;
|
||||
}
|
||||
}
|
||||
@ -1,129 +0,0 @@
|
||||
.sidebar {
|
||||
background: #273149;
|
||||
position: fixed;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
box-shadow: 0 0.25rem 0.5rem -0.1rem rgba(0, 32, 128, 0.2);
|
||||
|
||||
&__menu {
|
||||
position: absolute;
|
||||
font-weight: bold;
|
||||
border: none;
|
||||
text-align: left;
|
||||
text-transform: uppercase;
|
||||
left: 0;
|
||||
top: 0;
|
||||
padding: 0.75rem 1rem;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
&__menu-icon {
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
&__links {
|
||||
background: #273149;
|
||||
overflow-y: auto;
|
||||
transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
|
||||
transform-origin: 0% 0%;
|
||||
transform: rotateX(-90deg);
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
max-height: 378px;
|
||||
margin-top: 44px;
|
||||
box-shadow: 0 0.25rem 0.5rem -0.1rem rgba(0, 32, 128, 0.2);
|
||||
padding-bottom: 1rem;
|
||||
|
||||
&.is-active {
|
||||
transform: rotateX(0);
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&__link {
|
||||
display: block;
|
||||
color: #e3f5ff;
|
||||
padding: 0.75rem;
|
||||
padding-right: 1.5rem;
|
||||
margin-right: -0.75rem;
|
||||
transition: all 0.1s ease-out;
|
||||
border-left: 2px solid #576a85;
|
||||
font-weight: 500;
|
||||
font-size: 0.95rem;
|
||||
|
||||
&:hover {
|
||||
color: #88f4ff;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-color: pink;
|
||||
}
|
||||
}
|
||||
|
||||
&__section {
|
||||
padding: 0 0.75rem;
|
||||
}
|
||||
|
||||
&__section-heading {
|
||||
text-transform: capitalize;
|
||||
color: #e3f5ff;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
&__new {
|
||||
width: 1.25rem;
|
||||
vertical-align: middle;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.sidebar {
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 20%;
|
||||
height: 100%;
|
||||
background: linear-gradient(-30deg, #273149, #1c273f);
|
||||
box-shadow: 0.4rem 0.4rem 0.8rem rgba(0, 32, 64, 0.1);
|
||||
overflow-y: auto;
|
||||
color: white;
|
||||
|
||||
@media (min-width: 1400px) {
|
||||
width: 275px;
|
||||
}
|
||||
|
||||
&__links {
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transform: rotateX(0);
|
||||
margin-top: 0;
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
&__menu {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
html:not(.macOS) {
|
||||
.sidebar {
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
background-color: #505b76;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: #505b76;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,148 +0,0 @@
|
||||
.snippet {
|
||||
position: relative;
|
||||
background: white;
|
||||
padding: 2rem 5%;
|
||||
box-shadow: 0 0.4rem 0.8rem -0.1rem rgba(0, 32, 128, 0.1), 0 0 0 1px #f0f2f7;
|
||||
border-radius: 0.25rem;
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
|
||||
h3 {
|
||||
font-size: 2rem;
|
||||
padding: 0.5rem 0;
|
||||
border-bottom: 1px solid rgba(0, 32, 128, 0.1);
|
||||
margin-bottom: 1.25rem;
|
||||
margin-top: 0;
|
||||
line-height: 1.3;
|
||||
|
||||
span:not(.snippet__tag) {
|
||||
margin-right: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
code:not([class*='lang']) {
|
||||
background: #fcfaff;
|
||||
border: 1px solid #e2ddff;
|
||||
color: #4b00da;
|
||||
border-radius: 0.15rem;
|
||||
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
|
||||
font-size: 0.9rem;
|
||||
padding: 0.2rem 0.4rem;
|
||||
margin: 0 0.1rem;
|
||||
}
|
||||
|
||||
ol {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
ol > li {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
> p {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
display: inline-block;
|
||||
margin: 1rem 0 0.5rem;
|
||||
font-size: 1.1rem;
|
||||
line-height: 2;
|
||||
|
||||
&[data-type] {
|
||||
background: #333;
|
||||
padding: 0 0.5rem;
|
||||
border-radius: 3px;
|
||||
font-size: 0.9rem;
|
||||
text-transform: uppercase;
|
||||
border: 1px solid #c6d6ea;
|
||||
border-bottom-color: darken(#c6d6ea, 5);
|
||||
background: white;
|
||||
box-shadow: 0 0.25rem 0.5rem -0.1rem rgba(0, 32, 64, 0.15);
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
&[data-type='HTML'] {
|
||||
color: white;
|
||||
border: none;
|
||||
background-image: linear-gradient(135deg, #ff4c9f, #ff7b74);
|
||||
}
|
||||
&[data-type='CSS'] {
|
||||
color: white;
|
||||
border: none;
|
||||
background-image: linear-gradient(135deg, #7983ff, #5f9de9);
|
||||
}
|
||||
&[data-type='JavaScript'] {
|
||||
color: white;
|
||||
border: none;
|
||||
background-image: linear-gradient(135deg, #ffb000, #f58818);
|
||||
}
|
||||
}
|
||||
|
||||
&__browser-support {
|
||||
display: inline-block;
|
||||
font-size: 2rem;
|
||||
font-weight: 200;
|
||||
line-height: 1;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
&__subheading.is-html {
|
||||
color: #e22f70;
|
||||
}
|
||||
|
||||
&__subheading.is-css {
|
||||
color: #0a91d4;
|
||||
}
|
||||
|
||||
&__subheading.is-explanation {
|
||||
color: #4b00da;
|
||||
}
|
||||
|
||||
&__support-note {
|
||||
color: #9fa5b5;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&__requires-javascript {
|
||||
position: absolute;
|
||||
background: red;
|
||||
background: linear-gradient(145deg, #ff003b, #ff4b39);
|
||||
color: white;
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: 0.9rem;
|
||||
transform: rotate(20deg);
|
||||
font-weight: bold;
|
||||
top: 1rem;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
&__tag {
|
||||
}
|
||||
|
||||
&__new {
|
||||
position: absolute;
|
||||
top: -1rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
.snippet-demo {
|
||||
background: #f5f6f9;
|
||||
border-radius: 0.25rem;
|
||||
padding: 0.75rem 1.25rem;
|
||||
|
||||
&.is-distinct {
|
||||
background: linear-gradient(135deg, #ff4c9f, #ff7b74);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.snippet {
|
||||
&__requires-javascript {
|
||||
right: -0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,85 +0,0 @@
|
||||
.tags {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 1rem;
|
||||
padding: 0 1rem;
|
||||
|
||||
&__tag {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
font-weight: bold;
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
color: #8385aa;
|
||||
white-space: nowrap;
|
||||
border: 1px solid #c8cbf2;
|
||||
border-radius: 2px;
|
||||
vertical-align: middle;
|
||||
line-height: 2;
|
||||
padding: 0 0.5rem;
|
||||
margin: 0 0.1rem;
|
||||
transition: all 0.1s ease-out;
|
||||
outline: 0;
|
||||
|
||||
&.is-large {
|
||||
font-size: 0.95rem;
|
||||
border-radius: 0.2rem;
|
||||
|
||||
.feather {
|
||||
top: -2px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.feather {
|
||||
vertical-align: middle;
|
||||
margin-right: 0.25rem;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
button.tags__tag {
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
margin-bottom: 1rem;
|
||||
margin-right: 1rem;
|
||||
background: white;
|
||||
|
||||
&:hover {
|
||||
background: #8385aa;
|
||||
border-color: #8385aa;
|
||||
color: white;
|
||||
}
|
||||
|
||||
&.focus-visible:focus {
|
||||
box-shadow: 0 0 0 0.25rem transparentize(#8385aa, 0.5);
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow: inset 0 0.1rem 0.1rem 0.1rem rgba(0, 0, 0, 0.2);
|
||||
background: darken(#8385aa, 10);
|
||||
border-color: darken(#8385aa, 10);
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
background: #7983ff;
|
||||
border-color: #7983ff;
|
||||
color: white;
|
||||
|
||||
&.focus-visible:focus {
|
||||
box-shadow: 0 0 0 0.25rem transparentize(#7983ff, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 579px) {
|
||||
}
|
||||
@ -1,147 +0,0 @@
|
||||
code[class*='language-'],
|
||||
pre[class*='language-'] {
|
||||
color: rgb(215, 236, 255);
|
||||
background: none;
|
||||
font-family: 'Operator Mono', 'Roboto Mono', Menlo, Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono',
|
||||
monospace;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
line-height: 2;
|
||||
font-size: 1rem;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
margin: 0;
|
||||
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
}
|
||||
|
||||
pre[class*='language-']::-moz-selection,
|
||||
pre[class*='language-'] ::-moz-selection,
|
||||
code[class*='language-']::-moz-selection,
|
||||
code[class*='language-'] ::-moz-selection {
|
||||
text-shadow: none;
|
||||
background: #b3d4fc;
|
||||
}
|
||||
|
||||
pre[class*='language-']::selection,
|
||||
pre[class*='language-'] ::selection,
|
||||
code[class*='language-']::selection,
|
||||
code[class*='language-'] ::selection {
|
||||
text-shadow: none;
|
||||
background: #b3d4fc;
|
||||
}
|
||||
|
||||
@media print {
|
||||
code[class*='language-'],
|
||||
pre[class*='language-'] {
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Code blocks */
|
||||
pre[class*='language-'] {
|
||||
overflow: auto;
|
||||
padding: 0.75rem 1.25rem;
|
||||
}
|
||||
|
||||
pre.is-option {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:not(pre) > code[class*='language-'],
|
||||
pre[class*='language-'] {
|
||||
background: linear-gradient(-30deg, #273149, #1c273f);
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
/* Inline code */
|
||||
:not(pre) > code[class*='language-'] {
|
||||
padding: 0.1em;
|
||||
border-radius: 0.3em;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: #8ca2d3;
|
||||
}
|
||||
|
||||
.token.selector,
|
||||
.token.attr-name {
|
||||
color: #c7f683;
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #5ac8e3;
|
||||
}
|
||||
|
||||
.namespace {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.token.tag {
|
||||
color: #2cefd8;
|
||||
}
|
||||
|
||||
.token.property,
|
||||
.token.boolean,
|
||||
.token.number,
|
||||
.token.constant,
|
||||
.token.symbol,
|
||||
.token.deleted {
|
||||
color: #85b4ff;
|
||||
}
|
||||
|
||||
.token.string,
|
||||
.language-css .token.string,
|
||||
.token.url,
|
||||
.token.attr-value,
|
||||
.token.char,
|
||||
.token.builtin,
|
||||
.token.inserted {
|
||||
color: #ffd694;
|
||||
}
|
||||
|
||||
.token.operator,
|
||||
.token.entity,
|
||||
.style .token.string {
|
||||
color: #ff9bbe;
|
||||
}
|
||||
|
||||
.token.important,
|
||||
.token.atrule,
|
||||
.token.keyword {
|
||||
color: #b7adff;
|
||||
}
|
||||
|
||||
.token.function {
|
||||
color: #25d0e5;
|
||||
}
|
||||
|
||||
.token.regex,
|
||||
.token.variable {
|
||||
color: #00a8d4;
|
||||
}
|
||||
|
||||
.token.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
}
|
||||
@ -1,8 +0,0 @@
|
||||
@import './components/base.scss';
|
||||
@import './components/hamburger.scss';
|
||||
@import './components/sidebar.scss';
|
||||
@import './components/header.scss';
|
||||
@import './components/snippet.scss';
|
||||
@import './components/back-to-top-button.scss';
|
||||
@import './components/tags.scss';
|
||||
@import './components/buttons.scss';
|
||||
@ -1 +0,0 @@
|
||||
<button class="back-to-top-button" aria-label="back to top"><i data-feather="arrow-up"></i></button>
|
||||
@ -1 +0,0 @@
|
||||
<footer class="footer"></footer>
|
||||
@ -1,17 +0,0 @@
|
||||
<header class="header">
|
||||
<div class="container">
|
||||
<img class="header__leaves" draggable="false" id="header__leaves1" src="./src/img/leaves.svg" alt>
|
||||
<img class="header__leaves" draggable="false" id="header__leaves2" src="./src/img/leaves.svg" alt>
|
||||
<img id="header__blob" draggable="false" src="./src/img/blob.png" alt>
|
||||
<div class="header__content">
|
||||
<img class="header__logo" draggable="false" src="./src/img/logo.png">
|
||||
<h1 class="header__heading">30 Seconds of <strong class="header__css">CSS</strong></h1>
|
||||
<p class="header__description">
|
||||
A curated collection of useful CSS snippets you can understand in 30 seconds or less.
|
||||
</p>
|
||||
<div class="header__github-button-wrapper">
|
||||
<a class="github-button header__github-button" href="https://github.com/30-seconds/30-seconds-of-css" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star 30-seconds/30-seconds-of-css on GitHub">Star</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
@ -1,4 +0,0 @@
|
||||
<main class="main" id="main">
|
||||
<div class="container">
|
||||
</div>
|
||||
</main>
|
||||
@ -1,9 +0,0 @@
|
||||
<nav class="sidebar" aria-label="Table of Contents">
|
||||
<button class="hamburger hamburger--spin sidebar__menu" type="button" aria-label="Menu" aria-expanded="false">
|
||||
<span class="hamburger-box">
|
||||
<span class="hamburger-inner"></span>
|
||||
</span>
|
||||
</button>
|
||||
<div class="sidebar__links">
|
||||
</div>
|
||||
</nav>
|
||||
@ -1 +0,0 @@
|
||||
<nav class="tags" aria-label="Filter by tags"></nav>
|
||||
@ -1,34 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||
<title>30 Seconds of CSS</title>
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="./favicon-32x32.png" />
|
||||
<meta
|
||||
name="description"
|
||||
content="A curated collection of useful CSS snippets you can understand in 30 seconds or less. From foundational elements such as clearfix to gradient text color and gradient cursor tracking to CSS easing and far beyond."
|
||||
/>
|
||||
<meta property="twitter:card" content="summary_large_image" />
|
||||
<meta property="twitter:url" content="https://30-seconds.github.io/30-seconds-of-css/" />
|
||||
<meta property="twitter:title" content="30 Seconds of CSS - Useful CSS snippets" />
|
||||
<meta
|
||||
property="twitter:description"
|
||||
content="A curated collection of useful CSS snippets you can understand in 30 seconds or less. "
|
||||
/>
|
||||
<meta property="twitter:image" content="./src/img/opengraph.png" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://30-seconds.github.io/30-seconds-of-css/" />
|
||||
<meta property="og:title" content="30 Seconds of CSS - Useful CSS snippets" />
|
||||
<meta
|
||||
property="og:description"
|
||||
content="A curated collection of useful CSS snippets you can understand in 30 seconds or less."
|
||||
/>
|
||||
<meta property="og:image" content="./src/img/opengraph.png" />
|
||||
<script src="./src/js/index.js" defer=""></script>
|
||||
<script async="" defer="" src="https://buttons.github.io/buttons.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="content-wrapper"></div>
|
||||
</body>
|
||||
</html>
|
||||
BIN
src/img/blob.png
BIN
src/img/blob.png
Binary file not shown.
|
Before Width: | Height: | Size: 255 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 14 KiB |
BIN
src/img/logo.png
BIN
src/img/logo.png
Binary file not shown.
|
Before Width: | Height: | Size: 35 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 9.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 400 KiB |
@ -1,14 +0,0 @@
|
||||
import jump from 'jump.js'
|
||||
import { select, scrollY, easeOutQuint } from '../deps/utils'
|
||||
|
||||
const backToTopButton = select('.back-to-top-button')
|
||||
|
||||
window.addEventListener('scroll', () => {
|
||||
backToTopButton.classList[scrollY() > 500 ? 'add' : 'remove']('is-visible')
|
||||
})
|
||||
backToTopButton.onclick = () => {
|
||||
jump('.header', {
|
||||
duration: 750,
|
||||
easing: easeOutQuint
|
||||
})
|
||||
}
|
||||
@ -1,28 +0,0 @@
|
||||
import { selectAll } from '../deps/utils'
|
||||
|
||||
const snippets = selectAll('.snippet')
|
||||
snippets.forEach(snippet => {
|
||||
var codepenForm = document.createElement('form')
|
||||
codepenForm.action = 'https://codepen.io/pen/define'
|
||||
codepenForm.method = 'POST'
|
||||
codepenForm.target = '_blank'
|
||||
var codepenInput = document.createElement('input')
|
||||
codepenInput.type = 'hidden'
|
||||
codepenInput.name = 'data'
|
||||
var codepenButton = document.createElement('button')
|
||||
codepenButton.classList = 'btn is-large codepen-btn'
|
||||
codepenButton.innerHTML = '<i data-feather="edit-2"></i>Edit on Codepen'
|
||||
var css = snippet.querySelector('pre code.lang-css')
|
||||
var html = snippet.querySelector('pre code.lang-html')
|
||||
var js = snippet.querySelector('pre code.lang-js')
|
||||
var data = {
|
||||
css: css.textContent,
|
||||
title: snippet.querySelector('h3 > span').textContent,
|
||||
html: html ? html.textContent : '',
|
||||
js: js ? js.textContent : ''
|
||||
}
|
||||
codepenInput.value = JSON.stringify(data)
|
||||
codepenForm.appendChild(codepenInput)
|
||||
codepenForm.appendChild(codepenButton)
|
||||
snippet.insertBefore(codepenForm, snippet.querySelector('.snippet-demo').nextSibling)
|
||||
})
|
||||
@ -1,54 +0,0 @@
|
||||
import jump from 'jump.js'
|
||||
import { select, selectAll, easeOutQuint } from '../deps/utils'
|
||||
|
||||
const menu = select('.hamburger')
|
||||
const links = select('.sidebar__links')
|
||||
const sections = selectAll('.sidebar__section')
|
||||
const ACTIVE_CLASS = 'is-active'
|
||||
|
||||
const toggle = () => {
|
||||
if (window.innerWidth <= 991) {
|
||||
const els = [menu, links]
|
||||
els.forEach(el => el.classList.toggle(ACTIVE_CLASS))
|
||||
menu.setAttribute('aria-expanded', menu.classList.contains(ACTIVE_CLASS) ? 'true' : 'false')
|
||||
}
|
||||
}
|
||||
|
||||
menu.addEventListener('click', toggle)
|
||||
|
||||
links.addEventListener('click', e => {
|
||||
const link = e.target.closest('.sidebar__link')
|
||||
if (link) {
|
||||
setTimeout(toggle, 50)
|
||||
jump(link.getAttribute('href'), {
|
||||
duration: 500,
|
||||
easing: easeOutQuint,
|
||||
offset: window.innerWidth <= 991 ? -64 : -32
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
document.addEventListener('click', e => {
|
||||
if (
|
||||
!e.target.closest('.sidebar__links') &&
|
||||
!e.target.closest('.hamburger') &&
|
||||
links.classList.contains(ACTIVE_CLASS)
|
||||
) {
|
||||
toggle()
|
||||
}
|
||||
})
|
||||
|
||||
EventHub.on('Tag.click', data => {
|
||||
data.type_new = data.type.map(el => el.dataset.type)
|
||||
sections.forEach(section => {
|
||||
section.style.display = 'block'
|
||||
//console.log(data.type_new.includes('all'))
|
||||
if (!data.type_new.includes(section.dataset.type) && !data.type_new.includes('all')) {
|
||||
section.style.display = 'none'
|
||||
} else {
|
||||
section.style.display = ''
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
export default { toggle }
|
||||
@ -1,16 +0,0 @@
|
||||
import { selectAll } from '../deps/utils'
|
||||
|
||||
const snippets = selectAll('.snippet')
|
||||
EventHub.on('Tag.click', data => {
|
||||
data.type_new = data.type.map(el => el.dataset.type)
|
||||
snippets.forEach(snippet => {
|
||||
snippet.style.display = 'block'
|
||||
if (data.type_new.includes('all')) return
|
||||
const tags = selectAll('.tags__tag', snippet)
|
||||
if (!tags.some(el => data.type_new.includes(el.dataset.type))) {
|
||||
snippet.style.display = 'none'
|
||||
} else {
|
||||
snippet.style.display = ''
|
||||
}
|
||||
})
|
||||
})
|
||||
@ -1,41 +0,0 @@
|
||||
import { select, selectAll, on } from '../deps/utils'
|
||||
|
||||
const tagButtons = selectAll('button.tags__tag')
|
||||
var isShiftSelected = false
|
||||
const onClick = function() {
|
||||
if (isShiftSelected && this.dataset.type === 'all') {
|
||||
tagButtons.forEach(button => button.classList.remove('is-active'))
|
||||
this.classList.add('is-active')
|
||||
} else if (isShiftSelected) {
|
||||
select('button[data-type=all]').classList.remove('is-active')
|
||||
if (
|
||||
this.classList.contains('is-active') &&
|
||||
selectAll('button.tags__tag.is-active').length > 1
|
||||
) {
|
||||
this.classList.remove('is-active')
|
||||
} else if (this.classList.contains('is-active')) {
|
||||
this.classList.remove('is-active')
|
||||
select('button[data-type=all]').classList.add('is-active')
|
||||
} else {
|
||||
this.classList.add('is-active')
|
||||
}
|
||||
} else {
|
||||
tagButtons.forEach(button => button.classList.remove('is-active'))
|
||||
this.classList.add('is-active')
|
||||
}
|
||||
EventHub.emit('Tag.click', {
|
||||
type: [...selectAll('button.tags__tag.is-active')]
|
||||
})
|
||||
}
|
||||
onkeydown = e => {
|
||||
if (e.shiftKey) {
|
||||
isShiftSelected = true
|
||||
}
|
||||
}
|
||||
|
||||
onkeyup = e => {
|
||||
if (e.key == 'Shift') {
|
||||
isShiftSelected = false
|
||||
}
|
||||
}
|
||||
tagButtons.forEach(button => on(button, 'click', onClick))
|
||||
@ -1,16 +0,0 @@
|
||||
const e = Element.prototype
|
||||
if (!e.matches) {
|
||||
e.matches =
|
||||
e.matchesSelector || e.msMatchesSelector || e.webkitMatchesSelector || e.mozMatchesSelector
|
||||
}
|
||||
if (!e.closest) {
|
||||
e.closest = function(s) {
|
||||
var el = this
|
||||
if (!document.documentElement.contains(el)) return null
|
||||
do {
|
||||
if (el.matches(s)) return el
|
||||
el = el.parentElement || el.parentNode
|
||||
} while (el !== null && el.nodeType === 1)
|
||||
return null
|
||||
}
|
||||
}
|
||||
@ -1,77 +0,0 @@
|
||||
export const select = (s, parent = document) => parent.querySelector(s)
|
||||
|
||||
export const selectAll = (s, parent = document) => [].slice.call(parent.querySelectorAll(s))
|
||||
|
||||
export const scrollY = () => window.scrollY || window.pageYOffset
|
||||
|
||||
export const easeOutQuint = (t, b, c, d) => c * ((t = t / d - 1) * t ** 4 + 1) + b
|
||||
|
||||
export const on = (el, evt, fn, opts = {}) => {
|
||||
const delegatorFn = e => e.target.matches(opts.target) && fn.call(e.target, e)
|
||||
el.addEventListener(evt, opts.target ? delegatorFn : fn, opts.options || false)
|
||||
if (opts.target) return delegatorFn
|
||||
}
|
||||
|
||||
export const createEventHub = () => ({
|
||||
hub: Object.create(null),
|
||||
emit(event, data) {
|
||||
;(this.hub[event] || []).forEach(handler => handler(data))
|
||||
},
|
||||
on(event, handler) {
|
||||
if (!this.hub[event]) this.hub[event] = []
|
||||
this.hub[event].push(handler)
|
||||
},
|
||||
off(event, handler) {
|
||||
const i = (this.hub[event] || []).findIndex(h => h === handler)
|
||||
if (i > -1) this.hub[event].splice(i, 1)
|
||||
}
|
||||
})
|
||||
|
||||
window.EventHub = createEventHub()
|
||||
|
||||
/*
|
||||
* Make iOS behave normally.
|
||||
*/
|
||||
if (/iPhone|iPad|iPod/.test(navigator.platform) && !window.MSStream) {
|
||||
document.body.style.cursor = 'pointer'
|
||||
}
|
||||
|
||||
if (/Mac/.test(navigator.platform)) {
|
||||
document.documentElement.classList.add('macOS')
|
||||
}
|
||||
|
||||
/*
|
||||
* A small utility to fix the letter kerning on macOS Chrome and Firefox when using the system font
|
||||
* (San Francisco). It is now fixed in the text rendering engine in FF 58 and Chrome 64.
|
||||
* UPDATE: It appears the applied fix doesn't work when the font is in italics. New fix has been added.
|
||||
* Must be applied to all browsers for now.
|
||||
*/
|
||||
;(() => {
|
||||
const ua = navigator.userAgent
|
||||
|
||||
// macOS 10.11 (El Capitan) came with San Francisco. Previous versions used Helvetica
|
||||
const isRelevantMacOS =
|
||||
/Mac/.test(navigator.platform) && (ua.match(/OS X 10[._](\d{1,2})/) || [])[1] >= 11
|
||||
|
||||
// Chrome v64 and FF v58 fix the issue
|
||||
const isAffectedBrowser =
|
||||
(ua.match(/Chrome\/(\d+)\./) || [])[1] < 64 || (ua.match(/Firefox\/(\d+)\./) || [])[1] < 58
|
||||
|
||||
const allEls = [].slice.call(document.querySelectorAll('*'))
|
||||
|
||||
if (isRelevantMacOS && isAffectedBrowser) {
|
||||
document.documentElement.style.letterSpacing = '-0.3px'
|
||||
allEls.forEach(el => {
|
||||
const fontSize = parseFloat(getComputedStyle(el).fontSize)
|
||||
if (fontSize >= 20) el.style.letterSpacing = '0.3px'
|
||||
})
|
||||
} else if (isRelevantMacOS && !isAffectedBrowser) {
|
||||
// Italics fix
|
||||
allEls.forEach(el => {
|
||||
const { fontSize, fontStyle } = getComputedStyle(el)
|
||||
if (fontStyle === 'italic') {
|
||||
el.style.letterSpacing = parseFloat(fontSize) >= 20 ? '0.3px' : '-0.3px'
|
||||
}
|
||||
})
|
||||
}
|
||||
})()
|
||||
@ -1,20 +0,0 @@
|
||||
// Deps
|
||||
import 'focus-visible'
|
||||
import 'normalize.css'
|
||||
import 'prismjs'
|
||||
import feather from 'feather-icons'
|
||||
feather.replace()
|
||||
|
||||
// CSS
|
||||
import '../css/deps/prism.css'
|
||||
import '../css/index.scss'
|
||||
|
||||
// Polyfills
|
||||
import './deps/polyfills'
|
||||
|
||||
// Components
|
||||
import Sidebar from './components/Sidebar'
|
||||
import BackToTopButton from './components/BackToTopButton'
|
||||
import Tag from './components/Tag'
|
||||
import Snippet from './components/Snippet'
|
||||
import CodepenCopy from './components/CodepenCopy'
|
||||
3
src/static-parts/README-end.md
Normal file
3
src/static-parts/README-end.md
Normal file
@ -0,0 +1,3 @@
|
||||
---
|
||||
|
||||
_This README is built using [markdown-builder](https://github.com/30-seconds/markdown-builder)._
|
||||
22
src/static-parts/README-start.md
Normal file
22
src/static-parts/README-start.md
Normal file
@ -0,0 +1,22 @@
|
||||
# 30 Seconds of CSS
|
||||
|
||||
<a href="https://css.30secondsofcode.org" target="_blank"></a>
|
||||
|
||||
[](https://github.com/30-seconds/30-seconds-of-css/blob/master/LICENSE) [](http://makeapullrequest.com) [](https://insight.io/github.com/30-seconds/30-seconds-of-css/tree/master/?source=0)
|
||||
|
||||
A curated collection of useful CSS snippets you can understand in 30 seconds or less.
|
||||
Inspired by [30 seconds of code](https://github.com/30-seconds/30-seconds-of-code).
|
||||
|
||||
## View online
|
||||
|
||||
https://css.30secondsofcode.org
|
||||
|
||||
## Contributing
|
||||
|
||||
See CONTRIBUTING.md for the snippet template.
|
||||
|
||||
#### Related projects
|
||||
|
||||
- [30 Seconds of Code](https://30secondsofcode.org/)
|
||||
- [30 Seconds of Interviews](https://30secondsofinterviews.org/)
|
||||
- [30 Seconds of React](https://github.com/30-seconds/30-seconds-of-react)
|
||||
Reference in New Issue
Block a user