Prtksxna has submitted this change and it was merged.
Change subject: mediawiki.ui: Synchronise checkbox and radio code
......................................................................
mediawiki.ui: Synchronise checkbox and radio code
Get rid of tiny meaningless differences.
Change-Id: I78b3bf378bae1fce11b6ef4f85f7449421211721
---
M resources/src/mediawiki.ui/components/checkbox.less
M resources/src/mediawiki.ui/components/radio.less
2 files changed, 21 insertions(+), 15 deletions(-)
Approvals:
Prtksxna: Looks good to me, approved
diff --git a/resources/src/mediawiki.ui/components/checkbox.less
b/resources/src/mediawiki.ui/components/checkbox.less
index b479020..67f8a21 100644
--- a/resources/src/mediawiki.ui/components/checkbox.less
+++ b/resources/src/mediawiki.ui/components/checkbox.less
@@ -11,16 +11,20 @@
//
// Markup:
// <div class="mw-ui-checkbox">
-// <input type="checkbox" id="kss-example-5"><label
for="kss-example-5">Standard checkbox</label>
+// <input type="checkbox" id="kss-example-5">
+// <label for="kss-example-5">Standard checkbox</label>
// </div>
// <div class="mw-ui-checkbox">
-// <input type="checkbox" id="kss-example-5-checked" checked><label
for="kss-example-5-checked">Standard checked checkbox</label>
+// <input type="checkbox" id="kss-example-5-checked" checked>
+// <label for="kss-example-5-checked">Standard checked checkbox</label>
// </div>
// <div class="mw-ui-checkbox">
-// <input type="checkbox" id="kss-example-5-disabled" disabled><label
for="kss-example-5-disabled">Disabled checkbox</label>
+// <input type="checkbox" id="kss-example-5-disabled" disabled>
+// <label for="kss-example-5-disabled">Disabled checkbox</label>
// </div>
// <div class="mw-ui-checkbox">
-// <input type="checkbox" id="kss-example-5-disabled-checked" disabled
checked><label for="kss-example-5-disabled-checked">Disabled checked
checkbox</label>
+// <input type="checkbox" id="kss-example-5-disabled-checked" disabled
checked>
+// <label for="kss-example-5-disabled-checked">Disabled checked
checkbox</label>
// </div>
//
// Styleguide 5.
@@ -52,12 +56,13 @@
height: @checkboxSize;
// This is needed for Firefox mobile (See bug 71750 to
workaround default Firefox stylesheet)
max-width: none;
- margin-right: .4em;
+ margin-right: 0.4em;
// the pseudo before element of the label after the checkbox
now looks like a checkbox
& + label::before {
content: '';
cursor: pointer;
+ .box-sizing(border-box);
position: absolute;
left: 0;
border-radius: @borderRadius;
@@ -65,7 +70,6 @@
height: @checkboxSize;
background-color: #fff;
border: 1px solid @colorGray7;
- .box-sizing(border-box);
}
// when the input is checked, style the label pseudo before
element that followed as a checked checkbox
@@ -86,6 +90,7 @@
border-width: 2px;
}
+ &:focus:hover + label::before,
&:hover + label::before {
border-bottom-width: 3px;
}
diff --git a/resources/src/mediawiki.ui/components/radio.less
b/resources/src/mediawiki.ui/components/radio.less
index 6d8978e..3bbbb28 100644
--- a/resources/src/mediawiki.ui/components/radio.less
+++ b/resources/src/mediawiki.ui/components/radio.less
@@ -42,6 +42,7 @@
line-height: @radioSize;
* {
+ // reset font sizes (see bug 72727)
font: inherit;
vertical-align: middle;
}
@@ -59,8 +60,8 @@
// the pseudo before element of the label after the radio now
looks like a radio
& + label::before {
- cursor: pointer;
content: '';
+ cursor: pointer;
.box-sizing(border-box);
position: absolute;
left: 0;
@@ -80,6 +81,11 @@
background-origin: border-box;
}
+ &:active + label::before {
+ background-color: @colorGray13;
+ border-color: @colorGray13;
+ }
+
&:focus + label::before {
border-width: 2px;
}
@@ -89,19 +95,14 @@
border-bottom-width: 3px;
}
- &:active + label::before {
- background-color: @colorGray13;
- border-color: @colorGray13;
- }
-
- // disabled checked boxes have a gray background
+ // disabled radios have a gray background
&:disabled + label::before {
cursor: default;
- border-color: @colorGray14;
background-color: @colorGray14;
+ border-color: @colorGray14;
}
- // disabled and checked boxes have a white circle
+ // disabled and checked radios have a white circle
&:disabled:checked + label::before {
.background-image-svg('images/radio_disabled.svg',
'images/radio_disabled.png');
}
--
To view, visit https://gerrit.wikimedia.org/r/175030
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I78b3bf378bae1fce11b6ef4f85f7449421211721
Gerrit-PatchSet: 4
Gerrit-Project: mediawiki/core
Gerrit-Branch: master
Gerrit-Owner: Bartosz Dziewoński <matma....@gmail.com>
Gerrit-Reviewer: Bartosz Dziewoński <matma....@gmail.com>
Gerrit-Reviewer: Jack Phoenix <j...@countervandalism.net>
Gerrit-Reviewer: Prtksxna <psax...@wikimedia.org>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
