style 模块

style 模块主要包含就是样式部分，包含内置 icon、基础的 reset 以及基础通用样式。

内置 icon

图标是利用 @font-face">font-face 规则自定义字体 "cube-icon" 实现的。

使用的时候只需要加入对应的类名即可，例如 alert 图标，可以这样用：<i class="cubeic-alert"></i>。

内置 icon 有 65 个：

style - 图1
style - 图2

reset.css

源码地址：reset，使用的就是 Eric Meyer's Reset CSS。

  1. /**
  2.  * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
  3.  * http://cssreset.com
  4.  */
  5. html, body, div, span, applet, object, iframe,
  6. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  7. a, abbr, acronym, address, big, cite, code,
  8. del, dfn, em, img, ins, kbd, q, s, samp,
  9. small, strike, strong, sub, sup, tt, var,
  10. b, u, i, center,
  11. dl, dt, dd, ol, ul, li,
  12. fieldset, form, label, legend,
  13. table, caption, tbody, tfoot, thead, tr, th, td,
  14. article, aside, canvas, details, embed,
  15. figure, figcaption, footer, header,
  16. menu, nav, output, ruby, section, summary,
  17. time, mark, audio, video, input
  18.   margin: 0
  19.   padding: 0
  20.   border: 0
  21.   font-size: 100%
  22.   font-weight: normal
  23.   vertical-align: baseline
  25. /* HTML5 display-role reset for older browsers */
  26. article, aside, details, figcaption, figure,
  27. footer, header, menu, nav, section
  28.   display: block
  30. body
  31.   line-height: 1
  33. blockquote, q
  34.   quotes: none
  36. blockquote:before, blockquote:after,
  37. q:before, q:after
  38.   content: none
  40. table
  41.   border-collapse: collapse
  42.   border-spacing: 0
  44. /* custom */
  46. a
  47.   color: #7e8c8d
  48.   -webkit-backface-visibility: hidden
  49.   text-decoration: none
  51. li
  52.   list-style: none
  54. body
  55.   -webkit-text-size-adjust: none
  56.   -webkit-tap-highlight-color: rgba(0, 0, 0, 0)

base.css

源码地址：base，主要包含的就是 html, body 元素的 font-family, line-height 等的设定，修正浮动影响的 .clear-fix，以及上下左右四个边框的绝对 1px 边框的 class：.border-top-1px, .border-right-1px, .border-bottom-1px, .border-left-1px。

  1. @require "./variable.styl"
  3. body, html
  4.   line-height: 1
  5.   font-family: 'PingFang SC', 'STHeitiSC-Light', 'Helvetica-Light', arial, sans-serif, 'Droid Sans Fallback'
  6.   user-select: none
  7.   -webkit-tap-highlight-color: transparent
  9. .clear-fix
  10.   &::after
  11.     content: ""
  12.     display: table
  13.     clear: both
  15. .border-top-1px, .border-right-1px, .border-bottom-1px, .border-left-1px
  16.   position: relative
  17.   &::before, &::after
  18.     content: ""
  19.     display: block
  20.     position: absolute
  21.     transform-origin: 0 0
  23. .border-top-1px
  24.   &::before
  25.     border-top: 1px solid - color-row-line
  26.     left: 0
  27.     top: 0
  28.     width: 100%
  29.     transform-origin: 0 top
  31. .border-right-1px
  32.   &::after
  33.     border-right: 1px solid - color-col-line
  34.     top: 0
  35.     right: 0
  36.     height: 100%
  37.     transform-origin: right 0
  39. .border-bottom-1px
  40.   &::after
  41.     border-bottom: 1px solid - color-row-line
  42.     left: 0
  43.     bottom: 0
  44.     width: 100%
  45.     transform-origin: 0 bottom
  47. .border-left-1px
  48.   &::before
  49.     border-left: 1px solid - color-col-line
  50.     top: 0
  51.     left: 0
  52.     height: 100%
  53.     transform-origin: left 0
  55. @media (min-resolution: 2dppx)
  56.   .border-top-1px
  57.     &::before
  58.       width: 200%
  59.       transform: scale(.5) translateZ(0)
  60.   .border-right-1px
  61.     &::after
  62.       height: 200%
  63.       transform: scale(.5) translateZ(0)
  64.   .border-bottom-1px
  65.     &::after
  66.       width: 200%
  67.       transform: scale(.5) translateZ(0)
  68.   .border-left-1px
  69.     &::before
  70.       height: 200%
  71.       transform: scale(.5) translateZ(0)
  73. @media (min-resolution: 3dppx)
  74.   .border-top-1px
  75.     &::before
  76.       width: 300%
  77.       transform: scale(.333) translateZ(0)
  78.   .border-right-1px
  79.     &::after
  80.       height: 300%
  81.       transform: scale(.333) translateZ(0)
  82.   .border-bottom-1px
  83.     &::after
  84.       width: 300%
  85.       transform: scale(.333) translateZ(0)
  86.   .border-left-1px
  87.     &::before
  88.       height: 300%
  89.       transform: scale(.333) translateZ(0)

原文:

https://didi.github.io/cube-ui/#/zh-CN/docs/style