This commit is contained in:
@@ -0,0 +1,7 @@
|
||||
@font-face {
|
||||
font-family: 'TencentSans W7';
|
||||
src: url('data:application/font-woff;charset=utf-8;base64,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')
|
||||
format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
@@ -0,0 +1,115 @@
|
||||
@import './font-family.less';
|
||||
@import './reset.less';
|
||||
|
||||
:root {
|
||||
--td-text-color-placeholder: rgb(0 0 0 / 65%);
|
||||
}
|
||||
|
||||
.t-table__empty {
|
||||
color: var(--td-text-color-secondary);
|
||||
}
|
||||
|
||||
.t-tag--success.t-tag--light,
|
||||
.t-tag--success.t-tag--outline,
|
||||
.t-tag--success.t-tag--light-outline {
|
||||
color: #176b46;
|
||||
}
|
||||
|
||||
.t-tag--success.t-tag--dark {
|
||||
background-color: #176b46;
|
||||
}
|
||||
|
||||
.t-tag--warning.t-tag--light,
|
||||
.t-tag--warning.t-tag--outline,
|
||||
.t-tag--warning.t-tag--light-outline {
|
||||
color: #704000;
|
||||
}
|
||||
|
||||
.t-tag--warning.t-tag--dark {
|
||||
background-color: #704000;
|
||||
}
|
||||
|
||||
.t-tag--danger.t-tag--light,
|
||||
.t-tag--danger.t-tag--outline,
|
||||
.t-tag--danger.t-tag--light-outline {
|
||||
color: #a3211c;
|
||||
}
|
||||
|
||||
.t-tag--danger.t-tag--dark {
|
||||
background-color: #a3211c;
|
||||
}
|
||||
|
||||
.page-title-sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip-path: inset(50%);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.page-header--actions-only,
|
||||
.page-heading--actions-only {
|
||||
min-height: var(--td-comp-size-m);
|
||||
justify-content: flex-end !important;
|
||||
}
|
||||
|
||||
// Shared page primitives must be allowed to shrink before their children do.
|
||||
// Long server messages and public identifiers are expected data, not layout errors.
|
||||
.page-header,
|
||||
.page-heading,
|
||||
.alert-content,
|
||||
.table-toolbar {
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.alert-content {
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.alert-content > :first-child {
|
||||
min-width: 0;
|
||||
flex: 1 1 240px;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.alert-content .t-link {
|
||||
flex: 0 0 auto;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.t-table {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@media (width <= 640px) {
|
||||
.page-header--actions-only,
|
||||
.page-heading--actions-only {
|
||||
align-items: flex-start !important;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.page-header--actions-only > *,
|
||||
.page-heading--actions-only > * {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
// Fixed columns can consume more width than the table viewport on phones.
|
||||
// Keep every column reachable through the table's horizontal scroller.
|
||||
.t-table__cell--fixed-left,
|
||||
.t-table__cell--fixed-left-first,
|
||||
.t-table__cell--fixed-left-last,
|
||||
.t-table__cell--fixed-right,
|
||||
.t-table__cell--fixed-right-first,
|
||||
.t-table__cell--fixed-right-last {
|
||||
position: static !important;
|
||||
right: auto !important;
|
||||
left: auto !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,231 @@
|
||||
@import './font-family.less';
|
||||
|
||||
// layout rewrite
|
||||
|
||||
.t-layout__sider {
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.t-button + .t-button {
|
||||
margin-left: var(--td-comp-margin-s);
|
||||
}
|
||||
|
||||
.t-transfer,
|
||||
.t-jumper,
|
||||
.t-pagination-mini {
|
||||
.t-button + .t-button {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.@{starter-prefix}-link {
|
||||
color: var(--td-brand-color);
|
||||
text-decoration: none;
|
||||
margin-right: 24px;
|
||||
cursor: pointer;
|
||||
transition: color 0.2s cubic-bezier(0.38, 0, 0.24, 1);
|
||||
}
|
||||
|
||||
.left-operation-container,
|
||||
.operation-container {
|
||||
.t-button + .t-button {
|
||||
margin-left: var(--td-comp-margin-s);
|
||||
}
|
||||
}
|
||||
|
||||
.t-layout.t-layout--with-sider {
|
||||
> .t-layout {
|
||||
flex: 1 1 auto;
|
||||
width: 0;
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.t-menu--dark .t-menu__operations .t-icon {
|
||||
color: rgb(255 255 255 / 55%);
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.t-default-menu.t-menu--dark {
|
||||
background: var(--td-gray-color-13);
|
||||
}
|
||||
|
||||
.@{starter-prefix} {
|
||||
// 布局元素调整
|
||||
&-wrapper {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&-main-wrapper {
|
||||
height: 500px;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
&-side-nav-layout {
|
||||
&-relative {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&-content-layout {
|
||||
padding: var(--td-comp-paddingTB-xl) var(--td-comp-paddingLR-xl);
|
||||
}
|
||||
|
||||
&-layout {
|
||||
height: calc(100vh - var(--td-comp-size-xxxl));
|
||||
overflow-y: scroll;
|
||||
|
||||
&-tabs-nav {
|
||||
max-width: 100%;
|
||||
position: fixed;
|
||||
overflow: visible;
|
||||
z-index: 100;
|
||||
}
|
||||
&-tabs-nav + .@{starter-prefix}-content-layout {
|
||||
padding-top: var(--td-comp-paddingTB-xxl);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
border-radius: 6px;
|
||||
border: 2px solid transparent;
|
||||
background-clip: content-box;
|
||||
background-color: var(--td-scrollbar-color);
|
||||
}
|
||||
}
|
||||
|
||||
&-footer-layout {
|
||||
padding: 0;
|
||||
margin-bottom: var(--td-comp-margin-xxl);
|
||||
}
|
||||
|
||||
// slideBar
|
||||
&-sidebar-layout {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&-sidebar-compact {
|
||||
width: 64px;
|
||||
}
|
||||
|
||||
&-sidebar-layout-side {
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
&-side-nav {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 200;
|
||||
transition: all 0.3s;
|
||||
min-height: 100%;
|
||||
|
||||
&-mix {
|
||||
top: var(--td-comp-size-xxxl);
|
||||
|
||||
&-fixed {
|
||||
top: var(--td-comp-size-xxxl);
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-no-fixed {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&-no-logo {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&-logo-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
&-logo-t-logo {
|
||||
height: var(--td-comp-size-s);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&-logo-tdesign-logo {
|
||||
margin-right: var(--td-comp-margin-xxxl);
|
||||
height: var(--td-comp-size-s);
|
||||
width: 100%;
|
||||
color: var(--td-text-color-primary);
|
||||
}
|
||||
|
||||
&-logo-normal {
|
||||
color: var(--td-brand-color);
|
||||
font: var(--td-font-body-large);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
}
|
||||
|
||||
&-side-nav-placeholder {
|
||||
flex: 1 1 232px;
|
||||
min-width: 232px;
|
||||
transition: all 0.3s;
|
||||
|
||||
&-hidden {
|
||||
flex: 1 1 72px;
|
||||
min-width: 72px;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.route-tabs-dropdown {
|
||||
.t-icon {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.logo-container {
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
margin-left: 24px;
|
||||
}
|
||||
|
||||
.version-container {
|
||||
color: var(--td-text-color-secondary);
|
||||
transition: all 0.3s;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.t-menu__popup {
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.container-base-margin-top {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
@media (width <= 760px) {
|
||||
.t-layout.t-layout--with-sider {
|
||||
> .t-layout {
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.@{starter-prefix}-content-layout {
|
||||
min-width: 0;
|
||||
padding-right: var(--td-comp-paddingLR-l);
|
||||
padding-left: var(--td-comp-paddingLR-l);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
// 对部分样式进行重置
|
||||
body {
|
||||
background: var(--td-bg-color-page);
|
||||
color: var(--td-text-color-secondary);
|
||||
font: var(--td-font-body-medium);
|
||||
font-family: -apple-system, BlinkMacSystemFont, var(--td-font-family);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
pre {
|
||||
font-family: var(--td-font-family);
|
||||
}
|
||||
|
||||
ul,
|
||||
dl,
|
||||
li,
|
||||
dd,
|
||||
dt {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
figure,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
/** 公共前缀 */
|
||||
@starter-prefix: tdesign-starter;
|
||||
|
||||
// 颜色、尺寸、阴影、圆角、字体 variables 请参考 https://tdesign.tencent.com/starter/docs/vue/design-token
|
||||
// 响应式断点
|
||||
@screen-sm: 768px;
|
||||
@screen-md: 992px;
|
||||
@screen-lg: 1200px;
|
||||
@screen-xl: 1400px;
|
||||
|
||||
@screen-sm-min: @screen-sm;
|
||||
@screen-md-min: @screen-md;
|
||||
@screen-lg-min: @screen-lg;
|
||||
@screen-xl-min: @screen-xl;
|
||||
|
||||
@screen-sm-max: calc(@screen-md-min - 1px);
|
||||
@screen-md-max: calc(@screen-lg-min - 1px);
|
||||
@screen-lg-max: calc(@screen-xl-min - 1px);
|
||||
|
||||
// 动画
|
||||
@anim-time-fn-easing: cubic-bezier(0.38, 0, 0.24, 1);
|
||||
@anim-time-fn-ease-out: cubic-bezier(0, 0, 0.15, 1);
|
||||
@anim-time-fn-ease-in: cubic-bezier(0.82, 0, 1, 0.9);
|
||||
@anim-duration-base: 0.2s;
|
||||
@anim-duration-moderate: 0.24s;
|
||||
@anim-duration-slow: 0.28s;
|
||||
Reference in New Issue
Block a user