颜色

为了避免视觉传达差异,内置了一套颜色。

文本颜色

  • 使用.vus-color--*类,为文本添加指定颜色。
  • .vus-color--primary:首选、主要。
  • .vus-color--success:成功。
  • .vus-color--warning:警告。
  • .vus-color--danger:危险、出错。
  • .vus-color--info:信息。
  • .vus-color--black:黑色。
  • .vus-color--dark:暗黑。
  • .vus-color--dark-gray:灰暗黑。
  • .vus-color--dark-light:浅暗黑。
  • .vus-color--gray-dark:深灰。
  • .vus-color--gray:灰色。
  • .vus-color--gray-silver:银灰。
  • .vus-color--gray-light:浅灰。
  • .vus-color--gray-smoke:烟灰。
  • .vus-color--gray-white:灰白。
  • .vus-color--light:亮灰。
  • .vus-color--white:白色。
  • .vus-color--blue:蓝色。
  • .vus-color--skyblue:天蓝。
  • .vus-color--noble:尊贵。
  • .vus-color--purple:紫色。
  • .vus-color--violet:紫罗兰。
  • .vus-color--magenta:洋红色。
  • .vus-color--red:红色。
  • .vus-color--red-dark:深红。
  • .vus-color--red-light:浅红。
  • .vus-color--pink:粉红色。
  • .vus-color--brown:棕色。
  • .vus-color--orange:橙色。
  • .vus-color--gold:金色。
  • .vus-color--yellow:黄色。
  • .vus-color--yellow-light:浅黄。
  • .vus-color--cyan:青色。
  • .vus-color--green:绿色。
  • .vus-color--green-dark:深绿。
  • .vus-color--green-light:浅绿。
  • .vus-color--teal:水鸭。
主色、首选颜色
首选
#0077ee
vus-color--primary
状态颜色
成功
#22aa44
vus-color--success
警告
#ee8833
vus-color--warning
危险、出错
#dd5544
vus-color--danger
信息
#33aaee
vus-color--info
辅助色
黑色
#000000
vus-color--black
暗黑
#333333
vus-color--dark
灰暗黑
#555555
vus-color--dark-gray
浅暗黑
#777777
vus-color--dark-light
深灰
#888888
vus-color--gray-dark
灰色
#999999
vus-color--gray
银灰
#cccccc
vus-color--gray-silver
浅灰
#dddddd
vus-color--gray-light
烟灰
#eeeeee
vus-color--gray-smoke
灰白
#f3f3f3
vus-color--gray-white
亮灰
#f8f8f8
vus-color--light
白色
#ffffff
vus-color--white
蓝色
#0000ff
vus-color--blue
天蓝
#7dd2f5
vus-color--skyblue
尊贵
#9988ff
vus-color--noble
紫色
#ac00ac
vus-color--purple
紫罗兰
#ee82ee
vus-color--violet
洋红
#ff00ff
vus-color--magenta
红色
#ff0000
vus-color--red
深红色
#cc0000
vus-color--red-dark
浅红色
#ff9999
vus-color--red-light
粉红色
#ffc0cb
vus-color--pink
棕色
#a52a2a
vus-color--brown
橙色
#ffa500
vus-color--orange
金色
#ffd700
vus-color--gold
黄色
#ffff00
vus-color--yellow
浅黄
#ffffe0
vus-color--yellow-light
青色
#00ffff
vus-color--cyan
绿色
#00ff00
vus-color--green
深绿
#008000
vus-color--green-dark
浅绿
#90ee90
vus-color--green-light
水鸭
#20c997
vus-color--teal
<span class="vus-color--primary">Primary</span>
<span class="vus-color--success">Success</span>
<span class="vus-color--red">Red</span>
...

背景颜色

  • 使用.vus-bg--*类,为背景添加指定颜色。
  • .vus-bg--primary:首选、主要。
  • .vus-bg--success:成功。
  • .vus-bg--warning:警告。
  • .vus-bg--danger:危险、出错。
  • .vus-bg--info:信息。
  • .vus-bg--black:黑色。
  • .vus-bg--dark:暗黑。
  • .vus-bg--dark-gray:灰暗黑。
  • .vus-bg--dark-light:浅暗黑。
  • .vus-bg--gray-dark:深灰。
  • .vus-bg--gray:灰色。
  • .vus-bg--gray-silver:银灰。
  • .vus-bg--gray-light:浅灰。
  • .vus-bg--gray-smoke:烟灰。
  • .vus-bg--gray-white:灰白。
  • .vus-bg--light:亮灰。
  • .vus-bg--white:白色。
  • .vus-bg--blue:蓝色。
  • .vus-bg--skyblue:天蓝。
  • .vus-bg--noble:尊贵。
  • .vus-bg--purple:紫色。
  • .vus-bg--violet:紫罗兰。
  • .vus-bg--magenta:洋红色。
  • .vus-bg--red:红色。
  • .vus-bg--red-dark:深红。
  • .vus-bg--red-light:浅红。
  • .vus-bg--pink:粉红色。
  • .vus-bg--brown:棕色。
  • .vus-bg--orange:橙色。
  • .vus-bg--gold:金色。
  • .vus-bg--yellow:黄色。
  • .vus-bg--yellow-light:浅黄。
  • .vus-bg--cyan:青色。
  • .vus-bg--green:绿色。
  • .vus-bg--green-dark:深绿。
  • .vus-bg--green-light:浅绿。
  • .vus-bg--teal:水鸭。
主色、首选颜色
首选
#0077ee
vus-bg--primary
状态颜色
成功
#22aa44
vus-bg--success
警告
#ee8833
vus-bg--warning
危险、出错
#dd5544
vus-bg--danger
信息
#33aaee
vus-bg--info
辅助色
黑色
#000000
vus-bg--black
暗黑
#333333
vus-bg--dark
灰暗黑
#555555
vus-bg--dark-gray
浅暗黑
#777777
vus-bg--dark-light
深灰
#888888
vus-bg--gray-dark
灰色
#999999
vus-bg--gray
银灰
#cccccc
vus-bg--gray-silver
浅灰
#dddddd
vus-bg--gray-light
烟灰
#eeeeee
vus-bg--gray-smoke
灰白
#f3f3f3
vus-bg--gray-white
亮灰
#f8f8f8
vus-bg--light
白色
#ffffff
vus-bg--white
蓝色
#0000ff
vus-bg--blue
天蓝
#7dd2f5
vus-bg--skyblue
尊贵
#9988ff
vus-bg--noble
紫色
#ac00ac
vus-bg--purple
紫罗兰
#ee82ee
vus-bg--violet
洋红
#ff00ff
vus-bg--magenta
红色
#ff0000
vus-bg--red
深红色
#cc0000
vus-bg--red-dark
浅红色
#ff9999
vus-bg--red-light
粉红色
#ffc0cb
vus-bg--pink
棕色
#a52a2a
vus-bg--brown
橙色
#ffa500
vus-bg--orange
金色
#ffd700
vus-bg--gold
黄色
#ffff00
vus-bg--yellow
浅黄
#ffffe0
vus-bg--yellow-light
青色
#00ffff
vus-bg--cyan
绿色
#00ff00
vus-bg--green
深绿
#008000
vus-bg--green-dark
浅绿
#90ee90
vus-bg--green-light
水鸭
#20c997
vus-bg--teal
<span class="vus-bg--primary">Primary</span>
<span class="vus-bg--success">Success</span>
<span class="vus-bg--red">Red</span>
...

边框颜色

  • 使用.vus-border--*类,为边框添加指定颜色。(注:使用边框颜色首先要使用边框样式,请参阅边框API文档。)
  • .vus-border--primary:首选、主要。
  • .vus-border--success:成功。
  • .vus-border--warning:警告。
  • .vus-border--danger:危险、出错。
  • .vus-border--info:信息。
  • .vus-border--black:黑色。
  • .vus-border--dark:暗黑。
  • .vus-border--dark-gray:灰暗黑。
  • .vus-border--dark-light:浅暗黑。
  • .vus-border--gray-dark:深灰。
  • .vus-border--gray:灰色。
  • .vus-border--gray-silver:银灰。
  • .vus-border--gray-light:浅灰。
  • .vus-border--gray-smoke:烟灰。
  • .vus-border--gray-white:灰白。
  • .vus-border--light:亮灰。
  • .vus-border--white:白色。
  • .vus-border--blue:蓝色。
  • .vus-border--skyblue:天蓝。
  • .vus-border--noble:尊贵。
  • .vus-border--purple:紫色。
  • .vus-border--violet:紫罗兰。
  • .vus-border--magenta:洋红色。
  • .vus-border--red:红色。
  • .vus-border--red-dark:深红。
  • .vus-border--red-light:浅红。
  • .vus-border--pink:粉红色。
  • .vus-border--brown:棕色。
  • .vus-border--orange:橙色。
  • .vus-border--gold:金色。
  • .vus-border--yellow:黄色。
  • .vus-border--yellow-light:浅黄。
  • .vus-border--cyan:青色。
  • .vus-border--green:绿色。
  • .vus-border--green-dark:深绿。
  • .vus-border--green-light:浅绿。
  • .vus-border--teal:水鸭。
主色、首选颜色
首选
#0077ee
vus-border--primary
状态颜色
成功
#22aa44
vus-border--success
警告
#ee8833
vus-border--warning
危险、出错
#dd5544
vus-border--danger
信息
#33aaee
vus-border--info
辅助色
黑色
#000000
vus-border--black
暗黑
#333333
vus-border--dark
灰暗黑
#555555
vus-border--dark-gray
浅暗黑
#777777
vus-border--dark-light
深灰
#888888
vus-border--gray-dark
灰色
#999999
vus-border--gray
银灰
#cccccc
vus-border--gray-silver
浅灰
#dddddd
vus-border--gray-light
烟灰
#eeeeee
vus-border--gray-smoke
灰白
#f3f3f3
vus-border--gray-white
亮灰
#f8f8f8
vus-border--light
白色
#ffffff
vus-border--white
蓝色
#0000ff
vus-border--blue
天蓝
#7dd2f5
vus-border--skyblue
尊贵
#9988ff
vus-border--noble
紫色
#ac00ac
vus-border--purple
紫罗兰
#ee82ee
vus-border--violet
洋红
#ff00ff
vus-border--magenta
红色
#ff0000
vus-border--red
深红色
#cc0000
vus-border--red-dark
浅红色
#ff9999
vus-border--red-light
粉红色
#ffc0cb
vus-border--pink
棕色
#a52a2a
vus-border--brown
橙色
#ffa500
vus-border--orange
金色
#ffd700
vus-border--gold
黄色
#ffff00
vus-border--yellow
浅黄
#ffffe0
vus-border--yellow-light
青色
#00ffff
vus-border--cyan
绿色
#00ff00
vus-border--green
深绿
#008000
vus-border--green-dark
浅绿
#90ee90
vus-border--green-light
水鸭
#20c997
vus-border--teal
<span class="vus-border--primary">Primary</span>
<span class="vus-border--success">Success</span>
<span class="vus-border--red">Red</span>
...