jenkins-bot has submitted this change and it was merged.
Change subject: Remove font-related styles from default (non-Vector) CSS:
......................................................................
Remove font-related styles from default (non-Vector) CSS:
* This includes all font-family, most font-size, and all explicit line heights.
* Also, change to use relative paths.
* Remove duplicate font-size.
Patch Set 8 removes the static test/{monobook,vector}/login files
demonstrating the change that were in earlier patches.
Change-Id: Ie3b30962dee36b43cdb70bd6c9d897317378b861
---
M config.rb
M modules/css/mediawiki.ui.default.css
M modules/css/mediawiki.ui.vector.css
M modules/scss/components/_vector.scss
M modules/scss/components/default/_buttons.scss
M modules/scss/components/default/_forms.scss
M modules/scss/components/vector/_buttons.scss
A modules/scss/components/vector/_forms.scss
M modules/scss/mixins/_forms.scss
M modules/scss/mixins/_type.scss
10 files changed, 71 insertions(+), 82 deletions(-)
Approvals:
Ori.livneh: Looks good to me, approved
jenkins-bot: Verified
diff --git a/config.rb b/config.rb
index d9a0ca2..a5a229a 100644
--- a/config.rb
+++ b/config.rb
@@ -12,7 +12,7 @@
output_style = :expanded
# To enable relative paths to assets via compass helper functions. Uncomment:
-# relative_assets = true
+relative_assets = true
# To disable debugging comments that display the original location of your
selectors. Uncomment:
line_comments = true
diff --git a/modules/css/mediawiki.ui.default.css
b/modules/css/mediawiki.ui.default.css
index b98ed80..52d019e 100644
--- a/modules/css/mediawiki.ui.default.css
+++ b/modules/css/mediawiki.ui.default.css
@@ -54,12 +54,9 @@
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
- line-height: 1.4em;
vertical-align: middle;
text-align: center;
text-decoration: none;
- font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
- font-size: 1em;
font-weight: bold;
cursor: pointer;
}
@@ -89,21 +86,21 @@
opacity: 0.5;
text-shadow: none;
}
-/* line 33, ../scss/components/default/_buttons.scss */
+/* line 30, ../scss/components/default/_buttons.scss */
.mw-ui-button:disabled, .mw-ui-button.mw-ui-disabled {
cursor: default;
}
-/* line 39, ../scss/components/default/_buttons.scss */
+/* line 36, ../scss/components/default/_buttons.scss */
.mw-ui-button.mw-ui-big {
font-size: 1.3em;
}
-/* line 44, ../scss/components/default/_buttons.scss */
+/* line 41, ../scss/components/default/_buttons.scss */
.mw-ui-button.mw-ui-block {
display: block;
width: 100%;
}
-/* line 51, ../scss/components/default/_buttons.scss */
+/* line 48, ../scss/components/default/_buttons.scss */
.mw-ui-button-group > * {
-webkit-border-radius: 0;
-moz-border-radius: 0;
@@ -112,7 +109,7 @@
border-radius: 0;
float: left;
}
-/* line 55, ../scss/components/default/_buttons.scss */
+/* line 52, ../scss/components/default/_buttons.scss */
.mw-ui-button-group > *:first-child {
-moz-border-radius-topleft: 3px;
-webkit-border-top-left-radius: 3px;
@@ -121,7 +118,7 @@
-webkit-border-bottom-left-radius: 3px;
border-bottom-left-radius: 3px;
}
-/* line 60, ../scss/components/default/_buttons.scss */
+/* line 57, ../scss/components/default/_buttons.scss */
.mw-ui-button-group > *:last-child {
-moz-border-radius-topright: 3px;
-webkit-border-top-right-radius: 3px;
@@ -136,19 +133,16 @@
-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;
width: 290px;
}
-/* line 18, ../scss/components/default/_forms.scss */
+/* line 17, ../scss/components/default/_forms.scss */
.mw-ui-vform > div {
display: block;
margin: 0 0 15px 0;
padding: 0;
width: 100%;
}
-/* line 27, ../scss/components/default/_forms.scss */
+/* line 26, ../scss/components/default/_forms.scss */
.mw-ui-vform > div input,
.mw-ui-vform > div label,
.mw-ui-vform > div .mw-ui-button {
@@ -159,27 +153,23 @@
margin: 0;
width: 100%;
}
-/* line 34, ../scss/components/default/_forms.scss */
+/* line 33, ../scss/components/default/_forms.scss */
.mw-ui-vform > div 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.35em 0 0.35em 0.5em;
}
-/* line 15, ../scss/mixins/_forms.scss */
+/* line 12, ../scss/mixins/_forms.scss */
.mw-ui-vform > div 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 38, ../scss/components/default/_forms.scss */
+/* line 37, ../scss/components/default/_forms.scss */
.mw-ui-vform > div label {
font-size: 0.9em;
color: #7d7d7d;
@@ -187,11 +177,11 @@
margin: 0 0 0.2em 0;
padding: 0;
}
-/* line 34, ../scss/mixins/_forms.scss */
+/* line 31, ../scss/mixins/_forms.scss */
.mw-ui-vform > div label * {
font-weight: normal;
}
-/* line 45, ../scss/components/default/_forms.scss */
+/* line 44, ../scss/components/default/_forms.scss */
.mw-ui-vform > div label.mw-ui-checkbox-label, .mw-ui-vform > div
label.mw-ui-radio-label {
margin-bottom: 0.5em;
cursor: pointer;
@@ -199,7 +189,7 @@
line-height: normal;
font-weight: normal;
}
-/* line 50, ../scss/mixins/_forms.scss */
+/* line 47, ../scss/mixins/_forms.scss */
.mw-ui-vform > div label.mw-ui-checkbox-label > input[type="checkbox"],
.mw-ui-vform > div label.mw-ui-checkbox-label > input[type="radio"],
.mw-ui-vform > div label.mw-ui-radio-label > input[type="checkbox"],
.mw-ui-vform > div label.mw-ui-radio-label > input[type="radio"] {
width: auto;
height: auto;
@@ -210,7 +200,7 @@
border-color: #c9c9c9;
cursor: pointer;
}
-/* line 52, ../scss/components/default/_forms.scss */
+/* line 51, ../scss/components/default/_forms.scss */
.mw-ui-vform > div input[type="checkbox"],
.mw-ui-vform > div input[type="radio"] {
display: inline;
@@ -220,20 +210,16 @@
width: auto;
}
-/* line 67, ../scss/components/default/_forms.scss */
+/* line 66, ../scss/components/default/_forms.scss */
.mw-ui-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.35em 0 0.35em 0.5em;
}
-/* line 15, ../scss/mixins/_forms.scss */
+/* line 12, ../scss/mixins/_forms.scss */
.mw-ui-input:focus {
-webkit-box-shadow: #4091ed 0px 0px 5px;
-moz-box-shadow: #4091ed 0px 0px 5px;
@@ -241,17 +227,17 @@
border-color: #4091ed;
}
-/* line 72, ../scss/components/default/_forms.scss */
+/* line 71, ../scss/components/default/_forms.scss */
.mw-ui-block-label, .mw-ui-formlist div label {
font-size: 0.9em;
color: #7d7d7d;
}
-/* line 34, ../scss/mixins/_forms.scss */
+/* line 31, ../scss/mixins/_forms.scss */
.mw-ui-block-label *, .mw-ui-formlist div label * {
font-weight: normal;
}
-/* line 81, ../scss/components/default/_forms.scss */
+/* line 80, ../scss/components/default/_forms.scss */
.mw-ui-checkbox-label, .mw-ui-radio-label {
margin-bottom: 0.5em;
cursor: pointer;
@@ -259,7 +245,7 @@
line-height: normal;
font-weight: normal;
}
-/* line 50, ../scss/mixins/_forms.scss */
+/* line 47, ../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;
diff --git a/modules/css/mediawiki.ui.vector.css
b/modules/css/mediawiki.ui.vector.css
index 9e6dc84..39c3786 100644
--- a/modules/css/mediawiki.ui.vector.css
+++ b/modules/css/mediawiki.ui.vector.css
@@ -53,12 +53,9 @@
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
- line-height: 1.4em;
vertical-align: middle;
text-align: center;
text-decoration: none;
- font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
- font-size: 1em;
font-weight: bold;
cursor: pointer;
}
@@ -88,21 +85,21 @@
opacity: 0.5;
text-shadow: none;
}
-/* line 33, ../scss/components/default/_buttons.scss */
+/* line 30, ../scss/components/default/_buttons.scss */
.mw-ui-button:disabled, .mw-ui-button.mw-ui-disabled {
cursor: default;
}
-/* line 39, ../scss/components/default/_buttons.scss */
+/* line 36, ../scss/components/default/_buttons.scss */
.mw-ui-button.mw-ui-big {
font-size: 1.3em;
}
-/* line 44, ../scss/components/default/_buttons.scss */
+/* line 41, ../scss/components/default/_buttons.scss */
.mw-ui-button.mw-ui-block {
display: block;
width: 100%;
}
-/* line 51, ../scss/components/default/_buttons.scss */
+/* line 48, ../scss/components/default/_buttons.scss */
.mw-ui-button-group > * {
-webkit-border-radius: 0;
-moz-border-radius: 0;
@@ -111,7 +108,7 @@
border-radius: 0;
float: left;
}
-/* line 55, ../scss/components/default/_buttons.scss */
+/* line 52, ../scss/components/default/_buttons.scss */
.mw-ui-button-group > *:first-child {
-moz-border-radius-topleft: 3px;
-webkit-border-top-left-radius: 3px;
@@ -120,7 +117,7 @@
-webkit-border-bottom-left-radius: 3px;
border-bottom-left-radius: 3px;
}
-/* line 60, ../scss/components/default/_buttons.scss */
+/* line 57, ../scss/components/default/_buttons.scss */
.mw-ui-button-group > *:last-child {
-moz-border-radius-topright: 3px;
-webkit-border-top-right-radius: 3px;
@@ -130,6 +127,12 @@
border-bottom-right-radius: 3px;
}
+/* line 3, ../scss/components/vector/_buttons.scss */
+.mw-ui-button {
+ font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+ font-size: 1em;
+ line-height: 1.4em;
+}
/* line 6, ../scss/components/vector/_buttons.scss */
.mw-ui-button.mw-ui-primary {
background-color: #3366bb;
@@ -259,19 +262,16 @@
-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;
width: 290px;
}
-/* line 18, ../scss/components/default/_forms.scss */
+/* line 17, ../scss/components/default/_forms.scss */
.mw-ui-vform > div {
display: block;
margin: 0 0 15px 0;
padding: 0;
width: 100%;
}
-/* line 27, ../scss/components/default/_forms.scss */
+/* line 26, ../scss/components/default/_forms.scss */
.mw-ui-vform > div input,
.mw-ui-vform > div label,
.mw-ui-vform > div .mw-ui-button {
@@ -282,27 +282,23 @@
margin: 0;
width: 100%;
}
-/* line 34, ../scss/components/default/_forms.scss */
+/* line 33, ../scss/components/default/_forms.scss */
.mw-ui-vform > div 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.35em 0 0.35em 0.5em;
}
-/* line 15, ../scss/mixins/_forms.scss */
+/* line 12, ../scss/mixins/_forms.scss */
.mw-ui-vform > div 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 38, ../scss/components/default/_forms.scss */
+/* line 37, ../scss/components/default/_forms.scss */
.mw-ui-vform > div label {
font-size: 0.9em;
color: #7d7d7d;
@@ -310,11 +306,11 @@
margin: 0 0 0.2em 0;
padding: 0;
}
-/* line 34, ../scss/mixins/_forms.scss */
+/* line 31, ../scss/mixins/_forms.scss */
.mw-ui-vform > div label * {
font-weight: normal;
}
-/* line 45, ../scss/components/default/_forms.scss */
+/* line 44, ../scss/components/default/_forms.scss */
.mw-ui-vform > div label.mw-ui-checkbox-label, .mw-ui-vform > div
label.mw-ui-radio-label {
margin-bottom: 0.5em;
cursor: pointer;
@@ -322,7 +318,7 @@
line-height: normal;
font-weight: normal;
}
-/* line 50, ../scss/mixins/_forms.scss */
+/* line 47, ../scss/mixins/_forms.scss */
.mw-ui-vform > div label.mw-ui-checkbox-label > input[type="checkbox"],
.mw-ui-vform > div label.mw-ui-checkbox-label > input[type="radio"],
.mw-ui-vform > div label.mw-ui-radio-label > input[type="checkbox"],
.mw-ui-vform > div label.mw-ui-radio-label > input[type="radio"] {
width: auto;
height: auto;
@@ -333,7 +329,7 @@
border-color: #c9c9c9;
cursor: pointer;
}
-/* line 52, ../scss/components/default/_forms.scss */
+/* line 51, ../scss/components/default/_forms.scss */
.mw-ui-vform > div input[type="checkbox"],
.mw-ui-vform > div input[type="radio"] {
display: inline;
@@ -343,20 +339,16 @@
width: auto;
}
-/* line 67, ../scss/components/default/_forms.scss */
+/* line 66, ../scss/components/default/_forms.scss */
.mw-ui-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.35em 0 0.35em 0.5em;
}
-/* line 15, ../scss/mixins/_forms.scss */
+/* line 12, ../scss/mixins/_forms.scss */
.mw-ui-input:focus {
-webkit-box-shadow: #4091ed 0px 0px 5px;
-moz-box-shadow: #4091ed 0px 0px 5px;
@@ -364,17 +356,17 @@
border-color: #4091ed;
}
-/* line 72, ../scss/components/default/_forms.scss */
+/* line 71, ../scss/components/default/_forms.scss */
.mw-ui-block-label, .mw-ui-formlist div label {
font-size: 0.9em;
color: #7d7d7d;
}
-/* line 34, ../scss/mixins/_forms.scss */
+/* line 31, ../scss/mixins/_forms.scss */
.mw-ui-block-label *, .mw-ui-formlist div label * {
font-weight: normal;
}
-/* line 81, ../scss/components/default/_forms.scss */
+/* line 80, ../scss/components/default/_forms.scss */
.mw-ui-checkbox-label, .mw-ui-radio-label {
margin-bottom: 0.5em;
cursor: pointer;
@@ -382,7 +374,7 @@
line-height: normal;
font-weight: normal;
}
-/* line 50, ../scss/mixins/_forms.scss */
+/* line 47, ../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;
@@ -393,3 +385,12 @@
border-color: #c9c9c9;
cursor: pointer;
}
+
+/* line 5, ../scss/components/vector/_forms.scss */
+.mw-ui-vform,
+.mw-ui-vform > div input,
+.mw-ui-input {
+ font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+ font-size: 1em;
+ line-height: 1.4em;
+}
diff --git a/modules/scss/components/_vector.scss
b/modules/scss/components/_vector.scss
index 63dce88..e52a1ed 100644
--- a/modules/scss/components/_vector.scss
+++ b/modules/scss/components/_vector.scss
@@ -1,3 +1,3 @@
@import "utilities";
@import "vector/buttons";
-@import "default/forms";
\ No newline at end of file
+@import "vector/forms";
\ No newline at end of file
diff --git a/modules/scss/components/default/_buttons.scss
b/modules/scss/components/default/_buttons.scss
index 8451ce0..1ea9a18 100644
--- a/modules/scss/components/default/_buttons.scss
+++ b/modules/scss/components/default/_buttons.scss
@@ -12,7 +12,6 @@
@include border-radius($buttonBorderRadius);
// Content styling
- line-height: $baseLineHeight;
vertical-align: middle;
text: {
@@ -21,8 +20,6 @@
}
font: {
- family: $baseFontFamily;
- size: $baseFontSize;
weight: bold;
}
diff --git a/modules/scss/components/default/_forms.scss
b/modules/scss/components/default/_forms.scss
index 803b014..440669e 100644
--- a/modules/scss/components/default/_forms.scss
+++ b/modules/scss/components/default/_forms.scss
@@ -11,7 +11,6 @@
.mw-ui-vform {
@include box-sizing(border-box);
- @include default-type;
width: $defaultFormWidth;
diff --git a/modules/scss/components/vector/_buttons.scss
b/modules/scss/components/vector/_buttons.scss
index 6557e5d..8d5f0b6 100644
--- a/modules/scss/components/vector/_buttons.scss
+++ b/modules/scss/components/vector/_buttons.scss
@@ -14,4 +14,6 @@
&.mw-ui-destructive {
@include buttonColors($agoraRed);
}
+
+ @include vector-type;
}
diff --git a/modules/scss/components/vector/_forms.scss
b/modules/scss/components/vector/_forms.scss
new file mode 100644
index 0000000..73ea24e
--- /dev/null
+++ b/modules/scss/components/vector/_forms.scss
@@ -0,0 +1,7 @@
+@import "../default/forms"; // Layer Vector on top of the default settings.
+
+.mw-ui-vform,
+.mw-ui-vform > div input,
+.mw-ui-input {
+ @include vector-type;
+}
diff --git a/modules/scss/mixins/_forms.scss b/modules/scss/mixins/_forms.scss
index 7c1d119..ee9089d 100644
--- a/modules/scss/mixins/_forms.scss
+++ b/modules/scss/mixins/_forms.scss
@@ -1,10 +1,7 @@
+// Font is not included.
+// For Vector, that should be layered on top with vector-type
@mixin agora-field-styling() {
@include reset-focus; // Removes OS field focus
- @include default-type; // Default typography
-
- font: {
- size: 1em;
- };
border: {
style: solid;
diff --git a/modules/scss/mixins/_type.scss b/modules/scss/mixins/_type.scss
index c9a6e51..964d590 100644
--- a/modules/scss/mixins/_type.scss
+++ b/modules/scss/mixins/_type.scss
@@ -1,4 +1,4 @@
-@mixin default-type {
+@mixin vector-type {
font: {
family: $baseFontFamily;
size: $baseFontSize;
--
To view, visit https://gerrit.wikimedia.org/r/57544
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: Ie3b30962dee36b43cdb70bd6c9d897317378b861
Gerrit-PatchSet: 8
Gerrit-Project: mediawiki/extensions/Agora
Gerrit-Branch: master
Gerrit-Owner: Mattflaschen <[email protected]>
Gerrit-Reviewer: Massaf <[email protected]>
Gerrit-Reviewer: Matmarex <[email protected]>
Gerrit-Reviewer: Mattflaschen <[email protected]>
Gerrit-Reviewer: Ori.livneh <[email protected]>
Gerrit-Reviewer: Spage <[email protected]>
Gerrit-Reviewer: jenkins-bot
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
