+@import "mediawiki.mixins";
@import "../../settings/typography";
@import "../../mixins/effects";
// Buttons
//
+// All buttons start with mw-ui-button class, modified by other classes.
+// It can be any element. Due to a lack of a CSS reset, the exact styling of
+// the button depends on what type of element is used.
+// There are two kinds of buttons, the default is a "Call to Action" with an obvious border
+// and there is a quiet kind without a border.
+//
// Styleguide 2.
@buttonBorderRadius: 3px;
+@transitionDuration: .1s;
+@transitionFunction: ease-in-out;
-// Button styling
-//
-// Basic button styling to be used on desktop skins. Can be any element.
-// Due to a lack of a CSS reset, the exact styling of the button depends on what type of element is used.
+// Neutral button styling
//
// Markup:
-// <div class="mw-ui-button">button.mw-ui-button</div>
+// <button class="mw-ui-button">.mw-ui-button</button>
+// <button class="mw-ui-button" disabled>.mw-ui-button</button>
+// <button class="mw-ui-button mw-ui-quiet">.mw-ui-button</button>
+// <button class="mw-ui-button mw-ui-quiet" disabled>.mw-ui-button</button>
//
// Styleguide 2.1.
.mw-ui-button {
// Container layout
display: inline-block;
- padding: 0.4em 1em 0.4em 1em;
+ padding: .5em 1em;
margin: 0;
// IE6/IE7 hack
zoom: 1;
// Container styling
- .buttonColors();
+ .button-colors(@colorWhite);
border-radius: @buttonBorderRadius;
// Ensure that buttons and inputs are nicely aligned when they have differing heights
// Content styling
text-align: center;
- text-decoration: none;
-
font-weight: bold;
+ white-space: nowrap;
+ text-shadow: 0 1px rgba(0, 0, 0, .1);
// Interaction styling
cursor: pointer;
- &:disabled,
- &.mw-ui-disabled {
+ &:disabled {
+ text-shadow: none;
cursor: default;
}
+ .transition(background @transitionDuration @transitionFunction, color @transitionDuration @transitionFunction, box-shadow @transitionDuration @transitionFunction;);
+
// Styling for specific button types
// -----------------------------------------
&.mw-ui-big {
width: 100%;
}
- // Primary buttons
+ // Progressive buttons
//
- // Do not use the mw-ui-primary class use mw-ui-constructive instead. For blue buttons
- // use mw-ui-progressive (coming soon)
+ // Use progressive buttons for actions which lead to a next step in the process.
+ // .mw-ui-primary is deprecated, kept for compatibility.
//
// Markup:
- // <button class="mw-ui-button mw-ui-primary">mw-ui-primary</button>
+ // <button class="mw-ui-button mw-ui-progressive">.mw-ui-progressive</button>
+ // <button class="mw-ui-button mw-ui-progressive" disabled>.mw-ui-progressive</button>
+ // <button class="mw-ui-button mw-ui-progressive mw-ui-quiet">.mw-ui-progressive</button>
+ // <button class="mw-ui-button mw-ui-progressive mw-ui-quiet" disabled>.mw-ui-progressive</button>
//
// Styleguide 2.1.1.
+ &.mw-ui-progressive,
&.mw-ui-primary {
- .buttonColors(@agoraBlue);
+ .button-colors(@colorProgressive);
+
+ &.mw-ui-quiet {
+ .button-colors-quiet(@colorProgressive);
+ }
}
// Constructive buttons
// e.g. save changes button
//
// Markup:
- // <button class="mw-ui-button mw-ui-constructive">mw-ui-constructive</button>
+ // <button class="mw-ui-button mw-ui-constructive">.mw-ui-constructive</button>
+ // <button class="mw-ui-button mw-ui-constructive" disabled>.mw-ui-constructive</button>
+ // <button class="mw-ui-button mw-ui-constructive mw-ui-quiet">.mw-ui-constructive</button>
+ // <button class="mw-ui-button mw-ui-constructive mw-ui-quiet" disabled>.mw-ui-constructive</button>
//
// Styleguide 2.1.2.
&.mw-ui-constructive {
- .buttonColors(@agoraGreen);
+ .button-colors(@colorConstructive);
+
+ &.mw-ui-quiet {
+ .button-colors-quiet(@colorConstructive);
+ }
}
// Destructive buttons
// This should not be used for cancel buttons.
//
// Markup:
- // <button class="mw-ui-button mw-ui-destructive">mw-ui-destructive</button>
+ // <button class="mw-ui-button mw-ui-destructive">.mw-ui-destructive</button>
+ // <button class="mw-ui-button mw-ui-destructive" disabled>.mw-ui-destructive</button>
+ // <button class="mw-ui-button mw-ui-destructive mw-ui-quiet">.mw-ui-destructive</button>
+ // <button class="mw-ui-button mw-ui-destructive mw-ui-quiet" disabled>.mw-ui-destructive</button>
//
// Styleguide 2.1.3.
&.mw-ui-destructive {
- .buttonColors(@agoraRed);
+ .button-colors(@colorDestructive);
+
+ &.mw-ui-quiet {
+ .button-colors-quiet(@colorDestructive);
+ }
+ }
+
+ &.mw-ui-quiet {
+ background: transparent;
+ border: none;
+ text-shadow: none;
+ .button-colors-quiet(@colorGrayDark);
+
+ &:hover,
+ &:focus {
+ box-shadow: none;
+ }
+
+ &:active,
+ &:disabled {
+ background: transparent;
+ }
}
}
-// This overrides an underline declaration on a:hover and a:focus in commonElements.css, which the
-// class alone isn't specific enough to do
a.mw-ui-button {
text-decoration: none;
+
+ // This overrides an underline declaration on a:hover and a:focus in
+ // commonElements.css, which the class alone isn't specific enough to do.
+ &:hover,
+ &:focus {
+ text-decoration: none;
+ }
}
// Button groups
-/* Mixins for visual effects in CSS3 */
-
@import "../settings/colors";
-
-// ----------------------------------------------------------------------------
-// Gradients
-// ----------------------------------------------------------------------------
-.vertical-gradient(@startColor: lighten(@agoraGray, 95%), @endColor: @agoraGray, @startPos: 0, @endPos: 100%) {
- background-color: @endColor;
- background-image: -moz-linear-gradient( top, @startColor @startPos, @endColor @endPos ); // Firefox 3.6+
- background-image: -webkit-gradient( linear, left top, left bottom, color-stop( @startPos, @startColor ), color-stop( @endPos, @endColor ) ); // Safari 4+, Chrome 2+
- background-image: -webkit-linear-gradient( top, @startColor @startPos, @endColor @endPos ); // Safari 5.1+, Chrome 10+
- background-image: linear-gradient( @startColor @startPos, @endColor @endPos ); // Standard
-}
-
// ----------------------------------------------------------------------------
// Button styling
// ----------------------------------------------------------------------------
-.buttonColors(@baseColor: @agoraGray) {
- // Background color
- .vertical-gradient(lighten(@baseColor, 7.5%), @baseColor);
-
- border: 1px solid darken(@baseColor, 2%);
+.button-colors(@bgColor) {
+ background: @bgColor;
&:hover,
- &.mw-ui-hover {
- .vertical-gradient(lighten(@baseColor, 12.5%), lighten(@baseColor, 7.5%));
- text-decoration: none;
+ &:focus {
+ // The inner bottom bevel should match the active background color.
+ box-shadow: 0 1px rgba(0, 0, 0, 10%), inset 0 -3px rgba(0, 0, 0, 20%);
+ outline: none;
+ // remove outline in Firefox
+ &::-moz-focus-inner {
+ border-color: transparent;
+ }
}
- &:active,
- &.mw-ui-active {
- background-image: none;
- background-color: darken(@baseColor, 3%);
+ &:active {
+ // lessphp doesn't implement shade (https://github.com/leafo/lessphp/issues/528);
+ // it passes it through, then ResourceLoader drops it.
+ // background: shade(@bgColor, 20%);
+ background: mix(#000, @bgColor, 20%);
+ box-shadow: none;
}
+}
+
+.button-colors(@bgColor) when (lightness(@bgColor) >= 70%) {
+ color: @colorGrayDark;
+ border: 1px solid @colorGrayLight;
+
+ &:disabled {
+ color: @colorGrayLight;
- &:disabled,
- &.mw-ui-disabled {
- background-image: none;
- background-color: @baseColor;
- opacity: 0.5;
+ // make sure disabled buttons don't have hover and active states
+ &:hover,
+ &:active {
+ background: @bgColor;
+ box-shadow: none;
+ }
}
}
-.buttonColors(@baseColor: @agoraGray) when (lightness(@baseColor) >= 50%) {
- color: #000;
+.button-colors(@bgColor) when (lightness(@bgColor) < 70%) {
+ color: @colorWhite;
+ border: none;
+
+ &:disabled {
+ background: @colorGrayLight;
+
+ // make sure disabled buttons don't have hover and active states
+ &:hover,
+ &:active {
+ box-shadow: none;
+ }
+ }
}
-.buttonColors(@baseColor: @agoraGray) when (lightness(@baseColor) < 50%) {
- color: #fff;
+.button-colors-quiet(@textColor) {
+ // Quiet buttons all start gray, and reveal
+ // constructive/progressive/destructive color on hover and active.
+ color: @colorGrayDark;
+
+ &:hover,
+ &:focus {
+ // lessphp doesn't implement tint, see above
+ // color: tint(@textColor, 20%);
+ color: mix(#fff, @textColor, 20%);
+ }
+
+ &:active {
+ // lessphp doesn't implement shade, see above
+ // color: shade(@textColor, 20%);
+ color: mix(#000, @textColor, 20%);
+ }
+
+ &:disabled {
+ color: @colorGrayLight;
+ }
}
// For Vector, that should be layered on top with vector-type
.agora-field-styling() {
- border: 1px solid @agoraGray;
+ border: 1px solid @colorGrayLight;
&:focus {
// Styling focus of native checkboxes etc on Mac is almost impossible.
outline: 0; // Removes OS field focus
}
- box-shadow: @agoraBlueShadow 0px 0px 5px;
+ box-shadow: @colorProgressiveShadow 0px 0px 5px;
- border-color: @agoraBlueShadow;
+ border-color: @colorProgressiveShadow;
}
- color: @agoraTextColor;
+ color: @colorText;
padding: 0.35em 0.5em 0.35em 0.5em;
// Ensure that buttons and inputs are nicely aligned when they have differing heights
.agora-label-styling() {
//font-weight: bold;
font-size: 0.9em;
- color: darken(@agoraGray, 50%);
+ color: darken(@colorGrayLight, 50%);
* {
font-weight: normal;
height: auto;
margin: 0 0.1em 0em 0;
padding: 0;
- border: 1px solid @agoraGray;
+ border: 1px solid @colorGrayLight;
cursor: pointer;
}
}
-// Grays
-// -----------------------------------------
-@agoraGray: #c9c9c9;
-@agoraTextColor: #252525;
-
-// Blues
-// -----------------------------------------
-@agoraBlue: #3366bb;
-@agoraBlueShadow: #4091ed;
-
-// Greens
-// -----------------------------------------
-@agoraGreen: #27aa65;
-
-// Reds
-// -----------------------------------------
-@agoraRed: #cc0000;
+@colorWhite: #fff;
+@colorGrayLight: #ccc;
+@colorGrayDark: #898989;
+@colorText: #252525;
+@colorProgressive: #347bff;
+// FIXME: remove @colorProgressiveShadow (shadows should be generated
+// in LESS by dimming the original colors)
+@colorProgressiveShadow: #4091ed;
+@colorConstructive: #00af89;
+@colorDestructive: #d11d13;
@baseFontSize: 1em;
@baseLineHeight: 1.4 * @baseFontSize;
-@baseFontColor: @agoraTextColor;
+@baseFontColor: @colorText;
@smallFontSize: 0.75em;
dépôts / lhc / web / wiklou.git / commitdiff