☠️ RESET for v2

2021-09-14 13:00:12 +02:00
parent 511b0c85e5
commit bdbf511a75
124 changed files with 1612 additions and 11094 deletions
--- a/src/style/atoms/_button.scss
+++ b/src/style/atoms/_button.scss
@@ -1,97 +0,0 @@
-// Default button
-.button {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    height: 40px;
-    overflow: hidden;
-    padding: 0 16px;
-    background: #fff;
-    font-family: $font-sans-sb;
-    font-size: rem(14px);
-    color: $color-gray;
-    border-radius: 50vh;
-    text-decoration: none;
-    border: none;
-    outline: none;
-    cursor: pointer;
-    transition: background-color 250ms $ease-cubic, color 350ms $ease-cubic;
-    will-change: background-color, color;
-
-    @include breakpoint (sm) {
-        height: 48px;
-        padding: 1px 24px 0;
-        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 $ease-cubic;
-
-        .anim {
-            animation-delay: 100ms;
-        }
-    }
-
-    // Text
-    .text {
-        position: relative;
-        overflow: hidden;
-
-        &:after {
-            content: attr(data-text);
-            opacity: 0;
-            display: block;
-            position: absolute;
-            top: 50%;
-            left: 0;
-            width: 100%;
-            transform: translateY(100%);
-        }
-    }
-
-    span {
-        display: block;
-    }
-    span, .text:after {
-        transition: transform 275ms $ease-cubic, opacity 275ms $ease-cubic;
-        will-change: transform, opacity;
-    }
-
-    // Hover
-    &:hover {
-        color: #fff;
-        background-color: $color-secondary;
-
-        svg {
-            fill: #fff;
-        }
-        .anim {
-            animation-play-state: running;
-        }
-        .text {
-            span {
-                opacity: 0;
-                transform: translateY(-75%);
-            }
-            &:after {
-                opacity: 1;
-                transform: translateY(-50%);
-            }
-        }
-    }
-}