From eb9cc2b9ce24286622870c4c654a5da875f01307 Mon Sep 17 00:00:00 2001 From: Juliusz Gonera Date: Mon, 4 Nov 2013 15:12:14 -0500 Subject: [PATCH] Port mediawiki.ui SASS to LESS This was the only SASS in core. Remove gradient hacks for IE<10 (proprietary filter property) in vertical-gradient mixin. Buttons look fine without gradients too, and filter can often signfificantly degrade performance: http://gomilkyway.com/web/why-site-is-so-slow-on-ie-even-to-scroll-poor-ie-performance/ http://coding.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/ http://msdn.microsoft.com/en-us/library/ms532847%28VS.85%29.aspx (look for "performance") Remove text-shadow for button's text which had no effect on appearance. Remove obsolete or non-existent vendor-prefixed properties: * display: -moz-inline-stack (not needed for Firefox 3+) * -webkit-border-radius, -moz-border-radius (supported for sometime without a prefix, graceful degradation for old browsers) * -ms-border-radius, -o-border-radius (never existed) Remove *vertical-align: auto from IE6/IE7 inline hack. Can't find any evidence that it's necessary. Bug: 54485 Change-Id: I81d8d0c9f6705aef8bdb8a28e1154f2de4301235 --- .gitignore | 1 - resources/Resources.php | 4 +- .../default/buttons.less} | 44 +- .../default/forms.less} | 31 +- .../utilities.less} | 10 +- .../vector/buttons.less} | 9 +- .../vector/containers.less} | 3 +- .../vector/forms.less} | 3 +- resources/mediawiki.ui/default.less | 8 + .../mediawiki.ui/mediawiki.ui.default.css | 272 ------------ .../mediawiki.ui/mediawiki.ui.vector.css | 414 ------------------ resources/mediawiki.ui/mixins/effects.less | 52 +++ resources/mediawiki.ui/mixins/forms.less | 51 +++ resources/mediawiki.ui/mixins/type.less | 6 + resources/mediawiki.ui/mixins/utilities.less | 23 + .../_colors.scss => settings/colors.less} | 12 +- .../mediawiki.ui/settings/typography.less | 5 + resources/mediawiki.ui/sourcefiles/Makefile | 24 - resources/mediawiki.ui/sourcefiles/config.rb | 27 -- .../sourcefiles/scss/components/_default.scss | 3 - .../sourcefiles/scss/components/_vector.scss | 4 - .../scss/mediawiki.ui.default.scss | 16 - .../sourcefiles/scss/mediawiki.ui.vector.scss | 15 - .../sourcefiles/scss/mixins/_all.scss | 4 - .../sourcefiles/scss/mixins/_effects.scss | 62 --- .../sourcefiles/scss/mixins/_forms.scss | 66 --- .../sourcefiles/scss/mixins/_type.scss | 6 - .../sourcefiles/scss/mixins/_utilities.scss | 19 - .../sourcefiles/scss/settings/_all.scss | 2 - .../scss/settings/_typography.scss | 5 - resources/mediawiki.ui/vector.less | 8 + 31 files changed, 214 insertions(+), 995 deletions(-) rename resources/mediawiki.ui/{sourcefiles/scss/components/default/_buttons.scss => components/default/buttons.less} (53%) rename resources/mediawiki.ui/{sourcefiles/scss/components/default/_forms.scss => components/default/forms.less} (81%) rename resources/mediawiki.ui/{sourcefiles/scss/components/_utilities.scss => components/utilities.less} (75%) rename resources/mediawiki.ui/{sourcefiles/scss/components/vector/_buttons.scss => components/vector/buttons.less} (64%) rename resources/mediawiki.ui/{sourcefiles/scss/components/vector/_containers.scss => components/vector/containers.less} (57%) rename resources/mediawiki.ui/{sourcefiles/scss/components/vector/_forms.scss => components/vector/forms.less} (73%) create mode 100644 resources/mediawiki.ui/default.less delete mode 100644 resources/mediawiki.ui/mediawiki.ui.default.css delete mode 100644 resources/mediawiki.ui/mediawiki.ui.vector.css create mode 100644 resources/mediawiki.ui/mixins/effects.less create mode 100644 resources/mediawiki.ui/mixins/forms.less create mode 100644 resources/mediawiki.ui/mixins/type.less create mode 100644 resources/mediawiki.ui/mixins/utilities.less rename resources/mediawiki.ui/{sourcefiles/scss/settings/_colors.scss => settings/colors.less} (61%) create mode 100644 resources/mediawiki.ui/settings/typography.less delete mode 100644 resources/mediawiki.ui/sourcefiles/Makefile delete mode 100644 resources/mediawiki.ui/sourcefiles/config.rb delete mode 100644 resources/mediawiki.ui/sourcefiles/scss/components/_default.scss delete mode 100644 resources/mediawiki.ui/sourcefiles/scss/components/_vector.scss delete mode 100644 resources/mediawiki.ui/sourcefiles/scss/mediawiki.ui.default.scss delete mode 100644 resources/mediawiki.ui/sourcefiles/scss/mediawiki.ui.vector.scss delete mode 100644 resources/mediawiki.ui/sourcefiles/scss/mixins/_all.scss delete mode 100644 resources/mediawiki.ui/sourcefiles/scss/mixins/_effects.scss delete mode 100644 resources/mediawiki.ui/sourcefiles/scss/mixins/_forms.scss delete mode 100644 resources/mediawiki.ui/sourcefiles/scss/mixins/_type.scss delete mode 100644 resources/mediawiki.ui/sourcefiles/scss/mixins/_utilities.scss delete mode 100644 resources/mediawiki.ui/sourcefiles/scss/settings/_all.scss delete mode 100644 resources/mediawiki.ui/sourcefiles/scss/settings/_typography.scss create mode 100644 resources/mediawiki.ui/vector.less diff --git a/.gitignore b/.gitignore index 7d1a30930d..9c0c3b6d7c 100644 --- a/.gitignore +++ b/.gitignore @@ -41,7 +41,6 @@ sftp-config.json # Building & testing node_modules/ -.sass-cache/ # Composer /vendor diff --git a/resources/Resources.php b/resources/Resources.php index 463dec823a..44356285b7 100644 --- a/resources/Resources.php +++ b/resources/Resources.php @@ -1162,8 +1162,8 @@ return array( ), 'mediawiki.ui' => array( 'skinStyles' => array( - 'default' => 'resources/mediawiki.ui/mediawiki.ui.default.css', - 'vector' => 'resources/mediawiki.ui/mediawiki.ui.vector.css', + 'default' => 'resources/mediawiki.ui/default.less', + 'vector' => 'resources/mediawiki.ui/vector.less', ), 'position' => 'top', ), diff --git a/resources/mediawiki.ui/sourcefiles/scss/components/default/_buttons.scss b/resources/mediawiki.ui/components/default/buttons.less similarity index 53% rename from resources/mediawiki.ui/sourcefiles/scss/components/default/_buttons.scss rename to resources/mediawiki.ui/components/default/buttons.less index d67810f739..201f2f415d 100644 --- a/resources/mediawiki.ui/sourcefiles/scss/components/default/_buttons.scss +++ b/resources/mediawiki.ui/components/default/buttons.less @@ -1,27 +1,31 @@ -$buttonBorderRadius: 3px; +@import "../../settings/typography"; +@import "../../mixins/effects"; + +@buttonBorderRadius: 3px; // Button styling .mw-ui-button { // Container layout - @include inline-block; + display: inline-block; padding: 0.4em 1em 0.4em 1em; margin: 0; + // IE6/IE7 hack + // http://stackoverflow.com/a/5838575/365238 + *display: inline; + zoom: 1; + // Container styling - @include buttonColors($agoraGray); - @include border-radius($buttonBorderRadius); + .buttonColors(); + border-radius: @buttonBorderRadius; // Content styling vertical-align: middle; - text: { - align: center; - decoration: none; - } + text-align: center; + text-decoration: none; - font: { - weight: bold; - } + font-weight: bold; // Interaction styling cursor: pointer; @@ -34,9 +38,7 @@ $buttonBorderRadius: 3px; // Button sizes and displays // ----------------------------------------- &.mw-ui-big { - font: { - size: $baseFontSize * 1.3; - } + font-size: @baseFontSize * 1.3; } &.mw-ui-block { display: block; @@ -47,23 +49,21 @@ $buttonBorderRadius: 3px; // 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; - } + text-decoration: none; } // Button groups .mw-ui-button-group > * { - @include border-radius(0); + border-radius: 0; float: left; &:first-child{ - @include border-top-left-radius($buttonBorderRadius); - @include border-bottom-left-radius($buttonBorderRadius); + border-top-left-radius: @buttonBorderRadius; + border-bottom-left-radius: @buttonBorderRadius; } &:last-child{ - @include border-top-right-radius($buttonBorderRadius); - @include border-bottom-right-radius($buttonBorderRadius); + border-top-right-radius: @buttonBorderRadius; + border-bottom-right-radius: @buttonBorderRadius; } } diff --git a/resources/mediawiki.ui/sourcefiles/scss/components/default/_forms.scss b/resources/mediawiki.ui/components/default/forms.less similarity index 81% rename from resources/mediawiki.ui/sourcefiles/scss/components/default/_forms.scss rename to resources/mediawiki.ui/components/default/forms.less index a9cec39a4b..28b50d2e3a 100644 --- a/resources/mediawiki.ui/sourcefiles/scss/components/default/_forms.scss +++ b/resources/mediawiki.ui/components/default/forms.less @@ -1,20 +1,23 @@ // Form elements and layouts +@import "../../mixins/utilities"; +@import "../../mixins/forms"; + // -------------------------------------------------------------------------- // Layouts // -------------------------------------------------------------------------- // The FancyCaptcha image CAPTCHA used on WMF wikis drives the width of the // 'VForm' design, the form can't be narrower than this. -$captchaContainerWidth: 290px; -$defaultFormWidth: $captchaContainerWidth; +@captchaContainerWidth: 290px; +@defaultFormWidth: @captchaContainerWidth; // Style a compact vertical stacked form ("VForm") and the elements in divs // within it. .mw-ui-vform { - @include box-sizing(border-box); + .box-sizing(border-box); - width: $defaultFormWidth; + width: @defaultFormWidth; // Immediate divs in a vform are block and spaced-out. & > div { @@ -27,7 +30,7 @@ $defaultFormWidth: $captchaContainerWidth; input, .mw-ui-button { display: block; - @include box-sizing(border-box); + .box-sizing(border-box); margin: 0; width: 100%; } @@ -35,13 +38,13 @@ $defaultFormWidth: $captchaContainerWidth; // We exclude these because they'll generally use mw-ui-button. // Otherwise, we'll unintentionally override that. input:not([type=button]):not([type=submit]):not([type=file]), { - @include agora-field-styling; // mixins/_forms.scss + .agora-field-styling(); // mixins/forms.less } label { display: block; - @include box-sizing(border-box); - @include agora-label-styling; + .box-sizing(border-box); + .agora-label-styling(); width: auto; margin: 0 0 0.2em 0; padding: 0; @@ -51,7 +54,7 @@ $defaultFormWidth: $captchaContainerWidth; input[type="checkbox"], input[type="radio"] { display: inline; - @include box-sizing(content-box); + .box-sizing(content-box); width: auto; } @@ -61,9 +64,7 @@ $defaultFormWidth: $captchaContainerWidth; // errorbox. // TODO move errorbox from mediawiki.special.vforms.css into here. .error { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; + .box-sizing(border-box); font-size: 0.9em; margin: 0 0 1em 0; padding: 0.5em; @@ -94,14 +95,14 @@ $defaultFormWidth: $captchaContainerWidth; // You generally don't need to use this class if is within an Agora // form container such as mw-ui-vform .mw-ui-input { - @include agora-field-styling; // mixins/_forms.scss + .agora-field-styling(); // mixins/forms.less } // Apply mw-ui-label to individual elements to style them. // You generally don't need to use this class if .mw-ui-checkbox-label, .mw-ui-radio-label { - @include agora-inline-label-styling; + .agora-inline-label-styling(); } diff --git a/resources/mediawiki.ui/sourcefiles/scss/components/_utilities.scss b/resources/mediawiki.ui/components/utilities.less similarity index 75% rename from resources/mediawiki.ui/sourcefiles/scss/components/_utilities.scss rename to resources/mediawiki.ui/components/utilities.less index 4f1dba2f0a..9aea429144 100644 --- a/resources/mediawiki.ui/sourcefiles/scss/components/_utilities.scss +++ b/resources/mediawiki.ui/components/utilities.less @@ -4,14 +4,16 @@ // Positioning // -------------------------------------------------------------------------- +@import "../mixins/utilities"; + .mw-ui-flush-left { - @include agora-flush-left; + .agora-flush-left(); } .mw-ui-flush-right { - @include agora-flush-right; + .agora-flush-right(); } .mw-ui-center-block { - @include agora-center-block; -} \ No newline at end of file + .agora-center-block(); +} diff --git a/resources/mediawiki.ui/sourcefiles/scss/components/vector/_buttons.scss b/resources/mediawiki.ui/components/vector/buttons.less similarity index 64% rename from resources/mediawiki.ui/sourcefiles/scss/components/vector/_buttons.scss rename to resources/mediawiki.ui/components/vector/buttons.less index 8d5f0b6acb..8c33251c19 100644 --- a/resources/mediawiki.ui/sourcefiles/scss/components/vector/_buttons.scss +++ b/resources/mediawiki.ui/components/vector/buttons.less @@ -1,19 +1,20 @@ @import "../default/buttons"; // Layer Vector on top of the default settings. +@import "../../mixins/type"; .mw-ui-button { // Button colors determined by function. // ----------------------------------------- &.mw-ui-primary { - @include buttonColors($agoraBlue); + .buttonColors(@agoraBlue); } &.mw-ui-constructive { - @include buttonColors($agoraGreen); + .buttonColors(@agoraGreen); } &.mw-ui-destructive { - @include buttonColors($agoraRed); + .buttonColors(@agoraRed); } - @include vector-type; + .vector-type(); } diff --git a/resources/mediawiki.ui/sourcefiles/scss/components/vector/_containers.scss b/resources/mediawiki.ui/components/vector/containers.less similarity index 57% rename from resources/mediawiki.ui/sourcefiles/scss/components/vector/_containers.scss rename to resources/mediawiki.ui/components/vector/containers.less index ed01603d36..3aa6e406c9 100644 --- a/resources/mediawiki.ui/sourcefiles/scss/components/vector/_containers.scss +++ b/resources/mediawiki.ui/components/vector/containers.less @@ -1,5 +1,6 @@ // No default settings for containers yet. +@import "../../mixins/type"; .mw-ui-container { - @include vector-type; + .vector-type(); } diff --git a/resources/mediawiki.ui/sourcefiles/scss/components/vector/_forms.scss b/resources/mediawiki.ui/components/vector/forms.less similarity index 73% rename from resources/mediawiki.ui/sourcefiles/scss/components/vector/_forms.scss rename to resources/mediawiki.ui/components/vector/forms.less index 73ea24e227..2263bc0953 100644 --- a/resources/mediawiki.ui/sourcefiles/scss/components/vector/_forms.scss +++ b/resources/mediawiki.ui/components/vector/forms.less @@ -1,7 +1,8 @@ @import "../default/forms"; // Layer Vector on top of the default settings. +@import "../../mixins/type"; .mw-ui-vform, .mw-ui-vform > div input, .mw-ui-input { - @include vector-type; + .vector-type(); } diff --git a/resources/mediawiki.ui/default.less b/resources/mediawiki.ui/default.less new file mode 100644 index 0000000000..036db5f509 --- /dev/null +++ b/resources/mediawiki.ui/default.less @@ -0,0 +1,8 @@ +/** + * Provide Agora appearance for mw-ui-* classes when using a skin other than + * Vector. + */ + +@import "components/utilities"; +@import "components/default/buttons"; +@import "components/default/forms"; diff --git a/resources/mediawiki.ui/mediawiki.ui.default.css b/resources/mediawiki.ui/mediawiki.ui.default.css deleted file mode 100644 index b0726165dc..0000000000 --- a/resources/mediawiki.ui/mediawiki.ui.default.css +++ /dev/null @@ -1,272 +0,0 @@ -@charset "UTF-8"; -/** - * Provide Agora appearance for mw-ui-* classes when using a skin other than - * Vector. - * Compass builds these Agora styles from source Sass files in - * extensions/Agora/modules/scss - */ -/* _effects.scss */ -/* Mixins for visual effects in CSS3 */ -/* line 7, sourcefiles/scss/components/_utilities.scss */ -.mw-ui-flush-left { - float: left; - margin-left: 0; - padding-left: 0; -} - -/* line 11, sourcefiles/scss/components/_utilities.scss */ -.mw-ui-flush-right { - float: right; - margin-right: 0; - padding-right: 0; -} - -/* line 15, sourcefiles/scss/components/_utilities.scss */ -.mw-ui-center-block { - display: block; - margin-left: auto; - margin-right: auto; -} - -/* line 4, sourcefiles/scss/components/default/_buttons.scss */ -.mw-ui-button { - display: -moz-inline-stack; - display: inline-block; - vertical-align: middle; - *vertical-align: auto; - zoom: 1; - *display: inline; - padding: 0.4em 1em 0.4em 1em; - margin: 0; - background-color: #c9c9c9; - *background-color: #c9c9c9; - *zoom: 1; - filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFDCDCDC', endColorstr='#FFC9C9C9'); - background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dcdcdc), color-stop(100%, #c9c9c9)); - background-image: -webkit-linear-gradient(top, #dcdcdc, #c9c9c9); - background-image: -moz-linear-gradient(top, #dcdcdc, #c9c9c9); - background-image: -o-linear-gradient(top, #dcdcdc, #c9c9c9); - background-image: linear-gradient(top, #dcdcdc, #c9c9c9); - color: black; - text-shadow: 0 1px 1px rgba(201, 201, 201, 0.3); - border: 1px solid #c4c4c4; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - -ms-border-radius: 3px; - -o-border-radius: 3px; - border-radius: 3px; - vertical-align: middle; - text-align: center; - text-decoration: none; - font-weight: bold; - cursor: pointer; -} -/* line 38, sourcefiles/scss/mixins/_effects.scss */ -.mw-ui-button:hover, .mw-ui-button.mw-ui-hover { - background-color: gainsboro; - *background-color: gainsboro; - *zoom: 1; - filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFE9E9E9', endColorstr='#FFDCDCDC'); - background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e9e9e9), color-stop(100%, #dcdcdc)); - background-image: -webkit-linear-gradient(top, #e9e9e9, #dcdcdc); - background-image: -moz-linear-gradient(top, #e9e9e9, #dcdcdc); - background-image: -o-linear-gradient(top, #e9e9e9, #dcdcdc); - background-image: linear-gradient(top, #e9e9e9, #dcdcdc); - text-decoration: none; -} -/* line 44, sourcefiles/scss/mixins/_effects.scss */ -.mw-ui-button:active, .mw-ui-button.mw-ui-active { - background-image: none; - background-color: #c1c1c1; - text-shadow: none; -} -/* line 54, sourcefiles/scss/mixins/_effects.scss */ -.mw-ui-button:disabled, .mw-ui-button.mw-ui-disabled { - background-image: none; - background-color: #c9c9c9; - opacity: 0.5; - text-shadow: none; -} -/* line 30, sourcefiles/scss/components/default/_buttons.scss */ -.mw-ui-button:disabled, .mw-ui-button.mw-ui-disabled { - cursor: default; -} -/* line 36, sourcefiles/scss/components/default/_buttons.scss */ -.mw-ui-button.mw-ui-big { - font-size: 1.3em; -} -/* line 41, sourcefiles/scss/components/default/_buttons.scss */ -.mw-ui-button.mw-ui-block { - display: block; - width: 100%; -} - -/* line 49, sourcefiles/scss/components/default/_buttons.scss */ -a.mw-ui-button { - text-decoration: none; -} - -/* line 56, sourcefiles/scss/components/default/_buttons.scss */ -.mw-ui-button-group > * { - -webkit-border-radius: 0; - -moz-border-radius: 0; - -ms-border-radius: 0; - -o-border-radius: 0; - border-radius: 0; - float: left; -} -/* line 60, sourcefiles/scss/components/default/_buttons.scss */ -.mw-ui-button-group > *:first-child { - -moz-border-radius-topleft: 3px; - -webkit-border-top-left-radius: 3px; - border-top-left-radius: 3px; - -moz-border-radius-bottomleft: 3px; - -webkit-border-bottom-left-radius: 3px; - border-bottom-left-radius: 3px; -} -/* line 65, sourcefiles/scss/components/default/_buttons.scss */ -.mw-ui-button-group > *:last-child { - -moz-border-radius-topright: 3px; - -webkit-border-top-right-radius: 3px; - border-top-right-radius: 3px; - -moz-border-radius-bottomright: 3px; - -webkit-border-bottom-right-radius: 3px; - border-bottom-right-radius: 3px; -} - -/* line 14, sourcefiles/scss/components/default/_forms.scss */ -.mw-ui-vform { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - width: 290px; -} -/* line 20, sourcefiles/scss/components/default/_forms.scss */ -.mw-ui-vform > div { - display: block; - margin: 0 0 15px 0; - padding: 0; - width: 100%; -} -/* line 28, sourcefiles/scss/components/default/_forms.scss */ -.mw-ui-vform > div input, -.mw-ui-vform > div .mw-ui-button { - display: block; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - margin: 0; - width: 100%; -} -/* line 37, sourcefiles/scss/components/default/_forms.scss */ -.mw-ui-vform > div input:not([type=button]):not([type=submit]):not([type=file]) { - border-style: solid; - border-width: 1px; - border-color: #c9c9c9; - color: #252525; - padding: 0.35em 0 0.35em 0.5em; -} -/* line 11, sourcefiles/scss/mixins/_forms.scss */ -.mw-ui-vform > div input:not([type=button]):not([type=submit]):not([type=file]):focus { - box-shadow: #4091ed 0px 0px 5px; - border-color: #4091ed; -} -/* line 13, sourcefiles/scss/mixins/_forms.scss */ -.mw-ui-vform > div input:not([type=button]):not([type=submit]):not([type=file]):focus:not([type=checkbox]):not([type=radio]) { - outline: 0; -} -/* line 41, sourcefiles/scss/components/default/_forms.scss */ -.mw-ui-vform > div label { - display: block; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - font-size: 0.9em; - color: #4a4a4a; - width: auto; - margin: 0 0 0.2em 0; - padding: 0; -} -/* line 38, sourcefiles/scss/mixins/_forms.scss */ -.mw-ui-vform > div label * { - font-weight: normal; -} -/* line 52, sourcefiles/scss/components/default/_forms.scss */ -.mw-ui-vform > div input[type="checkbox"], -.mw-ui-vform > div input[type="radio"] { - display: inline; - -webkit-box-sizing: content-box; - -moz-box-sizing: content-box; - box-sizing: content-box; - width: auto; -} -/* line 63, sourcefiles/scss/components/default/_forms.scss */ -.mw-ui-vform .error { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - font-size: 0.9em; - margin: 0 0 1em 0; - padding: 0.5em; - color: #cc0000; - border: 1px solid #fac5c5; - background-color: #fae3e3; - text-shadow: 0 1px #fae3e3; - word-wrap: break-word; -} - -/* line 86, sourcefiles/scss/components/default/_forms.scss */ -.mw-ui-vform-div { - display: block; - margin: 0 0 15px 0; - padding: 0; - width: 100%; -} - -/* line 96, sourcefiles/scss/components/default/_forms.scss */ -.mw-ui-input { - border-style: solid; - border-width: 1px; - border-color: #c9c9c9; - color: #252525; - padding: 0.35em 0 0.35em 0.5em; -} -/* line 11, sourcefiles/scss/mixins/_forms.scss */ -.mw-ui-input:focus { - box-shadow: #4091ed 0px 0px 5px; - border-color: #4091ed; -} -/* line 13, sourcefiles/scss/mixins/_forms.scss */ -.mw-ui-input:focus:not([type=checkbox]):not([type=radio]) { - outline: 0; -} - -/* line 103, sourcefiles/scss/components/default/_forms.scss */ -.mw-ui-label { - font-size: 0.9em; - color: #4a4a4a; -} -/* line 38, sourcefiles/scss/mixins/_forms.scss */ -.mw-ui-label * { - font-weight: normal; -} - -/* line 112, sourcefiles/scss/components/default/_forms.scss */ -.mw-ui-checkbox-label, .mw-ui-radio-label { - margin-bottom: 0.5em; - cursor: pointer; - vertical-align: bottom; - line-height: normal; - font-weight: normal; -} -/* line 54, sourcefiles/scss/mixins/_forms.scss */ -.mw-ui-checkbox-label > input[type="checkbox"], .mw-ui-checkbox-label > input[type="radio"], .mw-ui-radio-label > input[type="checkbox"], .mw-ui-radio-label > input[type="radio"] { - width: auto; - height: auto; - margin: 0 0.1em 0em 0; - padding: 0; - border-style: solid; - border-width: 1px; - border-color: #c9c9c9; - cursor: pointer; -} diff --git a/resources/mediawiki.ui/mediawiki.ui.vector.css b/resources/mediawiki.ui/mediawiki.ui.vector.css deleted file mode 100644 index fd9e091589..0000000000 --- a/resources/mediawiki.ui/mediawiki.ui.vector.css +++ /dev/null @@ -1,414 +0,0 @@ -@charset "UTF-8"; -/** - * Provide Agora appearance for mw-ui-* classes when using the Vector skin. - * Compass builds these Agora styles from source Sass files in - * extensions/Agora/modules/scss - */ -/* _effects.scss */ -/* Mixins for visual effects in CSS3 */ -/* line 7, sourcefiles/scss/components/_utilities.scss */ -.mw-ui-flush-left { - float: left; - margin-left: 0; - padding-left: 0; -} - -/* line 11, sourcefiles/scss/components/_utilities.scss */ -.mw-ui-flush-right { - float: right; - margin-right: 0; - padding-right: 0; -} - -/* line 15, sourcefiles/scss/components/_utilities.scss */ -.mw-ui-center-block { - display: block; - margin-left: auto; - margin-right: auto; -} - -/* line 4, sourcefiles/scss/components/default/_buttons.scss */ -.mw-ui-button { - display: -moz-inline-stack; - display: inline-block; - vertical-align: middle; - *vertical-align: auto; - zoom: 1; - *display: inline; - padding: 0.4em 1em 0.4em 1em; - margin: 0; - background-color: #c9c9c9; - *background-color: #c9c9c9; - *zoom: 1; - filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFDCDCDC', endColorstr='#FFC9C9C9'); - background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dcdcdc), color-stop(100%, #c9c9c9)); - background-image: -webkit-linear-gradient(top, #dcdcdc, #c9c9c9); - background-image: -moz-linear-gradient(top, #dcdcdc, #c9c9c9); - background-image: -o-linear-gradient(top, #dcdcdc, #c9c9c9); - background-image: linear-gradient(top, #dcdcdc, #c9c9c9); - color: black; - text-shadow: 0 1px 1px rgba(201, 201, 201, 0.3); - border: 1px solid #c4c4c4; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - -ms-border-radius: 3px; - -o-border-radius: 3px; - border-radius: 3px; - vertical-align: middle; - text-align: center; - text-decoration: none; - font-weight: bold; - cursor: pointer; -} -/* line 38, sourcefiles/scss/mixins/_effects.scss */ -.mw-ui-button:hover, .mw-ui-button.mw-ui-hover { - background-color: gainsboro; - *background-color: gainsboro; - *zoom: 1; - filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFE9E9E9', endColorstr='#FFDCDCDC'); - background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e9e9e9), color-stop(100%, #dcdcdc)); - background-image: -webkit-linear-gradient(top, #e9e9e9, #dcdcdc); - background-image: -moz-linear-gradient(top, #e9e9e9, #dcdcdc); - background-image: -o-linear-gradient(top, #e9e9e9, #dcdcdc); - background-image: linear-gradient(top, #e9e9e9, #dcdcdc); - text-decoration: none; -} -/* line 44, sourcefiles/scss/mixins/_effects.scss */ -.mw-ui-button:active, .mw-ui-button.mw-ui-active { - background-image: none; - background-color: #c1c1c1; - text-shadow: none; -} -/* line 54, sourcefiles/scss/mixins/_effects.scss */ -.mw-ui-button:disabled, .mw-ui-button.mw-ui-disabled { - background-image: none; - background-color: #c9c9c9; - opacity: 0.5; - text-shadow: none; -} -/* line 30, sourcefiles/scss/components/default/_buttons.scss */ -.mw-ui-button:disabled, .mw-ui-button.mw-ui-disabled { - cursor: default; -} -/* line 36, sourcefiles/scss/components/default/_buttons.scss */ -.mw-ui-button.mw-ui-big { - font-size: 1.3em; -} -/* line 41, sourcefiles/scss/components/default/_buttons.scss */ -.mw-ui-button.mw-ui-block { - display: block; - width: 100%; -} - -/* line 49, sourcefiles/scss/components/default/_buttons.scss */ -a.mw-ui-button { - text-decoration: none; -} - -/* line 56, sourcefiles/scss/components/default/_buttons.scss */ -.mw-ui-button-group > * { - -webkit-border-radius: 0; - -moz-border-radius: 0; - -ms-border-radius: 0; - -o-border-radius: 0; - border-radius: 0; - float: left; -} -/* line 60, sourcefiles/scss/components/default/_buttons.scss */ -.mw-ui-button-group > *:first-child { - -moz-border-radius-topleft: 3px; - -webkit-border-top-left-radius: 3px; - border-top-left-radius: 3px; - -moz-border-radius-bottomleft: 3px; - -webkit-border-bottom-left-radius: 3px; - border-bottom-left-radius: 3px; -} -/* line 65, sourcefiles/scss/components/default/_buttons.scss */ -.mw-ui-button-group > *:last-child { - -moz-border-radius-topright: 3px; - -webkit-border-top-right-radius: 3px; - border-top-right-radius: 3px; - -moz-border-radius-bottomright: 3px; - -webkit-border-bottom-right-radius: 3px; - border-bottom-right-radius: 3px; -} - -/* line 3, sourcefiles/scss/components/vector/_buttons.scss */ -.mw-ui-button { - font-size: 1em; - line-height: 1.4em; -} -/* line 6, sourcefiles/scss/components/vector/_buttons.scss */ -.mw-ui-button.mw-ui-primary { - background-color: #3366bb; - *background-color: #3366bb; - *zoom: 1; - filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF4779CD', endColorstr='#FF3366BB'); - background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #4779cd), color-stop(100%, #3366bb)); - background-image: -webkit-linear-gradient(top, #4779cd, #3366bb); - background-image: -moz-linear-gradient(top, #4779cd, #3366bb); - background-image: -o-linear-gradient(top, #4779cd, #3366bb); - background-image: linear-gradient(top, #4779cd, #3366bb); - color: white; - text-shadow: 0 1px 1px rgba(51, 102, 187, 0.75); - border: 1px solid #3162b3; -} -/* line 38, sourcefiles/scss/mixins/_effects.scss */ -.mw-ui-button.mw-ui-primary:hover, .mw-ui-button.mw-ui-primary.mw-ui-hover { - background-color: #4779cd; - *background-color: #4779cd; - *zoom: 1; - filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF5B88D2', endColorstr='#FF4779CD'); - background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #5b88d2), color-stop(100%, #4779cd)); - background-image: -webkit-linear-gradient(top, #5b88d2, #4779cd); - background-image: -moz-linear-gradient(top, #5b88d2, #4779cd); - background-image: -o-linear-gradient(top, #5b88d2, #4779cd); - background-image: linear-gradient(top, #5b88d2, #4779cd); - text-decoration: none; -} -/* line 44, sourcefiles/scss/mixins/_effects.scss */ -.mw-ui-button.mw-ui-primary:active, .mw-ui-button.mw-ui-primary.mw-ui-active { - background-image: none; - background-color: #305faf; - text-shadow: none; -} -/* line 54, sourcefiles/scss/mixins/_effects.scss */ -.mw-ui-button.mw-ui-primary:disabled, .mw-ui-button.mw-ui-primary.mw-ui-disabled { - background-image: none; - background-color: #3366bb; - opacity: 0.5; - text-shadow: none; -} -/* line 10, sourcefiles/scss/components/vector/_buttons.scss */ -.mw-ui-button.mw-ui-constructive { - background-color: #27aa65; - *background-color: #27aa65; - *zoom: 1; - filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF2EC977', endColorstr='#FF27AA65'); - background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #2ec977), color-stop(100%, #27aa65)); - background-image: -webkit-linear-gradient(top, #2ec977, #27aa65); - background-image: -moz-linear-gradient(top, #2ec977, #27aa65); - background-image: -o-linear-gradient(top, #2ec977, #27aa65); - background-image: linear-gradient(top, #2ec977, #27aa65); - color: white; - text-shadow: 0 1px 1px rgba(39, 170, 101, 0.75); - border: 1px solid #25a260; -} -/* line 38, sourcefiles/scss/mixins/_effects.scss */ -.mw-ui-button.mw-ui-constructive:hover, .mw-ui-button.mw-ui-constructive.mw-ui-hover { - background-color: #2ec977; - *background-color: #2ec977; - *zoom: 1; - filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF3ED384', endColorstr='#FF2EC977'); - background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #3ed384), color-stop(100%, #2ec977)); - background-image: -webkit-linear-gradient(top, #3ed384, #2ec977); - background-image: -moz-linear-gradient(top, #3ed384, #2ec977); - background-image: -o-linear-gradient(top, #3ed384, #2ec977); - background-image: linear-gradient(top, #3ed384, #2ec977); - text-decoration: none; -} -/* line 44, sourcefiles/scss/mixins/_effects.scss */ -.mw-ui-button.mw-ui-constructive:active, .mw-ui-button.mw-ui-constructive.mw-ui-active { - background-image: none; - background-color: #249e5e; - text-shadow: none; -} -/* line 54, sourcefiles/scss/mixins/_effects.scss */ -.mw-ui-button.mw-ui-constructive:disabled, .mw-ui-button.mw-ui-constructive.mw-ui-disabled { - background-image: none; - background-color: #27aa65; - opacity: 0.5; - text-shadow: none; -} -/* line 14, sourcefiles/scss/components/vector/_buttons.scss */ -.mw-ui-button.mw-ui-destructive { - background-color: #cc0000; - *background-color: #cc0000; - *zoom: 1; - filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFF20000', endColorstr='#FFCC0000'); - background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f20000), color-stop(100%, #cc0000)); - background-image: -webkit-linear-gradient(top, #f20000, #cc0000); - background-image: -moz-linear-gradient(top, #f20000, #cc0000); - background-image: -o-linear-gradient(top, #f20000, #cc0000); - background-image: linear-gradient(top, #f20000, #cc0000); - color: white; - text-shadow: 0 1px 1px rgba(204, 0, 0, 0.75); - border: 1px solid #c20000; -} -/* line 38, sourcefiles/scss/mixins/_effects.scss */ -.mw-ui-button.mw-ui-destructive:hover, .mw-ui-button.mw-ui-destructive.mw-ui-hover { - background-color: #f20000; - *background-color: #f20000; - *zoom: 1; - filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFFF0D0D', endColorstr='#FFF20000'); - background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ff0d0d), color-stop(100%, #f20000)); - background-image: -webkit-linear-gradient(top, #ff0d0d, #f20000); - background-image: -moz-linear-gradient(top, #ff0d0d, #f20000); - background-image: -o-linear-gradient(top, #ff0d0d, #f20000); - background-image: linear-gradient(top, #ff0d0d, #f20000); - text-decoration: none; -} -/* line 44, sourcefiles/scss/mixins/_effects.scss */ -.mw-ui-button.mw-ui-destructive:active, .mw-ui-button.mw-ui-destructive.mw-ui-active { - background-image: none; - background-color: #bd0000; - text-shadow: none; -} -/* line 54, sourcefiles/scss/mixins/_effects.scss */ -.mw-ui-button.mw-ui-destructive:disabled, .mw-ui-button.mw-ui-destructive.mw-ui-disabled { - background-image: none; - background-color: #cc0000; - opacity: 0.5; - text-shadow: none; -} - -/* line 14, sourcefiles/scss/components/default/_forms.scss */ -.mw-ui-vform { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - width: 290px; -} -/* line 20, sourcefiles/scss/components/default/_forms.scss */ -.mw-ui-vform > div { - display: block; - margin: 0 0 15px 0; - padding: 0; - width: 100%; -} -/* line 28, sourcefiles/scss/components/default/_forms.scss */ -.mw-ui-vform > div input, -.mw-ui-vform > div .mw-ui-button { - display: block; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - margin: 0; - width: 100%; -} -/* line 37, sourcefiles/scss/components/default/_forms.scss */ -.mw-ui-vform > div input:not([type=button]):not([type=submit]):not([type=file]) { - border-style: solid; - border-width: 1px; - border-color: #c9c9c9; - color: #252525; - padding: 0.35em 0 0.35em 0.5em; -} -/* line 11, sourcefiles/scss/mixins/_forms.scss */ -.mw-ui-vform > div input:not([type=button]):not([type=submit]):not([type=file]):focus { - box-shadow: #4091ed 0px 0px 5px; - border-color: #4091ed; -} -/* line 13, sourcefiles/scss/mixins/_forms.scss */ -.mw-ui-vform > div input:not([type=button]):not([type=submit]):not([type=file]):focus:not([type=checkbox]):not([type=radio]) { - outline: 0; -} -/* line 41, sourcefiles/scss/components/default/_forms.scss */ -.mw-ui-vform > div label { - display: block; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - font-size: 0.9em; - color: #4a4a4a; - width: auto; - margin: 0 0 0.2em 0; - padding: 0; -} -/* line 38, sourcefiles/scss/mixins/_forms.scss */ -.mw-ui-vform > div label * { - font-weight: normal; -} -/* line 52, sourcefiles/scss/components/default/_forms.scss */ -.mw-ui-vform > div input[type="checkbox"], -.mw-ui-vform > div input[type="radio"] { - display: inline; - -webkit-box-sizing: content-box; - -moz-box-sizing: content-box; - box-sizing: content-box; - width: auto; -} -/* line 63, sourcefiles/scss/components/default/_forms.scss */ -.mw-ui-vform .error { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - font-size: 0.9em; - margin: 0 0 1em 0; - padding: 0.5em; - color: #cc0000; - border: 1px solid #fac5c5; - background-color: #fae3e3; - text-shadow: 0 1px #fae3e3; - word-wrap: break-word; -} - -/* line 86, sourcefiles/scss/components/default/_forms.scss */ -.mw-ui-vform-div { - display: block; - margin: 0 0 15px 0; - padding: 0; - width: 100%; -} - -/* line 96, sourcefiles/scss/components/default/_forms.scss */ -.mw-ui-input { - border-style: solid; - border-width: 1px; - border-color: #c9c9c9; - color: #252525; - padding: 0.35em 0 0.35em 0.5em; -} -/* line 11, sourcefiles/scss/mixins/_forms.scss */ -.mw-ui-input:focus { - box-shadow: #4091ed 0px 0px 5px; - border-color: #4091ed; -} -/* line 13, sourcefiles/scss/mixins/_forms.scss */ -.mw-ui-input:focus:not([type=checkbox]):not([type=radio]) { - outline: 0; -} - -/* line 103, sourcefiles/scss/components/default/_forms.scss */ -.mw-ui-label { - font-size: 0.9em; - color: #4a4a4a; -} -/* line 38, sourcefiles/scss/mixins/_forms.scss */ -.mw-ui-label * { - font-weight: normal; -} - -/* line 112, sourcefiles/scss/components/default/_forms.scss */ -.mw-ui-checkbox-label, .mw-ui-radio-label { - margin-bottom: 0.5em; - cursor: pointer; - vertical-align: bottom; - line-height: normal; - font-weight: normal; -} -/* line 54, sourcefiles/scss/mixins/_forms.scss */ -.mw-ui-checkbox-label > input[type="checkbox"], .mw-ui-checkbox-label > input[type="radio"], .mw-ui-radio-label > input[type="checkbox"], .mw-ui-radio-label > input[type="radio"] { - width: auto; - height: auto; - margin: 0 0.1em 0em 0; - padding: 0; - border-style: solid; - border-width: 1px; - border-color: #c9c9c9; - cursor: pointer; -} - -/* line 5, sourcefiles/scss/components/vector/_forms.scss */ -.mw-ui-vform, -.mw-ui-vform > div input, -.mw-ui-input { - font-size: 1em; - line-height: 1.4em; -} - -/* line 3, sourcefiles/scss/components/vector/_containers.scss */ -.mw-ui-container { - font-size: 1em; - line-height: 1.4em; -} diff --git a/resources/mediawiki.ui/mixins/effects.less b/resources/mediawiki.ui/mixins/effects.less new file mode 100644 index 0000000000..d168e5f5ff --- /dev/null +++ b/resources/mediawiki.ui/mixins/effects.less @@ -0,0 +1,52 @@ +/* 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%); + + &:hover, + &.mw-ui-hover { + .vertical-gradient(lighten(@baseColor, 12.5%), lighten(@baseColor, 7.5%)); + text-decoration: none; + } + + &:active, + &.mw-ui-active { + background-image: none; + background-color: darken(@baseColor, 3%); + } + + &:disabled, + &.mw-ui-disabled { + background-image: none; + background-color: @baseColor; + opacity: 0.5; + } +} + +.buttonColors(@baseColor: @agoraGray) when (lightness(@baseColor) >= 50%) { + color: #000; +} + +.buttonColors(@baseColor: @agoraGray) when (lightness(@baseColor) < 50%) { + color: #fff; +} diff --git a/resources/mediawiki.ui/mixins/forms.less b/resources/mediawiki.ui/mixins/forms.less new file mode 100644 index 0000000000..76329b16e8 --- /dev/null +++ b/resources/mediawiki.ui/mixins/forms.less @@ -0,0 +1,51 @@ +@import "../settings/colors"; + +// Font is not included. +// For Vector, that should be layered on top with vector-type +.agora-field-styling() { + + border: 1px solid @agoraGray; + + &: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: @agoraBlueShadow 0px 0px 5px; + + border-color: @agoraBlueShadow; + } + + color: @agoraTextColor; + padding: 0.35em 0 0.35em 0.5em; +} + +.agora-label-styling() { + //font-weight: bold; + font-size: 0.9em; + color: darken(@agoraGray, 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 0em 0; + padding: 0; + border: 1px solid @agoraGray; + cursor: pointer; + } +} diff --git a/resources/mediawiki.ui/mixins/type.less b/resources/mediawiki.ui/mixins/type.less new file mode 100644 index 0000000000..cb3b18cf18 --- /dev/null +++ b/resources/mediawiki.ui/mixins/type.less @@ -0,0 +1,6 @@ +@import "../settings/typography"; + +.vector-type() { + font-size: @baseFontSize; + line-height: @baseLineHeight; +} diff --git a/resources/mediawiki.ui/mixins/utilities.less b/resources/mediawiki.ui/mixins/utilities.less new file mode 100644 index 0000000000..fbaffa8af4 --- /dev/null +++ b/resources/mediawiki.ui/mixins/utilities.less @@ -0,0 +1,23 @@ +.box-sizing(@value) { + -moz-box-sizing: @value; + -webkit-box-sizing: @value; + box-sizing: @value; +} + +.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/mediawiki.ui/sourcefiles/scss/settings/_colors.scss b/resources/mediawiki.ui/settings/colors.less similarity index 61% rename from resources/mediawiki.ui/sourcefiles/scss/settings/_colors.scss rename to resources/mediawiki.ui/settings/colors.less index 0c18bdb45a..208d6f61b5 100644 --- a/resources/mediawiki.ui/sourcefiles/scss/settings/_colors.scss +++ b/resources/mediawiki.ui/settings/colors.less @@ -1,17 +1,17 @@ // Grays // ----------------------------------------- -$agoraGray: #c9c9c9; -$agoraTextColor: #252525; +@agoraGray: #c9c9c9; +@agoraTextColor: #252525; // Blues // ----------------------------------------- -$agoraBlue: #3366bb; -$agoraBlueShadow: #4091ed; +@agoraBlue: #3366bb; +@agoraBlueShadow: #4091ed; // Greens // ----------------------------------------- -$agoraGreen: #27aa65; +@agoraGreen: #27aa65; // Reds // ----------------------------------------- -$agoraRed: #cc0000; +@agoraRed: #cc0000; diff --git a/resources/mediawiki.ui/settings/typography.less b/resources/mediawiki.ui/settings/typography.less new file mode 100644 index 0000000000..76c398cf85 --- /dev/null +++ b/resources/mediawiki.ui/settings/typography.less @@ -0,0 +1,5 @@ +@baseFontSize: 1em; +@baseLineHeight: 1.4 * @baseFontSize; +@baseFontColor: @agoraTextColor; + +@smallFontSize: 0.75em; diff --git a/resources/mediawiki.ui/sourcefiles/Makefile b/resources/mediawiki.ui/sourcefiles/Makefile deleted file mode 100644 index dea901395a..0000000000 --- a/resources/mediawiki.ui/sourcefiles/Makefile +++ /dev/null @@ -1,24 +0,0 @@ -DATE=$(shell date +%I:%M%p) -CHECK=\033[32m✔\033[39m -HR=\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\# - -build: - @echo "\n${HR}" - @echo "Building Agora..." - @echo "${HR}\n" - @compass compile - @echo "Compiling Compass project... ${CHECK} Done" - @rm -rf .sass-cache - @echo "Removing .sass-cache... ${CHECK} Done" - @echo "\n${HR}" - @echo "Agora successfully built at ${DATE}." - @echo "${HR}\n" - -all: build - -watch: - @echo "\n${HR}" - @echo "Watching SCSS files for Agora..." - @echo "${HR}\n" - @compass watch - @echo "Started watching modules/scss at ${DATE}..." diff --git a/resources/mediawiki.ui/sourcefiles/config.rb b/resources/mediawiki.ui/sourcefiles/config.rb deleted file mode 100644 index 28c6524093..0000000000 --- a/resources/mediawiki.ui/sourcefiles/config.rb +++ /dev/null @@ -1,27 +0,0 @@ -# Require any additional compass plugins here. - -# Set this to the root of your project when deployed: -# (unused so far): http_path = "/" - -# Output to parent of build directory -css_dir = ".." -sass_dir = "scss" -# (unused so far): images_dir = "modules/img" -# (unused so far): javascripts_dir = "modules/js" - -# You can select your preferred output style here (can be overridden via the command line): -# output_style = :expanded or :nested or :compact or :compressed -output_style = :expanded - -# To enable relative paths to assets via compass helper functions. Uncomment: -relative_assets = true - -# To disable debugging comments that display the original location of your selectors. Uncomment: -line_comments = true - - -# If you prefer the indented syntax, you might want to regenerate this -# project again passing --syntax sass, or you can uncomment this: -# preferred_syntax = :sass -# and then run: -# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass diff --git a/resources/mediawiki.ui/sourcefiles/scss/components/_default.scss b/resources/mediawiki.ui/sourcefiles/scss/components/_default.scss deleted file mode 100644 index e7090ebcf3..0000000000 --- a/resources/mediawiki.ui/sourcefiles/scss/components/_default.scss +++ /dev/null @@ -1,3 +0,0 @@ -@import "utilities"; -@import "default/buttons"; -@import "default/forms"; \ No newline at end of file diff --git a/resources/mediawiki.ui/sourcefiles/scss/components/_vector.scss b/resources/mediawiki.ui/sourcefiles/scss/components/_vector.scss deleted file mode 100644 index d7cb34ae3e..0000000000 --- a/resources/mediawiki.ui/sourcefiles/scss/components/_vector.scss +++ /dev/null @@ -1,4 +0,0 @@ -@import "utilities"; -@import "vector/buttons"; -@import "vector/forms"; -@import "vector/containers"; diff --git a/resources/mediawiki.ui/sourcefiles/scss/mediawiki.ui.default.scss b/resources/mediawiki.ui/sourcefiles/scss/mediawiki.ui.default.scss deleted file mode 100644 index e6db523790..0000000000 --- a/resources/mediawiki.ui/sourcefiles/scss/mediawiki.ui.default.scss +++ /dev/null @@ -1,16 +0,0 @@ -/** - * Provide Agora appearance for mw-ui-* classes when using a skin other than - * Vector. - * Compass builds these Agora styles from source Sass files in - * extensions/Agora/modules/scss - */ - -@charset "UTF-8"; - -@import "compass"; - -@import "settings/all"; - -@import "mixins/all"; - -@import "components/default"; diff --git a/resources/mediawiki.ui/sourcefiles/scss/mediawiki.ui.vector.scss b/resources/mediawiki.ui/sourcefiles/scss/mediawiki.ui.vector.scss deleted file mode 100644 index ac113eec67..0000000000 --- a/resources/mediawiki.ui/sourcefiles/scss/mediawiki.ui.vector.scss +++ /dev/null @@ -1,15 +0,0 @@ -/** - * Provide Agora appearance for mw-ui-* classes when using the Vector skin. - * Compass builds these Agora styles from source Sass files in - * extensions/Agora/modules/scss - */ - -@charset "UTF-8"; - -@import "compass"; - -@import "settings/all"; - -@import "mixins/all"; - -@import "components/vector"; diff --git a/resources/mediawiki.ui/sourcefiles/scss/mixins/_all.scss b/resources/mediawiki.ui/sourcefiles/scss/mixins/_all.scss deleted file mode 100644 index adc48cd812..0000000000 --- a/resources/mediawiki.ui/sourcefiles/scss/mixins/_all.scss +++ /dev/null @@ -1,4 +0,0 @@ -@import "utilities"; -@import "type"; -@import "effects"; -@import "forms"; \ No newline at end of file diff --git a/resources/mediawiki.ui/sourcefiles/scss/mixins/_effects.scss b/resources/mediawiki.ui/sourcefiles/scss/mixins/_effects.scss deleted file mode 100644 index 2efff82077..0000000000 --- a/resources/mediawiki.ui/sourcefiles/scss/mixins/_effects.scss +++ /dev/null @@ -1,62 +0,0 @@ -/* _effects.scss */ - -/* Mixins for visual effects in CSS3 */ - -// ---------------------------------------------------------------------------- -// Gradients -// ---------------------------------------------------------------------------- -@mixin vertical-gradient ($startColor: lighten($agoraGray, 95%), $endColor: $agoraGray) { - // Fallback - background-color: $endColor; - *background-color: $endColor; // IE7 - - // IE6-8 - @include filter-gradient($startColor, $endColor, vertical); - - // IE9+, Opera, Gecko, WebKit - @include background-image(linear-gradient(top, $startColor, $endColor)); -} - -// ---------------------------------------------------------------------------- -// Button styling -// ---------------------------------------------------------------------------- -@mixin buttonColors ($baseColor: $agoraGray) { - // Background color - @include vertical-gradient(lighten($baseColor, 7.5%), $baseColor); - - @if $baseColor == $agoraGray { - color: black; - @include text-shadow(0 1px 1px rgba($baseColor, 0.3)); - } @else { - color: white; - @include text-shadow(0 1px 1px rgba($baseColor, 0.75)); - } - - border: 1px solid darken($baseColor, 2%); - - &:hover, - &.mw-ui-hover { - @include vertical-gradient(lighten($baseColor, 12.5%), lighten($baseColor, 7.5%)); - text-decoration: none; - } - - &:active, - &.mw-ui-active { - background: { - image: none; - color: darken($baseColor, 3%); - } - - text-shadow: none; - } - - &:disabled, - &.mw-ui-disabled { - background: { - image: none; - color: $baseColor; - } - opacity: 0.5; - text-shadow: none; - } -} diff --git a/resources/mediawiki.ui/sourcefiles/scss/mixins/_forms.scss b/resources/mediawiki.ui/sourcefiles/scss/mixins/_forms.scss deleted file mode 100644 index 0f3f6ad341..0000000000 --- a/resources/mediawiki.ui/sourcefiles/scss/mixins/_forms.scss +++ /dev/null @@ -1,66 +0,0 @@ -// Font is not included. -// For Vector, that should be layered on top with vector-type -@mixin agora-field-styling() { - - border: { - style: solid; - width: 1px; - color: $agoraGray; - }; - - &:focus { - // Styling focus of native checkboxes etc on Mac is almost impossible. - &:not([type=checkbox]):not([type=radio]) { - @include reset-focus; // Removes OS field focus - }; - - // @include box-shadow generates unneeded prefixes - // https://github.com/chriseppstein/compass/issues/1054 , so specify - // directly. - box-shadow: $agoraBlueShadow 0px 0px 5px; - - border: { - color: $agoraBlueShadow; - }; - } - - color: $agoraTextColor; - padding: 0.35em 0 0.35em 0.5em; -} - -@mixin agora-label-styling() { - font: { - //weight: bold; - size: 0.9em; - }; - color: darken($agoraGray, 50%); - - & * { - font-weight: normal; - } -} - -@mixin 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 0em 0; - padding: 0; - border: { - style: solid; - width: 1px; - color: $agoraGray; - } - cursor: pointer; - } -} diff --git a/resources/mediawiki.ui/sourcefiles/scss/mixins/_type.scss b/resources/mediawiki.ui/sourcefiles/scss/mixins/_type.scss deleted file mode 100644 index 8a93a08b7b..0000000000 --- a/resources/mediawiki.ui/sourcefiles/scss/mixins/_type.scss +++ /dev/null @@ -1,6 +0,0 @@ -@mixin vector-type { - font: { - size: $baseFontSize; - } - line-height: $baseLineHeight; -} \ No newline at end of file diff --git a/resources/mediawiki.ui/sourcefiles/scss/mixins/_utilities.scss b/resources/mediawiki.ui/sourcefiles/scss/mixins/_utilities.scss deleted file mode 100644 index 71a93b60a1..0000000000 --- a/resources/mediawiki.ui/sourcefiles/scss/mixins/_utilities.scss +++ /dev/null @@ -1,19 +0,0 @@ -@mixin agora-flush-left() { - float: left; - margin-left: 0; - padding-left: 0; -} - -@mixin agora-flush-right() { - float: right; - margin-right: 0; - padding-right: 0; -} - -@mixin agora-center-block() { - display: block; - margin: { - left: auto; - right: auto; - }; -} \ No newline at end of file diff --git a/resources/mediawiki.ui/sourcefiles/scss/settings/_all.scss b/resources/mediawiki.ui/sourcefiles/scss/settings/_all.scss deleted file mode 100644 index 21ac292f70..0000000000 --- a/resources/mediawiki.ui/sourcefiles/scss/settings/_all.scss +++ /dev/null @@ -1,2 +0,0 @@ -@import "colors"; -@import "typography"; \ No newline at end of file diff --git a/resources/mediawiki.ui/sourcefiles/scss/settings/_typography.scss b/resources/mediawiki.ui/sourcefiles/scss/settings/_typography.scss deleted file mode 100644 index 013d12b3cd..0000000000 --- a/resources/mediawiki.ui/sourcefiles/scss/settings/_typography.scss +++ /dev/null @@ -1,5 +0,0 @@ -$baseFontSize: 1em; -$baseLineHeight: 1.4 * $baseFontSize; -$baseFontColor: $agoraTextColor; - -$smallFontSize: 0.75em; \ No newline at end of file diff --git a/resources/mediawiki.ui/vector.less b/resources/mediawiki.ui/vector.less new file mode 100644 index 0000000000..a3475628e5 --- /dev/null +++ b/resources/mediawiki.ui/vector.less @@ -0,0 +1,8 @@ +/** + * Provide Agora appearance for mw-ui-* classes when using the Vector skin. + */ + +@import "components/utilities"; +@import "components/vector/buttons"; +@import "components/vector/forms"; +@import "components/vector/containers"; -- 2.20.1