diff --git a/src/app/appmarket/admin/configuration/details/configurationdetails.component.css b/src/app/appmarket/admin/configuration/details/configurationdetails.component.css index c9567c8a9c5d7e270418a6165614927a11017739..6b01f61e84c42a3288190177527289c01feef943 100644 --- a/src/app/appmarket/admin/configuration/details/configurationdetails.component.css +++ b/src/app/appmarket/admin/configuration/details/configurationdetails.component.css @@ -19,7 +19,7 @@ .email-row { display: flex; flex-direction: row; - justify-content: space-between; + } .pd-top-7 { diff --git a/src/app/appmarket/admin/configuration/details/configurationdetails.component.html b/src/app/appmarket/admin/configuration/details/configurationdetails.component.html index 120f90dc214c1069294c29a1ea17b387dc260d4a..88759cba6893a58f16e52225d8ebf84acba6de52 100644 --- a/src/app/appmarket/admin/configuration/details/configurationdetails.component.html +++ b/src/app/appmarket/admin/configuration/details/configurationdetails.component.html @@ -68,11 +68,11 @@ [(ngModel)]="configuration.appInstanceFailureEmailList[i]"/> </div> - <button role="button" type="button" class="btn btn-danger" (click)="removeEmailEntry(email)"> - Remove + <button role="button" type="button" class="btn btn-danger-text" (click)="removeEmailEntry(email)"> + <i class="pi pi-trash" style="font-size: 15px;"></i> </button> </div> - <div class="pd-left-15"> + <div class=""> <button role="button" type="button" class="btn btn-secondary" (click)="addEmailEntry()">Add </button> </div> diff --git a/src/app/appmarket/admin/languagemanagement/languagedetails/languagedetails.component.css b/src/app/appmarket/admin/languagemanagement/languagedetails/languagedetails.component.css index 8a6b91ca0475b84e33414390291ea190f1fc2a79..86e8b4a0dfa840977ee8e78c061b64791e164a15 100644 --- a/src/app/appmarket/admin/languagemanagement/languagedetails/languagedetails.component.css +++ b/src/app/appmarket/admin/languagemanagement/languagedetails/languagedetails.component.css @@ -7,4 +7,7 @@ h3{ padding-top: 15px; margin-bottom: 0; padding-bottom: 0; -} \ No newline at end of file +} +:host .table-striped>tbody>tr:nth-of-type(odd){ + background: transparent; +} diff --git a/src/app/appmarket/admin/languagemanagement/languagedetails/languagedetails.component.html b/src/app/appmarket/admin/languagemanagement/languagedetails/languagedetails.component.html index ea34b0aed3d99fa3eac1f1f7f258f9b5956dfeb7..d4c7f0fc6241186e68ebdef0e6fc16bf3a528181 100644 --- a/src/app/appmarket/admin/languagemanagement/languagedetails/languagedetails.component.html +++ b/src/app/appmarket/admin/languagemanagement/languagedetails/languagedetails.component.html @@ -1,13 +1,11 @@ -<h1></h1> <h2 *ngIf="language"><img alt="language" src="assets/images/country/{{language.language}}_circle.png" style="height: 32px;"> {{'LANGUAGE.' + language.language.toUpperCase() + '_LABEL' | translate}}</h2> <label for="advanced-switch">{{switchLabel}}</label> <br> <p-inputSwitch [(ngModel)]="advanced" id="advanced-switch" name="advanced-switch" (onChange)="handleLabel()"></p-inputSwitch> <div *ngIf="language && !advanced"> <h3>{{ 'LANGUAGE_MANAGEMENT.LABELS_TRANSLATION' | translate }}</h3> - <hr> <div *ngFor="let key of keys; let ix=index"> - <div class="panel panel-default"> + <div class=" background-section" style="padding: 10px"> <div class="panel-heading" (click)="hide[ix]=!hide[ix]">{{key.toString()}}</div> <table class="table table-striped" *ngIf="!hide[ix]" aria-describedby="Language values table"> <thead> @@ -64,9 +62,8 @@ </div> </div> <h3>{{ 'LANGUAGE_MANAGEMENT.MAILS_TRANSLATION' | translate }}</h3> - <hr> <div *ngFor="let template of mailTemplates; let ix=index"> - <div class="panel panel-default"> + <div class=" background-section" style="padding: 10px"> <div class="panel-heading" (click)="hideMails[ix]=!hideMails[ix]">{{template.mailType}}</div> <div class="panel-body" *ngIf="!hideMails[ix]"> <label for="subject-textarea">{{'LANGUAGE_MANAGEMENT.SUBJECT_LABEL' | translate}}</label> @@ -92,7 +89,7 @@ </div> <div *ngIf="language && advanced"> - <div class="panel panel-default"> + <div class=" background-section" style="padding: 10px"> <div class="panel-heading">{{'LANGUAGE_MANAGEMENT.LABELS_TRANSLATION' | translate }}</div> <div class="panel-body"> <textarea style="width:100%;" class="form-control" [rows]="50" [(ngModel)]="language.content" name="content-textarea"></textarea> diff --git a/src/app/appmarket/admin/webhook/webhook-list/webhook-list.component.html b/src/app/appmarket/admin/webhook/webhook-list/webhook-list.component.html index 6f59c32bce19eb322433692517bd9ef81d56761e..0b4290e633856dcbda8c4698df07d948a89f210c 100644 --- a/src/app/appmarket/admin/webhook/webhook-list/webhook-list.component.html +++ b/src/app/appmarket/admin/webhook/webhook-list/webhook-list.component.html @@ -37,28 +37,28 @@ <th pSortableColumn="type" id="type"> {{ 'WEBHOOKS.TYPE' | translate }} <p-sortIcon field="type"></p-sortIcon> </th> - <th></th> +<!-- <th></th>--> </tr> </ng-template> <ng-template pTemplate="body" let-webhook> <tr> <td [routerLink]="[webhook.id]">{{webhook.id}}</td> - <td>{{webhook.name}}</td> - <td>{{('WEBHOOKS.' + webhook.eventType.toString().toUpperCase() ) | translate}}</td> - <td>{{webhook.targetUrl}}</td> + <td [routerLink]="[webhook.id]">{{webhook.name}}</td> + <td [routerLink]="[webhook.id]">{{('WEBHOOKS.' + webhook.eventType.toString().toUpperCase() ) | translate}}</td> + <td [routerLink]="[webhook.id]">{{webhook.targetUrl}}</td> - <td class="text-right"> - <span class="dropdown"> - <a style="display: inline-block" class="dropdown-toggle" aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" href="#" role="button"> - <em class="pi pi-cog" style="font-size: 1.8rem; color: var(--l-text-color)"></em> - </a> - <ul class="dropdown-menu pull-right-drop" > - <li><a [routerLink]="[ webhook.id]" class=""> - {{ 'WEBHOOKS.DETAILS' | translate }}</a> - </li> - </ul> - </span> - </td> +<!-- <td class="text-right">--> +<!-- <span class="dropdown">--> +<!-- <a style="display: inline-block" class="dropdown-toggle" aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" href="#" role="button">--> +<!-- <em class="pi pi-cog" style="font-size: 1.8rem; color: var(--l-text-color)"></em>--> +<!-- </a>--> +<!-- <ul class="dropdown-menu pull-right-drop" >--> +<!-- <li><a [routerLink]="[ webhook.id]" class="">--> +<!-- {{ 'WEBHOOKS.DETAILS' | translate }}</a>--> +<!-- </li>--> +<!-- </ul>--> +<!-- </span>--> +<!-- </td>--> </tr> </ng-template> </p-table> diff --git a/src/app/appmarket/appinstance/appinstancelist/appinstancelist.component.html b/src/app/appmarket/appinstance/appinstancelist/appinstancelist.component.html index e2e0bfa73612cd9b31dac8e6494b820a7ecd7a41..9ebd86b5aff1deba6a6fdf8e19c0a1365b59fe89 100644 --- a/src/app/appmarket/appinstance/appinstancelist/appinstancelist.component.html +++ b/src/app/appmarket/appinstance/appinstancelist/appinstancelist.component.html @@ -41,16 +41,16 @@ <ng-template pTemplate="header"> <tr> - <th>{{ 'APP_INSTANCES.NAME' | translate }}</th> - <th>{{ 'APP_INSTANCES.APPLICATION' | translate }}</th> - <th>{{ 'APP_INSTANCES.VERSION' | translate }}</th> - <th *ngIf="domainId === undefined || domainId === domainService.getGlobalDomainId()"> + <th style="width:15%">{{ 'APP_INSTANCES.NAME' | translate }}</th> + <th style="width:10%">{{ 'APP_INSTANCES.APPLICATION' | translate }}</th> + <th style="width:10%">{{ 'APP_INSTANCES.VERSION' | translate }}</th> + <th style="width:20%" *ngIf="domainId === undefined || domainId === domainService.getGlobalDomainId()"> {{ 'APP_INSTANCES.DOMAIN' | translate }} </th> - <th>{{ 'APP_INSTANCES.OWNER' | translate }}</th> - <th>{{ 'APP_INSTANCES.DEPLOYED_AT' | translate }}</th> - <th>{{ 'APP_INSTANCES.STATE' | translate }}</th> - <th></th> + <th style="width:20%">{{ 'APP_INSTANCES.OWNER' | translate }}</th> + <th style="width:15%">{{ 'APP_INSTANCES.DEPLOYED_AT' | translate }}</th> + <th style="width:10%">{{ 'APP_INSTANCES.STATE' | translate }}</th> +<!-- <th></th>--> </tr> </ng-template> @@ -66,11 +66,11 @@ <td>{{ appInstance?.owner?.username }}</td> <td>{{ appInstance?.createdAt | localDate:'dd-MM-yyyy HH:mm' }}</td> <td>{{ translateState(appInstance?.state) }}</td> - <td> - <ng-container *ngIf="appInstance?.upgradePossible"> - <span class="pi pi-arrow-circle-up"></span> - </ng-container> - </td> +<!-- <td>--> +<!-- <ng-container *ngIf="appInstance?.upgradePossible">--> +<!-- <span class="pi pi-arrow-circle-up"></span>--> +<!-- </ng-container>--> +<!-- </td>--> </tr> </ng-template> </p-table> @@ -129,20 +129,22 @@ [responsiveLayout]="'scroll'" aria-describedby="Undeployed instances"> <ng-template pTemplate="header"> <tr> - <th>{{ 'APP_INSTANCES.NAME' | translate }}</th> - <th>{{ 'APP_INSTANCES.APPLICATION' | translate }}</th> - <th *ngIf="domainId === undefined || domainId === domainService.getGlobalDomainId()"> + <th style="width:15%">{{ 'APP_INSTANCES.NAME' | translate }}</th> + <th style="width:10%">{{ 'APP_INSTANCES.APPLICATION' | translate }}</th> + <th style="width:10%"></th> + <th style="width:20%" *ngIf="domainId === undefined || domainId === domainService.getGlobalDomainId()"> {{ 'APP_INSTANCES.DOMAIN' | translate }} </th> - <th>{{ 'APP_INSTANCES.OWNER' | translate }}</th> - <th>{{ 'APP_INSTANCES.DEPLOYED_AT' | translate }}</th> - <th>{{ 'APP_INSTANCES.STATE' | translate }}</th> + <th style="width:20%">{{ 'APP_INSTANCES.OWNER' | translate }}</th> + <th style="width:15%">{{ 'APP_INSTANCES.DEPLOYED_AT' | translate }}</th> + <th style="width:10%">{{ 'APP_INSTANCES.STATE' | translate }}</th> </tr> </ng-template> <ng-template pTemplate="body" let-appInstance> <tr [ngClass]="{'clickable': true}" [routerLink]="[appInstance.id]"> <td>{{ appInstance?.name }}</td> <td>{{ appInstance?.applicationName }}</td> + <td></td> <td *ngIf="domainId === undefined || domainId === domainService.getGlobalDomainId()"> {{ appInstance?.domainName }} </td> diff --git a/src/app/appmarket/appinstance/appinstancelist/appinstancelist.component.ts b/src/app/appmarket/appinstance/appinstancelist/appinstancelist.component.ts index c81c76f21997933419b999402eaf4d2c86caa155..6b92e2be15b18e447a3ec82cce010fc28284471a 100644 --- a/src/app/appmarket/appinstance/appinstancelist/appinstancelist.component.ts +++ b/src/app/appmarket/appinstance/appinstancelist/appinstancelist.component.ts @@ -86,6 +86,9 @@ export class AppInstanceListComponent implements OnInit { if (ls !== undefined) { this.listSelection = ls; this.showMy = ls === AppInstanceListSelection.MY; + } else { + this.listSelection = AppInstanceListSelection.ALL; + sessionStorage.setItem(this.list_selection_key, AppInstanceListSelection[this.listSelection]); } console.log(this.listSelection); this.userDataService.selectedDomainId.subscribe(domainId => { diff --git a/src/app/appmarket/domains/domain-group-view/domain-group-view.component.css b/src/app/appmarket/domains/domain-group-view/domain-group-view.component.css index f3f33d37c2d8eab6c3f93feb1b495adb0b167e4b..f6cf8a7bd5173c99e19217d24101e283fc7e004f 100644 --- a/src/app/appmarket/domains/domain-group-view/domain-group-view.component.css +++ b/src/app/appmarket/domains/domain-group-view/domain-group-view.component.css @@ -80,5 +80,7 @@ input.ng-dirty.ng-invalid { .margin-right { margin-right: 2rem; } - +td{ + vertical-align: middle; +} diff --git a/src/app/appmarket/domains/domain-group-view/domain-group-view.component.html b/src/app/appmarket/domains/domain-group-view/domain-group-view.component.html index 56d68346cc403a477bb1ce1a6a05d258bbaa0e54..4646916b61c3a21703813a6cebad855a939048cf 100644 --- a/src/app/appmarket/domains/domain-group-view/domain-group-view.component.html +++ b/src/app/appmarket/domains/domain-group-view/domain-group-view.component.html @@ -39,21 +39,17 @@ <h4 style="font-size:15px; font-weight: bold"> {{ 'DOMAINS.GROUP.ACCESS_USER' | translate }} </h4> - <div *roles="['ROLE_SYSTEM_ADMIN']" style="display: flex; justify-content: end"> - <button type="button" class="btn btn-text" (click)="showModalUser()">{{'DOMAINS.GROUP.ADD_USERS' | translate}}</button> - </div> - <div *roles="['ROLE_VL_MANAGER']" style="display: flex; justify-content: end"> - <button type="button" class="btn btn-warning" (click)="removeMyAccess()">{{'DOMAINS.GROUP.DELETE_MYSELF' | translate}}</button> + <div style="display: flex; gap:10px;"> + <div *roles="['ROLE_SYSTEM_ADMIN']" style="display: flex; justify-content: end"> + <button type="button" class="btn btn-text" (click)="showModalUser()">{{'DOMAINS.GROUP.ADD_USERS' | translate}}</button> + </div> + <div *roles="['ROLE_VL_MANAGER']" style="display: flex; justify-content: end;"> + <button type="button" class="btn btn-danger" (click)="removeMyAccess()">{{'DOMAINS.GROUP.DELETE_MYSELF' | translate}}</button> + </div> </div> </div> </div> <div class="panel-body"> - <div *roles="['ROLE_SYSTEM_ADMIN']" style="display: flex; justify-content: end"> - <button type="button" class="btn btn-secondary" (click)="showModalUser()">{{'DOMAINS.GROUP.ADD_USERS' | translate}}</button> - </div> - <div *roles="['ROLE_GROUP_MANAGER']" style="display: flex; justify-content: end"> - <button type="button" class="btn btn-warning" (click)="removeMyAccess()">{{'DOMAINS.GROUP.DELETE_MYSELF' | translate}}</button> - </div> <table class="table table-hover table-condensed" aria-describedby="Domains in Group table" style="margin-top: 2rem"> <thead> <tr> @@ -65,9 +61,12 @@ <tr class="table-row"> <td style="width: 40%" >{{user.username}}</td> <td style="width: 40%" >{{user.firstname}} {{user.lastname}}</td> - <td class="flex justify-content-end"> - <div class="flex"> - <button *roles="['ROLE_SYSTEM_ADMIN']" type="button" class="btn btn-danger" (click)="deleteUserAccess(user)">{{'DOMAINS.GROUP.DELETE_USER' | translate}}</button> + <td style="text-align:end"> + <div class=""> + <button *roles="['ROLE_SYSTEM_ADMIN']" type="button" class="btn btn-danger-text" (click)="deleteUserAccess(user)"> + <i class="pi pi-trash" style="font-size: 15px;"></i> +<!-- {{'DOMAINS.GROUP.DELETE_USER' | translate}}--> + </button> </div> </td> @@ -80,18 +79,18 @@ </div> - <div *ngIf="!this.addingMode" class="panel panel-default" style="margin-top: 3rem"> + <div *ngIf="!this.addingMode" class="background-section " style="margin-top: 3rem"> <div class="panel-heading"> - <div style="display: flex; justify-content: space-between; align-items: center"> - <div> + <div style="display: flex; justify-content: space-between; align-items: center" > + <h4 style="font-size:15px; font-weight: bold"> {{ 'DOMAINS.LIST.LIST' | translate }} - </div> + </h4> <button class="btn pull-right toggle-button" data-toggle="collapse" [attr.data-target]="'#domains-list'" type="button" aria-expanded="false"> </button> </div> </div> <div class="panel-body collapse" id="domains-list"> <div style="display: flex; justify-content: end"> - <button type="button" class="btn btn-secondary" (click)="showModal()">{{'DOMAINS.LIST.ADD' | translate}}</button> + <button type="button" class="btn btn-text" (click)="showModal()">{{'DOMAINS.LIST.ADD' | translate}}</button> </div> <table class="table table-hover table-condensed" aria-describedby="Domains in Group table" style="margin-top: 2rem"> <thead> @@ -104,8 +103,11 @@ <tr class="table-row"> <td style="width: 40%" >{{domain.name}}</td> <td style="width: 40%" >{{domain.codename}}</td> - <td class="flex justify-content-end"> - <button type="button" class="btn btn-danger" (click)="deleteDomainFromGroup(domain)">{{'DOMAINS.LIST.DELETE' | translate}}</button> + <td style="text-align: end"> + <button type="button" class="btn btn-danger-text" (click)="deleteDomainFromGroup(domain)"> + <i class="pi pi-trash" style="font-size: 15px;"></i> +<!-- {{'DOMAINS.LIST.DELETE' | translate}}--> + </button> </td> </tr> </ng-template> @@ -114,20 +116,20 @@ </div> </div> - <div *ngIf="!this.addingMode" class="panel panel-default" style="margin-top: 3rem"> + <div *ngIf="!this.addingMode" class="background-section" style="margin-top: 3rem"> <div class="panel-heading"> <div style="display: flex; justify-content: space-between; align-items: center"> - <div> + <h4 style="font-size:15px; font-weight: bold"> {{ 'DOMAIN_DETAILS.APP_STATUS' | translate }} - </div> + </h4> <button class="btn pull-right toggle-button" data-toggle="collapse" [attr.data-target]="'#app-status'" type="button" aria-expanded="false"> </button> </div> </div> <div class="panel-body collapse" id="app-status" > <div style="display: flex; justify-content: end; margin-bottom: 2rem"> - <button class="btn btn-secondary" type="button" (click)="toggleAll()">{{'SHARED.TOGGLE' | translate}}</button> + <button class="btn btn-text" type="button" (click)="toggleAll()">{{'SHARED.TOGGLE' | translate}}</button> </div> <table class="table table-hover table-condensed" aria-describedby="Domain details table"> <thead> diff --git a/src/app/shared/left-menu/left-menu.component.html b/src/app/shared/left-menu/left-menu.component.html index e6d42129afd36bf4e7eac24996e0cdd34bb8d01e..0ffb376416ef1b55b20371eec117a5d59586bbc5 100644 --- a/src/app/shared/left-menu/left-menu.component.html +++ b/src/app/shared/left-menu/left-menu.component.html @@ -151,7 +151,7 @@ </span> </a> </li> - <li *roles="['ROLE_SYSTEM_ADMIN']" (click)="showNotificationModal()" [ngClass]="{'collapsed': isCollapsed}"> + <li *roles="['ROLE_SYSTEM_ADMIN']" (click)="showNotificationModal()" [ngClass]="{'collapsed': isCollapsed}" style="cursor:pointer"> <i class="pi pi-send" style="margin-right:10px; font-size: 18px" title="{{ 'NAVBAR.ALL_USERS' | translate }}"></i> <span *ngIf="!isCollapsed">{{ 'NAVBAR.ALL_USERS' | translate }}</span> </li> diff --git a/src/app/shared/users/privileges/userprivileges.component.html b/src/app/shared/users/privileges/userprivileges.component.html index 7650923db2f690c9ced1014950efa51b63bedd5c..6feca4009dc2629fe8b8eeb758489bd1561579f3 100644 --- a/src/app/shared/users/privileges/userprivileges.component.html +++ b/src/app/shared/users/privileges/userprivileges.component.html @@ -1,10 +1,10 @@ <div style="padding-bottom: 15px;" class="background-section"> <h4 style="font-size:15px; font-weight: bold" >{{'USER_PRIVILEGES.HEADER' | translate}}</h4> <div class="panel-body"> - <div *ngIf="isModeAllowed(ComponentMode.CREATE) && user != null && user.username !== authService.getUsername()"> <!-- user should not be able to change his roles --> + <div style="margin-bottom: 3rem" *ngIf="isModeAllowed(ComponentMode.CREATE) && user != null && user.username !== authService.getUsername()"> <!-- user should not be able to change his roles --> <form *ngIf="user" [formGroup]="newPrivilegeForm" (submit)="add()" class="form-inline row"> - <div *ngIf="domainId" class="form-group col-lg-3"> - <label for="domainId">{{'USER_PRIVILEGES.DOMAIN' | translate}}:</label> + <div *ngIf="domainId" class="form-group col-lg-3" > + <label style="margin-right:10px" for="domainId" >{{'USER_PRIVILEGES.DOMAIN' | translate}}:</label> <select class="form-control" [formGroup]="newPrivilegeForm" id="domainId" name="domainId" formControlName="domainId" style="min-width: 170px" [attr.disabled]="domainId!==domainService.getGlobalDomainId()? '' : null" @@ -14,7 +14,7 @@ </div> <div class="form-group col-lg-3"> - <label for="role" >{{'USER_PRIVILEGES.ROLE' | translate}}:</label> + <label style="margin-right:10px" for="role" >{{'USER_PRIVILEGES.ROLE' | translate}}:</label> <select class="form-control" [formGroup]="newPrivilegeForm" id="role" name="role" formControlName="role" style="min-width: 170px"> @@ -27,7 +27,7 @@ <button type="submit" class="btn btn-primary">{{'USER_PRIVILEGES.ADD_BUTTON' | translate}}</button> </div> </form> - <hr> + </div> <div *ngIf="isOnlyGuestInGlobalDomain()"> @@ -51,8 +51,11 @@ <td>{{userrole.domainName}}</td> <td>{{"ENUM.USER_ROLES." + userrole.role.toUpperCase() | translate}}</td> <td *ngIf="!isInMode(ComponentMode.PROFILVIEW) && authService.hasRole('ROLE_SYSTEM_ADMIN') && user?.username !== authService.getUsername()" class="text-right"> - <button type="button" class="btn btn-danger" - (click)="remove(user.id, userrole.role, userrole.domainId)">{{'USER_PRIVILEGES.REMOVE_BUTTON' | translate}}</button> + <button type="button" class="btn btn-danger-text" + (click)="remove(user.id, userrole.role, userrole.domainId)"> + <i class="pi pi-trash" style="font-size: 15px;"></i> +<!-- {{'USER_PRIVILEGES.REMOVE_BUTTON' | translate}}--> + </button> </td> </tr> </ng-template> diff --git a/src/styles.css b/src/styles.css index db65041caea971378fc49f73f4c65e48d62c3875..d9cbb09a513649cca725e8c9d0c0808eed95bf95 100644 --- a/src/styles.css +++ b/src/styles.css @@ -161,6 +161,14 @@ .btn-danger{ background: var(--danger-button-color); } +.btn-danger-text{ + color: var(--danger-text-button-color); + background: transparent; +} +.btn-danger-text:hover{ + color: var(--danger-button-hover); + background: var(--danger-text-button-background-hover); +} .btn-text{ color: var(--primary-text-button-color); background: transparent; @@ -245,4 +253,7 @@ body .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon{ .grecaptcha-badge { visibility: hidden; bottom: 45px !important; -} \ No newline at end of file +} +body .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th{ + vertical-align: middle; +}