_list.scss 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. @charset "utf-8";
  2. /*
  3. * @file: 文字列表UI组件
  4. * @update: 2015-06-05 16:45:17
  5. */
  6. /*
  7. * 默认列表
  8. * @base
  9. */
  10. $item-height: 24px; // item高度
  11. $item-line-height: 24px; // item行高
  12. .ui-list__item {
  13. height: $item-height;
  14. line-height: $item-line-height;
  15. overflow: hidden;
  16. }
  17. .ui-list__link {
  18. margin-right: 10px;
  19. }
  20. .ui-list__tag {
  21. color: #f60;
  22. }
  23. .ui-list__meta {
  24. float: right;
  25. margin-left: 10px;
  26. color: #999;
  27. }
  28. .ui-list__num {
  29. @include inline-block;
  30. overflow: hidden;
  31. margin-right: 5px;
  32. width: 18px;
  33. height: 14px;
  34. border-radius: 2px;
  35. font: normal 12px/14px verdana;
  36. text-align: center;
  37. color: #666;
  38. background-color: #e8e8e8;
  39. }
  40. /*
  41. * 实心圆标记
  42. * @extend: disc
  43. */
  44. .ui-list {
  45. &.ext-disc {
  46. list-style: disc inside none;
  47. }
  48. }
  49. /*
  50. * 实心方块标记
  51. * @extend: square
  52. */
  53. .ui-list {
  54. &.ext-square {
  55. list-style: square inside none;
  56. }
  57. }
  58. /*
  59. * 双栏列表
  60. * @extend: half
  61. */
  62. .ui-list {
  63. &.ext-half {
  64. font-size: 0; /* 所有浏览器 */
  65. *word-spacing: -1px; /* IE6/7 */
  66. .ui-list__item {
  67. @include inline-block;
  68. vertical-align: top;
  69. font-size: 12px;
  70. letter-spacing: normal;
  71. word-spacing: normal;
  72. width: 48%;
  73. *width: 47.99%;
  74. margin-right: 2%;
  75. }
  76. }
  77. }
  78. @media (-webkit-min-device-pixel-ratio:0) {
  79. .ui-list.ext-half {
  80. letter-spacing: -5px; /* Safari 5- 等不支持 font-size: 0 的浏览器*/
  81. }
  82. }