Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update Modal styling #31639

Merged
merged 11 commits into from
May 27, 2021
Merged

Update Modal styling #31639

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
bf07be8
Update Modal styling
stokesman May 9, 2021
a440f00
Update Guide styling
stokesman May 9, 2021
f7f3c46
Update BlockCompare styling
stokesman May 9, 2021
3767431
Update PreferencesModal styling
stokesman May 9, 2021
5769f4b
Update ManageBlocksModal styling
stokesman May 9, 2021
f114afa
Use hidden overflow on modal frame to clip border radius of children
stokesman May 26, 2021
68310e8
Remove unecessary background from modal header
stokesman May 26, 2021
6a51265
Avoid box-sizing concern for modal header
stokesman May 26, 2021
d500cf7
Better :not
stokesman May 26, 2021
0acea32
Refine modal dimensions
stokesman May 26, 2021
8e695d2
Restore border-box box-sizing on modal header
stokesman May 27, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 1 addition & 7 deletions packages/block-editor/src/components/block-compare/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,8 @@
/**
* Invalid block comparison
*/

// Ensure the modal fits the content, otherwise it could be too big
.block-editor-block-compare {
overflow: auto;
height: auto;

@include break-small() {
max-height: 70%;
}
}

.block-editor-block-compare__wrapper {
Expand All @@ -23,6 +16,7 @@
width: 50%;
padding: 0 $grid-unit-20 0 0;
min-width: 200px;
max-width: $break-small;

button {
float: right;
Expand Down
18 changes: 11 additions & 7 deletions packages/components/src/guide/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,20 @@
width: 600px;
}

.components-modal__content {
padding: 0;
margin-top: 0;
border-radius: $radius-block-ui;

&::before {
content: none;
}
}

.components-modal__header {
background: none;
border-bottom: none;
width: 100%;
padding: 0;
margin: 0;
position: sticky;

.components-button {
align-self: flex-start;
Expand Down Expand Up @@ -76,10 +84,6 @@
margin: -6px 0;
}
}

.components-modal__content {
padding: 0;
}
}

.components-modal__frame.components-guide {
Expand Down
69 changes: 30 additions & 39 deletions packages/components/src/modal/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,51 +7,49 @@
left: 0;
background-color: rgba($black, 0.35);
z-index: z-index(".components-modal__screen-overlay");
display: flex;

// This animates the appearance of the white background.
@include edit-post__fade-in-animation();
}

// The modal window element.
.components-modal__frame {
// On small screens the content needs to be full width because of limited
// space.
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
box-sizing: border-box;
// Use the entire viewport on smaller screens.
margin: 0;
width: 100%;
background: $white;
box-shadow: $shadow-modal;
border-radius: $radius-block-ui;
overflow: auto;
overflow: hidden;
// Have the content element fill the vertical space yet not overflow.
display: flex;

// Show a centered modal on bigger screens.
@include break-small() {
top: 50%;
right: auto;
bottom: auto;
left: 50%;
margin: auto;
stokesman marked this conversation as resolved.
Show resolved Hide resolved
width: auto;
min-width: $modal-min-width;
max-width: calc(100% - #{ $grid-unit-20 } - #{ $grid-unit-20 });
max-height: 90%;
transform: translate(-50%, -50%);
max-width: calc(100% - #{ $grid-unit-20 * 2 });
max-height: calc(100% - #{ $header-height * 2 });

// Animate the modal frame/contents appearing on the page.
animation: components-modal__appear-animation 0.1s ease-out;
animation-fill-mode: forwards;
@include reduce-motion("animation");
}

@include break-large() {
max-height: 70%;
}
}

@keyframes components-modal__appear-animation {
from {
margin-top: $grid-unit-40;
transform: translateY($grid-unit-40);
stokesman marked this conversation as resolved.
Show resolved Hide resolved
}
to {
margin-top: 0;
transform: translateY(0);
}
}

Expand All @@ -65,25 +63,13 @@
display: flex;
flex-direction: row;
justify-content: space-between;
background: $white;
align-items: center;
height: $header-height;
width: 100%;
z-index: z-index(".components-modal__header");
// For z-index to take effect, the element must be positioned. A "sticky"
// element is positioned, but since this is not supported in IE11,
// "relative" is used as a fallback.
position: relative;
position: sticky;
position: absolute;
top: 0;
margin: 0 -#{$grid-unit-40} $grid-unit-30;

// Rules inside this query are only run by Microsoft Edge.
// Edge has bugs around position: sticky;, so it needs a separate top rule.
// See also https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/17555420/.
@supports (-ms-ime-align:auto) {
stokesman marked this conversation as resolved.
Show resolved Hide resolved
position: fixed;
width: 100%;
}
left: 0;

.components-modal__header-heading {
font-size: 1rem;
Expand Down Expand Up @@ -121,13 +107,18 @@

// Modal contents.
.components-modal__content {
box-sizing: border-box;
height: 100%;
flex: 1;
margin-top: $header-height;
padding: 0 $grid-unit-40 $grid-unit-30;
overflow: auto;

// Rules inside this query are only run by Microsoft Edge.
// This is a companion top padding to the fixed rule in line 77.
@supports (-ms-ime-align:auto) {
stokesman marked this conversation as resolved.
Show resolved Hide resolved
padding-top: $header-height;
// Emulate margin-bottom for the header. Uses a pseudo-element since the
// absolutely positioned header’s margins wouldn’t effect siblings and
// padding-top on the content element would effect positioning of any
// sticky elements within.
&::before {
content: "";
display: block;
margin-bottom: $grid-unit-30;
}
}
56 changes: 16 additions & 40 deletions packages/edit-post/src/components/manage-blocks-modal/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,3 @@
.edit-post-manage-blocks-modal {
@include break-small() {
height: calc(100% - #{ $header-height } - #{ $header-height });
}
}

.edit-post-manage-blocks-modal .components-modal__content {
padding-bottom: 0;
display: flex;
flex-direction: column;
}

.edit-post-manage-blocks-modal .components-modal__header {
flex-shrink: 0;
margin-bottom: 0;
}

.edit-post-manage-blocks-modal__content {
display: flex;
flex-direction: column;
flex: 0 1 100%;
min-height: 0;
}

.edit-post-manage-blocks-modal__no-results {
font-style: italic;
padding: 24px 0;
Expand All @@ -46,13 +22,14 @@
}

.edit-post-manage-blocks-modal__disabled-blocks-count {
border-top: 1px solid $gray-300;
margin-left: -$grid-unit-30;
margin-right: -$grid-unit-30;
border: 1px solid $gray-300;
border-width: 1px 0;
margin-left: -$grid-unit-40;
margin-right: -$grid-unit-40;
padding-top: 0.6rem;
padding-bottom: 0.6rem;
padding-left: $grid-unit-30;
padding-right: $grid-unit-30;
padding-left: $grid-unit-40;
padding-right: $grid-unit-40;
background-color: $gray-100;
}

Expand Down Expand Up @@ -85,14 +62,14 @@
margin-top: 0;
}

.edit-post-manage-blocks-modal__category-title,
.edit-post-manage-blocks-modal__checklist-item {
border-bottom: 1px solid $gray-300;
}

.edit-post-manage-blocks-modal__checklist-item {
margin-bottom: 0;
padding-left: $grid-unit-20;
border-top: 1px solid $gray-300;

&:last-child {
border-bottom: 1px solid $gray-300;
}

.components-base-control__field {
align-items: center;
Expand All @@ -119,11 +96,10 @@
}

.edit-post-manage-blocks-modal__results {
height: 100%;
overflow: auto;
margin-left: -$grid-unit-40;
margin-right: -$grid-unit-40;
padding-left: $grid-unit-40;
padding-right: $grid-unit-40;
border-top: $border-width solid $gray-300;
}

// Remove the top border from results when adjacent to the disabled block count
.edit-post-manage-blocks-modal__disabled-blocks-count + .edit-post-manage-blocks-modal__results {
border-top-width: 0;
}
24 changes: 16 additions & 8 deletions packages/edit-post/src/components/preferences-modal/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,18 @@
.edit-post-preferences-modal {
min-width: 360px;

// Better use the space on mobile.
width: 100%;
// To keep modal dimensions consistent as subsections are navigated, width
// and height are used instead of max-(width/height).
@include break-small() {
width: calc(100% - #{ $grid-unit-20 * 2 });
height: calc(100% - #{ $header-height * 2 });
}
@include break-medium() {
width: auto;
width: $break-medium - $grid-unit-20 * 2;
}

@include break-small() {
height: calc(100% - #{$header-height} - #{$header-height});
@include break-large() {
height: 70%;
}
@include break-huge() {
height: 50%;
}

.components-navigation {
Expand Down Expand Up @@ -83,6 +87,10 @@

&__section {
margin: 0 0 2.5rem 0;

&:last-child {
margin: 0;
}
}

&__section-title {
Expand Down