uni.scss 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177
  1. /**
  2. * 你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
  3. * 建议使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
  4. */
  5. //主色调,红色:#FF0036,绿色 #4CAF50,蓝色:#03A9F4,黄色:#FF9800,粉色:#FF547B,棕色:#C3A769,浅绿色:#65C4AA,黑色:#333333,紫色:#B323B4,淡粉色:#FF8B8B
  6. // 颜色
  7. $color-title: #303133; // 主标题
  8. $color-sub: #606266; // 副标题
  9. $color-tip: #909399; // 辅助提示色
  10. $color-bg: #f8f8f8; // 背景色
  11. $color-line: #eeeeee; //分割线
  12. $color-disabled: #cccccc; // 禁用色
  13. // 文字
  14. $font-size-base: 28rpx; // 14px,正文文字
  15. $font-size-toolbar: 32rpx; // 16px,用于导航栏、标题
  16. $font-size-sub: 26rpx; // 13px,副标题
  17. $font-size-tag: 24rpx; // 12px,辅助性文字/大标签
  18. $font-size-goods-tag: 22rpx; // 11px,商品列表角标
  19. $font-size-activity-tag: 20rpx; // 10px,活动角标(拼团等角标)/小标签文字
  20. $margin-both: 30rpx; //外边距 左右
  21. $margin-updown: 20rpx; // 外边距 上下
  22. $border-radius: 10rpx; //圆角
  23. $padding: 20rpx; //内边距
  24. @mixin base($baseColor) {
  25. $base-color: $baseColor;
  26. .color-base-text {
  27. color: $base-color !important;
  28. }
  29. //背景色
  30. .color-base-bg {
  31. background-color: $base-color !important;
  32. }
  33. // 浅主色调背景
  34. .color-base-bg-light {
  35. background-color: lighten($base-color, 45%) !important;
  36. }
  37. .color-base-text-before {
  38. &::after,
  39. &::before {
  40. color: $base-color !important;
  41. }
  42. }
  43. .color-base-bg-before {
  44. &::after,
  45. &::before {
  46. background: $base-color !important;
  47. }
  48. }
  49. //边框
  50. .color-base-border {
  51. border-color: $base-color !important;
  52. &-top {
  53. border-top-color: $base-color !important;
  54. }
  55. &-bottom {
  56. border-bottom-color: $base-color !important;
  57. }
  58. &-right {
  59. border-right-color: $base-color !important;
  60. }
  61. &-left {
  62. border-left-color: $base-color !important;
  63. }
  64. }
  65. //按钮
  66. button {
  67. margin: 0 30rpx;
  68. font-size: $font-size-base;
  69. border-radius: 20px;
  70. line-height: 2.7;
  71. &[type='primary'] {
  72. background-color: $base-color;
  73. &[plain] {
  74. background-color: transparent;
  75. color: $base-color;
  76. border-color: $base-color;
  77. }
  78. }
  79. &[type='default'] {
  80. background: #fff;
  81. border: 1px solid $color-line;
  82. color: $color-title;
  83. }
  84. &[size='mini'] {
  85. margin: 0 !important;
  86. line-height: 2.3;
  87. font-size: $font-size-tag;
  88. &[type='default'] {
  89. background-color: #fff;
  90. }
  91. }
  92. &.button-hover[type='primary'] {
  93. background-color: $base-color;
  94. &[plain] {
  95. color:rgba($base-color, 0.6);
  96. border-color: rgba($base-color, 0.6);
  97. background-color: #fff;
  98. }
  99. }
  100. &[disabled],
  101. &.disabled {
  102. background: $color-line !important;
  103. color: rgba(0, 0, 0, 0.3) !important;
  104. border-color: $color-line !important;
  105. }
  106. }
  107. // 复选框
  108. uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
  109. color: $base-color !important;
  110. }
  111. // 开关
  112. uni-switch .uni-switch-input.uni-switch-input-checked {
  113. background-color: $base-color !important;
  114. border-color: $base-color !important;
  115. }
  116. // 单选
  117. uni-radio .uni-radio-input-checked {
  118. background-color: $base-color !important;
  119. border-color: $base-color !important;
  120. }
  121. // 滑块
  122. uni-slider .uni-slider-track {
  123. background-color: $base-color !important;
  124. }
  125. .uni-tag--primary {
  126. color: #fff !important;
  127. background-color: $base-color !important;
  128. border-color: $base-color !important;
  129. }
  130. .uni-tag--primary.uni-tag--inverted {
  131. color: #fff !important;
  132. background-color: $base-color !important;
  133. border-color: $base-color !important;
  134. // color: $base-color !important;
  135. // background-color: #fff !important;
  136. // border-color: $base-color !important;
  137. }
  138. }
  139. .uni-line-hide{
  140. overflow: hidden;
  141. text-overflow: ellipsis;
  142. display: -webkit-box;
  143. -webkit-line-clamp: 2;
  144. -webkit-box-orient: vertical;
  145. }
  146. .uni-using-hide{
  147. overflow: hidden;
  148. width: 100%;
  149. text-overflow: ellipsis;
  150. white-space: nowrap;
  151. }
  152. .prevent-head-roll{
  153. position: fixed;
  154. left: 0;
  155. right: 0;
  156. z-index: 998;
  157. }