Button styling.

cagov · Dec 20, 2023 · 2d33b08 · 2d33b08
1 parent 063a915
commit 2d33b08
Show file tree

Hide file tree

Showing 5 changed files with 220 additions and 4 deletions.
diff --git a/docs/pages/how-to-use.md b/docs/pages/how-to-use.md
@@ -40,4 +40,6 @@ Select a topic from the navigation at the top of the page or [find all resources
 
 ODI is transforming government processes and public services to work better for Californians. We use data, human-centered design and technology to create services that are easier for everyone to use. We are a government-to-government service. Our goal is for the citizens of our community to benefit from our collaborations.
 
-<button class="btn-primary" name="button" onclick="https://innovation.ca.gov">Learn more about ODI</a>
+<div class="wp-block-button">
+<a class="btn-primary featured-btn" href="https://innovation.ca.gov"><span>Learn more</span></a>
+</div>
diff --git a/docs/site/homepage.njk b/docs/site/homepage.njk
@@ -11,11 +11,11 @@ description: This system makes it easy to build digital services that meet the n
             </p>
             <p>If you want a place to start, we have recommendations for how to use each type of resource.
             </p>
-            <div class="wp-block-button">
-              <a class="btn-primary" href="/how-to-use/">Learn how to use the Hub</a>
-            </div>
         </div>
       </div>
+            <div class="wp-block-button">
+              <a class="btn-primary featured-btn" href="/how-to-use/">Learn how to use the Hub</a>
+            </div>
       {# <div class="m-y-4"><img class="cagov-featured-image vector-bear" src="/img/hero-bear-nature.svg" alt="California bear with abstract shapes" width="1024" height="683"></div> #}
 
       <br clear="all"/>

diff --git a/docs/src/css/sass/ds-site-overrides.scss b/docs/src/css/sass/ds-site-overrides.scss
@@ -63,3 +63,5 @@ cagov-page-feedback {
         background: #00315f!important; // var(--primary-dark-color, #003484)!important
     }
 }
+
+
diff --git a/docs/src/css/sass/index.scss b/docs/src/css/sass/index.scss
@@ -53,4 +53,6 @@
 
 @import './layout';
 
+@import './temp-buttons';
+
 @import './ds-site-overrides';
diff --git a/docs/src/css/sass/temp-buttons.scss b/docs/src/css/sass/temp-buttons.scss
@@ -0,0 +1,210 @@
+/* Buttons global styles */
+.wp-block-button__link {
+  background-color: #33705b;
+  /* defined here for when css vars are not supported */
+  background-color: var(--primary-color, #33705b);
+  color: white;
+  padding: 0.5556rem;
+  margin: 0 0 1rem 0;
+  border-radius: 0.2778rem;
+  font-weight: bold;
+  display: inline-block;
+  border: none;
+  text-decoration: none;
+}
+.wp-block-button__link:hover {
+  /* defined here for when css vars are not supported */
+  background-color: var(--primary-hover-color, #33705b);
+  /* variable used with fallback in case it is not defined */
+  color: var(--white, #ffffff);
+  padding: 0.5556rem;
+  border-radius: 0.2778rem;
+  font-weight: bold;
+  display: inline-block;
+  border: none;
+  // text-decoration: underline;
+}
+
+// button mixing
+@mixin btn {
+  display: inline-block;
+  font-size: var(--font-size-2);
+  padding: var(--s-1);
+  line-height: var(--font-lineheight-3);
+  border-radius: var(--radius-2);
+  border: var(--border-1) solid;
+  text-align: center;
+  text-decoration: none;
+  vertical-align: middle;
+  cursor: pointer;
+  transition: all var(--ease-2) var(--animation-duration-3);
+}
+
+// Primary buttons
+.btn-primary {
+  @include btn;
+  color: var(--white);
+  background-color: var(--primary-color);
+  border-color: var(--primary-color);
+
+  &:hover {
+    color: var(--white);
+    background-color: var(--primary-dark-color);
+    border-color: var(--primary-dark-color);
+  }
+  &:focus {
+    outline: var(--border-2) solid var(--highlight-color);
+  }
+}
+.btn-primary-outline {
+  @include btn;
+  color: var(--primary-color);
+  background-color: var(--white);
+  border-color: var(--primary-color);
+
+  &:hover {
+    color: var(--primary-dark-color);
+    background-color: var(--white);
+    border-color: var(--primary-dark-color);
+  }
+  &:focus {
+    outline: var(--border-2) solid var(--highlight-color);
+  }
+}
+
+// Disabled button
+// Disabled buttons should include the aria-disabled="true" attribute to indicate the state of the element to assistive technologies.
+// Also, to be safe, add a tabindex="-1" attribute to your disabled button
+.btn-disabled {
+  @include btn;
+  pointer-events: none !important;
+  color: var(--white);
+  background-color: var(--gray-700);
+  border-color: var(--gray-700);
+
+  &:hover {
+    color: var(--white);
+    background-color: var(--gray-700);
+    border-color: var(--gray-700);
+  }
+}
+.btn-disabled-outline {
+  @include btn;
+  pointer-events: none !important;
+  color: var(--gray-700);
+  background-color: var(--white);
+  border-color: var(--gray-700);
+
+  &:hover {
+    color: var(--gray-700);
+    background-color: var(--white);
+    border-color: var(--gray-700);
+  }
+}
+
+/* ACTION BUTTONS */
+
+@mixin actionbutton {
+  display: inline-block;
+  padding: var(--s-2);
+  border-radius: var(--radius-2);
+  border: var(--border-1) solid;
+  border-bottom: var(--border-4) solid;
+  text-align: left;
+  text-decoration: none;
+  cursor: pointer;
+  transition: all var(--ease-2) var(--animation-duration-3);
+}
+
+@mixin actionarrow {
+  font-family: "CaGov" !important;
+  content: "\35";
+  // speak: none;
+  position: absolute;
+  right: -0.5rem;
+  top: 1px;
+}
+
+.btn-action-primary {
+  @include actionbutton;
+  border-color: var(--primary-color);
+  background-color: var(--white);
+  width: 100%;
+  .btn-action-title {
+    font-size: var(--font-size-4);
+    font-weight: var(--font-weight-7);
+    color: var(--primary-color);
+    padding-right: var(--s-4);
+    position: relative;
+    display: block;
+    // icon
+    &::after {
+      @include actionarrow;
+    }
+  }
+  .btn-action-text {
+    color: var(--black);
+    font-size: var(--font-size-2);
+    font-weight: var(--font-weight-4);
+    display: block;
+  }
+  &:hover {
+    border-color: var(--primary-dark-color);
+    background-color: var(--gray-100);
+    .btn-action-title {
+      color: var(--primary-dark-color);
+    }
+    .btn-action-text {
+      color: var(--black);
+    }
+  }
+}
+
+// next and previous buttons
+.btn-hover-right,
+.btn-hover-left {
+  position: relative;
+  span.btn-text {
+    cursor: pointer;
+    display: inline-block;
+    transition: var(--animation-duration-5);
+  }
+}
+
+.btn-hover-right span[class*="ca-gov-icon-"] {
+  position: absolute;
+  opacity: 0;
+  top: var(--s-1);
+  right: -4px;
+  transition: var(--animation-duration-5);
+}
+
+.btn-hover-right:hover,
+.btn-hover-right:focus {
+  span.btn-text {
+    padding-right: var(--s-3);
+  }
+  span[class*="ca-gov-icon-"] {
+    opacity: 1;
+    right: var(--s-1);
+  }
+}
+
+.btn-hover-left span[class*="ca-gov-icon-"] {
+  position: absolute;
+  opacity: 0;
+  top: var(--s-1);
+  left: -4px;
+  transition: var(--animation-duration-5);
+}
+
+.btn-hover-left:hover,
+.btn-hover-left:focus {
+  span.btn-text {
+    padding-left: var(--s-3);
+  }
+  span[class*="ca-gov-icon-"] {
+    opacity: 1;
+    left: var(--s-1);
+  }
+}