diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html index dc9a5de9..410384d3 100644 --- a/docs/_layouts/default.html +++ b/docs/_layouts/default.html @@ -3,6 +3,5 @@ {% include head.html %} {{ content }} - {% include footer.html %} diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index 2466c0c8..ce6e2a03 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -575,13 +575,11 @@ a.box:active { -moz-appearance: none; -webkit-appearance: none; align-items: center; - background-color: white; - border: 1px solid #dbdbdb; + border: none; border-radius: 3px; box-shadow: none; - color: #363636; display: inline-flex; - font-size: 16px; + font-size: 1em; height: 2.5em; justify-content: flex-start; line-height: 1.5; @@ -602,38 +600,14 @@ a.box:active { white-space: nowrap; } -.button:hover { - border-color: #b5b5b5; -} - -.button:active, .button:focus, .button.is-active { - border-color: #00d1b2; +.button:focus, .button.is-focused, .button:active, .button.is-active { outline: none; } .button[disabled], .button.is-disabled { - background-color: whitesmoke; - border-color: #dbdbdb; - cursor: not-allowed; pointer-events: none; } -.button[disabled]::-moz-placeholder, .button.is-disabled::-moz-placeholder { - color: rgba(54, 54, 54, 0.3); -} - -.button[disabled]::-webkit-input-placeholder, .button.is-disabled::-webkit-input-placeholder { - color: rgba(54, 54, 54, 0.3); -} - -.button[disabled]:-moz-placeholder, .button.is-disabled:-moz-placeholder { - color: rgba(54, 54, 54, 0.3); -} - -.button[disabled]:-ms-input-placeholder, .button.is-disabled:-ms-input-placeholder { - color: rgba(54, 54, 54, 0.3); -} - .button strong { color: inherit; } @@ -650,12 +624,33 @@ a.box:active { margin-right: -2px; } -.button:hover, .button:focus, .button.is-active { +.button:hover, .button.is-hovered { + border-color: #b5b5b5; color: #363636; } -.button:active { +.button:focus, .button.is-focused { + border-color: #00d1b2; + box-shadow: 0 0 0.5em rgba(0, 209, 178, 0.5); + color: #363636; +} + +.button:active, .button.is-active { + border-color: #4a4a4a; box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2); + color: #363636; +} + +.button.is-link { + background-color: transparent; + border-width: 0; + color: #4a4a4a; + text-decoration: underline; +} + +.button.is-link:hover, .button.is-link.is-hovered, .button.is-link:focus, .button.is-link.is-focused, .button.is-link:active, .button.is-link.is-active { + background-color: whitesmoke; + color: #363636; } .button.is-white { @@ -664,9 +659,22 @@ a.box:active { color: #0a0a0a; } -.button.is-white:hover, .button.is-white:focus, .button.is-white.is-active { +.button.is-white:hover, .button.is-white.is-hovered { + background-color: #f9f9f9; + border-color: transparent; + color: #0a0a0a; +} + +.button.is-white:focus, .button.is-white.is-focused { + border-color: transparent; + box-shadow: 0 0 0.5em rgba(255, 255, 255, 0.5); + color: #0a0a0a; +} + +.button.is-white:active, .button.is-white.is-active { background-color: #f2f2f2; border-color: transparent; + box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2); color: #0a0a0a; } @@ -702,9 +710,22 @@ a.box:active { color: white; } -.button.is-black:hover, .button.is-black:focus, .button.is-black.is-active { +.button.is-black:hover, .button.is-black.is-hovered { + background-color: #040404; + border-color: transparent; + color: white; +} + +.button.is-black:focus, .button.is-black.is-focused { + border-color: transparent; + box-shadow: 0 0 0.5em rgba(10, 10, 10, 0.5); + color: white; +} + +.button.is-black:active, .button.is-black.is-active { background-color: black; border-color: transparent; + box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2); color: white; } @@ -740,9 +761,22 @@ a.box:active { color: #363636; } -.button.is-light:hover, .button.is-light:focus, .button.is-light.is-active { +.button.is-light:hover, .button.is-light.is-hovered { + background-color: #eeeeee; + border-color: transparent; + color: #363636; +} + +.button.is-light:focus, .button.is-light.is-focused { + border-color: transparent; + box-shadow: 0 0 0.5em rgba(245, 245, 245, 0.5); + color: #363636; +} + +.button.is-light:active, .button.is-light.is-active { background-color: #e8e8e8; border-color: transparent; + box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2); color: #363636; } @@ -778,9 +812,22 @@ a.box:active { color: whitesmoke; } -.button.is-dark:hover, .button.is-dark:focus, .button.is-dark.is-active { +.button.is-dark:hover, .button.is-dark.is-hovered { + background-color: #2f2f2f; + border-color: transparent; + color: whitesmoke; +} + +.button.is-dark:focus, .button.is-dark.is-focused { + border-color: transparent; + box-shadow: 0 0 0.5em rgba(54, 54, 54, 0.5); + color: whitesmoke; +} + +.button.is-dark:active, .button.is-dark.is-active { background-color: #292929; border-color: transparent; + box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2); color: whitesmoke; } @@ -816,9 +863,22 @@ a.box:active { color: white; } -.button.is-primary:hover, .button.is-primary:focus, .button.is-primary.is-active { +.button.is-primary:hover, .button.is-primary.is-hovered { + background-color: #00c4a7; + border-color: transparent; + color: white; +} + +.button.is-primary:focus, .button.is-primary.is-focused { + border-color: transparent; + box-shadow: 0 0 0.5em rgba(0, 209, 178, 0.5); + color: white; +} + +.button.is-primary:active, .button.is-primary.is-active { background-color: #00b89c; border-color: transparent; + box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2); color: white; } @@ -854,9 +914,22 @@ a.box:active { color: white; } -.button.is-info:hover, .button.is-info:focus, .button.is-info.is-active { +.button.is-info:hover, .button.is-info.is-hovered { + background-color: #276cda; + border-color: transparent; + color: white; +} + +.button.is-info:focus, .button.is-info.is-focused { + border-color: transparent; + box-shadow: 0 0 0.5em rgba(50, 115, 220, 0.5); + color: white; +} + +.button.is-info:active, .button.is-info.is-active { background-color: #2366d1; border-color: transparent; + box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2); color: white; } @@ -892,9 +965,22 @@ a.box:active { color: white; } -.button.is-success:hover, .button.is-success:focus, .button.is-success.is-active { +.button.is-success:hover, .button.is-success.is-hovered { + background-color: #22c65b; + border-color: transparent; + color: white; +} + +.button.is-success:focus, .button.is-success.is-focused { + border-color: transparent; + box-shadow: 0 0 0.5em rgba(35, 209, 96, 0.5); + color: white; +} + +.button.is-success:active, .button.is-success.is-active { background-color: #20bc56; border-color: transparent; + box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2); color: white; } @@ -930,9 +1016,22 @@ a.box:active { color: rgba(0, 0, 0, 0.7); } -.button.is-warning:hover, .button.is-warning:focus, .button.is-warning.is-active { +.button.is-warning:hover, .button.is-warning.is-hovered { + background-color: #ffdb4a; + border-color: transparent; + color: rgba(0, 0, 0, 0.7); +} + +.button.is-warning:focus, .button.is-warning.is-focused { + border-color: transparent; + box-shadow: 0 0 0.5em rgba(255, 221, 87, 0.5); + color: rgba(0, 0, 0, 0.7); +} + +.button.is-warning:active, .button.is-warning.is-active { background-color: #ffd83d; border-color: transparent; + box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2); color: rgba(0, 0, 0, 0.7); } @@ -968,9 +1067,22 @@ a.box:active { color: white; } -.button.is-danger:hover, .button.is-danger:focus, .button.is-danger.is-active { +.button.is-danger:hover, .button.is-danger.is-hovered { + background-color: #ff2b56; + border-color: transparent; + color: white; +} + +.button.is-danger:focus, .button.is-danger.is-focused { + border-color: transparent; + box-shadow: 0 0 0.5em rgba(255, 56, 96, 0.5); + color: white; +} + +.button.is-danger:active, .button.is-danger.is-active { background-color: #ff1f4b; border-color: transparent; + box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2); color: white; } @@ -1000,18 +1112,6 @@ a.box:active { color: white; } -.button.is-link { - background-color: transparent; - border-width: 0; - color: #4a4a4a; - text-decoration: underline; -} - -.button.is-link:hover, .button.is-link:focus { - background-color: whitesmoke; - color: #363636; -} - .button.is-small { border-radius: 2px; font-size: 0.875rem; @@ -1047,9 +1147,9 @@ a.box:active { border-top-color: transparent; content: ""; display: block; - height: 16px; + height: 1rem; position: relative; - width: 16px; + width: 1rem; left: 50%; margin-left: -8px; margin-top: -8px; @@ -1188,13 +1288,11 @@ a.box:active { -moz-appearance: none; -webkit-appearance: none; align-items: center; - background-color: white; - border: 1px solid #dbdbdb; + border: none; border-radius: 3px; box-shadow: none; - color: #363636; display: inline-flex; - font-size: 16px; + font-size: 1em; height: 2.5em; justify-content: flex-start; line-height: 1.5; @@ -1202,33 +1300,51 @@ a.box:active { padding-right: 0.75em; position: relative; vertical-align: top; + background-color: white; + border: 1px solid #dbdbdb; + color: #363636; box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.1); max-width: 100%; width: 100%; } -.input:hover, -.textarea:hover { - border-color: #b5b5b5; -} - -.input:active, .input:focus, .input.is-active, -.textarea:active, +.input:focus, .input.is-focused, .input:active, .input.is-active, .textarea:focus, +.textarea.is-focused, +.textarea:active, .textarea.is-active { - border-color: #00d1b2; outline: none; } .input[disabled], .input.is-disabled, .textarea[disabled], .textarea.is-disabled { - background-color: whitesmoke; - border-color: #dbdbdb; - cursor: not-allowed; pointer-events: none; } +.input:hover, .input.is-hovered, +.textarea:hover, +.textarea.is-hovered { + border-color: #b5b5b5; +} + +.input:focus, .input.is-focused, .input:active, .input.is-active, +.textarea:focus, +.textarea.is-focused, +.textarea:active, +.textarea.is-active { + border-color: #00d1b2; +} + +.input[disabled], .input.is-disabled, +.textarea[disabled], +.textarea.is-disabled { + background-color: whitesmoke; + border-color: whitesmoke; + box-shadow: none; + color: #7a7a7a; +} + .input[disabled]::-moz-placeholder, .input.is-disabled::-moz-placeholder, .textarea[disabled]::-moz-placeholder, .textarea.is-disabled::-moz-placeholder { @@ -1253,6 +1369,11 @@ a.box:active { color: rgba(54, 54, 54, 0.3); } +.input[type="search"], +.textarea[type="search"] { + border-radius: 290486px; +} + .input.is-white, .textarea.is-white { border-color: white; @@ -1298,11 +1419,6 @@ a.box:active { border-color: #ff3860; } -.input[type="search"], -.textarea[type="search"] { - border-radius: 290486px; -} - .input.is-small, .textarea.is-small { border-radius: 2px; @@ -1333,7 +1449,7 @@ a.box:active { .textarea { display: block; - line-height: 1.2; + line-height: 1.25; max-height: 600px; max-width: 100%; min-height: 120px; @@ -1344,9 +1460,11 @@ a.box:active { .checkbox, .radio { + align-items: center; cursor: pointer; - display: inline-block; - line-height: 1em; + display: inline-flex; + flex-wrap: wrap; + justify-content: flex-start; position: relative; vertical-align: top; } @@ -1354,6 +1472,7 @@ a.box:active { .checkbox input, .radio input { cursor: pointer; + margin-right: 0.5em; } .checkbox:hover, @@ -1363,7 +1482,7 @@ a.box:active { .checkbox.is-disabled, .radio.is-disabled { - color: #dbdbdb; + color: #7a7a7a; pointer-events: none; } @@ -1383,17 +1502,32 @@ a.box:active { vertical-align: top; } +.select:after { + border: 1px solid #00d1b2; + border-right: 0; + border-top: 0; + content: " "; + display: block; + height: 0.5em; + pointer-events: none; + position: absolute; + transform: rotate(-45deg); + width: 0.5em; + margin-top: -0.375em; + right: 1.125em; + top: 50%; + z-index: 4; +} + .select select { -moz-appearance: none; -webkit-appearance: none; align-items: center; - background-color: white; - border: 1px solid #dbdbdb; + border: none; border-radius: 3px; box-shadow: none; - color: #363636; display: inline-flex; - font-size: 16px; + font-size: 1em; height: 2.5em; justify-content: flex-start; line-height: 1.5; @@ -1401,28 +1535,39 @@ a.box:active { padding-right: 0.75em; position: relative; vertical-align: top; + background-color: white; + border: 1px solid #dbdbdb; + color: #363636; cursor: pointer; display: block; + font-size: 1em; outline: none; padding-right: 2.5em; } -.select select:hover { - border-color: #b5b5b5; -} - -.select select:active, .select select:focus, .select select.is-active { - border-color: #00d1b2; +.select select:focus, .select select.is-focused, .select select:active, .select select.is-active { outline: none; } .select select[disabled], .select select.is-disabled { - background-color: whitesmoke; - border-color: #dbdbdb; - cursor: not-allowed; pointer-events: none; } +.select select:hover, .select select.is-hovered { + border-color: #b5b5b5; +} + +.select select:focus, .select select.is-focused, .select select:active, .select select.is-active { + border-color: #00d1b2; +} + +.select select[disabled], .select select.is-disabled { + background-color: whitesmoke; + border-color: whitesmoke; + box-shadow: none; + color: #7a7a7a; +} + .select select[disabled]::-moz-placeholder, .select select.is-disabled::-moz-placeholder { color: rgba(54, 54, 54, 0.3); } @@ -1439,42 +1584,6 @@ a.box:active { color: rgba(54, 54, 54, 0.3); } -.select select.is-white { - border-color: white; -} - -.select select.is-black { - border-color: #0a0a0a; -} - -.select select.is-light { - border-color: whitesmoke; -} - -.select select.is-dark { - border-color: #363636; -} - -.select select.is-primary { - border-color: #00d1b2; -} - -.select select.is-info { - border-color: #3273dc; -} - -.select select.is-success { - border-color: #23d160; -} - -.select select.is-warning { - border-color: #ffdd57; -} - -.select select.is-danger { - border-color: #ff3860; -} - .select select:hover { border-color: #b5b5b5; } @@ -1483,6 +1592,23 @@ a.box:active { display: none; } +.select:hover:after { + border-color: #363636; +} + +.select.is-small { + border-radius: 2px; + font-size: 0.875rem; +} + +.select.is-medium { + font-size: 1.25rem; +} + +.select.is-large { + font-size: 1.5rem; +} + .select.is-fullwidth { width: 100%; } @@ -1491,26 +1617,6 @@ a.box:active { width: 100%; } -.select:after { - border: 1px solid #00d1b2; - border-right: 0; - border-top: 0; - content: " "; - display: block; - height: 7px; - pointer-events: none; - position: absolute; - transform: rotate(-45deg); - width: 7px; - margin-top: -4px; - right: 16px; - top: 50%; -} - -.select:hover:after { - border-color: #363636; -} - .label { color: #363636; display: block; @@ -1523,7 +1629,7 @@ a.box:active { .help { display: block; - font-size: 0.875rem; + font-size: 0.875em; margin-top: 5px; } @@ -1608,11 +1714,11 @@ a.box:active { z-index: 2; } -.control.has-addons .button:active, .control.has-addons .button:focus, -.control.has-addons .input:active, +.control.has-addons .button:focus, .control.has-addons .button:active, .control.has-addons .input:focus, -.control.has-addons .select:active, -.control.has-addons .select:focus { +.control.has-addons .input:active, +.control.has-addons .select:focus, +.control.has-addons .select:active { z-index: 3; } @@ -1647,6 +1753,14 @@ a.box:active { flex-shrink: 0; } +.control.has-addons .select select:hover { + z-index: 2; +} + +.control.has-addons .select select:focus, .control.has-addons .select select:active { + z-index: 3; +} + .control.has-addons.has-addons-centered { justify-content: center; } @@ -1803,12 +1917,12 @@ a.box:active { border-top-color: transparent; content: ""; display: block; - height: 16px; + height: 1rem; position: relative; - width: 16px; + width: 1rem; position: absolute !important; - right: 8px; - top: 8px; + right: 0.75em; + top: 0.75em; } .image { @@ -2511,9 +2625,9 @@ a.box:active { border-top-color: transparent; content: ""; display: block; - height: 16px; + height: 1rem; position: relative; - width: 16px; + width: 1rem; } .number { @@ -3783,7 +3897,7 @@ a.nav-item.is-tab.is-active { } .panel-tabs a.is-active { - border-bottom-color: #363636; + border-bottom-color: #4a4a4a; color: #363636; } diff --git a/docs/documentation/elements/button.html b/docs/documentation/elements/button.html index 5d4d45cf..6fce3dcb 100644 --- a/docs/documentation/elements/button.html +++ b/docs/documentation/elements/button.html @@ -115,25 +115,70 @@ doc-subtab: button

States

-

Loading

+

Normal

- Loading - Loading - Loading - Loading - Loading - Loading + Normal + Normal + Normal + Normal + Normal + Normal
{% highlight html %} -Loading -Loading -Loading -Loading -Loading -Loading +Normal +Normal +Normal +Normal +Normal +Normal +{% endhighlight %} +
+
+

Hover

+ +
+
+ Hover + Hover + Hover + Hover + Hover + Hover +
+
+{% highlight html %} +Hover +Hover +Hover +Hover +Hover +Hover +{% endhighlight %} +
+
+ +

Focus

+ +
+
+ Focus + Focus + Focus + Focus + Focus + Focus +
+
+{% highlight html %} +Focus +Focus +Focus +Focus +Focus +Focus {% endhighlight %}
@@ -161,6 +206,29 @@ doc-subtab: button +

Loading

+ +
+
+ Loading + Loading + Loading + Loading + Loading + Loading +
+
+{% highlight html %} +Loading +Loading +Loading +Loading +Loading +Loading +{% endhighlight %} +
+
+

Disabled

diff --git a/docs/documentation/elements/form.html b/docs/documentation/elements/form.html index 7b448de2..f344e56a 100644 --- a/docs/documentation/elements/form.html +++ b/docs/documentation/elements/form.html @@ -250,6 +250,72 @@ doc-subtab: form

States

+

Normal

+
+
+

+ +

+

+ +

+
+
+{% highlight html %} +

+ +

+

+ +

+{% endhighlight %} +
+
+ +

Hover

+
+
+

+ +

+

+ +

+
+
+{% highlight html %} +

+ +

+

+ +

+{% endhighlight %} +
+
+ +

Focus

+
+
+

+ +

+

+ +

+
+
+{% highlight html %} +

+ +

+

+ +

+{% endhighlight %} +
+
+

Loading

diff --git a/sass/elements/button.sass b/sass/elements/button.sass index 3926c961..8bd6513e 100644 --- a/sass/elements/button.sass +++ b/sass/elements/button.sass @@ -1,3 +1,14 @@ +$button-hover: $link-hover !default +$button-hover-border: $link-hover-border !default + +$button-focus: $link-focus !default +$button-focus-border: $link-focus-border !default + +$button-active: $link-active !default +$button-active-border: $link-active-border !default + +$button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) + =button-small border-radius: $radius-small font-size: $size-small @@ -25,13 +36,35 @@ &:last-child margin-left: 4px margin-right: -2px + // States &:hover, + &.is-hovered + border-color: $button-hover-border + color: $button-hover &:focus, + &.is-focused + border-color: $button-focus-border + box-shadow: 0 0 0.5em rgba($button-focus-border, 0.5) + color: $button-focus + &:active, &.is-active - color: $control-hover - &:active - box-shadow: inset 0 1px 2px rgba($black, 0.2) + border-color: $button-active-border + box-shadow: $button-shadow-inset + color: $button-active // Colors + &.is-link + background-color: transparent + border-width: 0 + color: $text + text-decoration: underline + &:hover, + &.is-hovered, + &:focus, + &.is-focused, + &:active, + &.is-active + background-color: $background + color: $text-strong @each $name, $pair in $colors $color: nth($pair, 1) $color-invert: nth($pair, 2) @@ -40,10 +73,20 @@ border-width: 0 color: $color-invert &:hover, + &.is-hovered + background-color: darken($color, 2.5%) + border-color: transparent + color: $color-invert &:focus, + &.is-focused + border-color: transparent + box-shadow: 0 0 0.5em rgba($color, 0.5) + color: $color-invert + &:active, &.is-active background-color: darken($color, 5%) border-color: transparent + box-shadow: $button-shadow-inset color: $color-invert &.is-inverted background-color: $color-invert @@ -63,15 +106,6 @@ background-color: $color border-color: $color color: $color-invert - &.is-link - background-color: transparent - border-width: 0 - color: $text - text-decoration: underline - &:hover, - &:focus - background-color: $background - color: $text-strong // Sizes &.is-small +button-small diff --git a/sass/elements/form.sass b/sass/elements/form.sass index a2ad0e0e..0d31c025 100644 --- a/sass/elements/form.sass +++ b/sass/elements/form.sass @@ -1,18 +1,59 @@ -=form-control +$input: $grey-darker !default +$input-background: $white !default +$input-border: $grey-lighter !default + +$input-hover: $grey-darker !default +$input-hover-border: $grey-light !default + +$input-focus: $grey-darker !default +$input-focus-border: $link !default + +$input-disabled: $text-light !default +$input-disabled-background: $background !default +$input-disabled-border: $background !default + +$input-arrow: $link !default + +$input-icon: $grey-lighter !default +$input-icon-active: $grey-light !default + +$input-radius: $radius !default + +=input +control - @each $name, $pair in $colors - $color: nth($pair, 1) - &.is-#{$name} - border-color: $color + background-color: $input-background + border: 1px solid $input-border + color: $input + &:hover, + &.is-hovered + border-color: $input-hover-border + &:focus, + &.is-focused, + &:active, + &.is-active + border-color: $input-focus-border + &[disabled], + &.is-disabled + background-color: $input-disabled-background + border-color: $input-disabled-border + box-shadow: none + color: $input-disabled + +placeholder + color: rgba($input, 0.3) .input, .textarea - +form-control + +input box-shadow: inset 0 1px 2px rgba($black, 0.1) max-width: 100% width: 100% &[type="search"] border-radius: 290486px + // Colors + @each $name, $pair in $colors + $color: nth($pair, 1) + &.is-#{$name} + border-color: $color // Sizes &.is-small +control-small @@ -30,7 +71,7 @@ .textarea display: block - line-height: 1.2 + line-height: 1.25 max-height: 600px max-width: 100% min-height: 120px @@ -40,17 +81,20 @@ .checkbox, .radio + align-items: center cursor: pointer - display: inline-block - line-height: 1em + display: inline-flex + flex-wrap: wrap + justify-content: flex-start position: relative vertical-align: top input cursor: pointer + margin-right: 0.5em &:hover - color: $control-hover + color: $input-hover &.is-disabled - color: $control-disabled + color: $input-disabled pointer-events: none input pointer-events: none @@ -64,31 +108,42 @@ height: 2.5em position: relative vertical-align: top + &:after + +arrow($input-arrow) + margin-top: -0.375em + right: 1.125em + top: 50% + z-index: 4 select - +form-control + +input cursor: pointer display: block + font-size: 1em outline: none padding-right: 2.5em &:hover - border-color: $control-hover-border + border-color: $input-hover-border &::ms-expand display: none + // States + &:hover + &:after + border-color: $input-hover + // Sizes + &.is-small + +control-small + &.is-medium + +control-medium + &.is-large + +control-large + // Modifiers &.is-fullwidth width: 100% select width: 100% - &:after - +arrow($control-active) - margin-top: -4px - right: 16px - top: 50% - &:hover - &:after - border-color: $control-hover .label - color: $control + color: $input display: block font-weight: bold &:not(:last-child) @@ -96,7 +151,7 @@ .help display: block - font-size: $control-size-small + font-size: 0.875em margin-top: 5px @each $name, $pair in $colors $color: nth($pair, 1) @@ -133,20 +188,26 @@ width: auto &:hover z-index: 2 - &:active, - &:focus + &:focus, + &:active z-index: 3 &:first-child - border-radius: $control-radius 0 0 $control-radius + border-radius: $input-radius 0 0 $input-radius select - border-radius: $control-radius 0 0 $control-radius + border-radius: $input-radius 0 0 $input-radius &:last-child - border-radius: 0 $control-radius $control-radius 0 + border-radius: 0 $input-radius $input-radius 0 select - border-radius: 0 $control-radius $control-radius 0 + border-radius: 0 $input-radius $input-radius 0 &.is-expanded flex-grow: 1 flex-shrink: 0 + .select select + &:hover + z-index: 2 + &:focus, + &:active + z-index: 3 &.has-addons-centered justify-content: center &.has-addons-right @@ -160,14 +221,14 @@ &.has-icon & > .fa +fa(14px, 24px) - color: $control-icon + color: $input-icon pointer-events: none position: absolute top: 4px z-index: 4 .input &:focus + .fa - color: $control-icon-active + color: $input-icon-active &.is-small + .fa font-size: 10.5px top: 0 @@ -237,5 +298,5 @@ &:after +loader position: absolute !important - right: 8px - top: 8px + right: 0.75em + top: 0.75em diff --git a/sass/utilities/controls.sass b/sass/utilities/controls.sass index 528233b4..1cd2b764 100644 --- a/sass/utilities/controls.sass +++ b/sass/utilities/controls.sass @@ -1,37 +1,15 @@ -$control: $text-strong !default -$control-background: $text-invert !default -$control-border: $border !default - -$control-hover: $link-hover !default -$control-hover-border: $border-hover !default - -$control-active: $link !default -$control-active-background: $link !default -$control-active-background-invert: $link-invert !default -$control-active-border: $link !default - -$control-disabled: $border !default -$control-disabled-background: $background !default - $control-radius: $radius !default $control-radius-small: $radius-small !default -$control-size: $size-normal !default -$control-size-small: $size-small !default - -$control-icon: $grey-lighter !default -$control-icon-active: $grey-light !default =control -moz-appearance: none -webkit-appearance: none align-items: center - background-color: $control-background - border: 1px solid $control-border + border: none border-radius: $control-radius box-shadow: none - color: $control display: inline-flex - font-size: $control-size + font-size: 1em height: 2.5em justify-content: flex-start line-height: 1.5 @@ -39,21 +17,15 @@ $control-icon-active: $grey-light !default padding-right: 0.75em position: relative vertical-align: top - &:hover - border-color: $control-hover-border - &:active, + // States &:focus, + &.is-focused, + &:active, &.is-active - border-color: $control-active-border outline: none &[disabled], &.is-disabled - background-color: $control-disabled-background - border-color: $control-disabled - cursor: not-allowed pointer-events: none - +placeholder - color: rgba($control, 0.3) =control-small border-radius: $control-radius-small diff --git a/sass/utilities/mixins.sass b/sass/utilities/mixins.sass index d9737990..1d998312 100644 --- a/sass/utilities/mixins.sass +++ b/sass/utilities/mixins.sass @@ -4,11 +4,11 @@ border-top: 0 content: " " display: block - height: 7px + height: 0.5em pointer-events: none position: absolute transform: rotate(-45deg) - width: 7px + width: 0.5em =block &:not(:last-child) @@ -133,9 +133,9 @@ border-top-color: transparent content: "" display: block - height: 16px + height: 1rem position: relative - width: 16px + width: 1rem =overlay($offset: 0) bottom: $offset diff --git a/sass/utilities/variables.sass b/sass/utilities/variables.sass index 59aafef4..c7934578 100644 --- a/sass/utilities/variables.sass +++ b/sass/utilities/variables.sass @@ -104,11 +104,13 @@ $link-invert: $primary-invert !default $link-visited: $purple !default $link-hover: $grey-darker !default -$link-hover-background: $white-ter !default -$link-hover-border: $grey-darker !default +$link-hover-border: $grey-light !default + +$link-focus: $grey-darker !default +$link-focus-border: $primary !default $link-active: $grey-darker !default -$link-active-border: $grey-darker !default +$link-active-border: $grey-dark !default // Typography $family-primary: $family-sans-serif !default