148 lines
3.0 KiB
SCSS
148 lines
3.0 KiB
SCSS
|
|
|
|
// default_color是主题色
|
|
// minor_color用于渐变色
|
|
|
|
/* 颜色变量 */
|
|
$themes: (
|
|
red_theme: (
|
|
default_color: #FF2C3C,
|
|
minor_color: #F95F2F
|
|
),
|
|
orange_theme: (
|
|
default_color: #f7971e,
|
|
minor_color: #ffd200
|
|
),
|
|
pink_theme: (
|
|
default_color: #fa444d,
|
|
minor_color: #fd498f
|
|
),
|
|
gold_theme: (
|
|
default_color: #e0a356,
|
|
minor_color: #ebc389
|
|
),
|
|
blue_theme: (
|
|
default_color:#2f80ed,
|
|
minor_color: #56ccf2
|
|
),
|
|
green_theme: (
|
|
default_color:#2ec840,
|
|
minor_color: #3de650
|
|
)
|
|
);
|
|
//遍历主题map
|
|
@mixin theme_each {
|
|
@each $theme-name, $theme-map in $themes {
|
|
$theme-color: $theme-map !global;
|
|
[data-theme=#{$theme-name}] & {
|
|
@at-root #{&} {
|
|
@content
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 获取导出的主题色
|
|
@function get_export_color($name) {
|
|
$theme-name: map-get($themes, $name);
|
|
@return map-get($theme-name, 'default_color');
|
|
}
|
|
|
|
// 获取主题色
|
|
@function get_color($key) {
|
|
@return map-get($theme-color, $key);
|
|
}
|
|
//获取背景颜色
|
|
@mixin background_color($alpha: 1) {
|
|
@include theme_each {
|
|
background-color: rgba(get_color('default_color'),$alpha);;
|
|
}
|
|
}
|
|
|
|
//获取渐变背景颜色
|
|
@mixin background_linear($deg: 90deg, $min: 0%, $max: 100%) {
|
|
@include theme_each {
|
|
background-image: linear-gradient($deg, get_color('minor_color') $min, get_color('default_color') $max);
|
|
}
|
|
}
|
|
|
|
//获取渐变背景图片和颜色
|
|
@mixin background_image($deg: 90deg, $min: 0%, $max: 100%, $url: '') {
|
|
@include theme_each {
|
|
background-image: url($url),linear-gradient($deg, get_color('minor_color') $min, get_color('default_color') $max);
|
|
}
|
|
}
|
|
|
|
// 设置阴影
|
|
@mixin box_shadow($x, $y, $blur, $spread: 0, $box: inset) {
|
|
@include theme_each {
|
|
box-shadow: $x $y $blur $spread get_color('default_color') $box;
|
|
}
|
|
}
|
|
|
|
//获取字体颜色
|
|
@mixin font_color() {
|
|
@include theme_each {
|
|
color: get_color('default_color');
|
|
}
|
|
}
|
|
|
|
//获取边框颜色
|
|
@mixin border_color() {
|
|
@include theme_each {
|
|
border-color: get_color('default_color');
|
|
}
|
|
}
|
|
|
|
$-color-primary: #40AFFA;
|
|
|
|
//主要边框颜色
|
|
$-color-border: #E5E5E5;
|
|
|
|
//黑色
|
|
$-color-black:#101010;
|
|
|
|
//白色
|
|
$-color-white: #ffffff;
|
|
|
|
//字体主色
|
|
$-color-normal: #333333;
|
|
|
|
//字体浅色
|
|
$-color-lighter: #666666;
|
|
|
|
//字体更浅色
|
|
$-color-muted: #999999;
|
|
|
|
//背景色
|
|
$-color-body: #F6F6F6;
|
|
|
|
/** S Font's size **/
|
|
$-font-size-xxs: 22rpx;
|
|
$-font-size-xs: 24rpx;
|
|
$-font-size-sm: 26rpx;
|
|
$-font-size-nr: 28rpx;
|
|
$-font-size-md: 30rpx;
|
|
$-font-size-lg: 32rpx;
|
|
$-font-size-xl: 34rpx;
|
|
$-font-size-xxl: 36rpx;
|
|
/** E Font's size **/
|
|
|
|
//边框
|
|
$-solid-border: 1px solid $-color-border;
|
|
$-dashed-border: 1px dashed $-color-border;
|
|
$-dotted-border: 1px dotted $-color-border;
|
|
|
|
// 引入uview主题
|
|
@import "components/uview-ui/theme.scss";
|
|
|
|
:export {
|
|
red_theme: get_export_color('red_theme');
|
|
orange_theme: get_export_color('orange_theme');
|
|
pink_theme: get_export_color('pink_theme');
|
|
gold_theme: get_export_color('gold_theme');
|
|
blue_theme: get_export_color('blue_theme');
|
|
green_theme: get_export_color('green_theme');
|
|
}
|
|
|