177 lines
4.1 KiB
SCSS
177 lines
4.1 KiB
SCSS
/**
|
||
* 你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
|
||
* 建议使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
|
||
*/
|
||
|
||
//主色调,红色:#FF0036,绿色 #4CAF50,蓝色:#03A9F4,黄色:#FF9800,粉色:#FF547B,棕色:#C3A769,浅绿色:#65C4AA,黑色:#333333,紫色:#B323B4,淡粉色:#FF8B8B
|
||
|
||
// 颜色
|
||
$color-title: #303133; // 主标题
|
||
$color-sub: #606266; // 副标题
|
||
$color-tip: #909399; // 辅助提示色
|
||
$color-bg: #f8f8f8; // 背景色
|
||
$color-line: #eeeeee; //分割线
|
||
$color-disabled: #cccccc; // 禁用色
|
||
|
||
// 文字
|
||
$font-size-base: 28rpx; // 14px,正文文字
|
||
$font-size-toolbar: 32rpx; // 16px,用于导航栏、标题
|
||
$font-size-sub: 26rpx; // 13px,副标题
|
||
$font-size-tag: 24rpx; // 12px,辅助性文字/大标签
|
||
$font-size-goods-tag: 22rpx; // 11px,商品列表角标
|
||
$font-size-activity-tag: 20rpx; // 10px,活动角标(拼团等角标)/小标签文字
|
||
|
||
$margin-both: 30rpx; //外边距 左右
|
||
$margin-updown: 20rpx; // 外边距 上下
|
||
$border-radius: 10rpx; //圆角
|
||
$padding: 20rpx; //内边距
|
||
|
||
@mixin base($baseColor) {
|
||
$base-color: $baseColor;
|
||
|
||
.color-base-text {
|
||
color: $base-color !important;
|
||
}
|
||
|
||
//背景色
|
||
.color-base-bg {
|
||
background-color: $base-color !important;
|
||
}
|
||
|
||
// 浅主色调背景
|
||
.color-base-bg-light {
|
||
background-color: lighten($base-color, 45%) !important;
|
||
}
|
||
|
||
.color-base-text-before {
|
||
&::after,
|
||
&::before {
|
||
color: $base-color !important;
|
||
}
|
||
}
|
||
|
||
.color-base-bg-before {
|
||
&::after,
|
||
&::before {
|
||
background: $base-color !important;
|
||
}
|
||
}
|
||
|
||
//边框
|
||
.color-base-border {
|
||
border-color: $base-color !important;
|
||
&-top {
|
||
border-top-color: $base-color !important;
|
||
}
|
||
&-bottom {
|
||
border-bottom-color: $base-color !important;
|
||
}
|
||
&-right {
|
||
border-right-color: $base-color !important;
|
||
}
|
||
&-left {
|
||
border-left-color: $base-color !important;
|
||
}
|
||
}
|
||
|
||
//按钮
|
||
button {
|
||
margin: 0 30rpx;
|
||
font-size: $font-size-base;
|
||
border-radius: 20px;
|
||
line-height: 2.7;
|
||
&[type='primary'] {
|
||
background-color: $base-color;
|
||
&[plain] {
|
||
background-color: transparent;
|
||
color: $base-color;
|
||
border-color: $base-color;
|
||
}
|
||
}
|
||
&[type='default'] {
|
||
background: #fff;
|
||
border: 1px solid $color-line;
|
||
color: $color-title;
|
||
}
|
||
&[size='mini'] {
|
||
margin: 0 !important;
|
||
line-height: 2.3;
|
||
font-size: $font-size-tag;
|
||
&[type='default'] {
|
||
background-color: #fff;
|
||
}
|
||
}
|
||
&.button-hover[type='primary'] {
|
||
background-color: $base-color;
|
||
&[plain] {
|
||
color:rgba($base-color, 0.6);
|
||
border-color: rgba($base-color, 0.6);
|
||
background-color: #fff;
|
||
}
|
||
}
|
||
|
||
&[disabled],
|
||
&.disabled {
|
||
background: $color-line !important;
|
||
color: rgba(0, 0, 0, 0.3) !important;
|
||
border-color: $color-line !important;
|
||
}
|
||
}
|
||
|
||
// 复选框
|
||
uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
|
||
color: $base-color !important;
|
||
}
|
||
|
||
// 开关
|
||
uni-switch .uni-switch-input.uni-switch-input-checked {
|
||
background-color: $base-color !important;
|
||
border-color: $base-color !important;
|
||
}
|
||
|
||
// 单选
|
||
uni-radio .uni-radio-input-checked {
|
||
background-color: $base-color !important;
|
||
border-color: $base-color !important;
|
||
}
|
||
|
||
// 滑块
|
||
uni-slider .uni-slider-track {
|
||
background-color: $base-color !important;
|
||
}
|
||
|
||
.uni-tag--primary {
|
||
color: #fff !important;
|
||
background-color: $base-color !important;
|
||
border-color: $base-color !important;
|
||
}
|
||
|
||
.uni-tag--primary.uni-tag--inverted {
|
||
color: #fff !important;
|
||
background-color: $base-color !important;
|
||
border-color: $base-color !important;
|
||
// color: $base-color !important;
|
||
// background-color: #fff !important;
|
||
// border-color: $base-color !important;
|
||
}
|
||
}
|
||
.uni-line-hide{
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
}
|
||
.uni-using-hide{
|
||
overflow: hidden;
|
||
width: 100%;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.prevent-head-roll{
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 998;
|
||
} |