From 81fb1e4745c78eb5806df698be1f596965dbab59 Mon Sep 17 00:00:00 2001 From: jlukic Date: Thu, 14 Aug 2014 02:19:23 -0400 Subject: [PATCH] several fixes for checkbox, updated form example --- server/documents/collections/form.html.eco | 113 +++++++++++++++--- server/documents/modules/checkbox.html.eco | 12 +- src/definitions/collections/form.less | 2 +- src/definitions/modules/checkbox.less | 38 +++++- .../default/modules/checkbox.variables | 36 ++++-- 5 files changed, 164 insertions(+), 37 deletions(-) diff --git a/server/documents/collections/form.html.eco b/server/documents/collections/form.html.eco index 79e87f722..7a79cc856 100755 --- a/server/documents/collections/form.html.eco +++ b/server/documents/collections/form.html.eco @@ -33,32 +33,117 @@ themes : ['default', 'GitHub'] inputs, standard form fields, labels, selection dropdowns, textareas, as well as: checkboxes, and message blocks.

-

Validation messages use messages which are formatted for use inside forms.

If you are looking for form validation, you should check out form validation.

-
-

This example uses a ui segment to add the padding and background color. This is not required.

+

Validation messages use messages which are formatted for use inside forms.

+

This example also uses ui segment to group the form. This is not required.

-
- -
- - +

Personal Information

+
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+ +
Gender
+ +
+
Male
+
Female
+
+
-
- -
- - +
+ + +
+

Account Info

+
+
+ +
+ + +
+
+
+ +
+ + +
+
+
+ +

Optional Survey

+
+
+ +
+
+ + +
+
+
+
+ + +
+
+
+
+ +

Settings

+
Privacy
+
+
+ + +
+
+
+
+ + +
+
+
Newsletter Subscriptions
+
+
+ + +
+
+
+
+ + +
+
+
+
+ +
We noticed some issues
-
Login
+
Register
diff --git a/server/documents/modules/checkbox.html.eco b/server/documents/modules/checkbox.html.eco index aa9e79d56..3b307a71d 100755 --- a/server/documents/modules/checkbox.html.eco +++ b/server/documents/modules/checkbox.html.eco @@ -39,19 +39,19 @@ themes : ['default']

Slider

-

A checkbox can be formatted to show user selection as a slider

+

A checkbox can be formatted to emphasize the current selection state

- - + +

Toggle

-

A checkbox can be formatted to show user selection as a toggle

+

A checkbox can be formatted to show an on or off choice

- - + +
diff --git a/src/definitions/collections/form.less b/src/definitions/collections/form.less index c5af9dcdc..0ed01748e 100755 --- a/src/definitions/collections/form.less +++ b/src/definitions/collections/form.less @@ -48,7 +48,7 @@ clear: both; margin: @fieldMargin; } -.ui.form .field:last-child { +.ui.form :not(.fields) .field:last-child { margin-bottom: 0em; } diff --git a/src/definitions/modules/checkbox.less b/src/definitions/modules/checkbox.less index bc54962d2..cf7e1844a 100755 --- a/src/definitions/modules/checkbox.less +++ b/src/definitions/modules/checkbox.less @@ -228,6 +228,7 @@ .ui.slider.checkbox label { padding-left: @sliderLabelDistance; line-height: @sliderLabelLineHeight; + color: @sliderOffLabelColor; } /* Line */ @@ -243,12 +244,12 @@ z-index: 1; border: none !important; - background-color: @neutralCheckbox; + background-color: @sliderLineColor; width: @sliderLineWidth; height: @sliderLineHeight; transform: none; - border-radius: @circularRadius; + border-radius: @sliderLineRadius; transition: background 0.3s ease ; @@ -283,10 +284,24 @@ border: none; } +/* Hover */ +.ui.slider.checkbox .box:hover, +.ui.slider.checkbox label:hover { + color: @sliderHoverLabelColor; +} +.ui.slider.checkbox .box:hover::before, +.ui.slider.checkbox label:hover::before { + background: @sliderHoverLaneBackground; +} + /* Active */ +.ui.slider.checkbox input:checked ~ .box, +.ui.slider.checkbox input:checked ~ label { + color: @sliderOnLabelColor; +} .ui.slider.checkbox input:checked ~ .box:before, .ui.slider.checkbox input:checked ~ label:before { - background-color: @positiveCheckbox; + background-color: @sliderOnLineColor; } .ui.slider.checkbox input:checked ~ .box:after, .ui.slider.checkbox input:checked ~ label:after { @@ -308,6 +323,7 @@ height: @toggleSize; padding-left: @toggleLabelDistance; line-height: @toggleLabelLineHeight; + color: @toggleOffLabelColor; } /* Switch */ @@ -346,7 +362,10 @@ left: 0em; border-radius: @circularRadius; - transition: @toggleLabelTransition; + transition: + background 0.3s ease 0s, + left 0.3s ease 0s + ; } .ui.toggle.checkbox input ~ .box:after, @@ -361,14 +380,21 @@ border: none; } +/* Hover */ +.ui.toggle.checkbox .box:hover::before, +.ui.toggle.checkbox label:hover::before { + background-color: @toggleHoverColor; + border: none; +} + /* Active */ .ui.toggle.checkbox input:checked ~ .box, .ui.toggle.checkbox input:checked ~ label { - color: @positiveCheckbox; + color: @toggleOnLabelColor; } .ui.toggle.checkbox input:checked ~ .box:before, .ui.toggle.checkbox input:checked ~ label:before { - background-color: @positiveCheckbox; + background-color: @toggleOnLaneColor; } .ui.toggle.checkbox input:checked ~ .box:after, .ui.toggle.checkbox input:checked ~ label:after { diff --git a/src/themes/packages/default/modules/checkbox.variables b/src/themes/packages/default/modules/checkbox.variables index d3ed58623..4be777c9f 100755 --- a/src/themes/packages/default/modules/checkbox.variables +++ b/src/themes/packages/default/modules/checkbox.variables @@ -25,7 +25,7 @@ ; /* Checkmark */ -@checkboxCheckOffset: 1px; +@checkboxCheckOffset: 2px; /*------------------- Coupling @@ -69,39 +69,55 @@ ; /* Slider */ -@sliderHandleSize: 1.5rem; +@sliderSize: 1.5rem; +@sliderHandleSize: @sliderSize; @sliderLineWidth: 3.5rem; @sliderLineHeight: 0.25rem; @sliderLineVerticalOffset: 0.4rem; +@sliderLineColor: @neutralCheckbox; +@sliderLineRadius: @circularRadius; @sliderHandleOffset: (1rem - @sliderHandleSize) / 2; @sliderTravelDistance: @sliderLineWidth - @sliderHandleSize; + @sliderLabelDistance: @sliderLineWidth + 1rem; +@sliderOffLabelColor: @unselectedTextColor; -@sliderSize: @sliderHandleSize; +@sliderOnLineColor: @strongTransparentBlack; +@sliderOnLabelColor: @selectedTextColor; @sliderLabelLineHeight: 1rem; +@sliderHoverLaneBackground: @strongTransparentBlack; +@sliderHoverLabelColor: @selectedTextColor; + + /* Toggle */ -@toggleSize: 1.75rem; +@toggleSize: 1.5rem; @toggleHandleSize: @toggleSize; @toggleHandleRadius: @circularRadius; @toggleHandleOffset: 0rem; +@toggleHandleTransition: + background 0.3s ease 0s, + left 0.3s ease 0s +; @toggleLaneWidth: 3.5rem; -@toggleLaneHeight: 1.75rem; +@toggleLaneHeight: @toggleSize; @toggleLaneVerticalOffset: 0rem; @toggleOffOffset: -0.05rem; @toggleOnOffset: (@toggleLaneWidth - @toggleHandleSize) + 0.05rem; -@toggleLabelDistance: @toggleLaneWidth + @toggleSize; +@toggleLabelDistance: @toggleLaneWidth + 1rem; @toggleLabelLineHeight: 1.5rem; -@toggleLabelTransition: - background 0.3s ease 0s, - left 0.3s ease 0s -; + @toggleFocusColor: @strongTransparentBlack; +@toggleHoverColor: @toggleFocusColor; + +@toggleOffLabelColor: @checkboxColor; +@toggleOnLabelColor: @positiveCheckbox; +@toggleOnLaneColor: @positiveCheckbox;