Color Palette 色票

Scss名稱位於 base > palette.scss

顏色變數 $c-

主要色票

  • #2aa7e0
    $c-primary
  • #0885ba
    $c-primarydark

輔色、強調色、價錢

  • #df3e82
    $c-accent

背景色票

  • #e0f5fe
    $c-background-S1
  • #fffcd3
    $c-background-S2
  • #fffde5
    $c-background-S3

灰色色票

  • #000
    $c-black
  • #333
    $c-navgray
  • #444
    $c-darkgray
  • #5d5d5d
    $c-titlegray
  • #777
    $c-linegray
  • #999
    $c-bodygray
  • #bbb
    $c-gray-light
  • #ccc
    $c-hrgray
  • #ddd
    $c-gray-lighter
  • #ededed
    $c-lightgray
  • #f7f7f7
    $c-subduedgray

各式標題

Scss名稱位於 modules > typography.scss

購物車 使用 .title-cart

結帳完成明細
<div class="title-cart">結帳完成明細</div>

會員中心 使用 .title-memberSxx

結帳完成明細
<div class="title-memberS1">結帳完成明細</div>
結帳完成明細
<div class="title-memberS2">結帳完成明細</div>

各式文字

商品名稱

css名稱位於 modules > typography.scss

加入class gd-nameS**

  • gd-nameS1
    Bubble CoCo純色大V領開衫式針織毛線外套UB335 現+預

連結

css名稱位於 base > typography.scss

加入class link-S**

各式價錢

價錢

css名稱位於 modules > typography.scss

加入class prc-S**prc-Del,寫法如Example

$XX,XXX
$XX,XXX
<div class="prc-Del">$<del>XX,XXX</del></div>
<div class="prc-S1">$<span>XX,XXX</span></div>

  • prc-S1
    大囍價:1,000,000
  • prc-S2
    限時搶購$1,000,000 / $1,000,000
  • prc-S3
    $1,000,000
  • prc-S4
    $1,000,000
  • prc-Del
    市價:1,000,000 東森價:3980元

提示、註解

提示、註解

css名稱位於 modules > typography.scss

加入class note-S**,寫法如Example

加入class icon-note,提醒提示icon

加入class note__text,強調文字

!黃色的底,這裡是註解內容...
<div class="note-S1">
  <div><span class="icon-note">!</span>黃色的底,這裡是<span class="note__text">註解內容</span>...</div>
</div>
!藍色的底,這裡是註解內容...
<div class="note-S2">
  <div><span class="icon-note">!</span>藍色的底,這裡是<span class="note__text">註解內容</span>...</div>
</div>
!提醒提示icon,這裡是註解內容...
<div class="note__text"><span class="icon-note">!</span>提醒提示icon,這裡是註解內容...</div>