This allows Flow to reuse colors defined here.
See: I519beb8b0ffae0bef387cefa5026ee94282001df
Change-Id: I68cd4de1df515cf059a1d9e45cd3ff801a0a1c84
--- /dev/null
+// FIXME: remove @colorProgressiveShadow (shadows should be generated
+// in LESS by dimming the original colors)
+@colorProgressiveShadow: #4091ed;
+
+// White; for background use, and text use on dark backgrounds
+@colorWhite: #fff;
+// Off-white; for background use on white backgrounds
+@colorOffWhite: #fafafa;
+// Dark gray; for non-text use
+@colorGrayDark: #898989;
+// Light gray; for non-text use
+@colorGrayLight: #ccc;
+// Very light gray; for non-text use
+@colorGrayLighter: #ddd;
+// Lightest gray; for non-text use
+@colorGrayLightest: #eee;
+
+// Dark gray; for body text
+@colorText: #252525;
+// Light gray; for less important body text and links
+@colorTextLight: #696969;
+
+// Blue; for contextual use of a continuing action
+@colorProgressive: #347bff;
+// Orange; for contextual use of returning to a past action
+@colorRegressive: #ff7e1e;
+// Green; for contextual use of a positive finalizing action
+@colorConstructive: #00af89;
+// Red; for contextual use of a negative finalizing action
+@colorDestructive: #d11d13;
+
+// Used in mixins to darken contextual colors by the same amount (eg. focus)
+@colorDarkenPercentage: 13.5%;
+// Used in mixins to lighten contextual colors by the same amount (eg. hover)
+@colorLightenPercentage: 13.5%;
\ No newline at end of file
--- /dev/null
+@import "mediawiki.ui/colors";
+// ----------------------------------------------------------------------------
+// Button styling
+// ----------------------------------------------------------------------------
+
+.button-colors(@bgColor) {
+ background: @bgColor;
+
+ &:hover,
+ &: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%);
+ border-bottom-color: mix(#000, @bgColor, 20%);
+ outline: none;
+ // remove outline in Firefox
+ &::-moz-focus-inner {
+ border-color: transparent;
+ }
+ }
+
+ &:active,
+ &.mw-ui-checked {
+ // 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;
+
+ // make sure disabled buttons don't have hover and active states
+ &:hover,
+ &:active {
+ background: @bgColor;
+ box-shadow: none;
+ }
+ }
+}
+
+.button-colors(@bgColor) when (lightness(@bgColor) < 70%) {
+ color: @colorWhite;
+ // border of the same color as background so that light background and
+ // dark background buttons are the same height (only top and bottom to
+ // make box shadow on hover cover the corners too)
+ border: 1px solid @bgColor;
+ border-left: none;
+ border-right: none;
+ text-shadow: 0 1px rgba(0, 0, 0, .1);
+
+ &:disabled {
+ background: @colorGrayLight;
+ border-color: @colorGrayLight;
+
+ // make sure disabled buttons don't have hover and active states
+ &:hover,
+ &:active,
+ &.mw-ui-checked {
+ box-shadow: none;
+ }
+ }
+}
+
+.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,
+ &.mw-ui-checked {
+ // lessphp doesn't implement shade, see above
+ // color: shade(@textColor, 20%);
+ color: mix(#000, @textColor, 20%);
+ }
+
+ &:disabled {
+ color: @colorGrayLight;
+ }
+}
--- /dev/null
+@import "mediawiki.ui/colors";
+
+// Font is not included.
+// For Vector, that should be layered on top with vector-type
+.agora-field-styling() {
+
+ border: 1px solid @colorGrayLight;
+
+ &:focus {
+ // Styling focus of native checkboxes etc on Mac is almost impossible.
+ &:not([type=checkbox]):not([type=radio]) {
+ outline: 0; // Removes OS field focus
+ }
+
+ box-shadow: @colorProgressiveShadow 0 0 5px;
+
+ border-color: @colorProgressiveShadow;
+ }
+
+ color: @colorText;
+ padding: 0.35em 0.5em 0.35em 0.5em;
+
+ // Ensure that buttons and inputs are nicely aligned when they have differing heights
+ vertical-align: middle;
+}
+
+.agora-label-styling() {
+ //font-weight: bold;
+ font-size: 0.9em;
+ color: darken(@colorGrayLight, 50%);
+
+ * {
+ font-weight: normal;
+ }
+}
+
+.agora-inline-label-styling() {
+ margin-bottom: 0.5em;
+ cursor: pointer;
+ vertical-align: bottom;
+ line-height: normal;
+
+ font-weight: normal;
+
+ & > input[type="checkbox"],
+ & > input[type="radio"] {
+ width: auto;
+ height: auto;
+ margin: 0 0.1em 0 0;
+ padding: 0;
+ border: 1px solid @colorGrayLight;
+ cursor: pointer;
+ }
+}
--- /dev/null
+@import "mediawiki.ui/typography";
+
+.vector-type() {
+ font-size: @baseFontSize;
+ line-height: @baseLineHeight;
+}
--- /dev/null
+.agora-flush-left() {
+ float: left;
+ margin-left: 0;
+ padding-left: 0;
+}
+
+.agora-flush-right() {
+ float: right;
+ margin-right: 0;
+ padding-right: 0;
+}
+
+.agora-center-block() {
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+}
--- /dev/null
+@baseFontSize: 1em;
+@baseLineHeight: 1.4 * @baseFontSize;
+@baseFontColor: @colorText;
+
+@smallFontSize: 0.75em;
@import "mediawiki.mixins";
-@import "../../settings/typography";
-@import "../../mixins/effects";
-@import "../../mixins/utilities";
+@import "mediawiki.ui/typography";
+@import "mediawiki.ui/mixins/effects";
+@import "mediawiki.ui/mixins/utilities";
// Buttons
//
// Form elements and layouts
@import "mediawiki.mixins";
-@import "../../mixins/utilities";
-@import "../../mixins/forms";
+@import "mediawiki.ui/mixins/utilities";
+@import "mediawiki.ui/mixins/forms";
// --------------------------------------------------------------------------
// Layouts
// Positioning
// --------------------------------------------------------------------------
-@import "../mixins/utilities";
+@import "mediawiki.ui/mixins/utilities";
.mw-ui-flush-left {
.agora-flush-left();
@import "../default/buttons"; // Layer Vector on top of the default settings.
-@import "../../mixins/type";
+@import "mediawiki.ui/mixins/type";
.mw-ui-button {
.vector-type();
// No default settings for containers yet.
-@import "../../mixins/type";
+@import "mediawiki.ui/mixins/type";
.mw-ui-container {
.vector-type();
@import "../default/forms"; // Layer Vector on top of the default settings.
-@import "../../mixins/type";
+@import "mediawiki.ui/mixins/type";
.mw-ui-vform,
.mw-ui-vform input,
+++ /dev/null
-@import "../settings/colors";
-// ----------------------------------------------------------------------------
-// Button styling
-// ----------------------------------------------------------------------------
-
-.button-colors(@bgColor) {
- background: @bgColor;
-
- &:hover,
- &: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%);
- border-bottom-color: mix(#000, @bgColor, 20%);
- outline: none;
- // remove outline in Firefox
- &::-moz-focus-inner {
- border-color: transparent;
- }
- }
-
- &:active,
- &.mw-ui-checked {
- // 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;
-
- // make sure disabled buttons don't have hover and active states
- &:hover,
- &:active {
- background: @bgColor;
- box-shadow: none;
- }
- }
-}
-
-.button-colors(@bgColor) when (lightness(@bgColor) < 70%) {
- color: @colorWhite;
- // border of the same color as background so that light background and
- // dark background buttons are the same height (only top and bottom to
- // make box shadow on hover cover the corners too)
- border: 1px solid @bgColor;
- border-left: none;
- border-right: none;
- text-shadow: 0 1px rgba(0, 0, 0, .1);
-
- &:disabled {
- background: @colorGrayLight;
- border-color: @colorGrayLight;
-
- // make sure disabled buttons don't have hover and active states
- &:hover,
- &:active,
- &.mw-ui-checked {
- box-shadow: none;
- }
- }
-}
-
-.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,
- &.mw-ui-checked {
- // lessphp doesn't implement shade, see above
- // color: shade(@textColor, 20%);
- color: mix(#000, @textColor, 20%);
- }
-
- &:disabled {
- color: @colorGrayLight;
- }
-}
+++ /dev/null
-@import "../settings/colors";
-
-// Font is not included.
-// For Vector, that should be layered on top with vector-type
-.agora-field-styling() {
-
- border: 1px solid @colorGrayLight;
-
- &:focus {
- // Styling focus of native checkboxes etc on Mac is almost impossible.
- &:not([type=checkbox]):not([type=radio]) {
- outline: 0; // Removes OS field focus
- }
-
- box-shadow: @colorProgressiveShadow 0 0 5px;
-
- border-color: @colorProgressiveShadow;
- }
-
- color: @colorText;
- padding: 0.35em 0.5em 0.35em 0.5em;
-
- // Ensure that buttons and inputs are nicely aligned when they have differing heights
- vertical-align: middle;
-}
-
-.agora-label-styling() {
- //font-weight: bold;
- font-size: 0.9em;
- color: darken(@colorGrayLight, 50%);
-
- * {
- font-weight: normal;
- }
-}
-
-.agora-inline-label-styling() {
- margin-bottom: 0.5em;
- cursor: pointer;
- vertical-align: bottom;
- line-height: normal;
-
- font-weight: normal;
-
- & > input[type="checkbox"],
- & > input[type="radio"] {
- width: auto;
- height: auto;
- margin: 0 0.1em 0 0;
- padding: 0;
- border: 1px solid @colorGrayLight;
- cursor: pointer;
- }
-}
+++ /dev/null
-@import "../settings/typography";
-
-.vector-type() {
- font-size: @baseFontSize;
- line-height: @baseLineHeight;
-}
+++ /dev/null
-.agora-flush-left() {
- float: left;
- margin-left: 0;
- padding-left: 0;
-}
-
-.agora-flush-right() {
- float: right;
- margin-right: 0;
- padding-right: 0;
-}
-
-.agora-center-block() {
- display: block;
- margin-left: auto;
- margin-right: auto;
-}
+++ /dev/null
-// FIXME: remove @colorProgressiveShadow (shadows should be generated
-// in LESS by dimming the original colors)
-@colorProgressiveShadow: #4091ed;
-
-// White; for background use, and text use on dark backgrounds
-@colorWhite: #fff;
-// Off-white; for background use on white backgrounds
-@colorOffWhite: #fafafa;
-// Dark gray; for non-text use
-@colorGrayDark: #898989;
-// Light gray; for non-text use
-@colorGrayLight: #ccc;
-// Very light gray; for non-text use
-@colorGrayLighter: #ddd;
-// Lightest gray; for non-text use
-@colorGrayLightest: #eee;
-
-// Dark gray; for body text
-@colorText: #252525;
-// Light gray; for less important body text and links
-@colorTextLight: #696969;
-
-// Blue; for contextual use of a continuing action
-@colorProgressive: #347bff;
-// Orange; for contextual use of returning to a past action
-@colorRegressive: #ff7e1e;
-// Green; for contextual use of a positive finalizing action
-@colorConstructive: #00af89;
-// Red; for contextual use of a negative finalizing action
-@colorDestructive: #d11d13;
-
-// Used in mixins to darken contextual colors by the same amount (eg. focus)
-@colorDarkenPercentage: 13.5%;
-// Used in mixins to lighten contextual colors by the same amount (eg. hover)
-@colorLightenPercentage: 13.5%;
\ No newline at end of file
+++ /dev/null
-@baseFontSize: 1em;
-@baseLineHeight: 1.4 * @baseFontSize;
-@baseFontColor: @colorText;
-
-@smallFontSize: 0.75em;
dépôts / lhc / web / wiklou.git / commitdiff