initial commit

沈斌

2018-07-10 fec630978ad9b1ce5caff7dbc74e7d10d43a0970

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
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>