mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-12-25 04:34:06 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: Fix n8n-checkbox alignment (#6004)

Browse source 
* fix: fix n8n-checkbox alignment

* fix: use css variables in checkbox inner margin-top

* test: update snapshots
This commit is contained in:
Alex Grozav 2023-04-19 11:37:43 +03:00 committed by GitHub
parent 3737b47869
commit f5448269ee
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 10 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/design-system/src/components/N8nCheckbox/Checkbox.vue
View file

@ -76,6 +76,7 @@ export default defineComponent({
.n8nCheckbox {
display: flex !important;
white-space: normal !important;
margin-bottom: var(--spacing-2xs);
span {
white-space: normal;
@ -83,6 +84,7 @@ export default defineComponent({
label {
cursor: pointer;
margin-bottom: 0;
}
}
</style>

1
packages/design-system/src/components/N8nInputLabel/InputLabel.vue
View file

@ -4,6 +4,7 @@
v-if="label || $slots.options"
:for="inputName"
:class="{
'n8n-input-label': true,
[$style.inputLabel]: true,
[$style.heading]: !!label,
[$style.underline]: underline,

3
packages/design-system/src/css/checkbox.scss
View file

@ -96,7 +96,7 @@
white-space: nowrap;
cursor: pointer;
outline: none;
display: inline-block;
display: inline-flex;
line-height: 1;
position: relative;
vertical-align: middle;
@ -190,6 +190,7 @@
position: relative;
border: var.$checkbox-input-border;
border-radius: var.$checkbox-border-radius;
margin-top: var(--spacing-5xs);
box-sizing: border-box;
width: var.$checkbox-input-width;
height: var.$checkbox-input-height;

10
packages/editor-ui/src/components/__tests__/__snapshots__/PersonalizationModal.spec.ts.snap
View file

@ -21,7 +21,7 @@ exports[`PersonalizationModal.vue > should render correctly 1`] = `
<div>
<div class=\\"grid\\">
<div class=\\"\\">
<div class=\\"container\\" data-test-id=\\"companyType\\"><label for=\\"companyType\\" class=\\"inputLabel heading medium\\">
<div class=\\"container\\" data-test-id=\\"companyType\\"><label for=\\"companyType\\" class=\\"n8n-input-label inputLabel heading medium\\">
<div class=\\"title\\"><span class=\\"n8n-text size-medium bold\\"> What best describes your company? <!----></span></div>
<!---->
<!---->
@ -71,7 +71,7 @@ exports[`PersonalizationModal.vue > should render correctly 1`] = `
</div>
</div>
<div class=\\"\\">
<div class=\\"container\\" data-test-id=\\"role\\"><label for=\\"role\\" class=\\"inputLabel heading medium\\">
<div class=\\"container\\" data-test-id=\\"role\\"><label for=\\"role\\" class=\\"n8n-input-label inputLabel heading medium\\">
<div class=\\"title\\"><span class=\\"n8n-text size-medium bold\\"> Which role best describes you? <!----></span></div>
<!---->
<!---->
@ -123,7 +123,7 @@ exports[`PersonalizationModal.vue > should render correctly 1`] = `
</div>
</div>
<div class=\\"\\">
<div class=\\"container\\" data-test-id=\\"automationBeneficiary\\"><label for=\\"automationBeneficiary\\" class=\\"inputLabel heading medium\\">
<div class=\\"container\\" data-test-id=\\"automationBeneficiary\\"><label for=\\"automationBeneficiary\\" class=\\"n8n-input-label inputLabel heading medium\\">
<div class=\\"title\\"><span class=\\"n8n-text size-medium bold\\"> Who will your automations mainly be for? <!----></span></div>
<!---->
<!---->
@ -169,7 +169,7 @@ exports[`PersonalizationModal.vue > should render correctly 1`] = `
</div>
</div>
<div class=\\"\\">
<div class=\\"container\\" data-test-id=\\"companySize\\"><label for=\\"companySize\\" class=\\"inputLabel heading medium\\">
<div class=\\"container\\" data-test-id=\\"companySize\\"><label for=\\"companySize\\" class=\\"n8n-input-label inputLabel heading medium\\">
<div class=\\"title\\"><span class=\\"n8n-text size-medium bold\\"> How big is your company? <!----></span></div>
<!---->
<!---->
@ -218,7 +218,7 @@ exports[`PersonalizationModal.vue > should render correctly 1`] = `
</div>
</div>
<div class=\\"\\">
<div class=\\"container\\" data-test-id=\\"reportedSource\\"><label for=\\"reportedSource\\" class=\\"inputLabel heading medium\\">
<div class=\\"container\\" data-test-id=\\"reportedSource\\"><label for=\\"reportedSource\\" class=\\"n8n-input-label inputLabel heading medium\\">
<div class=\\"title\\"><span class=\\"n8n-text size-medium bold\\"> How did you hear about n8n? <!----></span></div>
<!---->
<!---->