diff options
Diffstat (limited to 'resources/mediawiki.ui/sourcefiles')
20 files changed, 501 insertions, 0 deletions
diff --git a/resources/mediawiki.ui/sourcefiles/Makefile b/resources/mediawiki.ui/sourcefiles/Makefile new file mode 100644 index 00000000..dea90139 --- /dev/null +++ b/resources/mediawiki.ui/sourcefiles/Makefile @@ -0,0 +1,24 @@ +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 new file mode 100644 index 00000000..28c65240 --- /dev/null +++ b/resources/mediawiki.ui/sourcefiles/config.rb @@ -0,0 +1,27 @@ +# 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 new file mode 100644 index 00000000..e7090ebc --- /dev/null +++ b/resources/mediawiki.ui/sourcefiles/scss/components/_default.scss @@ -0,0 +1,3 @@ +@import "utilities"; +@import "default/buttons"; +@import "default/forms";
\ No newline at end of file diff --git a/resources/mediawiki.ui/sourcefiles/scss/components/_utilities.scss b/resources/mediawiki.ui/sourcefiles/scss/components/_utilities.scss new file mode 100644 index 00000000..4f1dba2f --- /dev/null +++ b/resources/mediawiki.ui/sourcefiles/scss/components/_utilities.scss @@ -0,0 +1,17 @@ +// 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 diff --git a/resources/mediawiki.ui/sourcefiles/scss/components/_vector.scss b/resources/mediawiki.ui/sourcefiles/scss/components/_vector.scss new file mode 100644 index 00000000..d7cb34ae --- /dev/null +++ b/resources/mediawiki.ui/sourcefiles/scss/components/_vector.scss @@ -0,0 +1,4 @@ +@import "utilities"; +@import "vector/buttons"; +@import "vector/forms"; +@import "vector/containers"; diff --git a/resources/mediawiki.ui/sourcefiles/scss/components/default/_buttons.scss b/resources/mediawiki.ui/sourcefiles/scss/components/default/_buttons.scss new file mode 100644 index 00000000..d67810f7 --- /dev/null +++ b/resources/mediawiki.ui/sourcefiles/scss/components/default/_buttons.scss @@ -0,0 +1,69 @@ +$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); + } +} diff --git a/resources/mediawiki.ui/sourcefiles/scss/components/default/_forms.scss b/resources/mediawiki.ui/sourcefiles/scss/components/default/_forms.scss new file mode 100644 index 00000000..a9cec39a --- /dev/null +++ b/resources/mediawiki.ui/sourcefiles/scss/components/default/_forms.scss @@ -0,0 +1,114 @@ +// 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; +} diff --git a/resources/mediawiki.ui/sourcefiles/scss/components/vector/_buttons.scss b/resources/mediawiki.ui/sourcefiles/scss/components/vector/_buttons.scss new file mode 100644 index 00000000..8d5f0b6a --- /dev/null +++ b/resources/mediawiki.ui/sourcefiles/scss/components/vector/_buttons.scss @@ -0,0 +1,19 @@ +@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; +} diff --git a/resources/mediawiki.ui/sourcefiles/scss/components/vector/_containers.scss b/resources/mediawiki.ui/sourcefiles/scss/components/vector/_containers.scss new file mode 100644 index 00000000..ed01603d --- /dev/null +++ b/resources/mediawiki.ui/sourcefiles/scss/components/vector/_containers.scss @@ -0,0 +1,5 @@ +// No default settings for containers yet. + +.mw-ui-container { + @include vector-type; +} diff --git a/resources/mediawiki.ui/sourcefiles/scss/components/vector/_forms.scss b/resources/mediawiki.ui/sourcefiles/scss/components/vector/_forms.scss new file mode 100644 index 00000000..73ea24e2 --- /dev/null +++ b/resources/mediawiki.ui/sourcefiles/scss/components/vector/_forms.scss @@ -0,0 +1,7 @@ +@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; +} diff --git a/resources/mediawiki.ui/sourcefiles/scss/mediawiki.ui.default.scss b/resources/mediawiki.ui/sourcefiles/scss/mediawiki.ui.default.scss new file mode 100644 index 00000000..e6db5237 --- /dev/null +++ b/resources/mediawiki.ui/sourcefiles/scss/mediawiki.ui.default.scss @@ -0,0 +1,16 @@ +/** + * 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 new file mode 100644 index 00000000..ac113eec --- /dev/null +++ b/resources/mediawiki.ui/sourcefiles/scss/mediawiki.ui.vector.scss @@ -0,0 +1,15 @@ +/** + * 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 new file mode 100644 index 00000000..adc48cd8 --- /dev/null +++ b/resources/mediawiki.ui/sourcefiles/scss/mixins/_all.scss @@ -0,0 +1,4 @@ +@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 new file mode 100644 index 00000000..2efff820 --- /dev/null +++ b/resources/mediawiki.ui/sourcefiles/scss/mixins/_effects.scss @@ -0,0 +1,62 @@ +/* _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 new file mode 100644 index 00000000..0f3f6ad3 --- /dev/null +++ b/resources/mediawiki.ui/sourcefiles/scss/mixins/_forms.scss @@ -0,0 +1,66 @@ +// 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 new file mode 100644 index 00000000..8a93a08b --- /dev/null +++ b/resources/mediawiki.ui/sourcefiles/scss/mixins/_type.scss @@ -0,0 +1,6 @@ +@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 new file mode 100644 index 00000000..71a93b60 --- /dev/null +++ b/resources/mediawiki.ui/sourcefiles/scss/mixins/_utilities.scss @@ -0,0 +1,19 @@ +@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 new file mode 100644 index 00000000..21ac292f --- /dev/null +++ b/resources/mediawiki.ui/sourcefiles/scss/settings/_all.scss @@ -0,0 +1,2 @@ +@import "colors"; +@import "typography";
\ No newline at end of file diff --git a/resources/mediawiki.ui/sourcefiles/scss/settings/_colors.scss b/resources/mediawiki.ui/sourcefiles/scss/settings/_colors.scss new file mode 100644 index 00000000..0c18bdb4 --- /dev/null +++ b/resources/mediawiki.ui/sourcefiles/scss/settings/_colors.scss @@ -0,0 +1,17 @@ +// Grays +// ----------------------------------------- +$agoraGray: #c9c9c9; +$agoraTextColor: #252525; + +// Blues +// ----------------------------------------- +$agoraBlue: #3366bb; +$agoraBlueShadow: #4091ed; + +// Greens +// ----------------------------------------- +$agoraGreen: #27aa65; + +// Reds +// ----------------------------------------- +$agoraRed: #cc0000; diff --git a/resources/mediawiki.ui/sourcefiles/scss/settings/_typography.scss b/resources/mediawiki.ui/sourcefiles/scss/settings/_typography.scss new file mode 100644 index 00000000..013d12b3 --- /dev/null +++ b/resources/mediawiki.ui/sourcefiles/scss/settings/_typography.scss @@ -0,0 +1,5 @@ +$baseFontSize: 1em; +$baseLineHeight: 1.4 * $baseFontSize; +$baseFontColor: $agoraTextColor; + +$smallFontSize: 0.75em;
\ No newline at end of file |