Floating-images: moving button styles out of block into base style file.

hlxsites · Apr 1, 2024 · 8cac776 · 8cac776
1 parent 4c9326f
commit 8cac776
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 34 deletions.
diff --git a/blocks/floating-images/floating-images.css b/blocks/floating-images/floating-images.css
@@ -55,29 +55,6 @@
   line-height: var(--line-height-m);
 }
 
-.block.floating-images p .button {
-  background-color: transparent;
-  border: 1px solid var(--primary-color);
-  color: var(--primary-color);
-  font-size: var(--heading-font-size-xs);
-  font-weight: var(--font-weight-bold);
-  letter-spacing: var(--letter-spacing-m);
-  line-height: 1;
-  padding: 7px 25px;
-}
-
-.block.floating-images p .button:hover {
-  background-color: var(--primary-color);
-  color: var(--secondary-color);
-}
-
-.block.floating-images p .button:focus {
-  background-color: var(--primary-color);
-  color: var(--secondary-color);
-  outline: var(--primary-color) solid 2px;
-  outline-offset: 3px;
-}
-
 @media screen and (min-width: 900px) {
   .block.floating-images > div {
     flex-direction: row;

diff --git a/styles/styles.css b/styles/styles.css
@@ -370,20 +370,32 @@ main .section .default-content-wrapper picture img {
 }
 
 .button-container a {
+  background-color: transparent;
+  border: 1px solid var(--primary-color);
+  color: var(--primary-color);
+  cursor: pointer;
   display: inline-block;
-  padding: .75em 1.5em;
   font-family: var(--font-family-proxima);
-  font-size: var(--body-font-size-s);
-  font-weight: var(--font-weight-normal);
-  letter-spacing:var(--letter-spacing-s);
-  line-height: var(--line-height-s);
-  text-transform: uppercase;
-  text-decoration: none;
+  font-size: var(--heading-font-size-xs);
+  font-weight: var(--font-weight-bold);
+  letter-spacing: var(--letter-spacing-m);
+  line-height: 1;
+  padding: 7px 25px;
   text-align: center;
-  color: var(--body-color);
-  border: 1px solid var(--body-color);
-  background-color: var(--white);
-  cursor: pointer;
+  text-decoration: none;
+  text-transform: uppercase;
+}
+
+.button-container a:hover {
+  background-color: var(--primary-color);
+  color: var(--secondary-color);
+}
+
+.button-container a:focus {
+  background-color: var(--primary-color);
+  color: var(--secondary-color);
+  outline: var(--primary-color) solid 2px;
+  outline-offset: 3px;
 }
 
 main .section.button-primary-color .button-container a {