Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 3 commits into from Sep 24, 2019
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
aaa3bf8
Changed page-notice__cta to just use btn and btn--secondary
agliga Sep 23, 2019
850b13a
Added button dependencies to notice
agliga Sep 23, 2019
b9db5f0
Removed extra /
agliga Sep 24, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 4 additions & 0 deletions dist/button/ds4/button.css
View file
Open in desktop
Expand Up @@ -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;
Expand Down
4 changes: 4 additions & 0 deletions dist/button/ds6/button.css
View file
Open in desktop
Expand Up @@ -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;
Expand Down
41 changes: 2 additions & 39 deletions dist/notice/ds4/notice.css
View file
Open in desktop
Expand Up @@ -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;
Expand Down Expand Up @@ -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 {
Expand Down
51 changes: 7 additions & 44 deletions dist/notice/ds6/notice.css
View file
Open in desktop
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand All @@ -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;
}
Expand Down
12 changes: 6 additions & 6 deletions docs/_includes/common/notice.html
View file
Open in desktop
Expand Up @@ -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>
Expand All @@ -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 %}

Expand Down Expand Up @@ -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">
Expand All @@ -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>
Expand Down Expand Up @@ -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">
Expand All @@ -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 %}

Expand Down