Skip to content

Commit

Permalink
Migrate all components.
Browse files Browse the repository at this point in the history
  • Loading branch information
@DaemonCahill
DaemonCahill committed Jan 21, 2024
1 parent 43d1987 commit 7f98373
Show file tree
Hide file tree
Showing 32 changed files with 493 additions and 349 deletions.
27 changes: 15 additions & 12 deletions src/grid/styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,23 +15,26 @@ $grid-gutter-width: awsui.$space-grid-gutter;
@include styles.styles-reset;
display: flex;
flex-wrap: wrap;
margin: calc(#{$grid-gutter-width} / -2);
margin-block: calc(#{$grid-gutter-width} / -2);
margin-inline: calc(#{$grid-gutter-width} / -2);
pointer-events: none;

&.no-gutters {
margin: 0;
margin-block: 0;
margin-inline: 0;
}
}

.grid-column {
box-sizing: border-box;
position: relative;
padding: calc(#{$grid-gutter-width} / 2);

padding-block: calc(#{$grid-gutter-width} / 2);
padding-inline: calc(#{$grid-gutter-width} / 2);
display: flex;

.grid.no-gutters > & {
padding: 0;
padding-block: 0;
padding-inline: 0;
}

@for $i from 1 through $grid-columns {
Expand All @@ -40,38 +43,38 @@ $grid-gutter-width: awsui.$space-grid-gutter;
// Add a `max-width` to ensure content within each column does not blow out
// the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
// do not appear to require this.
max-width: math.percentage(math.div($i, $grid-columns));
max-inline-size: math.percentage(math.div($i, $grid-columns));
}

&.push-#{$i} {
left: math.percentage(math.div($i, $grid-columns));
inset-inline-start: math.percentage(math.div($i, $grid-columns));
}

&.pull-#{$i} {
right: math.percentage(math.div($i, $grid-columns));
inset-inline-end: math.percentage(math.div($i, $grid-columns));
}
}

&.push-0 {
left: auto;
inset-inline-start: auto;
}

&.pull-0 {
right: auto;
inset-inline-end: auto;
}

// `$grid-columns - 1` because offsetting by the width of an entire row isn't possible
@for $i from 0 through ($grid-columns - 1) {
// Avoid emitting useless .offset-0
@if $i != 0 {
&.offset-#{$i} {
margin-left: math.percentage(math.div($i, $grid-columns));
margin-inline-start: math.percentage(math.div($i, $grid-columns));
}
}
}
}

.restore-pointer-events {
pointer-events: auto;
width: 100%;
inline-size: 100%;
}
64 changes: 36 additions & 28 deletions src/header/styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
@include styles.styles-reset();
cursor: inherit;
display: flex;
width: 100%;
inline-size: 100%;
flex-wrap: wrap;
justify-content: space-between;

Expand All @@ -27,13 +27,13 @@
&-has-description {
&.root-variant-h2:not(.refresh),
&.root-variant-h3:not(.refresh) {
padding-bottom: awsui.$space-scaled-xxs;
padding-block-end: awsui.$space-scaled-xxs;
}
}

&-no-actions:not(.root-has-description):not(.refresh) {
// Make sure the header is just as high without actions
padding-bottom: calc(#{awsui.$space-scaled-xs} + #{awsui.$space-xxxs});
padding-block-end: calc(#{awsui.$space-scaled-xs} + #{awsui.$space-xxxs});
}

&-no-actions.refresh {
Expand All @@ -50,21 +50,21 @@
// H3s are most often used inside containers, so minimal headings have extra padding below
// to prevent info links from having overlapping touch targets with surrounding elements.
&-no-actions:not(.root-has-description).refresh.root-variant-h3 {
padding-bottom: awsui.$space-scaled-xs;
padding-block-end: awsui.$space-scaled-xs;
}

&.root-variant-h1.root-has-description:not(.refresh) {
padding-bottom: awsui.$space-scaled-2x-xxs;
padding-block-end: awsui.$space-scaled-2x-xxs;
}
}

.main {
// Like styles.text-flex-wrapping, but without overflow: hidden, to prevent headings from being partially cut off.
word-wrap: break-word;
max-width: 100%;
max-inline-size: 100%;
display: flex;
justify-content: space-between;
width: 100%;
inline-size: 100%;
flex-wrap: wrap;
column-gap: awsui.$space-xs;
row-gap: calc(#{awsui.$space-scaled-xxs} + #{awsui.$space-scaled-xxxs});
Expand Down Expand Up @@ -92,7 +92,7 @@
// https://github.com/philipwalton/flexbugs/issues/170
display: flex;
align-items: flex-start;
min-height: awsui.$size-vertical-input;
min-block-size: awsui.$size-vertical-input;

// we can align actions to center in most cases, cause if the header is too long, actions will wrap the first.
// exception is Modal header, where __disableActionsWrapping makes header text wrap to multiple lines, shifting the close button
Expand All @@ -103,25 +103,30 @@
// Calculate padding so the heading text is better aligned with the buttons.
// Can't align-items: middle because we want buttons to stay at the top of the container when text wraps to multiple lines.
&-variant-h1.refresh {
padding: calc((#{awsui.$line-height-heading-xl} - #{awsui.$size-vertical-input}) / 2) 0;
padding-block: calc((#{awsui.$line-height-heading-xl} - #{awsui.$size-vertical-input}) / 2);
padding-inline: 0;
}
&-variant-h2.refresh {
padding: calc((#{awsui.$line-height-heading-l} - #{awsui.$size-vertical-input}) / 2) 0;
padding-block: calc((#{awsui.$line-height-heading-l} - #{awsui.$size-vertical-input}) / 2);
padding-inline: 0;
}
&-variant-h3.refresh {
padding: calc((#{awsui.$line-height-heading-m} - #{awsui.$size-vertical-input}) / 2) 0;
padding-block: calc((#{awsui.$line-height-heading-m} - #{awsui.$size-vertical-input}) / 2);
padding-inline: 0;
}

&-variant-h1:not(.refresh) {
padding: awsui.$space-scaled-xs 0;
padding-block: awsui.$space-scaled-xs;
padding-inline: 0;
}
&-variant-h2:not(.refresh),
&-variant-h3:not(.refresh) {
padding: awsui.$space-scaled-xxs 0;
padding-block: awsui.$space-scaled-xxs;
padding-inline: 0;
}

.root-has-description > .main > & {
padding-bottom: 0;
padding-block-end: 0;
}
}

Expand All @@ -130,46 +135,46 @@
color: awsui.$color-text-heading-default;
&-variant-h1 {
font-size: awsui.$font-size-heading-xl;
padding-top: awsui.$space-scaled-2x-xxs;
padding-block-start: awsui.$space-scaled-2x-xxs;
// Use padding rather than center align with min height to avoid having extra bottom space when no actions are present.
// Having top padding always present ensures that all headers of the same variant start at the same height in the container,
// whether there are buttons present or not; otherwise configurable dashboard handles are misaligned.
&.refresh {
padding-top: space-heading-button-diff(awsui.$line-height-heading-xl);
padding-block-start: space-heading-button-diff(awsui.$line-height-heading-xl);
}
}
&-variant-h2 {
font-size: awsui.$font-size-heading-l;
&.refresh {
padding-top: space-heading-button-diff(awsui.$line-height-heading-l);
padding-block-start: space-heading-button-diff(awsui.$line-height-heading-l);
}
}
&-variant-h3 {
font-size: awsui.$font-size-heading-m;
&.refresh {
padding-top: space-heading-button-diff(awsui.$line-height-heading-m);
padding-block-start: space-heading-button-diff(awsui.$line-height-heading-m);
}
}
&-variant-h2:not(.refresh),
&-variant-h3:not(.refresh) {
padding-top: awsui.$space-scaled-xs;
padding-block-start: awsui.$space-scaled-xs;
}

.no-wrap > &:not(.refresh) {
// Additional padding to make it the same height as a header with wrapping
padding-bottom: calc(#{awsui.$space-scaled-xxs} + #{awsui.$space-scaled-xxxs});
padding-block-end: calc(#{awsui.$space-scaled-xxs} + #{awsui.$space-scaled-xxxs});
}
}

.root-no-actions.root-has-description > .main > :not(.refresh) {
&.title-variant-h2,
&.title-variant-h3 {
padding-bottom: awsui.$space-scaled-xxs;
padding-block-end: awsui.$space-scaled-xxs;
}
}

.root-variant-h1.root-no-actions:not(.root-has-description):not(.refresh) {
padding-bottom: awsui.$space-scaled-2x-xxs;
padding-block-end: awsui.$space-scaled-2x-xxs;
}

.virtual-space {
Expand All @@ -178,13 +183,15 @@

.info {
// Space 's' used as it's the smallest value that works in all browsers
padding-right: awsui.$space-s;
padding-inline-end: awsui.$space-s;
}

.description {
// Override built-in styles and global typography from 2.1 for <p> tag
margin: 0;
padding: 0;
margin-block: 0;
margin-inline: 0;
padding-block: 0;
padding-inline: 0;
color: awsui.$color-text-heading-secondary;

&-variant-h1 {
Expand All @@ -194,19 +201,20 @@
font-size: awsui.$font-header-h2-description-size;
line-height: awsui.$font-header-h2-description-line-height;
&:not(.refresh) {
padding-bottom: awsui.$space-scaled-xxs;
padding-block-end: awsui.$space-scaled-xxs;
}
}
&-variant-h3 {
@include styles.font-body-s;
&:not(.refresh) {
padding-bottom: awsui.$space-scaled-xxs;
padding-block-end: awsui.$space-scaled-xxs;
}
}
}

.heading {
margin: 0;
margin-block: 0;
margin-inline: 0;
// We display heading element inline to achieve the proper line-wrapping with info links
display: inline;
font-size: inherit;
Expand Down
Loading

0 comments on commit 7f98373

Please sign in to comment.