px => rem

src/Squidex/app/features/apps/pages/apps-page.component.scss

@@ -2,7 +2,7 @@
 @import '_mixins';
 
 content {
-    padding: 20px;
+    padding: 1.25rem;
 }
 
 .empty {
@@ -11,13 +11,13 @@ content {
     }
 
     &-headline {
-        margin: 20px;
+        margin: 1.25rem;
-        margin-top: 100px;
+        margin-top: 6.25rem;
     }
 }
 
 .app {
     float: left;
     width: 20rem;
-    margin: 10px;
+    margin: .625rem;
 }

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

@@ -2,6 +2,10 @@
 @import '_mixins';
 
 .panel {
-    min-width: 600px;
+    min-width: 36rem;
-    max-width: 600px;
+    max-width: 36rem;
+}
+
+label {
+    margin: .4rem;
 }

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

@@ -2,6 +2,6 @@
 @import '_mixins';
 
 .panel {
-    min-width: 600px;
+    min-width: 36rem;
-    max-width: 600px;
+    max-width: 36rem;
 }

src/Squidex/app/features/content/pages/schemas/schemas-page.component.scss

@@ -2,20 +2,20 @@
 @import '_mixins';
 
 .panel {
-    min-width: 280px;
+    min-width: 20rem;
-    max-width: 280px;
+    max-width: 20rem;
 }
 
 .panel-header {
-    min-height: 120px;
+    min-height: 8rem;
-    max-height: 120px;
+    max-height: 8rem;
 }
 
 .subheader {
     @include flex-box;
     @include flex-flow(row);
     margin-top: 2rem;
-    margin-right: -40px;
+    margin-right: -2.5rem;
 }
 
 .search-form {
@@ -25,11 +25,11 @@
     }
 
     .form-control {
-        padding-left: 50px;
+        padding-left: 3rem;
     }
 
     .icon-search {
-        @include absolute(10px, auto, auto, 12px);
+        @include absolute(.625rem, auto, auto, 1rem);
         color: $color-dark-foreground-selected;
         font-size: 1.3rem;
         font-weight: lighter;

src/Squidex/app/features/dashboard/pages/dashboard-page.component.scss

@@ -2,6 +2,6 @@
 @import '_mixins';
 
 .panel {
-    min-width: 600px;
+    min-width: 36rem;
-    max-width: 600px;
+    max-width: 36rem;
 }

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

@@ -34,8 +34,8 @@ $field-header: #e7ebef;
 
 .field {
     &-summary {
-        padding: 15px 20px;
+        padding: 1rem 1.25rem;
-        line-height: 40px;
+        line-height: 2.5rem;
     }
 
     &-icon {
@@ -84,41 +84,41 @@ $field-header: #e7ebef;
 
         &::before {
             @include caret-top;
-            @include absolute(-10px, 90px, auto, auto);
+            @include absolute(-.625rem, 6rem, auto, auto);
             border-color: transparent transparent $color-border;
-            border-width: 10px;
+            border-width: .5rem;
         }
 
         &-tab {
-            padding: 15px 20px 20px;
+            padding: 1rem 1.25rem 1.25rem;
         }
 
         &-tabs {
             background: $color-border;
             position: relative;
-            padding: 15px 20px;
+            padding: 1rem 1.25rem;
         }
     }
 
     .tag {
         @include opacity(.9);
-        min-width: 60px;
+        min-width: 4rem;
-        max-width: 90px;
+        max-width: 6rem;
     }
 }
 
 .nav-field-tabs {
     & {
-        @include absolute(auto, auto, 0, 20px);
+        @include absolute(auto, auto, 0, 1.25rem);
     }
 
     & .nav-link {
         & {
             color: $color-text;
             cursor: pointer;
-            padding: 18px 10px;
+            padding: 1rem .625rem;
-            border-bottom: 4px solid transparent;
+            border-bottom: .25rem solid transparent;
-            width: 100px;
+            width: 6.25rem;
             text-align: center;
         }
 

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

@@ -2,8 +2,8 @@
 @import '_mixins';
 
 .panel {
-    min-width: 760px;
+    min-width: 48rem;
-    max-width: 760px;
+    max-width: 48rem;
 }
 
 .panel-content {

src/Squidex/app/features/schemas/pages/schema/types/boolean-validation.component.scss

@@ -7,7 +7,7 @@
     }
 
     &-label {
-        @include absolute(0, -4px, auto, auto);
+        @include absolute(0, -.25rem, auto, auto);
     }
 }
 

src/Squidex/app/features/schemas/pages/schema/types/number-validation.component.scss

@@ -7,7 +7,7 @@
     }
 
     &-label {
-        @include absolute(0, -4px, auto, auto);
+        @include absolute(0, -25rem, auto, auto);
     }
 }
 

src/Squidex/app/features/schemas/pages/schema/types/string-validation.component.scss

@@ -7,7 +7,7 @@
     }
 
     &-label {
-        @include absolute(0, -4px, auto, auto);
+        @include absolute(0, -25rem, auto, auto);
     }
 }
 

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

@@ -33,7 +33,7 @@
                             </div>
                             <div class="col-xs-4">
                                 <span class="schema-user">
-                                    <i class="icon-person"></i> <span class="schema-user-text">{{userName(schema.lastModifiedBy, true) | async}}</span>
+                                    <i class="icon-person"></i> {{userName(schema.lastModifiedBy, true) | async}}
                                 </span>
                             </div>
                             <div class="col-xs-4 schema-col-right">

src/Squidex/app/features/schemas/pages/schemas/schemas-page.component.scss

@@ -1,14 +1,16 @@
 @import '_vars';
 @import '_mixins';
 
+$button-size: 2.5rem;
+
 .panel {
-    min-width: 480px;
+    min-width: 30rem;
-    max-width: 480px;
+    max-width: 30rem;
 }
 
 .panel-header {
-    min-height: 140px;
+    min-height: 7rem;
-    max-height: 140px;
+    max-height: 6.7rem;
 }
 
 .subheader {
@@ -16,14 +18,14 @@
         @include flex-box;
         @include flex-flow(row);
         margin-top: 2rem;
-        margin-right: -40px;
+        margin-right: -2.5rem;
     }
 
     &-button {
-        height: 38px;
+        height: $button-size;
         margin-right: .4rem;
-        min-width: 38px;
+        min-width: $button-size;
-        max-width: 38px;
+        max-width: $button-size;
         padding-left: 0;
         padding-right: 0;
         font-size: 1.1rem;
@@ -37,56 +39,16 @@
     }
 
     .form-control {
-        padding-left: 50px;
+        padding-left: $button-size + 1rem;
+        height: $button-size;
     }
 
     .icon-search {
-        @include absolute(10px, auto, auto, 12px);
+        @include absolute(50%, auto, auto, .8rem);
         color: $color-dark-foreground-selected;
         font-size: 1.3rem;
         font-weight: lighter;
-    }
+        margin-top: -.6rem;
-}
-
-.btn-new {
-    & {
-        padding-left: 0;
-        background: transparent;
-        border: 0;
-        color: $color-dark-foreground-selected;
-        font-size: 1.05rem;
-    }
-
-    &:hover {
-        color: lighten($color-dark-foreground-selected, 5%);
-        outline: 0;
-    }
-
-    &:focus {
-        color: lighten($color-dark-foreground-selected, 10%);
-        outline: 0;
-    }
-
-    .icon-plus {
-        & {
-            @include circle(24px);
-            display: inline-block;
-            background: transparent;
-            border: 2px solid $color-dark-foreground-selected;
-            margin-right: .5rem;
-            font-size: .8rem;
-            font-weight: bold;
-            vertical-align: baseline;
-            line-height: 20px;
-        }
-
-        &:hover {
-            border-color: lighten($color-dark-foreground-selected, 5%);
-        }
-
-        &:focus {
-            border-color: lighten($color-dark-foreground-selected, 10%);
-        }
     }
 }
 
@@ -156,23 +118,16 @@
     }
 
     &-user {
-        & {
+        @include border-radius(1px);
-            @include border-radius(1px);
+        @include truncate;
-            display: inline-block;
+        display: inline-block;
-            background: $color-dark-background-accent;
+        background: $color-dark-background-accent;
-            padding: .1rem .3rem;
+        padding: .1rem .3rem;
-            font-size: .8rem;
+        font-size: .8rem;
-            font-weight: normal;
+        font-weight: normal;
-            margin-left: 10px;
+        margin-left: 10px;
-            max-width: 100%;
+        max-width: 100%;
-            vertical-align: baseline;
+        vertical-align: baseline;
-        }
-
-        &-text {
-            @include truncate;
-            display: inline-block;
-            vertical-align: bottom;
-        }
     }
 
     &:first-child {

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

@@ -32,14 +32,14 @@ $color-editor: #eceeef;
             @include border-radius(.25rem);
             margin: 0;
             margin-left: -.6rem;
-            height: 38px;
+            height: 2.5rem;
             padding: 0 .6rem;
             border: 0;
             background: transparent;
             font-size: 1.2rem;
             font-weight: normal;
             display: inline-block;
-            line-height: 38px;
+            line-height: 2.5rem;
         }
 
         &.enabled,
@@ -65,5 +65,5 @@ $color-editor: #eceeef;
 
 .access-token {
     resize: none;
-    height: 300px;
+    height: 18rem;
 }

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

@@ -2,13 +2,13 @@
 @import '_mixins';
 
 .panel {
-    min-width: 700px;
+    min-width: 44rem;
-    max-width: 700px;
+    max-width: 44rem;
 }
 
 .card {
     & {
-        max-width: 700px;
+        max-width: 44rem;
     }
 
     &-block {
@@ -28,5 +28,5 @@
 
 .access-token {
     resize: none;
-    height: 300px;
+    height: 18rem;
 }

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

@@ -2,8 +2,8 @@
 @import '_mixins';
 
 .panel {
-    min-width: 800px;
+    min-width: 50rem;
-    max-width: 800px;
+    max-width: 50rem;
 }
 
 .panel-content {
@@ -11,7 +11,7 @@
 }
 
 .card {
-    max-width: 700px;
+    max-width: 44rem;
 }
 
 .contributors {

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

@@ -2,13 +2,13 @@
 @import '_mixins';
 
 .panel {
-    min-width: 600px;
+    min-width: 36rem;
-    max-width: 600px;
+    max-width: 36rem;
 }
 
 .language {
     &-select {
-        max-width: 200px;
+        max-width: 12rem;
     }
 
     &-name {

src/Squidex/app/features/settings/settings-area.component.scss

@@ -2,6 +2,6 @@
 @import '_mixins';
 
 .panel {
-    min-width: 180px;
+    min-width: 12rem;
-    max-width: 180px;
+    max-width: 12rem;
 }

src/Squidex/app/framework/angular/autocomplete.component.scss

@@ -12,8 +12,8 @@ $color-input-border: rgba(0, 0, 0, .15);
         @include absolute(2px, auto, auto, 0);
         @include border-radius(.25em);
         @include box-shadow;
-        width: 300px;
+        width: 18rem;
-        max-height: 200px;
+        max-height: 12rem;
         border: 1px solid $color-input-border;
         background: $color-accent-dark;
         padding: .3rem 0;
@@ -34,14 +34,14 @@ $color-input-border: rgba(0, 0, 0, .15);
     }
 
     &-image {
-        @include circle(40px);
+        @include circle(2.5rem);
         float: left;
     }
 
     &-title,
     &-description {
         @include truncate;
-        margin-left: 45px;
+        margin-left: 3rem;
     }
 
     &-description {

src/Squidex/app/framework/angular/slider.component.scss

@@ -1,9 +1,9 @@
 @import '_mixins';
 @import '_vars';
 
-$bar-height: 12px;
+$bar-height: .8rem;
 
-$thumb-size: 20px;
+$thumb-size: 1.25rem;
 $thumb-margin: ($thumb-size - $bar-height) * .5;
 
 .slider {
@@ -12,8 +12,8 @@ $thumb-margin: ($thumb-size - $bar-height) * .5;
             @include border-radius($bar-height * .5);
             position: relative;
             border: 1px solid $color-control;
-            margin-bottom: 20px;
+            margin-bottom: 1.25rem;
-            margin-top: 5px;
+            margin-top: .25rem;
             margin-right: $thumb-size * .5;
             background: $color-accent-dark;
             height: $bar-height;

src/Squidex/app/shared/components/history.component.scss

@@ -2,8 +2,8 @@
 @import '_mixins';
 
 .panel {
-    min-width: 270px;
+    min-width: 16rem;
-    max-width: 270px;
+    max-width: 16rem;
 }
 
 .event {

src/Squidex/app/shared/services/users-provider.service.ts

@@ -44,6 +44,6 @@ export class UsersProviderService {
                     dto = new UserDto(dto.id, dto.email, me, dto.pictureUrl);
                 }
                 return dto;
-            });
+            }).share();
     }
 }

src/Squidex/app/shell/pages/app/left-menu.component.scss

@@ -14,7 +14,7 @@
     }
 
     &-icon {
-        font-size: 30px;
+        font-size: 2rem;
     }
 
     &-text {
@@ -35,7 +35,7 @@
 
     &-link {
         & {
-            padding: 20px;
+            padding: 1.25rem;
         }
 
         &.active {

src/Squidex/app/shell/pages/home/home-page.component.scss

@@ -2,18 +2,18 @@
 @import '_vars';
 
 .content {
-    margin: 100px auto;
+    margin: 8rem auto;
-    max-width: 500px;
+    max-width: 32rem;
     text-align: center;
 }
 
 .logo {
-    height: 60px;
+    height: 4rem;
 }
 
 .login {
     &-button {
-        margin: 40px 0;
+        margin: 2.5rem 0;
     }
 
     &-hint {
@@ -22,7 +22,7 @@
 }
 
 .proudly-made {
-    margin-top: 100px;
+    margin-top: 16rem;
-    font-size: 11px;
+    font-size: .8rem;
     font-style: italic;
 }

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

@@ -1,6 +1,8 @@
 @import '_vars';
 @import '_mixins';
 
+$size-arrow: .6rem;
+
 .navbar-dark {
     .navbar-nav {
         .nav-link {
@@ -14,19 +16,19 @@
 }
 
 .drodown-button {
-    padding: 3px 1.5rem;
+    padding: .25rem 1.5rem;
 }
 
 .dropdown-menu {
     & {
-        top: 44px;
+        top: $size-navbar-height - $size-arrow;
     }
 
     &::before {
-        @include absolute(-10px, auto, auto, 10px);
+        @include absolute(-$size-arrow, auto, auto, $size-arrow);
         @include caret-top;
         border-color: transparent transparent $color-accent-dark;
-        border-width: 10px;
+        border-width: $size-arrow;
     }
 }
 
@@ -40,7 +42,7 @@
     }
 
     &-pill {
-        @include absolute(6px, 10px, auto, auto);
+        @include absolute(.3rem, .625rem, auto, auto);
         background: $color-theme-blue-lighter;
         border: 0;
         color: $color-theme-blue;
@@ -52,7 +54,7 @@
         @include transition(opacity .4 ease);
         @include opacity(.95);
         @include no-selection;
-        padding-right: 15px;
+        padding-right: 1rem;
         color: $color-accent-dark;
         cursor: pointer;
     }

src/Squidex/app/shell/pages/internal/internal-area.component.scss

@@ -11,23 +11,23 @@
     padding-bottom: 0;
     margin-top: -.2rem;
     margin-bottom: -.2rem;
-    margin-right: 40px;
+    margin-right: 2.5rem;
     font-size: 1.8rem;
-    width: 70px;
+    width: 4.5rem;
 }
 
 .notification {
     &-container {
-        @include fixed(auto, 10px, 10px, auto);
+        @include fixed(auto, .625rem, .625rem, auto);
-        width: 260px;
+        width: 20rem;
         z-index: 100000;
     }
 
     &-item {
         @include border-radius;
         @include box-shadow;
-        padding: 10px;
+        padding: .625rem;
-        margin-top: 10px;
+        margin-top: .625rem;
         font-size: .8rem;
         font-weight: normal;
         color: $color-accent-dark;

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

@@ -2,6 +2,7 @@
 @import '_vars';
 
 $size-avatar: 2.2rem;
+$size-arrow: .6rem;
 
 .user {
     &-picture {
@@ -38,14 +39,14 @@ $size-avatar: 2.2rem;
 
     &-menu {
         & {
-            @include absolute(44px, 0, auto, auto);
+            @include absolute($size-navbar-height - $size-arrow, 0, auto, auto);
         }
 
         &::before {
-            @include absolute(-10px, 10px, auto, auto);
+            @include absolute(-$size-arrow, $size-arrow, auto, auto);
             @include caret-top;
             border-color: transparent transparent $color-accent-dark;
-            border-width: 10px;
+            border-width: $size-arrow;
         }
     }
 }

src/Squidex/app/shell/pages/not-found/not-found-page.component.scss

@@ -2,15 +2,15 @@
 @import '_vars';
 
 .content {
-    margin: 100px auto;
+    margin: 8rem auto;
-    max-width: 500px;
+    max-width: 32rem;
     text-align: center;
 }
 
 .logo {
-    height: 60px;
+    height: 4rem;
 }
 
 h1 {
-    margin-top: 40px;
+    margin-top: 2.5rem;
 }

src/Squidex/app/theme/_bootstrap.scss

@@ -34,21 +34,21 @@
 
     &-items {
         & {
-            margin-bottom: -4px;
+            margin-bottom: -.25rem;
         }
 
         th,
         td {
             & {
-                padding: 15px;
+                padding: 1rem;
             }
 
             &:first-child {
-                padding-left: 20px;
+                padding-left: 1.25rem;
             }
 
             &:last-child {
-                padding-right: 20px;
+                padding-right: 1.25rem;
             }
         }
 
@@ -72,32 +72,32 @@
             tr {
                 background: $color-table;
                 border: 1px solid $color-border;
-                border-bottom: 3px solid $color-border;
+                border-bottom: 2px solid $color-border;
-                margin-bottom: 10px;
+                margin-bottom: .5rem;
             }
         }
 
         &-row,
         &-footer {
-            padding: 15px 20px;
+            padding: 1rem 1.25rem;
             background: $color-table-footer;
             border: 1px solid $color-table-border;
-            border-bottom-width: 3px;
+            border-bottom-width: 2px;
         }
 
         &-row {
             background: $color-table;
-            margin-bottom: 4px;
+            margin-bottom: .25rem;
         }
 
         &-footer {
             background: $color-table-footer;
-            margin-top: 12px;
+            margin-top: .8rem;
         }
 
         .spacer {
             border: 0;
-            height: 6px;
+            height: .3rem;
         }
     }
 }
@@ -121,7 +121,7 @@
     }
 
     &::after {
-        @include absolute(auto, auto, -.8rem, 10px);
+        @include absolute(auto, auto, -.8rem, .625rem);
         content: '';
         height: 0;
         border-style: solid;
@@ -171,12 +171,12 @@ select {
 }
 
 .form-error {
-    @include border-radius(3px);
+    @include border-radius(4px);
     @include truncate;
     color: $color-accent-dark;
-    margin-top: 4px;
+    margin-top: .25rem;
-    margin-bottom: 10px;
+    margin-bottom: .5rem;
-    padding: 6px;
+    padding: .5rem;
     background: $color-theme-error;
 }
 
@@ -248,13 +248,13 @@ select {
         }
 
         @media (min-width: 576px) {
-            margin-top: 70px;
+            margin-top: 4.5rem;
         }
     }
 }
 
 .dropdown-menu {
-    @include box-shadow(0, 6px, 16px, .2px);
+    @include box-shadow(0, .3px, 16px, .2px);
     border: 0;
 }
 

src/Squidex/app/theme/_panels.scss

@@ -38,7 +38,7 @@
         min-height: $panel-header;
         max-height: $panel-header;
         position: relative;
-        padding-right: 60px;
+        padding-right: 4rem;
     }
 
     &-content {
@@ -70,7 +70,7 @@
 
     &-close {
         & {
-            @include absolute($panel-padding, $panel-padding - 2px, auto, auto);
+            @include absolute($panel-padding, $panel-padding - .125rem, auto, auto);
             font-size: 1.5rem;
             font-weight: 400;
             cursor: pointer;

src/Squidex/app/theme/_vars.scss

@@ -36,9 +36,9 @@ $color-accent-dark: #fff;
 
 $color-card-footer: #fff;
 
-$size-navbar-height: 52px;
+$size-navbar-height: 3.25rem;
-$size-sidebar-width: 100px;
+$size-sidebar-width: 6.25rem;
 
-$panel-padding: 20px;
+$panel-padding: 1.25rem;
-$panel-header: 70px;
+$panel-header: 4.6rem;
-$panel-sidebar: 61px;
+$panel-sidebar: 3.75rem;