JGonera has uploaded a new change for review.
https://gerrit.wikimedia.org/r/72648
Change subject: Style all the inputs and textareas in the same way
......................................................................
Style all the inputs and textareas in the same way
Rounded corners, same kind of border. Also, simplify search input's CSS
a bit (and its clear button).
Change-Id: I9775185114bffe45debaf167e1b80e15ef7f0f67
---
M less/common/mf-buttons.less
M less/common/mf-common.less
M less/common/ui.less
M less/mf-variables.less
M less/modules/editor.less
M less/modules/mf-search.less
M stylesheets/common/mf-common.css
M stylesheets/common/ui.css
M stylesheets/modules/editor.css
M stylesheets/modules/mf-search.css
10 files changed, 21 insertions(+), 21 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/48/72648/1
diff --git a/less/common/mf-buttons.less b/less/common/mf-buttons.less
index 823e76f..a3cb69e 100644
--- a/less/common/mf-buttons.less
+++ b/less/common/mf-buttons.less
@@ -71,12 +71,13 @@
.button,
button,
input[type=submit] {
- line-height: @headerElementHeight - 2 *
@headerElementBorderHeight;
+ // 2 is top and bottom border
+ line-height: @headerElementHeight - 2;
padding: 0 1.25em;
text-decoration: none;
.vertical-gradient(#fff, #e9e9ea, 45%, 100%);
color: #58595b;
- border: @headerElementBorderHeight solid #9ea0a3;
+ border: 1px solid #9ea0a3;
}
.button-bar {
diff --git a/less/common/mf-common.less b/less/common/mf-common.less
index ebe80f2..3e2234d 100644
--- a/less/common/mf-common.less
+++ b/less/common/mf-common.less
@@ -32,6 +32,8 @@
input:not([type=submit]), textarea {
background: #fff;
border: 1px solid #ccc;
+ border-radius: 3px;
+ padding: 5px;
}
button.disabled {
diff --git a/less/common/ui.less b/less/common/ui.less
index 284bcea..0be531f 100644
--- a/less/common/ui.less
+++ b/less/common/ui.less
@@ -63,10 +63,7 @@
/* Search */
input.search {
-webkit-appearance: none;
- border-radius: 3px;
- border: @headerElementBorderHeight solid #c9c9c9;
outline: none;
- padding: 0 0 0 5px;
width: 100%;
height: @headerElementHeight;
// FIXME: unable to check but the important may not be needed for Nokia
S60;
diff --git a/less/mf-variables.less b/less/mf-variables.less
index aaf47ee..1555671 100644
--- a/less/mf-variables.less
+++ b/less/mf-variables.less
@@ -4,7 +4,6 @@
@searchBoxColor: #fafafa;
@headerHeight: 46px;
@headerElementHeight: @headerHeight - 16;
-@headerElementBorderHeight: 1px;
@headerBorderBottom: #e3e3e3;
// page actions
@@ -45,7 +44,6 @@
// calculated values
@secondaryNavWidth: @headerElementHeight;
-@searchMarginTop: ( ( @headerHeight - @headerElementHeight ) / 2 ) +
@headerElementBorderHeight;
// calculated colors
@searchBoxColorTo: darken( @searchBoxColor, 2.75% );
diff --git a/less/modules/editor.less b/less/modules/editor.less
index f1bdf3a..4fbd830 100644
--- a/less/modules/editor.less
+++ b/less/modules/editor.less
@@ -46,6 +46,7 @@
input {
margin: .7em 0 0;
width: 100%;
+ .box-sizing( border-box );
}
.preview {
diff --git a/less/modules/mf-search.less b/less/modules/mf-search.less
index 16cd52f..229108f 100644
--- a/less/modules/mf-search.less
+++ b/less/modules/mf-search.less
@@ -3,24 +3,24 @@
Change-Id: Id7715a83f8dc42cbdb23d8cbf982801606236f7c
*/
@import "../mf-mixins.less";
+@clearWidth: 24px;
input.search {
/* visual indication that search is happening */
&.searching {
background-color: #eee;
}
+ padding-right: @clearWidth;
}
form {
.clear {
- top: @searchMarginTop;
+ top: 0;
+ bottom: 0;
right: 10px;
- width: 24px;
- height: @headerElementHeight;
- background: url(../common/images/close-button-beta.png)
no-repeat scroll 0 0 transparent;
- margin: 0;
- background-position: right center;
+ width: @clearWidth;
+ background: url(../common/images/close-button-beta.png)
no-repeat scroll 100% 50%;
.background-size( auto, 12px );
cursor: pointer;
position: absolute;
diff --git a/stylesheets/common/mf-common.css b/stylesheets/common/mf-common.css
index 9d8b554..360bbbb 100644
--- a/stylesheets/common/mf-common.css
+++ b/stylesheets/common/mf-common.css
@@ -27,6 +27,8 @@
textarea {
background: #fff;
border: 1px solid #ccc;
+ border-radius: 3px;
+ padding: 5px;
}
button.disabled {
opacity: 0.2;
diff --git a/stylesheets/common/ui.css b/stylesheets/common/ui.css
index 06f4236..3be284a 100644
--- a/stylesheets/common/ui.css
+++ b/stylesheets/common/ui.css
@@ -393,10 +393,7 @@
/* Search */
input.search {
-webkit-appearance: none;
- border-radius: 3px;
- border: 1px solid #c9c9c9;
outline: none;
- padding: 0 0 0 5px;
width: 100%;
height: 30px;
background-color: white !important;
diff --git a/stylesheets/modules/editor.css b/stylesheets/modules/editor.css
index f855129..80a82a4 100644
--- a/stylesheets/modules/editor.css
+++ b/stylesheets/modules/editor.css
@@ -35,6 +35,9 @@
.editor-overlay input {
margin: .7em 0 0;
width: 100%;
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
}
.editor-overlay .preview {
padding-bottom: 15em;
diff --git a/stylesheets/modules/mf-search.css
b/stylesheets/modules/mf-search.css
index a4512dc..24e7a3f 100644
--- a/stylesheets/modules/mf-search.css
+++ b/stylesheets/modules/mf-search.css
@@ -5,18 +5,17 @@
input.search {
/* visual indication that search is happening */
+ padding-right: 24px;
}
input.search.searching {
background-color: #eee;
}
form .clear {
- top: 9px;
+ top: 0;
+ bottom: 0;
right: 10px;
width: 24px;
- height: 30px;
- background: url(../common/images/close-button-beta.png) no-repeat scroll 0 0
transparent;
- margin: 0;
- background-position: right center;
+ background: url(../common/images/close-button-beta.png) no-repeat scroll
100% 50%;
/* use -webkit prefix for older android browsers eg. nexus 1 */
-o-background-size: auto 12px;
--
To view, visit https://gerrit.wikimedia.org/r/72648
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I9775185114bffe45debaf167e1b80e15ef7f0f67
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: JGonera <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
