flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

WIP

Browse Source
This commit is contained in:
Félix Péault
2020-02-13 22:24:28 +01:00
parent 9b0c154f61
commit ef23d90eb6
60 changed files with 1665 additions and 930 deletions
Download Patch File Download Diff File Expand all files Collapse all files

291
src/style/atoms/_button.scss
View File

@@ -4,6 +4,7 @@
display: inline-flex;
align-items: center;
height: 40px;
overflow: hidden;
padding: 0 16px;
background: #fff;
font-family: $font-sans-sb;
@@ -11,11 +12,10 @@
color: $color-gray;
border-radius: 50vh;
text-decoration: none;
overflow: hidden;
border: none;
outline: none;
cursor: pointer;
transition: background-color 250ms, color 350ms;
transition: background-color 250ms $ease-cubic, color 350ms $ease-cubic;
@include breakpoint (sm) {
height: 48px;
@@ -39,37 +39,35 @@
}
}
svg {
transition: all 350ms;
transition: all 350ms $ease-cubic;
.anim {
animation-delay: 100ms;
}
}
// Text
&:before {
span {
display: block;
}
&:after {
opacity: 0;
content: attr(data-text);
position: absolute;
display: block;
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;
transform: translate3d(-50%, -120%, 0);
}
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; }
}
span, &:after {
transition: opacity 275ms $ease-cubic, transform 275ms $ease-cubic;
}
// Hover
&:hover {
background-color: $color-primary;
color: #fff;
background-color: $color-secondary;
svg {
fill: #fff !important;
@@ -77,260 +75,13 @@
.anim {
animation-play-state: running;
}
&:before {
span {
opacity: 0;
transform: translate3d(-50%, 75%, 0);
transform: translate3d(0, 100%, 0);
}
span {
&:after {
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;
}
transform: translate3d(-50%, -50%, 0);
}
}
}