# 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)
'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' ),
),
--- /dev/null
+@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 );
+}