Styles fixed.

src/Squidex/Areas/IdentityServer/Views/Profile/Profile.cshtml

@@ -106,7 +106,7 @@
                                     <input type="hidden" value="@login.LoginProvider" name="LoginProvider"/>
                                     <input type="hidden" value="@login.ProviderKey" name="ProviderKey"/>
 
-                                    <button type="submit" class="btn btn-link btn-danger btn-sm">
+                                    <button type="submit" class="btn btn-text-danger btn-sm">
                                         Remove
                                     </button>
                                 </form>

src/Squidex/app/features/administration/pages/event-consumers/event-consumers-page.component.html

@@ -6,7 +6,7 @@
     </ng-container>
 
     <ng-container menu>
-        <button class="btn btn-link btn-secondary" (click)="reload()" title="Refresh event consumers (CTRL + SHIFT + R)">
+        <button class="btn btn-text-secondary" (click)="reload()" title="Refresh event consumers (CTRL + SHIFT + R)">
             <i class="icon-reset"></i> Refresh
         </button>
 
@@ -42,13 +42,13 @@
                         <span>{{eventConsumer.position}}</span>
                     </td>
                     <td class="cell-actions-lg">
-                        <button class="btn btn-link" (click)="reset(eventConsumer)" *ngIf="!eventConsumer.isResetting" title="Reset Event Consumer">
+                        <button class="btn btn-text" (click)="reset(eventConsumer)" *ngIf="!eventConsumer.isResetting" title="Reset Event Consumer">
                             <i class="icon icon-reset"></i>
                         </button>
-                        <button class="btn btn-link" (click)="start(eventConsumer)" *ngIf="eventConsumer.isStopped" title="Start Event Consumer">
+                        <button class="btn btn-text" (click)="start(eventConsumer)" *ngIf="eventConsumer.isStopped" title="Start Event Consumer">
                             <i class="icon icon-play"></i>
                         </button>
-                        <button class="btn btn-link" (click)="stop(eventConsumer)" *ngIf="!eventConsumer.isStopped" title="Stop Event Consumer">
+                        <button class="btn btn-text" (click)="stop(eventConsumer)" *ngIf="!eventConsumer.isStopped" title="Stop Event Consumer">
                             <i class="icon icon-pause"></i>
                         </button>
                     </td>

src/Squidex/app/features/administration/pages/users/users-page.component.html

@@ -6,7 +6,7 @@
     </ng-container>
 
     <ng-container menu>
-        <button class="btn btn-link btn-secondary mr-1" (click)="reload()" title="Refresh Users (CTRL + SHIFT + R)">
+        <button class="btn btn-text-secondary mr-1" (click)="reload()" title="Refresh Users (CTRL + SHIFT + R)">
             <i class="icon-reset"></i> Refresh
         </button>
 
@@ -61,15 +61,15 @@
                             </td>
                             <td class="cell-actions">
                                 <ng-container *ngIf="!userInfo.isCurrentUser">
-                                    <button class="btn btn-link" (click)="lock(userInfo.user); $event.stopPropagation();" *ngIf="!userInfo.user.isLocked" title="Lock User">
+                                    <button class="btn btn-text" (click)="lock(userInfo.user); $event.stopPropagation();" *ngIf="!userInfo.user.isLocked" title="Lock User">
                                         <i class="icon icon-unlocked"></i>
                                     </button>
-                                    <button class="btn btn-link" (click)="unlock(userInfo.user); $event.stopPropagation();" *ngIf="userInfo.user.isLocked" title="Unlock User">
+                                    <button class="btn btn-text" (click)="unlock(userInfo.user); $event.stopPropagation();" *ngIf="userInfo.user.isLocked" title="Unlock User">
                                         <i class="icon icon-lock"></i>
                                     </button>
                                 </ng-container>
 
-                                <button *ngIf="userInfo.isCurrentUser" class="btn btn-link invisible">
+                                <button *ngIf="userInfo.isCurrentUser" class="btn btn-text invisible">
                                     &nbsp;
                                 </button>
                             </td>

src/Squidex/app/features/assets/pages/assets-page.component.html

@@ -10,7 +10,7 @@
             <div class="col-auto offset-xl-4">
                 <sqx-shortcut keys="ctrl+shift+r" (trigger)="reload()"></sqx-shortcut>
 
-                <button class="btn btn-link btn-secondary" (click)="reload()" title="Refresh Contents (CTRL + SHIFT + R)">
+                <button class="btn btn-text-secondary" (click)="reload()" title="Refresh Contents (CTRL + SHIFT + R)">
                     <i class="icon-reset"></i> Refresh
                 </button>
             </div>

src/Squidex/app/features/content/pages/content/content-field.component.html

@@ -1,6 +1,6 @@
 <div class="table-items-row" [class.invalid]="isInvalid | async">
     <div class="languages-buttons" *ngIf="field.isLocalizable && languages.length > 1">
-        <button *ngIf="!field.properties.isComplexUI" type="button" class="btn btn-secondary btn-sm btn-link mr-1" (click)="toggleShowAll()">
+        <button *ngIf="!field.properties.isComplexUI" type="button" class="btn btn-secondary btn-sm btn-text mr-1" (click)="toggleShowAll()">
             {{showAllControls ? 'Single Language' : 'All Languages'}}
         </button>
     

src/Squidex/app/features/content/pages/content/content-page.component.html

@@ -3,7 +3,7 @@
 <form [formGroup]="contentForm.form" (ngSubmit)="saveAndPublish()">
     <sqx-panel desiredWidth="*" [showSidebar]="content">
         <ng-container title>
-            <a class="btn btn-link" (click)="back()" *ngIf="!schema.isSingleton">
+            <a class="btn btn-text" (click)="back()" *ngIf="!schema.isSingleton">
                 <i class="icon-angle-left"></i>
             </a>
 

src/Squidex/app/features/content/pages/contents/contents-page.component.html

@@ -16,7 +16,7 @@
             <div class="col-auto offset-xl-4">
                 <sqx-shortcut keys="ctrl+shift+r" (trigger)="reload()"></sqx-shortcut>
 
-                <button class="btn btn-link btn-secondary" (click)="reload()" title="Refresh Contents (CTRL + SHIFT + R)">
+                <button class="btn btn-text-secondary" (click)="reload()" title="Refresh Contents (CTRL + SHIFT + R)">
                     <i class="icon-reset"></i> Refresh
                 </button>
             </div>

src/Squidex/app/features/content/shared/array-item.component.html

@@ -5,32 +5,32 @@
     
             <span class="header-text text-decent">Item #{{index + 1}}</span>
 
-            <button class="btn btn-secondary btn-link" [disabled]="isFirst" (click)="moveTop(); $event.preventDefault()">
+            <button class="btn btn-text-secondary" [disabled]="isFirst" (click)="moveTop(); $event.preventDefault()">
                 <i class="icon-caret-top"></i>
             </button>
-            <button class="btn btn-secondary btn-link" [disabled]="isFirst" (click)="moveUp(); $event.preventDefault()">
+            <button class="btn btn-text-secondary" [disabled]="isFirst" (click)="moveUp(); $event.preventDefault()">
                 <i class="icon-caret-up"></i>
             </button>
-            <button class="btn btn-secondary btn-link" [disabled]="isLast" (click)="moveDown(); $event.preventDefault()">
+            <button class="btn btn-text-secondary" [disabled]="isLast" (click)="moveDown(); $event.preventDefault()">
                 <i class="icon-caret-down"></i>
             </button>
-            <button class="btn btn-secondary btn-link" [disabled]="isLast" (click)="moveBottom(); $event.preventDefault()">
+            <button class="btn btn-text-secondary" [disabled]="isLast" (click)="moveBottom(); $event.preventDefault()">
                 <i class="icon-caret-bottom"></i>
             </button>
-            <button class="btn btn-secondary btn-link" [class.hidden]="!isHidden" (click)="toggle.emit(false); $event.preventDefault()" title="Open all items">
+            <button class="btn btn-text-secondary" [class.hidden]="!isHidden" (click)="toggle.emit(false); $event.preventDefault()" title="Open all items">
                 <i class="icon-plus-square"></i>
             </button>
-            <button class="btn btn-secondary btn-link" [class.hidden]="isHidden" (click)="toggle.emit(true); $event.preventDefault()" title="Close all items">
+            <button class="btn btn-text-secondary" [class.hidden]="isHidden" (click)="toggle.emit(true); $event.preventDefault()" title="Close all items">
                 <i class="icon-minus-square"></i>
             </button>
         </span>
 
         <span class="float-right">
-            <button type="button" class="btn btn-link btn-secondary" (click)="cloning.emit(); $event.preventDefault()">
+            <button type="button" class="btn btn-text-secondary" (click)="cloning.emit(); $event.preventDefault()">
                 <i class="icon-clone"></i>
             </button>
     
-            <button type="button" class="btn btn-link btn-danger" (click)="removing.emit(); $event.preventDefault()">
+            <button type="button" class="btn btn-text-danger" (click)="removing.emit(); $event.preventDefault()">
                 <i class="icon-bin2"></i>
             </button>
 

src/Squidex/app/features/content/shared/array-item.component.scss

@@ -18,21 +18,14 @@
     }
 }
 
-.btn-link {
-    & {
-        padding: .375rem;
-    }
+.btn-text-secondary {
+    padding: .375rem;
+}
 
-    &:disabled,
-    &.disabled {
-        background: transparent;
-    }
+.invalid {
+    border-left-color: $color-theme-error;
 }
 
 .remove {
     @include absolute(.5rem, .5rem, auto, auto);
-}
-
-.invalid {
-    border-left-color: $color-theme-error;
 }

src/Squidex/app/features/content/shared/content-item.component.html

@@ -76,7 +76,7 @@
     </button>
 </td>
 <td class="cell-actions" *ngIf="patchForm.form.dirty" (click)="shouldStop($event)">
-    <button type="button" class="btn btn-link btn-secondary btn-cancel" (click)="cancel(); $event.stopPropagation()">
+    <button type="button" class="btn btn-text-secondary btn-cancel" (click)="cancel(); $event.stopPropagation()">
         <i class="icon-close"></i>
     </button>
 </td>
@@ -87,7 +87,7 @@
 
 <td class="cell-actions" *ngIf="!isReadOnly && patchForm.form.pristine" (click)="shouldStop($event)">
     <div class="dropdown dropdown-options" *ngIf="content">
-        <button type="button" class="btn btn-link btn-secondary" (click)="dropdown.toggle(); $event.stopPropagation()" [class.active]="dropdown.isOpen | async" #optionsButton>
+        <button type="button" class="btn btn-text-secondary" (click)="dropdown.toggle(); $event.stopPropagation()" [class.active]="dropdown.isOpen | async" #optionsButton>
             <i class="icon-dots"></i>
         </button>
         <div class="dropdown-menu" *sqxModalView="dropdown;closeAlways:true" [sqxModalTarget]="optionsButton" @fade>
@@ -119,7 +119,7 @@
     </div>
 </td>
 <td class="cell-actions" *ngIf="isReference" (click)="shouldStop($event)">
-    <button type="button" class="btn btn-link btn-secondary" (click)="deleting.emit(); $event.stopPropagation()">
+    <button type="button" class="btn btn-text-secondary" (click)="deleting.emit(); $event.stopPropagation()">
         <i class="icon-close"></i>
     </button>
 </td>

src/Squidex/app/features/content/shared/contents-selector.component.html

@@ -6,7 +6,7 @@
     <ng-container tabs>
         <div class="row no-gutters">
             <div class="col-auto offset-lg-4">
-                <button class="btn btn-link btn-secondary" (click)="reload()">
+                <button class="btn btn-text-secondary" (click)="reload()">
                     <i class="icon-reset"></i> Refresh
                 </button>
             </div>

src/Squidex/app/features/rules/pages/events/rule-events-page.component.html

@@ -6,7 +6,7 @@
     </ng-container>
     
     <ng-container menu>
-        <button class="btn btn-link btn-secondary" (click)="reload()" title="Refresh Events (CTRL + SHIFT + R)">
+        <button class="btn btn-text-secondary" (click)="reload()" title="Refresh Events (CTRL + SHIFT + R)">
             <i class="icon-reset"></i> Refresh
         </button>
 

src/Squidex/app/features/rules/pages/rules/rules-page.component.html

@@ -6,7 +6,7 @@
     </ng-container>
 
     <ng-container menu>
-        <button class="btn btn-link btn-secondary mr-1" (click)="reload()" title="Refresh Assets (CTRL + SHIFT + R)">
+        <button class="btn btn-text-secondary mr-1" (click)="reload()" title="Refresh Assets (CTRL + SHIFT + R)">
             <i class="icon-reset"></i> Refresh
         </button>
 
@@ -52,7 +52,7 @@
                                 <sqx-toggle [ngModel]="rule.isEnabled" (ngModelChange)="toggle(rule)"></sqx-toggle>
                             </td>
                             <td class="cell-actions">
-                                <button type="button" class="btn btn-link btn-danger"
+                                <button type="button" class="btn btn-text-danger"
                                     (sqxConfirmClick)="delete(rule)"
                                     confirmTitle="Delete rule" 
                                     confirmText="Do you really want to delete the rule?">

src/Squidex/app/features/rules/pages/rules/triggers/asset-changed-trigger.component.html

@@ -14,19 +14,19 @@
     
         <ul class="help-examples">
             <li class="help-example">
-                Specific events: 
+                Specific events:<br/>
 
-                <pre>event.type == 'Created' || event.type == 'Updated'</pre>
+                <pre class="code">event.type == 'Created' || event.type == 'Updated'</pre>
             </li>
             <li class="help-example">
-                Large assets:
+                Large assets:<br/>
 
-                <pre>event.fileSize > 100000000</pre>
+                <pre class="code">event.fileSize > 100000000</pre>
             </li>
             <li class="help-example">
-                Images only:
+                Images only:<br/>
 
-                <pre>event.isImage</pre>
+                <pre class="code">event.isImage</pre>
             </li>
         </ul>
     </div>

src/Squidex/app/features/rules/pages/rules/triggers/asset-changed-trigger.component.scss

@@ -1,21 +1,10 @@
 @import '_vars';
 @import '_mixins';
 
-.code {
-    font-family: monospace;
-}
-
 textarea {
     height: 100px;
 }
 
-pre {
-    background: $color-border;
-    border: 0;
-    padding: .25rem .5rem;
-    margin: 0;
-}
-
 .help {
     & {
         font-size: .9rem;

src/Squidex/app/features/rules/pages/rules/triggers/content-changed-trigger.component.html

@@ -24,7 +24,7 @@
                 <input type="text" class="form-control code" [(ngModel)]="schema.condition" (blur)="updateValue()" />
             </td>
             <td class="text-center">
-                <button type="button" class="btn btn-link btn-secondary" (click)="removeSchema(schema)">
+                <button type="button" class="btn btn-text-secondary" (click)="removeSchema(schema)">
                     <i class="icon-close"></i>
                 </button>
             </td>
@@ -51,19 +51,19 @@
     
         <ul class="help-examples">
             <li class="help-example">
-                Specific events: 
+                Specific events:<br/>
 
-                <pre>event.type == 'Created' || event.type == 'Published'</pre>
+                <pre class="code">event.type == 'Created' || event.type == 'Published'</pre>
             </li>
             <li class="help-example">
-                Content has value:
+                Content has value:<br/>
 
-                <pre>event.data.important.iv === true</pre>
+                <pre class="code">event.data.important.iv === true</pre>
             </li>
             <li class="help-example">
-                Updated by user:
+                Updated by user:<br/>
                 
-                <pre>user.email === 'user@squidex.io'</pre>
+                <pre class="code">user.email === 'user@squidex.io'</pre>
             </li>
         </ul>
     </div>

src/Squidex/app/features/rules/pages/rules/triggers/content-changed-trigger.component.scss

@@ -11,21 +11,10 @@
     margin-top: 1rem;
 }
 
-.code {
-    font-family: monospace;
-}
-
 textarea {
     height: 100px;
 }
 
-pre {
-    background: $color-border;
-    border: 0;
-    padding: .25rem .5rem;
-    margin: 0;
-}
-
 .help {
     & {
         font-size: .9rem;

src/Squidex/app/features/schemas/pages/schema/field.component.html

@@ -25,7 +25,7 @@
                     </button>
 
                     <div class="dropdown dropdown-options">
-                        <button type="button" class="btn btn-link btn-secondary ml-1" (click)="dropdown.toggle()" [class.active]="dropdown.isOpen | async" #optionsButton>
+                        <button type="button" class="btn btn-text-secondary ml-1" (click)="dropdown.toggle()" [class.active]="dropdown.isOpen | async" #optionsButton>
                             <i class="icon-dots"></i>
                         </button>
                         <div class="dropdown-menu" *sqxModalView="dropdown" [sqxModalTarget]="optionsButton" @fade>

src/Squidex/app/features/schemas/pages/schema/schema-page.component.html

@@ -6,7 +6,7 @@
     </ng-container>
 
     <ng-container menu>
-        <button type="button" class="btn btn-link mr-1" (click)="exportSchemaDialog.show()">
+        <button type="button" class="btn btn-text mr-1" (click)="exportSchemaDialog.show()">
             JSON Preview
         </button>
 
@@ -20,7 +20,7 @@
         </div>
 
         <div class="dropdown dropdown-options">
-            <button type="button" class="btn btn-link btn-secondary ml-1" (click)="editOptionsDropdown.toggle()" [class.active]="editOptionsDropdown.isOpen | async" #buttonOptions>
+            <button type="button" class="btn btn-text-secondary ml-1" (click)="editOptionsDropdown.toggle()" [class.active]="editOptionsDropdown.isOpen | async" #buttonOptions>
                 <i class="icon-dots"></i>
             </button>
             <div class="dropdown-menu" *sqxModalView="editOptionsDropdown" [sqxModalTarget]="buttonOptions" @fade>

src/Squidex/app/features/schemas/pages/schema/schema-preview-urls-form.component.html

@@ -22,7 +22,7 @@
                     </div>
 
                     <div class="col-auto col-options">
-                        <button type="button" class="btn btn-link btn-delete btn-danger"
+                        <button type="button" class="btn btn-text-delete btn-danger"
                             (sqxConfirmClick)="editForm.remove(i)"
                             confirmTitle="Remove url" 
                             confirmText="Do you really want to remove this url?">
@@ -53,7 +53,7 @@
                             <i class="icon-add"></i>
                         </button>
 
-                        <button type="button" class="btn btn-link btn-secondary" (click)="cancelAdd()">
+                        <button type="button" class="btn btn-text-secondary" (click)="cancelAdd()">
                             <i class="icon-close"></i>
                         </button>
                     </div>

src/Squidex/app/features/schemas/pages/schemas/schema-form.component.html

@@ -20,8 +20,11 @@
                 <input type="text" class="form-control" id="schemaName" formControlName="name" autocomplete="off" sqxTransformInput="LowerCase" sqxFocusOnInit />
                 
                 <small class="form-text text-muted">
-                    The schema name becomes part of the api url,<br /> e.g {{apiUrl.buildUrl("api/content/")}}{{appsState.appName}}/<b>{{createForm.schemaName | async}}</b>/.
+                    The schema name becomes part of the api url:
                 </small>
+
+                <pre class="code">{{apiUrl.buildUrl("api/content/")}}{{appsState.appName}}/<b>{{createForm.schemaName | async}}</b></pre>
+
                 <small class="form-text text-muted">
                     It must contain lower case letters (a-z), numbers and dashes only, and cannot be longer than 40 characters. The name cannot be changed later.
                 </small>
@@ -68,10 +71,10 @@
             </div>
 
             <div class="form-group">
-                <a class="btn btn-sm btn-link force" (click)="toggleImport()" [class.hidden]="showImport">
+                <a class="btn btn-sm btn-text force" (click)="toggleImport()" [class.hidden]="showImport">
                     Import schema
                 </a>
-                <a class="btn btn-sm btn-link force" (click)="toggleImport()" [class.hidden]="!showImport">
+                <a class="btn btn-sm btn-text force" (click)="toggleImport()" [class.hidden]="!showImport">
                     Hide
                 </a>
         

src/Squidex/app/features/schemas/pages/schemas/schema-form.component.scss

@@ -3,7 +3,7 @@
 
 $icon-size: 4.5rem;
 
-.btn-link {
+.btn-text {
     margin-top: -1rem;
     margin-left: -.5rem;
 }

src/Squidex/app/features/settings/pages/backups/backups-page.component.html

@@ -6,7 +6,7 @@
     </ng-container>
 
     <ng-container menu>
-        <button class="btn btn-link btn-secondary mr-1" (click)="reload()" title="Refresh backups (CTRL + SHIFT + R)">
+        <button class="btn btn-text-secondary mr-1" (click)="reload()" title="Refresh backups (CTRL + SHIFT + R)">
             <i class="icon-reset"></i> Refresh
         </button>
 
@@ -79,7 +79,7 @@
                             </div>
                         </div>
                         <div class="col-auto">
-                            <button type="button" class="btn btn-link btn-danger" 
+                            <button type="button" class="btn btn-text-danger" 
                                 (sqxConfirmClick)="delete(backup)" 
                                 confirmTitle="Delete backup"
                                 confirmText="Do you really want to delete the backup?">

src/Squidex/app/features/settings/pages/clients/client.component.html

@@ -11,7 +11,7 @@
 
                     <button type="submit" class="btn btn-primary" [disabled]="!renameForm.form.valid || !renameForm.form.dirty">Save</button>
 
-                    <button class="btn btn-link btn-secondary btn-cancel" (click)="toggleRename()">
+                    <button class="btn btn-text-secondary btn-cancel" (click)="toggleRename()">
                         <i class="icon-close"></i>
                     </button>
                 </form>
@@ -31,7 +31,7 @@
             <button class="btn btn-secondary" (click)="createToken(client)">Create Token</button>
         </div>
         <div class="col-auto cell-actions">
-            <button type="button" class="btn btn-link btn-danger"
+            <button type="button" class="btn btn-text-danger"
                 (sqxConfirmClick)="revoke()"
                 confirmTitle="Revoke client" 
                 confirmText="Do you really want to revoke the client?">
@@ -47,7 +47,7 @@
             <input readonly class="form-control" value="{{appsState.appName}}:{{client.id}}" #inputName />
         </div>
         <div class="col-auto cell-actions">
-            <button type="button" class="btn btn-primary btn-link" [sqxCopy]="inputName">
+            <button type="button" class="btn btn-primary btn-text" [sqxCopy]="inputName">
                 <i class="icon-copy"></i>
             </button>
         </div>
@@ -60,7 +60,7 @@
             <input readonly class="form-control" [attr.value]="client.secret" #inputSecret />
         </div>
         <div class="col-auto cell-actions">
-            <button type="button" class="btn btn-primary btn-link" [sqxCopy]="inputSecret">
+            <button type="button" class="btn btn-primary btn-text" [sqxCopy]="inputSecret">
                 <i class="icon-copy"></i>
             </button>
         </div>

src/Squidex/app/features/settings/pages/clients/clients-page.component.html

@@ -6,7 +6,7 @@
     </ng-container>
 
     <ng-container menu>
-        <button class="btn btn-link btn-secondary" (click)="reload()" title="Refresh clients (CTRL + SHIFT + R)">
+        <button class="btn btn-text-secondary" (click)="reload()" title="Refresh clients (CTRL + SHIFT + R)">
             <i class="icon-reset"></i> Refresh
         </button>
 

src/Squidex/app/features/settings/pages/contributors/contributors-page.component.html

@@ -6,7 +6,7 @@
     </ng-container>
 
     <ng-container menu>
-        <button class="btn btn-link btn-secondary" (click)="reload()" title="Refresh contributors (CTRL + SHIFT + R)">
+        <button class="btn btn-text-secondary" (click)="reload()" title="Refresh contributors (CTRL + SHIFT + R)">
             <i class="icon-reset"></i> Refresh
         </button>
 
@@ -37,7 +37,7 @@
                                 </select>
                             </td>
                             <td class="cell-actions">
-                                <button *ngIf="!contributorInfo.isCurrentUser" type="button" class="btn btn-link btn-danger" (click)="remove(contributorInfo.contributor)">
+                                <button *ngIf="!contributorInfo.isCurrentUser" type="button" class="btn btn-text-danger" (click)="remove(contributorInfo.contributor)">
                                     <i class="icon-bin2"></i>
                                 </button>
                             </td>

src/Squidex/app/features/settings/pages/languages/language.component.html

@@ -13,7 +13,7 @@
                         <i class="icon-settings"></i>
                     </button>
 
-                    <button type="button" class="btn btn-link btn-danger" [class.invisible]="language.isMaster"
+                    <button type="button" class="btn btn-text-danger" [class.invisible]="language.isMaster"
                         (sqxConfirmClick)="remove()"
                         confirmTitle="Remove language" 
                         confirmText="Do you really want to remove the language?">
@@ -28,7 +28,7 @@
         <form [formGroup]="editForm.form" (ngSubmit)="save()">
             <div class="table-items-row-details-tabs clearfix">
                 <div class="float-right">
-                    <button type="reset" class="btn btn-link" (click)="toggleEditing()">Cancel</button>
+                    <button type="reset" class="btn btn-text" (click)="toggleEditing()">Cancel</button>
                     <button type="submit" class="btn btn-primary">Save</button>
                 </div>
             </div>
@@ -48,7 +48,7 @@
                                         {{language.englishName}}
                                     </div>
                                     <div class="col-auto">
-                                        <button type="button" class="btn btn-link btn-secondary btn-sm" (click)="removeFallbackLanguage(language)">
+                                        <button type="button" class="btn btn-text-secondary btn-sm" (click)="removeFallbackLanguage(language)">
                                             <i class="icon-close"></i>
                                         </button>
                                     </div>

src/Squidex/app/features/settings/pages/languages/languages-page.component.html

@@ -6,7 +6,7 @@
     </ng-container>
 
     <ng-container menu>
-        <button class="btn btn-link btn-secondary" (click)="reload()" title="Refresh languages (CTRL + SHIFT + R)">
+        <button class="btn btn-text-secondary" (click)="reload()" title="Refresh languages (CTRL + SHIFT + R)">
             <i class="icon-reset"></i> Refresh
         </button>
 

src/Squidex/app/features/settings/pages/patterns/pattern.component.html

@@ -24,7 +24,7 @@
                 <i class="icon-checkmark"></i>
             </button>
 
-            <button type="button" class="btn btn-link btn-danger"
+            <button type="button" class="btn btn-text-danger"
                 (sqxConfirmClick)="delete()"
                 confirmTitle="Remove pattern" 
                 confirmText="Do you really want to remove this pattern?">
@@ -37,7 +37,7 @@
                 <i class="icon-add"></i>
             </button>
 
-            <button type="reset" class="btn btn-link btn-secondary" (click)="cancel()">
+            <button type="reset" class="btn btn-text-secondary" (click)="cancel()">
                 <i class="icon-close"></i>
             </button>
         </div>

src/Squidex/app/features/settings/pages/patterns/patterns-page.component.html

@@ -6,7 +6,7 @@
     </ng-container>
 
     <ng-container menu>
-        <button class="btn btn-link btn-secondary" (click)="reload()" title="Refresh patterns (CTRL + SHIFT + R)">
+        <button class="btn btn-text-secondary" (click)="reload()" title="Refresh patterns (CTRL + SHIFT + R)">
             <i class="icon-reset"></i> Refresh
         </button>
 

src/Squidex/app/features/settings/pages/plans/plans-page.component.html

@@ -6,7 +6,7 @@
     </ng-container>
 
     <ng-container menu>
-        <button class="btn btn-link btn-secondary" (click)="reload()" title="Refresh Plans (CTRL + SHIFT + R)">
+        <button class="btn btn-text-secondary" (click)="reload()" title="Refresh Plans (CTRL + SHIFT + R)">
             <i class="icon-reset"></i> Refresh
         </button>
 
@@ -45,7 +45,7 @@
                                 </div>
                             </div>
                         
-                            <button *ngIf="planInfo.isSelected" class="btn btn-block btn-link btn-success plan-selected">
+                            <button *ngIf="planInfo.isSelected" class="btn btn-block btn-text-success plan-selected">
                                 &#10003; Selected
                             </button>
                             
@@ -60,7 +60,7 @@
                                 <small class="text-muted">Per Year</small>
                             </div>
 
-                            <button *ngIf="planInfo.isYearlySelected" class="btn btn-block btn-link btn-success plan-selected">
+                            <button *ngIf="planInfo.isYearlySelected" class="btn btn-block btn-text-success plan-selected">
                                 &#10003; Selected
                             </button>
                             

src/Squidex/app/features/settings/pages/roles/role.component.html

@@ -16,7 +16,7 @@
                         <i class="icon-settings"></i>
                     </button>
 
-                    <button type="button" class="btn btn-link btn-danger" [class.invisible]="isDefaultRole || role.numClients > 0 || role.numContributors > 0"
+                    <button type="button" class="btn btn-text-danger" [class.invisible]="isDefaultRole || role.numClients > 0 || role.numContributors > 0"
                         (sqxConfirmClick)="remove()"
                         confirmTitle="Delete role" 
                         confirmText="Do you really want to delete the role?">
@@ -31,7 +31,7 @@
         <form [formGroup]="editForm.form" (ngSubmit)="save()">
             <div class="table-items-row-details-tabs clearfix">
                 <div class="float-right">
-                    <button type="reset" class="btn btn-link" (click)="toggleEditing()">Cancel</button>
+                    <button type="reset" class="btn btn-text" (click)="toggleEditing()">Cancel</button>
                     <button type="submit" class="btn btn-primary" *ngIf="!isDefaultRole">Save</button>
                 </div>
             </div>
@@ -44,7 +44,7 @@
                         <sqx-autocomplete [formControl]="control" [source]="allPermissions"></sqx-autocomplete>
                     </div>
                     <div class="col-auto pl-1" *ngIf="!isDefaultRole">
-                        <button type="button" class="btn btn-link btn-danger" (click)="removePermission(i)">
+                        <button type="button" class="btn btn-text-danger" (click)="removePermission(i)">
                             <i class="icon-bin2"></i>
                         </button>
                     </div>

src/Squidex/app/features/settings/pages/roles/roles-page.component.html

@@ -6,7 +6,7 @@
     </ng-container>
 
     <ng-container menu>
-        <button class="btn btn-link btn-secondary" (click)="reload()" title="Refresh roles (CTRL + SHIFT + R)">
+        <button class="btn btn-text-secondary" (click)="reload()" title="Refresh roles (CTRL + SHIFT + R)">
             <i class="icon-reset"></i> Refresh
         </button>
 

src/Squidex/app/framework/angular/forms/date-time-editor.component.html

@@ -13,7 +13,7 @@
             <button class="btn btn-secondary" [disabled]="isDisabled" (click)="writeNow()">Today</button>
         </div>
         <div class="form-group" [class.hidden]="!hasValue" *ngIf="!hideClear">
-            <button class="btn btn-link clear" [disabled]="isDisabled" (click)="reset()">Clear</button>
+            <button class="btn btn-text clear" [disabled]="isDisabled" (click)="reset()">Clear</button>
         </div>
     </div>
 </div>

src/Squidex/app/framework/angular/forms/stars.component.html

@@ -8,6 +8,6 @@
             <span class="star" *ngFor="let star of starsArray" (mouseenter)="setPreview(star)" (click)="setValue(star)" [class.selected]="star <= stars"></span>
         </span>
 
-        <button class="btn btn-link" [class.hidden]="!value" (click)="reset()">Clear</button>
+        <button class="btn btn-text" [class.hidden]="!value" (click)="reset()">Clear</button>
     </ng-container>
 </div>

src/Squidex/app/framework/angular/modals/onboarding-tooltip.component.html

@@ -6,11 +6,11 @@
         </div>
 
         <div class="onboarding-buttons clearfix">
-            <button (click)="hideAll()" class="btn btn-link btn-primary btn-sm float-left">
+            <button (click)="hideAll()" class="btn btn-text-primary btn-sm float-left">
                 Stop Tour
             </button>
 
-            <button (click)="hideThis()" class="btn btn-link btn-success btn-sm float-right">
+            <button (click)="hideThis()" class="btn btn-text-success btn-sm float-right">
                 Got It
             </button>
         </div>

src/Squidex/app/framework/angular/pager.component.html

@@ -2,10 +2,10 @@
     <div class="float-right pagination">
         <span class="pagination-text">{{pager.itemFirst}}-{{pager.itemLast}} of {{pager.numberOfItems}}</span>
 
-        <button class="btn btn-link btn-secondary pagination-button" [disabled]="!pager.canGoPrev" (click)="prev.emit()">
+        <button class="btn btn-text-secondary pagination-button" [disabled]="!pager.canGoPrev" (click)="prev.emit()">
             <i class="icon-angle-left"></i>
         </button>
-        <button class="btn btn-link btn-secondary pagination-button" [disabled]="!pager.canGoNext" (click)="next.emit()">
+        <button class="btn btn-text-secondary pagination-button" [disabled]="!pager.canGoNext" (click)="next.emit()">
             <i class="icon-angle-right"></i>
         </button>
     </div>

src/Squidex/app/shared/components/app-form.component.html

@@ -21,8 +21,10 @@
                 <input type="text" class="form-control" id="appName" formControlName="name" autocomplete="off" sqxTransformInput="LowerCase" sqxFocusOnInit />
                 
                 <small class="form-text text-muted">
-                    The app name becomes part of the api url,<br /> e.g {{apiUrl.buildUrl("api/content/")}}<b>{{createForm.appName | async}}</b>/.
+                    The app name becomes part of the api url:
                 </small>
+
+                <pre class="code">{{apiUrl.buildUrl("api/content/")}}<b>{{createForm.appName | async}}</b></pre>
                     
                 <small class="form-text text-muted">
                     It must contain lower case letters (a-z), numbers and dashes only, and cannot be longer than 40 characters. The name cannot be changed later.

src/Squidex/app/shared/components/asset.component.html

@@ -115,15 +115,15 @@
                 <img class="user-picture" [attr.title]="asset.lastModifiedBy | sqxUserNameRef" [attr.src]="asset.lastModifiedBy | sqxUserPictureRef" />
             </div>
             <div class="col col-actions text-right">
-                <a class="btn btn-link btn-secondary" [attr.href]="asset | sqxAssetUrl" target="_blank" rel="noopener" (click)="$event.stopPropagation()">
+                <a class="btn btn-text-secondary" [attr.href]="asset | sqxAssetUrl" target="_blank" rel="noopener" (click)="$event.stopPropagation()">
                     <i class="icon-download"></i>
                 </a>
             </div>
             <div class="col col-actions text-right" *ngIf="!isDisabled || removeMode">
-                <button class="btn btn-link btn-danger" (click)="deleting.emit(asset); $event.stopPropagation()" *ngIf="!isDisabled && !removeMode">
+                <button class="btn btn-text-danger" (click)="deleting.emit(asset); $event.stopPropagation()" *ngIf="!isDisabled && !removeMode">
                     <i class="icon-bin2"></i>
                 </button>
-                <button class="btn btn-link btn-secondary" (click)="removing.emit(asset); $event.stopPropagation()" *ngIf="removeMode">
+                <button class="btn btn-text-secondary" (click)="removing.emit(asset); $event.stopPropagation()" *ngIf="removeMode">
                     <i class="icon-close"></i>
                 </button>
             </div>

src/Squidex/app/shared/components/assets-selector.component.html

@@ -6,7 +6,7 @@
     <ng-container tabs>
         <div class="row no-gutters">
             <div class="col-auto offset-lg-2">
-                <button class="btn btn-link btn-secondary" (click)="reload()">
+                <button class="btn btn-text-secondary" (click)="reload()">
                     <i class="icon-reset"></i> Refresh
                 </button>
             </div>

src/Squidex/app/shared/components/comment.component.html

@@ -7,7 +7,7 @@
             <div class="user-row">
                 <div class="user-ref">{{comment.user | sqxUserNameRef:null}}</div>
 
-                <button *ngIf="comment.user === userId" type="button" class="btn btn-sm btn-link btn-danger item-remove" (click)="deleting.emit()!">
+                <button *ngIf="comment.user === userId" type="button" class="btn btn-sm btn-text-danger item-remove" (click)="deleting.emit()!">
                     <i class="icon-bin2"></i>
                 </button>
             </div>

src/Squidex/app/shared/components/geolocation-editor.component.html

@@ -24,7 +24,7 @@
             </div>
 
             <div class="form-group col-auto">
-                <button [class.hidden]="!hasValue" type="reset" class="btn btn-link clear" [disabled]="isDisabled" (click)="reset()">Clear</button>
+                <button [class.hidden]="!hasValue" type="reset" class="btn btn-text clear" [disabled]="isDisabled" (click)="reset()">Clear</button>
             </div>
         </form>
     </div>

src/Squidex/app/shared/components/schema-category.component.html

@@ -2,14 +2,14 @@
     <div class="drop-indicator"></div>
 
     <div class="header clearfix">
-        <a class="btn btn-sm btn-link" (click)="toggle()">
+        <a class="btn btn-sm btn-text" (click)="toggle()">
             <i [class.icon-caret-right]="!isOpen" [class.icon-caret-down]="isOpen"></i> 
         </a>
 
         <h3>{{displayName}} ({{schemasFiltered.length}})</h3>
         
         
-        <a class="btn btn-sm btn-link float-right" *ngIf="schemasForCategory.length === 0 && !isReadonly" (click)="removing.emit()">
+        <a class="btn btn-sm btn-text float-right" *ngIf="schemasForCategory.length === 0 && !isReadonly" (click)="removing.emit()">
             <i class="icon-bin2"></i> 
         </a>
     </div>

src/Squidex/app/shell/pages/internal/apps-menu.component.html

@@ -20,7 +20,9 @@
                 <div class="dropdown-divider"></div>
     
                 <ng-container *ngIf="apps.length > 0">
-                    <a class="dropdown-item" *ngFor="let app of apps" [routerLink]="['/app', app.name]" routerLinkActive="active">{{app.name}}</a>
+                    <div class="apps-list">
+                        <a class="dropdown-item" *ngFor="let app of apps" [routerLink]="['/app', app.name]" routerLinkActive="active">{{app.name}}</a>
+                    </div>
     
                     <div class="dropdown-divider"></div>
                 </ng-container>

src/Squidex/app/shell/pages/internal/apps-menu.component.scss

@@ -45,10 +45,20 @@ $color-apps-border: #65a6ff;
     @include absolute(2.65rem, auto, auto, auto);
 }
 
+.btn-block {
+    white-space: nowrap;
+}
+
 .icon-plus {
     font-size: .8rem;
 }
 
+.apps-list {
+    max-height: 600px;
+    margin: -.5rem 0;
+    overflow-y: auto;
+}
+
 .all-apps {
     & {
         position: relative;

src/Squidex/app/theme/_bootstrap.scss

@@ -404,29 +404,29 @@ a {
     }
 
     // Link buttons only exists with blue text color in bootstrap. Provide them for all colors.
-    &-link {
+    &-text {
         & {
-            @include build-link-button($color-theme-blue);
+            @include build-text-button($color-theme-blue);
         }
 
-        &.btn-secondary {
-            @include build-link-button($color-text-decent);
+        &-secondary {
+            @include build-text-button($color-text-decent);
         }
 
-        &.btn-danger {
-            @include build-link-button($color-theme-error);
+        &-danger {
+            @include build-text-button($color-theme-error);
         }
 
-        &.btn-success {
-            @include build-link-button($color-theme-green);
+        &-success {
+            @include build-text-button($color-theme-green);
         }
 
-        &.btn-info {
-            @include build-link-button($color-theme-info);
+        &-info {
+            @include build-text-button($color-theme-info);
         }
 
-        &.btn-warning {
-            @include build-link-button($color-theme-orange);
+        &-warning {
+            @include build-text-button($color-theme-orange);
         }
     }
 }

src/Squidex/app/theme/_common.scss

@@ -30,7 +30,9 @@ body {
     color: $color-text-decent;
 }
 
+//
 // Rich editor icon. Must be placed here, because element is not created by angular.
+//
 .mce-i-assets {
     & {
         font-family: 'icomoon' !important;
@@ -45,6 +47,23 @@ body {
     font-weight: bold;
 }
 
+//
+// Code blocks
+//
+.code {
+    font-family: monospace;
+}
+
+pre {
+    &.code {
+        display: inline-block;
+        background: $color-border;
+        border: 0;
+        padding: .25rem .5rem;
+        margin: 0;
+    }
+}
+
 //
 // Profile picture in circle
 //

src/Squidex/app/theme/_lists.scss

@@ -79,7 +79,7 @@
                     color: $color-dark-foreground;
                 }
 
-                .btn-link {
+                .btn-text {
                     &,
                     &:hover {
                         // Enforce white color for links.

src/Squidex/app/theme/_mixins.scss

@@ -19,34 +19,19 @@
     }
 }
 
-@mixin build-link-button($color) {
+@mixin build-text-button($color) {
     & {
         color: $color;
-        cursor: pointer;
-        border: 1px solid transparent;
-    }
-
-    &:focus {
-        outline-color: transparent;
     }
 
     &:disabled {
         @include opacity(.4);
     }
 
-    &:disabled,
-    &.disabled {
-        cursor: not-allowed;
-        border-color: transparent;
-    }
-
     &:focus,
     &:active,
     &:hover {
         color: darken($color, 8%);
-        border-color: transparent;
-        background: transparent;
-        text-decoration: none;
     }
 }
 

src/Squidex/package-lock.json

@@ -2003,7 +2003,7 @@
       "dependencies": {
         "jsesc": {
           "version": "1.3.0",
-          "resolved": "http://registry.npmjs.org/jsesc/-/jsesc-1.3.0.tgz",
+          "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-1.3.0.tgz",
           "integrity": "sha1-RsP+yMGJKxKwgz25vHYiF226s0s=",
           "dev": true
         },
@@ -8827,7 +8827,7 @@
     },
     "node-fetch": {
       "version": "2.1.2",
-      "resolved": "http://registry.npmjs.org/node-fetch/-/node-fetch-2.1.2.tgz",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.1.2.tgz",
       "integrity": "sha1-q4hOjn5X44qUR1POxwb3iNF2i7U="
     },
     "node-forge": {
@@ -9329,7 +9329,7 @@
     },
     "p-is-promise": {
       "version": "1.1.0",
-      "resolved": "http://registry.npmjs.org/p-is-promise/-/p-is-promise-1.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/p-is-promise/-/p-is-promise-1.1.0.tgz",
       "integrity": "sha1-nJRWmJ6fZYgBewQ01WCXZ1w9oF4=",
       "dev": true
     },
@@ -12834,7 +12834,7 @@
       "dependencies": {
         "json5": {
           "version": "1.0.1",
-          "resolved": "http://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
           "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
           "dev": true,
           "requires": {
@@ -14919,7 +14919,7 @@
     },
     "whatwg-fetch": {
       "version": "2.0.4",
-      "resolved": "http://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-2.0.4.tgz",
+      "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-2.0.4.tgz",
       "integrity": "sha512-dcQ1GWpOD/eEQ97k66aiEVpNnapVj90/+R+SXTPYGHpYBBypfKJEQjLrvMZ7YXbKm21gXd4NcuxUTjiv1YtLng=="
     },
     "which": {

src/Squidex/wwwroot/theme.html

@@ -137,12 +137,12 @@
                     </p>
 
                     <p class="bs-component">
-                        <button type="button" class="btn btn-link btn-primary">Primary</button>
-                        <button type="button" class="btn btn-link btn-secondary">Secondary</button>
-                        <button type="button" class="btn btn-link btn-success">Success</button>
-                        <button type="button" class="btn btn-link btn-info">Info</button>
-                        <button type="button" class="btn btn-link btn-warning">Warning</button>
-                        <button type="button" class="btn btn-link btn-danger">Danger</button>
+                        <button type="button" class="btn btn-text-primary">Primary</button>
+                        <button type="button" class="btn btn-text-secondary">Secondary</button>
+                        <button type="button" class="btn btn-text-success">Success</button>
+                        <button type="button" class="btn btn-text-info">Info</button>
+                        <button type="button" class="btn btn-text-warning">Warning</button>
+                        <button type="button" class="btn btn-text-danger">Danger</button>
                     </p>
 
                     <p class="bs-component">