WIP React > Svelte
Put most of the developed design into Svelte
This commit is contained in:
336
src/style/atoms/_button.scss
Normal file
336
src/style/atoms/_button.scss
Normal file
@@ -0,0 +1,336 @@
|
||||
// Default button
|
||||
.button {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
height: 40px;
|
||||
padding: 0 16px;
|
||||
background: #fff;
|
||||
font-family: $font-sans-sb;
|
||||
font-size: rem(14px);
|
||||
color: $color-gray;
|
||||
border-radius: 50vh;
|
||||
text-decoration: none;
|
||||
overflow: hidden;
|
||||
border: none;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
transition: background-color 250ms, color 350ms;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
height: 48px;
|
||||
padding: 0 24px;
|
||||
font-size: rem(18px);
|
||||
}
|
||||
|
||||
// Icon if existing
|
||||
img, svg {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: block;
|
||||
width: 18px;
|
||||
height: auto;
|
||||
margin-right: 8px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
width: 22px;
|
||||
height: auto;
|
||||
margin-right: 16px;
|
||||
}
|
||||
}
|
||||
svg {
|
||||
transition: all 350ms;
|
||||
}
|
||||
|
||||
// Text
|
||||
&:before {
|
||||
content: attr(data-text);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: calc(50% + 19px);
|
||||
width: 100%;
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
transition: transform 350ms, opacity 350ms;
|
||||
transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
|
||||
// transition-delay: 75ms;
|
||||
}
|
||||
span {
|
||||
display: inline-block;
|
||||
transform: translate3d(0, -6px, 0);
|
||||
transition: transform 350ms, opacity 350ms;
|
||||
transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
|
||||
opacity: 0;
|
||||
|
||||
@for $i from 1 to 20 {
|
||||
&:nth-child(#{$i}) { transition-delay: $i * 12ms; }
|
||||
}
|
||||
}
|
||||
|
||||
// Hover
|
||||
&:hover {
|
||||
background-color: $color-primary;
|
||||
color: #fff;
|
||||
|
||||
svg {
|
||||
fill: #fff !important;
|
||||
}
|
||||
.anim {
|
||||
animation-play-state: running;
|
||||
}
|
||||
&:before {
|
||||
opacity: 0;
|
||||
transform: translate3d(-50%, 75%, 0);
|
||||
}
|
||||
span {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
// &:after {
|
||||
// opacity: 1;
|
||||
// width: 300px;
|
||||
// height: 300px;
|
||||
// }
|
||||
}
|
||||
// &:after {
|
||||
// content: "";
|
||||
// position: absolute;
|
||||
// z-index: 1;
|
||||
// top: 50%;
|
||||
// left: 50%;
|
||||
// transform: translate3d(-50%, -50%, 0);
|
||||
// width: 200px;
|
||||
// height: 200px;
|
||||
// background: $color-primary;
|
||||
// opacity: 0;
|
||||
// border-radius: 50vh;
|
||||
// transition: all 250ms ease-in-out;
|
||||
// }
|
||||
}
|
||||
|
||||
|
||||
// Button: Control
|
||||
.button-control {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
pointer-events: auto;
|
||||
border-radius: 50vh;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
}
|
||||
|
||||
// Icon
|
||||
img {
|
||||
display: block;
|
||||
width: 13px;
|
||||
height: auto;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
// White variant
|
||||
&--white {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
// Pink variant
|
||||
&--pink {
|
||||
background-color: rgba($color-secondary, .4);
|
||||
}
|
||||
|
||||
// Gray variant
|
||||
&--gray {
|
||||
background-color: $color-gray;
|
||||
}
|
||||
|
||||
// Next direction
|
||||
&.next {
|
||||
img {
|
||||
transform: rotateY(180deg);
|
||||
margin-left: -1px;
|
||||
}
|
||||
}
|
||||
|
||||
// Dashed style
|
||||
&--dashed {
|
||||
position: relative;
|
||||
background-color: rgba($color-lightpurple, .5);
|
||||
transition: background-color 150ms ease-in-out;
|
||||
|
||||
// Icon
|
||||
svg[style] {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
// Dashed circle
|
||||
svg:not([style]) {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 130%;
|
||||
height: 130%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
circle {
|
||||
display: block;
|
||||
stroke-width: 1.75;
|
||||
stroke-dasharray: 7, 3;
|
||||
stroke: rgba($color-lightpurple, .35);
|
||||
fill: none;
|
||||
transform-origin: 50% 50%;
|
||||
animation: rotateDashes 5s linear infinite;
|
||||
animation-play-state: paused;
|
||||
animation-delay: 100ms;
|
||||
}
|
||||
|
||||
// Hover
|
||||
&:hover {
|
||||
background-color: rgba($color-lightpurple, .65);
|
||||
|
||||
* {
|
||||
animation-play-state: running;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Big
|
||||
&--big {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
text-decoration: none;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
width: 152px;
|
||||
height: 152px;
|
||||
}
|
||||
|
||||
.center {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
margin-top: 8px;
|
||||
color: rgba(#fff, .3);
|
||||
text-transform: uppercase;
|
||||
font-family: $font-sans-sb;
|
||||
font-size: rem(6px);
|
||||
letter-spacing: 1px;
|
||||
line-height: 1;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
margin-top: 10px;
|
||||
font-size: rem(10px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: 24px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
width: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
// Big Dashed
|
||||
&.button-control--dashed {
|
||||
@include breakpoint (sm) {
|
||||
circle {
|
||||
stroke-width: 4.5;
|
||||
stroke-dasharray: 20, 8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Button: Outline
|
||||
.button-outline {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
height: 32px;
|
||||
padding: 0 16px;
|
||||
font-family: $font-sans-sb;
|
||||
font-size: rem(14px);
|
||||
color: #fff;
|
||||
background: none;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 50vh;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
transition: all 150ms ease;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
height: 40px;
|
||||
font-size: rem(18px);
|
||||
}
|
||||
|
||||
// Disabled
|
||||
&.disabled {
|
||||
color: $color-lightpurple;
|
||||
border-color: $color-lightpurple;
|
||||
}
|
||||
|
||||
// Hover
|
||||
&:hover {
|
||||
color: $color-tertiary;
|
||||
border-color: $color-tertiary;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Toggle Button
|
||||
.toggle {
|
||||
margin-top: 58px;
|
||||
background-color: rgba($color-secondary, .25);
|
||||
display: inline-flex;
|
||||
border-radius: 50vh;
|
||||
|
||||
button {
|
||||
background: none;
|
||||
border: none;
|
||||
color: $color-secondary;
|
||||
border-radius: 50vw;
|
||||
padding: 12px 24px;
|
||||
font-family: $font-sans-sb;
|
||||
font-size: rem(18px);
|
||||
line-height: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
|
||||
span {
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
// Active button
|
||||
&.active {
|
||||
background-color: $color-primary;
|
||||
color: #fff;
|
||||
|
||||
svg * {
|
||||
fill: #C78FEC;
|
||||
}
|
||||
|
||||
& + button {
|
||||
padding-left: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
18
src/style/atoms/_cursor.scss
Normal file
18
src/style/atoms/_cursor.scss
Normal file
@@ -0,0 +1,18 @@
|
||||
// Zoom cursor
|
||||
.cursor-zoom {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background: url(#{$dir-img}/icons/zoom.svg) 0 0 no-repeat;
|
||||
background-size: cover;
|
||||
transition: opacity 300ms ease, transform 300ms ease;
|
||||
filter: drop-shadow(1px 1px 4px rgba(#000, .7));
|
||||
|
||||
// By default
|
||||
&[aria-hidden="true"] {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transform: scale3d(0.7, 0.7, 0.7);
|
||||
}
|
||||
}
|
||||
55
src/style/atoms/_link.scss
Normal file
55
src/style/atoms/_link.scss
Normal file
@@ -0,0 +1,55 @@
|
||||
// Change link
|
||||
.link-change {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin: 0 6px;
|
||||
padding: 0 8px;
|
||||
color: $color-secondary;
|
||||
text-decoration: none;
|
||||
transition: color 200ms ease;
|
||||
|
||||
// Line
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
background-color: rgba($color-secondary, .22);
|
||||
height: 14px;
|
||||
width: 100%;
|
||||
bottom: 5px;
|
||||
left: 0;
|
||||
border-radius: 50vh;
|
||||
transition: all 200ms ease;
|
||||
}
|
||||
|
||||
// Icon
|
||||
.icon {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
top: -3px;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
margin-left: 6px;
|
||||
background-color: #fff;
|
||||
border-radius: 50vh;
|
||||
|
||||
svg {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Hover
|
||||
&:hover {
|
||||
color: $color-text;
|
||||
|
||||
&:after {
|
||||
background-color: rgba($color-secondary, .4);
|
||||
}
|
||||
svg * {
|
||||
animation-play-state: running;
|
||||
}
|
||||
}
|
||||
}
|
||||
90
src/style/atoms/_switcher.scss
Normal file
90
src/style/atoms/_switcher.scss
Normal file
@@ -0,0 +1,90 @@
|
||||
// Switcher
|
||||
.switcher {
|
||||
a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #C78FEC;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
// Text
|
||||
&__text {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: block;
|
||||
font-family: $font-serif;
|
||||
font-size: rem(30px);
|
||||
line-height: 1;
|
||||
text-align: right;
|
||||
|
||||
em {
|
||||
margin-left: -2px;
|
||||
margin-right: 16px;
|
||||
font-size: rem(14px);
|
||||
text-transform: uppercase;
|
||||
color: $color-lightpurple;
|
||||
letter-spacing: 1px;
|
||||
|
||||
&.same-line {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
.bottom {
|
||||
display: block;
|
||||
color: $color-secondary;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&.empty {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
// Icon
|
||||
&__icon {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
margin-top: 4px;
|
||||
margin-left: -8px;
|
||||
|
||||
// Image
|
||||
// svg {
|
||||
// height: 28px;
|
||||
// width: auto;
|
||||
// }
|
||||
|
||||
// Dashed circle
|
||||
// svg {
|
||||
// width: 64px;
|
||||
// height: 64px;
|
||||
// }
|
||||
}
|
||||
|
||||
|
||||
// Side version (smaller)
|
||||
&--side {
|
||||
.switcher {
|
||||
&__text {
|
||||
font-size: rem(22px);
|
||||
}
|
||||
&__icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: #F4EDFB;
|
||||
|
||||
circle {
|
||||
stroke: #F4EDFB;
|
||||
}
|
||||
&:hover {
|
||||
background-color: darken(#F4EDFB, 7);
|
||||
}
|
||||
}
|
||||
}
|
||||
.top {
|
||||
color: $color-primary;
|
||||
}
|
||||
img, svg {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user