Thijs/wiki.techinc.nl
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Change mw-ui anchors to require mw-ui-anchor base class, and introduce mw-ui-text base class

Browse source 
Introduced mw-ui-text base class for plain-text, non-interactable elements which require context colors (eg. icons)
Also added mw-ui-anchor for interactable elements (such as anchors)

Note: This is not supported by IE6 at current time.

Bug: 69212
Bug: 70801
Change-Id: I4d017d0a22cb4f3ca52b6228e45c0463c110ae64
This commit is contained in:
Shahyar 2014-08-22 16:50:43 -07:00 committed by Matthew Flaschen
parent c6289d013e
commit 2568fbbdd4
4 changed files with 77 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
docs/kss/Makefile
View file

@ -6,7 +6,7 @@ kss: kssnodecheck
$(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.icon|mediawiki.ui.input&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.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)

10
resources/Resources.php
View file

@ -1521,6 +1521,16 @@ return array(
'position' => 'top',
'targets' => array( 'desktop', 'mobile' ),
),
// Lightweight module for text styles
'mediawiki.ui.text' => array(
'skinStyles' => array(
'default' => array(
'resources/src/mediawiki.ui/components/text.less',
),
),
'position' => 'top',
'targets' => array( 'desktop', 'mobile' ),
),
/* es5-shim */
'es5-shim' => array(

62
resources/src/mediawiki.ui/components/anchors.less
View file

@ -3,13 +3,8 @@
@import "mediawiki.ui/mixins";
// Helpers
.mw-ui-anchor( @mainColor ) {
// Make all context classes take the main color in IE6
.select-ie6-only& {
&:link, &:visited, &:hover, &:focus, &:active {
color: @mainColor;
}
}
.mixin-mw-ui-anchor-styles( @mainColor ) {
color: @mainColor;
// Hover state
&:hover {
@ -21,15 +16,13 @@
outline: none; // outline fix
}
color: @mainColor;
// Quiet mode is gray at first
&.mw-ui-quiet {
.mw-ui-anchor-quiet( @mainColor );
.mixin-mw-ui-anchor-styles-quiet( @mainColor );
}
}
.mw-ui-anchor-quiet( @mainColor ) {
.mixin-mw-ui-anchor-styles-quiet( @mainColor ) {
color: @colorTextLight;
text-decoration: none;
@ -42,36 +35,33 @@
}
/*
Text & Anchors
Anchors
Allows you to give text a context as to the type of action it is indicating.
Styleguide 6.
*/
/*
Guidelines
This context should only applied on elements without special behavior (DIV, SPAN, etc.), including A elements. These classes cannot be applied for styling purposes on other elements (such as form elements), except when used in combination with .mw-ui-button to alter a button context.
The anchor base type can be applied to A elements when a basic context styling needs to be given to a link, without
having to assign it as a button type. mw-ui-anchor only changes the text color, and should not be used in combination
with other base classes, such as mw-ui-button.
Markup:
<a href=# class="mw-ui-progressive {$modifiers}">Progressive</a>
<a href=# class="mw-ui-constructive {$modifiers}">Constructive</a>
<a href=# class="mw-ui-destructive {$modifiers}">Destructive</a>
<a href=# class="mw-ui-anchor mw-ui-progressive {$modifiers}">Progressive</a>
<a href=# class="mw-ui-anchor mw-ui-constructive {$modifiers}">Constructive</a>
<a href=# class="mw-ui-anchor mw-ui-destructive {$modifiers}">Destructive</a>
.mw-ui-quiet - Quiet until interaction.
Styleguide 6.1.
Styleguide 6.2.
*/
.mw-ui-progressive {
.mw-ui-anchor( @colorProgressive );
}
.mw-ui-constructive {
.mw-ui-anchor( @colorConstructive );
}
.mw-ui-destructive {
.mw-ui-anchor( @colorDestructive );
}
.mw-ui-quiet {
.mw-ui-anchor-quiet( @colorTextLight );
// Setup compound anchor selectors (such as .mw-ui-anchor.my-ui-progressive)
.mw-ui-anchor {
&.mw-ui-progressive {
.mixin-mw-ui-anchor-styles( @colorProgressive );
}
&.mw-ui-constructive {
.mixin-mw-ui-anchor-styles( @colorConstructive );
}
&.mw-ui-destructive {
.mixin-mw-ui-anchor-styles( @colorDestructive );
}
}

40
resources/src/mediawiki.ui/components/text.less Normal file
View file

@ -0,0 +1,40 @@
@import "mediawiki.mixins";
@import "mediawiki.ui/variables";
@import "mediawiki.ui/mixins";
/*
Text & Anchors
Allows you to give text a context as to the type of action it is indicating.
Styleguide 6.
*/
/*
Text
Context classes may be used on elements with only plain-text content with the mw-ui-text base. When the context classes
are used on interactive and block-level elements, the appropriate alternative base type classes should also be used. For
example, mw-ui-anchor with A, or mw-ui-button with buttons.
Markup:
<span class="mw-ui-text mw-ui-progressive">Progressive</span>
<span class="mw-ui-text mw-ui-constructive">Constructive</span>
<span class="mw-ui-text mw-ui-destructive">Destructive</span>
Styleguide 6.1.
*/
.mw-ui-text {
// The selector order is like this on purpose; IE6 ignores the second selector,
// so we don't want to accidentally apply this color on all mw-ui-CONTEXT classes
.mw-ui-progressive& {
color: @colorProgressive;
}
.mw-ui-constructive& {
color: @colorConstructive;
}
.mw-ui-destructive& {
color: @colorDestructive;
}
}