Skip to content

Commit

Permalink
fix(button): improve Material styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@joneff
Magdalena Grigorova authored and joneff committed Mar 23, 2018
1 parent d4eecb1 commit f001c10
Show file tree
Hide file tree
Showing 5 changed files with 71 additions and 179 deletions.
4 changes: 0 additions & 4 deletions packages/default/scss/ripple/_layout.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,10 +27,6 @@
.k-primary & {
opacity: .2;
}

.k-primary.k-flat & {
opacity: 1;
}
}

}
8 changes: 4 additions & 4 deletions packages/material/docs/customization.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -316,7 +316,7 @@ Used to provide contrast between the background and foreground colors.
<td>$button-hovered-text</td>
<td>

$hovered-text
$button-text
</td>
<td>The text color of hovered buttons.
</td>
Expand All @@ -325,7 +325,7 @@ Used to provide contrast between the background and foreground colors.
<td>$button-hovered-bg</td>
<td>

rgba(0, 0, 0, .12)
mix( $button-text, $button-bg, 12%)
</td>
<td>The background of hovered buttons.
</td>
Expand Down Expand Up @@ -361,7 +361,7 @@ Used to provide contrast between the background and foreground colors.
<td>$button-pressed-bg</td>
<td>

$button-bg
mix( $button-text, $button-bg, 12%)
</td>
<td>The background color of pressed buttons.
</td>
Expand All @@ -370,7 +370,7 @@ Used to provide contrast between the background and foreground colors.
<td>$button-pressed-border</td>
<td>

$button-border
$button-pressed-bg
</td>
<td>The border color of pressed buttons.
</td>
Expand Down
10 changes: 5 additions & 5 deletions packages/material/scss/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -246,11 +246,11 @@ $button-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14)

/// The text color of hovered buttons.
/// @group buttons
$button-hovered-text: $hovered-text !default;
$button-hovered-text: $button-text !default;

/// The background of hovered buttons.
/// @group buttons
$button-hovered-bg: rgba(0, 0, 0, .12) !default;
$button-hovered-bg: mix( $button-text, $button-bg, 12%) !default;

/// The border color of hovered buttons.
/// @group buttons
Expand All @@ -267,11 +267,11 @@ $button-pressed-text: $button-text !default;

/// The background color of pressed buttons.
/// @group buttons
$button-pressed-bg: $button-bg !default;
$button-pressed-bg: mix( $button-text, $button-bg, 12%) !default;

/// The border color of pressed buttons.
/// @group buttons
$button-pressed-border: $button-border !default;
$button-pressed-border: $button-pressed-bg !default;

/// The background gradient of pressed buttons.
/// @group buttons
Expand All @@ -290,7 +290,7 @@ $primary-button-border: $primary-button-bg !default;
$primary-button-gradient: rgba( adjust-hue( $primary-button-bg, 14), 0 ), rgba( adjust-hue( $primary-button-bg, 14), .2 ) !default;

$primary-button-hovered-text: $primary-button-text !default;
$primary-button-hovered-bg: adjust-hue( $primary-button-bg, 3) !default;
$primary-button-hovered-bg: mix( $primary-button-text, $primary-button-bg, 12%) !default;
$primary-button-hovered-border: $primary-button-hovered-bg !default;
$primary-button-hovered-gradient: rgba( adjust-hue( $primary-button-hovered-bg, 14), 0 ), rgba( adjust-hue( $primary-button-hovered-bg, 14), .2 ) !default;

Expand Down
15 changes: 15 additions & 0 deletions packages/material/scss/button/_layout.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,21 @@ $outline-button-border-width: 2px;
@import "~@progress/kendo-theme-default/scss/button/layout";

@include exports("button/layout/material") {

.k-button {

&::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: currentColor;
opacity: 0;
}
}

.k-button.k-outline {
&::before {
content: "";
Expand Down
213 changes: 47 additions & 166 deletions packages/material/scss/button/_theme.scss
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,17 @@
@include exports("button/theme") {
$button-focused-bg: rgba(0, 0, 0, .12) !default;
$button-focused-bg: mix( #000, $button-bg, 12%) !default;

$button-disabled-text: rgba(0, 0, 0, .38) !default;
$button-disabled-bg: rgba(0, 0, 0, .12) !default;

$white-overlayed-with-black: darken(#ffffff, 12%) !default;
$primary-button-focused-bg: mix( $primary-button-text, $primary-button-bg, 12%) !default;

$primary-button-focused-text: rgba(224, 224, 224, .86) !default;
$primary-button-focused-bg: blend-multiply($primary-button-bg, $white-overlayed-with-black) !default;
$flat-button-hovered-bg: rgba($button-text, .12);
$flat-button-focused-bg: rgba($button-text, .12);

$flat-primary-active-bg: rgba(63, 81, 181, .12) !default;
$flat-primary-hovered-bg: rgba($primary-button-bg, .12) !default;
$flat-primary-focused-bg: rgba($primary-button-bg, .12) !default;
$flat-primary-active-bg: rgba($primary-button-bg, .16) !default;

$button-group-disabled-active-bg: rgba(0, 0, 0, .22) !default;

Expand All @@ -25,18 +27,39 @@
font-weight: 500;
transition: box-shadow 280ms cubic-bezier(.4, 0, .2, 1);

&::before {
transition: opacity 280ms cubic-bezier(.4, 0, .2, 1);
}

// Hovered state
&:hover,
&.k-state-hover {
&::before {
opacity: .12;
}
}

// Focused state
&:not(.k-no-focus):focus,
&:not(.k-no-focus).k-state-focused {
background-color: $button-focused-bg;
@include appearance( focused-button );
&:focus,
&.k-state-focused {
&::before {
opacity: .12;
}
}
&.k-no-focus:not(:hover) {
&::before {
opacity: 0;
}
}

// Pressed state
&:active,
&.k-state-active {
@include appearance( pressed-button );
box-shadow: $button-pressed-shadow;

&::before {
opacity: .16;
}
}

// Disabled state
Expand All @@ -51,116 +74,22 @@
// Primary button
.k-button.k-primary {
@include appearance( primary-button );

// Focused
&:not(.k-no-focus):focus,
&:not(.k-no-focus).k-state-focused {
color: $primary-button-focused-text;
background-color: $primary-button-focused-bg;
border-color: $primary-button-focused-bg;
}

// Active state
&:active,
&.k-state-active {
@include appearance( pressed-primary-button );
}
}

// Flat button
.k-button.k-flat {
// Hover state
&:hover,
&.k-state-hover {
background-color: $button-hovered-bg;
}

// Pressed state
&:active,
&.k-state-active {
box-shadow: none;
}

// Focused state
&:focus,
&.k-state-focused {
box-shadow: none;
}
}

// Flat primary button
.k-button.k-primary.k-flat {
color: $accent;

// Hover state
&:hover,
&.k-state-hover {
background-color: $flat-primary-active-bg;
}

.k-ripple-blob {
background-color: rgba($accent, .1);
}

// Focused state
&:not(.k-no-focus):focus,
&:not(.k-no-focus).k-state-focused {
color: $accent;
background-color: $flat-primary-active-bg;
}
}

// Flat & Bare button
.k-button.k-flat,
.k-button.k-primary.k-flat {
&.k-state-disabled {
background-color: transparent;
color: $button-disabled-text;
}
}



// Flat button
.k-button.k-flat {
// Hover state
&:hover,
&.k-state-hover {
background-color: $button-hovered-bg;
}

// Pressed state
&:active,
&.k-state-active {
box-shadow: none;
}
.k-button.k-bare {
box-shadow: none;

// Focused state
&:focus,
&.k-state-focused {
box-shadow: none;
&::after {
border-width: 0;
}
}

// Flat primary button
.k-button.k-primary.k-flat {
color: $accent;

// Hover state
&:hover,
&.k-state-hover {
background-color: $flat-primary-active-bg;
}

.k-ripple-blob {
background-color: rgba($accent, .1);
}

// Focused state
&:not(.k-no-focus):focus,
&:not(.k-no-focus).k-state-focused {
color: $accent;
background-color: $flat-primary-active-bg;
}
// Flat & Bare Primary button
.k-button.k-primary.k-flat,
.k-button.k-primary.k-bare {
color: $primary-button-bg;
}

.k-button.k-flat,
Expand All @@ -173,62 +102,14 @@

// Outline button
.k-button.k-outline {
background: transparent;
box-shadow: $outline-size;
opacity: .87;

// Hover and focus states
&:hover,
&.k-state-hover,
&:focus {
box-shadow: $outline-size;

&::before {
background-color: currentColor;
opacity: .12;
}
}

&:focus {
background-color: transparent;
}

&.k-state-disabled {
background-color: transparent;
color: currentColor;
opacity: $button-disabled-opacity;
}
}

// Outline Primary button
.k-button.k-primary.k-outline {
color: $accent;

// Pressed state
&:active,
&.k-state-active {
background-color: transparent;
}

// Focused state
&:focus {
color: $accent;
background-color: transparent;
}
}

// Bare button
.k-button.k-bare {
&::after {
border-width: 0;
}

&.k-state-disabled {
color: inherit;
opacity: $button-disabled-opacity;
}

&.k-primary {
color: $accent;
}
color: $primary-button-bg;
}

// Button group
Expand All @@ -251,7 +132,7 @@
.k-button.k-state-active,
> input[type="radio"]:checked + .k-button,
> input[type="checkbox"]:checked + .k-button {
background-color: $button-focused-bg;
background-color: $flat-button-focused-bg;
}

.k-primary:active,
Expand Down Expand Up @@ -303,7 +184,7 @@

&:active,
&.k-state-active {
background-color: $button-focused-bg;
background-color: $flat-button-focused-bg;
}
}

Expand Down

0 comments on commit f001c10

Please sign in to comment.