Custom scroll bar colors and preparation for tables.

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

@@ -33,7 +33,7 @@ $color-editor: #eceeef;
 }
 
 .cell-actions {
-    width: 3.2rem;
+    @include force-width(3.2rem);
 }
 
 .cell-input {

src/Squidex/app/framework/declarations.ts

@@ -67,6 +67,7 @@ export * from './angular/scroll-active.directive';
 export * from './angular/shortcut.component';
 export * from './angular/sorted.directive';
 export * from './angular/stop-click.directive';
+export * from './angular/sync-scrolling.directive';
 export * from './angular/template-wrapper.directive';
 export * from './angular/title.component';
 

src/Squidex/app/framework/module.ts

@@ -82,6 +82,7 @@ import {
     SortedDirective,
     StarsComponent,
     StopClickDirective,
+    SyncScollingDirective,
     TagEditorComponent,
     TemplateWrapperDirective,
     TitleComponent,
@@ -157,6 +158,7 @@ import {
         SortedDirective,
         StarsComponent,
         StopClickDirective,
+        SyncScollingDirective,
         TagEditorComponent,
         TemplateWrapperDirective,
         TitleComponent,
@@ -226,6 +228,7 @@ import {
         SortedDirective,
         StarsComponent,
         StopClickDirective,
+        SyncScollingDirective,
         TagEditorComponent,
         TemplateWrapperDirective,
         TitleComponent,

src/Squidex/app/theme/_common.scss

@@ -15,6 +15,8 @@ body {
     }
 }
 
+@include scrollbars(10px, $color-dark2-placeholder, transparent);
+
 // Common style for user email.
 .user-email {
     font-style: italic;

src/Squidex/app/theme/_lists.scss

@@ -184,39 +184,39 @@
 //
 .cell {
     &-40 {
-        width: 40%;
+        @include force-width(40%);
     }
 
     &-60 {
-        width: 60%;
+        @include force-width(60%);
     }
 
     &-select {
-        width: 50px;
+        @include force-width(50px);
     }
 
     &-label {
-        width: 100px;
+        @include force-width(100px);
     }
 
     &-separator {
-        width: 60px;
+        @include force-width(60px);
     }
 
     &-user {
-        width: 55px;
+        @include force-width(55px);
     }
 
     &-time {
-        width: 160px;
+        @include force-width(160px);
     }
 
     &-actions {
-        width: 70px;
+        @include force-width(70px);
     }
 
     &-actions-lg {
-        width: 150px;
+        @include force-width(150px);
     }
 
     &-separator,

src/Squidex/app/theme/_mixins.scss

@@ -40,11 +40,32 @@
     }
 }
 
+@mixin scrollbars($size, $foreground-color, $background-color: mix($foreground-color, white, 50%)) {
+    &::-webkit-scrollbar {
+        width:  $size;
+        height: $size;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background: $foreground-color;
+    }
+
+    &::-webkit-scrollbar-track {
+        background: $background-color;
+    }
+
+    & {
+        scrollbar-face-color: $foreground-color;
+        scrollbar-track-color: $background-color;
+    }
+}
+
+
 @mixin clearfix() {
     &::after {
         content: '';
-        display: table;
         clear: both;
+        display: table;
     }
 }
 
@@ -55,6 +76,12 @@
     position: absolute;
 }
 
+@mixin force-width($width) {
+    min-width: $width;
+    max-width: $width;
+    width:  $width;
+}
+
 @mixin flex-box {
     display: -webkit-box;
     display: -webkit-flex;
@@ -160,8 +187,10 @@
 
 @mixin caret() {
     display: inline-block;
-      width: 0;
-     height: 0;
+    min-width: 0;
+    max-width: 0;
+    min-height: 0;
+    max-height: 0;
     content: '';
 }
  

src/Squidex/app/theme/_panels.scss

@@ -28,6 +28,7 @@
     @include fixed($size-navbar-height, 0, 0, $size-sidebar-width);
     overflow-x: auto;
     overflow-y: hidden;
+    @include scrollbars(10px, $color-dark2-placeholder);
 }
 
 //