px => rem

9 years ago · 599a0e3343
30 changed files with 144 additions and 182 deletions
--- a/src/Squidex/app/features/apps/pages/apps-page.component.scss
+++ b/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-top: 100px;
+        margin: 1.25rem;
+        margin-top: 6.25rem;
    }
 }

 .app {
    float: left;
    width: 20rem;
-    margin: 10px;
+    margin: .625rem;
 }
--- a/src/Squidex/app/features/content/pages/content/content-page.component.scss
+++ b/src/Squidex/app/features/content/pages/content/content-page.component.scss
@ -2,6 +2,10 @@
@import '_mixins';

 .panel {
-    min-width: 600px;
-    max-width: 600px;
+    min-width: 36rem;
+    max-width: 36rem;
+}
+
+label {
+    margin: .4rem;
 }
--- a/src/Squidex/app/features/content/pages/contents/contents-page.component.scss
+++ b/src/Squidex/app/features/content/pages/contents/contents-page.component.scss
@ -2,6 +2,6 @@
@import '_mixins';

 .panel {
-    min-width: 600px;
-    max-width: 600px;
+    min-width: 36rem;
+    max-width: 36rem;
 }
--- a/src/Squidex/app/features/content/pages/schemas/schemas-page.component.scss
+++ b/src/Squidex/app/features/content/pages/schemas/schemas-page.component.scss
@ -2,20 +2,20 @@
@import '_mixins';

 .panel {
-    min-width: 280px;
-    max-width: 280px;
+    min-width: 20rem;
+    max-width: 20rem;
 }

 .panel-header {
-    min-height: 120px;
-    max-height: 120px;
+    min-height: 8rem;
+    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;
--- a/src/Squidex/app/features/dashboard/pages/dashboard-page.component.scss
+++ b/src/Squidex/app/features/dashboard/pages/dashboard-page.component.scss
@ -2,6 +2,6 @@
@import '_mixins';

 .panel {
-    min-width: 600px;
-    max-width: 600px;
+    min-width: 36rem;
+    max-width: 36rem;
 }
--- a/src/Squidex/app/features/schemas/pages/schema/field.component.scss
+++ b/src/Squidex/app/features/schemas/pages/schema/field.component.scss
@ -34,8 +34,8 @@ $field-header: #e7ebef;

 .field {
    &-summary {
-        padding: 15px 20px;
-        line-height: 40px;
+        padding: 1rem 1.25rem;
+        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;
-        max-width: 90px;
+        min-width: 4rem;
+        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;
-            border-bottom: 4px solid transparent;
-            width: 100px;
+            padding: 1rem .625rem;
+            border-bottom: .25rem solid transparent;
+            width: 6.25rem;
            text-align: center;
        }

--- a/src/Squidex/app/features/schemas/pages/schema/schema-page.component.scss
+++ b/src/Squidex/app/features/schemas/pages/schema/schema-page.component.scss
@ -2,8 +2,8 @@
@import '_mixins';

 .panel {
-    min-width: 760px;
-    max-width: 760px;
+    min-width: 48rem;
+    max-width: 48rem;
 }

 .panel-content {
--- a/src/Squidex/app/features/schemas/pages/schema/types/boolean-validation.component.scss
+++ b/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);
    }
 }

--- a/src/Squidex/app/features/schemas/pages/schema/types/number-validation.component.scss
+++ b/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);
    }
 }

--- a/src/Squidex/app/features/schemas/pages/schema/types/string-validation.component.scss
+++ b/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);
    }
 }

--- a/src/Squidex/app/features/schemas/pages/schemas/schemas-page.component.html
+++ b/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">
--- a/src/Squidex/app/features/schemas/pages/schemas/schemas-page.component.scss
+++ b/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;
-    max-width: 480px;
+    min-width: 30rem;
+    max-width: 30rem;
 }

 .panel-header {
-    min-height: 140px;
-    max-height: 140px;
+    min-height: 7rem;
+    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;
-        max-width: 38px;
+        min-width: $button-size;
+        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;
-    }
-}
-
-.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%);
-        }
+        margin-top: -.6rem;
    }
 }

@ -156,23 +118,16 @@
    }

    &-user {
-        & {
-            @include border-radius(1px);
-            display: inline-block;
-            background: $color-dark-background-accent;
-            padding: .1rem .3rem;
-            font-size: .8rem;
-            font-weight: normal;
-            margin-left: 10px;
-            max-width: 100%;
-            vertical-align: baseline;
-        }
-
-        &-text {
-            @include truncate;
-            display: inline-block;
-            vertical-align: bottom;
-        }
+        @include border-radius(1px);
+        @include truncate;
+        display: inline-block;
+        background: $color-dark-background-accent;
+        padding: .1rem .3rem;
+        font-size: .8rem;
+        font-weight: normal;
+        margin-left: 10px;
+        max-width: 100%;
+        vertical-align: baseline;
    }

    &:first-child {
--- a/src/Squidex/app/features/settings/pages/clients/client.component.scss
+++ b/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;
 }
--- a/src/Squidex/app/features/settings/pages/clients/clients-page.component.scss
+++ b/src/Squidex/app/features/settings/pages/clients/clients-page.component.scss
@ -2,13 +2,13 @@
@import '_mixins';

 .panel {
-    min-width: 700px;
-    max-width: 700px;
+    min-width: 44rem;
+    max-width: 44rem;
 }

 .card {
    & {
-        max-width: 700px;
+        max-width: 44rem;
    }

    &-block {
@ -28,5 +28,5 @@

 .access-token {
    resize: none;
-    height: 300px;
+    height: 18rem;
 }
--- a/src/Squidex/app/features/settings/pages/contributors/contributors-page.component.scss
+++ b/src/Squidex/app/features/settings/pages/contributors/contributors-page.component.scss
@ -2,8 +2,8 @@
@import '_mixins';

 .panel {
-    min-width: 800px;
-    max-width: 800px;
+    min-width: 50rem;
+    max-width: 50rem;
 }

 .panel-content {
@ -11,7 +11,7 @@
 }

 .card {
-    max-width: 700px;
+    max-width: 44rem;
 }

 .contributors {
--- a/src/Squidex/app/features/settings/pages/languages/languages-page.component.scss
+++ b/src/Squidex/app/features/settings/pages/languages/languages-page.component.scss
@ -2,13 +2,13 @@
@import '_mixins';

 .panel {
-    min-width: 600px;
-    max-width: 600px;
+    min-width: 36rem;
+    max-width: 36rem;
 }

 .language {
    &-select {
-        max-width: 200px;
+        max-width: 12rem;
    }

    &-name {
--- a/src/Squidex/app/features/settings/settings-area.component.scss
+++ b/src/Squidex/app/features/settings/settings-area.component.scss
@ -2,6 +2,6 @@
@import '_mixins';

 .panel {
-    min-width: 180px;
-    max-width: 180px;
+    min-width: 12rem;
+    max-width: 12rem;
 }
--- a/src/Squidex/app/framework/angular/autocomplete.component.scss
+++ b/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;
-        max-height: 200px;
+        width: 18rem;
+        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 {
--- a/src/Squidex/app/framework/angular/slider.component.scss
+++ b/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-top: 5px;
+            margin-bottom: 1.25rem;
+            margin-top: .25rem;
            margin-right: $thumb-size * .5;
            background: $color-accent-dark;
            height: $bar-height;
--- a/src/Squidex/app/shared/components/history.component.scss
+++ b/src/Squidex/app/shared/components/history.component.scss
@ -2,8 +2,8 @@
@import '_mixins';

 .panel {
-    min-width: 270px;
-    max-width: 270px;
+    min-width: 16rem;
+    max-width: 16rem;
 }

 .event {
--- a/src/Squidex/app/shared/services/users-provider.service.ts
+++ b/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();
    }
 }
--- a/src/Squidex/app/shell/pages/app/left-menu.component.scss
+++ b/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 {
--- a/src/Squidex/app/shell/pages/home/home-page.component.scss
+++ b/src/Squidex/app/shell/pages/home/home-page.component.scss
@ -2,18 +2,18 @@
@import '_vars';

 .content {
-    margin: 100px auto;
-    max-width: 500px;
+    margin: 8rem auto;
+    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;
-    font-size: 11px;
+    margin-top: 16rem;
+    font-size: .8rem;
    font-style: italic;
 }
--- a/src/Squidex/app/shell/pages/internal/apps-menu.component.scss
+++ b/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;
    }
--- a/src/Squidex/app/shell/pages/internal/internal-area.component.scss
+++ b/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);
-        width: 260px;
+        @include fixed(auto, .625rem, .625rem, auto);
+        width: 20rem;
        z-index: 100000;
    }

    &-item {
        @include border-radius;
        @include box-shadow;
-        padding: 10px;
-        margin-top: 10px;
+        padding: .625rem;
+        margin-top: .625rem;
        font-size: .8rem;
        font-weight: normal;
        color: $color-accent-dark;
--- a/src/Squidex/app/shell/pages/internal/profile-menu.component.scss
+++ b/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;
        }
    }
 }
--- a/src/Squidex/app/shell/pages/not-found/not-found-page.component.scss
+++ b/src/Squidex/app/shell/pages/not-found/not-found-page.component.scss
@ -2,15 +2,15 @@
@import '_vars';

 .content {
-    margin: 100px auto;
-    max-width: 500px;
+    margin: 8rem auto;
+    max-width: 32rem;
    text-align: center;
 }

 .logo {
-    height: 60px;
+    height: 4rem;
 }

 h1 {
-    margin-top: 40px;
+    margin-top: 2.5rem;
 }
--- a/src/Squidex/app/theme/_bootstrap.scss
+++ b/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;
-                margin-bottom: 10px;
+                border-bottom: 2px solid $color-border;
+                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-bottom: 10px;
-    padding: 6px;
+    margin-top: .25rem;
+    margin-bottom: .5rem;
+    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;
 }

--- a/src/Squidex/app/theme/_panels.scss
+++ b/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;
--- a/src/Squidex/app/theme/_vars.scss
+++ b/src/Squidex/app/theme/_vars.scss
@ -36,9 +36,9 @@ $color-accent-dark: #fff;

 $color-card-footer: #fff;

-$size-navbar-height: 52px;
-$size-sidebar-width: 100px;
+$size-navbar-height: 3.25rem;
+$size-sidebar-width: 6.25rem;

-$panel-padding: 20px;
-$panel-header: 70px;
-$panel-sidebar: 61px;
+$panel-padding: 1.25rem;
+$panel-header: 4.6rem;
+$panel-sidebar: 3.75rem;