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