Prtksxna has uploaded a new change for review.
https://gerrit.wikimedia.org/r/176395
Change subject: [WIP] mediawiki.ui: Add select/drop down
......................................................................
[WIP] mediawiki.ui: Add select/drop down
- Only hover state
- <select> inside <div>
- <div> clipping the arrow and adding image
- Can't give state information to parent element :(
Todo:
- SVG chevron
- Test on more browsers
- Try more states
- Get a spec
Change-Id: Ie68f4b5025a54cf427c2891418c551c6cf8b2ba2
---
M docs/kss/Makefile
M resources/Resources.php
A resources/src/mediawiki.ui/components/images/chevron.png
A resources/src/mediawiki.ui/components/select.less
4 files changed, 89 insertions(+), 2 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/core
refs/changes/95/176395/1
diff --git a/docs/kss/Makefile b/docs/kss/Makefile
index 31feec1..f382bfc 100644
--- a/docs/kss/Makefile
+++ b/docs/kss/Makefile
@@ -6,7 +6,7 @@
$(eval KSS_RL_TMP := $(shell mktemp /tmp/tmp.XXXXXXXXXX))
# Keep module names in strict alphabetical order, so CSS loads in the same
order as ResourceLoader's addModuleStyles does; this can affect rendering.
# See OutputPage::makeResourceLoaderLink.
- @curl -sG
"${MEDIAWIKI_LOAD_URL}?modules=mediawiki.legacy.commonPrint|mediawiki.legacy.shared|mediawiki.ui|mediawiki.ui.anchor|mediawiki.ui.button|mediawiki.ui.checkbox|mediawiki.ui.radio|mediawiki.ui.icon|mediawiki.ui.input|mediawiki.ui.text&only=styles"
> $(KSS_RL_TMP)
+ @curl -sG
"${MEDIAWIKI_LOAD_URL}?modules=mediawiki.legacy.commonPrint|mediawiki.legacy.shared|mediawiki.ui|mediawiki.ui.anchor|mediawiki.ui.button|mediawiki.ui.checkbox|mediawiki.ui.radio|mediawiki.ui.select|mediawiki.ui.icon|mediawiki.ui.input|mediawiki.ui.text&only=styles"
> $(KSS_RL_TMP)
@node_modules/.bin/kss-node ../../resources/src/mediawiki.ui static/
--css $(KSS_RL_TMP) -t styleguide-template
@rm $(KSS_RL_TMP)
diff --git a/resources/Resources.php b/resources/Resources.php
index 88965d0..41010e1 100644
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -1533,7 +1533,15 @@
'position' => 'top',
'targets' => array( 'desktop', 'mobile' ),
),
- // Lightweight module for anchor styles
+ 'mediawiki.ui.select' => array(
+ 'skinStyles' => array(
+ 'default' => array(
+
'resources/src/mediawiki.ui/components/select.less',
+ ),
+ ),
+ 'position' => 'top',
+ 'targets' => array( 'desktop', 'mobile' ),
+ ),
'mediawiki.ui.anchor' => array(
'skinStyles' => array(
'default' => array(
diff --git a/resources/src/mediawiki.ui/components/images/chevron.png
b/resources/src/mediawiki.ui/components/images/chevron.png
new file mode 100644
index 0000000..5d8e1fe
--- /dev/null
+++ b/resources/src/mediawiki.ui/components/images/chevron.png
Binary files differ
diff --git a/resources/src/mediawiki.ui/components/select.less
b/resources/src/mediawiki.ui/components/select.less
new file mode 100644
index 0000000..7938e05
--- /dev/null
+++ b/resources/src/mediawiki.ui/components/select.less
@@ -0,0 +1,79 @@
+// Select
+@import "mediawiki.mixins";
+@import "mediawiki.ui/variables";
+@import "mediawiki.ui/mixins";
+
+// Select
+//
+// Apply the mw-ui-select class to select.
+//
+// Styleguide 9.
+
+// mw-ui-select
+//
+// Style an select using MediaWiki UI.
+// Currently in draft status and subject to change.
+//
+// Markup:
+// <div class="mw-ui-select">
+// <select>
+// <option>Inputs</option>
+// <option>Buttons</option>
+// <option>Checkboxes</option>
+// <option>Radioboxes</option>
+// </select>
+// </div>
+//
+// Styleguide 9.1.
+.mw-ui-select {
+
+ width: 160px;
+ height: 2em;
+ overflow: hidden;
+ margin: 0;
+ padding: 0;
+ border-radius: @borderRadius;
+ border: 1px solid @colorGray8;
+ .box-sizing( border-box );
+ background-color: #fff;
+ background-image: url( 'images/chevron.png' );
+ background-repeat: no-repeat;
+ background-position: center right;
+
+ select {
+ width: 180px;
+
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+
+ border: none;
+ border-radius: 0;
+ background: transparent;
+ font-size: 1em;
+ line-height: 2em;
+ height: 100%;
+ .box-sizing( border-box );
+ padding: 0 1em;
+ margin: 0;
+ border-bottom: 1px solid #fff;
+ outline: none;
+
+ &:focus {
+ outline: none;
+ }
+
+ &:-moz-focusring {
+ color: transparent;
+ text-shadow: 0 0 0 #000;
+ }
+
+ &:hover {
+ border-bottom: 1px solid @colorGray8;
+ }
+ }
+
+
+
+
+}
\ No newline at end of file
--
To view, visit https://gerrit.wikimedia.org/r/176395
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Ie68f4b5025a54cf427c2891418c551c6cf8b2ba2
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/core
Gerrit-Branch: master
Gerrit-Owner: Prtksxna <psax...@wikimedia.org>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
