Please enable JavaScript.

Coggle requires JavaScript to display documents.

pq_scss (文字 (命名方式變更 (三大類 (title: fz + lh, fz: 字體, lh : 行高), EX (pq-title…

pq_scss

文字

命名方式變更

六小組

<h1> - <h6> 標籤命名

h1: 2.5 rem
h2:  2   rem
h3: 1.75 rem
h4: 1.5 rem
h5: 1.25 rem
h6: 1 rem

字體

字型

預設字型

$font-family-sans-serif:      "微軟正黑體","新細明體", "細明體", Arial, Helvetica, sans-serif !default;

特別字型

$font-family-monospace:       "標楷體", "新細明體",  Helvetica, Arial !default;

原本

字級&行高級距

$font-size-base: 1rem
$font-extraLarge:             ($font-size-base * 2.2)   !default;
$font-large1:                 ($font-size-base * 2)     !default;
$font-large2:                 ($font-size-base * 1.8)   !default;
$font-large3:                 ($font-size-base * 1.6)   !default;
$font-sec-large1:             ($font-size-base * 1.5)   !default;
$font-sec-large2:             ($font-size-base * 1.4)   !default;
$font-sec-large3:             ($font-size-base * 1.3)   !default;
$font-inner-text1:            ($font-size-base * 1.2)   !default;
$font-inner-text2:            ($font-size-base * 1.2)   !default;
$font-inner-text3:            ($font-size-base * 1.1)   !default;
$font-inner-text4:            ($font-size-base * 1)     !default;
$font-inner-text5:            ($font-size-base * 1)     !default;
$font-inner-text6:            ($font-size-base * 0.9)   !default;
$font-particular-stand1:      ($font-size-base * 5)     !default;
$font-particular-stand2:      ($font-size-base * 2.5)   !default;
$font-particular-stand3:      ($font-size-base * 2)     !default;

顏色

三色一組

$red1: #f44154;
$red2: #FF0000;
$red3: #d80000
$reds: () !default;

$reds: map-merge((
  "light": $red1,
  "normal": $red2,
  "dark" : $red3
),$reds);

主題色一組

$primary:       $blue !default;
$secondary:     $gray-600 !default;
$success:       $green !default;
$info:          $cyan !default;
$warning:       $yellow !default;
$danger:        $red !default;
$light:         $gray-100 !default;
$dark:          $gray-800 !default;

命名方式

參考命名
Bootstrap
BEM

通用類別

邊框

樣式

.pq-border-solid   
.pq-border-dash     
.pq-border-dot

去除邊框

.pq-border-0         
.pq-border-top-0    
.pq-border-right-0   
.pq-border-bottom-0 
.pq-border-left-0

顏色

border-radius

.pq-round-0  (0px)
.pq-round-s   (5px)
.pq-round-m  (10px)
.pq-round-l    (25px)
.pq-round-xl   (40px)