From 2568fbbdd42ec770b261ba1cd8bd51ee3734b8d7 Mon Sep 17 00:00:00 2001 From: Shahyar Date: Fri, 22 Aug 2014 16:50:43 -0700 Subject: [PATCH] Change mw-ui anchors to require mw-ui-anchor base class, and introduce mw-ui-text base class 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 --- docs/kss/Makefile | 2 +- resources/Resources.php | 10 +++ .../src/mediawiki.ui/components/anchors.less | 62 ++++++++----------- .../src/mediawiki.ui/components/text.less | 40 ++++++++++++ 4 files changed, 77 insertions(+), 37 deletions(-) create mode 100644 resources/src/mediawiki.ui/components/text.less diff --git a/docs/kss/Makefile b/docs/kss/Makefile index dfee6109b8..a28bf3e554 100644 --- a/docs/kss/Makefile +++ b/docs/kss/Makefile @@ -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) diff --git a/resources/Resources.php b/resources/Resources.php index 3bb5b4e53b..9e7b2c84d0 100644 --- a/resources/Resources.php +++ b/resources/Resources.php @@ -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( diff --git a/resources/src/mediawiki.ui/components/anchors.less b/resources/src/mediawiki.ui/components/anchors.less index e1b258dda8..1a58170308 100644 --- a/resources/src/mediawiki.ui/components/anchors.less +++ b/resources/src/mediawiki.ui/components/anchors.less @@ -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 - -Allows you to give text a context as to the type of action it is indicating. - -Styleguide 6. -*/ - -/* -Guidelines +Anchors -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: -Progressive -Constructive -Destructive +Progressive +Constructive +Destructive .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 ); + } } diff --git a/resources/src/mediawiki.ui/components/text.less b/resources/src/mediawiki.ui/components/text.less new file mode 100644 index 0000000000..500d42c4a4 --- /dev/null +++ b/resources/src/mediawiki.ui/components/text.less @@ -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: +Progressive +Constructive +Destructive + +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; + } +} \ No newline at end of file -- 2.20.1