Changeset 11058 for sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/css/components/_favorite-button.scss

Timestamp:

06/24/2021 05:19:19 PM (5 years ago)

Author:

ryelle

Message:

Pattern Directory: Sync with git WordPress/pattern-directory@07f8189a7c5bdbd0344edac212c63a7b956159f6

File:

• sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/css/components/_favorite-button.scss (modified) (4 diffs)

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/css/components/_favorite-button.scss

@@ -5 +5 @@
         width: 2.25rem;
         border-radius: 2px;
-        color: $color__text;
+        color: color(gray-60);
 
         svg {
@@ -16 +16 @@
 
                 path {
-                        fill: $color-gray-300;
+                        fill: color(gray-60);
                 }
         }
 
-        .pattern__favorite-filled {
+        .pattern-favorite-button__filled {
                 opacity: 0;
         }
 
         &:hover {
-                color: $color__text;
+                color: color(gray-60);
                 background: transparent;
 
                 svg path {
-                        fill: $color__text;
+                        fill: color(gray-60);
                 }
+        }
+
+        &:focus {
+                box-shadow:
+                        inset 0 0 0 1px #fff,
+                        0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
         }
 
@@ -54 +60 @@
         }
 
+        &:not(.has-label) {
+                background-color: $color-white;
+                box-shadow: 0 1px 2px rgba($color-black, 0.15);
+
+                &:hover {
+                        background: color(gray-2);
+                }
+
+                &:focus {
+                        box-shadow:
+                                inset 0 0 0 1px #fff,
+                                0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+                }
+        }
+
         &.is-favorited {
                 svg path {
-                        fill: $color-alert-red;
+                        fill: color(red-40);
                 }
 
-                .pattern__favorite-outline {
+                .pattern-favorite-button__outline {
                         opacity: 0;
                         transform: scale(2.8);
                 }
 
-                .pattern__favorite-filled {
+                .pattern-favorite-button__filled {
                         opacity: 1;
                 }
 
-                &:hover .pattern__favorite-filled {
+                &:hover .pattern-favorite-button__filled {
                         animation: 0.9s infinite HeartBeat;
 
@@ -75 +96 @@
                         }
                 }
+        }
+}
+
+.pattern-favorite-button-small {
+        height: auto;
+
+        &:hover {
+                background: transparent;
+        }
+
+        &:focus {
+                background: transparent;
+                outline: 1px dotted currentColor;
+                box-shadow: none;
+        }
+
+        &.is-favorited svg path {
+                fill: color(red-40);
         }
 }