From: jdlrobson Date: Wed, 9 Jul 2014 18:12:13 +0000 (-0700) Subject: Allow importing of LESS from MediaWiki.UI X-Git-Tag: 1.31.0-rc.0~14943^2 X-Git-Url: http://git.cyclocoop.org/%7B%24www_url%7Dadmin/compta/operations/recherche.php?a=commitdiff_plain;h=6803aa677ef2951e40a9002775d6cb4b48dc412d;p=lhc%2Fweb%2Fwiklou.git Allow importing of LESS from MediaWiki.UI This allows Flow to reuse colors defined here. See: I519beb8b0ffae0bef387cefa5026ee94282001df Change-Id: I68cd4de1df515cf059a1d9e45cd3ff801a0a1c84 --- diff --git a/resources/src/mediawiki.less/mediawiki.ui/colors.less b/resources/src/mediawiki.less/mediawiki.ui/colors.less new file mode 100644 index 0000000000..d456f864fd --- /dev/null +++ b/resources/src/mediawiki.less/mediawiki.ui/colors.less @@ -0,0 +1,35 @@ +// 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 diff --git a/resources/src/mediawiki.less/mediawiki.ui/mixins/effects.less b/resources/src/mediawiki.less/mediawiki.ui/mixins/effects.less new file mode 100644 index 0000000000..8561582c62 --- /dev/null +++ b/resources/src/mediawiki.less/mediawiki.ui/mixins/effects.less @@ -0,0 +1,92 @@ +@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; + } +} diff --git a/resources/src/mediawiki.less/mediawiki.ui/mixins/forms.less b/resources/src/mediawiki.less/mediawiki.ui/mixins/forms.less new file mode 100644 index 0000000000..6b04061b38 --- /dev/null +++ b/resources/src/mediawiki.less/mediawiki.ui/mixins/forms.less @@ -0,0 +1,54 @@ +@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; + } +} diff --git a/resources/src/mediawiki.less/mediawiki.ui/mixins/type.less b/resources/src/mediawiki.less/mediawiki.ui/mixins/type.less new file mode 100644 index 0000000000..bf80ccb167 --- /dev/null +++ b/resources/src/mediawiki.less/mediawiki.ui/mixins/type.less @@ -0,0 +1,6 @@ +@import "mediawiki.ui/typography"; + +.vector-type() { + font-size: @baseFontSize; + line-height: @baseLineHeight; +} diff --git a/resources/src/mediawiki.less/mediawiki.ui/mixins/utilities.less b/resources/src/mediawiki.less/mediawiki.ui/mixins/utilities.less new file mode 100644 index 0000000000..3d7b73245e --- /dev/null +++ b/resources/src/mediawiki.less/mediawiki.ui/mixins/utilities.less @@ -0,0 +1,17 @@ +.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; +} diff --git a/resources/src/mediawiki.less/mediawiki.ui/typography.less b/resources/src/mediawiki.less/mediawiki.ui/typography.less new file mode 100644 index 0000000000..83651edb70 --- /dev/null +++ b/resources/src/mediawiki.less/mediawiki.ui/typography.less @@ -0,0 +1,5 @@ +@baseFontSize: 1em; +@baseLineHeight: 1.4 * @baseFontSize; +@baseFontColor: @colorText; + +@smallFontSize: 0.75em; diff --git a/resources/src/mediawiki.ui/components/default/buttons.less b/resources/src/mediawiki.ui/components/default/buttons.less index dce4cd04d2..cc8212fe10 100644 --- a/resources/src/mediawiki.ui/components/default/buttons.less +++ b/resources/src/mediawiki.ui/components/default/buttons.less @@ -1,7 +1,7 @@ @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 // diff --git a/resources/src/mediawiki.ui/components/default/forms.less b/resources/src/mediawiki.ui/components/default/forms.less index 6c40c266f4..1a84afd286 100644 --- a/resources/src/mediawiki.ui/components/default/forms.less +++ b/resources/src/mediawiki.ui/components/default/forms.less @@ -1,8 +1,8 @@ // Form elements and layouts @import "mediawiki.mixins"; -@import "../../mixins/utilities"; -@import "../../mixins/forms"; +@import "mediawiki.ui/mixins/utilities"; +@import "mediawiki.ui/mixins/forms"; // -------------------------------------------------------------------------- // Layouts diff --git a/resources/src/mediawiki.ui/components/utilities.less b/resources/src/mediawiki.ui/components/utilities.less index 9aea429144..dd26cdda91 100644 --- a/resources/src/mediawiki.ui/components/utilities.less +++ b/resources/src/mediawiki.ui/components/utilities.less @@ -4,7 +4,7 @@ // Positioning // -------------------------------------------------------------------------- -@import "../mixins/utilities"; +@import "mediawiki.ui/mixins/utilities"; .mw-ui-flush-left { .agora-flush-left(); diff --git a/resources/src/mediawiki.ui/components/vector/buttons.less b/resources/src/mediawiki.ui/components/vector/buttons.less index 15363384d5..967b193636 100644 --- a/resources/src/mediawiki.ui/components/vector/buttons.less +++ b/resources/src/mediawiki.ui/components/vector/buttons.less @@ -1,5 +1,5 @@ @import "../default/buttons"; // Layer Vector on top of the default settings. -@import "../../mixins/type"; +@import "mediawiki.ui/mixins/type"; .mw-ui-button { .vector-type(); diff --git a/resources/src/mediawiki.ui/components/vector/containers.less b/resources/src/mediawiki.ui/components/vector/containers.less index 1e9ec05c58..6db4675ee2 100644 --- a/resources/src/mediawiki.ui/components/vector/containers.less +++ b/resources/src/mediawiki.ui/components/vector/containers.less @@ -1,5 +1,5 @@ // No default settings for containers yet. -@import "../../mixins/type"; +@import "mediawiki.ui/mixins/type"; .mw-ui-container { .vector-type(); diff --git a/resources/src/mediawiki.ui/components/vector/forms.less b/resources/src/mediawiki.ui/components/vector/forms.less index 2bbd8f0dbe..139ee6caf9 100644 --- a/resources/src/mediawiki.ui/components/vector/forms.less +++ b/resources/src/mediawiki.ui/components/vector/forms.less @@ -1,5 +1,5 @@ @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, diff --git a/resources/src/mediawiki.ui/mixins/effects.less b/resources/src/mediawiki.ui/mixins/effects.less deleted file mode 100644 index 9759f63469..0000000000 --- a/resources/src/mediawiki.ui/mixins/effects.less +++ /dev/null @@ -1,92 +0,0 @@ -@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; - } -} diff --git a/resources/src/mediawiki.ui/mixins/forms.less b/resources/src/mediawiki.ui/mixins/forms.less deleted file mode 100644 index 20f42a01fa..0000000000 --- a/resources/src/mediawiki.ui/mixins/forms.less +++ /dev/null @@ -1,54 +0,0 @@ -@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; - } -} diff --git a/resources/src/mediawiki.ui/mixins/type.less b/resources/src/mediawiki.ui/mixins/type.less deleted file mode 100644 index 4a0116825b..0000000000 --- a/resources/src/mediawiki.ui/mixins/type.less +++ /dev/null @@ -1,6 +0,0 @@ -@import "../settings/typography"; - -.vector-type() { - font-size: @baseFontSize; - line-height: @baseLineHeight; -} diff --git a/resources/src/mediawiki.ui/mixins/utilities.less b/resources/src/mediawiki.ui/mixins/utilities.less deleted file mode 100644 index 3d7b73245e..0000000000 --- a/resources/src/mediawiki.ui/mixins/utilities.less +++ /dev/null @@ -1,17 +0,0 @@ -.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; -} diff --git a/resources/src/mediawiki.ui/settings/colors.less b/resources/src/mediawiki.ui/settings/colors.less deleted file mode 100644 index d456f864fd..0000000000 --- a/resources/src/mediawiki.ui/settings/colors.less +++ /dev/null @@ -1,35 +0,0 @@ -// 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 diff --git a/resources/src/mediawiki.ui/settings/typography.less b/resources/src/mediawiki.ui/settings/typography.less deleted file mode 100644 index 83651edb70..0000000000 --- a/resources/src/mediawiki.ui/settings/typography.less +++ /dev/null @@ -1,5 +0,0 @@ -@baseFontSize: 1em; -@baseLineHeight: 1.4 * @baseFontSize; -@baseFontColor: @colorText; - -@smallFontSize: 0.75em;