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

Add mw-ui-* context colors for any element, plus special handling for anchors

Browse source 
Progressive, constructive, destructive can now be used independently of mw-ui-button.

Change-Id: I89d80927d603407678182592a1b12e2132de4141
This commit is contained in:
Shahyar 2014-07-30 12:44:19 -04:00 committed by Matthew Flaschen
parent a41f824ea8
commit 5c74148ba3
3 changed files with 84 additions and 1 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: nodecheck
# Generates CSS of mediawiki.ui and mediawiki.ui.button using ResourceLoader, then applies it to the
# KSS style guide
$(eval KSS_RL_TMP := $(shell mktemp /tmp/tmp.XXXXXXXXXX))
@curl -sG "${MEDIAWIKI_LOAD_URL}?modules=mediawiki.ui.checkbox|mediawiki.ui.input|mediawiki.legacy.shared|mediawiki.legacy.commonPrint|mediawiki.ui|mediawiki.ui.button&only=styles" > $(KSS_RL_TMP)
@curl -sG "${MEDIAWIKI_LOAD_URL}?modules=mediawiki.ui.anchor|mediawiki.ui.checkbox|mediawiki.ui.input|mediawiki.legacy.shared|mediawiki.legacy.commonPrint|mediawiki.ui|mediawiki.ui.button&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)

6
resources/Resources.php
View file

@ -1433,6 +1433,12 @@ return array(
'styles' => array(
'resources/src/mediawiki.ui/components/checkbox.less',
),
),
// Lightweight module for anchor styles
'mediawiki.ui.anchor' => array(
'styles' => array(
'resources/src/mediawiki.ui/components/anchors.less',
),
'position' => 'top',
'targets' => array( 'desktop', 'mobile' ),
),

77
resources/src/mediawiki.ui/components/anchors.less Normal file
View file

@ -0,0 +1,77 @@
@import "mediawiki.mixins";
@import "mediawiki.ui/variables";
@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;
}
}
// Hover state
&:hover {
color: lighten( @mainColor, @colorLightenPercentage );
}
// Focus and active states
&:focus, &:active {
color: darken( @mainColor, @colorDarkenPercentage );
outline: none; // outline fix
}
color: @mainColor;
// Quiet mode is gray at first
&.mw-ui-quiet {
.mw-ui-anchor-quiet( @mainColor );
}
}
.mw-ui-anchor-quiet( @mainColor ) {
color: @colorTextLight;
text-decoration: none;
&:hover {
color: @mainColor;
}
&:focus, &:active {
color: darken( @mainColor, @colorDarkenPercentage );
}
}
/*
Text & 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.
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>
.mw-ui-quiet - Quiet until interaction.
Styleguide 6.1.
*/
.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 );
}