From 3aa096c66b196217ca6186b30bc2d33ce8c66c2d Mon Sep 17 00:00:00 2001 From: Florian Wendelborn <1133858+FlorianWendelborn@users.noreply.github.com> Date: Sat, 11 Sep 2021 01:45:46 +0200 Subject: [PATCH 1/2] documentation(units): Add CSS Custom Properties, Mark SCSS as Deprecated, Rename Unit-O to Unit-Q --- .../documentation/pages/foundations/units.vue | 23 +++++++++++++------ .../source/kotti-style/_variables.scss | 4 ++-- .../kotti-ui/source/kotti-style/spacing.css | 2 +- 3 files changed, 19 insertions(+), 10 deletions(-) diff --git a/packages/documentation/pages/foundations/units.vue b/packages/documentation/pages/foundations/units.vue index 1889c08def..ab22496a5e 100644 --- a/packages/documentation/pages/foundations/units.vue +++ b/packages/documentation/pages/foundations/units.vue @@ -5,13 +5,22 @@ Our metric is based on multiples of `4px`. We call this 1 _unit_. -| Unit | Scss Variable | rem | px | -| -------: | ------------: | -------: | -----: | -| 1 _unit_ | `$unit-1` | `0.2rem` | `4px` | -| 2 _unit_ | `$unit-2` | `0.4rem` | `8px` | -| 4 _unit_ | `$unit-4` | `0.8rem` | `16px` | -| 6 _unit_ | `$unit-6` | `1.2rem` | `24px` | -| 8 _unit_ | `$unit-8` | `1.6rem` | `32px` | +| Unit | CSS Custom Property | rem | px | SCSS (deprecated) | +| -------------: | ------------------: | --------: | -----: | ----------------: | +| 1 _unit_ | `var(--unit-1)` | `0.2rem` | `4px` | ~~`$unit-1`~~ | +| 2 _unit_ | `var(--unit-2)` | `0.4rem` | `8px` | ~~`$unit-2`~~ | +| 3 _unit_ | `var(--unit-3)` | `0.6rem` | `12px` | ~~`$unit-3`~~ | +| 4 _unit_ | `var(--unit-4)` | `0.8rem` | `16px` | ~~`$unit-4`~~ | +| 5 _unit_ | `var(--unit-5)` | `1rem` | `20px` | ~~`$unit-5`~~ | +| 6 _unit_ | `var(--unit-6)` | `1.2rem` | `24px` | ~~`$unit-6`~~ | +| 7 _unit_ | `var(--unit-7)` | `1.4rem` | `28px` | ~~`$unit-7`~~ | +| 8 _unit_ | `var(--unit-8)` | `1.6rem` | `32px` | ~~`$unit-8`~~ | +| 9 _unit_ | `var(--unit-9)` | `1.8rem` | `36px` | ~~`$unit-9`~~ | +| 10 _unit_ | `var(--unit-10)` | `2rem` | `40px` | ~~`$unit-10`~~ | +| 12 _unit_ | `var(--unit-12)` | `2.4rem` | `48px` | ~~`$unit-12`~~ | +| 16 _unit_ | `var(--unit-16)` | `3.2rem` | `64px` | ~~`$unit-16`~~ | +| quarter _unit_ | `var(--unit-q)` | `0.05rem` | `1px` | ~~`$unit-q`~~ | +| half _unit_ | `var(--unit-h)` | `0.1rem` | `2px` | ~~`$unit-h`~~ | ### Padding and Margin diff --git a/packages/kotti-ui/source/kotti-style/_variables.scss b/packages/kotti-ui/source/kotti-style/_variables.scss index 06d51c3a7e..2d30aee93b 100644 --- a/packages/kotti-ui/source/kotti-style/_variables.scss +++ b/packages/kotti-ui/source/kotti-style/_variables.scss @@ -62,7 +62,7 @@ $cjk-ko-font-family: $base-font-family, 'Malgun Gothic', $fallback-font-family ! $body-font-family: $base-font-family, $fallback-font-family !default; // Unit sizes -$unit-o: 0.05rem !default; +$unit-q: 0.05rem !default; $unit-h: 0.1rem !default; $unit-1: 0.2rem !default; $unit-2: 0.4rem !default; @@ -90,7 +90,7 @@ $layout-spacing: $unit-2 !default; $layout-spacing-sm: $unit-1 !default; $layout-spacing-lg: $unit-4 !default; $border-radius: $unit-1 !default; -$border-width: $unit-o !default; +$border-width: $unit-q !default; $border-width-lg: $unit-h !default; $control-size: $unit-8 !default; $control-size-sm: $unit-7 !default; diff --git a/packages/kotti-ui/source/kotti-style/spacing.css b/packages/kotti-ui/source/kotti-style/spacing.css index d5f7093dd1..35916b03f7 100644 --- a/packages/kotti-ui/source/kotti-style/spacing.css +++ b/packages/kotti-ui/source/kotti-style/spacing.css @@ -1,6 +1,6 @@ :root { /* spacing */ - --unit-o: 0.05rem; + --unit-q: 0.05rem; --unit-h: 0.1rem; --unit-1: 0.2rem; --unit-2: 0.4rem; From 34cc7dff09210c00fc0ce559f5df70795edaea7c Mon Sep 17 00:00:00 2001 From: Florian Wendelborn <1133858+FlorianWendelborn@users.noreply.github.com> Date: Sat, 11 Sep 2021 02:06:16 +0200 Subject: [PATCH 2/2] refactor(css): Replace $unit-* with var(--unit-*) --- .../pages/usage/components/form.vue | 2 +- .../pages/usage/styles/form-fields.scss | 2 +- .../source/kotti-actionbar/KtActionbar.vue | 10 ++--- .../kotti-button-group/KtButtonGroup.vue | 4 +- .../kotti-ui/source/kotti-button/KtButton.vue | 6 +-- .../kotti-ui/source/kotti-drawer/KtDrawer.vue | 10 ++--- .../KtDropdownButton.vue | 17 ++++----- .../components/FilterActions.vue | 4 +- .../kotti-filters/components/FilterList.vue | 2 +- .../kotti-filters/components/FilterRow.vue | 4 +- .../kotti-filters/components/FilterSearch.vue | 4 +- .../kotti-ui/source/kotti-input/KtInput.vue | 4 +- .../kotti-ui/source/kotti-modal/KtModal.vue | 4 +- .../source/kotti-pagination/KtPagination.vue | 6 +-- .../source/kotti-popover/KtPopover.vue | 9 +++-- .../source/kotti-popover/KtPopoverItem.vue | 8 ++-- .../kotti-ui/source/kotti-style/_cards.scss | 10 ++--- .../kotti-ui/source/kotti-style/_codes.scss | 8 ++-- .../source/kotti-style/_comments.scss | 4 +- .../source/kotti-style/_loadings.scss | 28 +++++++------- .../kotti-ui/source/kotti-style/_tables.scss | 10 ++--- .../source/kotti-style/_typography.scss | 10 ++--- .../source/kotti-style/_workspace.scss | 4 +- .../source/kotti-style/forms/_base.scss | 2 +- .../source/kotti-style/forms/_input.scss | 4 +- .../source/kotti-style/forms/_label.scss | 8 ++-- .../kotti-style/utilities/_position.scss | 38 +++++++++---------- 27 files changed, 108 insertions(+), 114 deletions(-) diff --git a/packages/documentation/pages/usage/components/form.vue b/packages/documentation/pages/usage/components/form.vue index a9236eebb0..440b803a4d 100644 --- a/packages/documentation/pages/usage/components/form.vue +++ b/packages/documentation/pages/usage/components/form.vue @@ -444,7 +444,7 @@ h3 { margin-bottom: 1.5em; background-color: var(--ui-01); border: 1px solid var(--ui-02); - border-radius: $border-radius; + border-radius: var(--border-radius); > * { flex: 1; diff --git a/packages/documentation/pages/usage/styles/form-fields.scss b/packages/documentation/pages/usage/styles/form-fields.scss index d9effc12da..22162a8edb 100644 --- a/packages/documentation/pages/usage/styles/form-fields.scss +++ b/packages/documentation/pages/usage/styles/form-fields.scss @@ -19,7 +19,7 @@ h3 { margin-bottom: 1.5em; background-color: var(--ui-01); border: 1px solid var(--ui-02); - border-radius: $border-radius; + border-radius: var(--border-radius); @media (max-width: #{$size-lg - 1px}) { flex-direction: column; diff --git a/packages/kotti-ui/source/kotti-actionbar/KtActionbar.vue b/packages/kotti-ui/source/kotti-actionbar/KtActionbar.vue index af53254d5f..ad590bde5f 100644 --- a/packages/kotti-ui/source/kotti-actionbar/KtActionbar.vue +++ b/packages/kotti-ui/source/kotti-actionbar/KtActionbar.vue @@ -57,7 +57,7 @@ export default { flex-direction: column; width: var(--action-bar-width); height: 100%; - padding: $unit-6; + padding: var(--unit-6); overflow-y: auto; } @@ -85,11 +85,11 @@ export default { color: var(--action-bar-color-active); } .actionbar-nav { - margin: 0 -$unit-2; + margin: 0 calc(-1 * var(--unit-2)); } .actionbar-nav__item { - padding: $unit-2; - margin: $unit-2 0; + padding: var(--unit-2); + margin: var(--unit-2) 0; font-size: 0.75rem; color: $darkgray-500; list-style: none; @@ -140,7 +140,7 @@ export default { } li { - padding: $unit-2 0; + padding: var(--unit-2) 0; font-size: 0.75rem; color: $darkgray-500; list-style: none; diff --git a/packages/kotti-ui/source/kotti-button-group/KtButtonGroup.vue b/packages/kotti-ui/source/kotti-button-group/KtButtonGroup.vue index 3fb4072db0..e9f1c72577 100755 --- a/packages/kotti-ui/source/kotti-button-group/KtButtonGroup.vue +++ b/packages/kotti-ui/source/kotti-button-group/KtButtonGroup.vue @@ -25,11 +25,11 @@ export default defineComponent({ border-radius: 0; &:first-of-type { - border-radius: $border-radius 0 0 $border-radius; + border-radius: var(--border-radius) 0 0 var(--border-radius); } &:last-of-type { - border-radius: 0 $border-radius $border-radius 0; + border-radius: 0 var(--border-radius) var(--border-radius) 0; } } } diff --git a/packages/kotti-ui/source/kotti-button/KtButton.vue b/packages/kotti-ui/source/kotti-button/KtButton.vue index 0ccd5e2d83..36702a4af4 100755 --- a/packages/kotti-ui/source/kotti-button/KtButton.vue +++ b/packages/kotti-ui/source/kotti-button/KtButton.vue @@ -64,8 +64,6 @@ export default defineComponent({ diff --git a/packages/kotti-ui/source/kotti-filters/components/FilterList.vue b/packages/kotti-ui/source/kotti-filters/components/FilterList.vue index e32265a9a4..92ead22e3e 100644 --- a/packages/kotti-ui/source/kotti-filters/components/FilterList.vue +++ b/packages/kotti-ui/source/kotti-filters/components/FilterList.vue @@ -146,7 +146,7 @@ export default defineComponent<{ display: grid; grid-template-rows: auto; grid-template-columns: max-content repeat(3, 1fr) max-content; - grid-gap: $unit-1; + grid-gap: var(--unit-1); width: 50vw; diff --git a/packages/kotti-ui/source/kotti-filters/components/FilterRow.vue b/packages/kotti-ui/source/kotti-filters/components/FilterRow.vue index 96b9de2895..2dbc0f97d6 100644 --- a/packages/kotti-ui/source/kotti-filters/components/FilterRow.vue +++ b/packages/kotti-ui/source/kotti-filters/components/FilterRow.vue @@ -204,7 +204,7 @@ export default defineComponent<{ @media (max-width: $size-md) { display: unset; > * { - padding-bottom: $unit-1; + padding-bottom: var(--unit-1); } } } @@ -220,7 +220,7 @@ export default defineComponent<{ display: flex; align-items: center; - min-height: $unit-8; + min-height: var(--unit-8); } } diff --git a/packages/kotti-ui/source/kotti-filters/components/FilterSearch.vue b/packages/kotti-ui/source/kotti-filters/components/FilterSearch.vue index 2afe6b6f72..3e89abdead 100644 --- a/packages/kotti-ui/source/kotti-filters/components/FilterSearch.vue +++ b/packages/kotti-ui/source/kotti-filters/components/FilterSearch.vue @@ -71,10 +71,8 @@ export default defineComponent<{ diff --git a/packages/kotti-ui/source/kotti-input/KtInput.vue b/packages/kotti-ui/source/kotti-input/KtInput.vue index 4a3bff21df..01aa9ab969 100644 --- a/packages/kotti-ui/source/kotti-input/KtInput.vue +++ b/packages/kotti-ui/source/kotti-input/KtInput.vue @@ -152,11 +152,11 @@ export default { position: relative; width: 100%; height: $control-size; - padding: 0 $unit-2; + padding: 0 var(--unit-2); line-height: $line-height; color: var(--text-01); border: 1px solid var(--ui-02); - border-radius: $border-radius; + border-radius: var(--border-radius); outline: none; -webkit-appearance: none; diff --git a/packages/kotti-ui/source/kotti-modal/KtModal.vue b/packages/kotti-ui/source/kotti-modal/KtModal.vue index e561b7a4ed..991856c3fa 100644 --- a/packages/kotti-ui/source/kotti-modal/KtModal.vue +++ b/packages/kotti-ui/source/kotti-modal/KtModal.vue @@ -74,10 +74,10 @@ export default defineComponent({ width: 90%; max-height: 90%; - padding: $unit-4; + padding: var(--unit-4); background-color: #fff; - border-radius: $border-radius; + border-radius: var(--border-radius); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33); transition: all 0.3s ease; diff --git a/packages/kotti-ui/source/kotti-pagination/KtPagination.vue b/packages/kotti-ui/source/kotti-pagination/KtPagination.vue index 80d4f71173..51f04f778e 100644 --- a/packages/kotti-ui/source/kotti-pagination/KtPagination.vue +++ b/packages/kotti-ui/source/kotti-pagination/KtPagination.vue @@ -128,9 +128,9 @@ export default { user-select: none; .page-button { display: inline-block; - padding: $unit-1; + padding: var(--unit-1); background: $lightgray-300; - border-radius: $border-radius; + border-radius: var(--border-radius); &:hover { cursor: pointer; background: $lightgray-400; @@ -141,7 +141,7 @@ export default { } .page-item { display: inline-block; - padding: $unit-2; + padding: var(--unit-2); line-height: 24px; text-align: center; &--active { diff --git a/packages/kotti-ui/source/kotti-popover/KtPopover.vue b/packages/kotti-ui/source/kotti-popover/KtPopover.vue index 8969e72d03..f74536cfb1 100644 --- a/packages/kotti-ui/source/kotti-popover/KtPopover.vue +++ b/packages/kotti-ui/source/kotti-popover/KtPopover.vue @@ -162,18 +162,19 @@ export default { @import '../kotti-style/_variables.scss'; .kt-popover { display: inline-block; + &-item { - padding: $unit-4; - margin: -$unit-1; + padding: var(--unit-4); + margin: calc(-1 * var(--unit-1)); } } -// poper.js css +// popper.js css .kt-popper { z-index: $zindex-4; padding: 0.8rem; background: var(--white); - border-radius: $border-radius; + border-radius: var(--border-radius); box-shadow: $box-shadow; &--has-options { diff --git a/packages/kotti-ui/source/kotti-popover/KtPopoverItem.vue b/packages/kotti-ui/source/kotti-popover/KtPopoverItem.vue index 618d7f9cdc..a3bb4079f1 100644 --- a/packages/kotti-ui/source/kotti-popover/KtPopoverItem.vue +++ b/packages/kotti-ui/source/kotti-popover/KtPopoverItem.vue @@ -21,17 +21,17 @@ export default { @import '../kotti-style/_variables.scss'; .kt-popover-item { display: flex; - padding: $unit-2; - margin: $unit-h; + padding: var(--unit-2); + margin: var(--unit-h); line-height: 20px; &:hover { cursor: pointer; background: $lightgray-300; - border-radius: $border-radius; + border-radius: var(--border-radius); } .yoco { align-self: center; - padding-right: $unit-1; + padding-right: var(--unit-1); font-size: 20px; } } diff --git a/packages/kotti-ui/source/kotti-style/_cards.scss b/packages/kotti-ui/source/kotti-style/_cards.scss index d776b5019d..aca38a25a1 100644 --- a/packages/kotti-ui/source/kotti-style/_cards.scss +++ b/packages/kotti-ui/source/kotti-style/_cards.scss @@ -4,7 +4,7 @@ flex-direction: column; background: #fff; border: $border-width solid $border-color; - border-radius: $border-radius; + border-radius: var(--border-radius); .card-header { h1, @@ -40,14 +40,14 @@ padding-top: 0; img { - border-top-left-radius: $border-radius; - border-top-right-radius: $border-radius; + border-top-left-radius: var(--border-radius); + border-top-right-radius: var(--border-radius); } } &:last-child img { - border-bottom-right-radius: $border-radius; - border-bottom-left-radius: $border-radius; + border-bottom-right-radius: var(--border-radius); + border-bottom-left-radius: var(--border-radius); } } } diff --git a/packages/kotti-ui/source/kotti-style/_codes.scss b/packages/kotti-ui/source/kotti-style/_codes.scss index 9be86b58b0..87bcee6388 100644 --- a/packages/kotti-ui/source/kotti-style/_codes.scss +++ b/packages/kotti-ui/source/kotti-style/_codes.scss @@ -2,7 +2,7 @@ @mixin code-base() { line-height: 1.5; background: $lightgray-300; - border-radius: $border-radius; + border-radius: var(--border-radius); } pre { @@ -18,16 +18,16 @@ pre { code { @include code-base(); position: relative; - padding: $unit-h; + padding: var(--unit-h); font-size: 85%; color: $body-font-color; background: $lightgray-300; - border-radius: $border-radius; + border-radius: var(--border-radius); &::before { position: absolute; - top: $unit-h; + top: var(--unit-h); right: $layout-spacing; font-size: $font-size-sm; color: $lightgray-300; diff --git a/packages/kotti-ui/source/kotti-style/_comments.scss b/packages/kotti-ui/source/kotti-style/_comments.scss index 197b374a44..37f08a0126 100644 --- a/packages/kotti-ui/source/kotti-style/_comments.scss +++ b/packages/kotti-ui/source/kotti-style/_comments.scss @@ -78,7 +78,7 @@ line-height: 1.4rem; text-align: left; background: #ffffff; - border-radius: $border-radius; + border-radius: var(--border-radius); box-shadow: $box-shadow; li { padding: 0.2rem 1rem; @@ -189,7 +189,7 @@ padding: 0.4rem; background: #fff; border: 1px solid #dbdbdb; - border-radius: $border-radius; + border-radius: var(--border-radius); &--focus { border: 1px solid #bbb; } diff --git a/packages/kotti-ui/source/kotti-style/_loadings.scss b/packages/kotti-ui/source/kotti-style/_loadings.scss index ca6c3639ec..9bea7aa46c 100644 --- a/packages/kotti-ui/source/kotti-style/_loadings.scss +++ b/packages/kotti-ui/source/kotti-style/_loadings.scss @@ -71,9 +71,9 @@ .kt-circle-loading { display: inline-block; - width: $unit-4; - height: $unit-4; - margin-right: $unit-1; + width: var(--unit-4); + height: var(--unit-4); + margin-right: var(--unit-1); pointer-events: none; border: $border-width-lg solid var(--loading-color); border-top-color: transparent; @@ -84,7 +84,7 @@ .loading { position: relative; - min-height: $unit-4; + min-height: var(--unit-4); color: transparent !important; pointer-events: none; @@ -94,10 +94,10 @@ left: 50%; z-index: $zindex-0; display: block; - width: $unit-4; - height: $unit-4; - margin-top: -$unit-2; - margin-left: -$unit-2; + width: var(--unit-4); + height: var(--unit-4); + margin-top: calc(-1 * var(--unit-2)); + margin-left: calc(-1 * var(--unit-2)); content: ''; border: $border-width-lg solid var(--loading-color); border-top-color: transparent; @@ -108,7 +108,7 @@ &.inline { display: inline-block; - margin: 0 $unit-2; + margin: 0 var(--unit-2); &::after { position: relative; @@ -120,13 +120,13 @@ } &.lg { - min-height: $unit-10; + min-height: var(--unit-10); &::after { - width: $unit-8; - height: $unit-8; - margin-top: -$unit-4; - margin-left: -$unit-4; + width: var(--unit-8); + height: var(--unit-8); + margin-top: calc(-1 * var(--unit-4)); + margin-left: calc(-1 * var(--unit-4)); } } diff --git a/packages/kotti-ui/source/kotti-style/_tables.scss b/packages/kotti-ui/source/kotti-style/_tables.scss index c5ed608d93..bdd78e8028 100644 --- a/packages/kotti-ui/source/kotti-style/_tables.scss +++ b/packages/kotti-ui/source/kotti-style/_tables.scss @@ -13,7 +13,7 @@ table { border-collapse: collapse; th { - padding: $unit-2 $unit-1; + padding: var(--unit-2) var(--unit-1); font-size: $font-size-sm; line-height: 1em; color: $lightgray-500; @@ -44,7 +44,7 @@ table { td { position: relative; - padding: $unit-2 $unit-1; + padding: var(--unit-2) var(--unit-1); line-height: 1.2rem; border-bottom: 1px solid #dbdbdb; @@ -77,11 +77,11 @@ table { font-size: 0.8rem; line-height: 0.8rem; border: 0; - border-radius: $border-radius; + border-radius: var(--border-radius); box-shadow: 0 0 1px #999; i { - margin: 0 $unit-1; + margin: 0 var(--unit-1); color: $lightgray-500; &:hover { @@ -110,7 +110,7 @@ table { line-height: 1.2rem; .form-icon { - border-radius: $border-radius; + border-radius: var(--border-radius); } input { diff --git a/packages/kotti-ui/source/kotti-style/_typography.scss b/packages/kotti-ui/source/kotti-style/_typography.scss index bcedc033e5..702ac2b652 100644 --- a/packages/kotti-ui/source/kotti-style/_typography.scss +++ b/packages/kotti-ui/source/kotti-style/_typography.scss @@ -33,7 +33,7 @@ h2, h3, .h3 { - padding-bottom: $unit-2; + padding-bottom: var(--unit-2); font-size: 0.8rem; border-bottom: 1px solid var(--ui-02); } @@ -69,14 +69,14 @@ abbr[title] { ul, ol { padding: 0; - margin: $unit-4 0 $unit-4 $unit-4; + margin: var(--unit-4) 0 var(--unit-4) var(--unit-4); ul, ol { - margin: $unit-4 0 $unit-4 $unit-4; + margin: var(--unit-4) 0 var(--unit-4) var(--unit-4); } li { - margin-top: $unit-2; + margin-top: var(--unit-2); } } @@ -86,7 +86,7 @@ dl { } dd { - margin: $unit-2 0 $unit-4 0; + margin: var(--unit-2) 0 var(--unit-4) 0; } } diff --git a/packages/kotti-ui/source/kotti-style/_workspace.scss b/packages/kotti-ui/source/kotti-style/_workspace.scss index 5a0ddd6931..6efb96b14c 100644 --- a/packages/kotti-ui/source/kotti-style/_workspace.scss +++ b/packages/kotti-ui/source/kotti-style/_workspace.scss @@ -5,11 +5,11 @@ flex: 1 1 100%; flex-direction: column; min-height: 100vh; - padding: $unit-6; + padding: var(--unit-6); background: #ffffff; box-shadow: 1px 0 2px #ddd; h3:not(:first-of-type) { - margin-top: $unit-8; + margin-top: var(--unit-8); } } diff --git a/packages/kotti-ui/source/kotti-style/forms/_base.scss b/packages/kotti-ui/source/kotti-style/forms/_base.scss index 1716be2d98..d6ad241480 100644 --- a/packages/kotti-ui/source/kotti-style/forms/_base.scss +++ b/packages/kotti-ui/source/kotti-style/forms/_base.scss @@ -12,5 +12,5 @@ fieldset { .form-textarea, textarea { box-sizing: border-box; - padding: $unit-2; + padding: var(--unit-2); } diff --git a/packages/kotti-ui/source/kotti-style/forms/_input.scss b/packages/kotti-ui/source/kotti-style/forms/_input.scss index d7755272f0..356dda8965 100644 --- a/packages/kotti-ui/source/kotti-style/forms/_input.scss +++ b/packages/kotti-ui/source/kotti-style/forms/_input.scss @@ -44,7 +44,7 @@ textarea.form-input { height: auto; - padding: $unit-2; + padding: var(--unit-2); } // Form element: Input groups @@ -58,7 +58,7 @@ textarea.form-input { white-space: nowrap; background: $lightgray-300; border: $border-width solid #dbdbdb; - border-radius: $border-radius; + border-radius: var(--border-radius); &.addon-sm { padding: $control-padding-y-sm $control-padding-x-sm; diff --git a/packages/kotti-ui/source/kotti-style/forms/_label.scss b/packages/kotti-ui/source/kotti-style/forms/_label.scss index 86c3b6f533..8316f84fe0 100644 --- a/packages/kotti-ui/source/kotti-style/forms/_label.scss +++ b/packages/kotti-ui/source/kotti-style/forms/_label.scss @@ -6,19 +6,19 @@ padding: 0; font-size: $font-size-sm; font-weight: 700; - line-height: $unit-6; + line-height: var(--unit-6); color: $lightgray-500; i { - font-size: $unit-4; - line-height: $unit-4; + font-size: var(--unit-4); + line-height: var(--unit-4); } } .form-label--compact { position: absolute; top: 0; - left: $unit-2; + left: var(--unit-2); z-index: 1; font-size: 0.7rem; font-weight: 500; diff --git a/packages/kotti-ui/source/kotti-style/utilities/_position.scss b/packages/kotti-ui/source/kotti-style/utilities/_position.scss index c8e9ff8664..601a982c49 100644 --- a/packages/kotti-ui/source/kotti-style/utilities/_position.scss +++ b/packages/kotti-ui/source/kotti-style/utilities/_position.scss @@ -7,16 +7,16 @@ $margins: ( 0: 0, - 1: $unit-1, - 2: $unit-2, - 3: $unit-3, - 4: $unit-4, - 5: $unit-5, - 6: $unit-6, - '8px': $unit-2, - '16px': $unit-4, - element: $unit-4, - block: $unit-6, + 1: var(--unit-1), + 2: var(--unit-2), + 3: var(--unit-3), + 4: var(--unit-4), + 5: var(--unit-5), + 6: var(--unit-6), + '8px': var(--unit-2), + '16px': var(--unit-4), + element: var(--unit-4), + block: var(--unit-6), ); @each $prop, @@ -33,15 +33,15 @@ $margins: ( $paddings: ( 0: 0, - 1: $unit-1, - 2: $unit-2, - 3: $unit-3, - 4: $unit-4, - 5: $unit-5, - 6: $unit-6, - '8px': $unit-2, - '16px': $unit-4, - element: $unit-4, + 1: var(--unit-1), + 2: var(--unit-2), + 3: var(--unit-3), + 4: var(--unit-4), + 5: var(--unit-5), + 6: var(--unit-6), + '8px': var(--unit-2), + '16px': var(--unit-4), + element: var(--unit-4), ); @each $prop,