mirror of https://github.com/Squidex/squidex.git
Sebastian
9 years ago
75 changed files with 1053 additions and 1263 deletions
@ -1,7 +1,2 @@ |
|||
@import '_vars'; |
|||
@import '_mixins'; |
|||
|
|||
.panel { |
|||
min-width: 36rem; |
|||
max-width: 36rem; |
|||
} |
|||
@ -1,23 +1,10 @@ |
|||
@import '_vars'; |
|||
@import '_mixins'; |
|||
|
|||
.panel { |
|||
min-width: 64rem; |
|||
max-width: 64rem; |
|||
} |
|||
|
|||
.panel-content { |
|||
overflow-y: scroll; |
|||
} |
|||
|
|||
.languages-buttons { |
|||
margin-right: 1rem; |
|||
} |
|||
|
|||
.field { |
|||
@include truncate; |
|||
} |
|||
|
|||
.content { |
|||
cursor: pointer; |
|||
} |
|||
@ -1,72 +1,12 @@ |
|||
@import '_vars'; |
|||
@import '_mixins'; |
|||
|
|||
.panel { |
|||
min-width: 20rem; |
|||
max-width: 20rem; |
|||
.nav-link { |
|||
position: relative; |
|||
padding-top: .6rem; |
|||
padding-bottom: .6rem; |
|||
} |
|||
|
|||
.search-form { |
|||
& { |
|||
@include flex-grow(1); |
|||
position: relative; |
|||
} |
|||
|
|||
.form-control { |
|||
padding-left: 3rem; |
|||
} |
|||
|
|||
.icon-search { |
|||
@include absolute(.625rem, auto, auto, 1rem); |
|||
color: $color-dark-foreground-selected; |
|||
font-size: 1.3rem; |
|||
font-weight: lighter; |
|||
} |
|||
} |
|||
|
|||
.schemas { |
|||
margin-left: -$panel-padding; |
|||
margin-right: -$panel-padding; |
|||
} |
|||
|
|||
.schema { |
|||
& { |
|||
padding-left: $panel-padding; |
|||
padding-right: $panel-padding; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
&:hover, |
|||
&.active { |
|||
& { |
|||
background: $color-dark-background-selected; |
|||
} |
|||
|
|||
& + .schema > .schema-inner { |
|||
border-color: transparent; |
|||
} |
|||
|
|||
.schema-inner { |
|||
border-color: transparent; |
|||
} |
|||
} |
|||
|
|||
&-inner { |
|||
padding-top: 1rem; |
|||
padding-bottom: 1rem; |
|||
border-top: 1px solid darken($color-dark-foreground, 10%); |
|||
} |
|||
|
|||
&-name { |
|||
@include truncate; |
|||
color: $color-dark-foreground-selected; |
|||
font-size: 1rem; |
|||
font-weight: normal; |
|||
} |
|||
|
|||
&:first-child { |
|||
.schema-inner { |
|||
border: 0; |
|||
} |
|||
} |
|||
.icon-angle-right { |
|||
@include absolute(14px, 2rem, auto, auto); |
|||
} |
|||
@ -1,7 +0,0 @@ |
|||
@import '_vars'; |
|||
@import '_mixins'; |
|||
|
|||
.panel { |
|||
min-width: 36rem; |
|||
max-width: 36rem; |
|||
} |
|||
@ -1,27 +1,2 @@ |
|||
@import '_vars'; |
|||
@import '_mixins'; |
|||
|
|||
.panel { |
|||
min-width: 44rem; |
|||
max-width: 44rem; |
|||
} |
|||
|
|||
.card { |
|||
& { |
|||
max-width: 44rem; |
|||
} |
|||
|
|||
&-block { |
|||
padding-left: .5rem; |
|||
padding-right: .5rem; |
|||
} |
|||
} |
|||
|
|||
.clients { |
|||
&-empty { |
|||
color: $color-empty; |
|||
font-size: 1.2rem; |
|||
font-weight: lighter; |
|||
padding: .2rem 1rem; |
|||
} |
|||
} |
|||
@ -0,0 +1,49 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Sebastian Stehle. All rights reserved |
|||
*/ |
|||
|
|||
import { AfterViewInit, Component, ElementRef, Input, OnDestroy, Renderer, ViewChild } from '@angular/core'; |
|||
|
|||
import { slideRightAnimation } from './animations'; |
|||
|
|||
import { PanelService } from './../services/panel.service'; |
|||
|
|||
@Component({ |
|||
selector: 'sqx-panel', |
|||
template: ` |
|||
<div [style.width]="panelWidth" #panel> |
|||
<div class="panel panel-{{theme}}" [@slideRight]> |
|||
<ng-content></ng-content> |
|||
</div> |
|||
</div>`,
|
|||
animations: [ |
|||
slideRightAnimation |
|||
] |
|||
}) |
|||
export class PanelComponent implements OnDestroy, AfterViewInit { |
|||
@Input() |
|||
public theme: string = 'light'; |
|||
|
|||
@Input() |
|||
public panelWidth: string = '10rem'; |
|||
|
|||
@ViewChild('panel') |
|||
public panel: ElementRef; |
|||
|
|||
constructor( |
|||
private readonly renderer: Renderer, |
|||
private readonly panels: PanelService |
|||
) { |
|||
} |
|||
|
|||
public ngOnDestroy() { |
|||
this.panels.pop(this.panel.nativeElement, this.renderer); |
|||
} |
|||
|
|||
public ngAfterViewInit() { |
|||
this.panels.push(this.panel.nativeElement, this.renderer); |
|||
} |
|||
} |
|||
@ -1,30 +0,0 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Sebastian Stehle. All rights reserved |
|||
*/ |
|||
|
|||
import { Directive, ElementRef, OnDestroy, OnInit, Renderer } from '@angular/core'; |
|||
|
|||
import { PanelService } from './../services/panel.service'; |
|||
|
|||
@Directive({ |
|||
selector: '.panel' |
|||
}) |
|||
export class PanelDirective implements OnInit, OnDestroy { |
|||
constructor( |
|||
private readonly element: ElementRef, |
|||
private readonly renderer: Renderer, |
|||
private readonly panels: PanelService |
|||
) { |
|||
} |
|||
|
|||
public ngOnDestroy() { |
|||
this.panels.pop(this.element.nativeElement, this.renderer); |
|||
} |
|||
|
|||
public ngOnInit() { |
|||
this.panels.push(this.element.nativeElement, this.renderer); |
|||
} |
|||
} |
|||
@ -1,2 +0,0 @@ |
|||
@import '_vars'; |
|||
@import '_mixins'; |
|||
@ -1,2 +0,0 @@ |
|||
@import '_vars'; |
|||
@import '_mixins'; |
|||
@ -1,18 +1,18 @@ |
|||
<div class="sidebar panel-dark"> |
|||
<ul class="nav nav-pills nav-stacked nav-dark"> |
|||
<div class="sidebar"> |
|||
<ul class="nav nav-stacked"> |
|||
<li class="nav-item" *ngIf="permission !== 'Editor'"> |
|||
<a class="nav-link" routerLink="schemas" routerLinkActive="active"> |
|||
<i class="nav-icon icon-schemas"></i> <span class="nav-text">Schemas</span> |
|||
<i class="nav-icon icon-schemas"></i> <div class="nav-text">Schemas</div> |
|||
</a> |
|||
</li> |
|||
<li class="nav-item"> |
|||
<a class="nav-link" routerLink="content" routerLinkActive="active"> |
|||
<i class="nav-icon icon-content"></i> <span class="nav-text">Content</span> |
|||
<i class="nav-icon icon-content"></i> <div class="nav-text">Content</div> |
|||
</a> |
|||
</li> |
|||
<li class="nav-item" *ngIf="permission === 'Owner'"> |
|||
<a class="nav-link" routerLink="settings" routerLinkActive="active"> |
|||
<i class="nav-icon icon-settings2"></i> <span class="nav-text">Settings</span> |
|||
<i class="nav-icon icon-settings2"></i> <div class="nav-text">Settings</div> |
|||
</a> |
|||
</li> |
|||
</ul> |
|||
|
|||
@ -1,51 +1,46 @@ |
|||
@import '_vars'; |
|||
@import '_mixins'; |
|||
@import '_vars'; |
|||
|
|||
.sidebar { |
|||
@include fixed($size-navbar-height, auto, 0, 0); |
|||
@include box-shadow-colored(2px, 0, 0, $color-dark1-border2); |
|||
min-width: $size-sidebar-width; |
|||
max-width: $size-sidebar-width; |
|||
border-right: 1px solid $color-dark1-border1; |
|||
background: $color-dark1-background; |
|||
z-index: 100; |
|||
} |
|||
|
|||
.nav { |
|||
& { |
|||
text-align: center; |
|||
} |
|||
|
|||
&-icon { |
|||
font-size: 2rem; |
|||
} |
|||
|
|||
&-text { |
|||
display: block; |
|||
} |
|||
|
|||
&-item { |
|||
& { |
|||
color: $color-dark-foreground; |
|||
} |
|||
|
|||
&:hover { |
|||
i { |
|||
color: $color-theme-blue; |
|||
} |
|||
} |
|||
font-size: .9rem; |
|||
} |
|||
|
|||
&-link { |
|||
& { |
|||
@include transition(color .3s ease); |
|||
padding: 1.25rem; |
|||
display: block; |
|||
text-align: center; |
|||
text-decoration: none; |
|||
color: $color-dark1-foreground; |
|||
} |
|||
|
|||
&:hover, |
|||
&.active { |
|||
& { |
|||
background: $color-theme-blue-dark; |
|||
} |
|||
color: $color-dark1-focus-foreground; |
|||
|
|||
i { |
|||
.nav-icon { |
|||
color: $color-theme-blue; |
|||
} |
|||
} |
|||
|
|||
&.active { |
|||
background: $color-dark1-active-background; |
|||
} |
|||
} |
|||
} |
|||
@ -1,52 +1,16 @@ |
|||
@import '_mixins'; |
|||
@import '_vars'; |
|||
|
|||
$size-avatar: 2.2rem; |
|||
$size-arrow: .6rem; |
|||
|
|||
.user { |
|||
&-picture { |
|||
& { |
|||
@include circle(2.2rem); |
|||
} |
|||
|
|||
&:not([src]) { |
|||
@include opacity(0); |
|||
} |
|||
} |
|||
} |
|||
|
|||
.navbar-nav { |
|||
.nav-link { |
|||
@include no-selection; |
|||
padding: 0; |
|||
cursor: pointer; |
|||
color: $color-accent-dark; |
|||
line-height: 2.2rem; |
|||
} |
|||
} |
|||
@import '_mixins'; |
|||
|
|||
.nav-link { |
|||
&::after { |
|||
color: $color-theme-blue-light; |
|||
} |
|||
padding: 0; |
|||
} |
|||
|
|||
.dropdown { |
|||
&-item { |
|||
cursor: pointer; |
|||
} |
|||
|
|||
&-menu { |
|||
& { |
|||
@include absolute($size-navbar-height - $size-arrow, 0, auto, auto); |
|||
} |
|||
@include absolute(2.6rem, 0, auto, auto); |
|||
} |
|||
|
|||
&::before { |
|||
@include absolute(-$size-arrow, $size-arrow, auto, auto); |
|||
@include caret-top; |
|||
border-color: transparent transparent $color-accent-dark; |
|||
border-width: $size-arrow; |
|||
} |
|||
&-item { |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
@ -1,16 +1,2 @@ |
|||
@import '_mixins'; |
|||
@import '_vars'; |
|||
|
|||
.content { |
|||
margin: 8rem auto; |
|||
max-width: 32rem; |
|||
text-align: center; |
|||
} |
|||
|
|||
.logo { |
|||
height: 4rem; |
|||
} |
|||
|
|||
h1 { |
|||
margin-top: 2.5rem; |
|||
} |
|||
@ -0,0 +1,74 @@ |
|||
@import '_mixins'; |
|||
@import '_vars'; |
|||
|
|||
body { |
|||
background: $color-background; |
|||
padding-top: $size-navbar-height; |
|||
padding-left: $size-sidebar-width; |
|||
} |
|||
|
|||
h1 { |
|||
font-size: 2rem; |
|||
} |
|||
|
|||
.user-picture { |
|||
& { |
|||
@include circle(2.2rem); |
|||
} |
|||
|
|||
&:not([src]) { |
|||
@include opacity(0); |
|||
} |
|||
} |
|||
|
|||
.item-published { |
|||
& { |
|||
@include circle(.5rem); |
|||
display: inline-block; |
|||
border: 0; |
|||
background: $color-theme-green; |
|||
margin-left: .4rem; |
|||
} |
|||
|
|||
&.unpublished { |
|||
background: $color-theme-error; |
|||
} |
|||
} |
|||
|
|||
.tooltip-dropdown { |
|||
& { |
|||
display: inline-block; |
|||
} |
|||
|
|||
&-menu { |
|||
@include absolute(100%, 0, auto, auto); |
|||
} |
|||
|
|||
&-item { |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
|
|||
.landing-page { |
|||
& { |
|||
margin: 8rem auto; |
|||
max-width: 32rem; |
|||
text-align: center; |
|||
} |
|||
|
|||
h1 { |
|||
margin-top: 2.5rem; |
|||
} |
|||
|
|||
.logo { |
|||
height: 4rem; |
|||
} |
|||
} |
|||
|
|||
.hidden { |
|||
display: none; |
|||
} |
|||
|
|||
.item-modified { |
|||
font-size: .8rem; |
|||
} |
|||
@ -0,0 +1,115 @@ |
|||
@import '_mixins'; |
|||
@import '_vars'; |
|||
|
|||
.ng-invalid { |
|||
&.ng-dirty { |
|||
& { |
|||
border-color: $color-theme-error; |
|||
} |
|||
|
|||
&:hover, |
|||
&:focus { |
|||
border-color: $color-theme-error-dark; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.errors { |
|||
&-box { |
|||
position: relative; |
|||
} |
|||
|
|||
&::after { |
|||
@include absolute(auto, auto, -.7rem, .625rem); |
|||
content: ''; |
|||
height: 0; |
|||
border-style: solid; |
|||
border-width: .4rem; |
|||
border-color: $color-theme-error transparent transparent; |
|||
width: 0; |
|||
} |
|||
|
|||
& { |
|||
@include absolute(auto, auto, .4rem, 0); |
|||
@include border-radius(2px); |
|||
color: $color-accent-dark; |
|||
cursor: none; |
|||
display: inline-block; |
|||
font-size: .9rem; |
|||
font-weight: normal; |
|||
line-height: 1.1rem; |
|||
padding: .3rem .4rem; |
|||
background: $color-theme-error; |
|||
} |
|||
} |
|||
|
|||
.col-form-label, |
|||
.col-form-checkbox-label { |
|||
text-align: right; |
|||
} |
|||
|
|||
input, |
|||
select { |
|||
&.form-control { |
|||
padding-top: 0; |
|||
padding-bottom: 0; |
|||
height: calc(2.5rem - 2px); |
|||
} |
|||
} |
|||
|
|||
.form-hint { |
|||
font-size: .8rem; |
|||
margin-top: .1rem; |
|||
margin-bottom: 0; |
|||
color: lighten($color-text, 30%); |
|||
} |
|||
|
|||
.form-error { |
|||
@include border-radius(4px); |
|||
@include truncate; |
|||
color: $color-accent-dark; |
|||
margin-top: .25rem; |
|||
margin-bottom: .5rem; |
|||
padding: .5rem; |
|||
background: $color-theme-error; |
|||
} |
|||
|
|||
.form-group { |
|||
&:last-child { |
|||
margin-bottom: 0; |
|||
} |
|||
} |
|||
|
|||
.search-form { |
|||
& { |
|||
@include flex-grow(1); |
|||
position: relative; |
|||
} |
|||
|
|||
.form-control { |
|||
padding-right: 3rem; |
|||
} |
|||
|
|||
.icon-search { |
|||
@include absolute(.625rem, 1rem, auto, auto); |
|||
color: $color-dark2-focus-foreground; |
|||
font-size: 1.3rem; |
|||
font-weight: lighter; |
|||
} |
|||
} |
|||
|
|||
.form-control-dark { |
|||
& { |
|||
@include transition(background-color .3s ease); |
|||
@include placeholder-color(darken($color-accent-dark, 30%)); |
|||
background: $color-dark2-control; |
|||
border: 1px solid $color-dark2-control; |
|||
color: darken($color-accent-dark, 20%); |
|||
} |
|||
|
|||
&:focus { |
|||
background: lighten($color-dark2-control, 2%); |
|||
border-color: lighten($color-dark2-control, 2%); |
|||
color: $color-dark2-focus-foreground; |
|||
} |
|||
} |
|||
@ -1,10 +0,0 @@ |
|||
@import '_mixins'; |
|||
@import '_vars'; |
|||
|
|||
.user-ref { |
|||
color: $color-theme-blue-dark; |
|||
} |
|||
|
|||
.marker-ref { |
|||
color: $color-theme-blue-dark; |
|||
} |
|||
@ -1,20 +0,0 @@ |
|||
@import '_mixins'; |
|||
@import '_vars'; |
|||
|
|||
body { |
|||
background: $color-background; |
|||
padding-top: $size-navbar-height; |
|||
padding-left: $size-sidebar-width; |
|||
} |
|||
|
|||
h1 { |
|||
font-size: 2rem; |
|||
} |
|||
|
|||
.hidden { |
|||
display: none; |
|||
} |
|||
|
|||
.card { |
|||
@include box-shadow(0, 2px, 2px, .1); |
|||
} |
|||
@ -0,0 +1,84 @@ |
|||
@import '_mixins'; |
|||
@import '_vars'; |
|||
|
|||
.table-items { |
|||
& { |
|||
margin-bottom: -.25rem; |
|||
} |
|||
|
|||
th, |
|||
td { |
|||
& { |
|||
padding: 1rem; |
|||
} |
|||
|
|||
&:first-child { |
|||
padding-left: 1.25rem; |
|||
} |
|||
|
|||
&:last-child { |
|||
padding-right: 1.25rem; |
|||
} |
|||
} |
|||
|
|||
thead { |
|||
th { |
|||
color: $color-table-header; |
|||
font-size: .8rem; |
|||
font-weight: normal; |
|||
border: 0; |
|||
padding-top: 0; |
|||
} |
|||
} |
|||
|
|||
tbody { |
|||
td { |
|||
margin: 0; |
|||
margin-bottom: 10px; |
|||
vertical-align: middle; |
|||
} |
|||
|
|||
tr { |
|||
& { |
|||
@include transition(all .2s ease); |
|||
background: $color-table; |
|||
border: 1px solid $color-table-border; |
|||
border-bottom: 2px solid $color-table-border; |
|||
margin-bottom: .5rem; |
|||
} |
|||
|
|||
&:hover { |
|||
background: darken($color-table, 1%); |
|||
} |
|||
|
|||
&.active { |
|||
background: $color-theme-blue; |
|||
border-color: $color-theme-blue; |
|||
color: $color-accent-dark; |
|||
} |
|||
} |
|||
} |
|||
|
|||
&-row, |
|||
&-footer { |
|||
padding: 1rem 1.25rem; |
|||
background: $color-table-footer; |
|||
border: 1px solid $color-border; |
|||
border-bottom-width: 2px; |
|||
} |
|||
|
|||
&-row { |
|||
background: $color-table; |
|||
margin-bottom: .25rem; |
|||
} |
|||
|
|||
&-footer { |
|||
background: $color-table-footer; |
|||
margin-top: .8rem; |
|||
} |
|||
|
|||
.spacer { |
|||
border: 0; |
|||
height: .3rem; |
|||
} |
|||
} |
|||
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 26 KiB |
Binary file not shown.
Binary file not shown.
@ -1,4 +1,4 @@ |
|||
@import '_bootstrap.scss'; |
|||
@import '_layout.scss'; |
|||
@import '_panels.scss'; |
|||
@import '_history.scss'; |
|||
@import '_common'; |
|||
@import '_panels'; |
|||
@import '_forms'; |
|||
@import '_lists'; |
|||
@ -1,7 +1,10 @@ |
|||
@import '_vendor-overrides.scss'; |
|||
@import '_bootstrap-vars.scss'; |
|||
|
|||
// Bootstrap |
|||
@import './../../node_modules/bootstrap/scss/bootstrap-flex.scss'; |
|||
|
|||
// Bootstrap Overrides |
|||
@import '_bootstrap.scss'; |
|||
|
|||
// icomoon |
|||
@import './icomoon/style.css'; |
|||
Loading…
Reference in new issue