fix: vertical alignment on buttons with an icon
This commit is contained in:
		
							
								
								
									
										6
									
								
								package-lock.json
									
									
									
										generated
									
									
									
								
							
							
						
						
									
										6
									
								
								package-lock.json
									
									
									
										generated
									
									
									
								
							| @ -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", | ||||
|  | ||||
| @ -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", | ||||
|  | ||||
| @ -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))*/ | ||||
|  | ||||
| @ -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; | ||||
|   } | ||||
| } | ||||
|  | ||||
| @ -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' | ||||
|   ) | ||||
|  | ||||
| @ -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' | ||||
|   ) | ||||
|  | ||||
|  | ||||
| @ -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' | ||||
|   ) | ||||
|  | ||||
| @ -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}') | ||||
|  | ||||
| @ -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' | ||||
|   ) | ||||
|  | ||||
|  | ||||
| @ -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) | ||||
|  | ||||
|  | ||||
| @ -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}') | ||||
|  | ||||
| @ -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' | ||||
|  | ||||
| @ -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 | ||||
|  | ||||
| @ -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') | ||||
|  | ||||
| @ -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" | ||||
|       ) | ||||
|  | ||||
| @ -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') | ||||
|  | ||||
| @ -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' | ||||
|  | ||||
| @ -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( | ||||
|  | ||||
| @ -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' | ||||
|  | ||||
| @ -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` | ||||
|  | ||||
		Reference in New Issue
	
	Block a user