Color unification

9 years ago · 0f49ebc4ef
14 changed files with 32 additions and 36 deletions
--- a/src/Squidex/app/features/administration/pages/users/users-page.component.html
+++ b/src/Squidex/app/features/administration/pages/users/users-page.component.html
@ -4,7 +4,7 @@
    <div class="panel-header">
        <div class="panel-title-row">
            <div class="float-right">
-                <button class="btn btn-decent" (click)="load(true)" title="Refresh Users (CTRL + SHIFT + R)">
+                <button class="btn btn-link btn-decent" (click)="load(true)" title="Refresh Users (CTRL + SHIFT + R)">
                    <i class="icon-reset"></i> Refresh
                </button>

@ -82,10 +82,10 @@
                <div class="float-right pagination">
                    <span class="pagination-text">{{usersPager.itemFirst}}-{{usersPager.itemLast}} of {{usersPager.numberOfItems}}</span>

-                    <button class="btn btn-decent pagination-button" [disabled]="!usersPager.canGoPrev" (click)="goPrev()">
+                    <button class="btn btn-link btn-decent pagination-button" [disabled]="!usersPager.canGoPrev" (click)="goPrev()">
                        <i class="icon-angle-left"></i>
                    </button>
-                    <button class="btn btn-decent pagination-button" [disabled]="!usersPager.canGoNext" (click)="goNext()">
+                    <button class="btn btn-link btn-decent pagination-button" [disabled]="!usersPager.canGoNext" (click)="goNext()">
                        <i class="icon-angle-right"></i>
                    </button>
                </div>
--- a/src/Squidex/app/features/assets/pages/assets-page.component.html
+++ b/src/Squidex/app/features/assets/pages/assets-page.component.html
@ -4,7 +4,7 @@
    <div class="panel-header">
        <div class="panel-title-row">
            <div class="float-right">
-                <button class="btn btn-decent" (click)="load(true)" title="Refresh Assets (CTRL + SHIFT + R)">
+                <button class="btn btn-link btn-decent" (click)="load(true)" title="Refresh Assets (CTRL + SHIFT + R)">
                    <i class="icon-reset"></i> Refresh
                </button>

@ -56,10 +56,10 @@
                <div class="float-right pagination">
                    <span class="pagination-text">{{assetsPager.itemFirst}}-{{assetsPager.itemLast}} of {{assetsPager.numberOfItems}}</span>

-                    <button class="btn btn-decent pagination-button" [disabled]="!assetsPager.canGoPrev" (click)="goPrev()">
+                    <button class="btn btn-link btn-decent pagination-button" [disabled]="!assetsPager.canGoPrev" (click)="goPrev()">
                        <i class="icon-angle-left"></i>
                    </button>
-                    <button class="btn btn-decent pagination-button" [disabled]="!assetsPager.canGoNext" (click)="goNext()">
+                    <button class="btn btn-link btn-decent pagination-button" [disabled]="!assetsPager.canGoNext" (click)="goNext()">
                        <i class="icon-angle-right"></i>
                    </button>
                </div>
--- a/src/Squidex/app/features/content/pages/contents/content-item.component.html
+++ b/src/Squidex/app/features/content/pages/contents/content-item.component.html
@ -12,7 +12,7 @@
 </td>
 <td>
    <div class="dropdown dropdown-options" *ngIf="content">
-        <button type="button" class="btn btn-decent" (click)="dropdown.toggle(); $event.stopPropagation()" [class.active]="dropdown.isOpen | async">
+        <button type="button" class="btn btn-link btn-decent" (click)="dropdown.toggle(); $event.stopPropagation()" [class.active]="dropdown.isOpen | async">
            <i class="icon-dots"></i>
        </button>
        <div class="dropdown-menu" *sqxModalView="dropdown" closeAlways="true" [@fade]>
--- a/src/Squidex/app/features/content/pages/contents/contents-page.component.html
+++ b/src/Squidex/app/features/content/pages/contents/contents-page.component.html
@ -4,7 +4,7 @@
    <div class="panel-header">
        <div class="panel-title-row">
            <div class="float-right">
-                <button class="btn btn-decent" (click)="load(true)" title="Refresh Contents (CTRL + SHIFT + R)">
+                <button class="btn btn-link btn-decent" (click)="load(true)" title="Refresh Contents (CTRL + SHIFT + R)">
                    <i class="icon-reset"></i> Refresh
                </button>

@ -77,10 +77,10 @@
                <div class="float-right pagination">
                    <span class="pagination-text">{{contentsPager.itemFirst}}-{{contentsPager.itemLast}} of {{contentsPager.numberOfItems}}</span>

-                    <button class="btn btn-decent pagination-button" [disabled]="!contentsPager.canGoPrev" (click)="goPrev()">
+                    <button class="btn btn-link btn-decent pagination-button" [disabled]="!contentsPager.canGoPrev" (click)="goPrev()">
                        <i class="icon-angle-left"></i>
                    </button>
-                    <button class="btn btn-decent pagination-button" [disabled]="!contentsPager.canGoNext" (click)="goNext()">
+                    <button class="btn btn-link btn-decent pagination-button" [disabled]="!contentsPager.canGoNext" (click)="goNext()">
                        <i class="icon-angle-right"></i>
                    </button>
                </div>
--- a/src/Squidex/app/features/schemas/pages/schema/field.component.html
+++ b/src/Squidex/app/features/schemas/pages/schema/field.component.html
@ -22,7 +22,7 @@
                    </button>

                    <div class="dropdown dropdown-options">
-                        <button type="button" class="btn btn-decent" (click)="dropdown.toggle()" [class.active]="dropdown.isOpen | async">
+                        <button type="button" class="btn btn-link btn-decent" (click)="dropdown.toggle()" [class.active]="dropdown.isOpen | async">
                            <i class="icon-dots"></i>
                        </button>
                        <div class="dropdown-menu" *sqxModalView="dropdown" closeAlways="true" [@fade]>
--- a/src/Squidex/app/features/schemas/pages/schema/field.component.scss
+++ b/src/Squidex/app/features/schemas/pages/schema/field.component.scss
@ -17,7 +17,7 @@ $field-header: #e7ebef;
    }

    &-hidden {
-        color: $color-border-dark;
+        color: $color-subtext;
    }

    .tag {
--- a/src/Squidex/app/features/schemas/pages/schema/schema-page.component.html
+++ b/src/Squidex/app/features/schemas/pages/schema/schema-page.component.html
@ -14,7 +14,7 @@
                </div>

               <div class="dropdown dropdown-options">
-                    <button type="button" class="btn btn-decent btn-sm" (click)="editOptionsDropdown.toggle()" [class.active]="editOptionsDropdown.isOpen | async">
+                    <button type="button" class="btn btn-link btn-decent btn-sm" (click)="editOptionsDropdown.toggle()" [class.active]="editOptionsDropdown.isOpen | async">
                        <i class="icon-dots"></i>
                    </button>
                    <div class="dropdown-menu" *sqxModalView="editOptionsDropdown" closeAlways="true" [@fade]>
--- a/src/Squidex/app/features/settings/pages/clients/client.component.html
+++ b/src/Squidex/app/features/settings/pages/clients/client.component.html
@ -22,7 +22,7 @@

                        <button type="submit" class="btn btn-primary" [disabled]="!renameForm.valid">Save</button>

-                        <button class="btn btn-decent btn-cancel" (click)="cancelRename()">
+                        <button class="btn btn-link btn-decent btn-cancel" (click)="cancelRename()">
                            <i class="icon-close"></i>
                        </button>
                    </form>
--- a/src/Squidex/app/features/settings/pages/clients/clients-page.component.html
+++ b/src/Squidex/app/features/settings/pages/clients/clients-page.component.html
@ -13,7 +13,7 @@

    <div class="panel-main">
        <div class="panel-content panel-content-scroll">
-            <div class="table-items-row" *ngIf="appClients && appClients.length === 0">
+            <div class="table-items-row table-items-row-empty" *ngIf="appClients && appClients.length === 0">
                No client created yet.
            </div>

--- a/src/Squidex/app/features/settings/pages/languages/language.component.html
+++ b/src/Squidex/app/features/settings/pages/languages/language.component.html
@ -2,10 +2,10 @@
    <div class="table-items-row-summary">        
        <div class="row">
            <div class="col col-2">
-                <span class="language-code" [class.language-master]="language.isMaster">{{language.iso2Code}}</span>
+                <span class="language-code" [class.language-optional]="language.isOptional" [class.language-master]="language.isMaster">{{language.iso2Code}}</span>
            </div>
            <div class="col col-6">
-                <span class="language-name" [class.language-master]="language.isMaster">{{language.englishName}}</span>
+                <span class="language-name" [class.language-optional]="language.isOptional" [class.language-master]="language.isMaster">{{language.englishName}}</span>
            </div>
            <div class="col col-4">
                <div class="float-right">
--- a/src/Squidex/app/features/settings/pages/languages/language.component.scss
+++ b/src/Squidex/app/features/settings/pages/languages/language.component.scss
@ -11,16 +11,16 @@ $field-header: #e7ebef;
    &-master {
        font-weight: bold;
    }
+
+    &-optional {
+        color: $color-subtext;
+    }
 }

 .btn-danger {
    width: 3.2rem;
 }

-.master {
-    font-weight: bold;
-}
-
 .fallback {
    &-languages {
        @include border-radius;
--- a/src/Squidex/app/theme/_bootstrap.scss
+++ b/src/Squidex/app/theme/_bootstrap.scss
@ -167,18 +167,6 @@ body {
 }

 .btn {
-    &-decent {
-        & {
-            background: transparent;
-            color: $color-border-dark;
-        }
-
-        &:hover,
-        &.active {
-            color: $color-text;
-        }
-    }
-
    &-cancel {
        padding: .4rem;
        font-size: 1.1rem;
@ -241,6 +229,10 @@ body {
        &.btn-success {
            @include link-button($color-theme-green);
        }
+
+        &.btn-decent {
+            @include link-button($color-subtext);
+        }
    }
 }

--- a/src/Squidex/app/theme/_lists.scss
+++ b/src/Squidex/app/theme/_lists.scss
@ -86,6 +86,10 @@
            padding: 0;
        }

+        &-empty {
+            color: $color-empty;
+        }
+
        &-details {
            & {
                position: relative;
--- a/src/Squidex/app/theme/_vars.scss
+++ b/src/Squidex/app/theme/_vars.scss
@ -6,8 +6,8 @@ $color-border-dark: darken($color-border, 20%);
 $color-title: #000;
 $color-text: #373a3c;
 $color-text-decent: #a9b2bb;
-$color-subtext: #818181;
-$color-empty: #949494;
+$color-subtext: $color-text-decent;
+$color-empty: $color-text-decent;
 $color-control: rgba(0, 0, 0, .15);
 $color-input: #dbe4eb;
 $color-disabled: #eef1f4;
@ -45,7 +45,7 @@ $color-panel-icon: #a2b0b6;
 $color-table: #fff;
 $color-table-footer: #ecf2f6;
 $color-table-border: #e9ecef;
-$color-table-header: #a0a0a0;
+$color-table-header: $color-text-decent;

 $color-modal-header-background: #2e3842;
 $color-modal-header-foreground: #6a7681;