Merge pull request #50 from code4lib/button-styles

updated button styles in color-test page

Author: jscaffrey

assets/_scss/_color-test.scss

@@ -20,6 +20,9 @@ $cultured-white-lighter: #FFF;
 $turquoise-lighter: lighten($turquoise, 10%);
 $crayola-pink-lighter: lighten($crayola-pink, 10%);
 $honey-yellow-lighter: lighten($honey-yellow, 10%);
+$turquoise-darker: darken($turquoise, 10%);
+$crayola-pink-darker: darken($crayola-pink, 10%);
+$honey-yellow-darker: darken($honey-yellow, 10%);
 //
 // Settings
 // --------------------------------------------------
@@ -37,9 +40,15 @@ $honey-yellow-lighter: lighten($honey-yellow, 10%);
     color: $turquoise !important;
 }
 
+// .CT-body a:hover, .CT-body a:focus {
+//     background-color: $black !important;
+//     color: $cultured-white !important;
+// }
+
+
+// Alternative hover effect:
 .CT-body a:hover, .CT-body a:focus {
-    background-color: $black !important;
-    color: $cultured-white !important;
+    color: $crayola-pink !important;
 }
 
 .CT-body hr{
@@ -74,50 +83,59 @@ $honey-yellow-lighter: lighten($honey-yellow, 10%);
     background-color: $honey-yellow;
     color: $black;
     &:hover {
-        background-color: $honey-yellow-lighter;
+        background-color: transparent;
+        color: $honey-yellow-lighter;
+        border-color: $honey-yellow-darker;
     }
 }
 
 .CT-body .ct-btn-outline-light{
     border-color: $honey-yellow;
     color: $honey-yellow;
     &:hover {
-        border-color: $honey-yellow-lighter;
-        color: $honey-yellow-lighter;
+        background-color: $honey-yellow;
+        color: black;
+        border-color: $honey-yellow-darker;
     }
 }
 
 .CT-body .ct-btn-middle{
     background-color: $crayola-pink;
     color: $black;
     &:hover {
-        background-color: $crayola-pink-lighter;
+        background-color: transparent;
+        color: $crayola-pink;
+        border-color: $crayola-pink-darker;
     }
 }
 
 .CT-body .ct-btn-outline-middle{
     border-color: $crayola-pink;
     color: $crayola-pink;
     &:hover {
-        border-color: $crayola-pink-lighter;
-        color: $crayola-pink-lighter;
+        background-color: $crayola-pink;
+        color: black;
+        border-color: $crayola-pink-darker;
     }
 }
 
 .CT-body .ct-btn-dark{
     background-color: $turquoise;
     color: $black;
     &:hover {
-        background-color: $turquoise-lighter;
+        background-color: transparent;
+        color: $turquoise-lighter;
+        border-color: $turquoise-darker;
     }
 }
 
 .CT-body .ct-btn-outline-dark{
     border-color: $turquoise;
     color: $turquoise;
     &:hover {
-        border-color: $turquoise-lighter;
-        color: $turquoise-lighter;
+        background-color: $turquoise;
+        color: black;
+        border-color: $turquoise-darker;
     }
 }
 

color-test.md

@@ -16,18 +16,18 @@ title: Color Test Page
 visual components (icons, etc.).
 
 - Turquoise (#00D5C0) can be used as a foreground with Oxford Blue (#061A40) or Dark Jungle Green (#041F1E) background
-with sufficient contrast to WCAG 2.0 AAA for regular font, larger font, and visual components (icons, etc.).
+with sufficient contrast to WCAG 2.0 AAA for regular font, [larger font](#), and visual components (icons, etc.).
 
 - Shocking Crayola Pink (#FA62F0) can be used as a foreground with Dark Jungle Green (#041F1E) background for WCAG AA,
 but it does not meet WCAG AAA for regular font (large font and visual components like icons okay).
 
-- For any other combination (e.g. "Cultured" white (#F5F5F5) on Turquoise (#00D5C0) , Shocking Crayola Pink (#FA62F0) on
+- For any other combination (e.g. ["Cultured" white (#F5F5F5)](#) on Turquoise (#00D5C0) , Shocking Crayola Pink (#FA62F0) on
 Oxford Blue (#061A40), do a test.)
 
 - Feel free to use shades or tints of colors to achieve accessible results.
 
+## [Buttons](#)
 <div class="mt-5">
-##Buttons
     <p>Customized buttons here <button class="btn ct-btn-light">button light</button> <button type="button" class="btn ct-btn-outline-light">light outline</button></p>
     <p>Customized buttons here <button class="btn ct-btn-middle">button middle</button> <button type="button" class="btn ct-btn-outline-middle">middle outline</button></p>
     <p>Customized buttons here <button class="btn ct-btn-dark">button dark</button> <button type="button" class="btn ct-btn-outline-dark">middle dark</button></p>