kemko/nomad
1
0
Fork 0
mirror of https://github.com/kemko/nomad.git synced 2026-01-03 08:55:43 +03:00
Code Issues Packages Projects Releases Wiki Activity

Disabled button styles

Browse Source
This commit is contained in:
Michael Lange
2020-01-29 10:50:14 -08:00
parent 35a95177c6
commit 29c3cdaeb6
2 changed files with 64 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
ui/app/styles/core/buttons.scss
View File

@@ -43,6 +43,17 @@ $button-box-shadow-standard: 0 2px 0 0 rgba($grey, 0.2);
box-shadow: none;
}
&.is-disabled {
opacity: 0.7;
box-shadow: none;
cursor: not-allowed;
border-color: transparent;
&:hover {
border-color: transparent;
}
}
@each $name, $pair in $colors {
$color: nth($pair, 1);
$color-invert: nth($pair, 2);
@@ -116,6 +127,24 @@ $button-box-shadow-standard: 0 2px 0 0 rgba($grey, 0.2);
box-shadow: none;
}
}
// The is-disabled styles MUST trump other modifier specificites
&.is-disabled {
background-color: $color;
border-color: darken($color, 5%);
box-shadow: none;
&:hover,
&:active,
&:focus,
&.is-hovered,
&.is-active,
&.is-focused {
background-color: $color;
border-color: darken($color, 5%);
box-shadow: none;
}
}
}
}

36
ui/stories/components/buttons.stories.js
View File

@@ -75,7 +75,7 @@ export let Sizes = () => {
export let Disabled = () => {
return {
template: hbs`
<h5 class="title is-5">Buttons</h5>
<h5 class="title is-5">Anchor elements as buttons</h5>
<div class="block">
<a class="button is-disabled">Button</a>
<a class="button is-white is-disabled">White</a>
@@ -91,6 +91,40 @@ export let Disabled = () => {
<a class="button is-warning is-disabled">Warning</a>
<a class="button is-danger is-disabled">Danger</a>
</div>
<h5 class="title is-5">Button elements with <code>disabled</code> attribute</h5>
<div class="block">
<button class="button is-disabled" disabled>Button</button>
<button class="button is-white is-disabled" disabled>White</button>
<button class="button is-light is-disabled" disabled>Light</button>
<button class="button is-dark is-disabled" disabled>Dark</button>
<button class="button is-black is-disabled" disabled>Black</button>
<button class="button is-link is-disabled" disabled>Link</button>
</div>
<div class="block">
<button class="button is-primary is-disabled" disabled>Primary</button>
<button class="button is-info is-disabled" disabled>Info</button>
<button class="button is-success is-disabled" disabled>Success</button>
<button class="button is-warning is-disabled" disabled>Warning</button>
<button class="button is-danger is-disabled" disabled>Danger</button>
</div>
<h5 class="title is-5">Button elements with <code>aria-disabled="true"</code></h5>
<div class="block">
<button class="button is-disabled" aria-disabled="true">Button</button>
<button class="button is-white is-disabled" aria-disabled="true">White</button>
<button class="button is-light is-disabled" aria-disabled="true">Light</button>
<button class="button is-dark is-disabled" aria-disabled="true">Dark</button>
<button class="button is-black is-disabled" aria-disabled="true">Black</button>
<button class="button is-link is-disabled" aria-disabled="true">Link</button>
</div>
<div class="block">
<button class="button is-primary is-disabled" aria-disabled="true">Primary</button>
<button class="button is-info is-disabled" aria-disabled="true">Info</button>
<button class="button is-success is-disabled" aria-disabled="true">Success</button>
<button class="button is-warning is-disabled" aria-disabled="true">Warning</button>
<button class="button is-danger is-disabled" aria-disabled="true">Danger</button>
</div>
`,
};
};