From: Jeremy Thomas Date: Thu, 5 May 2016 20:54:32 +0000 (+0100) Subject: Restructure controls, Remove vertical padding from controls, Fix panel X-Git-Tag: 0.0.25~3 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=53ac20f199a3d9ebb89cfd32ad3ee1aef13f32f2;p=thirdparty%2Fbulma.git Restructure controls, Remove vertical padding from controls, Fix panel --- diff --git a/README.md b/README.md index ab5771e66..8eed3c531 100644 --- a/README.md +++ b/README.md @@ -26,7 +26,7 @@ bower install bulma ### CDN -[https://cdnjs.cloudflare.com/ajax/libs/bulma/0.0.24/css/bulma.min.css](https://cdnjs.cloudflare.com/ajax/libs/bulma/0.0.24/css/bulma.min.css) +[https://cdnjs.cloudflare.com/ajax/libs/bulma](https://cdnjs.cloudflare.com/ajax/libs/bulma) Feel free to raise an issue or submit a pull request. @@ -46,7 +46,7 @@ It's more a tasklist than a roadmap, but it will give you an overview of where t ## Documentation website -This repository is **only** for the Bulma source files. +This repository is **only** for the Bulma source files. The [website](http://bulma.io) (which includes the [documentation](http://bulma.io/documentation/overview/start/)) is in another repo: [https://github.com/jgthms/bulma-website](https://github.com/jgthms/bulma-website) If you encounter a typo or a lack of documentation, submit an issue [there](https://github.com/jgthms/bulma-website/issues). diff --git a/sass/components/card.sass b/sass/components/card.sass index 4cb32fa43..991c63059 100644 --- a/sass/components/card.sass +++ b/sass/components/card.sass @@ -29,7 +29,6 @@ margin-top: -20px .card-footer - background: $background border-top: 1px solid $border align-items: stretch display: flex diff --git a/sass/components/panel.sass b/sass/components/panel.sass index 32af2acd8..f66dd3cef 100644 --- a/sass/components/panel.sass +++ b/sass/components/panel.sass @@ -43,11 +43,13 @@ display: block line-height: 16px padding: 10px - &:hover - background: $background &:not(:last-child) border-bottom: 1px solid $border +a.panel-block + &:hover + background: $background + .panel border: 1px solid $border border-radius: 5px diff --git a/sass/elements/button.sass b/sass/elements/button.sass index 82fe7ce10..db9e3d477 100644 --- a/sass/elements/button.sass +++ b/sass/elements/button.sass @@ -3,21 +3,25 @@ font-size: 11px height: 24px line-height: 16px - padding: 3px 6px + padding-left: 6px + padding-right: 6px =button-medium font-size: 18px height: 40px - padding: 7px 14px + padding-left: 14px + padding-right: 14px =button-large font-size: 22px height: 48px - padding: 11px 20px + padding-left: 20px + padding-right: 20px .button +control +unselectable justify-content: center - padding: 3px 10px + padding-left: 10px + padding-right: 10px text-align: center white-space: nowrap strong diff --git a/sass/elements/elements.sass b/sass/elements/elements.sass index bdb807988..b1d20059b 100644 --- a/sass/elements/elements.sass +++ b/sass/elements/elements.sass @@ -1,10 +1,9 @@ @charset "utf-8" -@import "controls" - @import "box" @import "button" @import "content" +@import "form" @import "image" @import "notification" @import "progress" diff --git a/sass/elements/controls.sass b/sass/elements/form.sass similarity index 82% rename from sass/elements/controls.sass rename to sass/elements/form.sass index d8c762f25..9a9bed083 100644 --- a/sass/elements/controls.sass +++ b/sass/elements/form.sass @@ -1,33 +1,3 @@ -=control - -moz-appearance: none - -webkit-appearance: none - align-items: center - background: $control-background - border: 1px solid $control-border - border-radius: $radius - color: $control - display: inline-flex - font-size: $size-normal - height: 32px - line-height: 24px - padding: 3px 8px - position: relative - vertical-align: top - &:hover - border-color: $control-hover-border - &:active, - &:focus - border-color: $control-active-border - outline: none - &[disabled], - &.is-disabled - background: $background - border-color: $control-border - cursor: not-allowed - pointer-events: none - +placeholder - color: rgba($control, 0.3) - =form-control +control @each $name, $pair in $colors @@ -35,27 +5,9 @@ &.is-#{$name} border-color: $color -=control-small - border-radius: 2px - font-size: 11px - height: 24px - line-height: 16px - padding: 3px 6px -=control-medium - font-size: 18px - height: 40px - line-height: 32px - padding: 3px 10px -=control-large - font-size: 24px - height: 48px - line-height: 40px - padding: 3px 12px - .input +form-control box-shadow: inset 0 1px 2px rgba(black, 0.1) - display: block max-width: 100% width: 100% &[type="search"] @@ -77,7 +29,6 @@ &.is-flat border: none box-shadow: none - padding: 4px 8px &.is-fullwidth display: block width: 100% @@ -87,6 +38,7 @@ .textarea @extend .input + display: block line-height: 1.2 max-height: 600px max-width: 100% diff --git a/sass/elements/other.sass b/sass/elements/other.sass index 9156b675d..42642e46e 100644 --- a/sass/elements/other.sass +++ b/sass/elements/other.sass @@ -143,7 +143,8 @@ height: 24px justify-content: center line-height: 16px - padding: 4px 10px + padding-left: 10px + padding-right: 10px vertical-align: top white-space: nowrap .delete @@ -166,16 +167,19 @@ &.is-small font-size: $size-small height: 20px - padding: 2px 8px + padding-left: 8px + padding-right: 8px &.is-medium font-size: $size-normal height: 32px - padding: 8px 14px + padding-left: 14px + padding-right: 14px &.is-large font-size: $size-5 height: 40px line-height: 24px - padding: 8px 18px + padding-left: 18px + padding-right: 18px .delete margin-left: 4px margin-right: -8px diff --git a/sass/utilities/controls.sass b/sass/utilities/controls.sass new file mode 100644 index 000000000..18feb0bbd --- /dev/null +++ b/sass/utilities/controls.sass @@ -0,0 +1,50 @@ +=control + -moz-appearance: none + -webkit-appearance: none + align-items: center + background: $control-background + border: 1px solid $control-border + border-radius: $radius + color: $control + display: inline-flex + font-size: $size-normal + height: 32px + line-height: 24px + padding-left: 8px + padding-right: 8px + position: relative + vertical-align: top + &:hover + border-color: $control-hover-border + &:active, + &:focus + border-color: $control-active-border + outline: none + &[disabled], + &.is-disabled + background: $background + border-color: $control-border + cursor: not-allowed + pointer-events: none + +placeholder + color: rgba($control, 0.3) + +=control-small + border-radius: 2px + font-size: 11px + height: 24px + line-height: 16px + padding-left: 6px + padding-right: 6px +=control-medium + font-size: 18px + height: 40px + line-height: 32px + padding-left: 10px + padding-right: 10px +=control-large + font-size: 24px + height: 48px + line-height: 40px + padding-left: 12px + padding-right: 12px diff --git a/sass/utilities/utilities.sass b/sass/utilities/utilities.sass index d94914dcf..75cda48d6 100644 --- a/sass/utilities/utilities.sass +++ b/sass/utilities/utilities.sass @@ -4,4 +4,5 @@ @import "functions" @import "mixins" @import "animations" +@import "controls" @import "variables"