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