Skip to content

Commit 1a0a9d5

Browse files
author
Mario Aguiar
committed
Hide variations if button is large
1 parent 45c14ed commit 1a0a9d5

File tree

5 files changed

+89
-88
lines changed

5 files changed

+89
-88
lines changed

‎plugin/assets/css/src/components/button.css‎

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -667,46 +667,47 @@ svg.mdc-button__icon {
667667
}
668668

669669
.mdc-button.is-large {
670-
background-color: var(--md-sys-color-primary-container);
670+
background-color: var(--md-sys-color-primary-container);
671671
border-radius: var(--md-sys-shape-medium);
672-
box-shadow: var(--md-sys-elevation-1);
673-
color: var(--md-sys-color-on-primary-container);
672+
box-shadow: var(--md-sys-elevation-1);
673+
color: var(--md-sys-color-on-primary-container);
674674
font-size: 16px;
675+
gap: 0.25em;
675676
height: 56px;
676-
padding: 16px;
677+
padding: 16px;
677678
width: unset;
678679
}
679680

680681
.mdc-button.is-large > i {
681682
font-size: 24px;
682683
height: auto;
683684
margin-left: auto;
684-
margin-right: 8px;
685+
margin-right: 8px;
685686
width: auto;
686687
}
687688

688689
.mdc-button.is-large:hover,
689690
.mdc-button.is-large .hover {
690-
background-color: rgba(var(--md-sys-color-on-primary-container-rgb), var(--md-sys-state-hover-state-layer-opacity));
691-
box-shadow: var(--md-sys-elevation-4);
691+
background-color: rgba(var(--md-sys-color-on-primary-container-rgb), var(--md-sys-state-hover-state-layer-opacity));
692+
box-shadow: var(--md-sys-elevation-4);
692693
color: var(--md-sys-color-on-primary-container);
693694
}
694695

695696
.mdc-button.is-large:focus,
696697
.mdc-button.is-large .focus {
697-
background-color: rgba(var(--md-sys-color-on-primary-container-rgb), var(--md-sys-state-focus-state-layer-opacity));
698-
box-shadow: var(--md-sys-elevation-2);
698+
background-color: rgba(var(--md-sys-color-on-primary-container-rgb), var(--md-sys-state-focus-state-layer-opacity));
699+
box-shadow: var(--md-sys-elevation-2);
699700
color: var(--md-sys-color-on-primary-container);
700701
}
701702

702703
.mdc-button.is-large:active,
703704
.mdc-button.is-large .active {
704-
background-color: rgba(var(--md-sys-color-on-primary-container-rgb), var(--md-sys-state-pressed-state-layer-opacity));
705-
box-shadow: var(--md-sys-elevation-2);
705+
background-color: rgba(var(--md-sys-color-on-primary-container-rgb), var(--md-sys-state-pressed-state-layer-opacity));
706+
box-shadow: var(--md-sys-elevation-2);
706707
}
707708

708709
.mdc-button.is-large[disabled] {
709-
background-color: rgba(var(--md-sys-color-on-surface-rgb),.12);
710-
box-shadow: var(--md-sys-elevation-0);
711-
color: rgba(var(--md-sys-color-on-surface-rgb),.38)
710+
background-color: rgba(var(--md-sys-color-on-surface-rgb), 0.12);
711+
box-shadow: var(--md-sys-elevation-0);
712+
color: rgba(var(--md-sys-color-on-surface-rgb), 0.38);
712713
}

‎plugin/assets/css/src/tokens/elevation.css‎

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -16,27 +16,27 @@
1616

1717
:root {
1818
--md-sys-elevation-level5-value: 12px;
19-
--md-sys-elevation-level5-unit: 1px;
20-
--md-sys-elevation-level5: 12px;
21-
--md-sys-elevation-level4-value: 8px;
22-
--md-sys-elevation-level4-unit: 1px;
23-
--md-sys-elevation-level4: 8px;
24-
--md-sys-elevation-level3-value: 6px;
25-
--md-sys-elevation-level3-unit: 1px;
26-
--md-sys-elevation-level3: 6px;
27-
--md-sys-elevation-level2-value: 3px;
28-
--md-sys-elevation-level2-unit: 1px;
29-
--md-sys-elevation-level2: 3px;
30-
--md-sys-elevation-level1-value: 1px;
31-
--md-sys-elevation-level1-unit: 1px;
32-
--md-sys-elevation-level1: 1px;
33-
--md-sys-elevation-level0-value: 0px;
34-
--md-sys-elevation-level0-unit: 1px;
35-
--md-sys-elevation-level0: 0px;
36-
--md-sys-elevation-0: 0px 0px 0px 0px rgba(var(--md-sys-color-shadow-rgb), .2), 0px 0px 0px 0px rgba(var(--md-sys-color-shadow-rgb), .14), 0px 0px 0px 0px rgba(var(--md-sys-color-shadow-rgb), .12);
37-
--md-sys-elevation-1: 0px 3px 1px -2px rgba(var(--md-sys-color-shadow-rgb), .2), 0px 2px 2px 0px rgba(var(--md-sys-color-shadow-rgb), .14), 0px 1px 5px 0px rgba(var(--md-sys-color-shadow-rgb), .12);
38-
--md-sys-elevation-2: 0px 2px 4px -1px rgba(var(--md-sys-color-shadow-rgb), .2), 0px 4px 5px 0px rgba(var(--md-sys-color-shadow-rgb), .14), 0px 1px 10px 0px rgba(var(--md-sys-color-shadow-rgb), .12);
39-
--md-sys-elevation-3: 0px 5px 5px -3px rgba(var(--md-sys-color-shadow-rgb), .2), 0px 8px 10px 1px rgba(var(--md-sys-color-shadow-rgb), .14), 0px 3px 14px 2px rgba(var(--md-sys-color-shadow-rgb), .12);
40-
--md-sys-elevation-4: 0px 5px 5px -3px rgba(var(--md-sys-color-shadow-rgb), .2), 0px 8px 10px 1px rgba(var(--md-sys-color-shadow-rgb), .14), 0px 3px 14px 2px rgba(var(--md-sys-color-shadow-rgb), .12);
41-
--md-sys-elevation-5: 0px 8px 10px -6px rgba(var(--md-sys-color-shadow-rgb), .2), 0px 16px 24px 2px rgba(var(--md-sys-color-shadow-rgb), .14), 0px 6px 30px 5px rgba(var(--md-sys-color-shadow-rgb), .12)
19+
--md-sys-elevation-level5-unit: 1px;
20+
--md-sys-elevation-level5: 12px;
21+
--md-sys-elevation-level4-value: 8px;
22+
--md-sys-elevation-level4-unit: 1px;
23+
--md-sys-elevation-level4: 8px;
24+
--md-sys-elevation-level3-value: 6px;
25+
--md-sys-elevation-level3-unit: 1px;
26+
--md-sys-elevation-level3: 6px;
27+
--md-sys-elevation-level2-value: 3px;
28+
--md-sys-elevation-level2-unit: 1px;
29+
--md-sys-elevation-level2: 3px;
30+
--md-sys-elevation-level1-value: 1px;
31+
--md-sys-elevation-level1-unit: 1px;
32+
--md-sys-elevation-level1: 1px;
33+
--md-sys-elevation-level0-value: 0;
34+
--md-sys-elevation-level0-unit: 1px;
35+
--md-sys-elevation-level0: 0;
36+
--md-sys-elevation-0: 0 0 0 0 rgba(var(--md-sys-color-shadow-rgb), .2), 0 0 0 0 rgba(var(--md-sys-color-shadow-rgb), .14), 0 0 0 0 rgba(var(--md-sys-color-shadow-rgb), 0.12);
37+
--md-sys-elevation-1: 0 3px 1px -2px rgba(var(--md-sys-color-shadow-rgb), .2), 0 2px 2px 0 rgba(var(--md-sys-color-shadow-rgb), .14), 0 1px 5px 0 rgba(var(--md-sys-color-shadow-rgb), 0.12);
38+
--md-sys-elevation-2: 0 2px 4px -1px rgba(var(--md-sys-color-shadow-rgb), .2), 0 4px 5px 0 rgba(var(--md-sys-color-shadow-rgb), .14), 0 1px 10px 0 rgba(var(--md-sys-color-shadow-rgb), 0.12);
39+
--md-sys-elevation-3: 0 5px 5px -3px rgba(var(--md-sys-color-shadow-rgb), .2), 0 8px 10px 1px rgba(var(--md-sys-color-shadow-rgb), .14), 0 3px 14px 2px rgba(var(--md-sys-color-shadow-rgb), 0.12);
40+
--md-sys-elevation-4: 0 5px 5px -3px rgba(var(--md-sys-color-shadow-rgb), .2), 0 8px 10px 1px rgba(var(--md-sys-color-shadow-rgb), .14), 0 3px 14px 2px rgba(var(--md-sys-color-shadow-rgb), 0.12);
41+
--md-sys-elevation-5: 0 8px 10px -6px rgba(var(--md-sys-color-shadow-rgb), .2), 0 16px 24px 2px rgba(var(--md-sys-color-shadow-rgb), .14), 0 6px 30px 5px rgba(var(--md-sys-color-shadow-rgb), 0 .12);
4242
}

‎plugin/assets/css/src/tokens/opacity.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616

1717
:root {
1818
--md-sys-state-dragged-state-layer-opacity: 0.16;
19-
--md-sys-state-pressed-state-layer-opacity: 0.12;
20-
--md-sys-state-focus-state-layer-opacity: 0.12;
21-
--md-sys-state-hover-state-layer-opacity: 0.08
19+
--md-sys-state-pressed-state-layer-opacity: 0.12;
20+
--md-sys-state-focus-state-layer-opacity: 0.12;
21+
--md-sys-state-hover-state-layer-opacity: 0.08;
2222
}

‎plugin/assets/css/src/tokens/shape.css‎

Lines changed: 47 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -16,51 +16,51 @@
1616

1717
:root {
1818
--md-sys-shape-corner-full-family: 3px;
19-
--md-sys-shape-corner-extra-large-top-family: 1px;
20-
--md-sys-shape-corner-extra-large-top: 0px;
21-
--md-sys-shape-corner-extra-large-top-top-left: 28px;
22-
--md-sys-shape-corner-extra-large-top-top-right-unit: 1px;
23-
--md-sys-shape-corner-extra-large-top-top-right: 28px;
24-
--md-sys-shape-corner-extra-large-family: 1px;
25-
--md-sys-shape-corner-extra-large-unit: 1px;
26-
--md-sys-shape-corner-extra-large: 28px;
27-
--md-sys-shape-corner-large-top-family: 1px;
28-
--md-sys-shape-corner-large-top-unit: 1px;
29-
--md-sys-shape-corner-large-top: 0px;
30-
--md-sys-shape-corner-large-top-top-left-unit: 1px;
31-
--md-sys-shape-corner-large-top-top-left: 16px;
32-
--md-sys-shape-corner-large-top-top-right-unit: 1px;
33-
--md-sys-shape-corner-large-top-top-right: 16px;
34-
--md-sys-shape-corner-large-end-family: 1px;
35-
--md-sys-shape-corner-large-end-unit: 1px;
36-
--md-sys-shape-corner-large-end: 0px;
37-
--md-sys-shape-corner-large-end-top-right-unit: 1px;
38-
--md-sys-shape-corner-large-end-top-right: 16px;
39-
--md-sys-shape-corner-large-end-bottom-right-unit: 1px;
40-
--md-sys-shape-corner-large-end-bottom-right: 16px;
41-
--md-sys-shape-corner-large-family: 1px;
42-
--md-sys-shape-corner-large-unit: 1px;
43-
--md-sys-shape-corner-large: 16px;
44-
--md-sys-shape-corner-medium-family: 1px;
45-
--md-sys-shape-corner-medium-unit: 1px;
46-
--md-sys-shape-corner-medium: 12px;
47-
--md-sys-shape-corner-small-family: 1px;
48-
--md-sys-shape-corner-small-unit: 1px;
49-
--md-sys-shape-corner-small: 8px;
50-
--md-sys-shape-corner-extra-small-top-family: 1px;
51-
--md-sys-shape-corner-extra-small-top-unit: 1px;
52-
--md-sys-shape-corner-extra-small-top: 0px;
53-
--md-sys-shape-corner-extra-small-top-top-left-unit: 1px;
54-
--md-sys-shape-corner-extra-small-top-top-left: 4px;
55-
--md-sys-shape-corner-extra-small-top-top-right-unit: 1px;
56-
--md-sys-shape-corner-extra-small-top-top-right: 4px;
57-
--md-sys-shape-corner-extra-small-family: 1px;
58-
--md-sys-shape-corner-extra-small-unit: 1px;
59-
--md-sys-shape-corner-extra-small: 4px;
60-
--md-sys-shape-corner-none-family: 1px;
61-
--md-sys-shape-corner-none-unit: 1px;
62-
--md-sys-shape-corner-none: 0px;
63-
--md-sys-shape-small: var(--md-sys-shape-corner-small);
64-
--md-sys-shape-medium: var(--md-sys-shape-corner-medium);
65-
--md-sys-shape-large: var(--md-sys-shape-corner-large);
19+
--md-sys-shape-corner-extra-large-top-family: 1px;
20+
--md-sys-shape-corner-extra-large-top: 0;
21+
--md-sys-shape-corner-extra-large-top-top-left: 28px;
22+
--md-sys-shape-corner-extra-large-top-top-right-unit: 1px;
23+
--md-sys-shape-corner-extra-large-top-top-right: 28px;
24+
--md-sys-shape-corner-extra-large-family: 1px;
25+
--md-sys-shape-corner-extra-large-unit: 1px;
26+
--md-sys-shape-corner-extra-large: 28px;
27+
--md-sys-shape-corner-large-top-family: 1px;
28+
--md-sys-shape-corner-large-top-unit: 1px;
29+
--md-sys-shape-corner-large-top: 0;
30+
--md-sys-shape-corner-large-top-top-left-unit: 1px;
31+
--md-sys-shape-corner-large-top-top-left: 16px;
32+
--md-sys-shape-corner-large-top-top-right-unit: 1px;
33+
--md-sys-shape-corner-large-top-top-right: 16px;
34+
--md-sys-shape-corner-large-end-family: 1px;
35+
--md-sys-shape-corner-large-end-unit: 1px;
36+
--md-sys-shape-corner-large-end: 0;
37+
--md-sys-shape-corner-large-end-top-right-unit: 1px;
38+
--md-sys-shape-corner-large-end-top-right: 16px;
39+
--md-sys-shape-corner-large-end-bottom-right-unit: 1px;
40+
--md-sys-shape-corner-large-end-bottom-right: 16px;
41+
--md-sys-shape-corner-large-family: 1px;
42+
--md-sys-shape-corner-large-unit: 1px;
43+
--md-sys-shape-corner-large: 16px;
44+
--md-sys-shape-corner-medium-family: 1px;
45+
--md-sys-shape-corner-medium-unit: 1px;
46+
--md-sys-shape-corner-medium: 12px;
47+
--md-sys-shape-corner-small-family: 1px;
48+
--md-sys-shape-corner-small-unit: 1px;
49+
--md-sys-shape-corner-small: 8px;
50+
--md-sys-shape-corner-extra-small-top-family: 1px;
51+
--md-sys-shape-corner-extra-small-top-unit: 1px;
52+
--md-sys-shape-corner-extra-small-top: 0;
53+
--md-sys-shape-corner-extra-small-top-top-left-unit: 1px;
54+
--md-sys-shape-corner-extra-small-top-top-left: 4px;
55+
--md-sys-shape-corner-extra-small-top-top-right-unit: 1px;
56+
--md-sys-shape-corner-extra-small-top-top-right: 4px;
57+
--md-sys-shape-corner-extra-small-family: 1px;
58+
--md-sys-shape-corner-extra-small-unit: 1px;
59+
--md-sys-shape-corner-extra-small: 4px;
60+
--md-sys-shape-corner-none-family: 1px;
61+
--md-sys-shape-corner-none-unit: 1px;
62+
--md-sys-shape-corner-none: 0;
63+
--md-sys-shape-small: var(--md-sys-shape-corner-small);
64+
--md-sys-shape-medium: var(--md-sys-shape-corner-medium);
65+
--md-sys-shape-large: var(--md-sys-shape-corner-large);
6666
}

‎plugin/assets/src/block-editor/blocks/button/edit.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -306,7 +306,7 @@ const ButtonEdit = ( {
306306
</>
307307
) }
308308

309-
{ type === 'text' && (
309+
{ type === 'text' && size !== 'large' && (
310310
<>
311311
<span>
312312
{ __( 'Variations', 'material-design' ) }

0 commit comments

Comments
 (0)