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