✨ Finish Photo viewer styling with responsive

2021-10-25 15:45:12 +02:00
parent e830a18454
commit adc395b3f7
6 changed files with 249 additions and 80 deletions
--- a/src/style/atoms/_button-circle.scss
+++ b/src/style/atoms/_button-circle.scss
@@ -14,6 +14,7 @@
        width: 22px;
        height: 22px;
        object-fit: contain;
+        transition: opacity 0.4s var(--ease-quart), filter 0.4s var(--ease-quart);
    }

    // Clones
@@ -35,6 +36,10 @@
        }
    }

+
+    /*
+    ** States
+    */
    // Hover
    &:hover {
        .clone {
@@ -49,6 +54,16 @@
        }
    }

+    // Disabled
+    &[disabled] {
+        background: $color-primary;
+        border: 3px solid #ffffff20;
+
+        svg {
+            fill: $color-primary-tertiary20;
+        }
+    }
+

    /*
    ** Variants