Skip to content

Commit d1d2739

Browse files
jounijouni
authored
refactor: base styles padding and gap properties (#9934)
1 parent 5d82520 commit d1d2739

File tree

44 files changed

+91
-91
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+91
-91
lines changed

‎packages/app-layout/src/styles/vaadin-app-layout-base-styles.js

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -62,19 +62,19 @@ export const appLayoutStyles = css`
6262
top: 0;
6363
inset-inline: 0;
6464
transition: inset-inline-start var(--vaadin-app-layout-transition-duration);
65-
padding-top: max(var(--vaadin-app-layout-navbar-padding-top, var(--vaadin-padding)), var(--safe-area-inset-top));
66-
padding-bottom: var(--vaadin-app-layout-navbar-padding-bottom, var(--vaadin-padding));
65+
padding-top: max(var(--vaadin-app-layout-navbar-padding-top, var(--vaadin-padding-s)), var(--safe-area-inset-top));
66+
padding-bottom: var(--vaadin-app-layout-navbar-padding-bottom, var(--vaadin-padding-s));
6767
padding-inline-start: max(
68-
var(--vaadin-app-layout-navbar-padding-inline-start, var(--vaadin-padding)),
68+
var(--vaadin-app-layout-navbar-padding-inline-start, var(--vaadin-padding-s)),
6969
var(--safe-area-inset-left)
7070
);
7171
/* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
7272
padding-inline-end: max(
73-
var(--vaadin-app-layout-navbar-padding-inline-end, var(--vaadin-padding)),
73+
var(--vaadin-app-layout-navbar-padding-inline-end, var(--vaadin-padding-s)),
7474
var(--safe-area-inset-right)
7575
);
7676
z-index: 1;
77-
gap: var(--vaadin-app-layout-navbar-gap, var(--vaadin-gap-container-inline));
77+
gap: var(--vaadin-app-layout-navbar-gap, var(--vaadin-gap-s));
7878
background: var(--vaadin-app-layout-navbar-background, var(--vaadin-background-container));
7979
}
8080
@@ -89,9 +89,9 @@ export const appLayoutStyles = css`
8989
[part='navbar'][bottom] {
9090
top: auto;
9191
bottom: 0;
92-
padding-top: var(--vaadin-app-layout-navbar-padding-top, var(--vaadin-padding));
92+
padding-top: var(--vaadin-app-layout-navbar-padding-top, var(--vaadin-padding-s));
9393
padding-bottom: max(
94-
var(--vaadin-app-layout-navbar-padding-bottom, var(--vaadin-padding)),
94+
var(--vaadin-app-layout-navbar-padding-bottom, var(--vaadin-padding-s)),
9595
var(--safe-area-inset-bottom)
9696
);
9797
}

‎packages/button/src/styles/vaadin-button-base-styles.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export const buttonStyles = css`
1212
align-items: center;
1313
justify-content: center;
1414
text-align: center;
15-
gap: var(--vaadin-button-gap, 0 var(--vaadin-gap-container-inline));
15+
gap: var(--vaadin-button-gap, 0 var(--vaadin-gap-s));
1616
white-space: nowrap;
1717
-webkit-tap-highlight-color: transparent;
1818
-webkit-user-select: none;

‎packages/card/src/styles/vaadin-card-base-styles.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,12 @@ export const cardStyles = css`
1010
:host {
1111
--_content: 0;
1212
--_footer: 0;
13-
--_gap: var(--vaadin-card-gap, var(--vaadin-gap-container-block) var(--vaadin-gap-container-inline));
13+
--_gap: var(--vaadin-card-gap, var(--vaadin-gap-s));
1414
--_header: max(var(--_header-prefix), var(--_title), var(--_subtitle), var(--_header-suffix));
1515
--_header-prefix: 0;
1616
--_header-suffix: 0;
1717
--_media: 0;
18-
--_padding: var(--vaadin-card-padding, var(--vaadin-padding));
18+
--_padding: var(--vaadin-card-padding, var(--vaadin-padding-s));
1919
--_subtitle: 0;
2020
--_title: 0;
2121
background: var(--vaadin-card-background, var(--vaadin-background-container));

‎packages/component-base/src/styles/style-props.js

Lines changed: 9 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/crud/src/styles/vaadin-crud-base-styles.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@ export const crudStyles = css`
9090
display: flex;
9191
flex-shrink: 0;
9292
justify-content: flex-end;
93-
padding: var(--vaadin-crud-toolbar-padding, var(--vaadin-padding));
93+
padding: var(--vaadin-crud-toolbar-padding, var(--vaadin-padding-s));
9494
}
9595
9696
:host([no-toolbar]) [part='toolbar'] {
@@ -133,7 +133,7 @@ export const crudStyles = css`
133133
font-size: var(--vaadin-crud-header-font-size, 1em);
134134
font-weight: var(--vaadin-crud-header-font-weight, 600);
135135
line-height: var(--vaadin-crud-header-line-height, inherit);
136-
padding: var(--vaadin-crud-header-padding, var(--vaadin-padding));
136+
padding: var(--vaadin-crud-header-padding, var(--vaadin-padding-s));
137137
}
138138
139139
::slotted([slot='header']) {
@@ -144,16 +144,16 @@ export const crudStyles = css`
144144
}
145145
146146
::slotted([slot='form']) {
147-
padding: var(--vaadin-crud-form-padding, var(--vaadin-padding));
147+
padding: var(--vaadin-crud-form-padding, var(--vaadin-padding-s));
148148
}
149149
150150
[part='footer'] {
151151
background: var(--vaadin-crud-footer-background, transparent);
152152
border-top: var(--vaadin-crud-border-width, 1px) solid var(--vaadin-crud-border-color, var(--vaadin-border-color));
153153
display: flex;
154154
flex: none;
155-
gap: var(--vaadin-crud-footer-gap, var(--vaadin-gap-container-inline));
156-
padding: var(--vaadin-crud-footer-padding, var(--vaadin-padding));
155+
gap: var(--vaadin-crud-footer-gap, var(--vaadin-gap-s));
156+
padding: var(--vaadin-crud-footer-padding, var(--vaadin-padding-s));
157157
}
158158
159159
::slotted([slot='delete-button']) {

‎packages/crud/src/styles/vaadin-crud-dialog-overlay-base-styles.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ const crudDialogOverlay = css`
1818
font-size: var(--vaadin-crud-dialog-header-font-size, 1em);
1919
font-weight: var(--vaadin-crud-dialog-header-font-weight, 600);
2020
line-height: var(--vaadin-crud-dialog-header-line-height, inherit);
21-
padding: var(--vaadin-crud-header-padding, var(--vaadin-padding));
21+
padding: var(--vaadin-crud-header-padding, var(--vaadin-padding-s));
2222
}
2323
2424
::slotted([slot='header']) {
@@ -31,7 +31,7 @@ const crudDialogOverlay = css`
3131
:host(:is(*, #id)) [part='content'] {
3232
overflow: auto;
3333
overscroll-behavior: contain;
34-
padding: var(--vaadin-crud-form-padding, var(--vaadin-padding));
34+
padding: var(--vaadin-crud-form-padding, var(--vaadin-padding-s));
3535
}
3636
3737
::slotted([slot='form']) {

‎packages/dashboard/src/styles/vaadin-dashboard-widget-base-styles.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@ const widgetStyles = css`
9898
}
9999
100100
:host([editable]) header {
101-
padding: var(--vaadin-dashboard-widget-header-padding, var(--vaadin-padding));
101+
padding: var(--vaadin-dashboard-widget-header-padding, var(--vaadin-padding-s));
102102
}
103103
104104
header:has([part~='title'][hidden]) {

‎packages/dashboard/src/styles/vaadin-dashboard-widget-section-base-styles.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ export const dashboardWidgetAndSectionStyles = css`
6060
align-items: center;
6161
box-sizing: border-box;
6262
justify-content: space-between;
63-
gap: var(--vaadin-dashboard-header-gap, var(--vaadin-gap-container-inline));
63+
gap: var(--vaadin-dashboard-header-gap, var(--vaadin-gap-s));
6464
}
6565
6666
[part='title'] {

‎packages/date-picker/src/styles/vaadin-date-picker-overlay-content-base-styles.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@ export const overlayContentStyles = css`
9797
display: flex;
9898
grid-area: toolbar;
9999
justify-content: space-between;
100-
padding: var(--vaadin-date-picker-toolbar-padding, var(--vaadin-padding));
100+
padding: var(--vaadin-date-picker-toolbar-padding, var(--vaadin-padding-s));
101101
}
102102
103103
:host([fullscreen]) [part='toolbar'] {

‎packages/date-picker/src/styles/vaadin-month-calendar-base-styles.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { css } from 'lit';
99
export const monthCalendarStyles = css`
1010
:host {
1111
display: block;
12-
padding: var(--vaadin-date-picker-month-padding, var(--vaadin-padding));
12+
padding: var(--vaadin-date-picker-month-padding, var(--vaadin-padding-s));
1313
}
1414
1515
[part='month-header'] {

0 commit comments

Comments
 (0)