From ea8b26ed1291d88453a16581dad33a0af53afaf8 Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Thu, 13 Apr 2017 01:10:39 +0100 Subject: [PATCH] Fix #584, Fix #571 --- CHANGELOG.md | 2 + docs/css/bulma-docs.css | 80 +++++++++++++++++---------- docs/documentation/elements/form.html | 18 ++++++ sass/components/pagination.sass | 2 +- sass/elements/button.sass | 2 +- sass/elements/form.sass | 18 ++++-- sass/utilities/controls.sass | 13 +++-- 7 files changed, 96 insertions(+), 39 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 71d88268..3f4d760a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -20,6 +20,8 @@ * Fix #458 select expanded * Fix #403 separate animations * Fix #637 customize Bulma +* Fix #584 loading select +* Fix #571 control height ## 0.4.0 diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index b1b6730e..3c654de2 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -691,7 +691,7 @@ a.box:active { -webkit-box-align: center; -ms-flex-align: center; align-items: center; - border: none; + border: 1px solid transparent; border-radius: 3px; box-shadow: none; display: -webkit-inline-box; @@ -703,10 +703,10 @@ a.box:active { -ms-flex-pack: start; justify-content: flex-start; line-height: 1.5; - padding-bottom: 0.375em; - padding-left: 0.625em; - padding-right: 0.625em; - padding-top: 0.375em; + padding-bottom: calc(0.375em - 1px); + padding-left: calc(0.625em - 1px); + padding-right: calc(0.625em - 1px); + padding-top: calc(0.375em - 1px); position: relative; vertical-align: top; -webkit-touch-callout: none; @@ -715,7 +715,7 @@ a.box:active { -ms-user-select: none; user-select: none; background-color: white; - border: 1px solid #dbdbdb; + border-color: #dbdbdb; color: #363636; cursor: pointer; -webkit-box-pack: center; @@ -1852,7 +1852,7 @@ input[type="submit"].button { -webkit-box-align: center; -ms-flex-align: center; align-items: center; - border: none; + border: 1px solid transparent; border-radius: 3px; box-shadow: none; display: -webkit-inline-box; @@ -1864,14 +1864,14 @@ input[type="submit"].button { -ms-flex-pack: start; justify-content: flex-start; line-height: 1.5; - padding-bottom: 0.375em; - padding-left: 0.625em; - padding-right: 0.625em; - padding-top: 0.375em; + padding-bottom: calc(0.375em - 1px); + padding-left: calc(0.625em - 1px); + padding-right: calc(0.625em - 1px); + padding-top: calc(0.375em - 1px); position: relative; vertical-align: top; background-color: white; - border: 1px solid #dbdbdb; + border-color: #dbdbdb; color: #363636; box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.1); max-width: 100%; @@ -2092,7 +2092,7 @@ input[type="submit"].button { -webkit-box-align: center; -ms-flex-align: center; align-items: center; - border: none; + border: 1px solid transparent; border-radius: 3px; box-shadow: none; display: -webkit-inline-box; @@ -2104,14 +2104,14 @@ input[type="submit"].button { -ms-flex-pack: start; justify-content: flex-start; line-height: 1.5; - padding-bottom: 0.375em; - padding-left: 0.625em; - padding-right: 0.625em; - padding-top: 0.375em; + padding-bottom: calc(0.375em - 1px); + padding-left: calc(0.625em - 1px); + padding-right: calc(0.625em - 1px); + padding-top: calc(0.375em - 1px); position: relative; vertical-align: top; background-color: white; - border: 1px solid #dbdbdb; + border-color: #dbdbdb; color: #363636; cursor: pointer; display: block; @@ -2167,6 +2167,10 @@ input[type="submit"].button { display: none; } +.select select[disabled]:hover { + border-color: whitesmoke; +} + .select:hover:after { border-color: #363636; } @@ -2220,6 +2224,10 @@ input[type="submit"].button { font-size: 1.5rem; } +.select.is-disabled:after { + border-color: #7a7a7a; +} + .select.is-fullwidth { width: 100%; } @@ -2228,6 +2236,26 @@ input[type="submit"].button { width: 100%; } +.select.is-loading:after { + -webkit-animation: spinAround 500ms infinite linear; + animation: spinAround 500ms infinite linear; + border: 2px solid #dbdbdb; + border-radius: 290486px; + border-right-color: transparent; + border-top-color: transparent; + content: ""; + display: block; + height: 1em; + position: relative; + width: 1em; + margin-top: 0; + position: absolute; + right: 0.625em; + top: 0.625em; + -webkit-transform: none; + transform: none; +} + .label { color: #363636; display: block; @@ -2281,10 +2309,6 @@ input[type="submit"].button { color: #ff3860; } -.select select { - line-height: 1; -} - .field:not(:last-child) { margin-bottom: 0.75rem; } @@ -4371,7 +4395,7 @@ a.nav-item.is-tab.is-active { -webkit-box-align: center; -ms-flex-align: center; align-items: center; - border: none; + border: 1px solid transparent; border-radius: 3px; box-shadow: none; display: -webkit-inline-box; @@ -4383,10 +4407,10 @@ a.nav-item.is-tab.is-active { -ms-flex-pack: start; justify-content: flex-start; line-height: 1.5; - padding-bottom: 0.375em; - padding-left: 0.625em; - padding-right: 0.625em; - padding-top: 0.375em; + padding-bottom: calc(0.375em - 1px); + padding-left: calc(0.625em - 1px); + padding-right: calc(0.625em - 1px); + padding-top: calc(0.375em - 1px); position: relative; vertical-align: top; -webkit-touch-callout: none; @@ -4429,7 +4453,7 @@ a.nav-item.is-tab.is-active { .pagination-previous, .pagination-next, .pagination-link { - border: 1px solid #dbdbdb; + border-color: #dbdbdb; min-width: 2.25em; } diff --git a/docs/documentation/elements/form.html b/docs/documentation/elements/form.html index 6597e561..21cdc086 100644 --- a/docs/documentation/elements/form.html +++ b/docs/documentation/elements/form.html @@ -322,6 +322,15 @@ doc-subtab: form

+
+
+
+ +
+
+

@@ -346,6 +355,15 @@ doc-subtab: form

+
+
+
+ +
+
+

diff --git a/sass/components/pagination.sass b/sass/components/pagination.sass index 457d5bd7..12026409 100644 --- a/sass/components/pagination.sass +++ b/sass/components/pagination.sass @@ -55,7 +55,7 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2) .pagination-previous, .pagination-next, .pagination-link - border: 1px solid $pagination-border + border-color: $pagination-border min-width: 2.25em &:hover border-color: $pagination-hover-border diff --git a/sass/elements/button.sass b/sass/elements/button.sass index b379ce84..68879224 100644 --- a/sass/elements/button.sass +++ b/sass/elements/button.sass @@ -26,7 +26,7 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default +control +unselectable background-color: $button-background - border: 1px solid $button-border + border-color: $button-border color: $button cursor: pointer justify-content: center diff --git a/sass/elements/form.sass b/sass/elements/form.sass index 61a657a98..a9b9f79d 100644 --- a/sass/elements/form.sass +++ b/sass/elements/form.sass @@ -22,7 +22,7 @@ $input-radius: $radius !default =input +control background-color: $input-background - border: 1px solid $input-border + border-color: $input-border color: $input &:hover, &.is-hovered @@ -122,6 +122,8 @@ $input-radius: $radius !default border-color: $input-hover-border &::-ms-expand display: none + &[disabled]:hover + border-color: $input-disabled-border // States &:hover &:after @@ -139,10 +141,21 @@ $input-radius: $radius !default &.is-large +control-large // Modifiers + &.is-disabled + &:after + border-color: $input-disabled &.is-fullwidth width: 100% select width: 100% + &.is-loading + &:after + +loader + margin-top: 0 + position: absolute + right: 0.625em + top: 0.625em + transform: none .label color: $input @@ -161,9 +174,6 @@ $input-radius: $radius !default &.is-#{$name} color: $color -.select select - line-height: 1 - // Containers .field diff --git a/sass/utilities/controls.sass b/sass/utilities/controls.sass index ffabaad5..cb258df1 100644 --- a/sass/utilities/controls.sass +++ b/sass/utilities/controls.sass @@ -1,11 +1,14 @@ $control-radius: $radius !default $control-radius-small: $radius-small !default +$control-padding-vertical: calc(0.375em - 1px) !default +$control-padding-horizontal: calc(0.625em - 1px) !default + =control -moz-appearance: none -webkit-appearance: none align-items: center - border: none + border: 1px solid transparent border-radius: $control-radius box-shadow: none display: inline-flex @@ -13,10 +16,10 @@ $control-radius-small: $radius-small !default height: 2.25em justify-content: flex-start line-height: 1.5 - padding-bottom: 0.375em - padding-left: 0.625em - padding-right: 0.625em - padding-top: 0.375em + padding-bottom: $control-padding-vertical + padding-left: $control-padding-horizontal + padding-right: $control-padding-horizontal + padding-top: $control-padding-vertical position: relative vertical-align: top // States