theme.scss 9.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202
  1. /*
  2. @mixin 指令允许我们定义一个可以在整个样式表中重复使用的样式。
  3. */
  4. //主色
  5. @mixin main_color($color) {
  6. color: $color;
  7. [data-theme = "theme1"] & {color: $main-color-theme1 !important;}
  8. [data-theme = "theme2"] & {color: $main-color-theme2 !important;}
  9. [data-theme = "theme3"] & {color: $main-color-theme3 !important;}
  10. [data-theme = "theme4"] & {color: $main-color-theme4 !important;}
  11. [data-theme = "theme5"] & {color: $main-color-theme5 !important;}
  12. }
  13. //辅色
  14. @mixin second_color($color) {
  15. color: $color;
  16. [data-theme = "theme1"] & {color: $second-color-theme1 !important;}
  17. [data-theme = "theme2"] & {color: $second-color-theme2 !important;}
  18. [data-theme = "theme3"] & {color: $second-color-theme3 !important;}
  19. [data-theme = "theme4"] & {color: $second-color-theme4 !important;}
  20. [data-theme = "theme5"] & {color: $second-color-theme5 !important;}
  21. }
  22. //价格色
  23. @mixin price_color($color) {
  24. color: $color;
  25. [data-theme = "theme1"] & {color: $price-color-theme1 !important;}
  26. [data-theme = "theme2"] & {color: $price-color-theme2 !important;}
  27. [data-theme = "theme3"] & {color: $price-color-theme3 !important;}
  28. [data-theme = "theme4"] & {color: $price-color-theme4 !important;}
  29. [data-theme = "theme5"] & {color: $price-color-theme5 !important;}
  30. }
  31. //左侧按钮
  32. @mixin left_color($color) {
  33. background-color: $color;
  34. [data-theme = "theme1"] & {background-color: $left-button-color1 !important;}
  35. [data-theme = "theme2"] & {background-color: $left-button-color2 !important;}
  36. [data-theme = "theme3"] & {background-color: $left-button-color3 !important;}
  37. [data-theme = "theme4"] & {background-color: $left-button-color4 !important;}
  38. [data-theme = "theme5"] & {background-color: $left-button-color5 !important;}
  39. }
  40. // 详情页优惠券,边框颜色
  41. @mixin coupons_border_color($color) {
  42. border: $color;
  43. [data-theme = "theme1"] & {border: $coupons-border1 !important;}
  44. [data-theme = "theme2"] & {border: $coupons-border2 !important;}
  45. [data-theme = "theme3"] & {border: $coupons-border3 !important;}
  46. [data-theme = "theme4"] & {border: $coupons-border4 !important;}
  47. [data-theme = "theme5"] & {border: $coupons-border5 !important;}
  48. }
  49. // 虚线左边框
  50. @mixin dashed_border_left($color) {
  51. border: $color;
  52. [data-theme = "theme1"] & {border-left: $dashed-left-border1;}
  53. [data-theme = "theme2"] & {border-left: $dashed-left-border2;}
  54. [data-theme = "theme3"] & {border-left: $dashed-left-border3;}
  55. [data-theme = "theme4"] & {border-left: $dashed-left-border4;}
  56. [data-theme = "theme5"] & {border-left: $dashed-left-border5;}
  57. }
  58. //分类页二级菜单按钮
  59. @mixin cate-two-btn($color) {
  60. background-color: $color;
  61. [data-theme = "theme1"] & {background-color: $nav-two-btn1 !important;}
  62. [data-theme = "theme2"] & {background-color: $nav-two-btn2 !important;}
  63. [data-theme = "theme3"] & {background-color: $nav-two-btn3 !important;}
  64. [data-theme = "theme4"] & {background-color: $nav-two-btn4 !important;}
  65. [data-theme = "theme5"] & {background-color: $nav-two-btn5 !important;}
  66. }
  67. @mixin white_left_border{
  68. border-left-color: #fff !important;
  69. }
  70. @mixin white_right_border{
  71. border-right-color: #fff !important;
  72. }
  73. //tab下划线
  74. @mixin tab_border_bottom($color) {
  75. border-bottom: $color;
  76. [data-theme = "theme1"] & {border-bottom: $tab-border-bottom1 !important;}
  77. [data-theme = "theme2"] & {border-bottom: $tab-border-bottom2 !important;}
  78. [data-theme = "theme3"] & {border-bottom: $tab-border-bottom3 !important;}
  79. [data-theme = "theme4"] & {border-bottom: $tab-border-bottom4 !important;}
  80. [data-theme = "theme5"] & {border-bottom: $tab-border-bottom5 !important;}
  81. }
  82. // 优惠券淡色
  83. @mixin coupons_light_color($color) {
  84. background-color: $color;
  85. [data-theme = "theme1"] & {background-color: $coupons-light-color1 !important;}
  86. [data-theme = "theme2"] & {background-color: $coupons-light-color2 !important;}
  87. [data-theme = "theme3"] & {background-color: $coupons-light-color3 !important;}
  88. [data-theme = "theme4"] & {background-color: $coupons-light-color4 !important;}
  89. [data-theme = "theme5"] & {background-color: $coupons-light-color5 !important;}
  90. }
  91. //主色背景
  92. @mixin main_bg_color($color) {
  93. background-color: $color;
  94. [data-theme = "theme1"] & {background-color: $main-color-theme1 !important;}
  95. [data-theme = "theme2"] & {background-color: $main-color-theme2 !important;}
  96. [data-theme = "theme3"] & {background-color: $main-color-theme3 !important;}
  97. [data-theme = "theme4"] & {background-color: $main-color-theme4 !important;}
  98. [data-theme = "theme5"] & {background-color: $main-color-theme5 !important;}
  99. }
  100. // 主渐变色
  101. @mixin linear-gradient($color) {
  102. background:$color;
  103. [data-theme = "theme1"] & {background: linear-gradient($main-gradient-color1);}
  104. [data-theme = "theme2"] & {background: linear-gradient($main-gradient-color2);}
  105. [data-theme = "theme3"] & {background: linear-gradient($main-gradient-color3);}
  106. [data-theme = "theme4"] & {background: linear-gradient($main-gradient-color4);}
  107. [data-theme = "theme5"] & {background: linear-gradient($main-gradient-color5);}
  108. }
  109. //辅渐变色
  110. @mixin second-gradient($color) {
  111. background:$color;
  112. [data-theme = "theme1"] & {background: linear-gradient($second-gradient-color1); }
  113. [data-theme = "theme2"] & {background: linear-gradient($second-gradient-color2); }
  114. [data-theme = "theme3"] & {background: linear-gradient($second-gradient-color3);}
  115. [data-theme = "theme4"] & {background: linear-gradient($second-gradient-color4);}
  116. [data-theme = "theme5"] & {background: linear-gradient($second-gradient-color5); }
  117. }
  118. // 首页渐变
  119. @mixin index-gradient($color) {
  120. background:$color;
  121. [data-theme = "theme1"] & {background: -webkit-linear-gradient($index-gradient-color1);}
  122. [data-theme = "theme2"] & {background: -webkit-linear-gradient($index-gradient-color2);}
  123. [data-theme = "theme3"] & {background: -webkit-linear-gradient($index-gradient-color3);}
  124. [data-theme = "theme4"] & {background: -webkit-linear-gradient($index-gradient-color4);}
  125. [data-theme = "theme5"] & {background: -webkit-linear-gradient($index-gradient-color5);}
  126. }
  127. //
  128. @mixin seckill-gradient($color) {
  129. background:$color;
  130. [data-theme = "theme1"] & {background: -webkit-linear-gradient($seckill-grradient-color1); }
  131. [data-theme = "theme2"] & {background: -webkit-linear-gradient($seckill-grradient-color2);}
  132. [data-theme = "theme3"] & {background: -webkit-linear-gradient($seckill-grradient-color3);}
  133. [data-theme = "theme4"] & {background: -webkit-linear-gradient($seckill-grradient-color4); }
  134. [data-theme = "theme5"] & {background: -webkit-linear-gradient($seckill-grradient-color5); }
  135. }
  136. @mixin coupons-gradient($color) {
  137. background-image:$color;
  138. [data-theme = "theme1"] & {background-image: -webkit-linear-gradient($coupons-gradient-color1); }
  139. [data-theme = "theme2"] & {background-image: -webkit-linear-gradient($coupons-gradient-color2); }
  140. [data-theme = "theme3"] & {background-image: -webkit-linear-gradient($index-gradient-color3); }
  141. [data-theme = "theme4"] & {background-image: -webkit-linear-gradient($coupons-gradient-color4);}
  142. [data-theme = "theme5"] & {background-image: -webkit-linear-gradient($coupons-gradient-color5); }
  143. }
  144. //砍价按钮 bargain-btn-color1
  145. @mixin bargain-btn($color) {
  146. background-image:$color;
  147. [data-theme = "theme1"] & {background-image: -webkit-linear-gradient($bargain-btn-color1); }
  148. [data-theme = "theme2"] & {background-image: -webkit-linear-gradient($bargain-btn-color2); }
  149. [data-theme = "theme3"] & {background-image: -webkit-linear-gradient($bargain-btn-color3);}
  150. [data-theme = "theme4"] & {background-image: -webkit-linear-gradient($bargain-btn-color4);}
  151. [data-theme = "theme5"] & {background-image: -webkit-linear-gradient($bargain-btn-color5); }
  152. }
  153. //砍价弹框小三角
  154. @mixin bragin-border-rate($color) {
  155. border-color:$color;
  156. [data-theme = "theme1"] & {border-color: $bragin-border-rate1;}
  157. [data-theme = "theme2"] & {border-color: $bragin-border-rate2;}
  158. [data-theme = "theme3"] & {border-color: $bragin-border-rate3;}
  159. [data-theme = "theme4"] & {border-color: $bragin-border-rate4;}
  160. [data-theme = "theme5"] & {border-color: $bragin-border-rate5;}
  161. }
  162. //主色带透明度
  163. @mixin main_rgba_color($color) {
  164. background:$color;
  165. [data-theme = "theme1"] & {background-color: $main-rgba-theme1; }
  166. [data-theme = "theme2"] & {background-color: $main-rgba-theme2;}
  167. [data-theme = "theme3"] & {background-color: $main-rgba-theme3;}
  168. [data-theme = "theme4"] & {background-color: $main-rgba-theme4; }
  169. [data-theme = "theme5"] & {background-color: $main-rgba-theme5; }
  170. }
  171. // 手机登录渐变色
  172. @mixin logn-gradient($color) {
  173. background:$color;
  174. [data-theme = "theme1"] & {background: -webkit-linear-gradient($logn-gradient-color1) !important;}
  175. [data-theme = "theme2"] & {background: -webkit-linear-gradient($logn-gradient-color2) !important;}
  176. [data-theme = "theme3"] & {background: -webkit-linear-gradient($logn-gradient-color3) !important;}
  177. [data-theme = "theme4"] & {background: -webkit-linear-gradient($logn-gradient-color4) !important;}
  178. [data-theme = "theme5"] & {background: -webkit-linear-gradient($logn-gradient-color5) !important;}
  179. }