forked from opentiny/tiny-vue
fix(theme): 移除container ,layout中的样式 (#306)
* fix(theme): 移除container ,layout中的样式 * fix(docs): 恢复container.layout的示例
This commit is contained in:
申君健
GitHub
parent
a0df193f7a
commit
ef951b3922
|
|
@ -23,3 +23,36 @@ export default {
|
|||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.demo-container .tiny-container {
|
||||
height: 200px;
|
||||
color: #5f6774;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.demo-container .tiny-container .tiny-container__header {
|
||||
background-color: #ecf8ff;
|
||||
border: 3px solid #ffffff;
|
||||
color: #5b90af;
|
||||
}
|
||||
|
||||
.demo-container .tiny-container .tiny-container__aside {
|
||||
background-color: #ffecec;
|
||||
border: 3px solid #ffffff;
|
||||
color: #d27070;
|
||||
}
|
||||
|
||||
.demo-container .tiny-container .tiny-container__main {
|
||||
background-color: #fffdec;
|
||||
border: 3px solid #ffffff;
|
||||
color: #b1a859;
|
||||
}
|
||||
|
||||
.demo-container .tiny-container .tiny-container__footer {
|
||||
background-color: #e8ffed;
|
||||
border: 3px solid #ffffff;
|
||||
color: #84a18a;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -29,4 +29,44 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.demo-container .tiny-container {
|
||||
height: 200px;
|
||||
color: #5f6774;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.demo-container .tiny-container .tiny-container__header {
|
||||
background-color: #ecf8ff;
|
||||
border: 3px solid #ffffff;
|
||||
color: #5b90af;
|
||||
}
|
||||
|
||||
.demo-container .tiny-container .tiny-container__aside {
|
||||
background-color: #fff0f0;
|
||||
border: 3px solid #ffffff;
|
||||
color: #d27070;
|
||||
}
|
||||
|
||||
.demo-container .tiny-container .tiny-container__main {
|
||||
background-color: #fffdec;
|
||||
border: 3px solid #ffffff;
|
||||
color: #b1a859;
|
||||
}
|
||||
|
||||
.demo-container .tiny-container .tiny-container__footer {
|
||||
background-color: #e8ffed;
|
||||
border: 3px solid #ffffff;
|
||||
color: #84a18a;
|
||||
}
|
||||
|
||||
.demo-container .tiny-container .main .changePattern .tiny-radio {
|
||||
color: #a3a355;
|
||||
font-size: 16px;
|
||||
margin: 0 7px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -60,3 +60,43 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.demo-container .tiny-container {
|
||||
height: 200px;
|
||||
color: #5f6774;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.demo-container .tiny-container .tiny-container__header {
|
||||
background-color: #ecf8ff;
|
||||
border: 3px solid #ffffff;
|
||||
color: #5b90af;
|
||||
}
|
||||
|
||||
.demo-container .tiny-container .tiny-container__aside {
|
||||
background-color: #fff0f0;
|
||||
border: 3px solid #ffffff;
|
||||
color: #d27070;
|
||||
}
|
||||
|
||||
.demo-container .tiny-container .tiny-container__main {
|
||||
background-color: #fffdec;
|
||||
border: 3px solid #ffffff;
|
||||
color: #b1a859;
|
||||
}
|
||||
|
||||
.demo-container .tiny-container .tiny-container__footer {
|
||||
background-color: #e8ffed;
|
||||
border: 3px solid #ffffff;
|
||||
color: #84a18a;
|
||||
}
|
||||
|
||||
.demo-container .tiny-container .main .changePattern .tiny-radio {
|
||||
color: #a3a355;
|
||||
font-size: 16px;
|
||||
margin: 0 7px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,11 @@
|
|||
<template>
|
||||
<div class="demo-container coBox7">
|
||||
<tiny-container :pattern="pattern" :aside-width="asideWidth" :footer-height="footerHeight" :header-height="headerHeight">
|
||||
<tiny-container
|
||||
:pattern="pattern"
|
||||
:aside-width="asideWidth"
|
||||
:footer-height="footerHeight"
|
||||
:header-height="headerHeight"
|
||||
>
|
||||
<template #header>
|
||||
<tiny-layout>header-height：80</tiny-layout>
|
||||
</template>
|
||||
|
|
@ -33,3 +38,43 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.demo-container .tiny-container {
|
||||
height: 200px;
|
||||
color: #5f6774;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.demo-container .tiny-container .tiny-container__header {
|
||||
background-color: #ecf8ff;
|
||||
border: 3px solid #ffffff;
|
||||
color: #5b90af;
|
||||
}
|
||||
|
||||
.demo-container .tiny-container .tiny-container__aside {
|
||||
background-color: #fff0f0;
|
||||
border: 3px solid #ffffff;
|
||||
color: #d27070;
|
||||
}
|
||||
|
||||
.demo-container .tiny-container .tiny-container__main {
|
||||
background-color: #fffdec;
|
||||
border: 3px solid #ffffff;
|
||||
color: #b1a859;
|
||||
}
|
||||
|
||||
.demo-container .tiny-container .tiny-container__footer {
|
||||
background-color: #e8ffed;
|
||||
border: 3px solid #ffffff;
|
||||
color: #84a18a;
|
||||
}
|
||||
|
||||
.demo-container .tiny-container .main .changePattern .tiny-radio {
|
||||
color: #a3a355;
|
||||
font-size: 16px;
|
||||
margin: 0 7px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -23,3 +23,36 @@ export default {
|
|||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.demo-container .tiny-container {
|
||||
height: 200px;
|
||||
color: #5f6774;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.demo-container .tiny-container .tiny-container__header {
|
||||
background-color: #ecf8ff;
|
||||
border: 3px solid #ffffff;
|
||||
color: #5b90af;
|
||||
}
|
||||
|
||||
.demo-container .tiny-container .tiny-container__aside {
|
||||
background-color: #ffecec;
|
||||
border: 3px solid #ffffff;
|
||||
color: #d27070;
|
||||
}
|
||||
|
||||
.demo-container .tiny-container .tiny-container__main {
|
||||
background-color: #fffdec;
|
||||
border: 3px solid #ffffff;
|
||||
color: #b1a859;
|
||||
}
|
||||
|
||||
.demo-container .tiny-container .tiny-container__footer {
|
||||
background-color: #e8ffed;
|
||||
border: 3px solid #ffffff;
|
||||
color: #84a18a;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -26,3 +26,36 @@ export default {
|
|||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.demo-container .tiny-container {
|
||||
height: 200px;
|
||||
color: #5f6774;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.demo-container .tiny-container .tiny-container__header {
|
||||
background-color: #ecf8ff;
|
||||
border: 3px solid #ffffff;
|
||||
color: #5b90af;
|
||||
}
|
||||
|
||||
.demo-container .tiny-container .tiny-container__aside {
|
||||
background-color: #ffecec;
|
||||
border: 3px solid #ffffff;
|
||||
color: #d27070;
|
||||
}
|
||||
|
||||
.demo-container .tiny-container .tiny-container__main {
|
||||
background-color: #fffdec;
|
||||
border: 3px solid #ffffff;
|
||||
color: #b1a859;
|
||||
}
|
||||
|
||||
.demo-container .tiny-container .tiny-container__footer {
|
||||
background-color: #e8ffed;
|
||||
border: 3px solid #ffffff;
|
||||
color: #84a18a;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -20,3 +20,36 @@ export default {
|
|||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.demo-container .tiny-container {
|
||||
height: 200px;
|
||||
color: #5f6774;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.demo-container .tiny-container .tiny-container__header {
|
||||
background-color: #ecf8ff;
|
||||
border: 3px solid #ffffff;
|
||||
color: #5b90af;
|
||||
}
|
||||
|
||||
.demo-container .tiny-container .tiny-container__aside {
|
||||
background-color: #ffecec;
|
||||
border: 3px solid #ffffff;
|
||||
color: #d27070;
|
||||
}
|
||||
|
||||
.demo-container .tiny-container .tiny-container__main {
|
||||
background-color: #fffdec;
|
||||
border: 3px solid #ffffff;
|
||||
color: #b1a859;
|
||||
}
|
||||
|
||||
.demo-container .tiny-container .tiny-container__footer {
|
||||
background-color: #e8ffed;
|
||||
border: 3px solid #ffffff;
|
||||
color: #84a18a;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -34,17 +34,17 @@
|
|||
<div class="col">justify end</div>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
<tiny-row :flex="true" class="row-bg" justify="space-between">
|
||||
<tiny-col :flex="true" class="row-bg" justify="space-between">
|
||||
<tiny-col :span="3">
|
||||
<div class="col">justify space-between</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3">
|
||||
<div class="col">justify space-between</div>
|
||||
<div class="col">justify space-betwee</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3">
|
||||
<div class="col">justify space-between</div>
|
||||
<div class="col">justify space-betwee</div>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
</tiny-col>
|
||||
<tiny-row :flex="true" class="row-bg" justify="space-around">
|
||||
<tiny-col :span="3">
|
||||
<div class="col">justify space-around</div>
|
||||
|
|
@ -106,6 +106,26 @@ export default {
|
|||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tiny-row {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.tiny-row .last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.tiny-col .col {
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
background: #1f9ed8;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.tiny-col:nth-child(even) .col {
|
||||
background: #73d0fc;
|
||||
}
|
||||
|
||||
.row-bg {
|
||||
padding: 10px 0;
|
||||
background-color: #f9fafc;
|
||||
|
|
|
|||
|
|
@ -49,3 +49,25 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.content .tiny-row {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.content .tiny-row .last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.content .tiny-col .col {
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
background: #1f9ed8;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.content .tiny-col:nth-child(even) .col {
|
||||
background: #73d0fc;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -28,3 +28,25 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tiny-row {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.tiny-row .last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.tiny-col .col {
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
background: #1f9ed8;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.tiny-col:nth-child(even) .col {
|
||||
background: #73d0fc;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,37 +1,59 @@
|
|||
<template>
|
||||
<div class="content">
|
||||
<tiny-layout class="tiny-layout-offset">
|
||||
<tiny-row>
|
||||
<tiny-col :span="2">
|
||||
<div class="col">offset 0</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="2" :offset="1">
|
||||
<div class="col">offset 1</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="2" :offset="1">
|
||||
<div class="col">offset 3</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="2" :offset="1">
|
||||
<div class="col">offset 4</div>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
<tiny-layout>
|
||||
<tiny-col :span="2">
|
||||
<div class="col">offset 0</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="2" :offset="1">
|
||||
<div class="col">offset 1</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="2" :offset="1">
|
||||
<div class="col">offset 3</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="2" :offset="1">
|
||||
<div class="col">offset 4</div>
|
||||
</tiny-col>
|
||||
</tiny-layout>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { Layout, Row, Col } from '@opentiny/vue'
|
||||
import { Layout, Col } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyLayout: Layout,
|
||||
TinyRow: Row,
|
||||
TinyCol: Col
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tiny-row {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.tiny-row .last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.tiny-col .col {
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
background: #1f9ed8;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.tiny-col:nth-child(even) .col {
|
||||
background: #73d0fc;
|
||||
}
|
||||
|
||||
.row-bg {
|
||||
padding: 10px 0;
|
||||
background-color: #f9fafc;
|
||||
}
|
||||
|
||||
.align {
|
||||
height: 120px;
|
||||
}
|
||||
|
|
@ -47,4 +69,28 @@ export default {
|
|||
.sm {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.button {
|
||||
width: 70px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
background: #46c096;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-bottom: 20px;
|
||||
margin-top: 20px;
|
||||
line-height: 30px;
|
||||
height: 30px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.item {
|
||||
margin-bottom: 100px;
|
||||
box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.3);
|
||||
min-height: 200px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -16,7 +16,9 @@
|
|||
</tiny-col>
|
||||
</tiny-row>
|
||||
<tiny-row :flex="true" :gutter="20" justify="center">
|
||||
<tiny-button @click="toggleOrder">{{ state.buttonLabel }}</tiny-button>
|
||||
<tiny-button @click="toggleOrder">
|
||||
{{ state.buttonLabel }}
|
||||
</tiny-button>
|
||||
</tiny-row>
|
||||
</tiny-layout>
|
||||
</div>
|
||||
|
|
@ -53,3 +55,25 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tiny-row {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.tiny-row .last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.tiny-col .col {
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
background: #1f9ed8;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.tiny-col:nth-child(even) .col {
|
||||
background: #73d0fc;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="content">
|
||||
<tiny-layout class="tiny-layout-responsive-layout">
|
||||
<tiny-layout>
|
||||
<tiny-row :gutter="10">
|
||||
<tiny-col :xs="4" :sm="3" :md="2" :lg="4" :xl="1">
|
||||
<div class="col">1</div>
|
||||
|
|
@ -32,6 +32,26 @@ export default {
|
|||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tiny-row {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.tiny-row .last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.tiny-col .col {
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
background: #1f9ed8;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.tiny-col:nth-child(even) .col {
|
||||
background: #73d0fc;
|
||||
}
|
||||
|
||||
.lg {
|
||||
height: 80px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +0,0 @@
|
|||
export const tinyContainerAuroraTheme = {
|
||||
'ti-container-bg-color': '#0067d1',
|
||||
'ti-container-color': '#ffffff',
|
||||
'ti-container-aside-bg-color': 'rgba(0, 103, 209, 0.5)',
|
||||
'ti-container-aside-color': '#ffffff',
|
||||
'ti-container-main-bg-color': 'rgba(0, 103, 209, 0.2)',
|
||||
'ti-container-main-color': '#191919',
|
||||
'ti-container-footer-bg-color': 'rgba(0, 103, 209, 0.1)',
|
||||
'ti-container-footer-color': '#191919'
|
||||
}
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
/**
|
||||
* Copyright (c) 2022 - present TinyVue Authors.
|
||||
* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license.
|
||||
*
|
||||
* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
|
||||
* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
|
||||
* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
|
||||
*
|
||||
*/
|
||||
|
||||
export default {
|
||||
// container
|
||||
|
||||
}
|
||||
|
|
@ -10,21 +10,16 @@
|
|||
*
|
||||
*/
|
||||
|
||||
// @import '../mixins/common.less';
|
||||
@import '../custom.less';
|
||||
@import './var.less';
|
||||
|
||||
@container-prefix-cls: ~'@{css-prefix}container';
|
||||
|
||||
.@{container-prefix-cls} {
|
||||
.component-css-vars-container();
|
||||
|
||||
& &__header,
|
||||
& &__aside,
|
||||
& &__main,
|
||||
& &__footer {
|
||||
position: absolute;
|
||||
border: 3px solid #ffffff;
|
||||
box-sizing: border-box;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
|
@ -33,39 +28,12 @@
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
& {
|
||||
height: 200px;
|
||||
color: #5f6774;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
& &__header {
|
||||
background-color: var(--ti-container-bg-color);
|
||||
color: var(--ti-container-color);
|
||||
}
|
||||
|
||||
& &__aside {
|
||||
background-color: var(--ti-container-aside-bg-color);
|
||||
color: var(--ti-container-aside-color);
|
||||
}
|
||||
|
||||
& &__main {
|
||||
background-color: var(--ti-container-main-bg-color);
|
||||
color: var(--ti-container-main-color);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
& &__footer {
|
||||
background-color: var(--ti-container-footer-bg-color);
|
||||
color: var(--ti-container-footer-color);
|
||||
top: auto;
|
||||
width: auto;
|
||||
}
|
||||
& .main .changePattern .tiny-radio {
|
||||
color: #a3a355;
|
||||
font-size: 16px;
|
||||
margin: 0 7px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,18 +0,0 @@
|
|||
.component-css-vars-container() {
|
||||
// header背景色
|
||||
--ti-container-bg-color: #ecf8ff;
|
||||
// header字体颜色
|
||||
--ti-container-color: #d27070;
|
||||
// aside背景色
|
||||
--ti-container-aside-bg-color: #ffecec;
|
||||
// aside字体颜色
|
||||
--ti-container-aside-color: #d27070;
|
||||
// main背景颜色
|
||||
--ti-container-main-bg-color: #fffdec;
|
||||
// main字体颜色
|
||||
--ti-container-main-color: #b1a859;
|
||||
// footer背景颜色
|
||||
--ti-container-footer-bg-color: #e8ffed;
|
||||
// footer字体颜色
|
||||
--ti-container-footer-color: #84a18a;
|
||||
}
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
export const tinyLayoutAuroraTheme = {
|
||||
'ti-layout-col-bg-color': '#0067d1',
|
||||
'ti-layout-row-bg-color': '#0067d1',
|
||||
'ti-layout-even-bg-color': '#0067d1',
|
||||
'ti-layout-offset-bg-color': 'rgba(0, 103, 209, 0.5)',
|
||||
'ti-layout-align-bg-color': '#0067d1',
|
||||
'ti-layout-gutter-bg-color': '#0067d1',
|
||||
'ti-layout-justify-bg-color': '#0067d1',
|
||||
'ti-layout-order-bg-color': '#0067d1',
|
||||
'ti-layout-responsive-bg-color': 'rgba(0, 103, 209, 0.5)',
|
||||
'ti-layout-tag1-bg-color': '#0067d1',
|
||||
'ti-layout-tag-bg-color': '#0067d1',
|
||||
'ti-layout-move-bg-color': '#0067d1'
|
||||
}
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
/**
|
||||
* Copyright (c) 2022 - present TinyVue Authors.
|
||||
* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license.
|
||||
*
|
||||
* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
|
||||
* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
|
||||
* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
|
||||
*
|
||||
*/
|
||||
|
||||
export default {
|
||||
// layout
|
||||
}
|
||||
|
|
@ -9,131 +9,4 @@
|
|||
* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
|
||||
*
|
||||
*/
|
||||
|
||||
@import '../custom.less';
|
||||
@import './var.less';
|
||||
|
||||
@layout-prefix-cls: ~'@{css-prefix}layout';
|
||||
@layout-align-prefix-cls: ~'@{layout-prefix-cls}-align';
|
||||
@layout-offset-prefix-cls: ~'@{layout-prefix-cls}-offset';
|
||||
@layout-responsive-layout-prefix-cls: ~'@{layout-prefix-cls}-responsive-layout';
|
||||
@layout-gutter-prefix-cls: ~'@{layout-prefix-cls}-gutter';
|
||||
@layout-justify-prefix-cls: ~'@{layout-prefix-cls}-justify';
|
||||
@layout-order-prefix-cls: ~'@{layout-prefix-cls}-order';
|
||||
@layout-tag1-prefix-cls: ~'@{layout-prefix-cls}-tag1';
|
||||
@layout-tag-prefix-cls: ~'@{layout-prefix-cls}-tag';
|
||||
@layout-col-move-prefix-cls: ~'@{layout-prefix-cls}-col-move';
|
||||
@col-cls: ~'@{css-prefix}col';
|
||||
@row-cls: ~'@{css-prefix}row';
|
||||
|
||||
.@{layout-prefix-cls} {
|
||||
.component-css-vars-layout();
|
||||
|
||||
& .@{row-cls} {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
& .@{row-cls} .last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
& .@{row-cls} .@{col-cls} .col {
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
background-color: var(--ti-layout-col-bg-color);
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
& .@{row-cls} .@{col-cls}:nth-child(even) .col {
|
||||
background: var(--ti-layout-even-bg-color);
|
||||
}
|
||||
}
|
||||
|
||||
.@{layout-offset-prefix-cls} {
|
||||
& .@{row-cls} .@{col-cls}:nth-child(even) .col {
|
||||
background: var(--ti-layout-offset-bg-color);
|
||||
}
|
||||
}
|
||||
|
||||
.@{layout-responsive-layout-prefix-cls} {
|
||||
& .@{row-cls} .@{col-cls}:nth-child(even) .col {
|
||||
background: var(--ti-layout-even-bg-color);
|
||||
}
|
||||
|
||||
& .@{row-cls} .@{col-cls}:nth-child(even) .col {
|
||||
background: var(--ti-layout-responsive-bg-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.@{layout-align-prefix-cls} {
|
||||
& .@{row-cls} .@{col-cls} .col {
|
||||
background-color: var(--ti-layout-row-bg-color);
|
||||
}
|
||||
|
||||
& .@{row-cls} .@{col-cls}:nth-child(even) .col {
|
||||
background: var(--ti-layout-align-bg-color);
|
||||
}
|
||||
}
|
||||
|
||||
.@{layout-gutter-prefix-cls} {
|
||||
& .@{row-cls} .@{col-cls} .col {
|
||||
background-color: var(--ti-layout-row-bg-color);
|
||||
}
|
||||
|
||||
& .@{row-cls} .@{col-cls}:nth-child(even) .col {
|
||||
background: var(--ti-layout-gutter-bg-color);
|
||||
}
|
||||
}
|
||||
|
||||
.@{layout-justify-prefix-cls} {
|
||||
& .@{row-cls} .@{col-cls} .col {
|
||||
background-color: var(--ti-layout-row-bg-color);
|
||||
}
|
||||
|
||||
& .@{row-cls} .@{col-cls}:nth-child(even) .col {
|
||||
background: var(--ti-layout-justify-bg-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.@{layout-order-prefix-cls} {
|
||||
& .@{row-cls} .@{col-cls} .col {
|
||||
background-color: var(--ti-layout-row-bg-color);
|
||||
}
|
||||
|
||||
& .@{row-cls} .@{col-cls}:nth-child(even) .col {
|
||||
background: var(--ti-layout-order-bg-color);
|
||||
}
|
||||
}
|
||||
|
||||
.@{layout-tag1-prefix-cls} {
|
||||
& .@{row-cls} .@{col-cls} .col {
|
||||
background-color: var(--ti-layout-row-bg-color);
|
||||
}
|
||||
|
||||
& .@{row-cls} .@{col-cls}:nth-child(even) .col {
|
||||
background: var(--ti-layout-tag1-bg-color);
|
||||
}
|
||||
}
|
||||
|
||||
.@{layout-tag-prefix-cls} {
|
||||
& .@{row-cls} .@{col-cls} .col {
|
||||
background-color: var(--ti-layout-row-bg-color);
|
||||
}
|
||||
|
||||
& .@{row-cls} .@{col-cls}:nth-child(even) .col {
|
||||
background: var(--ti-layout-tag-bg-color);
|
||||
}
|
||||
}
|
||||
|
||||
.@{layout-col-move-prefix-cls} {
|
||||
& .@{row-cls} .@{col-cls} .col {
|
||||
background-color: var(--ti-layout-row-bg-color);
|
||||
}
|
||||
|
||||
& .@{row-cls} .@{col-cls}:nth-child(even) .col {
|
||||
background: var(--ti-layout-move-bg-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
.component-css-vars-layout() {
|
||||
// 布局块col列背景色
|
||||
--ti-layout-col-bg-color: #1f9ed8;
|
||||
// 布局块为偶数背景色
|
||||
--ti-layout-even-bg-color: #73d0fc;
|
||||
// 布局块row行背景色
|
||||
--ti-layout-row-bg-color: #1f9ed8;
|
||||
// 自定义布局背景色
|
||||
--ti-layout-tag1-bg-color: #1f9ed8;
|
||||
// 垂直排列方式背景色
|
||||
--ti-layout-align-bg-color: #1f9ed8;
|
||||
// 栅格间隔背景色
|
||||
--ti-layout-gutter-bg-color: #1f9ed8;
|
||||
// 水平排列方式背景色
|
||||
--ti-layout-justify-bg-color: #1f9ed8;
|
||||
// 排序方式布局背景色
|
||||
--ti-layout-order-bg-color: #1f9ed8;
|
||||
// 偏移布局背景色
|
||||
--ti-layout-offset-bg-color: #73d0fc;
|
||||
// 响应式布局背景色
|
||||
--ti-layout-responsive-bg-color: #73d0fc;
|
||||
// 自定义元素标签布局背景色
|
||||
--ti-layout-tag-bg-color: #1f9ed8;
|
||||
// 移动布局背景色
|
||||
--ti-layout-move-bg-color: #1f9ed8;
|
||||
}
|
||||
Loading…
Reference in New Issue