forked from opentiny/tiny-vue
feat(theme):[carousel,transfer,divider]Add SMB theme and Style fixed (#1195)
* fix(theme)Add transfer's smb-theme * fix(theme):[carousel,transfer]Add SMB theme * fix:carousel smb theme * fix:carousel smb theme * fix:e2e test * fix(theme): update divider smb theme * fix: update theme
This commit is contained in:
parent
58a6ebbc49
commit
705d0ddcb5
|
@ -12,10 +12,10 @@ import { Carousel as TinyCarousel, CarouselItem as TinyCarouselItem } from '@ope
|
|||
|
||||
<style scoped>
|
||||
.carousel-item-demo:nth-child(2n) {
|
||||
background-color: #99a9bf;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.carousel-item-demo:nth-child(2n + 1) {
|
||||
background-color: #d3dce6;
|
||||
background-color: #edf0f3;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -2,7 +2,9 @@ import { test, expect } from '@playwright/test'
|
|||
|
||||
test('自动切换', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
|
||||
await page.goto('carousel#autoplay')
|
||||
await page.waitForTimeout(100)
|
||||
const preview = page.locator('#autoplay')
|
||||
const carousel = preview.locator('.tiny-carousel')
|
||||
const carouselItems = preview.locator('div.tiny-carousel__item')
|
||||
|
|
|
@ -19,10 +19,10 @@ export default {
|
|||
|
||||
<style scoped>
|
||||
.carousel-item-demo:nth-child(2n) {
|
||||
background-color: #99a9bf;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.carousel-item-demo:nth-child(2n + 1) {
|
||||
background-color: #d3dce6;
|
||||
background-color: #edf0f3;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -12,10 +12,10 @@ import { Carousel as TinyCarousel, CarouselItem as TinyCarouselItem } from '@ope
|
|||
|
||||
<style scoped>
|
||||
.carousel-item-demo:nth-child(2n) {
|
||||
background-color: #99a9bf;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.carousel-item-demo:nth-child(2n + 1) {
|
||||
background-color: #d3dce6;
|
||||
background-color: #edf0f3;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -5,15 +5,8 @@ test('基础用法', async ({ page }) => {
|
|||
await page.goto('carousel#basic-usage')
|
||||
const preview = page.locator('#basic-usage')
|
||||
await page.locator('div').filter({ hasText: /^1$/ }).click()
|
||||
await preview.locator('.tiny-carousel__container > button:nth-child(2)').click()
|
||||
await preview.locator('.tiny-carousel__container > button:nth-child(2)').click()
|
||||
await preview.locator('.tiny-carousel__container > button:nth-child(2)').click()
|
||||
await preview.locator('.tiny-carousel__container > button:nth-child(2)').click()
|
||||
await preview.locator('.tiny-carousel__arrow').first().click()
|
||||
await preview.locator('.tiny-carousel__arrow').first().click()
|
||||
await preview.locator('.tiny-carousel__arrow').first().click()
|
||||
await preview.locator('.tiny-carousel__arrow').first().click()
|
||||
await preview.getByRole('list').getByRole('button').nth(1).click()
|
||||
await preview.getByRole('list').getByRole('button').nth(2).click()
|
||||
await preview.getByRole('list').getByRole('button').nth(3).click()
|
||||
await preview.locator('.tiny-carousel__container > button:nth-child(2)').click()
|
||||
await preview.locator('.tiny-carousel__container > button:nth-child(2)').click()
|
||||
await preview.locator('.tiny-carousel__arrow').first().click()
|
||||
})
|
||||
|
|
|
@ -19,10 +19,10 @@ export default {
|
|||
|
||||
<style scoped>
|
||||
.carousel-item-demo:nth-child(2n) {
|
||||
background-color: #99a9bf;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.carousel-item-demo:nth-child(2n + 1) {
|
||||
background-color: #d3dce6;
|
||||
background-color: #edf0f3;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -12,10 +12,10 @@ import { Carousel as TinyCarousel, CarouselItem as TinyCarouselItem } from '@ope
|
|||
|
||||
<style scoped>
|
||||
.carousel-item-demo:nth-child(2n) {
|
||||
background-color: #99a9bf;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.carousel-item-demo:nth-child(2n + 1) {
|
||||
background-color: #d3dce6;
|
||||
background-color: #edf0f3;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -19,10 +19,10 @@ export default {
|
|||
|
||||
<style scoped>
|
||||
.carousel-item-demo:nth-child(2n) {
|
||||
background-color: #99a9bf;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.carousel-item-demo:nth-child(2n + 1) {
|
||||
background-color: #d3dce6;
|
||||
background-color: #edf0f3;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -12,10 +12,10 @@ import { Carousel as TinyCarousel, CarouselItem as TinyCarouselItem } from '@ope
|
|||
|
||||
<style scoped>
|
||||
.carousel-item-demo:nth-child(2n) {
|
||||
background-color: #99a9bf;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.carousel-item-demo:nth-child(2n + 1) {
|
||||
background-color: #d3dce6;
|
||||
background-color: #edf0f3;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -19,10 +19,10 @@ export default {
|
|||
|
||||
<style scoped>
|
||||
.carousel-item-demo:nth-child(2n) {
|
||||
background-color: #99a9bf;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.carousel-item-demo:nth-child(2n + 1) {
|
||||
background-color: #d3dce6;
|
||||
background-color: #edf0f3;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -12,10 +12,10 @@ import { Carousel as TinyCarousel, CarouselItem as TinyCarouselItem } from '@ope
|
|||
|
||||
<style scoped>
|
||||
.carousel-item-demo:nth-child(2n) {
|
||||
background-color: #99a9bf;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.carousel-item-demo:nth-child(2n + 1) {
|
||||
background-color: #d3dce6;
|
||||
background-color: #edf0f3;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -19,10 +19,10 @@ export default {
|
|||
|
||||
<style scoped>
|
||||
.carousel-item-demo:nth-child(2n) {
|
||||
background-color: #99a9bf;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.carousel-item-demo:nth-child(2n + 1) {
|
||||
background-color: #d3dce6;
|
||||
background-color: #edf0f3;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -12,10 +12,10 @@ import { Carousel as TinyCarousel, CarouselItem as TinyCarouselItem } from '@ope
|
|||
|
||||
<style scoped>
|
||||
.carousel-item-demo:nth-child(2n) {
|
||||
background-color: #99a9bf;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.carousel-item-demo:nth-child(2n + 1) {
|
||||
background-color: #d3dce6;
|
||||
background-color: #edf0f3;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -19,10 +19,10 @@ export default {
|
|||
|
||||
<style scoped>
|
||||
.carousel-item-demo:nth-child(2n) {
|
||||
background-color: #99a9bf;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.carousel-item-demo:nth-child(2n + 1) {
|
||||
background-color: #d3dce6;
|
||||
background-color: #edf0f3;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -25,11 +25,11 @@ function handleChange(value, oldValue) {
|
|||
|
||||
<style scoped>
|
||||
.carousel-item-demo:nth-child(2n) {
|
||||
background-color: #99a9bf;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.carousel-item-demo:nth-child(2n + 1) {
|
||||
background-color: #d3dce6;
|
||||
background-color: #edf0f3;
|
||||
}
|
||||
.carousel-tip {
|
||||
margin: 16px 0 0;
|
||||
|
|
|
@ -35,11 +35,11 @@ export default {
|
|||
|
||||
<style scoped>
|
||||
.carousel-item-demo:nth-child(2n) {
|
||||
background-color: #99a9bf;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.carousel-item-demo:nth-child(2n + 1) {
|
||||
background-color: #d3dce6;
|
||||
background-color: #edf0f3;
|
||||
}
|
||||
.carousel-tip {
|
||||
margin: 16px 0 0;
|
||||
|
|
|
@ -12,10 +12,10 @@ import { Carousel as TinyCarousel, CarouselItem as TinyCarouselItem } from '@ope
|
|||
|
||||
<style scoped>
|
||||
.carousel-item-demo:nth-child(2n) {
|
||||
background-color: #99a9bf;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.carousel-item-demo:nth-child(2n + 1) {
|
||||
background-color: #d3dce6;
|
||||
background-color: #edf0f3;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -19,10 +19,10 @@ export default {
|
|||
|
||||
<style scoped>
|
||||
.carousel-item-demo:nth-child(2n) {
|
||||
background-color: #99a9bf;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.carousel-item-demo:nth-child(2n + 1) {
|
||||
background-color: #d3dce6;
|
||||
background-color: #edf0f3;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -24,10 +24,10 @@ import { Carousel as TinyCarousel, CarouselItem as TinyCarouselItem } from '@ope
|
|||
}
|
||||
|
||||
.carousel-item-demo:nth-child(2n) {
|
||||
background-color: #99a9bf;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.carousel-item-demo:nth-child(2n + 1) {
|
||||
background-color: #d3dce6;
|
||||
background-color: #edf0f3;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -31,10 +31,10 @@ export default {
|
|||
}
|
||||
|
||||
.carousel-item-demo:nth-child(2n) {
|
||||
background-color: #99a9bf;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.carousel-item-demo:nth-child(2n + 1) {
|
||||
background-color: #d3dce6;
|
||||
background-color: #edf0f3;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -12,10 +12,10 @@ import { Carousel as TinyCarousel, CarouselItem as TinyCarouselItem } from '@ope
|
|||
|
||||
<style scoped>
|
||||
.carousel-item-demo:nth-child(2n) {
|
||||
background-color: #99a9bf;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.carousel-item-demo:nth-child(2n + 1) {
|
||||
background-color: #d3dce6;
|
||||
background-color: #edf0f3;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -19,10 +19,10 @@ export default {
|
|||
|
||||
<style scoped>
|
||||
.carousel-item-demo:nth-child(2n) {
|
||||
background-color: #99a9bf;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.carousel-item-demo:nth-child(2n + 1) {
|
||||
background-color: #d3dce6;
|
||||
background-color: #edf0f3;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -12,10 +12,10 @@ import { Carousel as TinyCarousel, CarouselItem as TinyCarouselItem } from '@ope
|
|||
|
||||
<style scoped>
|
||||
.carousel-item-demo:nth-child(2n) {
|
||||
background-color: #99a9bf;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.carousel-item-demo:nth-child(2n + 1) {
|
||||
background-color: #d3dce6;
|
||||
background-color: #edf0f3;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -19,10 +19,10 @@ export default {
|
|||
|
||||
<style scoped>
|
||||
.carousel-item-demo:nth-child(2n) {
|
||||
background-color: #99a9bf;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.carousel-item-demo:nth-child(2n + 1) {
|
||||
background-color: #d3dce6;
|
||||
background-color: #edf0f3;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -5,12 +5,17 @@
|
|||
<h3>{{ item }}</h3>
|
||||
</tiny-carousel-item>
|
||||
</tiny-carousel>
|
||||
<label for="num">切换到</label>
|
||||
<tiny-numeric id="num" v-model="index" @change="indexChange" :min="1" :max="8"></tiny-numeric>
|
||||
<tiny-button-group>
|
||||
<tiny-button type="primary" @click="prev" :disabled="index === 1"> 上一张 </tiny-button>
|
||||
<tiny-button type="primary" @click="next" :disabled="index === 8"> 下一张 </tiny-button>
|
||||
</tiny-button-group>
|
||||
<div class="manual-layoutset">
|
||||
<div>
|
||||
<tiny-numeric id="num" v-model="index" @change="indexChange" :min="1" :max="8"></tiny-numeric>
|
||||
</div>
|
||||
<div>
|
||||
<tiny-button-group>
|
||||
<tiny-button type="primary" @click="prev" :disabled="index === 1"> 上一张 </tiny-button>
|
||||
<tiny-button type="primary" @click="next" :disabled="index === 8"> 下一张 </tiny-button>
|
||||
</tiny-button-group>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
@ -46,10 +51,16 @@ function prev() {
|
|||
|
||||
<style scoped>
|
||||
.carousel-item-demo:nth-child(2n) {
|
||||
background-color: #99a9bf;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.carousel-item-demo:nth-child(2n + 1) {
|
||||
background-color: #d3dce6;
|
||||
background-color: #edf0f3;
|
||||
}
|
||||
|
||||
.manual-layoutset {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -5,12 +5,17 @@
|
|||
<h3>{{ item }}</h3>
|
||||
</tiny-carousel-item>
|
||||
</tiny-carousel>
|
||||
<label for="num">切换到</label>
|
||||
<tiny-numeric id="num" v-model="index" @change="indexChange" :min="1" :max="8"></tiny-numeric>
|
||||
<tiny-button-group>
|
||||
<tiny-button type="primary" @click="prev" :disabled="index === 1"> 上一张 </tiny-button>
|
||||
<tiny-button type="primary" @click="next" :disabled="index === 8"> 下一张 </tiny-button>
|
||||
</tiny-button-group>
|
||||
<div class="manual-layoutset">
|
||||
<div>
|
||||
<tiny-numeric id="num" v-model="index" @change="indexChange" :min="1" :max="8"></tiny-numeric>
|
||||
</div>
|
||||
<div>
|
||||
<tiny-button-group>
|
||||
<tiny-button type="primary" @click="prev" :disabled="index === 1"> 上一张 </tiny-button>
|
||||
<tiny-button type="primary" @click="next" :disabled="index === 8"> 下一张 </tiny-button>
|
||||
</tiny-button-group>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
@ -50,10 +55,15 @@ export default {
|
|||
|
||||
<style scoped>
|
||||
.carousel-item-demo:nth-child(2n) {
|
||||
background-color: #99a9bf;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.carousel-item-demo:nth-child(2n + 1) {
|
||||
background-color: #d3dce6;
|
||||
background-color: #edf0f3;
|
||||
}
|
||||
.manual-layoutset {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -12,10 +12,10 @@ import { Carousel as TinyCarousel, CarouselItem as TinyCarouselItem } from '@ope
|
|||
|
||||
<style scoped>
|
||||
.carousel-item-demo:nth-child(2n) {
|
||||
background-color: #99a9bf;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.carousel-item-demo:nth-child(2n + 1) {
|
||||
background-color: #d3dce6;
|
||||
background-color: #edf0f3;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -19,10 +19,10 @@ export default {
|
|||
|
||||
<style scoped>
|
||||
.carousel-item-demo:nth-child(2n) {
|
||||
background-color: #99a9bf;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.carousel-item-demo:nth-child(2n + 1) {
|
||||
background-color: #d3dce6;
|
||||
background-color: #edf0f3;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -12,10 +12,10 @@ import { Carousel as TinyCarousel, CarouselItem as TinyCarouselItem } from '@ope
|
|||
|
||||
<style scoped>
|
||||
.carousel-item-demo:nth-child(2n) {
|
||||
background-color: #99a9bf;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.carousel-item-demo:nth-child(2n + 1) {
|
||||
background-color: #d3dce6;
|
||||
background-color: #edf0f3;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -19,10 +19,10 @@ export default {
|
|||
|
||||
<style scoped>
|
||||
.carousel-item-demo:nth-child(2n) {
|
||||
background-color: #99a9bf;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.carousel-item-demo:nth-child(2n + 1) {
|
||||
background-color: #d3dce6;
|
||||
background-color: #edf0f3;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -12,10 +12,10 @@ import { Carousel as TinyCarousel, CarouselItem as TinyCarouselItem } from '@ope
|
|||
|
||||
<style scoped>
|
||||
.carousel-item-demo:nth-child(2n) {
|
||||
background-color: #99a9bf;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.carousel-item-demo:nth-child(2n + 1) {
|
||||
background-color: #d3dce6;
|
||||
background-color: #edf0f3;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -19,10 +19,10 @@ export default {
|
|||
|
||||
<style scoped>
|
||||
.carousel-item-demo:nth-child(2n) {
|
||||
background-color: #99a9bf;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.carousel-item-demo:nth-child(2n + 1) {
|
||||
background-color: #d3dce6;
|
||||
background-color: #edf0f3;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -49,20 +49,22 @@ resolve: {
|
|||
|
||||
```js
|
||||
import TinyThemeTool from' @opentiny/vue-theme/theme-tool.js'
|
||||
import {tinyInfinityTheme} from'@opentiny/vue-theme/theme' //Infinite theme
|
||||
|
||||
const theme = new TinyThemeTool(tinyInfinityTheme,'tinyStyleSheetId') / / Initialize the infinite theme.
|
||||
// Infinite theme
|
||||
import {tinyInfinityTheme} from'@opentiny/vue-theme/theme'
|
||||
|
||||
//Customize the theme data format.
|
||||
// Initialize the infinite theme.
|
||||
const theme = new TinyThemeTool(tinyInfinityTheme,'tinyStyleSheetId')
|
||||
|
||||
// Customize the theme data format.
|
||||
const tinyTestTheme = {
|
||||
id: 'tiny-test-theme', //Unique ID of a topic. Each topic must be unique.
|
||||
name: 'testTheme', //English name of the theme
|
||||
cnName:'Test Topic', //Chinese name of the topic
|
||||
data: {'ti-base-color':'#f2f2f3'} //Subject data
|
||||
id: 'tiny-test-theme', // Unique ID of a topic. Each topic must be unique.
|
||||
name: 'testTheme', // English name of the theme
|
||||
cnName:'Test Topic', // Chinese name of the topic
|
||||
data: {'ti-base-color':'#f2f2f3'} // Subject data
|
||||
}
|
||||
|
||||
//Dynamic theme switching
|
||||
// Dynamic theme switching
|
||||
|
||||
theme.changeTheme(tinyTestTheme)
|
||||
```
|
||||
|
|
|
@ -266,7 +266,7 @@
|
|||
/* 顶部导航背景色,用于navMenu*/
|
||||
--ti-common-color-bg-navigation: var(--ti-base-color-common-8); // 顶部导航背景色/顶部导航下拉悬浮背景色
|
||||
--ti-common-color-bg-dark-select: var(--ti-base-color-common-9); // 顶部导航下拉背景色
|
||||
|
||||
|
||||
/**
|
||||
* 这里类选择组件都使用这里的状态颜色:Select、Autocomplete、Cascader、DatePicker、DropTimes、Search、TimePicker、Roles
|
||||
* TimeSelect、Amount、Area、Company、Country、Currency、Dept、DropRoles、Hrapprover、User、Calendar
|
||||
|
|
|
@ -0,0 +1,4 @@
|
|||
export const tinyCarouselItemSmbTheme = {
|
||||
// SMB主题
|
||||
'ti-carousel-item-title-bg-color': 'var(--ti-common-color-bg-dark-disabled)'
|
||||
}
|
|
@ -55,6 +55,7 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: var(--ti-carousel-opacity);
|
||||
|
||||
.@{svg-prefix-cls} {
|
||||
fill: var(--ti-carousel-indicator-active-text-color);
|
||||
|
@ -62,6 +63,7 @@
|
|||
|
||||
&.@{carousel-prefix-cls}__arrow-left {
|
||||
left: 16px;
|
||||
color: var(--ti-carousel-arrow-text-color);
|
||||
}
|
||||
|
||||
&.@{carousel-prefix-cls}__arrow-right {
|
||||
|
|
|
@ -0,0 +1,22 @@
|
|||
export const tinyCarouselSmbTheme = {
|
||||
// SMB主题
|
||||
'ti-carousel-arrow-height': 'var(--ti-common-size-8x)',
|
||||
'ti-carousel-arrow-width': 'var(--ti-common-size-8x)',
|
||||
'ti-carousel-arrow-font-size': 'var(--ti-common-font-size-2)',
|
||||
'ti-carousel-arrow-bg-color': 'var(--ti-common-color-dark)',
|
||||
'ti-carousel-indicator-active-text-color': 'var(--ti-common-color-text-weaken)',
|
||||
'ti-carousel-arrow-text-color': 'var(--ti-common-color-text-weaken)',
|
||||
'ti-carousel-arrow-hover-text-color': 'var(--ti-common-color-primary-normal)',
|
||||
'ti-carousel-arrow-disabled-text-color': 'var(--ti-common-color-text-link-darkbg-hover)',
|
||||
'ti-carousel-indicator-active-button-width': 'var(--ti-common-size-5x)',
|
||||
'ti-carousel-indicator-active-background-color': 'var(--ti-common-color-primary-active)',
|
||||
'ti-carousel-indicator-button-bg-color': 'var(--ti-common-color-primary-active)',
|
||||
'ti-carousel-outside-button-active-bg-color': 'var(--ti-common-color-primary-active)',
|
||||
'ti-carousel-indicator-active-border-radius': 'var(--ti-common-space-base)',
|
||||
'ti-carousel-indicator-padding-horizontal': 'var(--ti-common-space-0)',
|
||||
'ti-carousel-indicator-margin-right': 'var(--ti-common-space-10)',
|
||||
'ti-carousel-indicator-active-width': 'var(--ti-common-size-5x)',
|
||||
'ti-carousel-indicators-bg-color': 'none',
|
||||
'ti-carousel-opacity': '0.5',
|
||||
'ti-carousel-hover-opacity': '0.8'
|
||||
}
|
|
@ -23,6 +23,8 @@
|
|||
--ti-carousel-arrow-bg-color: rgba(0, 0, 0, 0.3);
|
||||
// 左右箭头阴影(hide)
|
||||
--ti-carousel-arrow-box-shadow: var(--ti-common-shadow-none, none);
|
||||
// 箭头正常颜色
|
||||
--ti-carousel-arrow-text-color: var(--ti-common-color-light, #fff);
|
||||
// 箭头点击瞬间文本色(hide)
|
||||
--ti-carousel-arrow-active-text-color: var(--ti-common-color-light, #fff);
|
||||
// 指示器盒子的背景色
|
||||
|
@ -65,6 +67,8 @@
|
|||
--ti-carousel-outside-button-active-bg-color: var(--ti-common-color-bg-dark-deep, #464c59);
|
||||
// 标签按钮的字号(hide)
|
||||
--ti-carousel-labels-button-font-size: var(--ti-common-font-size-base, 12px);
|
||||
// 正常透明度颜色
|
||||
--ti-carousel-opacity: 1;
|
||||
// 幻灯片悬浮时的透明度(hide)
|
||||
--ti-carousel-hover-opacity: 0.6;
|
||||
}
|
|
@ -12,6 +12,7 @@
|
|||
height: 1px;
|
||||
margin: 24px 0;
|
||||
border-top: var(--ti-divider-dividing-line);
|
||||
opacity: var(--ti-divider-horizontal-opacity);
|
||||
}
|
||||
|
||||
&&--vertical {
|
||||
|
@ -21,6 +22,7 @@
|
|||
margin: 0 8px;
|
||||
vertical-align: middle;
|
||||
border-left: var(--ti-divider-dividing-line);
|
||||
opacity: var(--ti-divider-vertical-opacity);
|
||||
}
|
||||
|
||||
&__text {
|
||||
|
|
|
@ -0,0 +1,7 @@
|
|||
export const tinyDialogSelectAuroraTheme = {
|
||||
'ti-divider-dividing-line': 'var(--ti-common-color-dark)',
|
||||
'ti-divider-horizontal-opacity': 0.5,
|
||||
'ti-divider-vertical-opacity': 0.5,
|
||||
'ti-divider-text-color': 'var(--ti-common-color-text-primary)',
|
||||
'ti-divider-text-bg-color': 'var(--ti-base-color-white)'
|
||||
}
|
|
@ -5,4 +5,8 @@
|
|||
--ti-divider-text-bg-color: var(--ti-base-color-bg-1, #ffffff);
|
||||
// 文案文本色
|
||||
--ti-divider-text-color: var(--ti-common-color-text-primary, #252b3a);
|
||||
//分割线横向透明度
|
||||
--ti-divider-horizontal-opacity: 0.8;
|
||||
//分割线纵向透明度
|
||||
--ti-divider-vertical-opacity: 0.8;
|
||||
}
|
||||
|
|
|
@ -0,0 +1,9 @@
|
|||
export const tinyTransferSmbTheme = {
|
||||
// transfer-SMB主题
|
||||
'ti-transfer-panel-item-text-color': 'var(--ti-common-color-info-normal)',
|
||||
'ti-transfer-button-bg-color': 'var(--ti-common-color-prompt)',
|
||||
'ti-transfer-font-size': 'var(--ti-common-font-size-1)',
|
||||
'ti-transfer-button-border-radius': 'var(--ti-common-space-6)',
|
||||
'ti-transfer-panel-border-color': 'var(--ti-common-color-line-disabled)',
|
||||
'ti-transfer-panel-item-hover-bg-color': 'var(--ti-common-color-hover-background)'
|
||||
}
|
|
@ -64,3 +64,4 @@
|
|||
@import './user-contact/vars.less';
|
||||
@import './user-head/vars.less';
|
||||
@import './year-table/vars.less';
|
||||
@import './transfer/vars.less'
|
||||
|
|
Loading…
Reference in New Issue