2025/2/8第一次更新

This commit is contained in:
爱吃咸鱼小猫咪
2025-02-08 18:50:38 +08:00
commit d7af560866
26519 changed files with 5046029 additions and 0 deletions
+144
View File
@@ -0,0 +1,144 @@
### 1.0.1
_2023-03-21_
#### Fixed
- 优化box-shadow样式
### 1.0.2
_2023-03-25_
#### Fixed
- 修复默认内置颜色背景颜色时设置字体颜色失效的问题
### 1.0.3
_2023-03-25_
#### Fixed
- 优化颜色值
### 1.0.4
_2023-03-26_
#### Fixed
- 修改tn-cool-bg-image类名为tn-bg-image
### 1.0.5
_2023-03-28_
#### Fixed
- 修复边框设置无效的问题
### 1.0.6
_2023-03-28_
#### Fixed
- 修复flex布局下同时设置多个对齐方向的时候会导致对齐失效的问题
### 1.0.7
_2023-03-29_
#### Fixed
- 修复shadow--blur类名修改为shadow-blur
- 修复shadow-blur样式不生效的问题
### 1.0.8
_2023-04-03_
#### Fixed
- 修复/在uniapp-微信小程序中无法解析的问题,将/改为-
- 修复:在uniapp-微信小程序中无法解析的问题,将:改为_
#### Add
- 新增uniapp专有样式
### 1.0.9
_2023-04-03_
#### Fixed
- 修复uniapp中没有:root的问题,将变量卸载body中
### 1.0.10
_2023-04-05_
#### Add
- 新增src目录,将源码放入src目录中
- 新增uniapp中隐藏滚动条样式
#### Fixed
- 修复uniapp中没有:root的问题,将变量卸载body中
### 1.0.11
### 1.0.12
_2023-04-10_
#### Add
- 新增uniapp样式中H5中隐藏滚动条样式
#### Fixed
- 修复uniapp中没有:root的问题,将变量卸载body\page中
### 1.0.13
_2023-04-10_
#### Fixed
- 修复uniapp中样式生效的顺序
### 1.0.14
_2023-04-24_
#### Fixed
- 修复tn-border样式下去修改style时不生效的问题
### 1.0.15
### 1.0.16
### 1.0.17
_2023-07-13_
#### Fixed
- 修复在`h5`中图鸟弹框会遮挡原生弹框的问题
### 1.0.18
_2023-07-26_
- 更新cool-bg的背景地址
### 1.0.19
_2023-08-02_
- uniapp中新增`tn-image`设置图片默认样式
+1
View File
@@ -0,0 +1 @@
# 图鸟 UI 样式
+1
View File
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+24
View File
@@ -0,0 +1,24 @@
{
"name": "@tuniao/tn-style",
"version": "1.0.19",
"description": "Tuniao UI Style",
"keywords": [
"tn",
"tuniao",
"tuniao-ui",
"图鸟",
"tn-style",
"style css"
],
"license": "ISC",
"author": "Tuniao Technology Co., Ltd.",
"style": "dist/index.css",
"publishConfig": {
"access": "public"
},
"browerslist": [
"> 1%",
"not dead"
],
"gitHead": ""
}
+1
View File
@@ -0,0 +1 @@
@use 'var.scss';
+53
View File
@@ -0,0 +1,53 @@
// 边框样式
@use 'mixins/function' as *;
@use 'mixins/mixins' as *;
[class*=#{bem('border')}] {
border-radius: inherit;
box-sizing: border-box;
border-width: getCssVar('border-width', '');
border-style: solid;
}
/* 圆角尺寸 start */
.#{bem('radius')} {
border-radius: getCssVar('border-radius', '');
}
.#{bem('round')} {
border-radius: getCssVar('border-radius', 'round');
}
/* 圆角尺寸 end */
@include b('border') {
// 加粗边框
&-bold {
border-width: getCssVar('border-width', 'bold');
}
// 虚线边框
&-dashed {
border-style: dashed;
}
// 设置单边
@each $direction in ('top', 'right', 'bottom', 'left') {
&-#{$direction} {
border-width: 0px;
border-#{$direction}-width: getCssVar('border-width', '');
&.tn-border-bold {
border-#{$direction}-width: getCssVar('border-width', 'bold');
}
}
}
// 移除边框
&-none {
border-width: 0px;
@each $direction in ('top', 'right', 'bottom', 'left') {
&-#{$direction} {
border-#{$direction}-width: 0px;
}
}
}
}
+183
View File
@@ -0,0 +1,183 @@
// 内置颜色类
@use 'sass:map';
@use 'sass:list';
@use 'common/var' as *;
@use 'mixins/mixins' as *;
@use 'mixins/color' as *;
@use 'mixins/var' as *;
@use 'mixins/function' as *;
// 背景颜色
@each $type in $types {
@include b('type-' + $type) {
@include generate-attr-color($type, 'bg', 'background-color') {
@include get-inner-color('color', 'white');
}
}
}
@include b('white') {
@include generate-attr-color('white', 'bg', 'background-color') {
@include get-inner-color('color', 'black');
}
}
@include b('black') {
@include generate-attr-color('black', 'bg', 'background-color') {
@include get-inner-color('color', 'white');
}
}
@each $color in $inner-color-names {
@include b($color) {
@include generate-attr-bg-color($color);
@each $type in ('light', 'dark', 'disabled') {
&-#{$type} {
@include generate-attr-bg-color($color, $type);
}
}
}
}
// 没有渐变色的主题色
$no-gradient-bg-colors: ('orangered', 'brown', 'gray');
// 渐变背景
[class*=#{bem('gradient-bg')}] {
background-image: repeating-linear-gradient(
45deg,
getCssVar('cool-bg-start-color'),
getCssVar('cool-bg-end-color')
);
}
@include b('gradient-bg') {
// 主题色渐变
$i: 0;
@each $color in $inner-color-names {
$i: $i + 1;
@include e($color) {
@if not index($no-gradient-bg-colors, $color) {
$next-color: '';
@if $i >= length($inner-color-names) {
$next-color: nth($inner-color-names, 1);
} @else {
$next-color: nth($inner-color-names, $i + 1);
}
#{getCssVarName('cool-bg-start-color')}: getCssVar('color', $color);
#{getCssVarName('cool-bg-end-color')}: getCssVar('color', $next-color);
&-light {
#{getCssVarName('cool-bg-start-color')}: getCssVar(
'color',
$color,
'light'
);
#{getCssVarName('cool-bg-end-color')}: getCssVar(
'color',
$next-color,
'light'
);
}
}
&-single {
#{getCssVarName('cool-bg-start-color')}: getCssVar('color', $color);
#{getCssVarName('cool-bg-end-color')}: getCssVar(
'color',
$color,
'light'
);
}
}
}
// 炫酷渐变
@include e('cool') {
@each $key, $color in $cool-colors {
&-#{$key} {
#{getCssVarName('cool-bg-start-color')}: map.get($color, 'begin');
#{getCssVarName('cool-bg-end-color')}: map.get($color, 'end');
}
}
}
}
// 酷炫背景颜色图片
@include b('bg-image') {
position: relative;
&::after {
content: ' ';
position: absolute;
z-index: inherit;
width: 100%;
height: 100%;
left: 0;
bottom: 0;
border-radius: getCssVar('border-radius', 'default');
opacity: 1;
transform: scale(1, 1);
background-size: 100% 100%;
background-image: inherit;
}
@for $num from 1 through 6 {
&:nth-of-type(#{$num}n)::after {
background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/#{$num}.png);
}
}
}
// 字体颜色
@each $type in $types {
@include b('type-' + $type) {
@include generate-attr-color($type, 'text', 'color');
}
}
@each $color in join(('white', 'black'), $inner-color-names) {
@include b($color) {
@include generate-attr-color($color, 'text', 'color');
@if not index(('white', 'black'), $color) {
@each $type in ('light', 'dark', 'disabled') {
&-#{$type} {
@include generate-attr-color($color, 'text', 'color', $type);
}
}
}
}
}
// 边框颜色
@each $type in $types {
@include b('type-' + $type) {
@include generate-attr-color($type, 'border', 'border-color');
}
}
@each $color in join(('white', 'black'), $inner-color-names) {
@include b($color) {
@include generate-attr-color($color, 'border', 'border-color');
@if not index(('white', 'black'), $color) {
@each $type in ('light', 'dark', 'disabled') {
&-#{$type} {
@include generate-attr-color($color, 'border', 'border-color', $type);
}
}
}
}
}
// 阴影颜色
@each $type in $types {
@include b('type-' + $type) {
@include generate-attr-shadow-color($type);
}
}
@each $color in join(('white', 'black'), $inner-color-names) {
@include b($color) {
@include generate-attr-shadow-color($color);
@if not index(('white', 'black'), $color) {
@each $type in ('light', 'dark', 'disabled') {
&-#{$type} {
@include generate-attr-shadow-color($color, $type);
}
}
}
}
}
+17
View File
@@ -0,0 +1,17 @@
@use 'sass:color';
@use 'sass:string';
@function rgb2hex($color) {
@return unquote('#' + #{string.slice(color.ie-hex-str($color), 4)});
}
// rgba color above solid color
@function mix-overlay-color($upper, $lower) {
$opacity: color.aplha($upper);
$red: color.red($supper) * $opacity + color.red($lower) * (1 - $opacity);
$green: color.green($supper) * $opacity + color.green($lower) * (1 - $opacity);
$blue: color.blue($supper) * $opacity + color.blue($lower) * (1 - $opacity);
@return rgb2hex(rgb($red, $green, $blue));
}
+370
View File
@@ -0,0 +1,370 @@
/** 图鸟变量 */
@use 'sass:map';
@use 'sass:math';
@use '../mixins/function.scss' as *;
// 类型
$types: primary, success, warning, danger, error, info;
// 内置颜色的值
$inner-color-names: 'red', 'purplered', 'purple', 'bluepurple', 'aquablue',
'blue', 'indigo', 'cyan', 'teal', 'green', 'yellowgreen', 'lime', 'yellow',
'orangeyellow', 'orange', 'orangered', 'brown', 'grey', 'gray';
$inner-colors: (
'red': (
'base': #e83a30,
'dark': #ba2e26,
'disabled': #f39c97,
'light': #fad8d6,
),
'purplered': (
'base': #e72f8c,
'dark': #b9266f,
'disabled': #f397c5,
'light': #fad5e8,
),
'purple': (
'base': #892fe8,
'dark': #6e26ba,
'disabled': #c497f3,
'light': #e7d5fa,
),
'bluepurple': (
'base': #5f4fd9,
'dark': #4c3fae,
'disabled': #afa7ec,
'light': #dfdcf7,
),
'aquablue': (
'base': #3646ff,
'dark': #2b38cc,
'disabled': #9aa2ff,
'light': #d7daff,
),
'blue': (
'base': #3d7eff,
'dark': #3165cc,
'disabled': #9ebeff,
'light': #d8e5ff,
),
'indigo': (
'base': #31c9e8,
'dark': #27a1ba,
'disabled': #98e4f3,
'light': #d6f4fa,
),
'cyan': (
'base': #2de8bd,
'dark': #24ba97,
'disabled': #96f3de,
'light': #d5faf2,
),
'teal': (
'base': #24f083,
'dark': #1dc069,
'disabled': #91f7c1,
'light': #d3fce6,
),
'green': (
'base': #31e749,
'dark': #27b93a,
'disabled': #98f3a4,
'light': #d6fadb,
),
'yellowgreen': (
'base': #a4e82f,
'dark': #82ba26,
'disabled': #d1f397,
'light': #edfad5,
),
'lime': (
'base': #d5eb00,
'dark': #aabc00,
'disabled': #e9f57f,
'light': #f7fbcc,
),
'yellow': (
'base': #fff420,
'dark': #ccc21a,
'disabled': #fff88f,
'light': #fffdd2,
),
'orangeyellow': (
'base': #ffca28,
'dark': #cca220,
'disabled': #ffe493,
'light': #fff4d4,
),
'orange': (
'base': #ffa726,
'dark': #cc851e,
'disabled': #ffd392,
'light': #ffedd4,
),
'orangered': (
'base': #ff7043,
'dark': #cc5a36,
'disabled': #ffb7a1,
'light': #ffe2d9,
),
'brown': (
'base': #914f2c,
'dark': #743f23,
'disabled': #c8a795,
'light': #e9dcd5,
),
'grey': (
'base': #78909c,
'dark': #5f7e8b,
'disabled': #c6d1d8,
'light': #e4e9ec,
),
'gray': (
'base': #aaaaaa,
'dark': #838383,
'disabled': #e6e6e6,
'light': #f8f7f8,
),
) !default;
// 炫酷颜色值
$cool-colors: (
'1': (
'begin': #f5317f,
'end': #ff7c6e,
),
'2': (
'begin': #ca26ff,
'end': #f360a7,
),
'3': (
'begin': #a26ffc,
'end': #9d12ff,
),
'4': (
'begin': #aa77f0,
'end': #e871e5,
),
'5': (
'begin': #40a0f7,
'end': #4866e6,
),
'6': (
'begin': #209cff,
'end': #68e0cf,
),
'7': (
'begin': #00c3ff,
'end': #58fff5,
),
'8': (
'begin': #00d1ff,
'end': #69ff97,
),
'9': (
'begin': #0fd893,
'end': #29ecbf,
),
'10': (
'begin': #0fd850,
'end': #f9f047,
),
'11': (
'begin': #24fe41,
'end': #f7fd47,
),
'12': (
'begin': #d6ff7f,
'end': #00f657,
),
'13': (
'begin': #fa709a,
'end': #fee140,
),
'14': (
'begin': #fe5e9c,
'end': #f1aa76,
),
'15': (
'begin': #ff3181,
'end': #ff8331,
),
'16': (
'begin': #ed1c24,
'end': #fece12,
),
);
// 颜色值
$colors: () !default;
$colors: map.deep-merge(
(
'white': #ffffff,
'black': #000000,
'primary': (
'base': #01beff,
),
'success': (
'base': #00d886,
),
'warning': (
'base': #fbbd12,
),
'danger': (
'base': #ff444f,
),
'error': (
'base': #ff444f,
),
'info': (
'base': #9c9c9c,
),
),
$colors
);
$color-white: map.get($colors, 'white') !default;
$color-black: map.get($colors, 'black') !default;
$color-primary: map.get($colors, 'primary', 'base') !default;
$color-success: map.get($colors, 'success', 'base') !default;
$color-warning: map.get($colors, 'warning', 'base') !default;
$color-danger: map.get($colors, 'danger', 'base') !default;
$color-error: map.get($colors, 'error', 'base') !default;
$color-info: map.get($colors, 'info', 'base') !default;
// https://sass-lang.com/documentation/values/maps#immutability
// mix colors with white/black to generate light/dark level
@mixin set-color-mix-level(
$type,
$number,
$mode: 'light',
$mix-color: $color-white
) {
$colors: map.deep-merge(
(
$type: (
'#{$mode}-#{$number}':
mix(
$mix-color,
map.get($colors, $type, 'base'),
math.percentage(math.div($number, 10))
),
),
),
$colors
) !global;
}
// $colors.primary.light-i
@each $type in $types {
@for $i from 1 through 9 {
@include set-color-mix-level($type, $i, 'light', $color-white);
}
}
// --tn-color-primary-dark-2
@each $type in $types {
@include set-color-mix-level($type, 2, 'dark', $color-black);
}
$text-color: () !default;
$text-color: map.merge(
(
'primary': #080808,
'secondary': #9c9c9c,
'placeholder': #838383,
'disabled': #e6e6e6,
),
$text-color
);
$bg-color: () !default;
$bg-color: map.merge(
(
'': #ffffff,
'page': #f4f4f4,
'overlay': #ffffff,
'mask': rgba(0, 0, 0, 0.5),
),
$bg-color
);
$font-size: () !default;
$font-size: map.merge(
(
'4xl': 32px,
'3xl': 26px,
'2xl': 20px,
'xl': 18px,
'lg': 16px,
'default': 14px,
'sm': 13px,
'xs': 12px,
),
$font-size
);
$padding-margin-size: () !default;
$padding-margin-size: map.merge(
(
'xl': 25px,
'lg': 20px,
'default': 15px,
'sm': 10px,
'xs': 5px,
'0': 0px,
),
$padding-margin-size
);
$border-width: () !default;
$border-width: map.merge(
(
'bold': 3px,
'default': 1px,
),
$border-width
);
$border-radius: () !default;
$border-radius: map.merge(
(
'default': 7.5px,
'round': 2500px,
),
$border-radius
);
$box-shadow: () !default;
$box-shadow: map.merge(
(
'default': (
0px 5px 30px -9.5px,
),
'sm': (
0px 5px 30px -20px,
),
'md': (
0px 5px 10px -1px,
0px 0px 5px -2px,
),
'lg': (
0px 10px 15px -2px,
0px 5px 10px -2px,
),
),
$box-shadow
);
$box-shadow-colors: () !default;
$box-shadow-colors: map.merge(
(
'default': rgba(0, 0, 0, 0.1),
'sm': rgba(0, 0, 0, 0.1),
'md': rgba(0, 0, 0, 0.1),
'lg': rgba(0, 0, 0, 0.1),
),
$box-shadow-colors
);
+154
View File
@@ -0,0 +1,154 @@
// flex布局
@use 'mixins/function' as *;
@use 'mixins/mixins' as *;
[class*=#{bem('flex')}] {
display: -webkit-flex;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
@include b(flex) {
// 方向
@each $direction in (row, row-reverse, column, column-reverse) {
&-#{$direction} {
flex-direction: $direction;
}
}
// 换行
@each $wrap in (nowrap, wrap, wrap-reverse) {
&-#{$wrap} {
flex-wrap: $wrap;
}
}
// 空间分配
&-1 {
flex: 1 1 0%;
}
&-auto {
flex: 1 1 auto;
}
&-inital {
flex: 0 1 auto;
}
&-none {
flex: none;
}
// grow
&-grow {
flex-grow: 1;
&-0 {
flex-grow: 0;
}
}
// shrink
&-shrink {
flex-shrink: 1;
&-0 {
flex-shrink: 0;
}
}
// 组合对其方式
@each $align in (start, end, center, baseline, stretch) {
@each $justitfy in (start, end, center, between, around) {
&-#{$align}-#{$justitfy} {
@if $align == 'start' {
align-items: flex-start;
} @else if $align == 'end' {
align-items: flex-end;
} @else {
align-items: $align;
}
@if $justitfy == 'between' {
justify-content: space-between;
} @else if $justitfy == 'around' {
justify-content: space-around;
} @else if $justitfy == 'start' {
justify-content: flex-start;
} @else if $justitfy == 'end' {
justify-content: flex-end;
} @else {
justify-content: $justitfy;
}
}
}
}
&-center {
align-items: center;
justify-content: center;
}
// justify-content
@each $item
in (
(start, flex-start),
(end, flex-end),
(center, center),
(between, space-between),
(around, space-around),
(evenly, space-evenly)
)
{
&.#{'justify-' + nth($item, 1)} {
justify-content: nth($item, 2);
}
}
// justify-item
@each $item
in ((start, start), (end, end), (center, center), (stretch, stretch))
{
&.#{'justify-item-' + nth($item, 1)} {
justify-items: nth($item, 2);
}
}
// justify-self
@each $item
in (
(auto, auto),
(start, start),
(end, end),
(center, center),
(stretch, stretch)
)
{
&.#{'justify-self-' + nth($item, 1)} {
justify-self: nth($item, 2);
}
}
// align content
@each $item
in (
(start, flex-start),
(end, flex-end),
(center, center),
(between, space-between),
(around, space-around),
(evenly, evenly)
)
{
&.#{'content-' + nth($item, 1)} {
align-content: nth($item, 2);
}
}
// align-items
@each $item
in (
(start, flex-start),
(end, flex-end),
(center, center),
(baseline, baseline),
(stretch, stretch)
)
{
&.#{'items-' + nth($item, 1)} {
align-items: nth($item, 2);
}
}
}
+8
View File
@@ -0,0 +1,8 @@
@use 'base.scss';
@use 'size.scss';
@use 'flex.scss';
@use 'shadow.scss';
@use 'color.scss';
@use 'text.scss';
@use 'border.scss';
+84
View File
@@ -0,0 +1,84 @@
@use 'sass:map';
@use '../common/var.scss' as *;
@use 'function' as *;
// 获取图鸟官方内置颜色
@mixin get-inner-color($attr, $name, $type: '', $important: false) {
$attr-value: '';
@if $name == 'white' {
$attr-value: #{getCssVar('color', 'white')};
// #{$attr}: #{getCssVar('color', 'white') if($important, '!important')};
} @else if $name == 'black' {
$attr-value: #{getCssVar('text', 'color', 'primary')};
// #{$attr}: #{getCssVar('text', 'color', 'primary') if($important, '!important')};
} @else if index($types, $name) {
$attr-value: getCssVar('color', $name, $type);
// #{$attr}: #{getCssVar('color', $name, $type) if($important, '!important')};
} @else {
$attr-value: getCssVar('color', $name, if($type == 'base', '', $type));
// @if $type == 'base' {
// #{$attr}: #{getCssVar('color', $name) if($important, '!important')};
// } @else {
// #{$attr}: #{getCssVar('color', $name, $type) if($important, '!important')};
// }
}
$attr-value: $attr-value + if($important, '!important', '');
#{$attr}: #{$attr-value};
}
// 背景颜色设置的特殊字体颜色
$special-bg-text-colors: ('yellow', 'lime');
// 设置背景颜色
@mixin get-bg-inner-color($name, $type) {
@include get-inner-color('background-color', $name, $type);
@if ($type == 'base' or $type == '') {
@if index($special-bg-text-colors, $name) {
@include get-inner-color('color', $name, 'dark');
} @else {
@include get-inner-color('color', 'white');
}
} @else if $type == 'light' {
@if index($special-bg-text-colors, $name) {
@include get-inner-color('color', $name, 'dark');
} @else {
@include get-inner-color('color', $name, 'base');
}
} @else if $type == 'dark' {
@include get-inner-color('color', 'white');
} @else if $type == 'disabled' {
@include get-inner-color('color', $name, 'dark');
}
}
// 生成渐变背景颜色
@mixin generate-gradient-color($start, $end, $reverse: false) {
$rotate: if($reverse, -45deg, 45deg);
background-image: repeating-linear-gradient($rotate, $start, $end);
}
// 根据不同颜色类型设置不同属性的颜色值
@mixin generate-attr-color(
$name,
$attr-type,
$attr,
$type: '',
$important: false
) {
&#{'_' + $attr-type} {
@include get-inner-color($attr, $name, $type, $important);
@content;
}
}
@mixin generate-attr-bg-color($name, $type: '') {
&#{'_bg'} {
@include get-bg-inner-color($name, $type);
@content;
}
}
@mixin generate-attr-shadow-color($name, $type: '') {
&#{'_shadow'} {
@include get-inner-color(getCssVarName('shadow-color'), $name, $type);
#{getCssVarName('shadow')}: #{getCssVar('shadow-colored')};
}
}
+84
View File
@@ -0,0 +1,84 @@
@use 'sass:map';
@use 'config';
@use 'function' as *;
@use '../common/var' as *;
// set css var value
// @include set-css-var-value(('color', 'primary'), red)
// --tn-color-primary: red
@mixin set-css-var-value($name, $value) {
#{joinVarName($name)}: #{$value};
}
// @include set-css-var-type('color', 'primary', $map)
// --tn-color-primary: #{map.get($map, 'primary')}
@mixin set-css-var-type($name, $type, $variables) {
#{getCssVarName($name, $type)}: #{map.get($variables, $type)};
}
@mixin set-css-color-type($colors, $type) {
@include set-css-var-value(('color', $type), map.get($colors, $type, 'base'));
@each $i in (3, 5, 7, 8, 9) {
@include set-css-var-value(
('color', $type, 'light', $i),
map.get($colors, $type, 'light-#{$i}')
);
}
@include set-css-var-value(
('color', $type, 'dark-2'),
map.get($colors, $type, 'dark-2')
);
}
@mixin set-css-var-inner-color($name, $type, $variables) {
@include set-css-color-type($name, $type, $variables);
}
@mixin set-css-color-inner($colors, $name) {
@include set-css-var-value(('color', $name), map.get($colors, $name, 'base'));
@each $type in (dark, light, disabled) {
@include set-css-var-value(
('color', $name, $type),
map.get($colors, $name, $type)
);
}
}
// set all css var for coponent by map
@mixin set-component-css-var($name, $variables) {
@each $attribute, $value in $variables {
@if $attribute == 'default' {
#{getCssVarName($name)}: #{$value};
} @else {
#{getCssVarName($name, $attribute)}: #{$value};
}
}
}
// set component default var value
@mixin set-component-default-css-var($name, $value) {
#{getCssVarName($name)}: #{$value};
}
@mixin set-css-color-rgb($colors, $type) {
$color: map.get($colors, $type, 'base');
@include set-css-var-value(
('color', $type, 'rgb'),
#{red($color),
green($color),
blue($color)}
);
}
// generate css var from existing css var
// @include css-var-from-global(('button', 'text-color'), ('color', $type))
// --tn-button-text-color: var(--tn-color-#{$type})
@mixin css-var-from-global($var, $gVar) {
$varName: joinVarName($var);
$gVarName: joinVarName($gVar);
#{$varName}: var(#{$gVarName});
}
+5
View File
@@ -0,0 +1,5 @@
$namespace: 'tn' !default;
$common-separator: '-' !default;
$element-separator: '__' !default;
$modifier-separator: '--' !default;
$state-prefix: 'is-' !default;
+105
View File
@@ -0,0 +1,105 @@
@use 'config';
// BEM support Func
// 块(Block):代表一个独立的组件或页面中的一个大型部分。块可以看作是一个命名空间,用于包含相关元素和修饰符。例如,一个导航栏可以被视为一个块。
// 元素(Element):代表块的一部分,但不能独立存在。元素总是属于一个块,并且与该块紧密相关。元素由块名称和元素名称组成,中间由双下划线(__)连接。例如,一个导航栏可以包含多个链接,链接可以被视为导航栏块的元素。
// 修饰符(Modifier):代表块或元素的变体或状态。修饰符用于修改块或元素的外观或行为。修饰符由块名称或元素名称,连字符(-)和修饰符名称组成。例如,一个导航栏可以具有活动状态或浅色主题,这些状态可以通过添加修饰符类进行实现。
@function selectorToString($selector) {
$selector: inspect($selector);
$selector: str-slice($selector, 2, -2);
@return $selector;
}
@function containsModifier($selector) {
$selector: selectorToString($selector);
@if str_index($selector, config.$modifier-separator) {
@return true;
} @else {
@return false;
}
}
@function containWhenFlag($selector) {
$selector: selectorToString($selector);
@if str-index($selector, '.' + config.$state-prefix) {
@return true;
} @else {
@return false;
}
}
@function containPseudoClass($selector) {
$selector: selectorToString($selector);
@if str-index($selector, ':') {
@return true;
} @else {
@return false;
}
}
@function hitAllSpecialNestRule($selector) {
@return containsModifier($selector) or containWhenFlag($selector) or
containPseudoClass($selector);
}
// join var name
// joinVarName(('button', 'text-color')) => '--tn-button-text-color'
@function joinVarName($list) {
$name: '--' + config.$namespace;
@each $item in $list {
@if $item != '' {
$name: $name + '-' + $item;
}
}
@return $name;
}
// getCssVarName('button', 'text-color') => '--tn-button-text-color'
@function getCssVarName($args...) {
@return joinVarName($args);
}
// getCssVar('button', 'text-color') => var(--tn-button-text-color)
@function getCssVar($args...) {
@return var(#{joinVarName($args)});
}
// getCssVarWithDefault('button', 'text-color', 'red') => var(--tn-button-text-color, red)
@function getCssVarWithDefault($args, $default) {
@return var(#{joinVarName($args)}, #{$default});
}
// bem('block', 'element', ''modifier) => 'tn-block__element--modifier'
@function bem($block, $element: '', $modifier: '') {
$name: config.$namespace + config.$common-separator + $block;
@if $element != '' {
$name: $name + config.$element-separator + $element;
}
@if $modifier != '' {
$name: $name + config.$modifier-separator + $modifier;
}
@return $name;
}
// 字符串替换
@function str-replace($string, $search, $replace) {
$index: str-index($string, $search);
@if $index {
@return str-slice($string, 1, $index - 1) + $replace +
str-replace(
str-slice($string, $index + str-length($search)),
$search,
$replace
);
}
@return $string;
}
+135
View File
@@ -0,0 +1,135 @@
@use 'function' as *;
@use '../common/var' as *;
// forward mixins
@forward 'config';
@forward 'function';
@forward '_var';
@use 'config' as *;
// BEM
@mixin b($block) {
$B: $namespace + '-' + $block !global;
.#{$B} {
@content;
}
}
@mixin e($element) {
$E: $element !global;
$selector: &;
$currentSelector: '';
@each $unit in $element {
$currentSelector: #{$currentSelector +
'.' +
$B +
$element-separator +
$unit +
','};
}
@if hitAllSpecialNestRule($selector) {
@at-root {
#{$selector} {
#{$currentSelector} {
@content;
}
}
}
} @else {
@at-root {
#{$currentSelector} {
@content;
}
}
}
}
@mixin m($modifier) {
$selector: &;
$currentSelector: '';
@each $unit in $modifier {
$currentSelector: #{$currentSelector +
$selector +
$modifier-separator +
$unit +
','};
}
@at-root {
#{$currentSelector} {
@content;
}
}
}
@mixin configurable-m($modifier, $E-flag: false) {
$selector: &;
$interpolation: '';
@if $E-flag {
$interpolation: $element-separator + $E-flag;
}
@at-root {
#{$selector} {
.#{$B + $interpolation + $modifier-separator + $modifier} {
@content;
}
}
}
}
@mixin spec-selector(
$specSelector: '',
$element: $E,
$modifier: false,
$block: $B
) {
$modifierCombo: '';
@if $modifier {
$modifierCombo: $modifier-separator + $modifier;
}
@at-root {
#{&}#{$specSelector}.#{$block
+ $element-separator
+ $element
+ $modifierCombo} {
@content;
}
}
}
@mixin meb($modifier: false, $element: $E, $block: $B) {
$selector: &;
$modifierCombo: '';
@if $modifier {
$modifierCombo: $modifier-separator + $modifier;
}
@at-root {
#{$selector} {
.#{$block + $element-separator + $element + $modifierCombo} {
@content;
}
}
}
}
@mixin when($state) {
@at-root {
&.#{$state-prefix + $state} {
@content;
}
}
}
@mixin pseudo($pseudo) {
@at-root #{&}#{':#{$pseudo}'} {
@content;
}
}
+24
View File
@@ -0,0 +1,24 @@
@mixin utils-vertical-center {
$selector: &;
@at-root {
#{$selector}::after {
display: inline-block;
content: '';
height: 100%;
vertical-align: middle;
}
}
}
@mixin utils-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@mixin utils-inline-flex-center {
display: inline-flex;
align-items: center;
justify-content: center;
}
+61
View File
@@ -0,0 +1,61 @@
/** Box Shadow */
@use 'sass:map';
@use 'common/var' as *;
@use 'mixins/mixins' as *;
@use 'mixins/function' as *;
@include b('shadow') {
@each $size in ('default', 'sm', 'md', lg) {
$box-shadow-sizes: map.get($box-shadow, $size);
$box-shadow-color: map.get($box-shadow-colors, $size);
$color-attr-value: '';
@each $box-shadow-size in $box-shadow-sizes {
$color-attr-value: $color-attr-value +
$box-shadow-size +
' var(--tn-shadow-color),';
}
// 移除最后一个逗号
$color-attr-value: str-slice(
$color-attr-value,
1,
str-length($color-attr-value) - 1
);
$default-attr-value: str-replace(
$color-attr-value,
'var(--tn-shadow-color)',
$box-shadow-color
);
$prefix: if($size == 'default', '', '-' + $size);
&#{$prefix} {
#{getCssVarName('shadow')}: #{$default-attr-value};
#{getCssVarName('shadow-colored')}: #{$color-attr-value};
}
&#{$prefix} {
box-shadow: #{getCssVar('shadow')};
}
}
&-blur {
position: relative;
&::before {
content: ' ';
display: block;
background: inherit;
background-color: inherit;
background-image: inherit;
filter: blur(5px);
position: absolute;
width: 100%;
height: 100%;
top: 5px;
left: 5px;
z-index: inherit;
opacity: 0.4;
transform-origin: 0 0;
border-radius: inherit;
transform: scale(1, 1);
}
}
}
+67
View File
@@ -0,0 +1,67 @@
// 尺寸信息
@use 'sass:math';
@use 'mixins/function' as *;
@use 'mixins/mixins' as *;
/* 宽高尺寸 start */
@each $type in ('w', 'h') {
$attr: if($type == 'w', 'width', 'height');
@include b($type) {
&-0 {
#{$attr}: 0px;
}
&-px {
#{$attr}: 1px;
}
@for $i from 2 through 12 {
@if index((2, 3, 4, 5, 6, 12), $i) {
@for $j from 1 to $i {
$classname: '#{$j}-#{$i}';
&-#{$classname} {
#{$attr}: percentage(math.div($j, $i));
}
}
}
}
&-auto {
#{$attr}: auto;
}
&-full {
#{$attr}: 100%;
}
&-screen {
$value: if($type == 'w', 100vw, 100vh);
#{$attr}: $value;
}
@if ($type == 'w') {
&-min {
#{$attr}: min-content;
}
&-max {
#{$attr}: max-content;
}
}
}
}
/* 宽高尺寸 end */
/* 内外边距 start */
@each $type in ('p', 'm') {
$attr: if($type == 'p', 'padding', 'margin');
$sub-attrs: (('', ''), (t, top), (r, right), (b, bottom), (l, left));
@each $sub-attr in $sub-attrs {
@include b($type + nth($sub-attr, 1)) {
@each $size in ('default', 'xs', 'sm', 'lg', 'xl', '0') {
$classname: if($size == 'default', '', '-' + $size);
&#{$classname} {
#{$attr + if(nth($sub-attr, 2) == '', '', '-' + nth($sub-attr, 2))}: getCssVar(
'pm-size',
if($size == 'default', '', $size)
);
}
}
}
}
}
/* 内外边距 end */
+76
View File
@@ -0,0 +1,76 @@
// 文本样式
@use 'mixins/function' as *;
@use 'mixins/mixins' as *;
/* 文本尺寸 start */
@include b('text') {
@each $size in ('default', 'xs', 'sm', 'lg', 'xl', '2xl', '3xl', '4xl') {
$classname: if($size == 'default', '', '-' + $size);
&#{$classname} {
font-size: getCssVar('font-size', if($size == 'default', '', $size));
}
}
}
/* 文本尺寸 end */
// 字体变成大写
.#{bem('text-uppercase')} {
text-transform: uppercase;
}
// 字体变成小写
.#{bem('text-lowercase')} {
text-transform: lowercase;
}
// 字体变成首字母大写
.#{bem('text-capitalize')} {
text-transform: capitalize;
}
// 字体加粗
.#{bem('text-bold')} {
font-weight: bold;
}
// 字体居中
.#{bem('text-center')} {
text-align: center;
}
// 字体居左
.#{bem('text-left')} {
text-align: left;
}
// 字体居右
.#{bem('text-right')} {
text-align: right;
}
// 如果需要使用用省略号隐藏更多的内容,对应的容器需要设置宽度
[class*=#{bem('text-ellipsis')}] {
width: 100%;
}
@for $i from 1 through 5 {
.#{bem('text-ellipsis-' + $i)} {
@if ($i == '1') {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
} @else {
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
-webkit-line-clamp: $i;
-webkit-box-orient: vertical !important;
}
}
}
// 透明字体
.#{bem('text-transparent')} {
-webkit-background-clip: text;
background-clip: text;
color: transparent !important;
}
// 换行
.#{bem('break-word')} {
word-wrap: break-word;
}
+34
View File
@@ -0,0 +1,34 @@
// 全局样式
@use '../mixins/mixins.scss' as *;
@use '../mixins/function.scss' as *;
page,
body {
// 修复点击view标签的时候会有蓝色遮罩
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
background-color: #{getCssVar('bg-color')};
font-size: #{getCssVar('font-size')};
color: #{getCssVar('text-color')};
}
// 隐藏滚动条
::-webkit-scrollbar {
display: none;
width: 0 !important;
height: 0 !important;
-webkit-appearance: none;
background: transparent;
}
// 设置ios设备底部安全区域高度设置
@include b('u-safe-area') {
padding-bottom: 0;
padding-bottom: constant(safe-area-inset-bottom) !important;
padding-bottom: env(safe-area-inset-bottom) !important;
@include m('more') {
padding-bottom: 20rpx;
padding-bottom: calc(constant(safe-area-inset-bottom) + 20rpx) !important;
padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx) !important;
}
}
+25
View File
@@ -0,0 +1,25 @@
// 按钮样式
@use '../mixins/mixins.scss' as *;
@include b('u-btn') {
// 去除原生button样式
&-clear {
background-color: transparent;
padding: 0;
margin: 0;
font-size: inherit;
line-height: inherit;
border-radius: inherit;
color: inherit;
border: none;
&::after {
border: none;
}
}
// 按钮点击时的效果
&-hover {
opacity: 0.8;
box-shadow: inset 10rpx 2rpx 40rpx 0rpx rgba(0, 0, 0, 0.05);
}
}
+29
View File
@@ -0,0 +1,29 @@
/*
h5特有的style样式
*/
/* 提升H5端uni.toast()的层级,避免被tn-modal等遮盖 start */
uni-toast {
z-index: 30090;
}
uni-toast .uni-toast {
z-index: inherit;
}
uni-modal {
z-index: 30090;
}
uni-modal .uni-mask {
z-index: inherit;
}
uni-modal .uni-modal {
z-index: inherit;
}
/* 提升H5端uni.toast()的层级,避免被tn-modal等遮盖 end */
// 通过样式穿透,隐藏H5下,scroll-view下的滚动条
scroll-view ::v-deep ::-webkit-scrollbar {
display: none;
width: 0 !important;
height: 0 !important;
-webkit-appearance: none;
background: transparent;
}
+10
View File
@@ -0,0 +1,10 @@
// image容器样式
@use '../mixins/mixins.scss' as *;
@include b('image') {
display: block;
width: 100%;
height: 100%;
border-radius: inherit;
will-change: transform;
}
+18
View File
@@ -0,0 +1,18 @@
@use './var.scss';
@use './base.scss';
@use './reset.scss';
@use './button.scss';
@use './scrollbar.scss';
@use './image.scss';
@use '../size.scss';
@use '../flex.scss';
@use '../shadow.scss';
@use '../color.scss';
@use '../text.scss';
@use '../border.scss';
/* #ifdef H5 */
@use './h5.style.scss';
/* #endif */
+23
View File
@@ -0,0 +1,23 @@
// 重置样式操作
view,
cover-view,
scroll-view,
swiper,
button,
input,
textarea,
label,
navigator,
image {
box-sizing: border-box;
}
button::after {
border: none;
}
image {
width: 100%;
height: 100%;
border-radius: inherit;
will-change: transform;
}
+13
View File
@@ -0,0 +1,13 @@
// scroll-view容器样式
@use '../mixins/mixins.scss' as *;
@include b('scroll-view') {
width: 100%;
height: 100%;
&::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
color: transparent;
}
}
+60
View File
@@ -0,0 +1,60 @@
@use 'sass:map';
// CSS3 var
@use '../common/var' as *;
@use '../mixins/var' as *;
@use '../mixins/mixins' as *;
// for better performance do not dynamically change the root variable if you really
// do not need that, since this could introduce recalculation overhead for rendering.
// common
page,
body {
@include set-css-var-value('color-white', $color-white);
@include set-css-var-value('color-black', $color-black);
// get rgb
@each $type in $types {
@include set-css-color-rgb($colors, $type);
}
@each $color in $inner-color-names {
@include set-css-color-rgb($inner-colors, $color);
}
// Typography
@include set-component-css-var('font-size', $font-size);
// padding-margin-size
@include set-component-css-var('pm-size', $padding-margin-size);
// radius
@include set-component-css-var('border-radius', $border-radius);
// border-width
@include set-component-css-var('border-width', $border-width);
}
// for light
page,
body {
color-scheme: light;
@include set-css-var-value('color-white', $color-white);
@include set-css-var-value('color-black', $color-black);
// --tn-color-#{$type}
// --tn-color-#{$type}-light-{$i}
@each $type in $types {
@include set-css-color-type($colors, $type);
}
@each $color in $inner-color-names {
@include set-css-color-inner($inner-colors, $color);
}
// color-scheme
// Background --tn-bg-color-#{$type}
@include set-component-css-var('bg-color', $bg-color);
// --tn-text-color-#{$type}
@include set-component-css-var('text-color', $text-color);
}
+58
View File
@@ -0,0 +1,58 @@
@use 'sass:map';
// CSS3 var
@use 'common/var' as *;
@use 'mixins/var' as *;
@use 'mixins/mixins' as *;
// for better performance do not dynamically change the root variable if you really
// do not need that, since this could introduce recalculation overhead for rendering.
// common
:root {
@include set-css-var-value('color-white', $color-white);
@include set-css-var-value('color-black', $color-black);
// get rgb
@each $type in $types {
@include set-css-color-rgb($colors, $type);
}
@each $color in $inner-color-names {
@include set-css-color-rgb($inner-colors, $color);
}
// Typography
@include set-component-css-var('font-size', $font-size);
// padding-margin-size
@include set-component-css-var('pm-size', $padding-margin-size);
// radius
@include set-component-css-var('border-radius', $border-radius);
// border-width
@include set-component-css-var('border-width', $border-width);
}
// for light
:root {
color-scheme: light;
@include set-css-var-value('color-white', $color-white);
@include set-css-var-value('color-black', $color-black);
// --tn-color-#{$type}
// --tn-color-#{$type}-light-{$i}
@each $type in $types {
@include set-css-color-type($colors, $type);
}
@each $color in $inner-color-names {
@include set-css-color-inner($inner-colors, $color);
}
// color-scheme
// Background --tn-bg-color-#{$type}
@include set-component-css-var('bg-color', $bg-color);
// --tn-text-color-#{$type}
@include set-component-css-var('text-color', $text-color);
}
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+1
View File
@@ -0,0 +1 @@
@charset "UTF-8";[class*=tn-border]{border-radius:inherit;box-sizing:border-box;border-width:var(--tn-border-width);border-style:solid}.tn-radius{border-radius:var(--tn-border-radius)}.tn-round{border-radius:var(--tn-border-radius-round)}.tn-border-bold{border-width:var(--tn-border-width-bold)}.tn-border-dashed{border-style:dashed}.tn-border-top{border-width:0;border-top-width:var(--tn-border-width)}.tn-border-top.tn-border-bold{border-top-width:var(--tn-border-width-bold)}.tn-border-right{border-width:0;border-right-width:var(--tn-border-width)}.tn-border-right.tn-border-bold{border-right-width:var(--tn-border-width-bold)}.tn-border-bottom{border-width:0;border-bottom-width:var(--tn-border-width)}.tn-border-bottom.tn-border-bold{border-bottom-width:var(--tn-border-width-bold)}.tn-border-left{border-width:0;border-left-width:var(--tn-border-width)}.tn-border-left.tn-border-bold{border-left-width:var(--tn-border-width-bold)}.tn-border-none{border-width:0}.tn-border-none-top{border-top-width:0}.tn-border-none-right{border-right-width:0}.tn-border-none-bottom{border-bottom-width:0}.tn-border-none-left{border-left-width:0}
File diff suppressed because one or more lines are too long
+1
View File
@@ -0,0 +1 @@
@charset "UTF-8";[class*=tn-flex]{display:flex;flex-direction:row;flex-wrap:nowrap}.tn-flex-row{flex-direction:row}.tn-flex-row-reverse{flex-direction:row-reverse}.tn-flex-column{flex-direction:column}.tn-flex-column-reverse{flex-direction:column-reverse}.tn-flex-nowrap{flex-wrap:nowrap}.tn-flex-wrap{flex-wrap:wrap}.tn-flex-wrap-reverse{flex-wrap:wrap-reverse}.tn-flex-1{flex:1 1 0%}.tn-flex-auto{flex:1 1 auto}.tn-flex-inital{flex:0 1 auto}.tn-flex-none{flex:none}.tn-flex-grow{flex-grow:1}.tn-flex-grow-0{flex-grow:0}.tn-flex-shrink{flex-shrink:1}.tn-flex-shrink-0{flex-shrink:0}.tn-flex-start-start{align-items:flex-start;justify-content:flex-start}.tn-flex-start-end{align-items:flex-start;justify-content:flex-end}.tn-flex-start-center{align-items:flex-start;justify-content:center}.tn-flex-start-between{align-items:flex-start;justify-content:space-between}.tn-flex-start-around{align-items:flex-start;justify-content:space-around}.tn-flex-end-start{align-items:flex-end;justify-content:flex-start}.tn-flex-end-end{align-items:flex-end;justify-content:flex-end}.tn-flex-end-center{align-items:flex-end;justify-content:center}.tn-flex-end-between{align-items:flex-end;justify-content:space-between}.tn-flex-end-around{align-items:flex-end;justify-content:space-around}.tn-flex-center-start{align-items:center;justify-content:flex-start}.tn-flex-center-end{align-items:center;justify-content:flex-end}.tn-flex-center-center{align-items:center;justify-content:center}.tn-flex-center-between{align-items:center;justify-content:space-between}.tn-flex-center-around{align-items:center;justify-content:space-around}.tn-flex-baseline-start{align-items:baseline;justify-content:flex-start}.tn-flex-baseline-end{align-items:baseline;justify-content:flex-end}.tn-flex-baseline-center{align-items:baseline;justify-content:center}.tn-flex-baseline-between{align-items:baseline;justify-content:space-between}.tn-flex-baseline-around{align-items:baseline;justify-content:space-around}.tn-flex-stretch-start{align-items:stretch;justify-content:flex-start}.tn-flex-stretch-end{align-items:stretch;justify-content:flex-end}.tn-flex-stretch-center{align-items:stretch;justify-content:center}.tn-flex-stretch-between{align-items:stretch;justify-content:space-between}.tn-flex-stretch-around{align-items:stretch;justify-content:space-around}.tn-flex-center{align-items:center;justify-content:center}.tn-flex.justify-start{justify-content:flex-start}.tn-flex.justify-end{justify-content:flex-end}.tn-flex.justify-center{justify-content:center}.tn-flex.justify-between{justify-content:space-between}.tn-flex.justify-around{justify-content:space-around}.tn-flex.justify-evenly{justify-content:space-evenly}.tn-flex.justify-item-start{justify-items:start}.tn-flex.justify-item-end{justify-items:end}.tn-flex.justify-item-center{justify-items:center}.tn-flex.justify-item-stretch{justify-items:stretch}.tn-flex.justify-self-auto{justify-self:auto}.tn-flex.justify-self-start{justify-self:start}.tn-flex.justify-self-end{justify-self:end}.tn-flex.justify-self-center{justify-self:center}.tn-flex.justify-self-stretch{justify-self:stretch}.tn-flex.content-start{align-content:flex-start}.tn-flex.content-end{align-content:flex-end}.tn-flex.content-center{align-content:center}.tn-flex.content-between{align-content:space-between}.tn-flex.content-around{align-content:space-around}.tn-flex.content-evenly{align-content:evenly}.tn-flex.items-start{align-items:flex-start}.tn-flex.items-end{align-items:flex-end}.tn-flex.items-center{align-items:center}.tn-flex.items-baseline{align-items:baseline}.tn-flex.items-stretch{align-items:stretch}
+1
View File
@@ -0,0 +1 @@
@charset "UTF-8";.tn-shadow{--tn-shadow:0px 5px 30px -9.5px rgba(0, 0, 0, 0.1);--tn-shadow-colored:0px 5px 30px -9.5px var(--tn-shadow-color)}.tn-shadow{box-shadow:var(--tn-shadow)}.tn-shadow-sm{--tn-shadow:0px 5px 30px -20px rgba(0, 0, 0, 0.1);--tn-shadow-colored:0px 5px 30px -20px var(--tn-shadow-color)}.tn-shadow-sm{box-shadow:var(--tn-shadow)}.tn-shadow-md{--tn-shadow:0px 5px 10px -1px rgba(0, 0, 0, 0.1),0px 0px 5px -2px rgba(0, 0, 0, 0.1);--tn-shadow-colored:0px 5px 10px -1px var(--tn-shadow-color),0px 0px 5px -2px var(--tn-shadow-color)}.tn-shadow-md{box-shadow:var(--tn-shadow)}.tn-shadow-lg{--tn-shadow:0px 10px 15px -2px rgba(0, 0, 0, 0.1),0px 5px 10px -2px rgba(0, 0, 0, 0.1);--tn-shadow-colored:0px 10px 15px -2px var(--tn-shadow-color),0px 5px 10px -2px var(--tn-shadow-color)}.tn-shadow-lg{box-shadow:var(--tn-shadow)}.tn-shadow-blur{position:relative}.tn-shadow-blur::before{content:" ";display:block;background:inherit;background-color:inherit;background-image:inherit;filter:blur(5px);position:absolute;width:100%;height:100%;top:5px;left:5px;z-index:inherit;opacity:.4;transform-origin:0 0;border-radius:inherit;transform:scale(1,1)}
+1
View File
@@ -0,0 +1 @@
@charset "UTF-8";.tn-w-0{width:0}.tn-w-px{width:1px}.tn-w-1-2{width:50%}.tn-w-1-3{width:33.3333333333%}.tn-w-2-3{width:66.6666666667%}.tn-w-1-4{width:25%}.tn-w-2-4{width:50%}.tn-w-3-4{width:75%}.tn-w-1-5{width:20%}.tn-w-2-5{width:40%}.tn-w-3-5{width:60%}.tn-w-4-5{width:80%}.tn-w-1-6{width:16.6666666667%}.tn-w-2-6{width:33.3333333333%}.tn-w-3-6{width:50%}.tn-w-4-6{width:66.6666666667%}.tn-w-5-6{width:83.3333333333%}.tn-w-1-12{width:8.3333333333%}.tn-w-2-12{width:16.6666666667%}.tn-w-3-12{width:25%}.tn-w-4-12{width:33.3333333333%}.tn-w-5-12{width:41.6666666667%}.tn-w-6-12{width:50%}.tn-w-7-12{width:58.3333333333%}.tn-w-8-12{width:66.6666666667%}.tn-w-9-12{width:75%}.tn-w-10-12{width:83.3333333333%}.tn-w-11-12{width:91.6666666667%}.tn-w-auto{width:auto}.tn-w-full{width:100%}.tn-w-screen{width:100vw}.tn-w-min{width:-moz-min-content;width:min-content}.tn-w-max{width:-moz-max-content;width:max-content}.tn-h-0{height:0}.tn-h-px{height:1px}.tn-h-1-2{height:50%}.tn-h-1-3{height:33.3333333333%}.tn-h-2-3{height:66.6666666667%}.tn-h-1-4{height:25%}.tn-h-2-4{height:50%}.tn-h-3-4{height:75%}.tn-h-1-5{height:20%}.tn-h-2-5{height:40%}.tn-h-3-5{height:60%}.tn-h-4-5{height:80%}.tn-h-1-6{height:16.6666666667%}.tn-h-2-6{height:33.3333333333%}.tn-h-3-6{height:50%}.tn-h-4-6{height:66.6666666667%}.tn-h-5-6{height:83.3333333333%}.tn-h-1-12{height:8.3333333333%}.tn-h-2-12{height:16.6666666667%}.tn-h-3-12{height:25%}.tn-h-4-12{height:33.3333333333%}.tn-h-5-12{height:41.6666666667%}.tn-h-6-12{height:50%}.tn-h-7-12{height:58.3333333333%}.tn-h-8-12{height:66.6666666667%}.tn-h-9-12{height:75%}.tn-h-10-12{height:83.3333333333%}.tn-h-11-12{height:91.6666666667%}.tn-h-auto{height:auto}.tn-h-full{height:100%}.tn-h-screen{height:100vh}.tn-p{padding:var(--tn-pm-size)}.tn-p-xs{padding:var(--tn-pm-size-xs)}.tn-p-sm{padding:var(--tn-pm-size-sm)}.tn-p-lg{padding:var(--tn-pm-size-lg)}.tn-p-xl{padding:var(--tn-pm-size-xl)}.tn-p-0{padding:var(--tn-pm-size-0)}.tn-pt{padding-top:var(--tn-pm-size)}.tn-pt-xs{padding-top:var(--tn-pm-size-xs)}.tn-pt-sm{padding-top:var(--tn-pm-size-sm)}.tn-pt-lg{padding-top:var(--tn-pm-size-lg)}.tn-pt-xl{padding-top:var(--tn-pm-size-xl)}.tn-pt-0{padding-top:var(--tn-pm-size-0)}.tn-pr{padding-right:var(--tn-pm-size)}.tn-pr-xs{padding-right:var(--tn-pm-size-xs)}.tn-pr-sm{padding-right:var(--tn-pm-size-sm)}.tn-pr-lg{padding-right:var(--tn-pm-size-lg)}.tn-pr-xl{padding-right:var(--tn-pm-size-xl)}.tn-pr-0{padding-right:var(--tn-pm-size-0)}.tn-pb{padding-bottom:var(--tn-pm-size)}.tn-pb-xs{padding-bottom:var(--tn-pm-size-xs)}.tn-pb-sm{padding-bottom:var(--tn-pm-size-sm)}.tn-pb-lg{padding-bottom:var(--tn-pm-size-lg)}.tn-pb-xl{padding-bottom:var(--tn-pm-size-xl)}.tn-pb-0{padding-bottom:var(--tn-pm-size-0)}.tn-pl{padding-left:var(--tn-pm-size)}.tn-pl-xs{padding-left:var(--tn-pm-size-xs)}.tn-pl-sm{padding-left:var(--tn-pm-size-sm)}.tn-pl-lg{padding-left:var(--tn-pm-size-lg)}.tn-pl-xl{padding-left:var(--tn-pm-size-xl)}.tn-pl-0{padding-left:var(--tn-pm-size-0)}.tn-m{margin:var(--tn-pm-size)}.tn-m-xs{margin:var(--tn-pm-size-xs)}.tn-m-sm{margin:var(--tn-pm-size-sm)}.tn-m-lg{margin:var(--tn-pm-size-lg)}.tn-m-xl{margin:var(--tn-pm-size-xl)}.tn-m-0{margin:var(--tn-pm-size-0)}.tn-mt{margin-top:var(--tn-pm-size)}.tn-mt-xs{margin-top:var(--tn-pm-size-xs)}.tn-mt-sm{margin-top:var(--tn-pm-size-sm)}.tn-mt-lg{margin-top:var(--tn-pm-size-lg)}.tn-mt-xl{margin-top:var(--tn-pm-size-xl)}.tn-mt-0{margin-top:var(--tn-pm-size-0)}.tn-mr{margin-right:var(--tn-pm-size)}.tn-mr-xs{margin-right:var(--tn-pm-size-xs)}.tn-mr-sm{margin-right:var(--tn-pm-size-sm)}.tn-mr-lg{margin-right:var(--tn-pm-size-lg)}.tn-mr-xl{margin-right:var(--tn-pm-size-xl)}.tn-mr-0{margin-right:var(--tn-pm-size-0)}.tn-mb{margin-bottom:var(--tn-pm-size)}.tn-mb-xs{margin-bottom:var(--tn-pm-size-xs)}.tn-mb-sm{margin-bottom:var(--tn-pm-size-sm)}.tn-mb-lg{margin-bottom:var(--tn-pm-size-lg)}.tn-mb-xl{margin-bottom:var(--tn-pm-size-xl)}.tn-mb-0{margin-bottom:var(--tn-pm-size-0)}.tn-ml{margin-left:var(--tn-pm-size)}.tn-ml-xs{margin-left:var(--tn-pm-size-xs)}.tn-ml-sm{margin-left:var(--tn-pm-size-sm)}.tn-ml-lg{margin-left:var(--tn-pm-size-lg)}.tn-ml-xl{margin-left:var(--tn-pm-size-xl)}.tn-ml-0{margin-left:var(--tn-pm-size-0)}
+1
View File
@@ -0,0 +1 @@
@charset "UTF-8";.tn-text{font-size:var(--tn-font-size)}.tn-text-xs{font-size:var(--tn-font-size-xs)}.tn-text-sm{font-size:var(--tn-font-size-sm)}.tn-text-lg{font-size:var(--tn-font-size-lg)}.tn-text-xl{font-size:var(--tn-font-size-xl)}.tn-text-2xl{font-size:var(--tn-font-size-2xl)}.tn-text-3xl{font-size:var(--tn-font-size-3xl)}.tn-text-4xl{font-size:var(--tn-font-size-4xl)}.tn-text-uppercase{text-transform:uppercase}.tn-text-lowercase{text-transform:lowercase}.tn-text-capitalize{text-transform:capitalize}.tn-text-bold{font-weight:700}.tn-text-center{text-align:center}.tn-text-left{text-align:left}.tn-text-right{text-align:right}[class*=tn-text-ellipsis]{width:100%}.tn-text-ellipsis-1{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;word-wrap:break-word;-webkit-line-clamp:1;-webkit-box-orient:vertical!important}.tn-text-ellipsis-2{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;word-wrap:break-word;-webkit-line-clamp:2;-webkit-box-orient:vertical!important}.tn-text-ellipsis-3{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;word-wrap:break-word;-webkit-line-clamp:3;-webkit-box-orient:vertical!important}.tn-text-ellipsis-4{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;word-wrap:break-word;-webkit-line-clamp:4;-webkit-box-orient:vertical!important}.tn-text-ellipsis-5{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;word-wrap:break-word;-webkit-line-clamp:5;-webkit-box-orient:vertical!important}.tn-text-transparent{-webkit-background-clip:text;background-clip:text;color:transparent!important}.tn-break-word{word-wrap:break-word}
File diff suppressed because one or more lines are too long
+1
View File
@@ -0,0 +1 @@
@charset "UTF-8";body,page{-webkit-tap-highlight-color:transparent;background-color:var(--tn-bg-color);font-size:var(--tn-font-size);color:var(--tn-text-color)}::-webkit-scrollbar{display:none;width:0!important;height:0!important;-webkit-appearance:none;background:0 0}.tn-u-safe-area{padding-bottom:0;padding-bottom:constant(safe-area-inset-bottom)!important;padding-bottom:env(safe-area-inset-bottom)!important}.tn-u-safe-area--more{padding-bottom:20rpx;padding-bottom:calc(constant(safe-area-inset-bottom) + 20rpx)!important;padding-bottom:calc(env(safe-area-inset-bottom) + 20rpx)!important}
File diff suppressed because one or more lines are too long
+1
View File
@@ -0,0 +1 @@
@charset "UTF-8";.tn-u-btn-clear{background-color:transparent;padding:0;margin:0;font-size:inherit;line-height:inherit;border-radius:inherit;color:inherit;border:none}.tn-u-btn-clear::after{border:none}.tn-u-btn-hover{opacity:.8;box-shadow:inset 10rpx 2rpx 40rpx 0rpx rgba(0,0,0,.05)}
+1
View File
@@ -0,0 +1 @@
@charset "UTF-8";uni-toast{z-index:30090}uni-toast .uni-toast{z-index:inherit}uni-modal{z-index:30090}uni-modal .uni-mask{z-index:inherit}uni-modal .uni-modal{z-index:inherit}scroll-view ::v-deep ::-webkit-scrollbar{display:none;width:0!important;height:0!important;-webkit-appearance:none;background:0 0}
+1
View File
@@ -0,0 +1 @@
@charset "UTF-8";.tn-image{display:block;width:100%;height:100%;border-radius:inherit;will-change:transform}
+1
View File
@@ -0,0 +1 @@
button,cover-view,image,input,label,navigator,scroll-view,swiper,textarea,view{box-sizing:border-box}button::after{border:none}image{width:100%;height:100%;border-radius:inherit;will-change:transform}
+1
View File
@@ -0,0 +1 @@
@charset "UTF-8";.tn-scroll-view{width:100%;height:100%}.tn-scroll-view::-webkit-scrollbar{display:none;width:0;height:0;color:transparent}
File diff suppressed because one or more lines are too long