library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-11-14 11:14:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add focus variables

Browse Source
This commit is contained in:
Jeremy Thomas 2017-08-30 17:29:01 +01:00
parent 2b2e00066d
commit cda59a3101
5 changed files with 753 additions and 1917 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
CHANGELOG.md
View File

@ -2,9 +2,14 @@
## 0.5.2
### New features
* Added `$button-focus-box-shadow-size` and `$button-focus-box-shadow-color` for customization
* Added `$input-focus-box-shadow-size` and `$input-focus-box-shadow-color` for customization
### Issues closed
* #1063 `$family-primary` customisation
* #1063 `$family-primary` customization
## 0.5.1

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

File diff suppressed because it is too large Load Diff

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

@ -18,6 +18,10 @@ variables:
value: $link-focus
- name: $button-focus-border-color
value: $link-focus-border
- name: $button-focus-box-shadow-size
value: 0 0 0 0.125em
- name: $button-focus-box-shadow-color
value: rgba($link, 0.25)
- name: $button-active-color
value: $link-active
- name: $button-active-border-color
@ -50,6 +54,13 @@ variables:
<a class="button">Button</a>
{% endcapture %}
{% capture button_tags_example %}
<a class="button">Anchor</a>
<button class="button">Button</button>
<input class="button" type="submit" value="Submit input">
<input class="button" type="reset" value="Reset input">
{% endcapture %}
{% capture button_colors_a_example %}
<a class="button is-white">White</a>
<a class="button is-light">Light</a>
@ -408,6 +419,12 @@ variables:
<hr>
<div class="content">
<p>
The <strong>button</strong> is an essential element of any design. It's meant to look an behave as an <strong>interactive</strong> element of your page.
</p>
</div>
<div class="columns">
<div class="column">
{{button_example}}
@ -417,6 +434,35 @@ variables:
</div>
</div>
<div class="content">
<p>
The <code>.button</code> class can be used on:
</p>
<ul>
<li>
<code>&lt;a&gt;</code> anchor links
</li>
<li>
<code>&lt;button&gt;</code> form buttons
</li>
<li>
<code>&lt;input type="submit"&gt;</code> submit inputs
</li>
<li>
<code>&lt;input type="reset"&gt;</code> reset inputs
</li>
</ul>
</div>
<div class="columns">
<div class="column">
{{button_tags_example}}
</div>
<div class="column">
{% highlight html %}{{button_tags_example}}{% endhighlight %}
</div>
</div>
{% include anchor.html name="Colors" %}
<div class="columns">

18
sass/elements/button.sass
View File

@ -7,6 +7,8 @@ $button-hover-border-color: $link-hover-border !default
$button-focus-color: $link-focus !default
$button-focus-border-color: $link-focus-border !default
$button-focus-box-shadow-size: 0 0 0 0.125em !default
$button-focus-box-shadow-color: rgba($link, 0.25) !default
$button-active-color: $link-active !default
$button-active-border-color: $link-active-border !default
@ -24,8 +26,6 @@ $button-static-color: $grey !default
$button-static-background-color: $white-ter !default
$button-static-border-color: $grey-lighter !default
$button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default
// The button sizes use mixins so they can be used at different breakpoints
=button-small
border-radius: $radius-small
@ -73,12 +73,12 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default
&:focus,
&.is-focused
border-color: $button-focus-border-color
// box-shadow: 0 0 0.5em rgba($button-focus-border-color, 0.25)
color: $button-focus-color
&:not(:active)
box-shadow: $button-focus-box-shadow-size $button-focus-box-shadow-color
&:active,
&.is-active
border-color: $button-active-border-color
box-shadow: $button-shadow-inset
color: $button-active-color
// Colors
&.is-link
@ -89,10 +89,12 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default
&:hover,
&.is-hovered,
&:focus,
&.is-focused,
&.is-focused
background-color: $button-link-hover-background-color
color: $button-link-hover-color
&:active,
&.is-active
background-color: $button-link-hover-background-color
background-color: darken($button-link-hover-background-color, 5%)
color: $button-link-hover-color
&[disabled]
background-color: transparent
@ -113,13 +115,13 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default
&:focus,
&.is-focused
border-color: transparent
box-shadow: 0 0 0.5em rgba($color, 0.25)
color: $color-invert
&:not(:active)
box-shadow: $button-focus-box-shadow-size rgba($color, 0.25)
&:active,
&.is-active
background-color: darken($color, 5%)
border-color: transparent
box-shadow: $button-shadow-inset
color: $color-invert
&[disabled]
background-color: $color

15
sass/elements/form.sass
View File

@ -8,6 +8,8 @@ $input-hover-border-color: $grey-light !default
$input-focus-color: $grey-darker !default
$input-focus-border-color: $link !default
$input-focus-box-shadow-size: 0 0 0 0.125em !default
$input-focus-box-shadow-color: rgba($link, 0.25) !default
$input-disabled-color: $text-light !default
$input-disabled-background-color: $background !default
@ -51,6 +53,7 @@ $help-size: $size-small !default
&:active,
&.is-active
border-color: $input-focus-border-color
box-shadow: $input-focus-box-shadow-size $input-focus-box-shadow-color
&[disabled]
background-color: $input-disabled-background-color
border-color: $input-disabled-border-color
@ -140,13 +143,6 @@ $help-size: $size-small !default
font-size: 1em
max-width: 100%
outline: none
&:hover
border-color: $input-hover-border-color
&:focus,
&.is-focused,
&:active,
&.is-active
border-color: $input-focus-border-color
&::-ms-expand
display: none
&[disabled]:hover
@ -167,6 +163,11 @@ $help-size: $size-small !default
$color: nth($pair, 1)
&.is-#{$name} select
border-color: $color
&:focus,
&.is-focused,
&:active,
&.is-active
box-shadow: $input-focus-box-shadow-size rgba($color, 0.25)
// Sizes
&.is-small
+control-small