From 627dc8ef89c13fa091d0e943a2e19190896637b5 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Sat, 17 Dec 2016 14:47:53 +0100 Subject: [PATCH] Vars cleanup --- .../schemas/pages/schemas-page.component.html | 42 ++++++++-- .../schemas/pages/schemas-page.component.scss | 73 +++++++++++++++++- .../schemas/pages/schemas-page.component.ts | 13 +++- .../shell/pages/app/left-menu.component.html | 8 +- .../shell/pages/app/left-menu.component.scss | 50 ++++-------- src/Squidex/app/theme/_bootstrap.scss | 73 +++++++----------- src/Squidex/app/theme/_vars.scss | 14 +--- .../app/theme/icomoon/fonts/icomoon.eot | Bin 4128 -> 4256 bytes .../app/theme/icomoon/fonts/icomoon.svg | 1 + .../app/theme/icomoon/fonts/icomoon.ttf | Bin 3964 -> 4092 bytes .../app/theme/icomoon/fonts/icomoon.woff | Bin 4040 -> 4168 bytes src/Squidex/app/theme/icomoon/selection.json | 27 +++++++ src/Squidex/app/theme/icomoon/style.css | 13 ++-- 13 files changed, 209 insertions(+), 105 deletions(-) diff --git a/src/Squidex/app/features/schemas/pages/schemas-page.component.html b/src/Squidex/app/features/schemas/pages/schemas-page.component.html index 4065255cd..bf77e8bbe 100644 --- a/src/Squidex/app/features/schemas/pages/schemas-page.component.html +++ b/src/Squidex/app/features/schemas/pages/schemas-page.component.html @@ -1,14 +1,46 @@ -
+
-

Schemas

+
+

Schemas

- - - + + + +
+
+
+ +
+
+ + + +
+
+ asdasd
+
+ +
+
+
+
+ + +

Create Schema

+
+ +
+
+
+
\ No newline at end of file diff --git a/src/Squidex/app/features/schemas/pages/schemas-page.component.scss b/src/Squidex/app/features/schemas/pages/schemas-page.component.scss index 83df9045e..fb77971f2 100644 --- a/src/Squidex/app/features/schemas/pages/schemas-page.component.scss +++ b/src/Squidex/app/features/schemas/pages/schemas-page.component.scss @@ -2,6 +2,75 @@ @import '_mixins'; .panel { - min-width: 600px; - max-width: 600px; + min-width: 450px; + max-width: 450px; +} + +.panel-header { + min-height: 150px; + max-height: 150px; +} + +.subheader { + margin-top: 1rem; + margin-right: -40px; +} + +.search-form { + & { + position: relative; + margin-top: .5rem; + } + + .form-control { + padding-left: 50px; + } + + .icon-search { + @include absolute(8px, auto, auto, 12px); + color: $color-accent-dark; + font-size: 1.3rem; + font-weight: lighter; + } +} + +.btn-new { + & { + padding-left: 0; + background: transparent; + border: 0; + color: darken($color-accent-dark, 15%); + font-size: 1.05rem; + } + + &:hover { + color: darken($color-accent-dark, 5%); + outline: 0; + } + + &:focus { + color: $color-accent-dark; + outline: 0; + } + + .icon-plus { + & { + @include circle(24px); + background: transparent; + border: 2px solid darken($color-accent-dark, 15%); + font-size: .8rem; + font-weight: bold; + vertical-align: baseline; + line-height: 20px; + display: inline-block; + } + + &:hover { + border-color: darken($color-accent-dark, 5%); + } + + &:focus { + border-color: $color-accent-dark; + } + } } \ No newline at end of file diff --git a/src/Squidex/app/features/schemas/pages/schemas-page.component.ts b/src/Squidex/app/features/schemas/pages/schemas-page.component.ts index 151203a06..4150517cb 100644 --- a/src/Squidex/app/features/schemas/pages/schemas-page.component.ts +++ b/src/Squidex/app/features/schemas/pages/schemas-page.component.ts @@ -10,6 +10,8 @@ import { Component } from '@angular/core'; import { AppComponentBase, AppsStoreService, + fadeAnimation, + ModalView, NotificationService, UsersProviderService } from 'shared'; @@ -17,11 +19,20 @@ import { @Component({ selector: 'sqx-schemas-page', styleUrls: ['./schemas-page.component.scss'], - templateUrl: './schemas-page.component.html' + templateUrl: './schemas-page.component.html', + animations: [ + fadeAnimation + ] }) export class SchemasPageComponent extends AppComponentBase { + public modalDialog = new ModalView(); + constructor(apps: AppsStoreService, notifications: NotificationService, users: UsersProviderService) { super(apps, notifications, users); } + + public createSchema() { + this.modalDialog.show(); + } } diff --git a/src/Squidex/app/shell/pages/app/left-menu.component.html b/src/Squidex/app/shell/pages/app/left-menu.component.html index f17306f05..5cb772d73 100644 --- a/src/Squidex/app/shell/pages/app/left-menu.component.html +++ b/src/Squidex/app/shell/pages/app/left-menu.component.html @@ -1,21 +1,21 @@
    -
  • +
  • Schemas
    • -
  • +
  • Content
    • -
  • +
  • Media
    • -
  • +
  • Settings diff --git a/src/Squidex/app/shell/pages/app/left-menu.component.scss b/src/Squidex/app/shell/pages/app/left-menu.component.scss index 963011e2b..cc574619e 100644 --- a/src/Squidex/app/shell/pages/app/left-menu.component.scss +++ b/src/Squidex/app/shell/pages/app/left-menu.component.scss @@ -8,30 +8,9 @@ z-index: 100; } - -@mixin build-item($color) { - .nav-link { - &.active { - & { - background: $color-dark-selected; - } - - i { - color: $color; - } - } - } - - &:hover { - i { - color: $color; - } - } -} - .nav { - &-link { - padding: 20px; + & { + text-align: center; } &-icon { @@ -45,23 +24,28 @@ &-item { & { color: $color-dark-foreground; - text-align: center; } - &--media { - @include build-item($color-section-media); + &:hover { + i { + color: $color-theme-blue; + } } + } - &--content { - @include build-item($color-section-content); + &-link { + & { + padding: 20px; } - &--schemas { - @include build-item($color-section-schemas); - } + &.active { + & { + background: $color-theme-blue-dark; + } - &--settings { - @include build-item($color-section-settings); + i { + color: $color-theme-blue; + } } } } \ No newline at end of file diff --git a/src/Squidex/app/theme/_bootstrap.scss b/src/Squidex/app/theme/_bootstrap.scss index b08165ab0..e33069379 100644 --- a/src/Squidex/app/theme/_bootstrap.scss +++ b/src/Squidex/app/theme/_bootstrap.scss @@ -98,20 +98,6 @@ } } -.form-hint { - font-size: .8rem; -} - -.form-error { - @include border-radius(3px); - @include truncate; - color: $color-accent-dark; - margin-top: 4px; - margin-bottom: 10px; - padding: 6px; - background: $color-theme-error; -} - .ng-invalid { &.ng-dirty { & { @@ -153,45 +139,46 @@ } } +.form-hint { + font-size: .8rem; +} + +.form-error { + @include border-radius(3px); + @include truncate; + color: $color-accent-dark; + margin-top: 4px; + margin-bottom: 10px; + padding: 6px; + background: $color-theme-error; +} + .form-group { &:last-child { margin: 0; } } -.modal { - &-content, - &-header { +.form-control-dark { + & { + @include transition(background-color .3s ease); + @include placeholder-color(darken($color-accent-dark, 30%)); + background: lighten($color-dark-background, 5%); border: 0; + color: darken($color-accent-dark, 20%); } - &-header { - @include border-radius-top(.3rem); - background: $color-modal-header-background; - - h4 { - color: $color-modal-header-foreground; - font-size: 1rem; - font-weight: normal; - } - - .close { - & { - @include opacity(1); - @include text-shadow-none; - color: $color-modal-header-foreground; - font-size: 1.6rem; - font-weight: 400; - } - - &:hover { - color: lighten($color-modal-header-foreground, 15%); - } - } + &:focus { + background: lighten($color-dark-background, 7%); + border: 0; + color: $color-accent-dark; } +} +.modal { &-content { @include box-shadow(0, 6px, 16px, .4); + border: 0; } &-dialog { @@ -269,13 +256,13 @@ &.active { & { @include border-radius(0); - background: $color-dark-selected; - pointer-events: none; + background: $color-dark-background-selected; + border: 0; color: lighten($color-dark-foreground, 30%); } &:hover { - background: $color-dark-selected; + background: $color-dark-background-selected; } } } diff --git a/src/Squidex/app/theme/_vars.scss b/src/Squidex/app/theme/_vars.scss index f8bbcf407..5fb4df0cb 100644 --- a/src/Squidex/app/theme/_vars.scss +++ b/src/Squidex/app/theme/_vars.scss @@ -1,16 +1,9 @@ -$color-nav-text: #333; - $color-background: #f4f8f9; $color-border: #dbe4eb; $color-text: #373a3c; $color-empty: #777; -$color-section-media: #ab6eee; -$color-section-settings: #ff5800; -$color-section-content: #07a6ff; -$color-section-schemas: #00e200; - $color-theme-blue: #438cef; $color-theme-blue-dark: #3f83df; $color-theme-blue-light: #a1c6f7; @@ -22,9 +15,9 @@ $color-theme-green-dark: #47b353; $color-theme-error: #f00; $color-theme-error-dark: darken($color-theme-error, 5%); -$color-dark-background: #2e3842; -$color-dark-selected: #273039; $color-dark-foreground: #6a7681; +$color-dark-background: #2e3842; +$color-dark-background-selected: #273039; $color-modal-header-background: #2e3842; $color-modal-header-foreground: #6a7681; @@ -38,8 +31,5 @@ $color-accent-dark: #fff; $color-card-footer: #fff; -$padding-layout-h: 30px; -$padding-layout-v: 20px; - $size-navbar-height: 52px; $size-sidebar-width: 100px; diff --git a/src/Squidex/app/theme/icomoon/fonts/icomoon.eot b/src/Squidex/app/theme/icomoon/fonts/icomoon.eot index 69167196f82c113592faa1cd61c58f0486123796..f483e66981c3888a64b69c70573f7d6895aaa70f 100644 GIT binary patch delta 471 zcmZ3Wut1S@fdB);pNXvIEXTLpIjLjcw>O-%rbxi98N5uK>idUUnL{Aq{8h0^9dk-2aq3-lb@U@ zc}^^gfq{<$$k)nEtSDfRVK@)un*jL=d5O8HGrc%}1Nk99JK75Ji%S@ofievIcR=zC z%*>2$C#Nv>GH-jyI9ZBGdNMzgo;15Si`XBrXJQY;?u(rjJ0w;kmMxYhx&x?@adIM) z%;W+l&ds$k delta 315 zcmZ3WxIlqbL4bjwW+JOOi)zEJTN5411q&G%81?{hLUL|mK@w9u^TZP}_12s#OBfg! zA22X*vt*BadQ$iD)#qpcvnxP*ZjD8s-X1CnQ8 zW@dadIfb#8dFxBY$x=+xllhtSq}jxo#eR!D6}vBXPwb4?L9uGFEU{G4?Ldu;lM|U_ zCKoVqZmwlwVch(anV(DM)~*KCcz&C&K<9%DX1G!%#0#S*tMHjK3QvyVlb&47XRp9G ogK-n%112}7EljVN<(QW-zha4CImar)+Qh&J)FQn39^WBG02^XY#{d8T diff --git a/src/Squidex/app/theme/icomoon/fonts/icomoon.svg b/src/Squidex/app/theme/icomoon/fonts/icomoon.svg index 010d488b6..3e7908cfe 100644 --- a/src/Squidex/app/theme/icomoon/fonts/icomoon.svg +++ b/src/Squidex/app/theme/icomoon/fonts/icomoon.svg @@ -9,6 +9,7 @@ + diff --git a/src/Squidex/app/theme/icomoon/fonts/icomoon.ttf b/src/Squidex/app/theme/icomoon/fonts/icomoon.ttf index 95c49587b10b60fc85526f4628e53f9388eba456..2fe26f2e5a0871b36e2fc62a7224618fca70aefc 100644 GIT binary patch delta 456 zcmew(_eZ{-fsuiMft#U$ftkU;KUm+0Ux>X3D6$8L6OwZi3z9hFIT;ujWk6!-iNys# zS^&tu0i-$7b1Ks|uWWt<UI#o5JK#Qumq6MGdA+Z{N3_d0lnzRoW-mS^sGA2EF&{h6E$TeHc=5VMR9g@Q*}N@WhFf(QxiKTVg#`gX%ouRR;R=sRtg%(9w~mf?s+CoWx3-c34`V1uy3jwM04T4-qoAbi zm1<>~22zt|X&kG<1GI=?%Kt0OIh&s_ad638=ihofp5Nvx12+rE6AV|Xu04U#lR0?J z8AT>L@Jcf_Opf4nQeoJ|c!lvDlMGW6(+6fX<|yVzENU!MSh-juSoZ-nf#OYM^Df>) Fi~u?na2Ego delta 342 zcmew(|3|K#fsuiMft#U$ftkU;KUm+0Ux>XBD6$8L6OwZi3zC@PnHd-uWk6!-iNys# zS^&tu0i-$7b1KuUIaihd`451Guw;dFE0Qo*S`N@unB8$W?00nx00vfrA6$K2^4CjITEkM3PUSe+QOfSygK>ih= zC2a-y#U((80s(&vNS=Y2`OU-wy^LEY`!RZpvxzf{{T6#Fc3|1?;;_kA rc%2j&XE1JJe8A+!w1w#vvmEm>=2t8cEazBdSewA1D7@Khe?md5+~3WOfsp|S1UwkHK{Wp#2FA&ZOkxvtgzJlva}x^~7#K5v;(I_ii8G!v zJ+T-l#-sw|b3m~`dQN2;P)vt`fx8BTH?M4dl#!a4!oa}00;t9egn6cXa?Jn=0>vHx z`5^r&98N5u8M!4D3=DiMKz;xSyB%OYk&~YcROiPR0u;~!Vaao1S-FW7K#TbrfP4io zmSH%bmzbLh6k7mvWE%+2^y2(okY8K^^p6Hy9W#){%=~sT4`VOmw#l;?y`|a3S;YQ` zJrjE%c30qU~pv4V%7!*j5^S8BQsMIHDx6> zQ4ujkadvf6bv{OAB|Ron6FVkjBRM8f5jJ*l#%cbA1pz?J7;wem3Xe*xu~n+Kj*fS# zl~szjwvqx5V<3gbH_8Kx$t56o)J oQOu86)L5platFKViR?Q>kE@}6AKs^7&Cwpdq6meDV{k! zu^1@Eqypq~K(Ro2PGuTUOoxGin+1feIaiisq$Z{?Fz^}x)tG@W&*Y5h89+gx7|1-3 zeiaTUmXM6xk_w<$50LKz!cGU6J#zAsf$IEtZvX`}Kv-mv_=ViW3ZTV&KrVv<7)vvp z&r8fr1&RUrjBOx1(~I+WL4I)w&_65S>X?BnX684Oc^G>cw@#kL=q=4A&Mfv@?5Ws& zv3p`?#14v8i)D$Wif(6M2K!xQvkDU{0h1fk7N%Fsa?Hz^U$I26oMV+?Z32h7 VFvD2}cCc