Skip to content

Commit cecbaf9

Browse files
author
Mario Aguiar
authored
Merge branch 'develop' into fix/pattern
2 parents 288e82a + 9821490 commit cecbaf9

File tree

15 files changed

+301
-35
lines changed

15 files changed

+301
-35
lines changed

‎plugin/assets/css/src/_frontend.css‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
/*
2+
*
3+
* Copyright 2022 Google LLC
4+
*
5+
* Licensed under the Apache License, Version 2.0 (the "License");
6+
* you may not use this file except in compliance with the License.
7+
* You may obtain a copy of the License at
8+
*
9+
* http://www.apache.org/licenses/LICENSE-2.0
10+
*
11+
* Unless required by applicable law or agreed to in writing, software
12+
* distributed under the License is distributed on an "AS IS" BASIS,
13+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14+
* See the License for the specific language governing permissions and
15+
* limitations under the License.
16+
*
17+
*
18+
*/
19+
20+
/*
21+
* All Frontend CSS without importing material-components.css.
22+
*/
23+
@import "./base/variables.css";
24+
@import "./conf/index.css";
25+
@import "typography.css";
26+
@import "./components/contact-form.css";
27+
@import "./components/masonry-grid.css";
28+
@import "./components/card.css";
29+
@import "./components/core.css";
30+
@import "../../src/block-editor/blocks/common-posts-list/style.css";
31+
@import "../../src/block-editor/blocks/contact-form/inner-blocks/common/style.css";
32+
@import "../../src/block-editor/blocks/card/style.css";
33+
@import "./block/style/masonry.css";
34+
@import "./overrides.css";
35+
@import "./tokens/index.css";

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

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -665,3 +665,49 @@ svg.mdc-button__icon {
665665
background-color: var(--md-sys-color-surface);
666666
}
667667
}
668+
669+
.mdc-button.is-large {
670+
background-color: var(--md-sys-color-primary-container);
671+
border-radius: var(--md-sys-shape-medium);
672+
box-shadow: var(--md-sys-elevation-1);
673+
color: var(--md-sys-color-on-primary-container);
674+
font-size: 16px;
675+
gap: 0.25em;
676+
height: 56px;
677+
padding: 16px;
678+
width: unset;
679+
}
680+
681+
.mdc-button.is-large > i {
682+
font-size: 24px;
683+
height: auto;
684+
margin-left: auto;
685+
margin-right: 8px;
686+
width: auto;
687+
}
688+
689+
.mdc-button.is-large:hover,
690+
.mdc-button.is-large .hover {
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);
693+
color: var(--md-sys-color-on-primary-container);
694+
}
695+
696+
.mdc-button.is-large:focus,
697+
.mdc-button.is-large .focus {
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);
700+
color: var(--md-sys-color-on-primary-container);
701+
}
702+
703+
.mdc-button.is-large:active,
704+
.mdc-button.is-large .active {
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);
707+
}
708+
709+
.mdc-button.is-large[disabled] {
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);
713+
}

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

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -331,16 +331,6 @@
331331
}
332332
}
333333

334-
.wp-block-material-buttons,
335-
.wp-block-material-button {
336-
337-
& .mdc-button.is-large {
338-
height: 50px;
339-
padding: 16px 32px;
340-
}
341-
}
342-
343-
344334
/* Icon */
345335
.wp-block-material-icon {
346336

‎plugin/assets/css/src/front-end-with-active-theme.css‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
/**
2+
* Copyright 2020 Google LLC
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
/*
18+
* All Frontend CSS.
19+
*/
20+
@import "material-components-with-active-theme.css";
21+
@import "_frontend.css";

‎plugin/assets/css/src/front-end.css‎

Lines changed: 2 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -17,17 +17,5 @@
1717
/*
1818
* All Frontend CSS.
1919
*/
20-
@import "./base/variables.css";
21-
@import "./conf/index.css";
22-
@import "typography.css";
23-
@import "./material-components.css";
24-
@import "./components/contact-form.css";
25-
@import "./components/masonry-grid.css";
26-
@import "./components/card.css";
27-
@import "./components/core.css";
28-
@import "../../src/block-editor/blocks/common-posts-list/style.css";
29-
@import "../../src/block-editor/blocks/contact-form/inner-blocks/common/style.css";
30-
@import "../../src/block-editor/blocks/card/style.css";
31-
@import "./block/style/masonry.css";
32-
@import "./overrides.css";
33-
@import "./tokens/index.css";
20+
@import "material-components.css";
21+
@import "_frontend.css";

‎plugin/assets/css/src/material-components-with-active-theme.css‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
/**
2+
* Copyright 2020 Google LLC
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
/*
18+
* Required Material components when material theme is active.
19+
*/
20+
21+
@import "mixins.css";
22+
@import "@material/layout-grid/dist/mdc.layout-grid.css";
23+
@import "@material/tab-bar/dist/mdc.tab-bar.css";
24+
@import "@material/tab-scroller/dist/mdc.tab-scroller.css";
25+
@import "./components/material.css";
26+
@import "./components/datatable.css";
27+
@import "./components/tooltip.css";

‎plugin/assets/css/src/material-components.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
@import "@material/layout-grid/dist/mdc.layout-grid.css";
2323
@import "@material/tab-bar/dist/mdc.tab-bar.css";
2424
@import "@material/tab-scroller/dist/mdc.tab-scroller.css";
25-
@import "components/image-card.css";
25+
@import "./components/image-card.css";
2626
@import "./components/material.css";
2727
@import "./components/datatable.css";
2828
@import "./components/text-field.css";

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

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
/**
2+
* Copyright 2022 Google LLC
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
:root {
18+
--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: 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);
42+
}

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

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

1717
@import "./palette.css";
1818
@import "./colors.css";
19+
@import "./shape.css";
20+
@import "./opacity.css";
21+
@import "./elevation.css";

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

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
/**
2+
* Copyright 2022 Google LLC
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
:root {
18+
--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;
22+
}

0 commit comments

Comments
 (0)