Skip to content

Commit

Permalink
feat(button): added dark theme
Browse files Browse the repository at this point in the history
  • Loading branch information
Mike Ozornin authored and lkramarov committed Oct 26, 2018
1 parent 11e4d54 commit fb5853a
Show file tree
Hide file tree
Showing 7 changed files with 209 additions and 222 deletions.
9 changes: 7 additions & 2 deletions src/lib-dev/button/styles.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,10 @@
@import '~@ptsecurity/mosaic-icons/dist/styles/mc-icons';

@import '../../lib/core/theming/prebuilt/default-theme';
//@import '../../lib/core/theming/prebuilt/default-theme';

//@import '../../lib/core/theming/prebuilt/dark-theme';
@import '../../lib/core/theming/prebuilt/dark-theme';


.mc-button-group_vertical {
width: 200px;
}
38 changes: 13 additions & 25 deletions src/lib-dev/button/template.html
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,4 @@
<div>
<button mc-xs-button>mc-xs-button</button>&nbsp;
<button mc-sm-button>mc-sm-button</button>&nbsp;
<button mc-button>default</button>&nbsp;
<button mc-lg-button>mc-lg-button</button>&nbsp;
<button mc-xl-button>mc-xl-button</button>&nbsp;

<br>
<br>

<a href="" mc-xs-button>mc-xs-button</a>&nbsp;
<a href="" mc-sm-button>mc-sm-button</a>&nbsp;
<a href="" mc-button>default</a>&nbsp;
<a href="" mc-lg-button>mc-lg-button</a>&nbsp;
<a href="" mc-xl-button>mc-xl-button</a>&nbsp;

<br>
<br>

<button mc-icon-button>
<i mc-icon="mc-angle-L_16"></i>
</button>&nbsp;
Expand Down Expand Up @@ -68,7 +50,7 @@
<br>
<br>

<span class="mc-button-group-vertical">
<span class="mc-button-group_vertical">
<button mc-button>default</button>
<button mc-button color="primary">default</button>
<button mc-button color="error">default</button>
Expand All @@ -81,7 +63,8 @@
<button mc-button color="primary" disabled>disabled</button>&nbsp;
<button mc-button color="primary">normal</button>&nbsp;
<button class="mc-hover" mc-button color="primary">hover</button>&nbsp;
<button class="cdk-focused" mc-button color="primary">focus</button>&nbsp;
<button class="mc-active" mc-button color="primary">pressed</button>&nbsp;
<button class="cdk-keyboard-focused" mc-button color="primary">focus</button>&nbsp;

<br>
<br>
Expand All @@ -90,7 +73,8 @@
<button class="mc-progress" mc-button color="primary" disabled>disabled</button>&nbsp;
<button class="mc-progress" mc-button color="primary">normal</button>&nbsp;
<button class="mc-hover mc-progress" mc-button color="primary">hover</button>&nbsp;
<button class="cdk-focused mc-progress" mc-button color="primary">focus</button>&nbsp;
<button class="mc-active mc-progress" mc-button color="primary">pressed</button>&nbsp;
<button class="cdk-keyboard-focused mc-progress" mc-button color="primary">focus</button>&nbsp;

<br>
<br>
Expand All @@ -99,15 +83,17 @@
<button mc-button color="second" disabled>disabled</button>&nbsp;
<button mc-button color="second">normal</button>&nbsp;
<button class="mc-hover" mc-button color="second">hover</button>&nbsp;
<button class="cdk-focused" mc-button color="second">focus</button>&nbsp;
<button class="mc-active" mc-button color="second">pressed</button>&nbsp;
<button class="cdk-keyboard-focused" mc-button color="second">focus</button>&nbsp;

<br>
<br>

<button class="mc-progress" mc-button color="second" disabled>disabled</button>&nbsp;
<button class="mc-progress" mc-button color="second">normal</button>&nbsp;
<button class="mc-hover mc-progress" mc-button color="second">hover</button>&nbsp;
<button class="cdk-focused mc-progress" mc-button color="second">focus</button>&nbsp;
<button class="mc-active mc-progress" mc-button color="second">pressed</button>&nbsp;
<button class="cdk-keyboard-focused mc-progress" mc-button color="second">focus</button>&nbsp;

<br>
<br>
Expand All @@ -116,13 +102,15 @@
<button mc-button color="error" disabled>disabled</button>&nbsp;
<button mc-button color="error">normal</button>&nbsp;
<button class="mc-hover" mc-button color="error">hover</button>&nbsp;
<button class="cdk-focused" mc-button color="error">focus</button>&nbsp;
<button class="mc-active" mc-button color="error">pressed</button>&nbsp;
<button class="cdk-keyboard-focused" mc-button color="error">focus</button>&nbsp;

<br>
<br>

<button class="mc-progress" mc-button color="error" disabled>disabled</button>&nbsp;
<button class="mc-progress" mc-button color="error">normal</button>&nbsp;
<button class="mc-hover mc-progress" mc-button color="error">hover</button>&nbsp;
<button class="cdk-focused mc-progress" mc-button color="error">focus</button>&nbsp;
<button class="mc-active mc-progress" mc-button color="error">pressed</button>&nbsp;
<button class="cdk-keyboard-focused mc-progress" mc-button color="error">focus</button>&nbsp;
</div>
147 changes: 48 additions & 99 deletions src/lib/button/_button-theme.scss
View file
Original file line number Diff line number Diff line change
@@ -1,168 +1,117 @@
@mixin _mc-button-primary-color($palette) {
$hover-lighten: 5%;

@mixin _mc-button-primary-color($palette, $foreground, $background) {
border-color: map-get($palette, 560);
background: mc-color($palette, 500);
color: mc-contrast($palette, 500);

border-color: mc-color($palette, 600);
background:
mc-color($palette, 500)
linear-gradient(to bottom, mc-color($palette, 500), mc-color($palette, 560));
.mc-button-overlay {
background: transparent;
}

&:hover,
&.mc-hover {
background-image: linear-gradient(
to bottom,
lighten(mc-color($palette, 500), $hover-lighten),
lighten(mc-color($palette, 560), $hover-lighten)
);
& .mc-button-overlay {
background: map-get($background, hover);
}
}

&:active,
&.mc-active {
background-image: linear-gradient(to bottom, mc-color($palette, 600), mc-color($palette, 560));

&:hover,
&.mc-hover {
background-image: linear-gradient(
to bottom,
lighten(mc-color($palette, 600), $hover-lighten),
lighten(mc-color($palette, 560), $hover-lighten)
);
}
border-color: darken(mc-color($palette, 560), 5);
background: darken(mc-color($palette, 500), 5);
box-shadow: map-get($background, in-shadow);
}

&.disabled,
&.mc-disabled,
&[disabled] {
color: mc-color($palette, 200);
border-color: map-get($palette, 500);
color: transparentize(mc-contrast($palette, 500), 0.5);

border-color: mc-color($palette, 400);
background-image: linear-gradient(to bottom, mc-color($palette, 300), mc-color($palette, 400));
& .mc-button-overlay {
background: mc-color($background, button-disabled-overlay);
}
}
}

@mixin _mc-button-second-color($palette) {
$hover-darken: 5%;

color: mc-contrast($palette, 500);

border-color: mc-color($palette, 300);
background-image: linear-gradient(to bottom, mc-color($palette, 40, 1), mc-color($palette, 100));
@mixin _mc-button-second-color($palette, $foreground, $background) {
border-color: mc-color($background, button-border);
background: map-get($background, button-bg);
color: map-get($foreground, text);

&:hover,
&.mc-hover {
background-image: linear-gradient(
to bottom, darken(mc-color($palette, 40), $hover-darken), darken(mc-color($palette, 100), $hover-darken)
);
& .mc-button-overlay {
background: map-get($background, hover);
}
}

&:active,
&.mc-active {
background-image: linear-gradient(to bottom, mc-color($palette, 200), mc-color($palette, 100));

&:hover,
&.mc-hover {
background-image: linear-gradient(
to bottom,
darken(mc-color($palette, 200), $hover-darken),
darken(mc-color($palette, 100), $hover-darken)
);
}
border-color: darken(mc-color($background, button-border), 5);
background: darken(map-get($background, button-bg), 5);
box-shadow: map-get($background, in-shadow);
}

&.mc-disabled,
&[disabled] {
color: mc-color($palette, 200);

border-color: mc-color($palette, 200);
background-image: linear-gradient(to bottom, mc-color($palette, 40, 1), mc-color($palette, 60));
}
}

@mixin _mc-button-error-color($secondPalette, $errorPalette) {
$hover-darken: 5%;
border-color: mc-color($background, button-bg);
color: map-get($foreground, disabled-text);

color: mc-color($errorPalette, 500);

border-color: mc-color($secondPalette, 300);
background-image: linear-gradient(to bottom, mc-color($secondPalette, 40, 1), mc-color($secondPalette, 100));

&:hover,
&.mc-hover {
background-image: linear-gradient(
to bottom,
darken(mc-color($secondPalette, 40), $hover-darken),
darken(mc-color($secondPalette, 100), $hover-darken)
);
}

&:active,
&.mc-active {
background-image: linear-gradient(to bottom, mc-color($secondPalette, 200), mc-color($secondPalette, 100));

&:hover,
&.mc-hover {
background-image: linear-gradient(
to bottom,
darken(mc-color($secondPalette, 200), $hover-darken),
darken(mc-color($secondPalette, 100), $hover-darken)
);
& .mc-button-overlay {
background: mc-color($background, button-disabled-overlay);
}
}
}

&[disabled] {
color: mc-color($secondPalette, 200);
@mixin _mc-button-error-color($secondPalette, $errorPalette, $foreground, $background) {
@include _mc-button-second-color($secondPalette, $foreground, $background);

border-color: mc-color($secondPalette, 200);
background-image: linear-gradient(to bottom, mc-color($secondPalette, 40, 1), mc-color($secondPalette, 60));
}
color: mc-color($errorPalette);
}

@mixin _mc-button-theme-color($theme) {
$primary: map-get($theme, primary);
$second: map-get($theme, second);
$error: map-get($theme, error);
$is-dark: map-get($theme, is-dark);

$foreground: map-get($theme, foreground);
$background: map-get($theme, background);

&.mc-primary {
@include _mc-button-primary-color($primary);
@include _mc-button-primary-color($primary, $foreground, $background);
}

&.mc-second {
@include _mc-button-second-color($second);
@include _mc-button-second-color($second, $foreground, $background);
}

&.mc-error {
@include _mc-button-error-color($second, $error);
@include _mc-button-error-color($second, $error, $foreground, $background);
}

&.mc-primary,
&.mc-second,
&.mc-error {
&.cdk-focused {
border-color: mc-color($primary, 500);
box-shadow: 0 0 0 1px mc-color($primary, 500);
-webkit-font-smoothing: antialiased;

&.cdk-keyboard-focused {
$focus-color: map-get($primary, lighter);

border-color: $focus-color;
box-shadow: 0 0 0 1px $focus-color;
}
}
}

@mixin mc-button-theme($theme) {
.mc-button,
.mc-xs-button,
.mc-sm-button,
.mc-lg-button,
.mc-xl-button,
.mc-icon-button {
@include _mc-button-theme-color($theme);
}
}

@mixin mc-button-typography($config) {
.mc-button,
.mc-xs-button,
.mc-sm-button,
.mc-lg-button,
.mc-xl-button,
.mc-icon-button {
@include mc-typography-level-to-styles($config, body);

Expand Down
2 changes: 1 addition & 1 deletion src/lib/button/button.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="mc-button-wrapper">
<ng-content></ng-content>
</div>
<div class="mc-button-focus-overlay"></div>
<div class="mc-button-overlay"></div>
33 changes: 15 additions & 18 deletions src/lib/button/button.scss
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@import '../core/styles/common/layout';

@import 'button-base';


Expand All @@ -7,23 +9,6 @@
@include mc-button-size($mc-button-padding, $mc-button-line-height, $mc-button-font);
}

// sizes
.mc-button_xs {
@include mc-button-size($mc-button-padding_xs, $mc-button-line-height_xs, $mc-button-font_xs);
}

.mc-button_sm {
@include mc-button-size($mc-button-padding_sm, $mc-button-line-height_sm, $mc-button-font_sm);
}

.mc-button_lg {
@include mc-button-size($mc-button-padding_lg, $mc-button-line-height_lg, $mc-button-font_lg);
}

.mc-button_xl {
@include mc-button-size($mc-button-padding_xl, $mc-button-line-height_xl, $mc-button-font_xl);
}

.mc-light-button {
@extend %mc-button-base;
}
Expand Down Expand Up @@ -59,6 +44,18 @@
}
}

.mc-button-overlay {
position: absolute;

top: -1px;
left: -1px;
right: -1px;
bottom: -1px;

pointer-events: none;
border-radius: inherit;
}

.mc-button-group {
display: flex;
flex-direction: row;
Expand Down Expand Up @@ -94,7 +91,7 @@
}
}

.mc-button-group-vertical {
.mc-button-group_vertical {
display: flex;
flex-direction: column;

Expand Down
Loading

0 comments on commit fb5853a

Please sign in to comment.