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
# Building & testing
node_modules/
-.sass-cache/
# Composer
/vendor
),
'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',
),
--- /dev/null
+@import "../../settings/typography";
+@import "../../mixins/effects";
+
+@buttonBorderRadius: 3px;
+
+// Button styling
+.mw-ui-button {
+ // Container layout
+ 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
+ .buttonColors();
+ border-radius: @buttonBorderRadius;
+
+ // Content styling
+ vertical-align: middle;
+
+ text-align: center;
+ text-decoration: none;
+
+ font-weight: bold;
+
+ // Interaction styling
+ cursor: pointer;
+
+ &:disabled,
+ &.mw-ui-disabled {
+ cursor: default;
+ }
+
+ // Button sizes and displays
+ // -----------------------------------------
+ &.mw-ui-big {
+ font-size: @baseFontSize * 1.3;
+ }
+ &.mw-ui-block {
+ display: block;
+ width: 100%;
+ }
+}
+
+// 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;
+}
+
+// Button groups
+.mw-ui-button-group > * {
+ border-radius: 0;
+ float: left;
+
+ &:first-child{
+ border-top-left-radius: @buttonBorderRadius;
+ border-bottom-left-radius: @buttonBorderRadius;
+ }
+
+ &:last-child{
+ border-top-right-radius: @buttonBorderRadius;
+ border-bottom-right-radius: @buttonBorderRadius;
+ }
+}
--- /dev/null
+// 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;
+
+// Style a compact vertical stacked form ("VForm") and the elements in divs
+// within it.
+.mw-ui-vform {
+ .box-sizing(border-box);
+
+ width: @defaultFormWidth;
+
+ // Immediate divs in a vform are block and spaced-out.
+ & > div {
+ display: block;
+ margin: 0 0 15px 0;
+ padding: 0;
+ width: 100%;
+
+ // MW currently doesn't use the type attribute everywhere on inputs.
+ input,
+ .mw-ui-button {
+ display: block;
+ .box-sizing(border-box);
+ margin: 0;
+ width: 100%;
+ }
+
+ // 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]), {
+ .agora-field-styling(); // mixins/forms.less
+ }
+
+ label {
+ display: block;
+ .box-sizing(border-box);
+ .agora-label-styling();
+ width: auto;
+ margin: 0 0 0.2em 0;
+ padding: 0;
+ }
+
+ // Override input styling just for checkboxes and radio inputs.
+ input[type="checkbox"],
+ input[type="radio"] {
+ display: inline;
+ .box-sizing(content-box);
+ width: auto;
+ }
+
+ }
+
+ // HTMLForm uses error, SpecialUserlogin (login and create account) uses
+ // errorbox.
+ // TODO move errorbox from mediawiki.special.vforms.css into here.
+ .error {
+ .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;
+ }
+}
+
+// --------------------------------------------------------------------------
+// Elements
+// --------------------------------------------------------------------------
+
+// Apply this to individual elements to style them.
+// You generally don't need to use this class on divs within an Agora
+// form container such as mw-ui-vform
+// XXX DRY: This repeats earlier styling, use an @include agora-div-styling ?
+.mw-ui-vform-div {
+ display: block;
+ margin: 0 0 15px 0;
+ padding: 0;
+ width: 100%;
+}
+
+// Apply mw-ui-input to individual input fields to style them.
+// You generally don't need to use this class if <input> is within an Agora
+// form container such as mw-ui-vform
+.mw-ui-input {
+ .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 <label> is within an Agora
+// form container such as mw-ui-vform
+.mw-ui-label {
+ .agora-label-styling(); // mixins/forms.less
+}
+
+// Nesting an input checkbox or radio button inside a label with this class
+// improves alignment, e.g.
+// <label class="mw-ui-checkbox-label">
+// <input type="checkbox">The label text
+// </label>
+.mw-ui-checkbox-label, .mw-ui-radio-label {
+ .agora-inline-label-styling();
+}
--- /dev/null
+// Generic helper classes that could be used in many elements/layouts
+
+// --------------------------------------------------------------------------
+// Positioning
+// --------------------------------------------------------------------------
+
+@import "../mixins/utilities";
+
+.mw-ui-flush-left {
+ .agora-flush-left();
+}
+
+.mw-ui-flush-right {
+ .agora-flush-right();
+}
+
+.mw-ui-center-block {
+ .agora-center-block();
+}
--- /dev/null
+@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 {
+ .buttonColors(@agoraBlue);
+ }
+
+ &.mw-ui-constructive {
+ .buttonColors(@agoraGreen);
+ }
+
+ &.mw-ui-destructive {
+ .buttonColors(@agoraRed);
+ }
+
+ .vector-type();
+}
--- /dev/null
+// No default settings for containers yet.
+@import "../../mixins/type";
+
+.mw-ui-container {
+ .vector-type();
+}
--- /dev/null
+@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 {
+ .vector-type();
+}
--- /dev/null
+/**
+ * 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";
+++ /dev/null
-@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;
-}
+++ /dev/null
-@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;
-}
--- /dev/null
+/* 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;
+}
--- /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 @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;
+ }
+}
--- /dev/null
+@import "../settings/typography";
+
+.vector-type() {
+ font-size: @baseFontSize;
+ line-height: @baseLineHeight;
+}
--- /dev/null
+.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;
+}
--- /dev/null
+// Grays
+// -----------------------------------------
+@agoraGray: #c9c9c9;
+@agoraTextColor: #252525;
+
+// Blues
+// -----------------------------------------
+@agoraBlue: #3366bb;
+@agoraBlueShadow: #4091ed;
+
+// Greens
+// -----------------------------------------
+@agoraGreen: #27aa65;
+
+// Reds
+// -----------------------------------------
+@agoraRed: #cc0000;
--- /dev/null
+@baseFontSize: 1em;
+@baseLineHeight: 1.4 * @baseFontSize;
+@baseFontColor: @agoraTextColor;
+
+@smallFontSize: 0.75em;
+++ /dev/null
-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}..."
+++ /dev/null
-# 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
+++ /dev/null
-@import "utilities";
-@import "default/buttons";
-@import "default/forms";
\ No newline at end of file
+++ /dev/null
-// Generic helper classes that could be used in many elements/layouts
-
-// --------------------------------------------------------------------------
-// Positioning
-// --------------------------------------------------------------------------
-
-.mw-ui-flush-left {
- @include agora-flush-left;
-}
-
-.mw-ui-flush-right {
- @include agora-flush-right;
-}
-
-.mw-ui-center-block {
- @include agora-center-block;
-}
\ No newline at end of file
+++ /dev/null
-@import "utilities";
-@import "vector/buttons";
-@import "vector/forms";
-@import "vector/containers";
+++ /dev/null
-$buttonBorderRadius: 3px;
-
-// Button styling
-.mw-ui-button {
- // Container layout
- @include inline-block;
- padding: 0.4em 1em 0.4em 1em;
- margin: 0;
-
- // Container styling
- @include buttonColors($agoraGray);
- @include border-radius($buttonBorderRadius);
-
- // Content styling
- vertical-align: middle;
-
- text: {
- align: center;
- decoration: none;
- }
-
- font: {
- weight: bold;
- }
-
- // Interaction styling
- cursor: pointer;
-
- &:disabled,
- &.mw-ui-disabled {
- cursor: default;
- }
-
- // Button sizes and displays
- // -----------------------------------------
- &.mw-ui-big {
- font: {
- size: $baseFontSize * 1.3;
- }
- }
- &.mw-ui-block {
- display: block;
- width: 100%;
- }
-}
-
-// 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;
- }
-}
-
-// Button groups
-.mw-ui-button-group > * {
- @include border-radius(0);
- float: left;
-
- &:first-child{
- @include border-top-left-radius($buttonBorderRadius);
- @include border-bottom-left-radius($buttonBorderRadius);
- }
-
- &:last-child{
- @include border-top-right-radius($buttonBorderRadius);
- @include border-bottom-right-radius($buttonBorderRadius);
- }
-}
+++ /dev/null
-// Form elements and layouts
-
-// --------------------------------------------------------------------------
-// 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;
-
-// Style a compact vertical stacked form ("VForm") and the elements in divs
-// within it.
-.mw-ui-vform {
- @include box-sizing(border-box);
-
- width: $defaultFormWidth;
-
- // Immediate divs in a vform are block and spaced-out.
- & > div {
- display: block;
- margin: 0 0 15px 0;
- padding: 0;
- width: 100%;
-
- // MW currently doesn't use the type attribute everywhere on inputs.
- input,
- .mw-ui-button {
- display: block;
- @include box-sizing(border-box);
- margin: 0;
- width: 100%;
- }
-
- // 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
- }
-
- label {
- display: block;
- @include box-sizing(border-box);
- @include agora-label-styling;
- width: auto;
- margin: 0 0 0.2em 0;
- padding: 0;
- }
-
- // Override input styling just for checkboxes and radio inputs.
- input[type="checkbox"],
- input[type="radio"] {
- display: inline;
- @include box-sizing(content-box);
- width: auto;
- }
-
- }
-
- // HTMLForm uses error, SpecialUserlogin (login and create account) uses
- // 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;
- 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;
- }
-}
-
-// --------------------------------------------------------------------------
-// Elements
-// --------------------------------------------------------------------------
-
-// Apply this to individual elements to style them.
-// You generally don't need to use this class on divs within an Agora
-// form container such as mw-ui-vform
-// XXX DRY: This repeats earlier styling, use an @include agora-div-styling ?
-.mw-ui-vform-div {
- display: block;
- margin: 0 0 15px 0;
- padding: 0;
- width: 100%;
-}
-
-// Apply mw-ui-input to individual input fields to style them.
-// You generally don't need to use this class if <input> is within an Agora
-// form container such as mw-ui-vform
-.mw-ui-input {
- @include agora-field-styling; // mixins/_forms.scss
-}
-
-// Apply mw-ui-label to individual elements to style them.
-// You generally don't need to use this class if <label> is within an Agora
-// form container such as mw-ui-vform
-.mw-ui-label {
- @include agora-label-styling; // mixins/_forms.scss
-}
-
-// Nesting an input checkbox or radio button inside a label with this class
-// improves alignment, e.g.
-// <label class="mw-ui-checkbox-label">
-// <input type="checkbox">The label text
-// </label>
-.mw-ui-checkbox-label, .mw-ui-radio-label {
- @include agora-inline-label-styling;
-}
+++ /dev/null
-@import "../default/buttons"; // Layer Vector on top of the default settings.
-
-.mw-ui-button {
- // Button colors determined by function.
- // -----------------------------------------
- &.mw-ui-primary {
- @include buttonColors($agoraBlue);
- }
-
- &.mw-ui-constructive {
- @include buttonColors($agoraGreen);
- }
-
- &.mw-ui-destructive {
- @include buttonColors($agoraRed);
- }
-
- @include vector-type;
-}
+++ /dev/null
-// No default settings for containers yet.
-
-.mw-ui-container {
- @include vector-type;
-}
+++ /dev/null
-@import "../default/forms"; // Layer Vector on top of the default settings.
-
-.mw-ui-vform,
-.mw-ui-vform > div input,
-.mw-ui-input {
- @include vector-type;
-}
+++ /dev/null
-/**
- * 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";
+++ /dev/null
-/**
- * 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";
+++ /dev/null
-@import "utilities";
-@import "type";
-@import "effects";
-@import "forms";
\ No newline at end of file
+++ /dev/null
-/* _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;
- }
-}
+++ /dev/null
-// 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;
- }
-}
+++ /dev/null
-@mixin vector-type {
- font: {
- size: $baseFontSize;
- }
- line-height: $baseLineHeight;
-}
\ No newline at end of file
+++ /dev/null
-@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
+++ /dev/null
-@import "colors";
-@import "typography";
\ No newline at end of file
+++ /dev/null
-// Grays
-// -----------------------------------------
-$agoraGray: #c9c9c9;
-$agoraTextColor: #252525;
-
-// Blues
-// -----------------------------------------
-$agoraBlue: #3366bb;
-$agoraBlueShadow: #4091ed;
-
-// Greens
-// -----------------------------------------
-$agoraGreen: #27aa65;
-
-// Reds
-// -----------------------------------------
-$agoraRed: #cc0000;
+++ /dev/null
-$baseFontSize: 1em;
-$baseLineHeight: 1.4 * $baseFontSize;
-$baseFontColor: $agoraTextColor;
-
-$smallFontSize: 0.75em;
\ No newline at end of file
--- /dev/null
+/**
+ * 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";
dépôts / lhc / web / wiklou.git / commitdiff