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

245
src/style/atoms/_button-control.scss Normal file
View File

@@ -0,0 +1,245 @@
// Button: Control
.button-control {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
overflow: hidden;
padding-top: 2px;
pointer-events: auto;
border-radius: 50vh;
border: none;
cursor: pointer;
outline: none;
transition: background-color 350ms $ease-quart;
@include breakpoint (sm) {
width: 56px;
height: 56px;
}
// Icon
.icon {
display: block;
width: 13px;
height: auto;
transition: transform 500ms $ease-quart, opacity 150ms $ease-inout;
overflow: hidden;
@include breakpoint (sm) {
width: 20px;
}
}
.icon[aria-hidden] {
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
}
/*
** Variants
*/
&--white {
background-color: #fff;
&:hover {
background-color: $color-secondary;
}
}
&--pink {
background-color: rgba($color-secondary, 0.4);
&:hover {
background-color: rgba($color-secondary, 0.75);
}
}
&--gray {
background-color: $color-gray;
&:hover {
background-color: $color-text;
}
}
/*
** Directions
*/
// To left
&.dir-left {
.icon[aria-hidden] {
transform: translate3d(100%, -50%, 0);
}
&:hover {
.icon:not([aria-hidden]) {
opacity: 0;
transform: translate3d(-100%, 0, 0);
}
.icon[aria-hidden] {
opacity: 1;
transform: translate3d(-50%, -50%, 0);
}
}
}
// To right
&.dir-right {
.icon[aria-hidden] {
transform: translate3d(-150%, -50%, 0);
}
&:hover {
.icon:not([aria-hidden]) {
opacity: 0;
transform: translate3d(100%, 0, 0);
}
.icon[aria-hidden] {
opacity: 1;
transform: translate3d(-50%, -50%, 0);
}
}
}
// From top
&.dir-top {
.icon[aria-hidden] {
left: auto;
transform: translate3d(0, -150%, 0);
}
&:hover {
.icon:not([aria-hidden]) {
opacity: 0;
transform: translate3d(0, 100%, 0);
}
.icon[aria-hidden] {
opacity: 1;
transform: translate3d(0, -50%, 0);
}
}
}
// From bottom
&.dir-bottom {
.icon[aria-hidden] {
left: auto;
transform: translate3d(0, 150%, 0);
}
&:hover {
.icon:not([aria-hidden]) {
opacity: 0;
transform: translate3d(0, -100%, 0);
}
.icon[aria-hidden] {
opacity: 1;
transform: translate3d(0, -50%, 0);
}
}
}
/*
** Dashed style
*/
&--dashed {
position: relative;
overflow: visible;
background-color: rgba($color-lightpurple, 0.5);
transition: background-color 150ms $ease-inout;
// Icon
svg[fill] {
height: auto;
}
// Dashed circle
svg:not([fill]) {
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, 0.35);
fill: none;
transform-origin: 50% 50%;
animation: rotateDashes 5s linear infinite;
animation-play-state: paused;
animation-delay: 50ms;
transition: stroke 150ms $ease-inout;
}
// Hover
&:hover {
background-color: rgba($color-lightpurple, 0.65);
* {
animation-play-state: running;
}
}
}
/*
** Big version
*/
&--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, 0.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;
}
}
}
}
}

66
src/style/atoms/_button-outline.scss Normal file
View File

@@ -0,0 +1,66 @@
// Button: Outline
.button-outline {
position: relative;
display: inline-flex;
align-items: center;
height: 32px;
padding: 1px 16px 0;
font-family: $font-sans-sb;
font-size: rem(14px);
color: #fff;
background: none;
border: 2px solid #fff;
border-radius: 50vh;
overflow: hidden;
text-decoration: none;
cursor: pointer;
outline: none;
transition: all 275ms $ease-cubic;
@include breakpoint (sm) {
height: 40px;
font-size: rem(18px);
}
span {
display: block;
}
// Second text
&:after {
opacity: 0;
content: attr(data-text);
position: absolute;
display: block;
text-align: center;
top: 50%;
left: 0;
right: 0;
transform: translate3d(0, -120%, 0);
}
span, &:after {
transition: opacity 275ms $ease-cubic, transform 275ms $ease-cubic;
}
// Disabled
&.disabled {
color: $color-lightpurple;
border-color: $color-lightpurple;
}
// Hover
&:hover {
color: $color-tertiary;
border-color: $color-tertiary;
span {
opacity: 0;
transform: translate3d(0, 100%, 0);
}
&:after {
opacity: 1;
transform: translate3d(0, -50%, 0);
}
}
}

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);
}
}
}

18
src/style/atoms/_cursor.scss
View File

@@ -1,18 +0,0 @@
// 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);
}
}

9
src/style/atoms/_link.scss
View File

@@ -6,20 +6,21 @@
padding: 0 8px;
color: $color-secondary;
text-decoration: none;
transition: color 200ms ease;
transition: color 200ms $ease-cubic;
// Line
&:after {
content: "";
position: absolute;
z-index: -1;
background-color: rgba($color-secondary, .22);
background-color: rgba($color-secondary, 0.22);
height: 14px;
width: 100%;
bottom: 5px;
left: 0;
border-radius: 50vh;
transition: all 200ms ease;
transition: all 200ms $ease-cubic;
transition-delay: 50ms;
}
// Icon
@@ -46,7 +47,7 @@
color: $color-text;
&:after {
background-color: rgba($color-secondary, .4);
background-color: rgba($color-secondary, 0.4);
}
svg * {
animation-play-state: running;

28
src/style/atoms/_switcher.scss
View File

@@ -29,6 +29,7 @@
margin-right: 0;
}
}
.bottom {
display: block;
color: $color-secondary;
@@ -46,26 +47,17 @@
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 version (smaller)
*/
&--side {
.switcher {
&__text {
font-size: rem(22px);
pointer-events: none;
}
&__icon {
width: 40px;
@@ -75,16 +67,20 @@
circle {
stroke: #F4EDFB;
}
img, svg[fill] {
transform: rotate(90deg);
}
&:hover {
background-color: darken(#F4EDFB, 7);
circle {
stroke: darken(#F4EDFB, 7);
}
}
}
}
.top {
color: $color-primary;
}
img, svg {
transform: rotate(90deg);
}
}
}

90
src/style/atoms/_toggle.scss Normal file
View File

@@ -0,0 +1,90 @@
// Toggle Button
.toggle {
position: relative;
margin-top: 58px;
background-color: rgba($color-secondary, 0.25);
display: inline-flex;
border-radius: 50vh;
button, .pill {
position: relative;
z-index: 2;
color: $color-secondary;
border-radius: 50vh;
padding: 12px 24px;
font-family: $font-sans-sb;
font-size: rem(18px);
line-height: 0;
display: flex;
align-items: center;
justify-content: center;
outline: none;
transition: color 150ms $ease-inout;
}
button {
span {
margin-left: 16px;
}
svg {
fill: $color-secondary;
* {
transition: fill 150ms $ease-inout;
transition-delay: 0ms;
}
}
// Active button
&.active {
color: #fff;
svg * {
fill: #C78FEC;
}
}
// Hover
&:hover:not(.active) {
color: $color-secondary-bright;
svg {
fill: $color-secondary-bright;
}
}
// List icon
&[data-layout="list"]:hover {
rect:nth-of-type(even) {
animation: layoutListEven 400ms $ease-cubic infinite alternate forwards;
}
rect:nth-of-type(odd) {
animation: layoutListOdd 400ms $ease-cubic infinite alternate forwards;
}
}
// Grid icon
&[data-layout="grid"]:hover {
rect:nth-of-type(even) {
animation: layoutGridEven 400ms $ease-cubic infinite alternate forwards;
}
rect:nth-of-type(odd) {
animation: layoutGridOdd 400ms $ease-cubic infinite alternate forwards;
}
}
}
// Pill (active)
.pill {
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: auto;
height: 100%;
background-color: $color-primary;
transition: all 500ms $ease-quart;
span {
content: attr(data-text);
display: block;
margin: 0;
}
}
}