Skip to content

Fix dialog dismiss button some more #384

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

Merged
merged 5 commits into from
Apr 4, 2020
Merged

Fix dialog dismiss button some more #384

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
6ebf0b2
Keep changing grid until it works
snowystinger Apr 4, 2020
680dcac
More grids is always the answer if minmax isn't
snowystinger Apr 4, 2020
71a47da
position more exactly instead of at ambiguous center
snowystinger Apr 4, 2020
c73faf1
Merge branch 'master' into fix-dialog-dismiss-button-more
snowystinger Apr 4, 2020
a6fe63c
Merge branch 'master' into fix-dialog-dismiss-button-more
snowystinger Apr 4, 2020
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
43 changes: 36 additions & 7 deletions packages/@adobe/spectrum-css-temp/components/dialog/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,11 +88,11 @@ governing permissions and limitations under the License.

.spectrum-Dialog .spectrum-Dialog-grid {
display: grid;
grid-template-columns: var(--spectrum-dialog-padding) auto 1fr auto minmax(0, auto) minmax(var(--spectrum-dialog-padding), var(--spectrum-dialog-close-button-size));
grid-template-columns: var(--spectrum-dialog-padding) auto 1fr auto minmax(0, auto) var(--spectrum-dialog-padding);
grid-template-rows: auto minmax(var(--spectrum-dialog-padding), var(--spectrum-dialog-close-button-size)) auto auto 1fr auto var(--spectrum-dialog-padding);
grid-template-areas:
"hero hero hero hero hero hero"
". . . . . closeButton"
". . . . . ."
". heading header header typeIcon ."
". divider divider divider divider ."
". content content content content ."
Expand Down Expand Up @@ -203,7 +203,18 @@ governing permissions and limitations under the License.
}
}

.spectrum-Dialog--dismissable {
.spectrum-Dialog.spectrum-Dialog--dismissable .spectrum-Dialog-grid {
grid-template-columns: var(--spectrum-dialog-padding) auto 1fr auto minmax(0, auto) minmax(0, var(--spectrum-dialog-close-button-size)) var(--spectrum-dialog-padding);
grid-template-rows: auto minmax(var(--spectrum-dialog-padding), var(--spectrum-dialog-close-button-size)) auto auto 1fr auto var(--spectrum-dialog-padding);
grid-template-areas:
"hero hero hero hero hero hero hero"
". . . . . closeButton closeButton"
". heading header header typeIcon closeButton closeButton"
". divider divider divider divider divider ."
". content content content content content ."
". footer footer buttonGroup buttonGroup buttonGroup ."
". . . . . . .";

.spectrum-Dialog-buttonGroup {
display: none;
}
Expand All @@ -215,8 +226,11 @@ governing permissions and limitations under the License.
.spectrum-Dialog-closeButton {
grid-area: closeButton;
/* align and justify so it doesn't do the default 'stretch' and end up with forced height/width */
align-self: end;
justify-self: start;
align-self: start;
justify-self: end;

margin-inline-end: var(--spectrum-dialog-close-button-padding);
margin-block-start: var(--spectrum-dialog-close-button-padding);
}

/* Alert Dialog is a specific type of Dialog */
Expand Down Expand Up @@ -275,12 +289,13 @@ governing permissions and limitations under the License.
}

@media screen and (max-width: 700px) {

.spectrum-Dialog .spectrum-Dialog-grid {
grid-template-columns: var(--spectrum-dialog-padding) auto 1fr auto auto minmax(var(--spectrum-dialog-padding), var(--spectrum-dialog-close-button-size));
grid-template-columns: var(--spectrum-dialog-padding) auto 1fr auto minmax(0, auto) var(--spectrum-dialog-padding);
grid-template-rows: auto minmax(var(--spectrum-dialog-padding), var(--spectrum-dialog-close-button-size)) auto auto auto 1fr auto var(--spectrum-dialog-padding);
grid-template-areas:
"hero hero hero hero hero hero"
". . . . . closeButton"
". . . . . ."
". heading heading heading typeIcon ."
". header header header header ."
". divider divider divider divider ."
Expand All @@ -289,6 +304,20 @@ governing permissions and limitations under the License.
". . . . . .";
}

.spectrum-Dialog.spectrum-Dialog--dismissable .spectrum-Dialog-grid {
grid-template-columns: var(--spectrum-dialog-padding) auto 1fr auto minmax(0, auto) minmax(0, var(--spectrum-dialog-close-button-size)) var(--spectrum-dialog-padding);
grid-template-rows: auto minmax(var(--spectrum-dialog-padding), var(--spectrum-dialog-close-button-size)) auto auto auto 1fr auto var(--spectrum-dialog-padding);
grid-template-areas:
"hero hero hero hero hero hero hero"
". . . . . closeButton closeButton"
". heading heading heading typeIcon closeButton closeButton"
". header header header header header ."
". divider divider divider divider divider ."
". content content content content content ."
". footer footer buttonGroup buttonGroup buttonGroup ."
". . . . . . .";
}

.spectrum-Dialog .spectrum-Dialog-header {
justify-content: flex-start;
}
Expand Down