chinahu/EASYAIuniappNewUI
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

2025/2/8第一次更新

Browse Source
This commit is contained in:
爱吃咸鱼小猫咪
2025-02-08 18:50:38 +08:00
commit d7af560866
26519 changed files with 5046029 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
node_modules/@tuniao/tn-style/src/base.scss
Generated Vendored
+1
View File
@@ -0,0 +1 @@
@use 'var.scss';
node_modules/@tuniao/tn-style/src/border.scss
Generated Vendored
+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;
}
}
}
}
node_modules/@tuniao/tn-style/src/color.scss
Generated Vendored
+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);
}
}
}
}
}
node_modules/@tuniao/tn-style/src/color/index.scss
Generated Vendored
+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));
}
node_modules/@tuniao/tn-style/src/common/var.scss
Generated Vendored
+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
);
node_modules/@tuniao/tn-style/src/flex.scss
Generated Vendored
+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);
}
}
}
node_modules/@tuniao/tn-style/src/index.scss
Generated Vendored
+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';
node_modules/@tuniao/tn-style/src/mixins/_color.scss
Generated Vendored
+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')};
}
}
node_modules/@tuniao/tn-style/src/mixins/_var.scss
Generated Vendored
+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});
}
node_modules/@tuniao/tn-style/src/mixins/config.scss
Generated Vendored
+5
View File
@@ -0,0 +1,5 @@
$namespace: 'tn' !default;
$common-separator: '-' !default;
$element-separator: '__' !default;
$modifier-separator: '--' !default;
$state-prefix: 'is-' !default;
node_modules/@tuniao/tn-style/src/mixins/function.scss
Generated Vendored
+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;
}
node_modules/@tuniao/tn-style/src/mixins/mixins.scss
Generated Vendored
+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;
}
}
node_modules/@tuniao/tn-style/src/mixins/utils.scss
Generated Vendored
+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;
}
node_modules/@tuniao/tn-style/src/shadow.scss
Generated Vendored
+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);
}
}
}
node_modules/@tuniao/tn-style/src/size.scss
Generated Vendored
+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 */
node_modules/@tuniao/tn-style/src/text.scss
Generated Vendored
+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;
}
node_modules/@tuniao/tn-style/src/uniapp/base.scss
Generated Vendored
+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;
}
}
node_modules/@tuniao/tn-style/src/uniapp/button.scss
Generated Vendored
+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);
}
}
node_modules/@tuniao/tn-style/src/uniapp/h5.style.scss
Generated Vendored
+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;
}
node_modules/@tuniao/tn-style/src/uniapp/image.scss
Generated Vendored
+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;
}
node_modules/@tuniao/tn-style/src/uniapp/index.scss
Generated Vendored
+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 */
node_modules/@tuniao/tn-style/src/uniapp/reset.scss
Generated Vendored
+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;
}
node_modules/@tuniao/tn-style/src/uniapp/scrollbar.scss
Generated Vendored
+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;
}
}
node_modules/@tuniao/tn-style/src/uniapp/var.scss
Generated Vendored
+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);
}
node_modules/@tuniao/tn-style/src/var.scss
Generated Vendored
+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);
}