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

Implement disabled button style + example to style guide #3458

Merged
merged 6 commits into from Jul 31, 2019
Merged

Implement disabled button style + example to style guide #3458

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
52e2c02
Implement disabled button style + example to style guide
mmmavis Jul 27, 2019
a8fa5ba
Merge branch 'master' into issue-3320-disabled-button-style
mmmavis Jul 30, 2019
b226074
remove extra selector
mmmavis Jul 31, 2019
4fb2815
Merge branch 'master' into issue-3320-disabled-button-style
mmmavis Jul 31, 2019
bc6a5e9
Merge branch 'issue-3320-disabled-button-style' of https://github.com…
mmmavis Jul 31, 2019
eb914d2
Merge branch 'master' into issue-3320-disabled-button-style
mmmavis Jul 31, 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
20 changes: 19 additions & 1 deletion network-api/networkapi/wagtailpages/templates/wagtailpages/static/styleguide.html
View file
Open in desktop
Expand Up @@ -249,28 +249,37 @@ <h3 class="h2-heading mt-5">Default</h3>
<div class="mb-5">
<div class="my-2">
<button class="btn btn-primary">.btn-primary on <xmp class="d-inline"><button></xmp></button>
<button class="btn btn-primary" disabled>disabled .btn-primary on <xmp class="d-inline"><button></xmp></button>
</div>
<div class="my-2">
<a class="btn btn-primary" href="">.btn-primary on <xmp class="d-inline"><a></xmp></a>
<a class="btn btn-primary" disabled href="">disabled .btn-primary on <xmp class="d-inline"><a></xmp></a>
</div>
</div>

<div class="mb-5">
<div class="my-2">
<button class="btn btn-secondary">.btn-secondary on <xmp class="d-inline"><button></xmp></button>
<button class="btn btn-secondary" disabled>disabled .btn-secondary on <xmp class="d-inline"><button></xmp></button>
</div>
<div class="my-2">
<a class="btn btn-secondary" href="">.btn-secondary on <xmp class="d-inline"><a></xmp></a>
<a class="btn btn-secondary" disabled href="">disabled .btn-secondary on <xmp class="d-inline"><a></xmp></a>
</div>
<div class="my-2">
<a class="btn btn-secondary" href="https://example.com">.btn-secondary on <xmp class="d-inline my-0 mx-1"><a></xmp> with external link</a>
<a class="btn btn-secondary" disabled href="https://example.com">disabled .btn-secondary on <xmp class="d-inline my-0 mx-1"><a></xmp> with external link</a>
</div>
</div>

<div>
<div class="my-2">
<button class="btn btn-pop">.btn-pop on <xmp class="d-inline"><button></xmp></button>
<button class="btn btn-pop" disabled>disabled .btn-pop on <xmp class="d-inline"><button></xmp></button>
</div>
<div class="my-2">
<a class="btn btn-pop" href="">.btn-pop on <xmp class="d-inline"><a></xmp></a>
<a class="btn btn-pop" href="" disabled>disabled .btn-pop on <xmp class="d-inline"><a></xmp></a>
</div>
</div>

Expand All @@ -281,28 +290,37 @@ <h3 class="h2-heading mt-5">Dark Theme</h3>
<div class="mb-5">
<div class="my-2">
<button class="btn btn-primary">.btn-primary on <xmp class="d-inline"><button></xmp></button>
<button class="btn btn-primary" disabled>disabled .btn-primary on <xmp class="d-inline"><button></xmp></button>
</div>
<div class="my-2">
<a class="btn btn-primary" href="">.btn-primary on <xmp class="d-inline"><a></xmp></a>
<a class="btn btn-primary" href="" disabled>disabled .btn-primary on <xmp class="d-inline"><a></xmp></a>
</div>
</div>

<div class="mb-5">
<div class="my-2">
<button class="btn btn-secondary">.btn-secondary on <xmp class="d-inline"><button></xmp></button>
<button class="btn btn-secondary" disabled>disabled .btn-secondary on <xmp class="d-inline"><button></xmp></button>
</div>
<div class="my-2">
<a class="btn btn-secondary" href="">.btn-secondary on <xmp class="d-inline"><a></xmp></a>
<a class="btn btn-secondary" href="https://example.com">on <xmp class="d-inline my-0 mx-1"><a></xmp> with external link</a>
<a class="btn btn-secondary" disabled href="">disabled .btn-secondary on <xmp class="d-inline"><a></xmp></a>
</div>
<div class="my-2">
<a class="btn btn-secondary" href="https://example.com">.btn-secondary on <xmp class="d-inline my-0 mx-1"><a></xmp> with external link</a>
<a class="btn btn-secondary" disabled href="https://example.com">disabled .btn-secondary on <xmp class="d-inline my-0 mx-1"><a></xmp> with external link</a>
</div>
</div>

<div>
<div class="my-2">
<button class="btn btn-pop">.btn-pop on <xmp class="d-inline"><button></xmp></button>
<button class="btn btn-pop" disabled>disabled .btn-pop on <xmp class="d-inline"><button></xmp></button>
</div>
<div class="my-2">
<a class="btn btn-pop" href="">.btn-pop on <xmp class="d-inline"><a></xmp></a>
<a class="btn btn-pop" href="" disabled>disabled .btn-pop on <xmp class="d-inline"><a></xmp></a>
</div>
</div>
</div>
Expand Down
11 changes: 11 additions & 0 deletions source/sass/buttons.scss
View file
Open in desktop
Expand Up @@ -142,6 +142,17 @@
}
}

button[disabled],
.btn[disabled] {
cursor: not-allowed;
pointer-events: none;
opacity: 0.3;

@at-root .dark-theme & {
opacity: 0.5;
}
}

.form-control {
border-radius: 0;
}