Minor update to overview page spacing
This commit is contained in:
parent
939c014c0d
commit
1df325c7d3
3 changed files with 21 additions and 17 deletions
|
@ -41,8 +41,8 @@
|
||||||
padding-right: var(--spacing-xl);
|
padding-right: var(--spacing-xl);
|
||||||
}
|
}
|
||||||
.paddingX-XXL {
|
.paddingX-XXL {
|
||||||
padding-left: calc(var(--spacing-xl) * 2);
|
padding-left: var(--spectrum-alias-grid-gutter-large);
|
||||||
padding-right: calc(var(--spacing-xl) * 2);
|
padding-right: var(--spectrum-alias-grid-gutter-large);
|
||||||
}
|
}
|
||||||
.paddingY-S {
|
.paddingY-S {
|
||||||
padding-top: var(--spacing-s);
|
padding-top: var(--spacing-s);
|
||||||
|
@ -61,8 +61,8 @@
|
||||||
padding-bottom: var(--spacing-xl);
|
padding-bottom: var(--spacing-xl);
|
||||||
}
|
}
|
||||||
.paddingY-XXL {
|
.paddingY-XXL {
|
||||||
padding-top: calc(var(--spacing-xl) * 2);
|
padding-top: var(--spectrum-alias-grid-gutter-large);
|
||||||
padding-bottom: calc(var(--spacing-xl) * 2);
|
padding-bottom: var(--spectrum-alias-grid-gutter-large);
|
||||||
}
|
}
|
||||||
.gap-XXS {
|
.gap-XXS {
|
||||||
grid-gap: var(--spacing-xs);
|
grid-gap: var(--spacing-xs);
|
||||||
|
|
|
@ -33,7 +33,7 @@
|
||||||
min-height: 150px;
|
min-height: 150px;
|
||||||
}
|
}
|
||||||
.dash-card-header {
|
.dash-card-header {
|
||||||
padding: var(--spacing-xl) calc(var(--spacing-xl) * 2);
|
padding: var(--spacing-xl) var(--spectrum-global-dimension-static-size-400);
|
||||||
border-bottom: 1px solid var(--spectrum-global-color-gray-300);
|
border-bottom: 1px solid var(--spectrum-global-color-gray-300);
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
|
@ -48,7 +48,7 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="overview-tab">
|
<div class="overview-tab">
|
||||||
<Layout paddingX="XXL" paddingY="XXL">
|
<Layout paddingX="XXL" paddingY="XXL" gap="XL">
|
||||||
<div class="top">
|
<div class="top">
|
||||||
<DashCard title={"App Status"} dataCy={"app-status"}>
|
<DashCard title={"App Status"} dataCy={"app-status"}>
|
||||||
<div class="status-content">
|
<div class="status-content">
|
||||||
|
@ -183,33 +183,37 @@
|
||||||
<style>
|
<style>
|
||||||
.overview-tab {
|
.overview-tab {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-gap: var(--spacing-xl);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.overview-tab .top {
|
.overview-tab .top {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-gap: calc(var(--spacing-xl) * 2);
|
grid-gap: var(--spectrum-alias-grid-gutter-medium);
|
||||||
grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
|
grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.overview-tab .bottom,
|
||||||
|
.automation-metrics {
|
||||||
|
display: grid;
|
||||||
|
grid-gap: var(--spectrum-alias-grid-gutter-large);
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: 1000px) {
|
@media (max-width: 1000px) {
|
||||||
.overview-tab .top {
|
.overview-tab .top {
|
||||||
grid-template-columns: 1fr 1fr;
|
grid-template-columns: 1fr 1fr;
|
||||||
}
|
}
|
||||||
}
|
.overview-tab .bottom {
|
||||||
|
|
||||||
@media (max-width: 800px) {
|
|
||||||
.overview-tab .top {
|
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.overview-tab .bottom,
|
@media (max-width: 800px) {
|
||||||
.automation-metrics {
|
.overview-tab .top,
|
||||||
display: grid;
|
.overview-tab .bottom {
|
||||||
grid-gap: var(--spacing-xl);
|
grid-template-columns: 1fr;
|
||||||
grid-template-columns: 1fr 1fr;
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-display {
|
.status-display {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
Loading…
Reference in a new issue