Massaf has uploaded a new change for review. https://gerrit.wikimedia.org/r/51034
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 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/_type.scss M modules/scss/settings/_colors.scss M modules/scss/settings/_typography.scss 10 files changed, 262 insertions(+), 27 deletions(-) git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/Agora refs/changes/34/51034/1 diff --git a/config.rb b/config.rb index 9c85fec..eb88aed 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 = false # 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..7ff12a6 100644 --- a/modules/css/ext.agora.css +++ b/modules/css/ext.agora.css @@ -1,7 +1,24 @@ /* Agora styles */ /* _effects.scss */ /* Mixins for visual effects in CSS3 */ -/* line 8, ../scss/components/_buttons.scss */ +.flush-left { + float: left; + margin-left: 0; + padding-left: 0; +} + +.flush-right { + float: right; + margin-right: 0; + padding-right: 0; +} + +.center-block { + display: block; + margin-left: auto; + margin-right: auto; +} + button.mw-ui-button, input[type="submit"].mw-ui-button, a.mw-ui-button { display: -moz-inline-stack; display: inline-block; @@ -28,16 +45,15 @@ -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; } -/* line 38, ../scss/mixins/_effects.scss */ button.mw-ui-button:hover, button.mw-ui-button.hover, input[type="submit"].mw-ui-button:hover, input[type="submit"].mw-ui-button.hover, a.mw-ui-button:hover, a.mw-ui-button.hover { background-color: gainsboro; *background-color: gainsboro; @@ -49,24 +65,20 @@ background-image: -o-linear-gradient(top, #e9e9e9, #dcdcdc); background-image: linear-gradient(top, #e9e9e9, #dcdcdc); } -/* line 43, ../scss/mixins/_effects.scss */ button.mw-ui-button:active, button.mw-ui-button.active, input[type="submit"].mw-ui-button:active, input[type="submit"].mw-ui-button.active, a.mw-ui-button:active, a.mw-ui-button.active { background-image: none; background-color: #c1c1c1; text-shadow: none; } -/* line 53, ../scss/mixins/_effects.scss */ button.mw-ui-button:disabled, button.mw-ui-button.disabled, input[type="submit"].mw-ui-button:disabled, input[type="submit"].mw-ui-button.disabled, a.mw-ui-button:disabled, a.mw-ui-button.disabled { background-image: none; background-color: #c9c9c9; opacity: 0.5; text-shadow: none; } -/* line 37, ../scss/components/_buttons.scss */ button.mw-ui-button:disabled, button.mw-ui-button.disabled, input[type="submit"].mw-ui-button:disabled, input[type="submit"].mw-ui-button.disabled, a.mw-ui-button:disabled, a.mw-ui-button.disabled { cursor: default; } -/* line 44, ../scss/components/_buttons.scss */ button.mw-ui-button.blue, button.mw-ui-button.primary, input[type="submit"].mw-ui-button.blue, input[type="submit"].mw-ui-button.primary, a.mw-ui-button.blue, a.mw-ui-button.primary { background-color: #3366bb; *background-color: #3366bb; @@ -81,7 +93,6 @@ text-shadow: 0 1px 1px rgba(51, 102, 187, 0.75); border: 1px solid #3162b3; } -/* line 38, ../scss/mixins/_effects.scss */ button.mw-ui-button.blue:hover, button.mw-ui-button.blue.hover, button.mw-ui-button.primary:hover, button.mw-ui-button.primary.hover, input[type="submit"].mw-ui-button.blue:hover, input[type="submit"].mw-ui-button.blue.hover, input[type="submit"].mw-ui-button.primary:hover, input[type="submit"].mw-ui-button.primary.hover, a.mw-ui-button.blue:hover, a.mw-ui-button.blue.hover, a.mw-ui-button.primary:hover, a.mw-ui-button.primary.hover { background-color: #4779cd; *background-color: #4779cd; @@ -93,20 +104,17 @@ background-image: -o-linear-gradient(top, #5b88d2, #4779cd); background-image: linear-gradient(top, #5b88d2, #4779cd); } -/* line 43, ../scss/mixins/_effects.scss */ button.mw-ui-button.blue:active, button.mw-ui-button.blue.active, button.mw-ui-button.primary:active, button.mw-ui-button.primary.active, input[type="submit"].mw-ui-button.blue:active, input[type="submit"].mw-ui-button.blue.active, input[type="submit"].mw-ui-button.primary:active, input[type="submit"].mw-ui-button.primary.active, a.mw-ui-button.blue:active, a.mw-ui-button.blue.active, a.mw-ui-button.primary:active, a.mw-ui-button.primary.active { background-image: none; background-color: #305faf; text-shadow: none; } -/* line 53, ../scss/mixins/_effects.scss */ button.mw-ui-button.blue:disabled, button.mw-ui-button.blue.disabled, button.mw-ui-button.primary:disabled, button.mw-ui-button.primary.disabled, input[type="submit"].mw-ui-button.blue:disabled, input[type="submit"].mw-ui-button.blue.disabled, input[type="submit"].mw-ui-button.primary:disabled, input[type="submit"].mw-ui-button.primary.disabled, a.mw-ui-button.blue:disabled, a.mw-ui-button.blue.disabled, a.mw-ui-button.primary:disabled, a.mw-ui-button.primary.disabled { background-image: none; background-color: #3366bb; opacity: 0.5; text-shadow: none; } -/* line 49, ../scss/components/_buttons.scss */ button.mw-ui-button.green, button.mw-ui-button.constructive, input[type="submit"].mw-ui-button.green, input[type="submit"].mw-ui-button.constructive, a.mw-ui-button.green, a.mw-ui-button.constructive { background-color: #27aa65; *background-color: #27aa65; @@ -121,7 +129,6 @@ text-shadow: 0 1px 1px rgba(39, 170, 101, 0.75); border: 1px solid #25a260; } -/* line 38, ../scss/mixins/_effects.scss */ button.mw-ui-button.green:hover, button.mw-ui-button.green.hover, button.mw-ui-button.constructive:hover, button.mw-ui-button.constructive.hover, input[type="submit"].mw-ui-button.green:hover, input[type="submit"].mw-ui-button.green.hover, input[type="submit"].mw-ui-button.constructive:hover, input[type="submit"].mw-ui-button.constructive.hover, a.mw-ui-button.green:hover, a.mw-ui-button.green.hover, a.mw-ui-button.constructive:hover, a.mw-ui-button.constructive.hover { background-color: #2ec977; *background-color: #2ec977; @@ -133,20 +140,17 @@ background-image: -o-linear-gradient(top, #3ed384, #2ec977); background-image: linear-gradient(top, #3ed384, #2ec977); } -/* line 43, ../scss/mixins/_effects.scss */ button.mw-ui-button.green:active, button.mw-ui-button.green.active, button.mw-ui-button.constructive:active, button.mw-ui-button.constructive.active, input[type="submit"].mw-ui-button.green:active, input[type="submit"].mw-ui-button.green.active, input[type="submit"].mw-ui-button.constructive:active, input[type="submit"].mw-ui-button.constructive.active, a.mw-ui-button.green:active, a.mw-ui-button.green.active, a.mw-ui-button.constructive:active, a.mw-ui-button.constructive.active { background-image: none; background-color: #249e5e; text-shadow: none; } -/* line 53, ../scss/mixins/_effects.scss */ button.mw-ui-button.green:disabled, button.mw-ui-button.green.disabled, button.mw-ui-button.constructive:disabled, button.mw-ui-button.constructive.disabled, input[type="submit"].mw-ui-button.green:disabled, input[type="submit"].mw-ui-button.green.disabled, input[type="submit"].mw-ui-button.constructive:disabled, input[type="submit"].mw-ui-button.constructive.disabled, a.mw-ui-button.green:disabled, a.mw-ui-button.green.disabled, a.mw-ui-button.constructive:disabled, a.mw-ui-button.constructive.disabled { background-image: none; background-color: #27aa65; opacity: 0.5; text-shadow: none; } -/* line 54, ../scss/components/_buttons.scss */ button.mw-ui-button.red, button.mw-ui-button.destructive, input[type="submit"].mw-ui-button.red, input[type="submit"].mw-ui-button.destructive, a.mw-ui-button.red, a.mw-ui-button.destructive { background-color: #cc0000; *background-color: #cc0000; @@ -161,7 +165,6 @@ text-shadow: 0 1px 1px rgba(204, 0, 0, 0.75); border: 1px solid #c20000; } -/* line 38, ../scss/mixins/_effects.scss */ button.mw-ui-button.red:hover, button.mw-ui-button.red.hover, button.mw-ui-button.destructive:hover, button.mw-ui-button.destructive.hover, input[type="submit"].mw-ui-button.red:hover, input[type="submit"].mw-ui-button.red.hover, input[type="submit"].mw-ui-button.destructive:hover, input[type="submit"].mw-ui-button.destructive.hover, a.mw-ui-button.red:hover, a.mw-ui-button.red.hover, a.mw-ui-button.destructive:hover, a.mw-ui-button.destructive.hover { background-color: #f20000; *background-color: #f20000; @@ -173,25 +176,107 @@ background-image: -o-linear-gradient(top, #ff0d0d, #f20000); background-image: linear-gradient(top, #ff0d0d, #f20000); } -/* line 43, ../scss/mixins/_effects.scss */ button.mw-ui-button.red:active, button.mw-ui-button.red.active, button.mw-ui-button.destructive:active, button.mw-ui-button.destructive.active, input[type="submit"].mw-ui-button.red:active, input[type="submit"].mw-ui-button.red.active, input[type="submit"].mw-ui-button.destructive:active, input[type="submit"].mw-ui-button.destructive.active, a.mw-ui-button.red:active, a.mw-ui-button.red.active, a.mw-ui-button.destructive:active, a.mw-ui-button.destructive.active { background-image: none; background-color: #bd0000; text-shadow: none; } -/* line 53, ../scss/mixins/_effects.scss */ button.mw-ui-button.red:disabled, button.mw-ui-button.red.disabled, button.mw-ui-button.destructive:disabled, button.mw-ui-button.destructive.disabled, input[type="submit"].mw-ui-button.red:disabled, input[type="submit"].mw-ui-button.red.disabled, input[type="submit"].mw-ui-button.destructive:disabled, input[type="submit"].mw-ui-button.destructive.disabled, a.mw-ui-button.red:disabled, a.mw-ui-button.red.disabled, a.mw-ui-button.destructive:disabled, a.mw-ui-button.destructive.disabled { background-image: none; background-color: #cc0000; opacity: 0.5; text-shadow: none; } -/* 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%; } + +.mw-ui-input, +.mw-ui-field-label, +.mw-ui-checkbox-label { + font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif; + font-size: 1em; + line-height: 1.4em; +} + +.mw-ui-input { + outline: 0; + border-style: solid; + border-width: 1px; + border-color: #c9c9c9; +} +.mw-ui-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; +} +.mw-ui-input[type="text"], .mw-ui-input[type="password"] { + color: #252525; + padding: 0.25em 0 0.2em 0.5em; +} + +.mw-ui-field-label, +.mw-ui-checkbox-label, +.mw-ui-block-label { + font-weight: bold; + font-size: 0.8em; + color: #7d7d7d; +} + +.mw-ui-checkbox-label { + cursor: pointer; + vertical-align: bottom; + line-height: normal; + height: 1em; + font-weight: normal; +} +.mw-ui-checkbox-label > input[type="checkbox"], .mw-ui-checkbox-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; +} + +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; +} +ul.mw-ui-formlist li { + display: block; + margin: 0 0 15px 0; + padding: 0; + width: 100%; +} +ul.mw-ui-formlist li label.mw-ui-block-label { + display: block; + margin: 0 0 0.2em 0; + padding: 0; + width: 100%; +} +ul.mw-ui-formlist li input[type="text"], ul.mw-ui-formlist li input[type="password"], +ul.mw-ui-formlist li .mw-ui-checkbox-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; +} +ul.mw-ui-formlist li input[type="text"], ul.mw-ui-formlist li input[type="password"], ul.mw-ui-formlist li .mw-ui-button { + width: 100%; +} 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..1a711d2 --- /dev/null +++ b/modules/scss/components/_forms.scss @@ -0,0 +1,110 @@ +// Form elements and layouts + +// -------------------------------------------------------------------------- +// Elements +// -------------------------------------------------------------------------- + +.mw-ui-input, +.mw-ui-field-label, +.mw-ui-checkbox-label { + @include default-type; +} + +.mw-ui-input { + @include reset-focus; // Removes OS field focus + + border: { + style: solid; + width: 1px; + color: $agoraGray; + }; + + &:focus { + @include box-shadow($agoraBlueShadow 0px 0px 5px); + + border: { + color: $agoraBlueShadow; + }; + } + + &[type="text"], + &[type="password"] { + color: $agoraTextColor; + padding: 0.25em 0 0.2em 0.5em; + } +} + +.mw-ui-field-label, +.mw-ui-checkbox-label, +.mw-ui-block-label { + font: { + weight: bold; + size: 0.8em; + }; + color: darken($agoraGray, 30%); +} + +.mw-ui-checkbox-label { + 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; + } +} + +// -------------------------------------------------------------------------- +// 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%; + + label.mw-ui-block-label { + display: block; + margin: 0 0 0.2em 0; + padding: 0; + width: 100%; + } + + input[type="text"], input[type="password"], + .mw-ui-checkbox-label, .mw-ui-button { + display: block; + @include box-sizing(border-box); + margin: 0; + } + + input[type="text"], input[type="password"], .mw-ui-button { + width: 100%; + } + + } +} \ 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..4980196 --- /dev/null +++ b/modules/scss/components/_utilities.scss @@ -0,0 +1,25 @@ +// Generic helper classes that could be used in many elements/layouts + +// -------------------------------------------------------------------------- +// Positioning +// -------------------------------------------------------------------------- + +.flush-left { + float: left; + margin-left: 0; + padding-left: 0; +} + +.flush-right { + float: right; + margin-right: 0; + padding-right: 0; +} + +.center-block { + display: block; + margin: { + left: auto; + right: auto; + }; +} \ No newline at end of file diff --git a/modules/scss/mixins/_all.scss b/modules/scss/mixins/_all.scss index 7ae60d3..35dca3e 100644 --- a/modules/scss/mixins/_all.scss +++ b/modules/scss/mixins/_all.scss @@ -1 +1,2 @@ +@import "type"; @import "effects"; \ 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/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: newchange Gerrit-Change-Id: Ic37f1c02dc528fa78232857b39a7c986e5e8927f Gerrit-PatchSet: 1 Gerrit-Project: mediawiki/extensions/Agora Gerrit-Branch: master Gerrit-Owner: Massaf <[email protected]> _______________________________________________ MediaWiki-commits mailing list [email protected] https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
