You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

181 lines
8.1 KiB

3 months ago
  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;}
  44. [data-theme = "theme2"] & {border: $coupons-border2;}
  45. [data-theme = "theme3"] & {border: $coupons-border3;}
  46. [data-theme = "theme4"] & {border: $coupons-border4;}
  47. [data-theme = "theme5"] & {border: $coupons-border5;}
  48. }
  49. //分类页二级菜单按钮
  50. @mixin cate-two-btn($color) {
  51. background-color: $color;
  52. [data-theme = "theme1"] & {background-color: $nav-two-btn1 !important;}
  53. [data-theme = "theme2"] & {background-color: $nav-two-btn2 !important;}
  54. [data-theme = "theme3"] & {background-color: $nav-two-btn3 !important;}
  55. [data-theme = "theme4"] & {background-color: $nav-two-btn4 !important;}
  56. [data-theme = "theme5"] & {background-color: $nav-two-btn5 !important;}
  57. }
  58. @mixin white_left_border{
  59. border-left-color: #fff !important;
  60. }
  61. @mixin white_right_border{
  62. border-right-color: #fff !important;
  63. }
  64. //tab下划线
  65. @mixin tab_border_bottom($color) {
  66. border-bottom: $color;
  67. [data-theme = "theme1"] & {border-bottom: $tab-border-bottom1 !important;}
  68. [data-theme = "theme2"] & {border-bottom: $tab-border-bottom2 !important;}
  69. [data-theme = "theme3"] & {border-bottom: $tab-border-bottom3 !important;}
  70. [data-theme = "theme4"] & {border-bottom: $tab-border-bottom4 !important;}
  71. [data-theme = "theme5"] & {border-bottom: $tab-border-bottom5 !important;}
  72. }
  73. // 优惠券淡色
  74. @mixin coupons_light_color($color) {
  75. background-color: $color;
  76. [data-theme = "theme1"] & {background-color: $coupons-light-color1 !important;}
  77. [data-theme = "theme2"] & {background-color: $coupons-light-color2 !important;}
  78. [data-theme = "theme3"] & {background-color: $coupons-light-color3 !important;}
  79. [data-theme = "theme4"] & {background-color: $coupons-light-color4 !important;}
  80. [data-theme = "theme5"] & {background-color: $coupons-light-color5 !important;}
  81. }
  82. //主色背景
  83. @mixin main_bg_color($color) {
  84. background-color: $color;
  85. [data-theme = "theme1"] & {background-color: $main-color-theme1 !important;}
  86. [data-theme = "theme2"] & {background-color: $main-color-theme2 !important;}
  87. [data-theme = "theme3"] & {background-color: $main-color-theme3 !important;}
  88. [data-theme = "theme4"] & {background-color: $main-color-theme4 !important;}
  89. [data-theme = "theme5"] & {background-color: $main-color-theme5 !important;}
  90. }
  91. // 主渐变色
  92. @mixin linear-gradient($color) {
  93. background:$color;
  94. [data-theme = "theme1"] & {background: linear-gradient($main-gradient-color1);}
  95. [data-theme = "theme2"] & {background: linear-gradient($main-gradient-color2);}
  96. [data-theme = "theme3"] & {background: linear-gradient($main-gradient-color3);}
  97. [data-theme = "theme4"] & {background: linear-gradient($main-gradient-color4);}
  98. [data-theme = "theme5"] & {background: linear-gradient($main-gradient-color5);}
  99. }
  100. //辅渐变色
  101. @mixin second-gradient($color) {
  102. background:$color;
  103. [data-theme = "theme1"] & {background: linear-gradient($second-gradient-color1); }
  104. [data-theme = "theme2"] & {background: linear-gradient($second-gradient-color2); }
  105. [data-theme = "theme3"] & {background: linear-gradient($second-gradient-color3);}
  106. [data-theme = "theme4"] & {background: linear-gradient($second-gradient-color4);}
  107. [data-theme = "theme5"] & {background: linear-gradient($second-gradient-color5); }
  108. }
  109. // 首页渐变
  110. @mixin index-gradient($color) {
  111. background:$color;
  112. [data-theme = "theme1"] & {background: -webkit-linear-gradient($index-gradient-color1);}
  113. [data-theme = "theme2"] & {background: -webkit-linear-gradient($index-gradient-color2);}
  114. [data-theme = "theme3"] & {background: -webkit-linear-gradient($index-gradient-color3);}
  115. [data-theme = "theme4"] & {background: -webkit-linear-gradient($index-gradient-color4);}
  116. [data-theme = "theme5"] & {background: -webkit-linear-gradient($index-gradient-color5);}
  117. }
  118. @mixin seckill-gradient($color) {
  119. background:$color;
  120. [data-theme = "theme1"] & {background: -webkit-linear-gradient($miaosha-grradient-color1); }
  121. [data-theme = "theme2"] & {background: -webkit-linear-gradient($miaosha-grradient-color2);}
  122. [data-theme = "theme3"] & {background: -webkit-linear-gradient($miaosha-grradient-color3);}
  123. [data-theme = "theme4"] & {background: -webkit-linear-gradient($miaosha-grradient-color4); }
  124. [data-theme = "theme5"] & {background: -webkit-linear-gradient($miaosha-grradient-color5); }
  125. }
  126. @mixin coupons-gradient($color) {
  127. background-image:$color;
  128. [data-theme = "theme1"] & {background-image: -webkit-linear-gradient($coupons-gradient-color1); }
  129. [data-theme = "theme2"] & {background-image: -webkit-linear-gradient($coupons-gradient-color2); }
  130. [data-theme = "theme3"] & {background-image: -webkit-linear-gradient($index-gradient-color3); }
  131. [data-theme = "theme4"] & {background-image: -webkit-linear-gradient($coupons-gradient-color4);}
  132. [data-theme = "theme5"] & {background-image: -webkit-linear-gradient($coupons-gradient-color5); }
  133. }
  134. //砍价按钮 bargain-btn-color1
  135. @mixin bargain-btn($color) {
  136. background-image:$color;
  137. [data-theme = "theme1"] & {background-image: -webkit-linear-gradient($bargain-btn-color1); }
  138. [data-theme = "theme2"] & {background-image: -webkit-linear-gradient($bargain-btn-color2); }
  139. [data-theme = "theme3"] & {background-image: -webkit-linear-gradient($bargain-btn-color3);}
  140. [data-theme = "theme4"] & {background-image: -webkit-linear-gradient($bargain-btn-color4);}
  141. [data-theme = "theme5"] & {background-image: -webkit-linear-gradient($bargain-btn-color5); }
  142. }
  143. //砍价弹框小三角
  144. @mixin bragin-border-rate($color) {
  145. border-color:$color;
  146. [data-theme = "theme1"] & {border-color: $bragin-border-rate1;}
  147. [data-theme = "theme2"] & {border-color: $bragin-border-rate2;}
  148. [data-theme = "theme3"] & {border-color: $bragin-border-rate3;}
  149. [data-theme = "theme4"] & {border-color: $bragin-border-rate4;}
  150. [data-theme = "theme5"] & {border-color: $bragin-border-rate5;}
  151. }
  152. // 手机登录渐变色
  153. @mixin logn-gradient($color) {
  154. background:$color;
  155. [data-theme = "theme1"] & {background: -webkit-linear-gradient($logn-gradient-color1) !important;}
  156. [data-theme = "theme2"] & {background: -webkit-linear-gradient($logn-gradient-color2) !important;}
  157. [data-theme = "theme3"] & {background: -webkit-linear-gradient($logn-gradient-color3) !important;}
  158. [data-theme = "theme4"] & {background: -webkit-linear-gradient($logn-gradient-color4) !important;}
  159. [data-theme = "theme5"] & {background: -webkit-linear-gradient($logn-gradient-color5) !important;}
  160. }