From 9fc8cdf225ee63898c83a8793b6bca93fa0010af Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Sun, 12 Mar 2017 17:29:26 +0000 Subject: [PATCH] Add field element --- docs/css/bulma-docs.css | 251 ++++---- docs/documentation/elements/form.html | 822 +++++++++++++++----------- sass/elements/form.sass | 144 +++-- 3 files changed, 684 insertions(+), 533 deletions(-) diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index 6c426c19..c681259e 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -1800,7 +1800,7 @@ a.box:active { .help { display: block; font-size: 0.85rem; - margin-top: 5px; + margin-top: 0.25rem; } .help.is-white { @@ -1839,113 +1839,138 @@ a.box:active { color: #ff3860; } +.field:not(:last-child) { + margin-bottom: 0.75rem; +} + +.field.has-addons { + display: flex; + justify-content: flex-start; +} + +.field.has-addons .control { + margin-right: -1px; +} + +.field.has-addons .control:hover { + z-index: 2; +} + +.field.has-addons .control:focus, .field.has-addons .control:active { + z-index: 3; +} + +.field.has-addons .control:first-child .button, +.field.has-addons .control:first-child .input, +.field.has-addons .control:first-child .select select { + border-bottom-left-radius: 3px; + border-top-left-radius: 3px; +} + +.field.has-addons .control:last-child .button, +.field.has-addons .control:last-child .input, +.field.has-addons .control:last-child .select select { + border-bottom-right-radius: 3px; + border-top-right-radius: 3px; +} + +.field.has-addons .control .button, +.field.has-addons .control .input, +.field.has-addons .control .select select { + border-radius: 0; +} + +.field.has-addons .control.is-expanded { + flex-grow: 1; + flex-shrink: 0; +} + +.field.has-addons.has-addons-centered { + justify-content: center; +} + +.field.has-addons.has-addons-right { + justify-content: flex-end; +} + +.field.has-addons.has-addons-fullwidth .control { + flex-grow: 1; + flex-shrink: 0; +} + +.field.is-grouped { + display: flex; + justify-content: flex-start; +} + +.field.is-grouped > .control { + flex-basis: 0; + flex-shrink: 0; +} + +.field.is-grouped > .control:not(:last-child) { + margin-bottom: 0; + margin-right: 0.75rem; +} + +.field.is-grouped > .control.is-expanded { + flex-grow: 1; + flex-shrink: 1; +} + +.field.is-grouped.is-grouped-centered { + justify-content: center; +} + +.field.is-grouped.is-grouped-right { + justify-content: flex-end; +} + +@media screen and (min-width: 769px) { + .field.is-horizontal { + display: flex; + } +} + @media screen and (max-width: 768px) { - .control-label { - margin-bottom: 0.5em; + .field-label { + margin-bottom: 0.5rem; } } @media screen and (min-width: 769px) { - .control-label { + .field-label { flex-basis: 0; flex-grow: 1; flex-shrink: 0; - margin-right: 1.5em; - padding-top: 0.5em; + margin-right: 1.5rem; + padding-top: 0.375em; text-align: right; } } +@media screen and (min-width: 769px) { + .field-body { + display: flex; + flex-basis: 0; + flex-grow: 5; + flex-shrink: 1; + } + .field-body .field { + flex-grow: 1; + flex-shrink: 1; + } + .field-body .field:not(:last-child) { + margin-bottom: 0; + margin-right: 0.75rem; + } +} + .control { position: relative; text-align: left; } -.control:not(:last-child) { - margin-bottom: 0.75rem; -} - -.control.has-addons { - display: flex; - justify-content: flex-start; -} - -.control.has-addons .button, -.control.has-addons .input, -.control.has-addons .select { - border-radius: 0; - margin-right: -1px; - width: auto; -} - -.control.has-addons .button:hover, -.control.has-addons .input:hover, -.control.has-addons .select:hover { - z-index: 2; -} - -.control.has-addons .button:focus, .control.has-addons .button:active, -.control.has-addons .input:focus, -.control.has-addons .input:active, -.control.has-addons .select:focus, -.control.has-addons .select:active { - z-index: 3; -} - -.control.has-addons .button:first-child, -.control.has-addons .input:first-child, -.control.has-addons .select:first-child { - border-radius: 3px 0 0 3px; -} - -.control.has-addons .button:first-child select, -.control.has-addons .input:first-child select, -.control.has-addons .select:first-child select { - border-radius: 3px 0 0 3px; -} - -.control.has-addons .button:last-child, -.control.has-addons .input:last-child, -.control.has-addons .select:last-child { - border-radius: 0 3px 3px 0; -} - -.control.has-addons .button:last-child select, -.control.has-addons .input:last-child select, -.control.has-addons .select:last-child select { - border-radius: 0 3px 3px 0; -} - -.control.has-addons .button.is-expanded, -.control.has-addons .input.is-expanded, -.control.has-addons .select.is-expanded { - flex-grow: 1; - 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; -} - -.control.has-addons.has-addons-right { - justify-content: flex-end; -} - -.control.has-addons.has-addons-fullwidth .button, -.control.has-addons.has-addons-fullwidth .input, -.control.has-addons.has-addons-fullwidth .select { - flex-grow: 1; - flex-shrink: 0; -} - .control.has-icon .icon { color: #dbdbdb; height: 2.25em; @@ -1988,46 +2013,6 @@ a.box:active { padding-right: 2.25em; } -.control.is-grouped { - display: flex; - justify-content: flex-start; -} - -.control.is-grouped > .control { - flex-basis: 0; - flex-shrink: 0; -} - -.control.is-grouped > .control:not(:last-child) { - margin-bottom: 0; - margin-right: 0.75rem; -} - -.control.is-grouped > .control.is-expanded { - flex-grow: 1; - flex-shrink: 1; -} - -.control.is-grouped.is-grouped-centered { - justify-content: center; -} - -.control.is-grouped.is-grouped-right { - justify-content: flex-end; -} - -@media screen and (min-width: 769px) { - .control.is-horizontal { - display: flex; - } - .control.is-horizontal > .control { - display: flex; - flex-basis: 0; - flex-grow: 5; - flex-shrink: 1; - } -} - .control.is-loading:after { animation: spinAround 500ms infinite linear; border: 2px solid #dbdbdb; @@ -2040,8 +2025,8 @@ a.box:active { position: relative; width: 1rem; position: absolute !important; - right: 0.75em; - top: 0.75em; + right: 0.625em; + top: 0.625em; } .icon { diff --git a/docs/documentation/elements/form.html b/docs/documentation/elements/form.html index 535b45f6..d6e15c90 100644 --- a/docs/documentation/elements/form.html +++ b/docs/documentation/elements/form.html @@ -32,55 +32,76 @@ doc-subtab: form {% capture form_example %} -

- -

- -

- - - - - This username is available -

- -

- - - - - This email is invalid -

- -

- - - -

- -

- -

-

- -

-

- - -

-
+
+

+ +

+
+ +
+ +

+ + + + +

+

This username is available

+
+ +
+ +

+ + + + +

+

This email is invalid

+
+ +
+ +

+ + + +

+
+ +
+ +

+ +

+
+ +
+

+ +

+
+ +
+

+ + +

+
+ +

@@ -105,21 +126,31 @@ doc-subtab: form

Colors

{% capture colors_example %} -

- -

-

- -

-

- -

-

- -

-

- -

+
+

+ +

+
+
+

+ +

+
+
+

+ +

+
+
+

+ +

+
+
+

+ +

+
{% endcapture %}
@@ -135,50 +166,66 @@ doc-subtab: form
{% capture sizes_example %} -

- -

-

- -

-

- -

-

- -

-

- - - -

-

- - - -

-

- - - -

-

- - - -

+
+

+ +

+
+
+

+ +

+
+
+

+ +

+
+
+

+ +

+
+
+

+ + + +

+
+
+

+ + + +

+
+
+

+ + + +

+
+
+

+ + + +

+
{% endcapture %}

Sizes

@@ -197,12 +244,16 @@ doc-subtab: form

States

Normal

{% capture normal_example %} -

- -

-

- -

+
+

+ +

+
+
+

+ +

+
{% endcapture %}
@@ -217,12 +268,16 @@ doc-subtab: form

Hover

{% capture hover_example %} -

- -

-

- -

+
+

+ +

+
+
+

+ +

+
{% endcapture %}
@@ -237,12 +292,16 @@ doc-subtab: form

Focus

{% capture focus_example %} -

- -

-

- -

+
+

+ +

+
+
+

+ +

+
{% endcapture %}
@@ -257,12 +316,16 @@ doc-subtab: form

Loading

{% capture loading_example %} -

- -

-

- -

+
+

+ +

+
+
+

+ +

+
{% endcapture %}
@@ -277,29 +340,37 @@ doc-subtab: form

Disabled

{% capture disabled_example %} -

- -

-

- -

-

- -

-

- - -

-
+
+

+ +

+
+
+

+ +

+
+
+

+ +

+
+
+

+ + +

+
+

@@ -321,23 +392,29 @@ doc-subtab: form

With Font Awesome icons

{% capture icons_example %} -

- - - - -

-

- - - - -

-

- -

+
+

+ + + + +

+
+
+

+ + + + +

+
+
+

+ +

+
{% endcapture %}
@@ -351,66 +428,78 @@ doc-subtab: form
{% capture icons_sizes_example %} -

- - - - -

-

- - - - -

-

- - - - -

-

- - - - -

-

- - - - -

-

- - - - -

-

- - - - -

-

- - - - -

-

- - - - -

-

- - - - -

+
+

+ + + + +

+
+
+

+ + + + +

+
+
+

+ + + + +

+
+
+

+ + + + +

+
+
+

+ + + + +

+
+
+

+ + + + +

+
+
+

+ + + + +

+
+
+

+ + + + +

+
+
+

+ + + + +

+
{% endcapture %}
@@ -432,30 +521,38 @@ doc-subtab: form
{% capture icons_sizes_right_example %} -

- - - - -

-

- - - - -

-

- - - - -

-

- - - - -

+
+

+ + + + +

+
+
+

+ + + + +

+
+
+

+ + + + +

+
+
+

+ + + + +

+
{% endcapture %}
@@ -480,12 +577,16 @@ doc-subtab: form

If you want to attach controls together, use the has-addons modifier on the control container:

{% capture addons_example %} -

- - - Search - -

+
+

+ +

+

+ + Search + +

+
{{addons_example}} @@ -498,32 +599,45 @@ doc-subtab: form

Use the is-expanded modifier on the element you want to fill up the remaing space (in this case, the input):

{% capture addons_expanded_example %} -

- - - - - - Transfer - -

-

- - - - - - Transfer - -

+
+

+ + + +

+

+ +

+

+ + Transfer + +

+
+ +
+

+ + + +

+

+ +

+

+ + Transfer + +

+
{% endcapture %}
{{addons_expanded_example}} @@ -535,19 +649,25 @@ doc-subtab: form

Use the has-addons-centered or the has-addons-right modifers to alter the alignment.

{% capture addons_center_example %} -

- - - - - - Transfer - -

+
+

+ + + +

+

+ +

+

+ + Transfer + +

+
{% endcapture %}
{{addons_center_example}} @@ -556,19 +676,25 @@ doc-subtab: form {{addons_center_example}} {% endhighlight %} {% capture addons_right_example %} -

- - - - - - Transfer - -

+
+

+ + + +

+

+ +

+

+ + Transfer + +

+
{% endcapture %}
{{addons_right_example}} @@ -588,7 +714,7 @@ doc-subtab: form

{% capture group_example %} -
+

@@ -622,37 +748,55 @@ doc-subtab: form

You can of course use is-grouped or has-addons for the child elements.

{% capture horizontal_form_example %} -
-
+
+
-
-

- -

-

- -

-
-
-
-
- -
-
-
- +
+
+

+ +

+
+
+

+ + + + +

+

This username is available

-
-
+ +
+
+ +
+
+
+
+
+ +
+
+
+
+
+ +
+
-
- +
+
+
+ +
+
{% endcapture %} diff --git a/sass/elements/form.sass b/sass/elements/form.sass index 6922948a..39872deb 100644 --- a/sass/elements/form.sass +++ b/sass/elements/form.sass @@ -152,7 +152,7 @@ $input-radius: $radius !default .help display: block font-size: $size-small - margin-top: 5px + margin-top: 0.25rem @each $name, $pair in $colors $color: nth($pair, 1) &.is-#{$name} @@ -160,64 +160,110 @@ $input-radius: $radius !default // Containers -.control-label - +mobile - margin-bottom: 0.5em - +tablet - flex-basis: 0 - flex-grow: 1 - flex-shrink: 0 - margin-right: 1.5em - padding-top: 0.5em - text-align: right - -.control - position: relative - text-align: left +.field &:not(:last-child) margin-bottom: 0.75rem // Modifiers &.has-addons display: flex justify-content: flex-start - .button, - .input, - .select - border-radius: 0 + .control margin-right: -1px - width: auto &:hover z-index: 2 &:focus, &:active z-index: 3 &:first-child - border-radius: $input-radius 0 0 $input-radius - select - border-radius: $input-radius 0 0 $input-radius + .button, + .input, + .select select + border-bottom-left-radius: $input-radius + border-top-left-radius: $input-radius &:last-child - border-radius: 0 $input-radius $input-radius 0 - select - border-radius: 0 $input-radius $input-radius 0 + .button, + .input, + .select select + border-bottom-right-radius: $input-radius + border-top-right-radius: $input-radius + .button, + .input, + .select select + border-radius: 0 &.is-expanded flex-grow: 1 flex-shrink: 0 - .select select - &:hover - z-index: 2 - &:focus, - &:active - z-index: 3 + // width: auto + // .control:first-child & + // border-radius: $input-radius 0 0 $input-radius + // select + // border-radius: $input-radius 0 0 $input-radius + // .control:last-child & + // border-radius: 0 $input-radius $input-radius 0 + // select + // border-radius: 0 $input-radius $input-radius 0 + // .select select + // &:hover + // z-index: 2 + // &:focus, + // &:active + // z-index: 3 &.has-addons-centered justify-content: center &.has-addons-right justify-content: flex-end &.has-addons-fullwidth - .button, - .input, - .select + .control flex-grow: 1 flex-shrink: 0 + &.is-grouped + display: flex + justify-content: flex-start + & > .control + flex-basis: 0 + flex-shrink: 0 + &:not(:last-child) + margin-bottom: 0 + margin-right: 0.75rem + &.is-expanded + flex-grow: 1 + flex-shrink: 1 + &.is-grouped-centered + justify-content: center + &.is-grouped-right + justify-content: flex-end + &.is-horizontal + +tablet + display: flex + +.field-label + +mobile + margin-bottom: 0.5rem + +tablet + flex-basis: 0 + flex-grow: 1 + flex-shrink: 0 + margin-right: 1.5rem + padding-top: 0.375em + text-align: right + +.field-body + +tablet + display: flex + flex-basis: 0 + flex-grow: 5 + flex-shrink: 1 + .field + flex-grow: 1 + flex-shrink: 1 + &:not(:last-child) + margin-bottom: 0 + margin-right: 0.75rem + +.control + position: relative + text-align: left + // Modifiers &.has-icon .icon color: $input-icon @@ -270,33 +316,9 @@ $input-radius: $radius !default // &.is-large // & + .icon // right: ($size-large * 2.5) / 2 - &.is-grouped - display: flex - justify-content: flex-start - & > .control - flex-basis: 0 - flex-shrink: 0 - &:not(:last-child) - margin-bottom: 0 - margin-right: 0.75rem - &.is-expanded - flex-grow: 1 - flex-shrink: 1 - &.is-grouped-centered - justify-content: center - &.is-grouped-right - justify-content: flex-end - &.is-horizontal - +tablet - display: flex - & > .control - display: flex - flex-basis: 0 - flex-grow: 5 - flex-shrink: 1 &.is-loading &:after +loader position: absolute !important - right: 0.75em - top: 0.75em + right: 0.625em + top: 0.625em