diff options
Diffstat (limited to 'WebContent/VAADIN/themes/valo/components/_button.scss')
| -rw-r--r-- | WebContent/VAADIN/themes/valo/components/_button.scss | 132 |
1 files changed, 104 insertions, 28 deletions
diff --git a/WebContent/VAADIN/themes/valo/components/_button.scss b/WebContent/VAADIN/themes/valo/components/_button.scss index 42953ea610..4ac0e4c16f 100644 --- a/WebContent/VAADIN/themes/valo/components/_button.scss +++ b/WebContent/VAADIN/themes/valo/components/_button.scss @@ -1,3 +1,11 @@ +/** + * Outputs the selectors and properties for the Button component. + * + * @param {string} $primary-stylename (v-button) - the primary style name for the selectors + * @param {bool} $include-additional-styles - should the mixin output all the different style variations of the component + * + * @group button + */ @mixin valo-button ($primary-stylename: v-button, $include-additional-styles: contains($v-included-additional-styles, button)) { .#{$primary-stylename} { @include valo-button-static-style; @@ -97,9 +105,14 @@ } - - - +/** + * Outputs the static styles (i.e. styles which don't differ between button variants) for a button. + * + * @param {list} $states (normal hover focus active disabled) - The button states for which to output corresponding static styles + * @param {bool} $vertical-centering (true) - Should the output contain a vertical centering guide + * + * @group button + */ @mixin valo-button-static-style ($states: (normal, hover, focus, active, disabled), $vertical-centering: true) { @if contains($states, normal) { position: relative; @@ -148,14 +161,30 @@ } - - - +/** + * Outputs the styles for a button variant. + * + * @param {size} $unit-size ($v-unit-size) - The sizing of the button, which corresponds the its height + * @param {size | list} $padding (null) - The padding of the button. Computed from other parameters by default. + * @param {color} $font-color (null) - The font color of the button. Computed from the $background-color by default. + * @param {number} $font-weight ($v-font-weight + 100) - The font weight of the button + * @param {size} $font-size (null) - The font size of the button. Inherited from the parent by default. + * @param {string} $cursor (null) - The mouse cursor of the button + * @param {color} $background-color ($v-background-color) - The background color of the button + * @param {list} $border ($v-border) - The border of the button + * @param {size} $border-radius ($v-border-radius) - The border-radius of the button + * @param {list} $gradient ($v-gradient) - Valo specific gradient value. See the documentation for $v-gradient. + * @param {list} $bevel ($v-bevel) - Box-shadow value according to $v-bevel documentation + * @param {list} $shadow ($v-shadow) - Box-shadow value according to $v-shadow documentation + * @param {list} $states (normal hover focus active disabled) - The button states for which to output corresponding styles + * + * @group button + */ @mixin valo-button-style ( $unit-size : $v-unit-size, - $padding : null, // Computed by default + $padding : null, - $font-color : null, // Computed by default + $font-color : null, $font-weight : $v-font-weight + 100, $font-size : null, // Inherited by default $cursor : null, @@ -207,7 +236,7 @@ } @if $bevel and type-of($_font-color) == color and type-of($background-color) == color { - text-shadow: valo-text-shadow($_font-color, $background-color, $bevel); + text-shadow: valo-text-shadow($_font-color, $background-color); } @if $bevel == none and $shadow == none { @@ -237,8 +266,14 @@ } - - +/** + * Outputs the hover state styles for a button. The styles are by default targeted + * for a pseudo element which is shown on top of the normal state button. + * + * @group button + * + * @param {color} $background-color ($v-background-color) - The background color of the normal state button + */ @mixin valo-button-hover-style ($background-color: $v-background-color) { $bg: darken($background-color, 25%); @if is-dark-color($background-color) { @@ -248,8 +283,16 @@ } - -@mixin valo-button-focus-style ($background-color: $v-background-color, $border-fallback: inherit, $include-box-shadow: true) { +/** + * Outputs the focus state styles for a button. The styles are by default targeted + * for a pseudo element which is shown on top of the normal state button. + * + * @group button + * + * @param {color} $background-color ($v-background-color) - The background color of the normal state button + * @param {list} $border-fallback (inherit) - If the luminance of $v-focus-color is less than the $background-color, the focus color is also used for the border color. If not, then $border-fallback is used for the focus element's border value. + */ +@mixin valo-button-focus-style ($background-color: $v-background-color, $border-fallback: inherit) { $focus-color: $v-focus-color; @if color-luminance($focus-color) + 50 < color-luminance($background-color) { @@ -258,22 +301,31 @@ border: $border-fallback or valo-border($color: $background-color); } - @include valo-focus-style($include-box-shadow: $include-box-shadow); + @include valo-focus-style; } - +/** + * Outputs the active state (pressed/down) styles for a button. The styles are by default targeted + * for a pseudo element which is shown on top of the normal state button. + * + * @group button + * + * @param {color} $background-color ($v-background-color) - The background color of the normal state button + */ @mixin valo-button-active-style ($background-color: $v-background-color) { $bg: scale-color($background-color, $lightness: -50%, $saturation: saturation($background-color)); background-color: rgba($bg, .2); } - - - +/** + * Outputs styles to allow vertical centering of the icon and the caption, independent of the + * height of the button. + * + * @group button + */ @mixin valo-button-vertical-centering { - // Vertical centering of icon and caption, independent of the height of the button @include valo-vertical-align-guide($to-align: div, $pseudo-element: before); // WebKit handles line-heights and vertical-alignments somewhat differently, so we need to adjust @@ -293,8 +345,14 @@ } - - +/** + * Output styles for a borderless button. Expects that the targeted element + * already has both valo-button-static-style and valo-button-style included. + * + * @param {color} $font-color (inherit) - The font color of the borderless button + * + * @group button + */ @mixin valo-button-borderless-style ($font-color: inherit) { border: none; @include box-shadow(none); @@ -321,7 +379,15 @@ } -@mixin valo-button-quiet-style ($primary-stylename: v-button) { +/** + * Output styles for a "quiet" button (a button whose outline is only shown + * once the user hovers over the button caption). Expects that the targeted + * element already has both valo-button-static-style and valo-button-style + * included. + * + * @group button + */ +@mixin valo-button-quiet-style { visibility: hidden; &:focus, @@ -329,19 +395,24 @@ visibility: visible; } - .#{$primary-stylename}-wrap { + [class*="wrap"] { visibility: visible; } - .#{$primary-stylename}-caption { + [class*="caption"] { // For IE8 display: inline-block; } } -@mixin valo-button-icon-align-right-style ($primary-stylename: v-button) { - .#{$primary-stylename}-wrap { +/** + * Output styles to align a button's icon on the right side of its caption. + * + * @group button + */ +@mixin valo-button-icon-align-right-style { + [class*="wrap"] { display: inline-block; } @@ -357,12 +428,17 @@ } -@mixin valo-button-icon-align-top-style ($primary-stylename: v-button) { +/** + * Output styles to align a button's icon on top of its caption. + * + * @group button + */ +@mixin valo-button-icon-align-top-style { height: auto; padding-top: ceil($v-unit-size/9); padding-bottom: ceil($v-unit-size/9); - .#{$primary-stylename}-wrap { + [class*="wrap"] { display: inline-block; } |