mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-12-25 12:44:07 -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 { .n8nCheckbox {
display: flex !important; display: flex !important;
white-space: normal !important; white-space: normal !important;
margin-bottom: var(--spacing-2xs);
span { span {
white-space: normal; white-space: normal;
@ -83,6 +84,7 @@ export default defineComponent({
label { label {
cursor: pointer; cursor: pointer;
margin-bottom: 0;
} }
} }
</style> </style>

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

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

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

@ -96,7 +96,7 @@
white-space: nowrap; white-space: nowrap;
cursor: pointer; cursor: pointer;
outline: none; outline: none;
display: inline-block; display: inline-flex;
line-height: 1; line-height: 1;
position: relative; position: relative;
vertical-align: middle; vertical-align: middle;
@ -190,6 +190,7 @@
position: relative; position: relative;
border: var.$checkbox-input-border; border: var.$checkbox-input-border;
border-radius: var.$checkbox-border-radius; border-radius: var.$checkbox-border-radius;
margin-top: var(--spacing-5xs);
box-sizing: border-box; box-sizing: border-box;
width: var.$checkbox-input-width; width: var.$checkbox-input-width;
height: var.$checkbox-input-height; 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>
<div class=\\"grid\\"> <div class=\\"grid\\">
<div class=\\"\\"> <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> <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> </div>
<div class=\\"\\"> <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> <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> </div>
<div class=\\"\\"> <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> <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> </div>
<div class=\\"\\"> <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> <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> </div>
<div class=\\"\\"> <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> <div class=\\"title\\"><span class=\\"n8n-text size-medium bold\\"> How did you hear about n8n? <!----></span></div>
<!----> <!---->
<!----> <!---->