main
LGX
3 months ago
parent
481b2d76b8
commit
e5659a16e4
@ -0,0 +1,17 @@ |
||||
## 1.0.0（2021-11-19） |
||||
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource) |
||||
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-link](https://uniapp.dcloud.io/component/uniui/uni-link) |
||||
## 1.1.7（2021-11-08） |
||||
## 0.0.7（2021-09-03） |
||||
- 修复 在 nvue 下不显示的 bug |
||||
## 0.0.6（2021-07-30） |
||||
- 新增 支持自定义插槽 |
||||
## 0.0.5（2021-06-21） |
||||
- 新增 download 属性，H5平台下载文件名 |
||||
## 0.0.4（2021-05-12） |
||||
- 新增 组件示例地址 |
||||
## 0.0.3（2021-03-09） |
||||
- 新增 href 属性支持 tel:|mailto: |
||||
|
||||
## 0.0.2（2021-02-05） |
||||
- 调整为uni_modules目录规范 |
||||
@ -0,0 +1,128 @@ |
||||
<template> |
||||
<a v-if="isShowA" class="uni-link" :href="href" |
||||
:class="{'uni-link--withline':showUnderLine===true||showUnderLine==='true'}" |
||||
:style="{color,fontSize:fontSize+'px'}" :download="download"> |
||||
<slot>{{text}}</slot> |
||||
</a> |
||||
<!-- #ifndef APP-NVUE --> |
||||
<text v-else class="uni-link" :class="{'uni-link--withline':showUnderLine===true||showUnderLine==='true'}" |
||||
:style="{color,fontSize:fontSize+'px'}" @click="openURL"> |
||||
<slot>{{text}}</slot> |
||||
</text> |
||||
<!-- #endif --> |
||||
<!-- #ifdef APP-NVUE --> |
||||
<text v-else class="uni-link" :class="{'uni-link--withline':showUnderLine===true||showUnderLine==='true'}" |
||||
:style="{color,fontSize:fontSize+'px'}" @click="openURL"> |
||||
{{text}} |
||||
</text> |
||||
<!-- #endif --> |
||||
</template> |
||||
|
||||
<script> |
||||
/** |
||||
* Link 外部网页超链接组件 |
||||
* @description uni-link是一个外部网页超链接组件，在小程序内复制url，在app内打开外部浏览器，在h5端打开新网页 |
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=1182 |
||||
* @property {String} href 点击后打开的外部网页url |
||||
* @property {String} text 显示的文字 |
||||
* @property {String} downlaod H5平台下载文件名 |
||||
* @property {Boolean} showUnderLine 是否显示下划线 |
||||
* @property {String} copyTips 在小程序端复制链接时显示的提示语 |
||||
* @property {String} color 链接文字颜色 |
||||
* @property {String} fontSize 链接文字大小 |
||||
* @example * <uni-link href="https://ext.dcloud.net.cn" text="https://ext.dcloud.net.cn"></uni-link> |
||||
*/ |
||||
export default { |
||||
name: 'uniLink', |
||||
props: { |
||||
href: { |
||||
type: String, |
||||
default: '' |
||||
}, |
||||
text: { |
||||
type: String, |
||||
default: '' |
||||
}, |
||||
download: { |
||||
type: String, |
||||
default: '' |
||||
}, |
||||
showUnderLine: { |
||||
type: [Boolean, String], |
||||
default: true |
||||
}, |
||||
copyTips: { |
||||
type: String, |
||||
default: '已自动复制网址，请在手机浏览器里粘贴该网址' |
||||
}, |
||||
color: { |
||||
type: String, |
||||
default: '#999999' |
||||
}, |
||||
fontSize: { |
||||
type: [Number, String], |
||||
default: 14 |
||||
} |
||||
}, |
||||
computed: { |
||||
isShowA() { |
||||
// #ifdef H5 |
||||
this._isH5 = true; |
||||
// #endif |
||||
if ((this.isMail() || this.isTel()) && this._isH5 === true) { |
||||
return true; |
||||
} |
||||
return false; |
||||
} |
||||
}, |
||||
created() { |
||||
this._isH5 = null; |
||||
}, |
||||
methods: { |
||||
isMail() { |
||||
return this.href.startsWith('mailto:'); |
||||
}, |
||||
isTel() { |
||||
return this.href.startsWith('tel:'); |
||||
}, |
||||
openURL() { |
||||
// #ifdef APP-PLUS |
||||
if (this.isTel()) { |
||||
this.makePhoneCall(this.href.replace('tel:', '')); |
||||
} else { |
||||
plus.runtime.openURL(this.href); |
||||
} |
||||
// #endif |
||||
// #ifdef H5 |
||||
window.open(this.href) |
||||
// #endif |
||||
// #ifdef MP |
||||
uni.setClipboardData({ |
||||
data: this.href |
||||
}); |
||||
uni.showModal({ |
||||
content: this.copyTips, |
||||
showCancel: false |
||||
}); |
||||
// #endif |
||||
}, |
||||
makePhoneCall(phoneNumber) { |
||||
uni.makePhoneCall({ |
||||
phoneNumber |
||||
}) |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style> |
||||
/* #ifndef APP-NVUE */ |
||||
.uni-link { |
||||
cursor: pointer; |
||||
} |
||||
|
||||
/* #endif */ |
||||
.uni-link--withline { |
||||
text-decoration: underline; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,87 @@ |
||||
{ |
||||
"id": "uni-link", |
||||
"displayName": "uni-link 超链接", |
||||
"version": "1.0.0", |
||||
"description": "uni-link是一个外部网页超链接组件，在小程序内复制url，在app内打开外部浏览器，在h5端打", |
||||
"keywords": [ |
||||
"uni-ui", |
||||
"uniui", |
||||
"link", |
||||
"超链接", |
||||
"" |
||||
], |
||||
"repository": "https://github.com/dcloudio/uni-ui", |
||||
"engines": { |
||||
"HBuilderX": "" |
||||
}, |
||||
"directories": { |
||||
"example": "../../temps/example_temps" |
||||
}, |
||||
"dcloudext": { |
||||
"category": [ |
||||
"前端组件", |
||||
"通用组件" |
||||
], |
||||
"sale": { |
||||
"regular": { |
||||
"price": "0.00" |
||||
}, |
||||
"sourcecode": { |
||||
"price": "0.00" |
||||
} |
||||
}, |
||||
"contact": { |
||||
"qq": "" |
||||
}, |
||||
"declaration": { |
||||
"ads": "无", |
||||
"data": "无", |
||||
"permissions": "无" |
||||
}, |
||||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui" |
||||
}, |
||||
"uni_modules": { |
||||
"dependencies": ["uni-scss"], |
||||
"encrypt": [], |
||||
"platforms": { |
||||
"cloud": { |
||||
"tcb": "y", |
||||
"aliyun": "y" |
||||
}, |
||||
"client": { |
||||
"App": { |
||||
"app-vue": "y", |
||||
"app-nvue": "y" |
||||
}, |
||||
"H5-mobile": { |
||||
"Safari": "y", |
||||
"Android Browser": "y", |
||||
"微信浏览器(Android)": "y", |
||||
"QQ浏览器(Android)": "y" |
||||
}, |
||||
"H5-pc": { |
||||
"Chrome": "y", |
||||
"IE": "y", |
||||
"Edge": "y", |
||||
"Firefox": "y", |
||||
"Safari": "y" |
||||
}, |
||||
"小程序": { |
||||
"微信": "y", |
||||
"阿里": "y", |
||||
"百度": "y", |
||||
"字节跳动": "y", |
||||
"QQ": "y" |
||||
}, |
||||
"快应用": { |
||||
"华为": "y", |
||||
"联盟": "y" |
||||
}, |
||||
"Vue": { |
||||
"vue2": "y", |
||||
"vue3": "y" |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,11 @@ |
||||
|
||||
|
||||
## Link 链接 |
||||
> **组件名：uni-link** |
||||
> 代码块： `uLink` |
||||
|
||||
|
||||
uni-link是一个外部网页超链接组件，在小程序内复制url，在app内打开外部浏览器，在h5端打开新网页。 |
||||
|
||||
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-link) |
||||
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 |
||||
@ -0,0 +1,8 @@ |
||||
## 1.0.3（2022-01-21） |
||||
- 优化 组件示例 |
||||
## 1.0.2（2021-11-22） |
||||
- 修复 / 符号在 vue 不同版本兼容问题引起的报错问题 |
||||
## 1.0.1（2021-11-22） |
||||
- 修复 vue3中scss语法兼容问题 |
||||
## 1.0.0（2021-11-18） |
||||
- init |
||||
@ -0,0 +1 @@ |
||||
@import './styles/index.scss'; |
||||
@ -0,0 +1,82 @@ |
||||
{ |
||||
"id": "uni-scss", |
||||
"displayName": "uni-scss 辅助样式", |
||||
"version": "1.0.3", |
||||
"description": "uni-sass是uni-ui提供的一套全局样式 ，通过一些简单的类名和sass变量，实现简单的页面布局操作，比如颜色、边距、圆角等。", |
||||
"keywords": [ |
||||
"uni-scss", |
||||
"uni-ui", |
||||
"辅助样式" |
||||
], |
||||
"repository": "https://github.com/dcloudio/uni-ui", |
||||
"engines": { |
||||
"HBuilderX": "^3.1.0" |
||||
}, |
||||
"dcloudext": { |
||||
"category": [ |
||||
"JS SDK", |
||||
"通用 SDK" |
||||
], |
||||
"sale": { |
||||
"regular": { |
||||
"price": "0.00" |
||||
}, |
||||
"sourcecode": { |
||||
"price": "0.00" |
||||
} |
||||
}, |
||||
"contact": { |
||||
"qq": "" |
||||
}, |
||||
"declaration": { |
||||
"ads": "无", |
||||
"data": "无", |
||||
"permissions": "无" |
||||
}, |
||||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui" |
||||
}, |
||||
"uni_modules": { |
||||
"dependencies": [], |
||||
"encrypt": [], |
||||
"platforms": { |
||||
"cloud": { |
||||
"tcb": "y", |
||||
"aliyun": "y" |
||||
}, |
||||
"client": { |
||||
"App": { |
||||
"app-vue": "y", |
||||
"app-nvue": "u" |
||||
}, |
||||
"H5-mobile": { |
||||
"Safari": "y", |
||||
"Android Browser": "y", |
||||
"微信浏览器(Android)": "y", |
||||
"QQ浏览器(Android)": "y" |
||||
}, |
||||
"H5-pc": { |
||||
"Chrome": "y", |
||||
"IE": "y", |
||||
"Edge": "y", |
||||
"Firefox": "y", |
||||
"Safari": "y" |
||||
}, |
||||
"小程序": { |
||||
"微信": "y", |
||||
"阿里": "y", |
||||
"百度": "y", |
||||
"字节跳动": "y", |
||||
"QQ": "y" |
||||
}, |
||||
"快应用": { |
||||
"华为": "n", |
||||
"联盟": "n" |
||||
}, |
||||
"Vue": { |
||||
"vue2": "y", |
||||
"vue3": "y" |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,4 @@ |
||||
`uni-sass` 是 `uni-ui`提供的一套全局样式 ，通过一些简单的类名和`sass`变量，实现简单的页面布局操作，比如颜色、边距、圆角等。 |
||||
|
||||
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-sass) |
||||
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 |
||||
@ -0,0 +1,7 @@ |
||||
@import './setting/_variables.scss'; |
||||
@import './setting/_border.scss'; |
||||
@import './setting/_color.scss'; |
||||
@import './setting/_space.scss'; |
||||
@import './setting/_radius.scss'; |
||||
@import './setting/_text.scss'; |
||||
@import './setting/_styles.scss'; |
||||
@ -0,0 +1,3 @@ |
||||
.uni-border { |
||||
border: 1px $uni-border-1 solid; |
||||
} |
||||
@ -0,0 +1,66 @@ |
||||
|
||||
// TODO 暂时不需要 class ，需要用户使用变量实现 ，如果使用类名其实并不推荐 |
||||
// @mixin get-styles($k,$c) { |
||||
// @if $k == size or $k == weight{ |
||||
// font-#{$k}:#{$c} |
||||
// }@else{ |
||||
// #{$k}:#{$c} |
||||
// } |
||||
// } |
||||
$uni-ui-color:( |
||||
// 主色 |
||||
primary: $uni-primary, |
||||
primary-disable: $uni-primary-disable, |
||||
primary-light: $uni-primary-light, |
||||
// 辅助色 |
||||
success: $uni-success, |
||||
success-disable: $uni-success-disable, |
||||
success-light: $uni-success-light, |
||||
warning: $uni-warning, |
||||
warning-disable: $uni-warning-disable, |
||||
warning-light: $uni-warning-light, |
||||
error: $uni-error, |
||||
error-disable: $uni-error-disable, |
||||
error-light: $uni-error-light, |
||||
info: $uni-info, |
||||
info-disable: $uni-info-disable, |
||||
info-light: $uni-info-light, |
||||
// 中性色 |
||||
main-color: $uni-main-color, |
||||
base-color: $uni-base-color, |
||||
secondary-color: $uni-secondary-color, |
||||
extra-color: $uni-extra-color, |
||||
// 背景色 |
||||
bg-color: $uni-bg-color, |
||||
// 边框颜色 |
||||
border-1: $uni-border-1, |
||||
border-2: $uni-border-2, |
||||
border-3: $uni-border-3, |
||||
border-4: $uni-border-4, |
||||
// 黑色 |
||||
black:$uni-black, |
||||
// 白色 |
||||
white:$uni-white, |
||||
// 透明 |
||||
transparent:$uni-transparent |
||||
) !default; |
||||
@each $key, $child in $uni-ui-color { |
||||
.uni-#{"" + $key} { |
||||
color: $child; |
||||
} |
||||
.uni-#{"" + $key}-bg { |
||||
background-color: $child; |
||||
} |
||||
} |
||||
.uni-shadow-sm { |
||||
box-shadow: $uni-shadow-sm; |
||||
} |
||||
.uni-shadow-base { |
||||
box-shadow: $uni-shadow-base; |
||||
} |
||||
.uni-shadow-lg { |
||||
box-shadow: $uni-shadow-lg; |
||||
} |
||||
.uni-mask { |
||||
background-color:$uni-mask; |
||||
} |
||||
@ -0,0 +1,55 @@ |
||||
@mixin radius($r,$d:null ,$important: false){ |
||||
$radius-value:map-get($uni-radius, $r) if($important, !important, null); |
||||
// Key exists within the $uni-radius variable |
||||
@if (map-has-key($uni-radius, $r) and $d){ |
||||
@if $d == t { |
||||
border-top-left-radius:$radius-value; |
||||
border-top-right-radius:$radius-value; |
||||
}@else if $d == r { |
||||
border-top-right-radius:$radius-value; |
||||
border-bottom-right-radius:$radius-value; |
||||
}@else if $d == b { |
||||
border-bottom-left-radius:$radius-value; |
||||
border-bottom-right-radius:$radius-value; |
||||
}@else if $d == l { |
||||
border-top-left-radius:$radius-value; |
||||
border-bottom-left-radius:$radius-value; |
||||
}@else if $d == tl { |
||||
border-top-left-radius:$radius-value; |
||||
}@else if $d == tr { |
||||
border-top-right-radius:$radius-value; |
||||
}@else if $d == br { |
||||
border-bottom-right-radius:$radius-value; |
||||
}@else if $d == bl { |
||||
border-bottom-left-radius:$radius-value; |
||||
} |
||||
}@else{ |
||||
border-radius:$radius-value; |
||||
} |
||||
} |
||||
|
||||
@each $key, $child in $uni-radius { |
||||
@if($key){ |
||||
.uni-radius-#{"" + $key} { |
||||
@include radius($key) |
||||
} |
||||
}@else{ |
||||
.uni-radius { |
||||
@include radius($key) |
||||
} |
||||
} |
||||
} |
||||
|
||||
@each $direction in t, r, b, l,tl, tr, br, bl { |
||||
@each $key, $child in $uni-radius { |
||||
@if($key){ |
||||
.uni-radius-#{"" + $direction}-#{"" + $key} { |
||||
@include radius($key,$direction,false) |
||||
} |
||||
}@else{ |
||||
.uni-radius-#{$direction} { |
||||
@include radius($key,$direction,false) |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,56 @@ |
||||
|
||||
@mixin fn($space,$direction,$size,$n) { |
||||
@if $n { |
||||
#{$space}-#{$direction}: #{$size*$uni-space-root}px |
||||
} @else { |
||||
#{$space}-#{$direction}: #{-$size*$uni-space-root}px |
||||
} |
||||
} |
||||
@mixin get-styles($direction,$i,$space,$n){ |
||||
@if $direction == t { |
||||
@include fn($space, top,$i,$n); |
||||
} |
||||
@if $direction == r { |
||||
@include fn($space, right,$i,$n); |
||||
} |
||||
@if $direction == b { |
||||
@include fn($space, bottom,$i,$n); |
||||
} |
||||
@if $direction == l { |
||||
@include fn($space, left,$i,$n); |
||||
} |
||||
@if $direction == x { |
||||
@include fn($space, left,$i,$n); |
||||
@include fn($space, right,$i,$n); |
||||
} |
||||
@if $direction == y { |
||||
@include fn($space, top,$i,$n); |
||||
@include fn($space, bottom,$i,$n); |
||||
} |
||||
@if $direction == a { |
||||
@if $n { |
||||
#{$space}:#{$i*$uni-space-root}px; |
||||
} @else { |
||||
#{$space}:#{-$i*$uni-space-root}px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
@each $orientation in m,p { |
||||
$space: margin; |
||||
@if $orientation == m { |
||||
$space: margin; |
||||
} @else { |
||||
$space: padding; |
||||
} |
||||
@for $i from 0 through 16 { |
||||
@each $direction in t, r, b, l, x, y, a { |
||||
.uni-#{$orientation}#{$direction}-#{$i} { |
||||
@include get-styles($direction,$i,$space,true); |
||||
} |
||||
.uni-#{$orientation}#{$direction}-n#{$i} { |
||||
@include get-styles($direction,$i,$space,false); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,167 @@ |
||||
/* #ifndef APP-NVUE */ |
||||
|
||||
$-color-white:#fff; |
||||
$-color-black:#000; |
||||
@mixin base-style($color) { |
||||
color: #fff; |
||||
background-color: $color; |
||||
border-color: mix($-color-black, $color, 8%); |
||||
&:not([hover-class]):active { |
||||
background: mix($-color-black, $color, 10%); |
||||
border-color: mix($-color-black, $color, 20%); |
||||
color: $-color-white; |
||||
outline: none; |
||||
} |
||||
} |
||||
@mixin is-color($color) { |
||||
@include base-style($color); |
||||
&[loading] { |
||||
@include base-style($color); |
||||
&::before { |
||||
margin-right:5px; |
||||
} |
||||
} |
||||
&[disabled] { |
||||
&, |
||||
&[loading], |
||||
&:not([hover-class]):active { |
||||
color: $-color-white; |
||||
border-color: mix(darken($color,10%), $-color-white); |
||||
background-color: mix($color, $-color-white); |
||||
} |
||||
} |
||||
|
||||
} |
||||
@mixin base-plain-style($color) { |
||||
color:$color; |
||||
background-color: mix($-color-white, $color, 90%); |
||||
border-color: mix($-color-white, $color, 70%); |
||||
&:not([hover-class]):active { |
||||
background: mix($-color-white, $color, 80%); |
||||
color: $color; |
||||
outline: none; |
||||
border-color: mix($-color-white, $color, 50%); |
||||
} |
||||
} |
||||
@mixin is-plain($color){ |
||||
&[plain] { |
||||
@include base-plain-style($color); |
||||
&[loading] { |
||||
@include base-plain-style($color); |
||||
&::before { |
||||
margin-right:5px; |
||||
} |
||||
} |
||||
&[disabled] { |
||||
&, |
||||
&:active { |
||||
color: mix($-color-white, $color, 40%); |
||||
background-color: mix($-color-white, $color, 90%); |
||||
border-color: mix($-color-white, $color, 80%); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
|
||||
.uni-btn { |
||||
margin: 5px; |
||||
color: #393939; |
||||
border:1px solid #ccc; |
||||
font-size: 16px; |
||||
font-weight: 200; |
||||
background-color: #F9F9F9; |
||||
// TODO 暂时处理边框隐藏一边的问题 |
||||
overflow: visible; |
||||
&::after{ |
||||
border: none; |
||||
} |
||||
|
||||
&:not([type]),&[type=default] { |
||||
color: #999; |
||||
&[loading] { |
||||
background: none; |
||||
&::before { |
||||
margin-right:5px; |
||||
} |
||||
} |
||||
|
||||
|
||||
|
||||
&[disabled]{ |
||||
color: mix($-color-white, #999, 60%); |
||||
&, |
||||
&[loading], |
||||
&:active { |
||||
color: mix($-color-white, #999, 60%); |
||||
background-color: mix($-color-white,$-color-black , 98%); |
||||
border-color: mix($-color-white, #999, 85%); |
||||
} |
||||
} |
||||
|
||||
&[plain] { |
||||
color: #999; |
||||
background: none; |
||||
border-color: $uni-border-1; |
||||
&:not([hover-class]):active { |
||||
background: none; |
||||
color: mix($-color-white, $-color-black, 80%); |
||||
border-color: mix($-color-white, $-color-black, 90%); |
||||
outline: none; |
||||
} |
||||
&[disabled]{ |
||||
&, |
||||
&[loading], |
||||
&:active { |
||||
background: none; |
||||
color: mix($-color-white, #999, 60%); |
||||
border-color: mix($-color-white, #999, 85%); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
&:not([hover-class]):active { |
||||
color: mix($-color-white, $-color-black, 50%); |
||||
} |
||||
|
||||
&[size=mini] { |
||||
font-size: 16px; |
||||
font-weight: 200; |
||||
border-radius: 8px; |
||||
} |
||||
|
||||
|
||||
|
||||
&.uni-btn-small { |
||||
font-size: 14px; |
||||
} |
||||
&.uni-btn-mini { |
||||
font-size: 12px; |
||||
} |
||||
|
||||
&.uni-btn-radius { |
||||
border-radius: 999px; |
||||
} |
||||
&[type=primary] { |
||||
@include is-color($uni-primary); |
||||
@include is-plain($uni-primary) |
||||
} |
||||
&[type=success] { |
||||
@include is-color($uni-success); |
||||
@include is-plain($uni-success) |
||||
} |
||||
&[type=error] { |
||||
@include is-color($uni-error); |
||||
@include is-plain($uni-error) |
||||
} |
||||
&[type=warning] { |
||||
@include is-color($uni-warning); |
||||
@include is-plain($uni-warning) |
||||
} |
||||
&[type=info] { |
||||
@include is-color($uni-info); |
||||
@include is-plain($uni-info) |
||||
} |
||||
} |
||||
/* #endif */ |
||||
@ -0,0 +1,24 @@ |
||||
@mixin get-styles($k,$c) { |
||||
@if $k == size or $k == weight{ |
||||
font-#{$k}:#{$c} |
||||
}@else{ |
||||
#{$k}:#{$c} |
||||
} |
||||
} |
||||
|
||||
@each $key, $child in $uni-headings { |
||||
/* #ifndef APP-NVUE */ |
||||
.uni-#{$key} { |
||||
@each $k, $c in $child { |
||||
@include get-styles($k,$c) |
||||
} |
||||
} |
||||
/* #endif */ |
||||
/* #ifdef APP-NVUE */ |
||||
.container .uni-#{$key} { |
||||
@each $k, $c in $child { |
||||
@include get-styles($k,$c) |
||||
} |
||||
} |
||||
/* #endif */ |
||||
} |
||||
@ -0,0 +1,146 @@ |
||||
// @use "sass:math"; |
||||
@import '../tools/functions.scss'; |
||||
// 间距基础倍数 |
||||
$uni-space-root: 2 !default; |
||||
// 边框半径默认值 |
||||
$uni-radius-root:5px !default; |
||||
$uni-radius: () !default; |
||||
// 边框半径断点 |
||||
$uni-radius: map-deep-merge( |
||||
( |
||||
0: 0, |
||||
// TODO 当前版本暂时不支持 sm 属性 |
||||
// 'sm': math.div($uni-radius-root, 2), |
||||
null: $uni-radius-root, |
||||
'lg': $uni-radius-root * 2, |
||||
'xl': $uni-radius-root * 6, |
||||
'pill': 9999px, |
||||
'circle': 50% |
||||
), |
||||
$uni-radius |
||||
); |
||||
// 字体家族 |
||||
$body-font-family: 'Roboto', sans-serif !default; |
||||
// 文本 |
||||
$heading-font-family: $body-font-family !default; |
||||
$uni-headings: () !default; |
||||
$letterSpacing: -0.01562em; |
||||
$uni-headings: map-deep-merge( |
||||
( |
||||
'h1': ( |
||||
size: 32px, |
||||
weight: 300, |
||||
line-height: 50px, |
||||
// letter-spacing:-0.01562em |
||||
), |
||||
'h2': ( |
||||
size: 28px, |
||||
weight: 300, |
||||
line-height: 40px, |
||||
// letter-spacing: -0.00833em |
||||
), |
||||
'h3': ( |
||||
size: 24px, |
||||
weight: 400, |
||||
line-height: 32px, |
||||
// letter-spacing: normal |
||||
), |
||||
'h4': ( |
||||
size: 20px, |
||||
weight: 400, |
||||
line-height: 30px, |
||||
// letter-spacing: 0.00735em |
||||
), |
||||
'h5': ( |
||||
size: 16px, |
||||
weight: 400, |
||||
line-height: 24px, |
||||
// letter-spacing: normal |
||||
), |
||||
'h6': ( |
||||
size: 14px, |
||||
weight: 500, |
||||
line-height: 18px, |
||||
// letter-spacing: 0.0125em |
||||
), |
||||
'subtitle': ( |
||||
size: 12px, |
||||
weight: 400, |
||||
line-height: 20px, |
||||
// letter-spacing: 0.00937em |
||||
), |
||||
'body': ( |
||||
font-size: 14px, |
||||
font-weight: 400, |
||||
line-height: 22px, |
||||
// letter-spacing: 0.03125em |
||||
), |
||||
'caption': ( |
||||
'size': 12px, |
||||
'weight': 400, |
||||
'line-height': 20px, |
||||
// 'letter-spacing': 0.03333em, |
||||
// 'text-transform': false |
||||
) |
||||
), |
||||
$uni-headings |
||||
); |
||||
|
||||
|
||||
|
||||
// 主色 |
||||
$uni-primary: #2979ff !default; |
||||
$uni-primary-disable:lighten($uni-primary,20%) !default; |
||||
$uni-primary-light: lighten($uni-primary,25%) !default; |
||||
|
||||
// 辅助色 |
||||
// 除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。 |
||||
$uni-success: #18bc37 !default; |
||||
$uni-success-disable:lighten($uni-success,20%) !default; |
||||
$uni-success-light: lighten($uni-success,25%) !default; |
||||
|
||||
$uni-warning: #f3a73f !default; |
||||
$uni-warning-disable:lighten($uni-warning,20%) !default; |
||||
$uni-warning-light: lighten($uni-warning,25%) !default; |
||||
|
||||
$uni-error: #e43d33 !default; |
||||
$uni-error-disable:lighten($uni-error,20%) !default; |
||||
$uni-error-light: lighten($uni-error,25%) !default; |
||||
|
||||
$uni-info: #8f939c !default; |
||||
$uni-info-disable:lighten($uni-info,20%) !default; |
||||
$uni-info-light: lighten($uni-info,25%) !default; |
||||
|
||||
// 中性色 |
||||
// 中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。 |
||||
$uni-main-color: #3a3a3a !default; // 主要文字 |
||||
$uni-base-color: #6a6a6a !default; // 常规文字 |
||||
$uni-secondary-color: #909399 !default; // 次要文字 |
||||
$uni-extra-color: #c7c7c7 !default; // 辅助说明 |
||||
|
||||
// 边框颜色 |
||||
$uni-border-1: #F0F0F0 !default; |
||||
$uni-border-2: #EDEDED !default; |
||||
$uni-border-3: #DCDCDC !default; |
||||
$uni-border-4: #B9B9B9 !default; |
||||
|
||||
// 常规色 |
||||
$uni-black: #000000 !default; |
||||
$uni-white: #ffffff !default; |
||||
$uni-transparent: rgba($color: #000000, $alpha: 0) !default; |
||||
|
||||
// 背景色 |
||||
$uni-bg-color: #f7f7f7 !default; |
||||
|
||||
/* 水平间距 */ |
||||
$uni-spacing-sm: 8px !default; |
||||
$uni-spacing-base: 15px !default; |
||||
$uni-spacing-lg: 30px !default; |
||||
|
||||
// 阴影 |
||||
$uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5) !default; |
||||
$uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2) !default; |
||||
$uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5) !default; |
||||
|
||||
// 蒙版 |
||||
$uni-mask: rgba($color: #000000, $alpha: 0.4) !default; |
||||
@ -0,0 +1,19 @@ |
||||
// 合并 map |
||||
@function map-deep-merge($parent-map, $child-map){ |
||||
$result: $parent-map; |
||||
@each $key, $child in $child-map { |
||||
$parent-has-key: map-has-key($result, $key); |
||||
$parent-value: map-get($result, $key); |
||||
$parent-type: type-of($parent-value); |
||||
$child-type: type-of($child); |
||||
$parent-is-map: $parent-type == map; |
||||
$child-is-map: $child-type == map; |
||||
|
||||
@if (not $parent-has-key) or ($parent-type != $child-type) or (not ($parent-is-map and $child-is-map)){ |
||||
$result: map-merge($result, ( $key: $child )); |
||||
}@else { |
||||
$result: map-merge($result, ( $key: map-deep-merge($parent-value, $child) )); |
||||
} |
||||
} |
||||
@return $result; |
||||
}; |
||||
@ -0,0 +1,31 @@ |
||||
// 间距基础倍数 |
||||
$uni-space-root: 2; |
||||
// 边框半径默认值 |
||||
$uni-radius-root:5px; |
||||
// 主色 |
||||
$uni-primary: #2979ff; |
||||
// 辅助色 |
||||
$uni-success: #4cd964; |
||||
// 警告色 |
||||
$uni-warning: #f0ad4e; |
||||
// 错误色 |
||||
$uni-error: #dd524d; |
||||
// 描述色 |
||||
$uni-info: #909399; |
||||
// 中性色 |
||||
$uni-main-color: #303133; |
||||
$uni-base-color: #606266; |
||||
$uni-secondary-color: #909399; |
||||
$uni-extra-color: #C0C4CC; |
||||
// 背景色 |
||||
$uni-bg-color: #f5f5f5; |
||||
// 边框颜色 |
||||
$uni-border-1: #DCDFE6; |
||||
$uni-border-2: #E4E7ED; |
||||
$uni-border-3: #EBEEF5; |
||||
$uni-border-4: #F2F6FC; |
||||
|
||||
// 常规色 |
||||
$uni-black: #000000; |
||||
$uni-white: #ffffff; |
||||
$uni-transparent: rgba($color: #000000, $alpha: 0); |
||||
@ -0,0 +1,62 @@ |
||||
@import './styles/setting/_variables.scss'; |
||||
// 间距基础倍数 |
||||
$uni-space-root: 2; |
||||
// 边框半径默认值 |
||||
$uni-radius-root:5px; |
||||
|
||||
// 主色 |
||||
$uni-primary: #2979ff; |
||||
$uni-primary-disable:mix(#fff,$uni-primary,50%); |
||||
$uni-primary-light: mix(#fff,$uni-primary,80%); |
||||
|
||||
// 辅助色 |
||||
// 除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。 |
||||
$uni-success: #18bc37; |
||||
$uni-success-disable:mix(#fff,$uni-success,50%); |
||||
$uni-success-light: mix(#fff,$uni-success,80%); |
||||
|
||||
$uni-warning: #f3a73f; |
||||
$uni-warning-disable:mix(#fff,$uni-warning,50%); |
||||
$uni-warning-light: mix(#fff,$uni-warning,80%); |
||||
|
||||
$uni-error: #e43d33; |
||||
$uni-error-disable:mix(#fff,$uni-error,50%); |
||||
$uni-error-light: mix(#fff,$uni-error,80%); |
||||
|
||||
$uni-info: #8f939c; |
||||
$uni-info-disable:mix(#fff,$uni-info,50%); |
||||
$uni-info-light: mix(#fff,$uni-info,80%); |
||||
|
||||
// 中性色 |
||||
// 中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。 |
||||
$uni-main-color: #3a3a3a; // 主要文字 |
||||
$uni-base-color: #6a6a6a; // 常规文字 |
||||
$uni-secondary-color: #909399; // 次要文字 |
||||
$uni-extra-color: #c7c7c7; // 辅助说明 |
||||
|
||||
// 边框颜色 |
||||
$uni-border-1: #F0F0F0; |
||||
$uni-border-2: #EDEDED; |
||||
$uni-border-3: #DCDCDC; |
||||
$uni-border-4: #B9B9B9; |
||||
|
||||
// 常规色 |
||||
$uni-black: #000000; |
||||
$uni-white: #ffffff; |
||||
$uni-transparent: rgba($color: #000000, $alpha: 0); |
||||
|
||||
// 背景色 |
||||
$uni-bg-color: #f7f7f7; |
||||
|
||||
/* 水平间距 */ |
||||
$uni-spacing-sm: 8px; |
||||
$uni-spacing-base: 15px; |
||||
$uni-spacing-lg: 30px; |
||||
|
||||
// 阴影 |
||||
$uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5); |
||||
$uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2); |
||||
$uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5); |
||||
|
||||
// 蒙版 |
||||
$uni-mask: rgba($color: #000000, $alpha: 0.4); |
||||
Loading…
Reference in new issue