fix: vertical alignment on buttons with an icon

This commit is contained in:
gaelle morin 2021-05-14 20:19:55 +02:00
parent ab2c05204f
commit 7780b57505
No known key found for this signature in database
GPG Key ID: 028426702B95CF9C
20 changed files with 53 additions and 33 deletions

6
package-lock.json generated
View File

@ -1615,9 +1615,9 @@
}
},
"@startinblox/hubl-styling-framework": {
"version": "1.9.5",
"resolved": "https://registry.npmjs.org/@startinblox/hubl-styling-framework/-/hubl-styling-framework-1.9.5.tgz",
"integrity": "sha512-gS2i88LTYEOp5bBP69I0TdlHh0BSKZsme0HV7otS67tIYkhgXHdot6defWy2Ia9y3QNMZ640USbCjWxwg3unig=="
"version": "1.9.6",
"resolved": "https://registry.npmjs.org/@startinblox/hubl-styling-framework/-/hubl-styling-framework-1.9.6.tgz",
"integrity": "sha512-jcKewmNJIy3SStKeb++9UFiBHH/kDvoRpFOzx/fmrUd54uFLSmvBtiVnR4VAHbhzqtaHqIwu4u8xkuQarSdIzw=="
},
"@types/q": {
"version": "1.5.4",

View File

@ -57,7 +57,7 @@
"clearDist": false
},
"dependencies": {
"@startinblox/hubl-styling-framework": "^1.9.5",
"@startinblox/hubl-styling-framework": "^1.9.6",
"cross-env": "^7.0.3",
"fs-extra": "^9.0.1",
"normalize.css": "^8.0.1",

View File

@ -6,7 +6,7 @@
/* Styles on buttons and .children-link don't work because this input is inside too many elements. */
/* And no I can't add that stupid icon because it'a an input. */
/* But now, with 0.16, it's a button and you can :D */
.join-button {
/*.join-button {
input,
button {
@ -55,7 +55,7 @@
}
}
}
}
}*/
.masonry>div:nth-child(1) {
/* change from directory (nth-child(2))*/

View File

@ -121,17 +121,11 @@ hubl-menu-empty+hubl-menu-empty {
.search-button {
button {
display: inline-flex;
line-height: 15px;
@media (max-width: 768px) {
margin-bottom: 20px;
width: 100%;
}
&::before {
vertical-align: middle;
}
}
}
@ -144,3 +138,27 @@ hubl-menu-empty+hubl-menu-empty {
}
}
}
.children-button-icon {
button {
display: inline-flex;
justify-content: center;
line-height: 15px;
&::before {
vertical-align: middle;
}
}
}
.button-icon {
display: inline-flex;
justify-content: center;
line-height: 15px;
&::before {
vertical-align: middle;
}
}

View File

@ -59,7 +59,7 @@ div.segment.full.padding-large.sm-padding-xsmall.sm-padding-top-medium.whitespac
submit-button=''
submit-widget="button"
class-submit-button="submit-button segment sm-full margin-top-xsmall text-xsmall children-link-button children-link-text-bold children-link-text-uppercase children-link-reversed color-secondary bordered children-icon-rocket children-icon-small children-icon-margin-right-xsmall"
class-submit-button="submit-button segment sm-full margin-top-xsmall text-xsmall children-link-button children-link-text-bold children-link-text-uppercase children-link-reversed color-secondary bordered children-button-icon children-icon-rocket children-icon-small children-icon-margin-right-xsmall"
data-trans='label-user.first_name=user.create.labelFirstname;label-user.last_name=user.create.labelLastname;label-user.username=user.create.labelUsername;label-user.email=user.create.labelEmail;submit-button=user.create.buttonSubmit'
)

View File

@ -17,7 +17,7 @@ div.segment.full.padding-large.sm-padding-xsmall.sm-padding-top-medium.whitespac
class-cell1="segment margin-bottom-medium third sm-full padding-right-small sm-padding-none text-small text-semibold text-uppercase text-color-heading"
submit-button=""
submit-widget="button"
class-submit-button="search-button segment sm-full text-xsmall children-link-button children-link-text-bold children-link-text-uppercase children-link-reversed color-secondary bordered children-icon-arrow-right-circle children-icon-small children-icon-margin-right-xsmall"
class-submit-button="search-button segment sm-full text-xsmall children-link-button children-link-text-bold children-link-text-uppercase children-link-reversed color-secondary bordered children-button-icon children-icon-arrow-right-circle children-icon-small children-icon-margin-right-xsmall"
data-trans='label-cell1=communities.searchBy;submit-button=goButton'
)

View File

@ -53,7 +53,7 @@ div.segment.full.padding-large.sm-padding-xsmall.sm-padding-top-medium.whitespac
submit-button=''
submit-widget="button"
class-submit-button="submit-button segment sm-full margin-top-xsmall text-xsmall children-link-button children-link-text-bold children-link-text-uppercase children-link-reversed color-secondary bordered children-icon-rocket children-icon-small children-icon-margin-right-xsmall"
class-submit-button="submit-button segment sm-full margin-top-xsmall text-xsmall children-link-button children-link-text-bold children-link-text-uppercase children-link-reversed color-secondary bordered children-button-icon children-icon-rocket children-icon-small children-icon-margin-right-xsmall"
data-trans='enum-status=hublStatus;label-status=circle.create.labelStatus;label-community.community=circle.create.labelCommunity;label-name=circle.create.labelName;label-description=circle.create.labelDescription;submit-button=circle.create.buttonSubmit;label-subtitle=circle.create.labelSubtitle;label-help=circle.create.descriptionHelp'
)

View File

@ -10,6 +10,7 @@ solid-widget(name=`hubl-admin-circle-join-button`)
submit-button=''
submit-widget="button"
class-submit-button="add-member-button segment sm-full margin-top-xsmall text-xsmall children-link-button children-link-text-bold children-link-text-uppercase children-link-reversed color-secondary bordered children-button-icon children-icon-arrow-right-circle children-icon-small children-icon-margin-right-xsmall"
data-trans='submit-button=circle.list.buttonJoin'
)
hubl-reactivity(data-src=`${getComponent('circles').endpoints.get}` target-src='${value}')

View File

@ -18,7 +18,7 @@ div.segment.full.padding-large.padding-top-medium.padding-bottom-xsmall.sm-paddi
div.segment.half.sm-full.text-right
solid-ac-checker(data-src=`${getComponent('circles').endpoints.post}`, permission='acl:Append')
solid-link(
class='segment sm-full button text-xsmall text-bold text-uppercase text-center reversed color-secondary bordered icon icon-plus'
class='segment sm-full button text-xsmall text-bold text-uppercase text-center reversed color-secondary bordered button-icon icon icon-margin-right-xsmall icon-plus'
next=`admin-${getRoute('circles', true)}-create`
data-trans='circle.list.buttonCreate'
)
@ -32,7 +32,7 @@ div.segment.full.padding-large.padding-top-medium.padding-bottom-xsmall.sm-paddi
class-searchname="segment margin-bottom-medium margin-bottom-medium third sm-full padding-right-small sm-padding-none text-small text-semibold text-uppercase text-color-heading"
submit-button=""
submit-widget="button"
class-submit-button="search-button segment sm-full text-xsmall children-link-button children-link-text-bold children-link-text-uppercase children-link-color-secondary bordered children-icon-arrow-right-circle children-icon-small children-icon-margin-right-xsmall"
class-submit-button="search-button segment sm-full text-xsmall children-button-icon children-link-button children-link-text-bold children-link-text-uppercase children-link-color-secondary bordered children-icon-arrow-right-circle children-icon-small children-icon-margin-right-xsmall"
data-trans='label-searchname=circle.list.searchBy;submit-button=circle.list.searchButton'
)

View File

@ -54,7 +54,7 @@ div.segment.full.padding-large.sm-padding-xsmall.sm-padding-top-medium.whitespac
submit-button=''
submit-widget="button"
class-submit-button="submit-button segment sm-full margin-top-xsmall text-xsmall children-link-button children-link-text-bold children-link-text-uppercase children-link-reversed color-secondary bordered children-icon-rocket children-icon-small children-icon-margin-right-xsmall"
class-submit-button="submit-button segment sm-full margin-top-xsmall text-xsmall children-link-button children-link-text-bold children-link-text-uppercase children-link-reversed color-secondary bordered children-button-icon children-icon-rocket children-icon-small children-icon-margin-right-xsmall"
next=getRoute('projects', true)

View File

@ -12,7 +12,7 @@ div.segment.full.padding-large.sm-padding-xsmall.sm-padding-top-medium.whitespac
div.segment.half.sm-full.text-right
solid-ac-checker(data-src=`${getComponent('projects').endpoints.post}`, permission='acl:Append')
solid-link(
class='segment sm-full button text-xsmall text-bold text-uppercase text-center reversed color-secondary bordered icon icon-plus'
class='segment sm-full button text-xsmall text-bold text-uppercase text-center reversed color-secondary bordered button-icon icon icon-margin-right-xsmall icon-plus'
next=`admin-${getRoute('projects', true)}-create`
data-trans='project.list.buttonCreate'
)
@ -25,7 +25,7 @@ div.segment.full.padding-large.sm-padding-xsmall.sm-padding-top-medium.whitespac
class-cell1="segment margin-bottom-medium third sm-full padding-right-small sm-padding-none text-small text-semibold text-uppercase text-color-heading"
submit-button=""
submit-widget="button"
class-submit-button="search-button segment sm-full text-xsmall children-link-button children-link-text-bold children-link-text-uppercase children-link-reversed color-secondary bordered children-icon-arrow-right-circle children-icon-small children-icon-margin-right-xsmall"
class-submit-button="search-button segment sm-full text-xsmall children-link-button children-link-text-bold children-link-text-uppercase children-link-reversed color-secondary bordered children-button-icon children-icon-arrow-right-circle children-icon-small children-icon-margin-right-xsmall"
data-trans='label-cell1=project.list.searchBy;submit-button=goButton'
)
@ -106,7 +106,7 @@ div.segment.full.padding-large.sm-padding-xsmall.sm-padding-top-medium.whitespac
solid-widget(name=`hubl-admin-project-join-button`)
template
solid-form(
class='button text-xsmall text-bold text-uppercase reversed color-secondary bordered icon icon-arrow-right-circle'
class=''
data-src='${src}'
nested-field="members"
@ -116,6 +116,7 @@ div.segment.full.padding-large.sm-padding-xsmall.sm-padding-top-medium.whitespac
submit-button=''
submit-widget="button"
class-submit-button="add-member-button segment margin-top-xsmall text-xsmall children-link-button children-link-text-bold children-link-text-uppercase children-link-reversed color-secondary bordered children-button-icon children-icon-arrow-right-circle children-icon-small children-icon-margin-right-xsmall"
data-trans='submit-button=project.list.buttonJoin'
)
hubl-reactivity(data-src=`${getComponent('projects').endpoints.get}` target-src='${value}')

View File

@ -66,7 +66,7 @@ div.segment.full.padding-large.whitespace-normal
submit-button=''
submit-widget="button"
class-submit-button="submit-button segment sm-full margin-top-xsmall text-xsmall children-link-button children-link-text-bold children-link-text-uppercase children-link-reversed color-secondary bordered children-icon-rocket children-icon-small children-icon-margin-right-xsmall"
class-submit-button="submit-button segment sm-full margin-top-xsmall text-xsmall children-link-button children-link-text-bold children-link-text-uppercase children-link-reversed color-secondary bordered children-button-icon children-icon-rocket children-icon-small children-icon-margin-right-xsmall"
next=`${component.route}-information`
data-trans='enum-status=hublStatus;label-status=circle.edit.labelStatus;label-community.community=circle.edit.labelCommunity;label-name=circle.edit.labelName;label-owner=circle.edit.labelOwner;label-description=circle.edit.labelDescription;submit-button=circle.edit.buttonSubmit;label-subtitle=circle.edit.labelSubtitle;label-help=circle.edit.descriptionHelp'

View File

@ -44,9 +44,9 @@ div(
.segment.half.sm-full.text-right.margin-bottom-medium.sm-margin-bottom-small
solid-ac-checker(permission='acl:Append', bind-resources, nested-field='members')
solid-ac-checker(permission='acl:Delete', bind-resources)
solid-link(class='segment sm-full button text-xsmall text-bold text-uppercase text-center reversed color-secondary bordered icon icon-pencil' next=`${component.route}-edit` bind-resources data-trans='circle.profile.buttonModify')
solid-link(class='segment sm-full button text-xsmall text-bold text-uppercase text-center reversed color-secondary bordered button-icon icon icon-pencil icon-margin-right-xsmall' next=`${component.route}-edit` bind-resources data-trans='circle.profile.buttonModify')
solid-ac-checker(no-permission='acl:Delete', bind-resources)
solid-link(class='segment sm-full button text-xsmall text-bold text-uppercase text-center reversed color-secondary bordered icon icon-pencil' next=`${component.route}-edit` bind-resources data-trans='circle.profile.buttonAdd')
solid-link(class='segment sm-full button text-xsmall text-bold text-uppercase text-center reversed color-secondary bordered button-icon icon icon-pencil icon-margin-right-xsmall' next=`${component.route}-edit` bind-resources data-trans='circle.profile.buttonAdd')
solid-widget(name=`hubl-circle-leave-button-${component.uniq}`)
template

View File

@ -11,7 +11,7 @@
class-name="segment margin-bottom-medium full sm-full padding-right-small sm-padding-none text-small input-bg-white children-shadow"
submit-button=""
submit-widget="button"
class-submit-button="search-button segment sm-full text-xsmall children-link-button children-link-text-bold children-link-text-uppercase children-link-color-secondary bordered children-icon-arrow-right-circle children-icon-small children-icon-margin-right-xsmall"
class-submit-button="search-button segment sm-full text-xsmall children-link-button children-link-text-bold children-link-text-uppercase children-link-color-secondary bordered children-button-icon children-icon-arrow-right-circle children-icon-small children-icon-margin-right-xsmall"
data-trans='placeholder-name=communities.list.searchBy;submit-button=communities.list.searchButton'
)
div.segment.sm-full.text-right(style='float:right')

View File

@ -58,7 +58,7 @@ div.bg-color-white
submit-button=""
submit-widget="button"
class-submit-button="submit-button segment sm-full margin-top-xsmall text-xsmall children-link-button children-link-text-bold children-link-text-uppercase children-link-reversed color-secondary bordered children-icon-rocket children-icon-small children-icon-margin-right-xsmall"
class-submit-button="submit-button segment sm-full margin-top-xsmall text-xsmall children-link-button children-link-text-bold children-link-text-uppercase children-link-reversed color-secondary bordered children-button-icon children-icon-rocket children-icon-small children-icon-margin-right-xsmall"
data-trans="label-logo=communities.edit.labelLogo;label-profile.shortDescription=communities.edit.labelShortDescription;label-profile.description=communities.edit.labelDescription;label-profile.phone=communities.edit.labelPhone;label-profile.tweeter=communities.edit.labelTwitter;label-profile.facebook=communities.edit.labelFacebook;label-profile.linkedin=communities.edit.labelLinkedin;label-profile.instagram=communities.edit.labelInstagram;submit-button=communities.edit.buttonSubmit"
)
@ -88,7 +88,7 @@ div.bg-color-white
submit-button=""
submit-widget="button"
class-submit-button="submit-button segment sm-full margin-top-xsmall text-xsmall children-link-button children-link-text-bold children-link-text-uppercase children-link-reversed color-secondary bordered children-icon-rocket children-icon-small children-icon-margin-right-xsmall"
class-submit-button="submit-button segment sm-full margin-top-xsmall text-xsmall children-link-button children-link-text-bold children-link-text-uppercase children-link-reversed color-secondary bordered children-button-icon children-icon-rocket children-icon-small children-icon-margin-right-xsmall"
data-trans="label-profile.picture1=communities.edit.labelPicture1;label-profile.picture2=communities.edit.labelPicture2;label-profile.picture3=communities.edit.labelPicture3;submit-button=communities.edit.buttonSubmit"
)

View File

@ -13,7 +13,7 @@
submit-button=""
submit-widget="button"
class-submit-button="search-button segment sm-full text-xsmall children-link-button children-link-text-bold children-link-text-uppercase children-link-reversed color-secondary bordered children-icon-arrow-right-circle children-icon-small children-icon-margin-right-xsmall"
class-submit-button="search-button segment sm-full text-xsmall children-link-button children-link-text-bold children-link-text-uppercase children-link-reversed color-secondary bordered children-button-icon children-icon-arrow-right-circle children-icon-small children-icon-margin-right-xsmall"
data-trans='placeholder-filter=communities.list.searchBy;submit-button=communities.list.searchButton'
)
div.segment.sm-full.text-right(style='float:right')

View File

@ -59,7 +59,7 @@ div.segment.full.padding-large.whitespace-normal
submit-button=''
submit-widget="button"
class-submit-button="submit-button segment sm-full margin-top-xsmall text-xsmall children-link-button children-link-text-bold children-link-text-uppercase children-link-reversed color-secondary bordered children-icon-rocket children-icon-small children-icon-margin-right-xsmall"
class-submit-button="submit-button segment sm-full margin-top-xsmall text-xsmall children-link-button children-link-text-bold children-link-text-uppercase children-link-reversed color-secondary bordered children-button-icon children-icon-rocket children-icon-small children-icon-margin-right-xsmall"
next=`${component.route}-information`
data-trans='label-name=project.edit.labelName;label-captain=project.edit.labelCaptain;label-customer.name=project.edit.labelCustomer;label-customer.address=project.edit.labelCustomerAddress;label-description=project.edit.labelDescription;label-help=project.edit.descriptionHelp;submit-button=project.edit.buttonSubmit'

View File

@ -49,9 +49,9 @@ div(
solid-ac-checker.segment.half.sm-full.text-right(permission='acl:Append', bind-resources, nested-field='members')
solid-ac-checker(permission='acl:Delete', bind-resources)
solid-link(class='segment sm-full margin-bottom-large sm-margin-bottom-medium button text-xsmall text-bold text-uppercase text-center reversed color-secondary bordered icon icon-pencil' next=`${component.route}-edit` bind-resources data-trans='project.profile.buttonModify')
solid-link(class='segment sm-full margin-bottom-large sm-margin-bottom-medium button text-xsmall text-bold text-uppercase text-center reversed color-secondary bordered button-icon icon icon-pencil icon-margin-right-xsmall' next=`${component.route}-edit` bind-resources data-trans='project.profile.buttonModify')
solid-ac-checker(no-permission='acl:Delete', bind-resources)
solid-link(class='segment sm-full margin-bottom-large sm-margin-bottom-medium button text-xsmall text-bold text-uppercase text-center reversed color-secondary bordered icon icon-pencil' next=`${component.route}-edit` bind-resources data-trans='project.profile.buttonAdd')
solid-link(class='segment sm-full margin-bottom-large sm-margin-bottom-medium button text-xsmall text-bold text-uppercase text-center reversed color-secondary bordered button-icon icon icon-pencil icon-margin-right-xsmall' next=`${component.route}-edit` bind-resources data-trans='project.profile.buttonAdd')
solid-ac-checker.segment.full.text-right.margin-bottom-large.sm-margin-bottom-medium(permission='acl:Delete', bind-resources)
solid-delete(

View File

@ -3,7 +3,7 @@ if componentSet.has('admin') && componentSet.has('chat')
template
solid-ac-checker(data-src="${value}", nested-field="members", permission='acl:Append')
solid-link(
class='button text-small text-bold text-uppercase reversed color-secondary bordered icon icon-plus'
class='button text-small text-bold text-uppercase reversed color-secondary bordered button-icon icon icon-margin-right-xsmall icon-plus'
data-src="${value}"
next=`admin-${getRoute("chat", true)}-create`
data-trans='communities.linkInvite'

View File

@ -7,7 +7,7 @@ if componentSet.has('communities') && getRoute('communities')
nested-field="profile"
)
solid-link(
class="segment margin-top-xxlarge sm-full button text-xsmall text-bold text-uppercase text-center reversed color-secondary bordered icon icon-pencil"
class="segment margin-top-xxlarge sm-full button text-xsmall text-bold text-uppercase text-center reversed color-secondary bordered button-icon icon icon-pencil icon-margin-right-xsmall"
data-trans="communities.profile.edit"
data-src="${src}"
next=`${getRoute('communities', true)}-edit`