Massaf has submitted this change and it was merged. Change subject: Add form elements to Agora ......................................................................
Add form elements to Agora This change includes: - Input text/password fields - Checkboxes, Radio Buttons, and their labels - A vertical form layout class It also touches a few other areas that support form elements. See a demo here: http://codepen.io/munaf/pen/hfJLt Patch 2: Changed default size of input text. Patch 3: Restructuring to minimize the number of classes the end-user has to apply to forms. Applying mw-ui-formlist to a ul results in auto-inheritance of field styling. See the CodePen example. Patch 4: Rebasing to master Patch 5: Ensure sub-elements of labels aren't bolded Patch 6: 1. Increased font size of forms 2. Edited Makefile to output comments to CSS 3. Converted utilities to mixins and prefixed with mw-ui-* Patch 7: Cleaned up trailing whitespace. Change-Id: Ic37f1c02dc528fa78232857b39a7c986e5e8927f --- M config.rb M modules/css/ext.agora.css M modules/scss/components/_all.scss M modules/scss/components/_buttons.scss A modules/scss/components/_forms.scss A modules/scss/components/_utilities.scss M modules/scss/mixins/_all.scss A modules/scss/mixins/_forms.scss A modules/scss/mixins/_type.scss A modules/scss/mixins/_utilities.scss M modules/scss/settings/_colors.scss M modules/scss/settings/_typography.scss 12 files changed, 337 insertions(+), 9 deletions(-) Approvals: Mattflaschen: Looks good to me, but someone else must approve Massaf: Verified; Looks good to me, approved jenkins-bot: Checked diff --git a/config.rb b/config.rb index 9c85fec..d9a0ca2 100644 --- a/config.rb +++ b/config.rb @@ -15,7 +15,7 @@ # relative_assets = true # To disable debugging comments that display the original location of your selectors. Uncomment: -# line_comments = false +line_comments = true # If you prefer the indented syntax, you might want to regenerate this diff --git a/modules/css/ext.agora.css b/modules/css/ext.agora.css index f4fbca5..704ce1b 100644 --- a/modules/css/ext.agora.css +++ b/modules/css/ext.agora.css @@ -1,6 +1,27 @@ /* Agora styles */ /* _effects.scss */ /* Mixins for visual effects in CSS3 */ +/* line 7, ../scss/components/_utilities.scss */ +.mw-ui-flush-left { + float: left; + margin-left: 0; + padding-left: 0; +} + +/* line 11, ../scss/components/_utilities.scss */ +.mw-ui-flush-right { + float: right; + margin-right: 0; + padding-right: 0; +} + +/* line 15, ../scss/components/_utilities.scss */ +.mw-ui-center-block { + display: block; + margin-left: auto; + margin-right: auto; +} + /* line 8, ../scss/components/_buttons.scss */ button.mw-ui-button, input[type="submit"].mw-ui-button, a.mw-ui-button { display: -moz-inline-stack; @@ -28,12 +49,12 @@ -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; - line-height: 18.2px; + line-height: 1.4em; vertical-align: middle; text-align: center; text-decoration: none; font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif; - font-size: 13px; + font-size: 1em; font-weight: bold; cursor: pointer; } @@ -188,10 +209,127 @@ } /* line 60, ../scss/components/_buttons.scss */ button.mw-ui-button.big, input[type="submit"].mw-ui-button.big, a.mw-ui-button.big { - font-size: 20.8px; + font-size: 1.3em; } /* line 65, ../scss/components/_buttons.scss */ button.mw-ui-button.block, input[type="submit"].mw-ui-button.block, a.mw-ui-button.block { display: block; width: 100%; } + +/* line 7, ../scss/components/_forms.scss */ +ul.mw-ui-formlist { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif; + font-size: 1em; + line-height: 1.4em; + list-style: none; + list-style-image: none; + width: 20em; +} +/* line 16, ../scss/components/_forms.scss */ +ul.mw-ui-formlist li { + display: block; + margin: 0 0 15px 0; + padding: 0; + width: 100%; +} +/* line 25, ../scss/components/_forms.scss */ +ul.mw-ui-formlist li input, +ul.mw-ui-formlist li label, +ul.mw-ui-formlist li .mw-ui-button { + display: block; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + margin: 0; + width: 100%; +} +/* line 32, ../scss/components/_forms.scss */ +ul.mw-ui-formlist li label { + width: auto; + margin: 0 0 0.2em 0; + padding: 0; +} +/* line 38, ../scss/components/_forms.scss */ +ul.mw-ui-formlist li label.mw-ui-checkbox-label, ul.mw-ui-formlist li label.mw-ui-radio-label { + cursor: pointer; + vertical-align: bottom; + line-height: normal; + height: 1em; + font-weight: normal; +} +/* line 50, ../scss/mixins/_forms.scss */ +ul.mw-ui-formlist li label.mw-ui-checkbox-label > input[type="checkbox"], ul.mw-ui-formlist li label.mw-ui-checkbox-label > input[type="radio"], ul.mw-ui-formlist li label.mw-ui-radio-label > input[type="checkbox"], ul.mw-ui-formlist li label.mw-ui-radio-label > input[type="radio"] { + width: auto; + height: auto; + margin: 0 0.3em 0 0; + padding: 0; + border-style: solid; + border-width: 1px; + border-color: #c9c9c9; + cursor: pointer; +} +/* line 45, ../scss/components/_forms.scss */ +ul.mw-ui-formlist li input[type="checkbox"], +ul.mw-ui-formlist li input[type="radio"] { + display: inline; + -webkit-box-sizing: content-box; + -moz-box-sizing: content-box; + box-sizing: content-box; + width: auto; +} + +/* line 60, ../scss/components/_forms.scss */ +.mw-ui-input, .mw-ui-formlist li input { + outline: 0; + font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif; + font-size: 1em; + line-height: 1.4em; + font-size: 1em; + border-style: solid; + border-width: 1px; + border-color: #c9c9c9; + color: #252525; + padding: 0.25em 0 0.2em 0.5em; +} +/* line 15, ../scss/mixins/_forms.scss */ +.mw-ui-input:focus, .mw-ui-formlist li input:focus { + -webkit-box-shadow: #4091ed 0px 0px 5px; + -moz-box-shadow: #4091ed 0px 0px 5px; + box-shadow: #4091ed 0px 0px 5px; + border-color: #4091ed; +} + +/* line 65, ../scss/components/_forms.scss */ +.mw-ui-block-label, .mw-ui-formlist li label { + font-weight: bold; + font-size: 0.9em; + color: #7d7d7d; +} +/* line 34, ../scss/mixins/_forms.scss */ +.mw-ui-block-label *, .mw-ui-formlist li label * { + font-weight: normal; +} + +/* line 74, ../scss/components/_forms.scss */ +.mw-ui-checkbox-label, .mw-ui-radio-label { + cursor: pointer; + vertical-align: bottom; + line-height: normal; + height: 1em; + font-weight: normal; +} +/* line 50, ../scss/mixins/_forms.scss */ +.mw-ui-checkbox-label > input[type="checkbox"], .mw-ui-checkbox-label > input[type="radio"], .mw-ui-radio-label > input[type="checkbox"], .mw-ui-radio-label > input[type="radio"] { + width: auto; + height: auto; + margin: 0 0.3em 0 0; + padding: 0; + border-style: solid; + border-width: 1px; + border-color: #c9c9c9; + cursor: pointer; +} diff --git a/modules/scss/components/_all.scss b/modules/scss/components/_all.scss index f9102ae..760fdee 100644 --- a/modules/scss/components/_all.scss +++ b/modules/scss/components/_all.scss @@ -1 +1,3 @@ -@import "buttons"; \ No newline at end of file +@import "utilities"; +@import "buttons"; +@import "forms"; \ No newline at end of file diff --git a/modules/scss/components/_buttons.scss b/modules/scss/components/_buttons.scss index 5a37543..6cca0ab 100644 --- a/modules/scss/components/_buttons.scss +++ b/modules/scss/components/_buttons.scss @@ -59,7 +59,7 @@ // ----------------------------------------- &.big { font: { - size: $baseFontSize * 1.6; + size: $baseFontSize * 1.3; } } &.block { diff --git a/modules/scss/components/_forms.scss b/modules/scss/components/_forms.scss new file mode 100644 index 0000000..e8af962 --- /dev/null +++ b/modules/scss/components/_forms.scss @@ -0,0 +1,75 @@ +// Form elements and layouts + +// -------------------------------------------------------------------------- +// Layouts +// -------------------------------------------------------------------------- + +ul.mw-ui-formlist { + @include box-sizing(border-box); + @include default-type; + + list-style: none; + list-style-image: none; + + width: 20em; + + li { + display: block; + margin: 0 0 15px 0; + padding: 0; + width: 100%; + + // MW currently doesn't use the type attribute everywhere on inputs + input, + label, + .mw-ui-button { + display: block; + @include box-sizing(border-box); + margin: 0; + width: 100%; + } + + label { + width: auto; + margin: 0 0 0.2em 0; + padding: 0; + + &.mw-ui-checkbox-label, &.mw-ui-radio-label { + @include agora-inline-label-styling; + } + } + + // Override the above styling just for checkboxes and radio inputs + input[type="checkbox"], + input[type="radio"] { + display: inline; + @include box-sizing(content-box); + width: auto; + } + + } +} + +// -------------------------------------------------------------------------- +// Elements +// -------------------------------------------------------------------------- + +// Apply mw-ui-input to fields individually to style them +// You don't need to use this if <input> is within a Agora form container +.mw-ui-input, .mw-ui-formlist li input { + @include agora-field-styling; // mixins/_forms.scss +} + +// Default label styling is mw-ui-block-label +.mw-ui-block-label, .mw-ui-formlist li label { + @include agora-label-styling; // mixins/_forms.scss +} + +// Checkbox and radio button label alignment hack +// <label class="mw-ui-checkbox-label"> +// <input type="checkbox" />Label +// </label> + +.mw-ui-checkbox-label, .mw-ui-radio-label { + @include agora-inline-label-styling; +} \ No newline at end of file diff --git a/modules/scss/components/_utilities.scss b/modules/scss/components/_utilities.scss new file mode 100644 index 0000000..4f1dba2 --- /dev/null +++ b/modules/scss/components/_utilities.scss @@ -0,0 +1,17 @@ +// Generic helper classes that could be used in many elements/layouts + +// -------------------------------------------------------------------------- +// Positioning +// -------------------------------------------------------------------------- + +.mw-ui-flush-left { + @include agora-flush-left; +} + +.mw-ui-flush-right { + @include agora-flush-right; +} + +.mw-ui-center-block { + @include agora-center-block; +} \ No newline at end of file diff --git a/modules/scss/mixins/_all.scss b/modules/scss/mixins/_all.scss index 7ae60d3..adc48cd 100644 --- a/modules/scss/mixins/_all.scss +++ b/modules/scss/mixins/_all.scss @@ -1 +1,4 @@ -@import "effects"; \ No newline at end of file +@import "utilities"; +@import "type"; +@import "effects"; +@import "forms"; \ No newline at end of file diff --git a/modules/scss/mixins/_forms.scss b/modules/scss/mixins/_forms.scss new file mode 100644 index 0000000..6459e31 --- /dev/null +++ b/modules/scss/mixins/_forms.scss @@ -0,0 +1,62 @@ +@mixin agora-field-styling() { + @include reset-focus; // Removes OS field focus + @include default-type; // Default typography + + font: { + size: 1em; + }; + + border: { + style: solid; + width: 1px; + color: $agoraGray; + }; + + &:focus { + @include box-shadow($agoraBlueShadow 0px 0px 5px); + + border: { + color: $agoraBlueShadow; + }; + } + + color: $agoraTextColor; + padding: 0.25em 0 0.2em 0.5em; +} + +@mixin agora-label-styling() { + font: { + weight: bold; + size: 0.9em; + }; + color: darken($agoraGray, 30%); + + & * { + font-weight: normal; + } +} + +@mixin agora-inline-label-styling() { + cursor: pointer; + vertical-align: bottom; + line-height: normal; + height: 1em; + + font: { + weight: normal; + }; + + & > input[type="checkbox"], + & > input[type="radio"] { + width: auto; + height: auto; + margin: 0 0.3em 0 0; + padding: 0; + border: { + style: solid; + width: 1px; + color: $agoraGray; + } + cursor: pointer; + } +} \ No newline at end of file diff --git a/modules/scss/mixins/_type.scss b/modules/scss/mixins/_type.scss new file mode 100644 index 0000000..c9a6e51 --- /dev/null +++ b/modules/scss/mixins/_type.scss @@ -0,0 +1,7 @@ +@mixin default-type { + font: { + family: $baseFontFamily; + size: $baseFontSize; + } + line-height: $baseLineHeight; +} \ No newline at end of file diff --git a/modules/scss/mixins/_utilities.scss b/modules/scss/mixins/_utilities.scss new file mode 100644 index 0000000..71a93b6 --- /dev/null +++ b/modules/scss/mixins/_utilities.scss @@ -0,0 +1,19 @@ +@mixin agora-flush-left() { + float: left; + margin-left: 0; + padding-left: 0; +} + +@mixin agora-flush-right() { + float: right; + margin-right: 0; + padding-right: 0; +} + +@mixin agora-center-block() { + display: block; + margin: { + left: auto; + right: auto; + }; +} \ No newline at end of file diff --git a/modules/scss/settings/_colors.scss b/modules/scss/settings/_colors.scss index 240fc82..0c18bdb 100644 --- a/modules/scss/settings/_colors.scss +++ b/modules/scss/settings/_colors.scss @@ -1,10 +1,12 @@ // Grays // ----------------------------------------- $agoraGray: #c9c9c9; +$agoraTextColor: #252525; // Blues // ----------------------------------------- $agoraBlue: #3366bb; +$agoraBlueShadow: #4091ed; // Greens // ----------------------------------------- diff --git a/modules/scss/settings/_typography.scss b/modules/scss/settings/_typography.scss index 7c92a4d..5f0cea2 100644 --- a/modules/scss/settings/_typography.scss +++ b/modules/scss/settings/_typography.scss @@ -1,3 +1,6 @@ -$baseFontSize: 13px; +$baseFontSize: 1em; $baseFontFamily: "Helvetica Neue", "Helvetica", "Arial", sans-serif; -$baseLineHeight: 1.4 * $baseFontSize; \ No newline at end of file +$baseLineHeight: 1.4 * $baseFontSize; +$baseFontColor: $agoraTextColor; + +$smallFontSize: 0.75em; \ No newline at end of file -- To view, visit https://gerrit.wikimedia.org/r/51034 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: merged Gerrit-Change-Id: Ic37f1c02dc528fa78232857b39a7c986e5e8927f Gerrit-PatchSet: 7 Gerrit-Project: mediawiki/extensions/Agora Gerrit-Branch: master Gerrit-Owner: Massaf <[email protected]> Gerrit-Reviewer: Massaf <[email protected]> Gerrit-Reviewer: Mattflaschen <[email protected]> Gerrit-Reviewer: Pginer <[email protected]> Gerrit-Reviewer: Robmoen <[email protected]> Gerrit-Reviewer: Spage <[email protected]> Gerrit-Reviewer: Trevor Parscal <[email protected]> Gerrit-Reviewer: jenkins-bot _______________________________________________ MediaWiki-commits mailing list [email protected] https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
