Revert "框架调整"

fengxiang

2018-07-11 12b04f145bae740e1971036b1e2dfc1bc224d17b

 src/app/routes/style/colors/colors.component.html

New file
@@ -0,0 +1,105 @@
<div class="content__title">
  <h1>
    Colors
    <small>Color Palettes</small>
  </h1>
</div>
<div nz-row [nzGutter]="16" class="list">
  <div nz-col [nzMd]="24">
    <nz-card nzTitle="Classic colors">
      <div nz-row *ngFor="let c of c.brands">
        <div nz-col [nzSpan]="8">
          <div class="bg-{{c}}-light p-lg">
            <p (click)="onCopy('bg-' + c + '-light')">.bg-{{c}}-light</p>
            <p (click)="onCopy('text-' + c + '-light')">.text-{{c}}-light</p>
          </div>
        </div>
        <div nz-col [nzSpan]="8">
          <div class="bg-{{c}} p-lg">
            <p (click)="onCopy('bg-' + c)">.bg-{{c}}</p>
            <p (click)="onCopy('text-' + c)">.text-{{c}}</p>
          </div>
        </div>
        <div nz-col [nzSpan]="8">
          <div class="bg-{{c}}-dark p-lg">
            <p (click)="onCopy('bg-' + c + '-dark')">.bg-{{c}}-dark</p>
            <p (click)="onCopy('text-' + c + '-dark')">.text-{{c}}-dark</p>
          </div>
        </div>
      </div>
    </nz-card>
  </div>
</div>
<div nz-row [nzGutter]="16" class="list">
  <div nz-col [nzMd]="24">
    <nz-card nzTitle="Name colors">
      <div nz-row *ngFor="let c of c.names">
        <div nz-col [nzSpan]="8">
          <div class="bg-{{c}}-light p-lg">
            <p (click)="onCopy('bg-' + c + '-light')">.bg-{{c}}-light</p>
            <p (click)="onCopy('text-' + c + '-light')">.text-{{c}}-light</p>
          </div>
        </div>
        <div nz-col [nzSpan]="8">
          <div class="bg-{{c}} p-lg">
            <p (click)="onCopy('bg-' + c)">.bg-{{c}}</p>
            <p (click)="onCopy('text-' + c)">.text-{{c}}</p>
          </div>
        </div>
        <div nz-col [nzSpan]="8">
          <div class="bg-{{c}}-dark p-lg">
            <p (click)="onCopy('bg-' + c + '-dark')">.bg-{{c}}-dark</p>
            <p (click)="onCopy('text-' + c + '-dark')">.text-{{c}}-dark</p>
          </div>
        </div>
      </div>
      <div nz-row>
        <div nz-col [nzSpan]="5">
          <div class="bg-grey-darker p-lg">
            <p (click)="onCopy('bg-grey-darker')">.bg-grey-darker</p>
            <p (click)="onCopy('text-grey-darker')">.text-grey-darker</p>
          </div>
        </div>
        <div nz-col [nzSpan]="5">
          <div class="bg-grey-dark p-lg">
            <p (click)="onCopy('bg-grey-dark')">.bg-grey-dark</p>
            <p (click)="onCopy('text-grey-dark')">.text-grey-dark</p>
          </div>
        </div>
        <div nz-col [nzSpan]="4">
          <div class="bg-grey p-lg">
            <p (click)="onCopy('bg-grey')">.bg-grey</p>
            <p (click)="onCopy('text-grey')">.text-grey</p>
          </div>
        </div>
        <div nz-col [nzSpan]="5">
          <div class="bg-grey-light p-lg">
            <p (click)="onCopy('bg-grey-light')">.bg-grey-light</p>
            <p (click)="onCopy('text-grey-light')">.text-grey-light</p>
          </div>
        </div>
        <div nz-col [nzSpan]="5">
          <div class="bg-grey-lighter p-lg">
            <p (click)="onCopy('bg-grey-lighter')">.bg-grey-lighter</p>
            <p (click)="onCopy('text-grey-lighter')">.text-grey-lighter</p>
          </div>
        </div>
      </div>
    </nz-card>
  </div>
</div>
<div nz-row [nzGutter]="16" class="list">
  <div nz-col [nzMd]="24">
    <nz-card nzTitle="Full Colors">
      <div nz-row>
        <div nz-col [nzSpan]="4" *ngFor="let c of c.names">
          <div *ngFor="let i of nums" class="bg-{{c}}-{{i}} p-lg">
            <p (click)="onCopy('bg-' + c + '-' + i)">.bg-{{c}}-{{i}}</p>
            <p (click)="onCopy('bg-' + c + '-' + i + '-h')">.bg-{{c}}-{{i}}-h</p>
            <p (click)="onCopy('text-' + c + '-' + i)">.text-{{c}}-{{i}}</p>
          </div>
        </div>
      </div>
    </nz-card>
  </div>
</div>