From bf30a60a3a54c440af381f1bb56e4cb45d830e0d Mon Sep 17 00:00:00 2001 From: Aymen Bareche Date: Wed, 14 Apr 2021 12:29:33 +0200 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Unify=20the=20spacing=20variables?= =?UTF-8?q?=20(#696)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * :sparkles: Add unified spacing variables * :truck: Moved deprecated spacing variables to `_deprecated_spacing.scss` * :construction: Import new spacing variables * :pencil2: Use $sp-# instead of $inset-# * :pencil2: Use $sp-# instead of $stack-# * :pencil2: Use $sp-# instead of $inline-# * :memo: Update spacing story * :loud_sound: Add a warning about old spacing variables usage --- src/components/HdAlert.vue | 8 +- src/components/HdBadge.vue | 14 +-- src/components/HdCalendar.vue | 16 +-- src/components/HdDashedList.vue | 6 +- src/components/HdEditSwitch.vue | 14 +-- src/components/HdExpandText.vue | 8 +- src/components/HdModal.vue | 24 ++-- src/components/HdTable.vue | 6 +- src/components/HdTabsMenu.vue | 2 +- src/components/HdTagsList.vue | 10 +- src/components/HdTileSelectItem.vue | 2 +- src/components/HdTimeslots.vue | 30 ++--- src/components/HdToast.vue | 10 +- src/components/buttons/HdButton.vue | 4 +- src/components/buttons/HdRadioButton.vue | 6 +- .../details-table/HdDetailsTable.vue | 10 +- .../details-table/HdDetailsTableRow.vue | 14 +-- src/components/form/FieldBase.vue | 28 ++--- src/components/form/HdCheckbox.vue | 10 +- src/components/form/HdDynamicForm.vue | 4 +- src/components/form/HdPasswordConfirm.vue | 2 +- src/components/form/HdRadio.vue | 6 +- src/components/form/HdRange.vue | 12 +- src/components/form/HdSplitInput.vue | 4 +- src/components/form/HdTagsSelector.vue | 22 ++-- src/components/form/TextFieldBase.vue | 2 +- src/components/gallery/HdGallery.vue | 18 +-- src/components/gallery/HdGalleryCarousel.vue | 10 +- src/components/gallery/HdGalleryOverlay.vue | 8 +- .../gallery/HdGalleryPlaceholder.vue | 6 +- src/components/gallery/HdGalleryTiles.vue | 12 +- src/components/gallery/HdZoomerGallery.vue | 12 +- .../notifications/HdNotification.vue | 4 +- src/stories/Elevation.vue | 6 +- src/stories/Spacing.vue | 110 +++++++++++------- src/stories/Welcome.vue | 12 +- src/styles/_deprecated_spacing.scss | 23 ++++ src/styles/_spacing.scss | 13 +++ src/styles/_variables.scss | 40 +------ src/styles/buttons.scss | 8 +- src/styles/main.scss | 1 + 41 files changed, 298 insertions(+), 259 deletions(-) create mode 100644 src/styles/_deprecated_spacing.scss create mode 100644 src/styles/_spacing.scss diff --git a/src/components/HdAlert.vue b/src/components/HdAlert.vue index e7b6d0845..8ed15d743 100644 --- a/src/components/HdAlert.vue +++ b/src/components/HdAlert.vue @@ -80,7 +80,7 @@ export default { .alert { $root: &; display: flex; - padding: $inset-s; + padding: $sp-s; @include font('text-small'); border-width: 1px; border-style: solid; @@ -110,15 +110,15 @@ export default { } &--no-icon { - padding: $stack-s $inline-m; + padding: $sp-s $sp-m; } &__icon { width: 24px; align-self: flex-start; flex-shrink: 0; - margin-top: $stack-xxs; - margin-right: $inline-s; + margin-top: $sp-xxs; + margin-right: $sp-s; ::v-deep path { #{$root}--success & { diff --git a/src/components/HdBadge.vue b/src/components/HdBadge.vue index 875be853c..6fb7f14a9 100644 --- a/src/components/HdBadge.vue +++ b/src/components/HdBadge.vue @@ -132,7 +132,7 @@ export default { font-size: 18px; line-height: 28px; border-radius: 4px; - padding: $stack-xs $inline-s; + padding: $sp-xs $sp-s; cursor: default; } @@ -140,8 +140,8 @@ export default { display: none; width: 24px; height: 24px; - margin-left: $inline-m; - margin-right: $inline-s; + margin-left: $sp-m; + margin-right: $sp-s; &::v-deep path { fill: currentColor; @@ -151,7 +151,7 @@ export default { ::v-deep &__icon{ width: 14px; height: 14px; - margin-right: $inline-s; + margin-right: $sp-s; } &__details{ @@ -160,10 +160,10 @@ export default { white-space: nowrap; overflow: hidden; - padding: $inset-s; + padding: $sp-s; padding-top: 0; - border-bottom-left-radius: $inline-xs; - border-bottom-right-radius: $inline-xs; + border-bottom-left-radius: $sp-xs; + border-bottom-right-radius: $sp-xs; border-top-left-radius: 0; border-top-right-radius: 0; font-weight: normal; diff --git a/src/components/HdCalendar.vue b/src/components/HdCalendar.vue index 1e2af9532..82df7498a 100644 --- a/src/components/HdCalendar.vue +++ b/src/components/HdCalendar.vue @@ -196,7 +196,7 @@ export default { &__header { text-align: center; position: relative; - margin-bottom: $stack-m; + margin-bottom: $sp-m; display: flex; justify-content: center; align-items: center; @@ -204,7 +204,7 @@ export default { font-size: 14px; line-height: 20px; font-weight: bold; - margin: 0 $stack-xl; + margin: 0 $sp-xl; @media (min-width: $break-mobile) { font-size: 18px; @@ -213,30 +213,30 @@ export default { } @media (min-width: $break-mobile) { - margin-bottom: $stack-s * 3; + margin-bottom: $sp-s * 3; } } &__row { display: flex; - margin-bottom: $stack-m; + margin-bottom: $sp-m; @media (min-width: $break-mobile) { - margin-bottom: $stack-m; + margin-bottom: $sp-m; } &__item { width: calc(100% / 7); text-align: center; &:not(:last-child) { - margin-right: $inline-m; + margin-right: $sp-m; } } } &__days { - margin-bottom: $stack-m; + margin-bottom: $sp-m; @media (min-width: $break-mobile) { - margin-bottom: $stack-s * 3; + margin-bottom: $sp-s * 3; } } &__day { diff --git a/src/components/HdDashedList.vue b/src/components/HdDashedList.vue index 9bbc878a9..b4468eb01 100644 --- a/src/components/HdDashedList.vue +++ b/src/components/HdDashedList.vue @@ -57,8 +57,8 @@ $leaders-border: 1px dashed getShade($neutral-gray, 50); background-color: inherit; &__title { - margin-top: $stack-l; - margin-bottom: $stack-s; + margin-top: $sp-l; + margin-bottom: $sp-s; color: $neutral-gray; font-weight: 700; } @@ -76,7 +76,7 @@ $leaders-border: 1px dashed getShade($neutral-gray, 50); .dashed-list__item { display: flex; flex-flow: wrap; - margin-bottom: $stack-s; + margin-bottom: $sp-s; > dt, > dd { diff --git a/src/components/HdEditSwitch.vue b/src/components/HdEditSwitch.vue index 790ae753f..8a7be719d 100644 --- a/src/components/HdEditSwitch.vue +++ b/src/components/HdEditSwitch.vue @@ -164,12 +164,12 @@ export default { &__actions { display: flex; justify-content: flex-end; - margin-bottom: $stack-s; + margin-bottom: $sp-s; &__button { display: flex; align-items: center; padding: 0; - margin-left: $inline-m; + margin-left: $sp-m; cursor: pointer; &--edit { color: getShade($secondary-color, 110); @@ -184,7 +184,7 @@ export default { font-size: 18px; font-weight: 400; line-height: 26px; - margin-left: $inline-xs; + margin-left: $sp-xs; } &__icon path { fill: currentColor; @@ -196,7 +196,7 @@ export default { display: flex; justify-content: flex-end; align-items: center; - margin-bottom: $stack-s; + margin-bottom: $sp-s; &__icon { width: 20px; @@ -210,7 +210,7 @@ export default { &__label { display: none; - margin-left: $inline-s; + margin-left: $sp-s; font-size: 18px; line-height: 26px; @@ -232,11 +232,11 @@ export default { &--editing-allowed .details-table-wrap:first-child { padding-top: 0; - margin-top: $stack-s * -1; + margin-top: $sp-s * -1; } h3 + .field { - margin-top: $stack-s; + margin-top: $sp-s; } } diff --git a/src/components/HdExpandText.vue b/src/components/HdExpandText.vue index e96874711..71cb27381 100644 --- a/src/components/HdExpandText.vue +++ b/src/components/HdExpandText.vue @@ -225,7 +225,7 @@ export default { align-items: center; position: relative; padding: 0; - margin-right: $inline-m; + margin-right: $sp-m; font-size: 18px; line-height: 28px; font-family: inherit; @@ -250,9 +250,9 @@ export default { &::before { content: ''; position: absolute; - bottom: $stack-xs; + bottom: $sp-xs; left: 0; - width: calc(100% - #{$inline-xs + $_icon-size}); + width: calc(100% - #{$sp-xs + $_icon-size}); height: 1px; background-color: getShade($secondary-color, 110); } @@ -261,7 +261,7 @@ export default { position: relative; width: $_icon-size; height: $_icon-size; - margin-left: $inline-xs; + margin-left: $sp-xs; transition: transform ($time-s * 2) ease-in-out; path { diff --git a/src/components/HdModal.vue b/src/components/HdModal.vue index 64db77040..bfb0365d2 100644 --- a/src/components/HdModal.vue +++ b/src/components/HdModal.vue @@ -154,7 +154,7 @@ export default { left: 0; display: flex; flex-direction: column; - padding: $inset-s; + padding: $sp-s; z-index: 100; animation: fadeIn .3s forwards; overflow: auto; @@ -166,7 +166,7 @@ export default { } &--external-close-icon { - padding-top: $stack-s + 24px; + padding-top: $sp-s + 24px; } &__overlay { @@ -185,8 +185,8 @@ export default { } &__close { position: absolute; - top: $stack-s; - right: $inline-s; + top: $sp-s; + right: $sp-s; width: 24px; height: 24px; background-color: transparent; @@ -196,8 +196,8 @@ export default { z-index: 2; @media (min-width: $break-tablet){ - top: $stack-m; - right: $inline-m; + top: $sp-m; + right: $sp-m; } #{$_root}--external-close-icon & { @@ -236,10 +236,10 @@ export default { &__body { background-color: white; - padding: $inset-l; + padding: $sp-l; #{$_root}--spacing-normal & { - padding: $inset-m; + padding: $sp-m; } #{$_root}--no-spacing & { @@ -249,12 +249,12 @@ export default { &__actions { display: flex; - padding: $inset-m ($inset-m - ($inline-xs * 2)); + padding: $sp-m ($sp-m - ($sp-xs * 2)); &__action { width: auto; - margin-left: $inline-xs; - margin-right: $inline-xs; + margin-left: $sp-xs; + margin-right: $sp-xs; flex-grow: 1; flex-shrink: 0; @@ -282,7 +282,7 @@ export default { border-bottom: 1px solid getShade($quaternary-color, 60); &::v-deep > *:first-child { - padding: $inset-m; + padding: $sp-m; } } diff --git a/src/components/HdTable.vue b/src/components/HdTable.vue index cef35be32..f0fe2675d 100644 --- a/src/components/HdTable.vue +++ b/src/components/HdTable.vue @@ -48,14 +48,14 @@ export default { @import 'homeday-blocks/src/styles/mixins.scss'; .hd-table { - margin-top: $stack-s; + margin-top: $sp-s; @include font('text-xsmall'); border-collapse: collapse; width: 100%; z-index: -1; text-align: center; th, td { - padding: $inset-s; + padding: $sp-s; border-top: 1px solid getShade($quaternary-color, 60); color: $quaternary-color; font-weight: 600; @@ -88,7 +88,7 @@ export default { } td:after { content: ''; - width: $inset-s; + width: $sp-s; height: 100%; position: absolute; right: 0; diff --git a/src/components/HdTabsMenu.vue b/src/components/HdTabsMenu.vue index 1e4749f84..c5338ded6 100644 --- a/src/components/HdTabsMenu.vue +++ b/src/components/HdTabsMenu.vue @@ -118,7 +118,7 @@ export default { &__item { padding-left: 0; padding-right: 0; - margin-right: $inline-l; + margin-right: $sp-l; white-space: nowrap; font-weight: 400; text-align: left; diff --git a/src/components/HdTagsList.vue b/src/components/HdTagsList.vue index 23d7c313e..6428791c3 100644 --- a/src/components/HdTagsList.vue +++ b/src/components/HdTagsList.vue @@ -28,16 +28,16 @@ export default { .tags-list { display: flex; flex-wrap: wrap; - min-height: #{$stack-l + $stack-s}; - margin-bottom: $stack-m; + min-height: #{$sp-l + $sp-s}; + margin-bottom: $sp-m; &__tag { display: flex; align-items: center; - height: $stack-l; + height: $sp-l; background-color: getShade($quaternary-color, 50); border-radius: 3px; - padding: 0 $inline-s; - margin: $stack-s $inline-s 0 0; + padding: 0 $sp-s; + margin: $sp-s $sp-s 0 0; } } diff --git a/src/components/HdTileSelectItem.vue b/src/components/HdTileSelectItem.vue index 5feec755a..d36bfebc5 100644 --- a/src/components/HdTileSelectItem.vue +++ b/src/components/HdTileSelectItem.vue @@ -53,7 +53,7 @@ export default { width: 100%; background-color: white; border: 0; - padding: $inset-m; + padding: $sp-m; font-family: inherit; font-size: inherit; font-weight: inherit; diff --git a/src/components/HdTimeslots.vue b/src/components/HdTimeslots.vue index a7c02a12a..ee006247f 100644 --- a/src/components/HdTimeslots.vue +++ b/src/components/HdTimeslots.vue @@ -146,7 +146,7 @@ export default { &__controls { position: absolute; display: flex; - padding: 0 $inline-xs; + padding: 0 $sp-xs; width: 100%; height: 100%; align-items: center; @@ -154,17 +154,17 @@ export default { z-index: 0; @media (min-width: $break-mobile) { - margin-top: -$stack-m; + margin-top: -$sp-m; } } &__inner { - width: calc(100% - #{$inline-xl}); + width: calc(100% - #{$sp-xl}); margin: auto; overflow: hidden; position: relative; height: 100%; - padding-top: $stack-s; + padding-top: $sp-s; @media (min-width: $break-mobile) { padding-top: 0; @@ -172,19 +172,19 @@ export default { } &__slots { height: 100%; - margin-right: -$inline-s; + margin-right: -$sp-s; } &__slot { - width: calc(100% / 4 - #{$inline-s}); + width: calc(100% / 4 - #{$sp-s}); display: inline-block; - padding: $inset-s; + padding: $sp-s; font-size: 14px; line-height: 10px; border: 1px solid getShade($secondary-color, 110); border-radius: 2px; - margin-right: $inline-s; - margin-bottom: $stack-s; + margin-right: $sp-s; + margin-bottom: $sp-s; text-align: center; color: $primary-color; cursor: pointer; @@ -192,8 +192,8 @@ export default { z-index: 1; @media (min-width: $break-mobile) { - width: calc(100% / 6 - #{$inline-s}); - margin-bottom: $stack-xs; + width: calc(100% / 6 - #{$sp-s}); + margin-bottom: $sp-xs; font-size: 18px; border-width: 2px; } @@ -224,7 +224,7 @@ export default { font-size: 11px; line-height: 14px; color: $primary-color; - margin-top: $stack-s; + margin-top: $sp-s; position: absolute; bottom: 0; @media (min-width: $break-mobile) { @@ -240,7 +240,7 @@ export default { width: 10px; border: 1px solid getShade($quaternary-color, 50); background: getShade($quaternary-color, 50); - margin-right: $inline-s; + margin-right: $sp-s; border-radius: 2px; @media (min-width: $break-mobile) { @@ -253,10 +253,10 @@ export default { border-color: getShade($secondary-color, 110); } &:first-child { - margin-right: $inline-m; + margin-right: $sp-m; @media (min-width: $break-mobile) { - margin-right: $inline-l; + margin-right: $sp-l; } } } diff --git a/src/components/HdToast.vue b/src/components/HdToast.vue index 860a04ae4..6448f0f56 100644 --- a/src/components/HdToast.vue +++ b/src/components/HdToast.vue @@ -87,13 +87,13 @@ $toastWidth: 288px; @media (min-width: $break-tablet) { transform: none; left: auto; - right: $inline-m; - top: $stack-m; + right: $sp-m; + top: $sp-m; } @media (min-width: $break-tablet) { - right: $inline-l; - top: $stack-m; + right: $sp-l; + top: $sp-m; } // Appereance @@ -112,7 +112,7 @@ $toastWidth: 288px; animation: slide-out-top 0.45s cubic-bezier(0.755, 0.050, 0.855, 0.060) both; } &__text { - padding: $stack-s $inline-m; + padding: $sp-s $sp-m; border-bottom: 1px solid #E1E1E1; } diff --git a/src/components/buttons/HdButton.vue b/src/components/buttons/HdButton.vue index f6ac7c129..a05828621 100644 --- a/src/components/buttons/HdButton.vue +++ b/src/components/buttons/HdButton.vue @@ -108,13 +108,13 @@ export default { $root: &; &--icon-button { - padding: $inset-s; + padding: $sp-s; } &__icon { width: 24px; height: 24px; - margin-right: $inline-xs; + margin-right: $sp-xs; #{$root}--icon-button & { width: 28px; diff --git a/src/components/buttons/HdRadioButton.vue b/src/components/buttons/HdRadioButton.vue index 4b0b1bb32..922f9aa1b 100644 --- a/src/components/buttons/HdRadioButton.vue +++ b/src/components/buttons/HdRadioButton.vue @@ -124,7 +124,7 @@ $iconWidth: 48px; &:not(:last-child) { @media(max-width: $break-mobile - 1) { &:before { - $leftPos: $iconWidth + $inline-s; + $leftPos: $iconWidth + $sp-s; content: ""; position: absolute; left: $leftPos; @@ -140,7 +140,7 @@ $iconWidth: 48px; @media(min-width: $break-mobile) { flex-direction: column; border-radius: 4px; - padding: $inset-m; + padding: $sp-m; box-shadow: 0 6px 12px 0 rgba(0,0,0,.3); &:hover, &:focus { @@ -166,7 +166,7 @@ $iconWidth: 48px; } &__iconWrapper { display: none; - margin-right: $inline-s; + margin-right: $sp-s; &--mobile { display: block; diff --git a/src/components/details-table/HdDetailsTable.vue b/src/components/details-table/HdDetailsTable.vue index 207ecb50e..159011479 100644 --- a/src/components/details-table/HdDetailsTable.vue +++ b/src/components/details-table/HdDetailsTable.vue @@ -32,11 +32,11 @@ export default { @import 'homeday-blocks/src/styles/mixins.scss'; .details-table-wrap { - padding-top: $stack-m; - padding-bottom: $stack-s; + padding-top: $sp-m; + padding-bottom: $sp-s; + #{&} { - padding-top: $stack-s; + padding-top: $sp-s; } } @@ -47,14 +47,14 @@ export default { display: block; height: 2px; background-color: getShade($quaternary-color, 60); - margin-top: $stack-s; + margin-top: $sp-s; } } &__before { @media (min-width: $break-desktop) { - margin-bottom: $stack-s; + margin-bottom: $sp-s; } } diff --git a/src/components/details-table/HdDetailsTableRow.vue b/src/components/details-table/HdDetailsTableRow.vue index fd0061c3f..37063dd16 100644 --- a/src/components/details-table/HdDetailsTableRow.vue +++ b/src/components/details-table/HdDetailsTableRow.vue @@ -36,8 +36,8 @@ export default { @import 'homeday-blocks/src/styles/mixins.scss'; .details-table__row { - margin-top: $stack-s; - margin-bottom: $stack-s; + margin-top: $sp-s; + margin-bottom: $sp-s; display: flex; flex-flow: row nowrap; word-wrap: break-word; @@ -55,7 +55,7 @@ export default { &__label { flex: 0 0 152px; min-width: 0; - margin-right: $inline-s; + margin-right: $sp-s; color: getShade($quaternary-color, 80); @media (min-width: $break-tablet) { @@ -77,11 +77,11 @@ export default { } .field { - margin-bottom: $stack-m; + margin-bottom: $sp-m; word-wrap: normal; &__input { - padding-top: $stack-s; + padding-top: $sp-s; } } } @@ -89,14 +89,14 @@ export default { &:not(&--single-column):nth-child(odd) #{&}__content { @media (min-width: $break-desktop) { - margin-right: $inline-xs; + margin-right: $sp-xs; } } &:not(&--single-column):nth-child(even) #{&}__label { @media (min-width: $break-desktop) { - margin-left: $inline-xs; + margin-left: $sp-xs; } } } diff --git a/src/components/form/FieldBase.vue b/src/components/form/FieldBase.vue index baa01e541..fde785142 100644 --- a/src/components/form/FieldBase.vue +++ b/src/components/form/FieldBase.vue @@ -136,8 +136,8 @@ export default { @include typography-regular; &__icon { - margin-top: $stack-m; - margin-right: $inline-s; + margin-top: $sp-m; + margin-right: $sp-s; flex: 0 0 24px; #{$root}--disabled & { @@ -151,8 +151,8 @@ export default { position: relative; #{$root}--grouped:not(#{$root}--unlabelled) & { - padding-top: $stack-m; - margin-top: $stack-s; + padding-top: $sp-m; + margin-top: $sp-s; } } &:not(#{$root}--grouped) &__main { @@ -166,10 +166,10 @@ export default { } input, textarea, select { - padding-top: $stack-l - $stack-s; - padding-right: $inline-s; - padding-bottom: $stack-s; - padding-left: $inline-m; + padding-top: $sp-l - $sp-s; + padding-right: $sp-s; + padding-bottom: $sp-s; + padding-left: $sp-m; background: inherit; color: inherit; font-size: inherit; @@ -186,8 +186,8 @@ export default { } &__label { position: absolute; - top: $stack-m; - left: $inline-m; + top: $sp-m; + left: $sp-m; transform-origin: left; transition: transform .3s, color .2s; pointer-events: none; @@ -261,8 +261,8 @@ export default { } &__input-right { position: absolute; - top: $stack-m; - right: $inline-m; + top: $sp-m; + right: $sp-m; pointer-events: none; > ::v-deep * { @@ -273,8 +273,8 @@ export default { width: 100%; color: getShade($quaternary-color, 80); @include typography-small; - padding-right: $inline-m; - padding-left: $inline-m; + padding-right: $sp-m; + padding-left: $sp-m; #{$root}--errored:not(#{$root}--active) & { color: $error-color; diff --git a/src/components/form/HdCheckbox.vue b/src/components/form/HdCheckbox.vue index dc40839f8..d2a1e3f67 100644 --- a/src/components/form/HdCheckbox.vue +++ b/src/components/form/HdCheckbox.vue @@ -191,7 +191,7 @@ export default { @import 'homeday-blocks/src/styles/mixins.scss'; .field { - margin-bottom: $stack-m; + margin-bottom: $sp-m; } .field--errored { @@ -277,7 +277,7 @@ export default { &__description { flex: 1; - margin: 0 0 0 $inline-s; + margin: 0 0 0 $sp-s; text-align: left; @include font('text-small'); } @@ -349,15 +349,15 @@ export default { &__error { @include font('text-xxsmall'); position: absolute; - top: calc(100% + #{$inline-xs}); - margin-left: $inline-m; + top: calc(100% + #{$sp-xs}); + margin-left: $sp-m; color: $error-color; display: none; } &__label { display: block; flex: 1; - margin: 0 0 0 $inline-s; + margin: 0 0 0 $sp-s; text-align: left; font-size: 14px; diff --git a/src/components/form/HdDynamicForm.vue b/src/components/form/HdDynamicForm.vue index fd67d0f7e..c2ee5c208 100644 --- a/src/components/form/HdDynamicForm.vue +++ b/src/components/form/HdDynamicForm.vue @@ -154,8 +154,8 @@ export default { display: flex; &__item { flex: 1; - margin-left: $inline-xs; - margin-right: $inline-xs; + margin-left: $sp-xs; + margin-right: $sp-xs; &:first-of-type { margin-left: 0; } diff --git a/src/components/form/HdPasswordConfirm.vue b/src/components/form/HdPasswordConfirm.vue index af50b724e..8efc809f6 100644 --- a/src/components/form/HdPasswordConfirm.vue +++ b/src/components/form/HdPasswordConfirm.vue @@ -175,7 +175,7 @@ export default { &__strengthMeter { height: 14px; width: 100%; - padding-left: $inline-s; + padding-left: $sp-s; position: absolute; top: 66px; // input height + margin display: flex; diff --git a/src/components/form/HdRadio.vue b/src/components/form/HdRadio.vue index e88671831..6cc6ead29 100644 --- a/src/components/form/HdRadio.vue +++ b/src/components/form/HdRadio.vue @@ -240,7 +240,7 @@ export default { flex-direction: column; > .radio:not(:first-of-type) { - margin-top: $stack-m; + margin-top: $sp-m; margin-left: 0; } } @@ -286,7 +286,7 @@ export default { position: relative; &:not(:first-of-type) { - margin-left: $inline-m; + margin-left: $sp-m; } > input[type="radio"] { @@ -333,7 +333,7 @@ export default { > .radio__label { flex: 1; - padding-left: $inline-s; + padding-left: $sp-s; cursor: pointer; text-align: left; @include font("text-small"); diff --git a/src/components/form/HdRange.vue b/src/components/form/HdRange.vue index 7cc29d344..3ea6a1c20 100644 --- a/src/components/form/HdRange.vue +++ b/src/components/form/HdRange.vue @@ -215,7 +215,7 @@ export default { .range { $range: &; - height: $stack-l; + height: $sp-l; position: relative; display: flex; align-items: center; @@ -225,7 +225,7 @@ export default { } &.hasTooltip { - margin-top: $stack-xl; + margin-top: $sp-xl; } input[type=range] { @@ -347,7 +347,7 @@ export default { &__step-label { position: absolute; - top: #{$stack-l + $stack-s}; + top: #{$sp-l + $sp-s}; transform: translateX(-50%); @include font('text-xsmall'); color: getShade($quaternary-color, 80); @@ -391,7 +391,7 @@ export default { max-height: $range-thumb-inner-bullet-size; max-width: $range-thumb-inner-bullet-size; - border-radius: $inset-m; + border-radius: $sp-m; transition: transform .1s ease-in-out; transform-origin: center center; @@ -424,12 +424,12 @@ export default { &__tooltip { position: absolute; - bottom: $stack-m; + bottom: $sp-m; transform: translateX(-50%); color: $white; background: url('~homeday-blocks/src/assets/tooltip.svg') no-repeat; background-size: 100% 100%; - padding: $stack-s $inline-m #{$stack-m + $stack-s}; + padding: $sp-s $sp-m #{$sp-m + $sp-s}; pointer-events: none; } } diff --git a/src/components/form/HdSplitInput.vue b/src/components/form/HdSplitInput.vue index 699c40b83..b33ec9569 100644 --- a/src/components/form/HdSplitInput.vue +++ b/src/components/form/HdSplitInput.vue @@ -180,7 +180,7 @@ export default { display: flex; align-items: center; justify-content: center; - flex: 0 0 $inline-m; + flex: 0 0 $sp-m; z-index: 1; background-color: $secondary-bg; color: getShade($quaternary-color, 80); @@ -188,7 +188,7 @@ export default { font-weight: 700; &-symbol { - margin-top: $stack-m; + margin-top: $sp-m; } } } diff --git a/src/components/form/HdTagsSelector.vue b/src/components/form/HdTagsSelector.vue index 79c0bb631..c54f6946f 100644 --- a/src/components/form/HdTagsSelector.vue +++ b/src/components/form/HdTagsSelector.vue @@ -195,19 +195,19 @@ export default { .tags-selector { position: relative; - margin-bottom: $stack-m; + margin-bottom: $sp-m; &__selected-tags { display: flex; flex-wrap: wrap; - min-height: #{$stack-l + $stack-s}; + min-height: #{$sp-l + $sp-s}; &__tag { display: flex; align-items: center; - height: $stack-l; + height: $sp-l; background-color: getShade($quaternary-color, 50); border-radius: 3px; - padding: 0 $inline-s; - margin: $stack-s $inline-s 0 0; + padding: 0 $sp-s; + margin: $sp-s $sp-s 0 0; &__remove { display: flex; justify-content: center; @@ -216,7 +216,7 @@ export default { height: 24px; background-color: transparent; padding: 0; - margin-left: $stack-s; + margin-left: $sp-s; border: 0; border-radius: 50%; cursor: pointer; @@ -232,8 +232,8 @@ export default { height: 24px; background: transparent; padding: 0; - margin-top: #{$stack-s + $stack-xs}; - margin-left: $inset-xs; + margin-top: #{$sp-s + $sp-xs}; + margin-left: $sp-xs; border: 0; cursor: pointer; transition: transform $time-s ease-in-out; @@ -254,7 +254,7 @@ export default { max-width: 300px; background-color: $secondary-bg; border-radius: 3px; - padding: $stack-xs; + padding: $sp-xs; box-shadow: 0 2px 4px 0 rgba(0,0,0,0.23); opacity: 0; z-index: 5; @@ -263,8 +263,8 @@ export default { background-color: $primary-bg; border: 1px solid getShade($secondary-color, 110); border-radius: 3px; - padding: 0 $inline-s; - margin: $stack-xs; + padding: 0 $sp-s; + margin: $sp-xs; cursor: pointer; transition: background-color $time-s ease-in-out; &--isSelected { diff --git a/src/components/form/TextFieldBase.vue b/src/components/form/TextFieldBase.vue index 57a92ca11..9ca977f24 100644 --- a/src/components/form/TextFieldBase.vue +++ b/src/components/form/TextFieldBase.vue @@ -122,7 +122,7 @@ export default { border: 0; outline: 0; background: transparent; - padding: $inset-xxs; + padding: $sp-xxs; cursor: pointer; &::before { diff --git a/src/components/gallery/HdGallery.vue b/src/components/gallery/HdGallery.vue index 48f49a995..56b990c20 100644 --- a/src/components/gallery/HdGallery.vue +++ b/src/components/gallery/HdGallery.vue @@ -204,7 +204,7 @@ export default { } &__caption { - margin-bottom: $stack-s; + margin-bottom: $sp-s; } &__main { @@ -217,10 +217,10 @@ export default { &__info { position: absolute; - right: $inline-xs; - bottom: $stack-xs; - padding-right: $inline-s; - padding-left: $inline-s; + right: $sp-xs; + bottom: $sp-xs; + padding-right: $sp-s; + padding-left: $sp-s; background-color: rgba(0, 0, 0, 0.8); @include font('text-xsmall'); font-weight: 600; @@ -280,10 +280,10 @@ export default { &__info { position: absolute; - right: $inline-xs; - bottom: $stack-xs; - padding-right: $inline-s; - padding-left: $inline-s; + right: $sp-xs; + bottom: $sp-xs; + padding-right: $sp-s; + padding-left: $sp-s; background-color: rgba(0, 0, 0, 0.8); @include font('text-xsmall'); font-weight: 600; diff --git a/src/components/gallery/HdGalleryCarousel.vue b/src/components/gallery/HdGalleryCarousel.vue index f4238a973..7caf6187f 100644 --- a/src/components/gallery/HdGalleryCarousel.vue +++ b/src/components/gallery/HdGalleryCarousel.vue @@ -223,7 +223,7 @@ export default { overflow: hidden; @media (min-width: $break-tablet) { - padding: $stack-m 0; + padding: $sp-m 0; } .flickity-viewport { @@ -233,7 +233,7 @@ export default { &__pager { @media (min-width: $break-tablet) { - margin-top: $stack-m; + margin-top: $sp-m; } #{$_root}--with-pager-inside & { @@ -251,7 +251,7 @@ export default { &__item { position: relative; width: 100%; - margin-right: $inline-xs; + margin-right: $sp-xs; cursor: pointer; border-radius: 2px; overflow: hidden; @@ -263,7 +263,7 @@ export default { @media (min-width: $break-tablet) { width: calc(100% / 5); - margin-right: $inline-m; + margin-right: $sp-m; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25); &:hover, @@ -278,7 +278,7 @@ export default { @media (min-width: $break-desktop) { width: calc(100% / 7); - margin-right: $inline-m; + margin-right: $sp-m; } } diff --git a/src/components/gallery/HdGalleryOverlay.vue b/src/components/gallery/HdGalleryOverlay.vue index 1fe5bfecb..86ee360c9 100644 --- a/src/components/gallery/HdGalleryOverlay.vue +++ b/src/components/gallery/HdGalleryOverlay.vue @@ -104,14 +104,14 @@ export default { left: 0; display: flex; z-index: 100; - padding: $stack-m 0; + padding: $sp-m 0; overflow-x: hidden; overflow-y: auto; background-color: rgba(white, .9); animation: fadeIn .5s; @media (min-width: $break-tablet) and (min-height: 800px) { - padding: $inset-xl; + padding: $sp-xl; } &__gallery { @@ -136,8 +136,8 @@ export default { &__close { position: absolute; - top: $stack-s; - right: $inline-s; + top: $sp-s; + right: $sp-s; width: 24px; height: 24px; background: transparent; diff --git a/src/components/gallery/HdGalleryPlaceholder.vue b/src/components/gallery/HdGalleryPlaceholder.vue index 28731653d..6f218ad28 100644 --- a/src/components/gallery/HdGalleryPlaceholder.vue +++ b/src/components/gallery/HdGalleryPlaceholder.vue @@ -48,7 +48,7 @@ export default { .gallery-placeholder { position: relative; - margin-bottom: $stack-s; + margin-bottom: $sp-s; background-color: $secondary-bg; &__content { position: absolute; @@ -67,9 +67,9 @@ export default { } } &-text { - margin-top: $stack-xs; + margin-top: $sp-xs; @media (min-width: $break-tablet) { - margin-top: $stack-l; + margin-top: $sp-l; } } } diff --git a/src/components/gallery/HdGalleryTiles.vue b/src/components/gallery/HdGalleryTiles.vue index ef9660572..5db1aba16 100644 --- a/src/components/gallery/HdGalleryTiles.vue +++ b/src/components/gallery/HdGalleryTiles.vue @@ -74,7 +74,7 @@ export default { &__container { display: -ms-grid; display: grid; - grid-gap: $inset-s; + grid-gap: $sp-s; -ms-grid-columns: 1fr 1fr 1fr; -ms-grid-rows: 1fr 1fr; grid-template-columns: repeat(3, 1fr); @@ -110,7 +110,7 @@ export default { } @include only-ie { - margin: $inset-xs; + margin: $sp-xs; } &:nth-child(1) { @@ -251,10 +251,10 @@ export default { &__more-photos { position: absolute; - bottom: $stack-m; - right: $inline-m; + bottom: $sp-m; + right: $sp-m; background-color: $primary-bg; - padding: $inset-s; + padding: $sp-s; @include font('text-xsmall'); font-weight: bold; border: 0; @@ -265,7 +265,7 @@ export default { cursor: pointer; @media (min-width: $break-tablet) { - right: $inline-l; + right: $sp-l; } @media (min-width: $break-desktop) { display: none; diff --git a/src/components/gallery/HdZoomerGallery.vue b/src/components/gallery/HdZoomerGallery.vue index e6cb05198..61f22d384 100644 --- a/src/components/gallery/HdZoomerGallery.vue +++ b/src/components/gallery/HdZoomerGallery.vue @@ -78,8 +78,8 @@ export default { } &__caption { - margin-bottom: $stack-s; - margin-left: $inline-m; + margin-bottom: $sp-s; + margin-left: $sp-m; transition: opacity .5s ease-in-out; #{$_root}.isZoomed & { @@ -89,10 +89,10 @@ export default { &__info { position: absolute; - right: $inline-m; - bottom: $stack-xs; - padding-right: $inline-s; - padding-left: $inline-s; + right: $sp-m; + bottom: $sp-xs; + padding-right: $sp-s; + padding-left: $sp-s; background-color: rgba(0, 0, 0, 0.8); @include font('text-xsmall'); font-weight: 600; diff --git a/src/components/notifications/HdNotification.vue b/src/components/notifications/HdNotification.vue index 31c663d1f..a88ed2d41 100644 --- a/src/components/notifications/HdNotification.vue +++ b/src/components/notifications/HdNotification.vue @@ -75,7 +75,7 @@ export default { .notification { display: flex; - padding: $stack-m $inline-s; + padding: $sp-m $sp-s; color: $white; &--notification { @@ -97,7 +97,7 @@ export default { &__icon { width: 24px; height: 24px; - margin-right: $inline-s; + margin-right: $sp-s; path { fill: currentColor; diff --git a/src/stories/Elevation.vue b/src/stories/Elevation.vue index c5683a691..ef1493bb2 100644 --- a/src/stories/Elevation.vue +++ b/src/stories/Elevation.vue @@ -67,7 +67,7 @@ export default { } > h3 { @include font('title'); - margin-top: $stack-l; + margin-top: $sp-l; } &__code { @@ -82,8 +82,8 @@ export default { .elevated-blocks { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); - gap: $inset-xl; - padding: $inset-l; + gap: $sp-xl; + padding: $sp-l; } .elevated-block { diff --git a/src/stories/Spacing.vue b/src/stories/Spacing.vue index aeb67d3e9..740b76abe 100644 --- a/src/stories/Spacing.vue +++ b/src/stories/Spacing.vue @@ -1,24 +1,49 @@ @@ -34,14 +59,9 @@ export default { }, data() { return { - codeExample: `// use inset for uniform vertical and horizontal spacing (top, right,bottom, left) -padding: $inset-s; + codeExample: `padding: $sp-s $sp-l; -// use stack for vertical spacing (top, bottom) -padding-left: $inline-s; - -// use inline for horizontal spacing (left, right) -padding-top: $stack-s;`, +margin-bottom: $sp-xl;`, }; }, }; @@ -54,29 +74,41 @@ padding-top: $stack-s;`, margin-right: auto; margin-left: auto; - > h1 { - @include font('headline'); - } - > h3 { - @include font('title'); - margin-top: $stack-l; + h3 { + margin-top: $sp-l; } - > p { - margin-top: $stack-m; + h1, h3 { + font-weight: 900; } - ul { - margin-left: $inline-m; - list-style: inside; - list-style-type: disc; + p { + margin-top: $sp-m; } &__code { - font-size: 14px; + @include font('DS-100'); + ::v-deep pre { background-color: $secondary-bg; } } } + +.spacing-table { + margin-top: $sp-m; + + th, td { + padding: $sp-s $sp-l; + } + + th, td, tr { + border: 1px solid $quaternary-color; + } + + th, td:nth-child(1) { + text-align: center; + font-weight: 600; + } +} diff --git a/src/stories/Welcome.vue b/src/stories/Welcome.vue index fadb429d0..1a57ef2ab 100644 --- a/src/stories/Welcome.vue +++ b/src/stories/Welcome.vue @@ -57,8 +57,8 @@ export default { @import "~vue-code-highlight/themes/prism.css"; .welcome { - padding-top: $stack-m; - padding-bottom: $stack-l; + padding-top: $sp-m; + padding-bottom: $sp-l; &__title { display: inline-block; @@ -67,8 +67,8 @@ export default { line-height: 80px; font-weight: 900; color: $primary-color; - margin-top: $stack-m; - margin-bottom: $stack-m; + margin-top: $sp-m; + margin-bottom: $sp-m; &::before { content: ''; @@ -85,11 +85,11 @@ export default { &__subtitle { @include font('title'); - margin-top: $stack-l; + margin-top: $sp-l; } &__paragraph { - margin-top: $stack-m; + margin-top: $sp-m; } &__code { diff --git a/src/styles/_deprecated_spacing.scss b/src/styles/_deprecated_spacing.scss new file mode 100644 index 000000000..0aaa23de0 --- /dev/null +++ b/src/styles/_deprecated_spacing.scss @@ -0,0 +1,23 @@ +// INSET = margin or padding applied top, right, bottom and left, [vertically and horizontaly] +$inset-xxs: $sp-xxs; +$inset-xs: $sp-xs; +$inset-s: $sp-s; +$inset-m: $sp-m; +$inset-l: $sp-l; +$inset-xl: $sp-xl; + +// STACK = margin or padding applied top and bottom, [vertically] +$stack-xxs: $sp-xxs; +$stack-xs: $sp-xs; +$stack-s: $sp-s; +$stack-m: $sp-m; +$stack-l: $sp-l; +$stack-xl: $sp-xl; + +// INLINE = margin or padding applied left and right, [horizontally] +$inline-xxs: $sp-xxs; +$inline-xs: $sp-xs; +$inline-s: $sp-s; +$inline-m: $sp-m; +$inline-l: $sp-l; +$inline-xl: $sp-xl; \ No newline at end of file diff --git a/src/styles/_spacing.scss b/src/styles/_spacing.scss new file mode 100644 index 000000000..335a861e5 --- /dev/null +++ b/src/styles/_spacing.scss @@ -0,0 +1,13 @@ +$standards: (xxs, 2px), +(xs, 4px), +(s, 8px), +(m, 16px), +(l, 32px), +(xl, 64px); + +$sp-xxs: nth(nth($standards, 1), 2); +$sp-xs: nth(nth($standards, 2), 2); +$sp-s: nth(nth($standards, 3), 2); +$sp-m: nth(nth($standards, 4), 2); +$sp-l: nth(nth($standards, 5), 2); +$sp-xl: nth(nth($standards, 6), 2); \ No newline at end of file diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index 88d021663..75f8ef149 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -1,4 +1,6 @@ @import './colors'; +@import './spacing'; +@import './deprecated_spacing'; $default-border-radius: 2px; @@ -6,38 +8,6 @@ $default-border-radius: 2px; $font-primary: 'Source Sans Pro', sans-serif; $font-secondary: 'Charter', serif; -/* SPACING */ -$standards: (xxs, 2px), -(xs, 4px), -(s, 8px), -(m, 16px), -(l, 32px), -(xl, 64px); - -// INSET = margin or padding applied top, right, bottom and left, [vertically and horizontaly] -$inset-xxs: nth(nth($standards, 1), 2); -$inset-xs: nth(nth($standards, 2), 2); -$inset-s: nth(nth($standards, 3), 2); -$inset-m: nth(nth($standards, 4), 2); -$inset-l: nth(nth($standards, 5), 2); -$inset-xl: nth(nth($standards, 6), 2); - -// STACK = margin or padding applied top and bottom, [vertically] -$stack-xxs: nth(nth($standards, 1), 2); -$stack-xs: nth(nth($standards, 2), 2); -$stack-s: nth(nth($standards, 3), 2); -$stack-m: nth(nth($standards, 4), 2); -$stack-l: nth(nth($standards, 5), 2); -$stack-xl: nth(nth($standards, 6), 2); - -// INLINE = margin or padding applied left and right, [horizontally] -$inline-xxs: nth(nth($standards, 1), 2); -$inline-xs: nth(nth($standards, 2), 2); -$inline-s: nth(nth($standards, 3), 2); -$inline-m: nth(nth($standards, 4), 2); -$inline-l: nth(nth($standards, 5), 2); -$inline-xl: nth(nth($standards, 6), 2); - /* WIDTH */ $max-width: 1152px; $max-width-paragraph-mobile: 100%; @@ -55,10 +25,10 @@ $break-desktop-wide: 1440px !default; $time-s: 150ms; /* RANGE INPUT */ -$range-height: $stack-l; +$range-height: $sp-l; $shadow: 0 2px 4px 0 rgba(0,0,0,0.25); -$range-thumb-size: $inset-l; -$range-thumb-height: $inset-l; +$range-thumb-size: $sp-l; +$range-thumb-height: $sp-l; $range-bar-height: 6px; $range-thumb-border: 2px; $activeColor: getShade($secondary-color, 110); diff --git a/src/styles/buttons.scss b/src/styles/buttons.scss index 2639babb6..943be22e9 100644 --- a/src/styles/buttons.scss +++ b/src/styles/buttons.scss @@ -43,7 +43,7 @@ $button-transition: all $time-s ease-in-out; align-items: center; justify-content: center; margin: 0; - padding: $stack-s $inline-l; + padding: $sp-s $sp-l; border: 0; border-radius: 2px; outline: 0; @@ -304,10 +304,10 @@ $button-transition: all $time-s ease-in-out; .btn--flat--compact { font-size: 21px; line-height: 33px; - padding: $inset-xs; + padding: $sp-xs; &:after { - width: calc(100% - #{2 * $inset-xs}); + width: calc(100% - #{2 * $sp-xs}); } } @@ -325,7 +325,7 @@ $button-transition: all $time-s ease-in-out; .btn--ghost { font-size: 16px; - padding: 0 $inline-m; + padding: 0 $sp-m; color: getShade($secondary-color, 110); transition: $button-transition; height: 52px; diff --git a/src/styles/main.scss b/src/styles/main.scss index 35ae33ecd..ef33e4c53 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -4,6 +4,7 @@ @import './_variables'; @warn "Please use the new DS typography, the old one will be removed in the next major release. You can read more about it on https://bit.ly/3adOqgw. Ignore this warning if already done."; +@warn "Please use the new spacing variables, the old variables will be removed in the next major release. You can read more about it on https://bit.ly/2NZkZWS. Ignore this warning if already done."; * { box-sizing: border-box;