diff options
Diffstat (limited to 'resources/mediawiki.ui/sourcefiles/scss/mixins')
5 files changed, 157 insertions, 0 deletions
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 |