demo.scss 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
  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. .text-tips {
  63. color: $color;
  64. }
  65. // 按钮
  66. .demo-btn {
  67. display: inline-block;
  68. margin: 0 1em .5em 0;
  69. padding: 3px 8px;
  70. font-size: 14px;
  71. color: #333;
  72. text-decoration: none;
  73. cursor: pointer;
  74. border-radius: 3px;
  75. border: 1px solid #ccc;
  76. transition: all .3s ease;
  77. &:hover {
  78. color: $color;
  79. border-color: $color;
  80. }
  81. &:active {
  82. $activeColor: mix(#000, $color, 20%);
  83. color: $activeColor;
  84. border-color: $activeColor;
  85. }
  86. }