1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 | @mixin button-filled() {
|
8 | [nbButton].appearance-filled {
|
9 | border-style: nb-theme(button-filled-border-style);
|
10 | border-width: nb-theme(button-filled-border-width);
|
11 | text-transform: nb-theme(button-filled-text-transform);
|
12 |
|
13 | @each $size in nb-get-sizes() {
|
14 | &.size-#{$size} {
|
15 | padding: nb-theme(button-filled-#{$size}-padding);
|
16 | }
|
17 | }
|
18 |
|
19 | @each $status in nb-get-statuses() {
|
20 | &.status-#{$status} {
|
21 | background-color: nb-theme(button-filled-#{$status}-background-color);
|
22 | border-color: nb-theme(button-filled-#{$status}-border-color);
|
23 | color: nb-theme(button-filled-#{$status}-text-color);
|
24 |
|
25 | &:focus {
|
26 | background-color: nb-theme(button-filled-#{$status}-focus-background-color);
|
27 | border-color: nb-theme(button-filled-#{$status}-focus-border-color);
|
28 | }
|
29 |
|
30 | &:hover {
|
31 | background-color: nb-theme(button-filled-#{$status}-hover-background-color);
|
32 | border-color: nb-theme(button-filled-#{$status}-hover-border-color);
|
33 | }
|
34 |
|
35 | &:active {
|
36 | background-color: nb-theme(button-filled-#{$status}-active-background-color);
|
37 | border-color: nb-theme(button-filled-#{$status}-active-border-color);
|
38 | }
|
39 |
|
40 | &[disabled] {
|
41 | background-color: nb-theme(button-filled-#{$status}-disabled-background-color);
|
42 | border-color: nb-theme(button-filled-#{$status}-disabled-border-color);
|
43 | color: nb-theme(button-filled-#{$status}-disabled-text-color);
|
44 | }
|
45 | }
|
46 | }
|
47 | }
|
48 | }
|