Changed page-notice__cta to just use btn and btn--secondary

Also added transparent button
eBay · Sep 23, 2019 · 91e5164 · 91e5164
1 parent dfc73ae
commit 91e5164
Show file tree

Hide file tree

Showing 12 changed files with 75 additions and 158 deletions.
diff --git a/dist/button/ds4/button.css b/dist/button/ds4/button.css
@@ -236,6 +236,10 @@ a.fake-btn--delete[aria-disabled="true"] {
   border-color: #999;
   color: #555;
 }
+button.btn--transparent,
+a.fake-btn--transparent {
+  background-color: transparent;
+}
 button.btn,
 a.fake-btn {
   font-size: 0.875rem;

diff --git a/dist/button/ds6/button.css b/dist/button/ds6/button.css
@@ -236,6 +236,10 @@ a.fake-btn--delete[aria-disabled="true"] {
   border-color: #c7c7c7;
   color: #c7c7c7;
 }
+button.btn--transparent,
+a.fake-btn--transparent {
+  background-color: transparent;
+}
 button.btn--primary,
 a.fake-btn--primary {
   font-weight: bold;

diff --git a/dist/notice/ds4/notice.css b/dist/notice/ds4/notice.css
@@ -55,43 +55,6 @@ span.page-notice__cta {
   display: inline-block;
   vertical-align: middle;
 }
-a.page-notice__cta,
-button.page-notice__cta {
-  border: 1px solid;
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-  font-family: inherit;
-  margin: 0;
-  text-align: center;
-  text-decoration: none;
-  vertical-align: bottom;
-  font-size: 0.875rem;
-  background-color: transparent;
-  border-color: #ccc;
-  color: #000;
-  padding: 11px 48px;
-}
-a.page-notice__cta--fixed-height,
-button.page-notice__cta--fixed-height {
-  height: 40px;
-}
-a.page-notice__cta--truncated,
-button.page-notice__cta--truncated {
-  height: 40px;
-}
-a.page-notice__cta--truncated,
-button.page-notice__cta--truncated,
-a.page-notice__cta--truncated span,
-button.page-notice__cta--truncated span {
-  line-height: 1.4em;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-a.page-notice__cta:visited {
-  color: inherit;
-  color: #000;
-}
 .page-notice__close,
 button.page-notice__close {
   background: none;
@@ -317,8 +280,8 @@ svg.page-notice__cta {
   height: 23px;
   width: 13px;
 }
-a.page-notice__cta,
-button.page-notice__cta {
+.page-notice > button.btn,
+.page-notice > a.fake-btn {
   margin: auto 16px;
 }
 .page-notice__content p {

diff --git a/dist/notice/ds6/notice.css b/dist/notice/ds6/notice.css
@@ -55,43 +55,6 @@ span.page-notice__cta {
   display: inline-block;
   vertical-align: middle;
 }
-a.page-notice__cta,
-button.page-notice__cta {
-  border: 1px solid;
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-  font-family: inherit;
-  margin: 0;
-  text-align: center;
-  text-decoration: none;
-  vertical-align: bottom;
-  font-size: 0.875rem;
-  background-color: transparent;
-  border-color: #3665f3;
-  color: #3665f3;
-  padding: 9.5px 16px;
-}
-a.page-notice__cta--fixed-height,
-button.page-notice__cta--fixed-height {
-  height: 40px;
-}
-a.page-notice__cta--truncated,
-button.page-notice__cta--truncated {
-  height: 40px;
-}
-a.page-notice__cta--truncated,
-button.page-notice__cta--truncated,
-a.page-notice__cta--truncated span,
-button.page-notice__cta--truncated span {
-  line-height: 1.4em;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-a.page-notice__cta:visited {
-  color: inherit;
-  color: #3665f3;
-}
 .page-notice__close,
 button.page-notice__close {
   background: none;
@@ -281,6 +244,11 @@ button.flyout-notice__close:hover {
   background-color: #f1f8fe;
   border-color: #3665f3;
 }
+.page-notice > a.fake-btn,
+.page-notice > button.btn {
+  margin: 0 16px 16px;
+  width: 100%;
+}
 .page-notice__status {
   -webkit-box-align: center;
           align-items: center;
@@ -326,11 +294,6 @@ svg.page-notice__cta {
   height: 16px;
   width: 16px;
 }
-a.page-notice__cta,
-button.page-notice__cta {
-  margin: 0 16px 16px;
-  width: 100%;
-}
 span.page-notice__cta,
 svg.page-notice__cta {
   align-self: center;
@@ -357,8 +320,8 @@ svg.page-notice__cta {
   .page-notice {
     flex-wrap: nowrap;
   }
-  a.page-notice__cta,
-  button.page-notice__cta {
+  .page-notice > button.btn,
+  .page-notice > a.fake-btn {
     margin: auto 16px;
     width: auto;
   }

diff --git a/docs/_includes/common/notice.html b/docs/_includes/common/notice.html
@@ -137,7 +137,7 @@ <h5 class="page-notice__status">
                     <p>Congrats! You are the highest bidder!</p>
                     <p>Click the button to go to the next page</p>
                 </span>
-                <button class="page-notice__cta">Button</button>
+                <button class="btn btn--secondary btn--transparent">Button</button>
             </section>
          </div>
      </div>
@@ -151,7 +151,7 @@ <h2 class="page-notice__status">
         <p>Congrats! You are the highest bidder!</p>
         <p>Click the button to go to the next page</p>
     </span>
-    <button class="page-notice__cta">Button</button>
+    <button class="btn btn--secondary btn--transparent">Button</button>
 </section>
      {% endhighlight %}
 
@@ -190,7 +190,7 @@ <h4 class="page-notice__status" id="attention-status">
                     <p>This is a message that provides more info about the page </p>
                     <p>With an action button</p>
                 </div>
-                <button class="page-notice__cta">Button</button>
+                <button class="btn btn--secondary btn--transparent">Button</button>
             </section>
 
             <section aria-labelledby="information-status" class="page-notice page-notice--information page-notice--guidance" role="region">
@@ -200,7 +200,7 @@ <h4 class="page-notice__status" id="information-status">
                 <div class="page-notice__content">
                     <p><strong>Good news!</strong> You get free shipping on your next pair of shoes! <a href="#">Learn more</a>.</p>
                 </div>
-                <button class="page-notice__cta">Button</button>
+                <button class="btn btn--secondary btn--transparent">Button</button>
             </section>
 
         </div>
@@ -236,7 +236,7 @@ <h4 class="page-notice__status" id="attention-status">
         <p>This is a message that provides more info about the page </p>
         <p>With an action button</p>
     </div>
-    <button class="page-notice__cta">Button</button>
+    <button class="btn btn--secondary btn--transparent">Button</button>
 </section>
 
 <section aria-labelledby="information-status" class="page-notice page-notice--information page-notice--guidance" role="region">
@@ -246,7 +246,7 @@ <h4 class="page-notice__status" id="information-status">
     <div class="page-notice__content">
         <p><strong>Good news!</strong> You get free shipping on your next pair of shoes! <a href="#">Learn more</a>.</p>
     </div>
-    <button class="page-notice__cta">Button</button>
+    <button class="btn btn--secondary btn--transparent">Button</button>
 </section>
     {% endhighlight %}