Jdlrobson has uploaded a new change for review.
https://gerrit.wikimedia.org/r/148465
Change subject: Remove buttons now cache has cleared.
......................................................................
Remove buttons now cache has cleared.
Change-Id: I7661bfe0dfb27681accbd3551cc2270d3ebee0a2
---
M Resources.php
D modules/new/styles/mediawiki.ui/buttons.less
2 files changed, 0 insertions(+), 367 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/Flow
refs/changes/65/148465/1
diff --git a/Resources.php b/Resources.php
index 89d09e4..ee3c43a 100644
--- a/Resources.php
+++ b/Resources.php
@@ -198,12 +198,6 @@
'flow-moderation-confirm-suppress-topic',
),
),
- // @todo: replace with mediawiki ui buttons
- 'ext.flow.mediawiki.ui.buttons' => $flowResourceTemplate + array(
- 'styles' => array(
- 'new/styles/mediawiki.ui/buttons.less',
- ),
- ),
// @todo: upstream to mediawiki ui
'ext.flow.mediawiki.ui.form' => $flowResourceTemplate + array(
'styles' => array(
diff --git a/modules/new/styles/mediawiki.ui/buttons.less
b/modules/new/styles/mediawiki.ui/buttons.less
deleted file mode 100644
index e4cf52c..0000000
--- a/modules/new/styles/mediawiki.ui/buttons.less
+++ /dev/null
@@ -1,361 +0,0 @@
-@import 'mediawiki.mixins';
-@import 'flow.colors';
-@import 'flow.helpers';
-
-/*
-Links and Form Controls
-
-Styleguide 2.
-*/
-
-// Helpers
-.flow-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
- a&:hover {
- color: lighten( @mainColor, @colorLightenPercentage );
- }
- // Focus and active states
- a&:focus, a&:active {
- color: darken( @mainColor, @colorDarkenPercentage );
- outline: none; // outline fix
- }
-
- // Omit IE6 from all other rules
- &[class] {
- color: @mainColor;
-
- // Quiet mode is gray at first
- &.flow-ui-quiet {
- .flow-ui-anchor-quiet( @mainColor );
- }
-
- // Active node is always colored
- &.flow-ui-active {
- &, &:link, &:visited {
- color: @mainColor;
- }
- }
- }
-}
-
-.flow-ui-anchor-quiet( @mainColor ) {
- color: @colorTextLight;
- text-decoration: none;
-
- a&:hover {
- color: @mainColor;
- }
- a&:focus, a&:active {
- color: darken( @mainColor, @colorDarkenPercentage );
- }
-}
-
-
-/*
-Anchors
-
-Allows you to give text a context as to the type of action it is indicating.
-
-<h3>Guidelines:</h3>
-
-The anchor context is only applied on A tags. These classes cannot be applied
for styling purposes on other elements,
-except when used in combination with .flow-ui-button.
-
-Markup:
-<a href=# class="mw-ui-progressive {$modifiers}">Progressive</a>
-<a href=# class="mw-ui-regressive {$modifiers}">Regressive</a>
-<a href=# class="mw-ui-constructive {$modifiers}">Constructive</a>
-<a href=# class="mw-ui-destructive {$modifiers}">Destructive</a>
-
-.flow-ui-quiet - Quiet until interaction.
-
-Styleguide 2.1.
-*/
-.flow-ui-progressive {
- .flow-ui-anchor( @colorProgressive );
-}
-.flow-ui-constructive {
- .flow-ui-anchor( @colorConstructive );
-}
-.flow-ui-destructive {
- .flow-ui-anchor( @colorDestructive );
-}
-.flow-ui-quiet {
- .flow-ui-anchor-quiet( @colorTextLight );
-}
-
-/*
-Buttons
-
-<h3>Guidelines:</h3>
-
-- .flow-ui-button can **only** be used on **A and BUTTON tags**. There is
conditional support for input[type=button], but this doesn't work in older
browsers.
-- .flow-ui-progressive, .flow-ui-constructive, and .flow-ui-destructive can be
applied alone on A, but can be applied in tandem with .flow-ui-button. *The
class order is important:* **base type** (mw-ui-button) must come **first**,
**mode** (mw-ui-quiet, mw-ui-sleeper) **second**, **visual type** (mw-ui-thin)
**third**, and **context** (mw-ui-progressive) comes **last**.
-- A .flow-ui-quiet button may **never** be the first or only button in a form.
-- Semantically, the **first button in a form should always be the affirmative
action** (eg. Submit). This is for accessibility purposes. Where it appears
visually is not as important.
-
-<h3>Notes:</h3>
-
-- IE6 does not apply any .flow-ui-button styles at all on BUTTON.
-- IE6 only applies the base .flow-ui-CONTEXT color on A, and doesn't care if
you are combining it (ie. .flow-ui-destructive.flow-ui-quiet = always red text).
-- IE7 and IE8 look slightly different from other browsers when rendering
certain modes of these buttons.
-
-Markup:
-<button class="mw-ui-button {$modifiers}">Default</button>
-<button class="mw-ui-button mw-ui-progressive
{$modifiers}">Progressive</button>
-<button class="mw-ui-button mw-ui-constructive
{$modifiers}">Constructive</button>
-<button class="mw-ui-button mw-ui-destructive
{$modifiers}">Destructive</button>
-
-.flow-ui-quiet - Quiet: A button that doesn't look like a button.
-.flow-ui-sleeper - Sleeper: A button which always looks like a button, but
uncolored until interaction.
-.flow-ui-inline - Inline: An even smaller button (zero padding) which also
inherits font weight.
-.flow-ui-button-althover - JS enhancement class used to dim elements beside
the main one
-
-Styleguide 2.2.
-*/
-
-// Helpers
-// Individual Button Contexts
-.flow-ui-button-context( @contextualColor ) {
- @borderColor: mix( @contextualColor, #000, 75% );
- @raisedColor: mix( @contextualColor, #fff, 92% );
- @depressedColor: darken( @contextualColor, 8% );
- @quietDepressedColor: darken( @contextualColor, 25% );
-
- .flow-ui-button-disabled-state() {
- &[disabled],
- &[disabled]:hover,
- &[disabled]:focus {
- background: @colorGrayLight;
- color: @colorWhite;
- text-shadow: none;
- .box-shadow( ~"none" );
- }
- }
-
- .flow-ui-button-normal-mode() {
- background: @contextualColor;
- color: @colorWhite;
- text-shadow: 0 1px rgba(0, 0, 0, .1);
-
- .flow-ui-button-disabled-state();
-
- &:hover,
- &:focus {
- background: @raisedColor;
- text-shadow: 0 1px rgba(0, 0, 0, .33);
- }
-
- &:hover {
- // Shadow under outer, 3D raising inner, edge shading
inner
- .box-shadow( ~"0 1px 0 0 rgba(0, 0, 0, .15), inset 0
-4px 0 0 @{borderColor}, inset 0 -1px 1px 0 rgba(0, 0, 0, .05)" );
- }
-
- &:focus {
- // 3D raising inner, edge shading inner
- .box-shadow( ~"inset 0 -4px 0 0 @{borderColor}, inset 0
-1px 1px 0 rgba(0, 0, 0, .05), inset 0 0 0 1px @{borderColor}" );
- }
-
- &:active {
- background: @depressedColor;
- // Slight 3D raising inner, deep edge shading inner
- .box-shadow( ~"inset 0 -2px 0 0 @{depressedColor},
inset 0 2px 0 0 rgba(0, 0, 0, .25)" );
- }
- }
-
- // Default mode (fully colored)
- &:not(.flow-ui-quiet) {
- .flow-ui-button-normal-mode();
- }
- .lte-ie8 & { // IE7 & IE8 do not support :not() selector
- .flow-ui-button-normal-mode();
- }
-
- // Quiet mode (transparent bg, no border; text color on activity)
- .lte-ie8 &.flow-ui-quiet,
- &.flow-ui-quiet {
- background: transparent;
- color: @colorTextLight;
-
- &:hover {
- color: @contextualColor;
- }
-
- &:active {
- color: @depressedColor;
- }
-
- &:focus {
- color: @quietDepressedColor;
- }
-
- .flow-ui-button-disabled-state();
- }
-
- // Sleeper mode (transparent bg, no border; bg on activity)
- &.flow-ui-sleeper {
- background: transparent;
- background: ~"@{colorGrayLightest}\9"; //IE7-IE8 hack; they
don't have box-shadow
- color: mix( @contextualColor, @colorTextLight, 20%);
- text-shadow: none;
- .box-shadow( ~"inset 0 0 0 1px @{colorGrayLighter}" );
-
- &:hover,
- &:focus {
- color: @colorWhite;
- }
- }
-}
-
-// Default button styles
-.flow-ui-button-default() {
- background: @colorGrayLightest;
- color: @colorTextLight;
-
- .flow-ui-button-normal-mode() {
- &:hover {
- .box-shadow( ~"0 1px 0 0 rgba(0, 0, 0, .15), inset 0
-3px 0 0 @{colorGrayLighter}, inset 0 -1px 1px 0 rgba(0, 0, 0, .05)" );
- color: @colorText;
- }
- &:focus {
- .box-shadow( ~"inset 0 -3px 0 0 @{colorGrayLight},
inset 0 -1px 1px 0 rgba(0, 0, 0, .05)" );
- }
- }
-
- // Default mode (fully colored)
- &:not(.flow-ui-quiet) {
- .flow-ui-button-normal-mode();
- }
- .lte-ie8 & { // IE7 & IE8 do not support :not() selector
- .flow-ui-button-normal-mode();
- }
-
- // Quiet mode (transparent bg, no border; text color on activity)
- .lte-ie8 &.flow-ui-quiet,
- &.flow-ui-quiet {
- background: transparent;
-
- &:hover,
- &:focus,
- &:active {
- color: @colorText;
- }
- }
-
- // Sleeper mode (transparent bg, no border; bg on activity)
- .lte-ie8 &.flow-ui-sleeper,
- &.flow-ui-sleeper {
- background: transparent;
- // Fake border around
- .box-shadow( ~"inset 0 0 0 1px @{colorGrayLighter}" );
-
- &:hover {
- background: @colorOffWhite;
- // Fake border around, shadow under outer, 3D raising
inner, edge shading inner
- .box-shadow( ~"inset 0 0 0 1px @{colorGrayLighter}, 0
1px 0 0 rgba(0, 0, 0, .15), inset 0 -3px 0 0 @{colorGrayLighter}, inset 0 -1px
1px 0 rgba(0, 0, 0, .05)" );
- }
- }
-}
-
-// Selectors
-.flow-ui-buttonspacer {
- display: inline-block;
- padding: .25em .5em;
- vertical-align: inherit;
-}
-
-// FIXME: Remove flow-ui-button rule when cache has cleared
-.flow-ui-button.flow-ui-inline,
-// When upstreaming, let's find a cleaner way to do this
-.mw-ui-button.flow-ui-inline,
-// Thin mode (no padding)
-.flow-ui-inline {
- padding: 0;
- font-weight: inherit;
- vertical-align: inherit;
-}
-
-.flow-ui-button {
- // Allow these only on A and BUTTON, and not in IE6
- a&[class],
- button&[class],
- input&[type="button"],
- input&[type="submit"],
- input&[type="reset"] {
- // Container layout
- display: inline-block;
- padding: .5em 1em;
- margin: 0;
- vertical-align: middle;
-
- // IE6/IE7 hack
- *display: inline;
- zoom: 1;
-
- // Typography
- font-family: inherit;
- font-size: 1em;
- font-weight: bold;
- line-height: inherit;
- text-decoration: none;
-
- // Design
- border: 0px solid transparent;
- border-radius: 3px;
- cursor: pointer;
-
- // Animation
- .transition( ~"box-shadow .1s linear, background-color .1s
linear, opacity .5s linear" );
-
- // Disabled state (cursor fix)
- &:disabled {
- cursor: default;
- }
- // Focus/active state (outline fix)
- &:focus, &:active {
- outline: none;
- }
-
- /*
- * Button modes (continued in .flow-ui-button-context())
- */
-
- /*
- * Default button styles
- */
-
- .flow-ui-button-default();
-
- /*
- * Contextual classes
- */
-
- // Progressive context
- &.flow-ui-progressive {
- .flow-ui-button-context( @colorProgressive );
- }
-
- // Constructive context
- &.flow-ui-constructive {
- .flow-ui-button-context( @colorConstructive );
- }
-
- // Destructive context
- &.flow-ui-destructive {
- .flow-ui-button-context( @colorDestructive );
- }
- }
-}
-
-// Alternate-hover effect for buttons: when a sibling button is
hovered/focused,
-// all other buttons get faded out to reduce focus on them
-.flow-ui-button-althover {
- opacity: .8;
-}
--
To view, visit https://gerrit.wikimedia.org/r/148465
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I7661bfe0dfb27681accbd3551cc2270d3ebee0a2
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/Flow
Gerrit-Branch: master
Gerrit-Owner: Jdlrobson <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
