demo.scss 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  1. html, body {
  2. width: 100%;
  3. height: 100%;
  4. }
  5. body {
  6. margin: 0;
  7. font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
  8. -webkit-font-smoothing: antialiased;
  9. -moz-osx-font-smoothing: grayscale;
  10. font-size: 16px;
  11. color: $text;
  12. }
  13. /*滚动条*/
  14. ::-webkit-scrollbar {
  15. $w: 6px;
  16. $mw: 3px;
  17. width: $w;
  18. height: $w;
  19. @include screen-mob {
  20. width: $mw;
  21. height: $mw;
  22. }
  23. &-thumb {
  24. background: rgba(0, 0, 0, .1);
  25. border-radius: 20px;
  26. &:hover {
  27. background: rgba($color, .5);
  28. }
  29. &:active {
  30. background: rgba($color, .8);
  31. }
  32. }
  33. &-corner {
  34. display: none;
  35. }
  36. }
  37. // 图标
  38. [class^="rt-icon-"],
  39. [class*=" rt-icon-"] {
  40. font-family: "rtfont" !important;
  41. font-size: 16px;
  42. font-style: normal;
  43. -webkit-font-smoothing: antialiased;
  44. -moz-osx-font-smoothing: grayscale;
  45. }
  46. a:link {
  47. transition: color .3s ease-in-out;
  48. }
  49. // 路由页面
  50. .app-page {
  51. padding: 15px;
  52. font-size: 14px;
  53. line-height: 1.5;
  54. }
  55. // 强提示
  56. .text-strong {
  57. font-weight: 600;
  58. font-size: 1.2em;
  59. color: #f50;
  60. }
  61. // 按钮
  62. .demo-btn {
  63. display: inline-block;
  64. margin: 0 1em .5em 0;
  65. padding: 3px 8px;
  66. font-size: 14px;
  67. color: #333;
  68. text-decoration: none;
  69. cursor: pointer;
  70. border-radius: 3px;
  71. border: 1px solid #ccc;
  72. transition: all .3s ease;
  73. &:hover {
  74. color: $color;
  75. border-color: $color;
  76. }
  77. &:active {
  78. $activeColor: mix(#000, $color, 20%);
  79. color: $activeColor;
  80. border-color: $activeColor;
  81. }
  82. }
  83. // 表格
  84. .demo-table {
  85. min-width: 300px;
  86. border-collapse: collapse;
  87. th, td {
  88. padding: 5px 8px;
  89. border: 1px solid #ddd;
  90. }
  91. th {
  92. text-align: left;
  93. font-weight: 400;
  94. background-color: #f7f7f7;
  95. }
  96. }