Spage has uploaded a new change for review.
https://gerrit.wikimedia.org/r/58447
Change subject: Prefix even chained classes with "mw-ui-"
......................................................................
Prefix even chained classes with "mw-ui-"
Kaldari points out that without this, user or wiki CSS names like
"primary" will affect the Agora styles. Thus class="mw-ui-button big
block primary" becomes class="mw-ui-button mw-ui-big mw-ui-block
mw-ui-primary". It's more verbose, but cleanly separated.
Change-Id: I35f6e58311368deaaa4595ab3459cd22c5c57e18
---
M modules/css/mediawiki.ui.default.css
M modules/css/mediawiki.ui.vector.css
M modules/scss/components/default/_buttons.scss
M modules/scss/components/vector/_buttons.scss
M modules/scss/mixins/_effects.scss
5 files changed, 34 insertions(+), 34 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/Agora
refs/changes/47/58447/1
diff --git a/modules/css/mediawiki.ui.default.css
b/modules/css/mediawiki.ui.default.css
index 08647f8..b98ed80 100644
--- a/modules/css/mediawiki.ui.default.css
+++ b/modules/css/mediawiki.ui.default.css
@@ -64,7 +64,7 @@
cursor: pointer;
}
/* line 38, ../scss/mixins/_effects.scss */
-.mw-ui-button:hover, .mw-ui-button.hover {
+.mw-ui-button:hover, .mw-ui-button.mw-ui-hover {
background-color: gainsboro;
*background-color: gainsboro;
*zoom: 1;
@@ -77,28 +77,28 @@
text-decoration: none;
}
/* line 44, ../scss/mixins/_effects.scss */
-.mw-ui-button:active, .mw-ui-button.active {
+.mw-ui-button:active, .mw-ui-button.mw-ui-active {
background-image: none;
background-color: #c1c1c1;
text-shadow: none;
}
/* line 54, ../scss/mixins/_effects.scss */
-.mw-ui-button:disabled, .mw-ui-button.disabled {
+.mw-ui-button:disabled, .mw-ui-button.mw-ui-disabled {
background-image: none;
background-color: #c9c9c9;
opacity: 0.5;
text-shadow: none;
}
/* line 33, ../scss/components/default/_buttons.scss */
-.mw-ui-button:disabled, .mw-ui-button.disabled {
+.mw-ui-button:disabled, .mw-ui-button.mw-ui-disabled {
cursor: default;
}
/* line 39, ../scss/components/default/_buttons.scss */
-.mw-ui-button.big {
+.mw-ui-button.mw-ui-big {
font-size: 1.3em;
}
/* line 44, ../scss/components/default/_buttons.scss */
-.mw-ui-button.block {
+.mw-ui-button.mw-ui-block {
display: block;
width: 100%;
}
diff --git a/modules/css/mediawiki.ui.vector.css
b/modules/css/mediawiki.ui.vector.css
index aa28f54..9e6dc84 100644
--- a/modules/css/mediawiki.ui.vector.css
+++ b/modules/css/mediawiki.ui.vector.css
@@ -63,7 +63,7 @@
cursor: pointer;
}
/* line 38, ../scss/mixins/_effects.scss */
-.mw-ui-button:hover, .mw-ui-button.hover {
+.mw-ui-button:hover, .mw-ui-button.mw-ui-hover {
background-color: gainsboro;
*background-color: gainsboro;
*zoom: 1;
@@ -76,28 +76,28 @@
text-decoration: none;
}
/* line 44, ../scss/mixins/_effects.scss */
-.mw-ui-button:active, .mw-ui-button.active {
+.mw-ui-button:active, .mw-ui-button.mw-ui-active {
background-image: none;
background-color: #c1c1c1;
text-shadow: none;
}
/* line 54, ../scss/mixins/_effects.scss */
-.mw-ui-button:disabled, .mw-ui-button.disabled {
+.mw-ui-button:disabled, .mw-ui-button.mw-ui-disabled {
background-image: none;
background-color: #c9c9c9;
opacity: 0.5;
text-shadow: none;
}
/* line 33, ../scss/components/default/_buttons.scss */
-.mw-ui-button:disabled, .mw-ui-button.disabled {
+.mw-ui-button:disabled, .mw-ui-button.mw-ui-disabled {
cursor: default;
}
/* line 39, ../scss/components/default/_buttons.scss */
-.mw-ui-button.big {
+.mw-ui-button.mw-ui-big {
font-size: 1.3em;
}
/* line 44, ../scss/components/default/_buttons.scss */
-.mw-ui-button.block {
+.mw-ui-button.mw-ui-block {
display: block;
width: 100%;
}
@@ -131,7 +131,7 @@
}
/* line 6, ../scss/components/vector/_buttons.scss */
-.mw-ui-button.primary {
+.mw-ui-button.mw-ui-primary {
background-color: #3366bb;
*background-color: #3366bb;
*zoom: 1;
@@ -146,7 +146,7 @@
border: 1px solid #3162b3;
}
/* line 38, ../scss/mixins/_effects.scss */
-.mw-ui-button.primary:hover, .mw-ui-button.primary.hover {
+.mw-ui-button.mw-ui-primary:hover, .mw-ui-button.mw-ui-primary.mw-ui-hover {
background-color: #4779cd;
*background-color: #4779cd;
*zoom: 1;
@@ -159,20 +159,20 @@
text-decoration: none;
}
/* line 44, ../scss/mixins/_effects.scss */
-.mw-ui-button.primary:active, .mw-ui-button.primary.active {
+.mw-ui-button.mw-ui-primary:active, .mw-ui-button.mw-ui-primary.mw-ui-active {
background-image: none;
background-color: #305faf;
text-shadow: none;
}
/* line 54, ../scss/mixins/_effects.scss */
-.mw-ui-button.primary:disabled, .mw-ui-button.primary.disabled {
+.mw-ui-button.mw-ui-primary:disabled,
.mw-ui-button.mw-ui-primary.mw-ui-disabled {
background-image: none;
background-color: #3366bb;
opacity: 0.5;
text-shadow: none;
}
/* line 10, ../scss/components/vector/_buttons.scss */
-.mw-ui-button.constructive {
+.mw-ui-button.mw-ui-constructive {
background-color: #27aa65;
*background-color: #27aa65;
*zoom: 1;
@@ -187,7 +187,7 @@
border: 1px solid #25a260;
}
/* line 38, ../scss/mixins/_effects.scss */
-.mw-ui-button.constructive:hover, .mw-ui-button.constructive.hover {
+.mw-ui-button.mw-ui-constructive:hover,
.mw-ui-button.mw-ui-constructive.mw-ui-hover {
background-color: #2ec977;
*background-color: #2ec977;
*zoom: 1;
@@ -200,20 +200,20 @@
text-decoration: none;
}
/* line 44, ../scss/mixins/_effects.scss */
-.mw-ui-button.constructive:active, .mw-ui-button.constructive.active {
+.mw-ui-button.mw-ui-constructive:active,
.mw-ui-button.mw-ui-constructive.mw-ui-active {
background-image: none;
background-color: #249e5e;
text-shadow: none;
}
/* line 54, ../scss/mixins/_effects.scss */
-.mw-ui-button.constructive:disabled, .mw-ui-button.constructive.disabled {
+.mw-ui-button.mw-ui-constructive:disabled,
.mw-ui-button.mw-ui-constructive.mw-ui-disabled {
background-image: none;
background-color: #27aa65;
opacity: 0.5;
text-shadow: none;
}
/* line 14, ../scss/components/vector/_buttons.scss */
-.mw-ui-button.destructive {
+.mw-ui-button.mw-ui-destructive {
background-color: #cc0000;
*background-color: #cc0000;
*zoom: 1;
@@ -228,7 +228,7 @@
border: 1px solid #c20000;
}
/* line 38, ../scss/mixins/_effects.scss */
-.mw-ui-button.destructive:hover, .mw-ui-button.destructive.hover {
+.mw-ui-button.mw-ui-destructive:hover,
.mw-ui-button.mw-ui-destructive.mw-ui-hover {
background-color: #f20000;
*background-color: #f20000;
*zoom: 1;
@@ -241,13 +241,13 @@
text-decoration: none;
}
/* line 44, ../scss/mixins/_effects.scss */
-.mw-ui-button.destructive:active, .mw-ui-button.destructive.active {
+.mw-ui-button.mw-ui-destructive:active,
.mw-ui-button.mw-ui-destructive.mw-ui-active {
background-image: none;
background-color: #bd0000;
text-shadow: none;
}
/* line 54, ../scss/mixins/_effects.scss */
-.mw-ui-button.destructive:disabled, .mw-ui-button.destructive.disabled {
+.mw-ui-button.mw-ui-destructive:disabled,
.mw-ui-button.mw-ui-destructive.mw-ui-disabled {
background-image: none;
background-color: #cc0000;
opacity: 0.5;
diff --git a/modules/scss/components/default/_buttons.scss
b/modules/scss/components/default/_buttons.scss
index 77335dc..8451ce0 100644
--- a/modules/scss/components/default/_buttons.scss
+++ b/modules/scss/components/default/_buttons.scss
@@ -30,18 +30,18 @@
cursor: pointer;
&:disabled,
- &.disabled {
+ &.mw-ui-disabled {
cursor: default;
}
// Button sizes and displays
// -----------------------------------------
- &.big {
+ &.mw-ui-big {
font: {
size: $baseFontSize * 1.3;
}
}
- &.block {
+ &.mw-ui-block {
display: block;
width: 100%;
}
diff --git a/modules/scss/components/vector/_buttons.scss
b/modules/scss/components/vector/_buttons.scss
index 8ab2a42..6557e5d 100644
--- a/modules/scss/components/vector/_buttons.scss
+++ b/modules/scss/components/vector/_buttons.scss
@@ -3,15 +3,15 @@
.mw-ui-button {
// Button colors determined by function.
// -----------------------------------------
- &.primary {
+ &.mw-ui-primary {
@include buttonColors($agoraBlue);
}
- &.constructive {
+ &.mw-ui-constructive {
@include buttonColors($agoraGreen);
}
- &.destructive {
+ &.mw-ui-destructive {
@include buttonColors($agoraRed);
}
}
diff --git a/modules/scss/mixins/_effects.scss
b/modules/scss/mixins/_effects.scss
index 7edfe7c..00226cb 100644
--- a/modules/scss/mixins/_effects.scss
+++ b/modules/scss/mixins/_effects.scss
@@ -35,13 +35,13 @@
border: 1px solid darken($baseColor, 2%);
&:hover,
- &.hover {
+ &.mw-ui-hover {
@include vertical-gradient(lighten($baseColor, 12.5%),
lighten($baseColor, 7.5%));
text-decoration: none;
}
&:active,
- &.active {
+ &.mw-ui-active {
background: {
image: none;
color: darken($baseColor, 3%);
@@ -51,7 +51,7 @@
}
&:disabled,
- &.disabled {
+ &.mw-ui-disabled {
background: {
image: none;
color: $baseColor;
@@ -59,4 +59,4 @@
opacity: 0.5;
text-shadow: none;
}
-}
\ No newline at end of file
+}
--
To view, visit https://gerrit.wikimedia.org/r/58447
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I35f6e58311368deaaa4595ab3459cd22c5c57e18
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/Agora
Gerrit-Branch: master
Gerrit-Owner: Spage <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
