library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2025-01-09 15:44:25 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix disabled buttons

Browse Source
This commit is contained in:
Jeremy Thomas 2017-03-31 22:25:53 +01:00
parent ff2a561c7e
commit 2c6aabcde7
8 changed files with 684 additions and 1299 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1892
docs/css/bulma-docs.css
View File

File diff suppressed because it is too large Load Diff

19
docs/documentation/elements/button.html
View File

@ -239,16 +239,21 @@ doc-subtab: button
<h4 class="subtitle">Disabled</h4>
{% capture button_disabled_example %}
<a class="button is-disabled">Disabled</a>
<a class="button is-primary is-disabled">Disabled</a>
<a class="button is-info is-disabled">Disabled</a>
<a class="button is-success is-disabled">Disabled</a>
<a class="button is-warning is-disabled">Disabled</a>
<a class="button is-danger is-disabled">Disabled</a>
<a class="button" title="Disabled button" disabled>Disabled</a>
<a class="button is-primary" title="Disabled button" disabled>Disabled</a>
<a class="button is-info" title="Disabled button" disabled>Disabled</a>
<a class="button is-success" title="Disabled button" disabled>Disabled</a>
<a class="button is-warning" title="Disabled button" disabled>Disabled</a>
<a class="button is-danger" title="Disabled button" disabled>Disabled</a>
{% endcapture %}
<div class="columns">
<div class="column">
{{button_disabled_example}}
<div class="block">{{button_disabled_example}}</div>
<div class="message is-danger">
<div class="message-body">
<p>The <code>is-disabled</code> CSS class has been deprecated in favor of the <code>disabled</code> HTML attribute. <a href="https://github.com/jgthms/bulma/issues/276">Learn more</a></p>
</div>
</div>
</div>
<div class="column">
{% highlight html %}

3
sass/base/helpers.sass
View File

@ -103,9 +103,6 @@ $displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
// Other
.is-disabled
pointer-events: none
.is-marginless
margin: 0 !important

4
sass/components/pagination.sass
View File

@ -64,12 +64,10 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
border-color: $pagination-focus-border
&:active
box-shadow: $pagination-shadow-inset
&[disabled],
&.is-disabled
&[disabled]
background: $pagination-disabled-background
color: $pagination-disabled
opacity: 0.5
pointer-events: none
.pagination-previous,
.pagination-next

29
sass/elements/button.sass
View File

@ -81,6 +81,10 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default
&.is-active
background-color: $background
color: $text-strong
&[disabled]
background-color: transparent
border-color: transparent
box-shadow: none
@each $name, $pair in $colors
$color: nth($pair, 1)
$color-invert: nth($pair, 2)
@ -104,11 +108,20 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default
border-color: transparent
box-shadow: $button-shadow-inset
color: $color-invert
&[disabled]
background-color: $color
border-color: transparent
box-shadow: none
&.is-inverted
background-color: $color-invert
color: $color
&:hover
background-color: darken($color-invert, 5%)
&[disabled]
background-color: $color-invert
border-color: transparent
box-shadow: none
color: $color
&.is-loading
&:after
border-color: transparent transparent $color-invert $color-invert !important
@ -124,6 +137,11 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default
&.is-loading
&:after
border-color: transparent transparent $color $color !important
&[disabled]
background-color: transparent
border-color: $color
box-shadow: none
color: $color
&.is-inverted.is-outlined
background-color: transparent
border-color: $color-invert
@ -132,6 +150,11 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default
&:focus
background-color: $color-invert
color: $color
&[disabled]
background-color: transparent
border-color: $color-invert
box-shadow: none
color: $color-invert
// Sizes
&.is-small
+button-small
@ -140,8 +163,10 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default
&.is-large
+button-large
// Modifiers
&[disabled],
&.is-disabled
&[disabled]
background-color: $button-background
border-color: $button-border
box-shadow: none
opacity: 0.5
&.is-fullwidth
display: flex

28
sass/elements/form.sass
View File

@ -32,8 +32,7 @@ $input-radius: $radius !default
&:active,
&.is-active
border-color: $input-focus-border
&[disabled],
&.is-disabled
&[disabled]
background-color: $input-disabled-background
border-color: $input-disabled-border
box-shadow: none
@ -93,11 +92,8 @@ $input-radius: $radius !default
margin-right: 0.5em
&:hover
color: $input-hover
&.is-disabled
&[disabled]
color: $input-disabled
pointer-events: none
input
pointer-events: none
.radio
& + .radio
@ -292,33 +288,13 @@ $input-radius: $radius !default
&:not(.has-icon-right)
.icon
left: 0
// transform: translateX(-50%) translateY(-50%)
.input
padding-left: 2.25em
// &.is-small
// & + .icon
// left: ($size-small * 2.5) / 2
// &.is-medium
// & + .icon
// left: ($size-medium * 2.5) / 2
// &.is-large
// & + .icon
// left: ($size-large * 2.5) / 2
&.has-icon-right
.icon
right: 0
// transform: translateX(50%) translateY(-50%)
.input
padding-right: 2.25em
// &.is-small
// & + .icon
// right: ($size-small * 2.5) / 2
// &.is-medium
// & + .icon
// right: ($size-medium * 2.5) / 2
// &.is-large
// & + .icon
// right: ($size-large * 2.5) / 2
&.is-loading
&:after
+loader

3
sass/elements/notification.sass
View File

@ -4,6 +4,9 @@
border-radius: $radius
padding: 1.25rem 2.5rem 1.25rem 1.5rem
position: relative
a
color: currentColor
text-decoration: underline
code,
pre
background: $white

5
sass/utilities/controls.sass
View File

@ -25,9 +25,8 @@ $control-radius-small: $radius-small !default
&:active,
&.is-active
outline: none
&[disabled],
&.is-disabled
pointer-events: none
&[disabled]
cursor: not-allowed
// The controls sizes use mixins so they can be used at different breakpoints
=control-small