Skip to content

Commit

Permalink
Merge pull request #498 from 3YOURMIND/improve-unit-usage
Browse files Browse the repository at this point in the history
  • Loading branch information
@FlorianWendelborn
FlorianWendelborn committed Sep 13, 2021
2 parents 057ebd6 + 34cc7df commit 2731714
Show file tree
Hide file tree
Showing 30 changed files with 127 additions and 124 deletions.
23 changes: 16 additions & 7 deletions packages/documentation/pages/foundations/units.vue
View file
Expand Up @@ -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

Expand Down
2 changes: 1 addition & 1 deletion packages/documentation/pages/usage/components/form.vue
View file
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion packages/documentation/pages/usage/styles/form-fields.scss
View file
Expand Up @@ -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;
Expand Down
10 changes: 5 additions & 5 deletions packages/kotti-ui/source/kotti-actionbar/KtActionbar.vue
View file
Expand Up @@ -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;
}
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down
4 changes: 2 additions & 2 deletions packages/kotti-ui/source/kotti-button-group/KtButtonGroup.vue
View file
Expand Up @@ -25,11 +25,11 @@ export default defineComponent<KottiButtonGroup.PropsInternal>({
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;
}
}
}
Expand Down
6 changes: 2 additions & 4 deletions packages/kotti-ui/source/kotti-button/KtButton.vue
View file
Expand Up @@ -64,8 +64,6 @@ export default defineComponent<KottiButton.PropsInternal>({
</script>

<style lang="scss">
@import '../kotti-style/_variables.scss';
:root {
--default-button-height: var(--unit-8);
--default-button-line-height: var(--unit-6);
Expand All @@ -92,7 +90,7 @@ export default defineComponent<KottiButton.PropsInternal>({
user-select: none;
border: 1px solid transparent;
border-radius: $border-radius;
border-radius: var(--border-radius);
transition: 30ms opacity ease-in-out;
Expand Down Expand Up @@ -146,7 +144,7 @@ export default defineComponent<KottiButton.PropsInternal>({
.yoco {
position: relative;
left: calc(var(--unit-1) * -1);
left: calc(-1 * var(--unit-1));
}
}
}
Expand Down
10 changes: 5 additions & 5 deletions packages/kotti-ui/source/kotti-drawer/KtDrawer.vue
View file
Expand Up @@ -98,7 +98,7 @@ $wide-drawer-width: 26.8rem;
.drawer-handle {
position: absolute;
top: 50%;
left: $unit-1;
left: var(--unit-1);
display: block;
width: 1.5rem;
height: 1.5rem;
Expand All @@ -120,8 +120,8 @@ $wide-drawer-width: 26.8rem;
flex-direction: column;
width: $default-drawer-width;
height: 100%;
padding: $unit-6;
padding-left: $unit-8;
padding: var(--unit-6);
padding-left: var(--unit-8);
overflow-y: auto;
background-color: var(--ui-background);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
Expand Down Expand Up @@ -178,8 +178,8 @@ $wide-drawer-width: 26.8rem;
bottom: 0;
width: 100%;
height: 80%;
padding: $unit-4;
padding-top: $unit-8;
padding: var(--unit-4);
padding-top: var(--unit-8);
&.drawer-expand {
width: 100%;
Expand Down
17 changes: 8 additions & 9 deletions packages/kotti-ui/source/kotti-dropdown-button/KtDropdownButton.vue
View file
Expand Up @@ -64,21 +64,20 @@ export default {
</script>

<style lang="scss">
@import '../kotti-style/_variables.scss';
.kt-dropdown-button {
display: inline-block;
margin: 0 $unit-1;
margin: 0 var(--unit-1);
.button-group {
position: relative;
display: flex;
margin-right: 32px;
}
.kt-popper {
padding-top: $unit-1;
padding-right: $unit-1;
padding-top: var(--unit-1);
padding-right: var(--unit-1);
padding-right: 0;
padding-bottom: $unit-1;
padding-left: $unit-1;
padding-bottom: var(--unit-1);
padding-left: var(--unit-1);
padding-left: 0;
}
}
Expand All @@ -89,15 +88,15 @@ export default {
.kt-dropdown-button__icon {
position: absolute;
left: -1px;
padding: 0 $unit-2;
padding: 0 var(--unit-2);
margin-left: 100%;
pointer-events: none;
border-left: 0 !important;
border-radius: 0.2em !important;
.yoco {
padding-left: $unit-2;
padding-left: var(--unit-2);
margin: 0 !important;
margin-left: $unit-1;
margin-left: var(--unit-1);
}
span .yoco {
display: none;
Expand Down
4 changes: 1 addition & 3 deletions packages/kotti-ui/source/kotti-filters/components/FilterActions.vue
View file
Expand Up @@ -65,12 +65,10 @@ export default defineComponent<{
</script>

<style lang="scss" scoped>
@import '../../kotti-style/_variables.scss';
.kt-filter__actions {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: $unit-1;
margin-top: var(--unit-1);
}
</style>
2 changes: 1 addition & 1 deletion packages/kotti-ui/source/kotti-filters/components/FilterList.vue
View file
Expand Up @@ -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;
Expand Down
4 changes: 2 additions & 2 deletions packages/kotti-ui/source/kotti-filters/components/FilterRow.vue
View file
Expand Up @@ -204,7 +204,7 @@ export default defineComponent<{
@media (max-width: $size-md) {
display: unset;
> * {
padding-bottom: $unit-1;
padding-bottom: var(--unit-1);
}
}
}
Expand All @@ -220,7 +220,7 @@ export default defineComponent<{
display: flex;
align-items: center;
min-height: $unit-8;
min-height: var(--unit-8);
}
}
Expand Down
4 changes: 1 addition & 3 deletions packages/kotti-ui/source/kotti-filters/components/FilterSearch.vue
View file
Expand Up @@ -71,10 +71,8 @@ export default defineComponent<{
</script>

<style lang="scss" scoped>
@import '../../kotti-style/_variables.scss';
.kt-filter__search {
flex: 1;
margin: 0 $unit-2 0 0;
margin: 0 var(--unit-2) 0 0;
}
</style>
4 changes: 2 additions & 2 deletions packages/kotti-ui/source/kotti-input/KtInput.vue
View file
Expand Up @@ -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;
Expand Down
4 changes: 2 additions & 2 deletions packages/kotti-ui/source/kotti-modal/KtModal.vue
View file
Expand Up @@ -74,10 +74,10 @@ export default defineComponent<Kotti.Modal.PropsInternal>({
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;
Expand Down
6 changes: 3 additions & 3 deletions packages/kotti-ui/source/kotti-pagination/KtPagination.vue
View file
Expand Up @@ -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;
Expand All @@ -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 {
Expand Down
9 changes: 5 additions & 4 deletions packages/kotti-ui/source/kotti-popover/KtPopover.vue
View file
Expand Up @@ -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 {
Expand Down
8 changes: 4 additions & 4 deletions packages/kotti-ui/source/kotti-popover/KtPopoverItem.vue
View file
Expand Up @@ -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;
}
}
Expand Down
10 changes: 5 additions & 5 deletions packages/kotti-ui/source/kotti-style/_cards.scss
View file
Expand Up @@ -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,
Expand Down Expand Up @@ -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);
}
}
}

0 comments on commit 2731714

Please sign in to comment.