feat: entity列表（部分）、css架构更改
This commit is contained in:
chenjinsong
@@ -9,7 +9,7 @@ const _version = tagVer ? tagVer.startsWith('v') ? tagVer.slice(1) : tagVer : ve
|
||||
helper({
|
||||
name,
|
||||
version: _version,
|
||||
entry: 'website/docs/en-US/!(custom-theme|datetime-picker|i18n|installation|message-box|message|migration-from-2.x|notification|quickstart|transition|typography).md',
|
||||
entry: 'website/docs/en-US/!(custom-themes|datetime-picker|i18n|installation|message-box|message|migration-from-2.x|notification|quickstart|transition|typography).md',
|
||||
outDir: 'lib',
|
||||
reComponentName,
|
||||
reDocUrl,
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
<link rel="icon" href="<%= BASE_URL %>images/cn-logo-medium.svg">
|
||||
<title>Cyber Narrator</title>
|
||||
</head>
|
||||
<body>
|
||||
<body class="theme-light">
|
||||
<noscript>
|
||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||
</noscript>
|
||||
|
||||
@@ -25,7 +25,7 @@
|
||||
<el-button
|
||||
v-loading="loading"
|
||||
type="primary"
|
||||
class="login--input login--butotn"
|
||||
class="login--input login--button"
|
||||
@click="login"
|
||||
@keyup.enter="login"
|
||||
style="font-size: 16px;"
|
||||
@@ -87,7 +87,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<style>
|
||||
.logins{
|
||||
background-color: #000C18;
|
||||
background-size: auto;
|
||||
@@ -129,7 +129,7 @@ export default {
|
||||
height: 250px;
|
||||
margin: auto;
|
||||
}
|
||||
.login--butotn {
|
||||
.login--button {
|
||||
background: #0091ff;
|
||||
color: #fff;
|
||||
border-radius: 4px;
|
||||
|
||||
@@ -14,71 +14,3 @@ body {
|
||||
cursor: default !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/*---滚动条默认显示样式--*/
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: #ddd;
|
||||
border-radius: 6px;
|
||||
border: 2px solid #fff;
|
||||
}
|
||||
/*---鼠标点击滚动条显示样式--*/
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: #c8c8c8;
|
||||
border-radius: 6px;
|
||||
}
|
||||
/*---滚动条大小--*/
|
||||
::-webkit-scrollbar {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
/*---滚动框背景样式--*/
|
||||
::-webkit-scrollbar-track-piece {
|
||||
background-color: transparent;
|
||||
}
|
||||
/* input的placeholder字色 */
|
||||
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
|
||||
color: lighten(#0091ff, 20%);
|
||||
}
|
||||
.myDatePicker .el-picker-panel__footer{
|
||||
.el-button{
|
||||
display: none;
|
||||
}
|
||||
.is-plain{
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
th *:first-letter,
|
||||
.left-menu *:first-letter,
|
||||
.option-popper *,
|
||||
.header__operations *:first-letter {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.outer-box {
|
||||
padding: 10px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.el-table__empty-block {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
/* 淡化amcharts的logo */
|
||||
g [aria-labelledby$=-title] {
|
||||
opacity: 0.1;
|
||||
transform: translateX(calc(100% - 52px)) scale(.7);
|
||||
}
|
||||
|
||||
.no-data {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
color: #999;
|
||||
}
|
||||
.no-data-hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
2
src/assets/css/common/index.scss
Normal file
2
src/assets/css/common/index.scss
Normal file
@@ -0,0 +1,2 @@
|
||||
@import './rightBoxCommon';
|
||||
@import './tableCommon';
|
||||
@@ -0,0 +1,73 @@
|
||||
.advanced-search {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-height: 66px;
|
||||
|
||||
.el-input__suffix {
|
||||
right: 0;
|
||||
}
|
||||
&.advanced-search--show-list {
|
||||
max-height: 40px;
|
||||
|
||||
.el-input__inner {
|
||||
padding-right: 0;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
.el-input__inner {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px solid #CECECE;
|
||||
border-radius: 2px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
.search__suffixes, .search__suffixes--show-list {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
|
||||
.search__suffix {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.search__suffixes {
|
||||
justify-content: space-evenly;
|
||||
width: 100px;
|
||||
|
||||
.search__suffix {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.cn-icon-search-advance {
|
||||
color: #A6AAAE;
|
||||
font-size: 20px;
|
||||
}
|
||||
.el-icon-search {
|
||||
color: #3976CB;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
.search__suffixes--show-list {
|
||||
.search__suffix {
|
||||
padding: 0 12px;
|
||||
|
||||
&:last-of-type {
|
||||
background-color: $--color-primary;
|
||||
border-radius: 0 2px 2px 0;
|
||||
}
|
||||
.cn-icon-search-advance {
|
||||
color: #A6AAAE;
|
||||
font-size: 14px;
|
||||
}
|
||||
.el-icon-search {
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -95,7 +95,6 @@
|
||||
display: grid;
|
||||
grid-template-columns: repeat(30, 1fr);
|
||||
grid-auto-flow: row;
|
||||
grid-auto-rows: var(--chart-height-unit);
|
||||
grid-gap: 10px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
@@ -411,6 +410,132 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.cn-chart__body.pie-with-table {
|
||||
flex-basis: 40%;
|
||||
}
|
||||
.cn-chart__footer.pie-with-table {
|
||||
flex-basis: 60%;
|
||||
padding: 10px 30px 30px;
|
||||
}
|
||||
}
|
||||
.pie-table {
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
font-weight: 500;
|
||||
|
||||
.el-table__header-wrapper {
|
||||
.cell {
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
.el-table__expanded-cell[class*=cell] {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.expand-table .el-table__body .el-table__row:last-of-type td {
|
||||
border: none;
|
||||
}
|
||||
.expand-table {
|
||||
font-weight: 400;
|
||||
color: #606266;
|
||||
|
||||
.el-table__body-wrapper {
|
||||
height: auto !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.chart__legend {
|
||||
width: calc(100% - 40px);
|
||||
border: 1px solid #E7EAED;
|
||||
color: #5f6368;
|
||||
margin: auto;
|
||||
margin-bottom: 15px;
|
||||
|
||||
.chart__table-top {
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
border-bottom: #E7EAED 1px solid;
|
||||
display: flex;
|
||||
|
||||
div {
|
||||
font-size: 13px;
|
||||
line-height: 28px;
|
||||
color: $--color-primary;
|
||||
}
|
||||
}
|
||||
.chart__table-below {
|
||||
height: 240px;
|
||||
width: 100%;
|
||||
font-size: 13px;
|
||||
}
|
||||
.table-below-box {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 24px;
|
||||
}
|
||||
.table-below-box:hover {
|
||||
background-color: #f9f9f9;
|
||||
border: 0;
|
||||
color: #383838;
|
||||
}
|
||||
.table__below-color {
|
||||
width: 27px;
|
||||
height: 7px;
|
||||
flex-shrink: 0;
|
||||
padding-left: 10px;
|
||||
|
||||
div {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border-radius: 24%;
|
||||
}
|
||||
}
|
||||
.table__below-title {
|
||||
padding: 0 6px;
|
||||
flex-shrink: 1;
|
||||
flex-grow: 1;
|
||||
overflow: hidden;
|
||||
min-width: 200px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.table__below-statistics {
|
||||
width: 80px;
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.table-below-box:not(.chart__table-top) {
|
||||
cursor: pointer;
|
||||
}
|
||||
.table-below-box.table-below-box--inactivated {
|
||||
color: #ccc;
|
||||
.table__below-color div {
|
||||
background-color: #ccc !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width : 10px) {
|
||||
.cn-panel, .cn-panel>.cn-chart__tabs>.el-tabs__content>.el-tab-pane, .cn-chart__group .cn-chart__body {
|
||||
grid-auto-rows: 25px;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width : 1224px) {
|
||||
.cn-panel, .cn-panel>.cn-chart__tabs>.el-tabs__content>.el-tab-pane, .cn-chart__group .cn-chart__body {
|
||||
grid-auto-rows: 30px;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width : 1824px) {
|
||||
.cn-panel, .cn-panel>.cn-chart__tabs>.el-tabs__content>.el-tab-pane, .cn-chart__group .cn-chart__body {
|
||||
grid-auto-rows: 40px;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width : 2424px) {
|
||||
.cn-panel, .cn-panel>.cn-chart__tabs>.el-tabs__content>.el-tab-pane, .cn-chart__group .cn-chart__body {
|
||||
grid-auto-rows: 55px;
|
||||
}
|
||||
}
|
||||
.cn-panel>.cn-chart__tabs>.el-tabs__content>.el-tab-pane>.cn-chart {
|
||||
@@ -710,3 +835,12 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chart-table-pagination.el-pagination {
|
||||
padding: 12px 0 9px 0;
|
||||
text-align: center;
|
||||
|
||||
.el-pagination__jump {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,189 @@
|
||||
.date-range-box {
|
||||
font-size: 14px;
|
||||
border-radius: 2px;
|
||||
display: flex;
|
||||
|
||||
.date-range-refresh {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.date-time-range {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.date-range-item {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.panel-time-picker-hidden {
|
||||
visibility: hidden !important;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.date-range-text {
|
||||
font-size: 14px;
|
||||
min-width: 150px;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
padding: 0 10px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
height: 26px;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #E7EAED;
|
||||
box-shadow: 0 2px 4px 0 rgba(51, 51, 51, 0.02);
|
||||
border-radius: 2px;
|
||||
line-height: 26px;
|
||||
transition: width .3s;
|
||||
|
||||
.cn-icon {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.cn-icon-arrow-down {
|
||||
transition: all .3s;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.cn-icon-arrow-down-active {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
.date-range-title {
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
font-weight: 600;
|
||||
padding: 14px 0 7px 8px;
|
||||
}
|
||||
|
||||
.calendar-popover-text {
|
||||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
.calendar-popover-text:first-of-type {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.calendar-popover-text:last-of-type {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.date-range-panel {
|
||||
height: 410px;
|
||||
width: 500px;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 34px;
|
||||
z-index: 1;
|
||||
|
||||
.date-range-panel-content-left {
|
||||
padding-left: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.content-title {
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
font-weight: 400;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.content-input {
|
||||
border: 1px solid #E7EAED;
|
||||
border-radius: 2px;
|
||||
width: 230px;
|
||||
padding: 0 8px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
margin-bottom: 12px;
|
||||
outline: #169AFF;
|
||||
}
|
||||
|
||||
.content-input:focus {
|
||||
border: 1px solid #169AFF;
|
||||
}
|
||||
|
||||
.date-range-history {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
|
||||
.date-range-history-item {
|
||||
padding: 5px 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.date-range-history-item:hover {
|
||||
/*font-weight: 600;*/
|
||||
background: #f9f9f9;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.date-range-panel-content-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
ul {
|
||||
flex: 1;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
color: #333333;
|
||||
font-weight: 400;
|
||||
padding: 0 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
li.active {
|
||||
background: #F2F9FF;
|
||||
color: #0091FF;
|
||||
font-weight: 400;
|
||||
|
||||
.cn-icon-check {
|
||||
color: #0091FF;
|
||||
position: absolute;
|
||||
right: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
li:hover {
|
||||
background: #F2F9FF;
|
||||
color: #0091FF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.date-range-panel-top {
|
||||
height: 364px;
|
||||
}
|
||||
|
||||
.date-range-panel-bottom {
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.09);
|
||||
padding: 0 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
|
||||
.utc-str {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
.cn-refresh-box{
|
||||
position: relative;
|
||||
font-size: 14px;
|
||||
|
||||
.cn-icon-refresh{
|
||||
font-size: 14px;
|
||||
}
|
||||
.cn-icon-dropdown{
|
||||
font-size: 14px;
|
||||
transition: all .3s;
|
||||
display: inline-block;
|
||||
}
|
||||
.cn-icon-dropdown.active{
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.refresh-list{
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
background: #FFFFFF;
|
||||
box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.77);
|
||||
border-radius: 2px;
|
||||
top: 30px;
|
||||
right: 0;
|
||||
.refresh-list-item{
|
||||
width: 82px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
color: #333333;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
padding: 8px 0 8px 12px;
|
||||
}
|
||||
.refresh-list-item.active{
|
||||
background: #F2F9FF;
|
||||
color: #0091FF;
|
||||
font-weight: 400;
|
||||
.cn-icon-check{
|
||||
color: #0091FF;
|
||||
position: absolute;
|
||||
right: 7px;
|
||||
}
|
||||
}
|
||||
.refresh-list-item:hover{
|
||||
background: #F2F9FF;
|
||||
color: #0091FF;
|
||||
}
|
||||
}
|
||||
.el-button--mini{
|
||||
padding: 4px 6px !important;
|
||||
min-height: 26px !important;
|
||||
}
|
||||
}
|
||||
68
src/assets/css/components/components/common/pagination.scss
Normal file
68
src/assets/css/components/components/common/pagination.scss
Normal file
@@ -0,0 +1,68 @@
|
||||
.pagination {
|
||||
padding-top: 8px;
|
||||
text-align: center;
|
||||
max-height: 42px;
|
||||
|
||||
.el-pagination {
|
||||
max-height: 42px;
|
||||
padding-right: 0;
|
||||
}
|
||||
.pagination-size-select .el-input--mini .el-input__inner{
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
margin: 5px 0 5px 5px;
|
||||
}
|
||||
.el-pager li, .el-pagination .btn-next, .el-pagination .btn-prev {
|
||||
margin:5px 5px 0 5px;
|
||||
padding: 0 4px;
|
||||
font-size: 13px;
|
||||
min-width: 20px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
border: 1px solid rgba(154,154,154,0.20);
|
||||
border-radius: 2px;
|
||||
}
|
||||
.el-pagination .el-pager li.btn-quicknext, .el-pager li.btn-quickprev {
|
||||
line-height: 20px;
|
||||
}
|
||||
.el-pagination .el-pager .more::before {
|
||||
line-height: 20px;
|
||||
}
|
||||
.el-pagination .el-pager .more {
|
||||
background-color: $--content-right-background-color;
|
||||
}
|
||||
.btn-next, .btn-prev {
|
||||
background-color: $--content-right-background-color !important;
|
||||
}
|
||||
input {
|
||||
background-color: $--content-right-background-color !important;
|
||||
}
|
||||
.el-pager li.number {
|
||||
color: #666666;
|
||||
letter-spacing: 0;
|
||||
font-weight:normal;
|
||||
background-color: $--content-right-background-color;
|
||||
}
|
||||
.el-pager li.number.active {
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.el-pagination .el-pager li.active {
|
||||
background-color: $--color-primary;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.el-pager li:hover, .el-pagination .btn-next:hover, .el-pagination .btn-prev:hover {
|
||||
color: #666666;
|
||||
letter-spacing: 0;
|
||||
font-weight:normal;
|
||||
}
|
||||
.el-pagination__sizes .el-input .el-input__inner, .el-pagination__editor.el-input .el-input__inner {
|
||||
height: 20px;
|
||||
border-color: rgba(154,154,154,0.20);
|
||||
}
|
||||
.el-pagination__sizes .el-input .el-input__inner:hover {
|
||||
border-color: rgba(154,154,154,0.20);
|
||||
}
|
||||
}
|
||||
@@ -13,12 +13,21 @@
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
.entity__loading {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
|
||||
i {
|
||||
position: absolute;
|
||||
left: calc(50% - 15px);
|
||||
top: calc(50% - 15px);
|
||||
font-size: 30px;
|
||||
color: #aaa;
|
||||
}
|
||||
}
|
||||
.entity-list__content {
|
||||
/* display: grid;
|
||||
grid-template-columns: repeat(auto-fill, var(--entity-width));
|
||||
grid-auto-flow: row;
|
||||
grid-auto-rows: var(--entity-height);*/
|
||||
/* grid-gap: 10px;*/
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
display: -webkit-flex;
|
||||
@@ -159,7 +168,6 @@
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
white-space: nowrap;
|
||||
font-family: PingFangSC-Regular;
|
||||
line-height: 16px;
|
||||
i {
|
||||
font-size: 13px;
|
||||
@@ -172,7 +180,6 @@
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
font-weight: 400;
|
||||
@@ -240,3 +247,92 @@
|
||||
.app-orange {
|
||||
color: #FFA200;
|
||||
}
|
||||
|
||||
.entity-left-filter {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 10px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// border: 1px solid $--right-box-border-color;
|
||||
overflow: auto;
|
||||
|
||||
.filter__header {
|
||||
background-color: #E1E6ED;
|
||||
margin-bottom: 10px;
|
||||
padding-left: 8px;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
.filter__body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
|
||||
.filter__collapse {
|
||||
.el-collapse-item {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.el-collapse-item__header {
|
||||
padding-left: 15px;
|
||||
padding-top: 8px;
|
||||
color: #8FA1BE;
|
||||
border-bottom: none !important;
|
||||
}
|
||||
.collapse-header {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid $--content-right-background-color;
|
||||
}
|
||||
.collapse-header__icon {
|
||||
padding-right: 6px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.el-collapse-item__wrap {
|
||||
padding-top: 14px !important;
|
||||
|
||||
.el-collapse-item__content {
|
||||
padding-bottom: 15px;
|
||||
|
||||
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
|
||||
background-color: $--tree-node-hover-background-color;
|
||||
}
|
||||
.el-tree-node.is-expanded, .el-tree-node.is-current {
|
||||
&>.el-tree-node__content>.filter-item {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.el-tree-node__content {
|
||||
height: 30px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
}
|
||||
.filter-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-right: 6px;
|
||||
width: 100%;
|
||||
|
||||
div {
|
||||
max-width: 140px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
.filter__more {
|
||||
padding-left: 24px;
|
||||
line-height: 36px;
|
||||
color: #8FA1BE;
|
||||
cursor: pointer;
|
||||
}
|
||||
.filter__more.filter__more--disabled {
|
||||
color: #ccc;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
237
src/assets/css/components/components/layout/layout.scss
Normal file
237
src/assets/css/components/components/layout/layout.scss
Normal file
@@ -0,0 +1,237 @@
|
||||
.cn-container {
|
||||
height: calc(100% - 50px);
|
||||
background-color: $--content-right-background-color;
|
||||
width: 100%;
|
||||
&>div {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.cn-header {
|
||||
display: flex;
|
||||
height: 50px;
|
||||
|
||||
.header__left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
|
||||
.shrink-button {
|
||||
margin-left: 20px;
|
||||
color: #A4ADB5;
|
||||
cursor: pointer;
|
||||
transition: all linear .4s;
|
||||
|
||||
&.shrink-button--collapse {
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
.header-menu {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
flex-grow: 1;
|
||||
|
||||
.el-dropdown {
|
||||
width: 60px;
|
||||
text-align: center;
|
||||
height: 36px;
|
||||
line-height: 50px;
|
||||
.el-dialog{
|
||||
width: 1000px;
|
||||
height: 70px;
|
||||
.el-dialog__header{
|
||||
.el-dialog__title{
|
||||
color: #fff;
|
||||
}
|
||||
.el-dialog__close{
|
||||
color: #fff;
|
||||
line-height: 50px;
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.header-menu--item {
|
||||
color: #778391;
|
||||
cursor: pointer;
|
||||
transition: color linear .2s;
|
||||
i {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
.header-menu--item:hover {
|
||||
color: #313336;
|
||||
}
|
||||
.personal {
|
||||
display: flex;
|
||||
.el-dropdown {
|
||||
margin: 0 10px 0 30px;
|
||||
height: 36px;
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
.login-user {
|
||||
color: #333;
|
||||
i {
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.left-menu--pin {
|
||||
width: 20px;
|
||||
font-size: 20px;
|
||||
font-weight: 100;
|
||||
color: #999999;
|
||||
transition: all .4s;
|
||||
height: 100%;
|
||||
line-height: 50px;
|
||||
margin-left: 10px;
|
||||
i {
|
||||
transform: rotateY(0);
|
||||
transition: transform .4s;
|
||||
}
|
||||
i.icon-reverse {
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
}
|
||||
.left-menu--pin-normal{
|
||||
}
|
||||
.left-menu--pin-reverse{
|
||||
}
|
||||
}
|
||||
.link-title a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
.cn-breakcrumb {
|
||||
padding-left: 15px;
|
||||
line-height: 50px;
|
||||
|
||||
.el-breadcrumb__item .el-breadcrumb__inner {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
.entity-selector {
|
||||
.el-input__prefix {
|
||||
left: 7px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.cn-home {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
transition: all .2s;
|
||||
.cn-body {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: calc(100% - 240px);
|
||||
transition: all .2s;
|
||||
}
|
||||
}
|
||||
|
||||
// el-submenu active字色
|
||||
.el-submenu.is-active .el-submenu__title,
|
||||
.el-submenu.is-active .el-submenu__title>i,
|
||||
.el-menu-item.is-active {
|
||||
color: white !important;
|
||||
}
|
||||
// el-submenu active且open背景色
|
||||
.el-submenu__title:not(.is-active):hover, .el-menu-item:not(.is-active):hover, .el-menu-item:not(.is-active):focus {
|
||||
background-color: mix($--color-white, $--menu-background-color, 7%) !important;
|
||||
}
|
||||
.is-active.is-opened {
|
||||
.el-submenu__title, .el-menu-item:not(.is-active) {
|
||||
background-color: $--menu-hover-background-color !important;
|
||||
}
|
||||
}
|
||||
.el-menu-item {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
&.is-active {
|
||||
background-color: $--color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.left-menu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
background-color: $--menu-background-color;
|
||||
|
||||
.el-menu-item .cn-icon, .el-submenu .cn-icon {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-right: 5px;
|
||||
width: 24px;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
}
|
||||
>.el-menu:not(.el-menu--collapse) {
|
||||
width: 240px;
|
||||
}
|
||||
>.el-menu.menu-list {
|
||||
height: calc(100% - 110px);
|
||||
border-right: none;
|
||||
overflow: auto;
|
||||
|
||||
.el-menu-item, .el-submenu__title {
|
||||
height: 46px;
|
||||
line-height: 46px;
|
||||
}
|
||||
}
|
||||
|
||||
/*---滚动条默认显示样式--*/
|
||||
>.el-menu::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(255,255,255,.4);
|
||||
border-radius: 2px;
|
||||
border: none;
|
||||
}
|
||||
/*---鼠标点击滚动条显示样式--*/
|
||||
>.el-menu::-webkit-scrollbar-thumb:hover {
|
||||
background-color: rgba(255,255,255,.3);
|
||||
border-radius: 2px;
|
||||
}
|
||||
/*---滚动条大小--*/
|
||||
>.el-menu::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 14px;
|
||||
}
|
||||
/*---顶部logo---*/
|
||||
>.el-menu.header-logo {
|
||||
border-right: none;
|
||||
>.el-menu-item {
|
||||
padding: 13px 0 0 18px !important;
|
||||
height: 50px;
|
||||
border-right: 1px solid #202F3F;
|
||||
background-color: #182534 !important;
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
|
||||
img {
|
||||
box-shadow: 0 0 2px 0 rgba(0,0,0,0.50);
|
||||
}
|
||||
|
||||
.system-name {
|
||||
padding-left: 8px;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
letter-spacing: 0;
|
||||
line-height: 34px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-menu--popup {
|
||||
.el-menu-item {
|
||||
height: 49px;
|
||||
line-height: 49px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
.my-editor {
|
||||
margin-top: 4px;
|
||||
border: 1px solid $--right-box-border-color;
|
||||
|
||||
.prism-editor__textarea {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,233 @@
|
||||
.proxy-debug__dialog {
|
||||
height: 90vh;
|
||||
overflow: hidden;
|
||||
.el-dialog__header {
|
||||
display: none;
|
||||
}
|
||||
.el-dialog__body {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
.debug-wrapper{
|
||||
width: 100%;
|
||||
height:100%;
|
||||
background: #fff;
|
||||
text-align: center;
|
||||
display: grid;
|
||||
grid-template-columns: 25% auto;
|
||||
grid-template-rows: 60px auto;
|
||||
grid-row-gap: 20px;
|
||||
grid-column-gap: 20px;
|
||||
padding:25px;
|
||||
|
||||
.item{
|
||||
border:1px solid #bbbbbb;
|
||||
color: #000C18;
|
||||
line-height: 60px;
|
||||
font-size: 16px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.item-1 {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.item-2 {
|
||||
background-color: #ffffff;
|
||||
border: 0;
|
||||
.el-input__inner {
|
||||
border-radius: 0px;
|
||||
border-left: 0px;
|
||||
border-right: 0;
|
||||
border-top: 1px solid #bbbbbb;
|
||||
border-bottom: 1px solid #bbbbbb;
|
||||
color: #606266;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
padding: 0 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.sub-grid-send{
|
||||
width: 100%;
|
||||
height:100%;
|
||||
background: #fff;
|
||||
text-align: center;
|
||||
display: grid;
|
||||
grid-template-columns: 100px auto 80px;
|
||||
grid-template-rows: 60px;
|
||||
grid-row-gap: 0px;
|
||||
grid-column-gap: 0px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.item-3 {
|
||||
background-color: #ffffff;
|
||||
.el-input__inner{
|
||||
border: 0px;
|
||||
}
|
||||
.el-input__inner:hover {
|
||||
border: 0px;
|
||||
}
|
||||
.el-input__inner:focus {
|
||||
border: 1px solid #bbbbbb;
|
||||
}
|
||||
|
||||
.el-table__header, .el-table__body{
|
||||
witdh:100% !important;
|
||||
}
|
||||
|
||||
.el-table__header-wrapper{
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.el-table__empty-block{
|
||||
height: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.el-table th.is-leaf, .el-table td {
|
||||
border-top: 1px solid #bbbbbb;
|
||||
border-left: 1px solid #bbbbbb;
|
||||
border-right: 0px;
|
||||
padding-top: 3px;
|
||||
padding-bottom: 3px;
|
||||
}
|
||||
|
||||
.el-table{
|
||||
border-bottom: 1px solid #bbbbbb;
|
||||
border-right: 0px solid #bbbbbb;
|
||||
border-left: 0px solid #bbbbbb;
|
||||
}
|
||||
|
||||
.el-table .cell {
|
||||
line-height: 23px;
|
||||
padding-left: 3px;
|
||||
padding-right: 3px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.el-table__body tr:hover >td {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.el-table__body tr:focus >td {
|
||||
background-color: cadetblue;
|
||||
}
|
||||
.debug__params-delete:hover{
|
||||
color:#0091FF;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.item-4 {
|
||||
height:100%;
|
||||
overflow:hidden;
|
||||
background-color: #ffffff;
|
||||
display: grid;
|
||||
grid-template-columns: 40% 60%;
|
||||
grid-template-rows: 60px minmax(100px, 1fr) 60px minmax(100px, 2fr);
|
||||
grid-row-gap: 0px;
|
||||
grid-column-gap: 0px;
|
||||
|
||||
pre {outline: 0px; padding: 0px; margin: 0px;height:360px;line-height: 20px; font-family: Monaco, Menlo, "Ubuntu Mono", Consolas, source-code-pro, monospace;}
|
||||
.color-pre__style{
|
||||
height: 95%;
|
||||
width: 95%;
|
||||
}
|
||||
.request-header {
|
||||
grid-column-start: 1;
|
||||
grid-column-end: 3;
|
||||
border-bottom:1px solid #bbbbbb;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.request-header-content{
|
||||
grid-column-start: 1;
|
||||
grid-column-end: 3;
|
||||
border-bottom:1px solid #bbbbbb;
|
||||
padding-left: 0px;
|
||||
overflow:scroll;
|
||||
height: 100%;
|
||||
width:100%;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.response-header {
|
||||
border-right:1px solid #bbbbbb;
|
||||
border-bottom:1px solid #bbbbbb;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.response-header-content {
|
||||
border-right:1px solid #bbbbbb;
|
||||
padding-left: 0px;
|
||||
height: 100%;
|
||||
width:100%;
|
||||
overflow:scroll;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.response-body {
|
||||
border-bottom:1px solid #bbbbbb;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.response-body-content {
|
||||
padding-left: 5px;
|
||||
height:100%;
|
||||
width:100%;
|
||||
overflow:scroll;
|
||||
}
|
||||
}
|
||||
|
||||
.sub-grid-params{
|
||||
width: 100%;
|
||||
height:100%;
|
||||
background: #fff;
|
||||
text-align: center;
|
||||
display: grid;
|
||||
grid-template-columns: 100%;
|
||||
grid-template-rows: 60px auto;
|
||||
grid-row-gap: 0px;
|
||||
grid-column-gap: 0px;
|
||||
padding: 0;
|
||||
justify-items: center;
|
||||
|
||||
}
|
||||
|
||||
.sub-grid-params-add{
|
||||
width: 96%;
|
||||
height:100%;
|
||||
background: #fff;
|
||||
text-align: left;
|
||||
display: grid;
|
||||
grid-template-columns: 70% 30%;
|
||||
grid-template-rows:100%;
|
||||
grid-row-gap: 0;
|
||||
grid-column-gap: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.el-select .el-input .el-input__inner{
|
||||
height: 60px;
|
||||
border-radius: 0;
|
||||
border:1px solid #bbbbbb;
|
||||
}
|
||||
.el-select .el-input .el-select__caret {
|
||||
line-height:60px;
|
||||
font-weight: bolder;
|
||||
color:black;
|
||||
}
|
||||
|
||||
.el-button {
|
||||
border-color: #bbbbbb;
|
||||
}
|
||||
|
||||
.sub-grid-params-add .el-button {
|
||||
height: 38px;
|
||||
margin-top: 11px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
84
src/assets/css/components/components/table/common.scss
Normal file
84
src/assets/css/components/components/table/common.scss
Normal file
@@ -0,0 +1,84 @@
|
||||
.pop-title{
|
||||
margin-top: 7px;
|
||||
}
|
||||
.pop-custom {
|
||||
padding: 0 12px 12px 12px;
|
||||
border: 1px solid #EBEEF5;
|
||||
position: absolute;
|
||||
top: 55px;
|
||||
right: 20px;
|
||||
width: 200px;
|
||||
color: #606266;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
z-index: 999999;
|
||||
box-shadow: 0 0 10px #CCC;
|
||||
box-sizing: border-box;
|
||||
|
||||
.el-button--mini{
|
||||
padding: 5px 7px;
|
||||
}
|
||||
}
|
||||
.pop-custom-explore {
|
||||
top: 33px;
|
||||
}
|
||||
.relative-position .pop-custom {
|
||||
top: 33px;
|
||||
}
|
||||
.custom-labels {
|
||||
margin-top: 12px;
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
.custom-labels i {
|
||||
color: #04b330;
|
||||
font-size: 14px;
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
top: 6px;
|
||||
}
|
||||
.custom-label {
|
||||
padding: 2px 0 2px 25px;
|
||||
position: relative;
|
||||
cursor: default;
|
||||
font-size: 14px;
|
||||
}
|
||||
.custom-label:hover{
|
||||
color: #cccccc;
|
||||
background-color: #DCDFE6;
|
||||
}
|
||||
.custom-title{
|
||||
padding: 2px 0 2px 2px;
|
||||
}
|
||||
.custom-label-disabled {
|
||||
cursor: not-allowed;
|
||||
background: #f1f3f4;
|
||||
opacity: 0.7;
|
||||
}
|
||||
.custom-bottom-btns {
|
||||
margin-top: 7px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.unshow {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.list-page .top-tools .top-tool-btn {
|
||||
height: 32.5px;
|
||||
width: 36px;
|
||||
border: 1px solid #DEDEDE;
|
||||
outline: none;
|
||||
border-radius: 2px;
|
||||
background-color: #F9F9F9;
|
||||
transition: background-color linear .1s;
|
||||
}
|
||||
|
||||
.list-page {
|
||||
.el-input--small .el-input__inner {
|
||||
height: 32.4px;
|
||||
line-height: 32px;
|
||||
border-radius: 0px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
.galaxy-proxy-table {
|
||||
.js-code-highlight {
|
||||
height: 250px;
|
||||
|
||||
.highlight-box {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
|
||||
.highlight-box__copy-btn {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
pre code.hljs {
|
||||
overflow-x: visible;
|
||||
}
|
||||
}
|
||||
17
src/assets/css/components/index.scss
Normal file
17
src/assets/css/components/index.scss
Normal file
@@ -0,0 +1,17 @@
|
||||
@import './components/advancedSearch/advancedSearch';
|
||||
@import './components/charts/panel';
|
||||
@import './components/common/TimeRange/dateTimeRange';
|
||||
@import './components/common/TimeRange/timeRefresh';
|
||||
@import './components/common/pagination';
|
||||
// @import './components/entities/entities';
|
||||
@import './components/layout/layout';
|
||||
@import './components/rightBox/settings/chartBox';
|
||||
@import './components/setting/galaxyProxyDebug';
|
||||
@import './components/table/settings/galaxyProxyTable';
|
||||
@import './components/table/common';
|
||||
@import './views/charts/chart';
|
||||
@import './views/entityExplorer/entityExplorer';
|
||||
@import './views/entityExplorer/search/explorerSearch';
|
||||
@import './views/entityExplorer/entityFilter';
|
||||
@import './views/entityExplorer/entityList/entityList';
|
||||
@import './views/entityExplorer/entityList/card';
|
||||
342
src/assets/css/components/views/charts/chart.scss
Normal file
342
src/assets/css/components/views/charts/chart.scss
Normal file
@@ -0,0 +1,342 @@
|
||||
.ip-detail__open-port {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
.open-port__table {
|
||||
flex: 1;
|
||||
display: table;
|
||||
height: 100%;
|
||||
border-right: 1px solid $--right-box-border-color;
|
||||
|
||||
.open-port__table-row {
|
||||
display: table-row;
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
}
|
||||
.open-port__table-row.open-port__table-row--header {
|
||||
padding: 13px 30px 0;
|
||||
height: 40px;
|
||||
color: #6B717B;
|
||||
}
|
||||
.open-port__table-cell {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
padding: 13px 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.open-port__chart {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 0 0 30%;
|
||||
height: 100%;
|
||||
|
||||
.open-port__chart-title {
|
||||
padding-left: 20px;
|
||||
line-height: 50px;
|
||||
flex: 0 0 50px;
|
||||
}
|
||||
.open-port__chart-body {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ip-detail__hosted-domain, .app-detail__related-domain {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
.hosted-domain__list, .related-domain__list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 0 0 25%;
|
||||
overflow: auto;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 1px solid $--right-box-border-color;
|
||||
|
||||
.hosted-domain__list-title, .related-domain__list-title {
|
||||
padding: 13px 30px 0;
|
||||
height: 40px;
|
||||
color: #6B717B;
|
||||
}
|
||||
.hosted-domain__list-body, .related-domain__list-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100% - 40px);
|
||||
overflow: hidden auto;
|
||||
}
|
||||
.hosted-domain__list-row, .related-domain__list-row {
|
||||
padding: 5px 30px;
|
||||
color: #3976CB;
|
||||
i {
|
||||
color: #B8C1D1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.hosted-domain__chart, .related-domain__chart {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
|
||||
&>div {
|
||||
flex: 0 0 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.hosted-domain__chart-title {
|
||||
padding-left: 20px;
|
||||
line-height: 50px;
|
||||
flex: 0 0 50px;
|
||||
}
|
||||
.chart-drawing {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.domain-detail-list {
|
||||
display: table;
|
||||
width: 100%;
|
||||
|
||||
.domain-detail-list__row {
|
||||
display: table-row;
|
||||
|
||||
.domain-detail-list__label {
|
||||
display: table-cell;
|
||||
padding: 13px 30px;
|
||||
border-bottom: 1px solid $--content-right-background-color;
|
||||
width: 170px;
|
||||
color: #6B717B;
|
||||
}
|
||||
.domain-detail-list__content {
|
||||
display: table-cell;
|
||||
padding: 13px 0 ;
|
||||
border-bottom: 1px solid $--content-right-background-color;
|
||||
color: #3976CB;
|
||||
}
|
||||
}
|
||||
}
|
||||
.crypto-eventList__record {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
.record__table {
|
||||
display: table;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
.record__table-row {
|
||||
display: table-row;
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
}
|
||||
.record__table-row.record__table-row--header {
|
||||
padding: 13px 30px 0;
|
||||
height: 40px;
|
||||
color: #6B717B;
|
||||
}
|
||||
.record__table-cell {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
padding-left: 10px;
|
||||
padding-top: 15px;
|
||||
padding-bottom: 0;
|
||||
|
||||
.record_second{
|
||||
color:#7e8088;
|
||||
font-size:12px;
|
||||
}
|
||||
|
||||
.circle-red {
|
||||
color: #EC7F66;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
}
|
||||
.record__table-cell:first-of-type {
|
||||
padding-left:30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.entity-detail__dns-record {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
.dns-record__table {
|
||||
display: table;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
.dns-record__table-row {
|
||||
display: table-row;
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
}
|
||||
.dns-record__table-row.dns-record__table-row--header {
|
||||
padding: 13px 30px 0;
|
||||
height: 40px;
|
||||
color: #6B717B;
|
||||
}
|
||||
.dns-record__table-cell {
|
||||
display: table-cell;
|
||||
border-bottom: 1px solid $--content-right-background-color;
|
||||
vertical-align: middle;
|
||||
padding: 13px 30px;
|
||||
}
|
||||
.dns-record__table-row:not(.dns-record__table-row--header) .dns-record__table-cell:last-of-type {
|
||||
color: #3976CB;
|
||||
}
|
||||
}
|
||||
}
|
||||
.app-detail__related-domain {
|
||||
flex-direction: row;
|
||||
.related-domain__list {
|
||||
border-bottom: none;
|
||||
}
|
||||
.related-domain__chart {
|
||||
flex-direction: row;
|
||||
border-left: 1px solid $--right-box-border-color;
|
||||
padding: 3vh 5vw;
|
||||
&>div {
|
||||
flex: 0 0 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.related-domain__chart-title {
|
||||
padding-left: 20px;
|
||||
line-height: 50px;
|
||||
flex: 0 0 50px;
|
||||
color: #3976CB;
|
||||
}
|
||||
.chart-drawing {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.sankey-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
.sankey__label {
|
||||
position: absolute;
|
||||
color: #333;
|
||||
bottom: 50px;
|
||||
font-weight: bold;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
.sankey__tooltip {
|
||||
width: 270px;
|
||||
height: 170px;
|
||||
padding: 5px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.sankey__tooltip-row {
|
||||
display: flex;
|
||||
padding: 2px 0;
|
||||
|
||||
.sankey__row-label {
|
||||
flex: 0 0 98px;
|
||||
color: #666;
|
||||
}
|
||||
.sankey__row-value {
|
||||
flex: 1;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.sankey__tooltip-table {
|
||||
padding: 2px 0 2px 22px;
|
||||
display: table;
|
||||
|
||||
.sankey__table-row {
|
||||
display: table-row;
|
||||
padding: 1px 0 4px 0;
|
||||
|
||||
.sankey__table-cell {
|
||||
display: table-cell;
|
||||
font-size: 12px;
|
||||
color: #333;
|
||||
}
|
||||
.sankey__table-cell:first-of-type {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.map-tooltip {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.map-tooltip__title {
|
||||
color: #333;
|
||||
font-size: 16px;
|
||||
}
|
||||
.map-tooltip__content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
|
||||
span {
|
||||
line-height: 35px;
|
||||
}
|
||||
span:first-of-type {
|
||||
padding-right: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.position-icon {
|
||||
font-size: 24px;
|
||||
color: #EC7F66;
|
||||
}
|
||||
|
||||
.circle1{
|
||||
position: relative;
|
||||
width:28px;
|
||||
height:28px;
|
||||
line-height: 28px;
|
||||
border:1px solid #dd674d;
|
||||
background:#FFFFFF;
|
||||
border-radius:50%;
|
||||
-moz-border-radius:50%;
|
||||
margin:auto;
|
||||
z-index: 1;
|
||||
}
|
||||
.circle1::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
background: #dd674d;
|
||||
bottom: 3px;
|
||||
right: 3px;
|
||||
left: 3px;
|
||||
top: 3px;
|
||||
z-index: 5;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
line-height: 0;
|
||||
background-color: #aeaeae;
|
||||
&.arrow-hor {
|
||||
width: 24px;
|
||||
height: 2px;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
&.arrow-hor.right::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
right: -8px;
|
||||
border: 5px solid transparent;
|
||||
border-left: 5px solid #aeaeae;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,110 @@
|
||||
.entity-explorer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: white;
|
||||
margin: 20px;
|
||||
height: calc(100% - 40px) !important;
|
||||
justify-content: center;
|
||||
transition: all linear .2s;
|
||||
|
||||
&.entity-explorer--show-list {
|
||||
background-color: unset;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.explorer-top-tools {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
padding-bottom: 18px;
|
||||
|
||||
&>div {
|
||||
padding: 0 0 0 10px;
|
||||
}
|
||||
.el-button--mini{
|
||||
padding: 4px 6px !important;
|
||||
min-height: 26px !important;
|
||||
&.active i {
|
||||
color: $--color-primary;
|
||||
}
|
||||
i {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.explorer-container {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
}
|
||||
.explorer-foot {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
height: 17vh;
|
||||
|
||||
&>div {
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.el-divider {
|
||||
width: 2px;
|
||||
height: 40px;
|
||||
background-color: #cecece;
|
||||
}
|
||||
.entity-overview {
|
||||
display: flex;
|
||||
|
||||
.overview-left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 0 30px;
|
||||
|
||||
span:first-of-type {
|
||||
font-size: 30px;
|
||||
color: #333333;
|
||||
font-weight: bold;
|
||||
}
|
||||
span:last-of-type {
|
||||
font-size: 16px;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
.overview-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 30px;
|
||||
|
||||
.right-row {
|
||||
display: flex;
|
||||
height: 30px;
|
||||
align-items: center;
|
||||
|
||||
.right-label {
|
||||
width: 55px;
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
}
|
||||
.right-value {
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
font-weight: bold;
|
||||
}
|
||||
i {
|
||||
padding-right: 10px;
|
||||
font-size: 18px;
|
||||
}
|
||||
.cn-icon-increase {
|
||||
color: #23BF9A;
|
||||
}
|
||||
.cn-icon-active {
|
||||
color: #0091FF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
.entity-filter-case {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 280px;
|
||||
padding-top: 10px;
|
||||
margin-right: 10px;
|
||||
|
||||
.filter-case__header {
|
||||
background-color: #E1E6ED;
|
||||
margin-bottom: 10px;
|
||||
padding-left: 8px;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
.entity-filter {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 1px solid #E7EAED;
|
||||
margin-bottom: 10px;
|
||||
padding: 0 15px;
|
||||
background-color: white;
|
||||
|
||||
.filter__header {
|
||||
height: 46px;
|
||||
line-height: 46px;
|
||||
border-bottom: 1px solid #EFF2F5;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
.filter__body {
|
||||
padding: 11px 0 21px 0;
|
||||
|
||||
.filter__row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 26px;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
transition: all linear .2s;
|
||||
|
||||
&:hover, &.filter__row--active {
|
||||
background-color: #F3F7FA;
|
||||
}
|
||||
.row__label {
|
||||
font-size: 14px;
|
||||
i {
|
||||
color: #8FA1BE;
|
||||
}
|
||||
span {
|
||||
padding-left: 6px;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
.row__value {
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,170 @@
|
||||
.cn-entity--block {
|
||||
box-sizing: border-box;
|
||||
margin: 0 10px 10px 0;
|
||||
width: 321px;
|
||||
height: 329px;
|
||||
background: #FFFFFF;
|
||||
border-radius: 2px;
|
||||
transition: all .2s;
|
||||
|
||||
&:hover .cn-entity__header .header__content {
|
||||
|
||||
}
|
||||
.cn-entity__header {
|
||||
position: relative;
|
||||
background-color: #FFFFFF;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
width: 100%;
|
||||
height: 89px;
|
||||
box-sizing: border-box;
|
||||
transition: all .2s;
|
||||
|
||||
.header__bottom__line {
|
||||
width:288px;
|
||||
height:1px;
|
||||
border-top:solid 1px #eff2f5;
|
||||
position: absolute;
|
||||
top: 88px;
|
||||
}
|
||||
|
||||
.header__icon {
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
border-radius: 50%;
|
||||
background: #e8fbf9;
|
||||
border: 2px solid #e8fbf9;
|
||||
|
||||
i {
|
||||
font-size: 22px;
|
||||
color: #23bf9a;
|
||||
}
|
||||
}
|
||||
.header__content {
|
||||
font-size: 22px;
|
||||
color: #333333;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
.content__desc{
|
||||
color: #999999;
|
||||
width: 200px;
|
||||
font-size: 12px;
|
||||
margin-top: 3px;
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 82px;
|
||||
}
|
||||
|
||||
.content__name {
|
||||
position: absolute;
|
||||
top: 21px;
|
||||
left: 82px;
|
||||
overflow: hidden;
|
||||
max-width: 200px;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
.cn-entity__body {
|
||||
overflow: hidden;
|
||||
padding-top: 10px;
|
||||
font-size: 14px;
|
||||
position: relative;
|
||||
height:240px;
|
||||
|
||||
.body__row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0 30px;
|
||||
color: #666666;
|
||||
padding: 4px 0;
|
||||
justify-content: left;
|
||||
}
|
||||
.body__drawing-box {
|
||||
position: relative;
|
||||
height: 100px;
|
||||
.chart__loading {
|
||||
top: 0;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.body__drawing {
|
||||
position: absolute;
|
||||
padding: 10px 30px;
|
||||
height: 100px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.body__row-label {
|
||||
padding-right: 0px;
|
||||
color: #999999;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
white-space: nowrap;
|
||||
line-height: 16px;
|
||||
i {
|
||||
font-size: 13px;
|
||||
color:#8FA1BE;
|
||||
margin-right: 9px;
|
||||
}
|
||||
}
|
||||
.body__row-value {
|
||||
width: calc(100% - 69px);
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
font-weight: 400;
|
||||
}
|
||||
.body__statics {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 0 30px;
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
.entity-statics-down{
|
||||
padding-right: 20px;
|
||||
min-width: 80px;
|
||||
|
||||
i {
|
||||
color:#5881B7;
|
||||
font-size:14px;
|
||||
padding-right:6px;
|
||||
}
|
||||
}
|
||||
|
||||
.entity-statics-up{
|
||||
padding-right: 20px;
|
||||
min-width: 80px;;
|
||||
i {
|
||||
color: #62B16C;
|
||||
font-size: 14px;
|
||||
padding-right: 6px;
|
||||
}
|
||||
|
||||
}
|
||||
.body__detail {
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
color: #8FA1BE;
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
.entity-list {
|
||||
width: calc(100% - 290px);
|
||||
height: 100%;
|
||||
padding-top: 10px;
|
||||
|
||||
.entity-list__content {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
.entity-list--block {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
display: -webkit-flex;
|
||||
justify-content: flex-start;
|
||||
border-radius: 2px;
|
||||
height: calc(100% - 67px);
|
||||
width: calc(100% - 10px);
|
||||
overflow: hidden auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,72 @@
|
||||
.explorer-search {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
background-image: url('~@/assets/img/cn-explore-bg.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0 100%;
|
||||
|
||||
&.explorer-search--show-list {
|
||||
flex: 0 0 40px;
|
||||
background-image: none;
|
||||
}
|
||||
.explorer-search__title {
|
||||
height: 112px;
|
||||
text-align: center;
|
||||
font-size: 42px;
|
||||
color: #3976CB;
|
||||
}
|
||||
.explorer-search__input-case {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 0 20px;
|
||||
|
||||
&.explorer-search__input-case--question-mark-in-line {
|
||||
flex-direction: row;
|
||||
padding: 0;
|
||||
|
||||
.explorer-search__input {
|
||||
height: 40px;
|
||||
max-width: unset;
|
||||
}
|
||||
}
|
||||
.search-symbol-inline {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #666;
|
||||
font-size: 16px;
|
||||
padding: 0 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.explorer-search__input {
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
height: 66px;
|
||||
}
|
||||
.explorer-search__foot {
|
||||
display: flex;
|
||||
padding-top: 18px;
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
justify-content: space-between;
|
||||
font-weight: bold;
|
||||
|
||||
.foot__item {
|
||||
font-size: 14px;
|
||||
color: #3976CB;
|
||||
|
||||
.el-divider {
|
||||
background-color: #3976CB;
|
||||
}
|
||||
|
||||
span {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,8 +1,8 @@
|
||||
@font-face {
|
||||
font-family: "cn-icon"; /* Project id 2614877 */
|
||||
src: url('iconfont.woff2?t=1636701851616') format('woff2'),
|
||||
url('iconfont.woff?t=1636701851616') format('woff'),
|
||||
url('iconfont.ttf?t=1636701851616') format('truetype');
|
||||
src: url('iconfont.woff2?t=1639404354758') format('woff2'),
|
||||
url('iconfont.woff?t=1639404354758') format('woff'),
|
||||
url('iconfont.ttf?t=1639404354758') format('truetype');
|
||||
}
|
||||
|
||||
.cn-icon {
|
||||
@@ -13,6 +13,46 @@
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.cn-icon-entity-alert:before {
|
||||
content: "\e755";
|
||||
}
|
||||
|
||||
.cn-icon-safe:before {
|
||||
content: "\e756";
|
||||
}
|
||||
|
||||
.cn-icon-city:before {
|
||||
content: "\e757";
|
||||
}
|
||||
|
||||
.cn-icon-search-advance:before {
|
||||
content: "\e750";
|
||||
}
|
||||
|
||||
.cn-icon-search-normal:before {
|
||||
content: "\e751";
|
||||
}
|
||||
|
||||
.cn-icon-blocks:before {
|
||||
content: "\e752";
|
||||
}
|
||||
|
||||
.cn-icon-list:before {
|
||||
content: "\e753";
|
||||
}
|
||||
|
||||
.cn-icon-help:before {
|
||||
content: "\e754";
|
||||
}
|
||||
|
||||
.cn-icon-active:before {
|
||||
content: "\e74e";
|
||||
}
|
||||
|
||||
.cn-icon-increase:before {
|
||||
content: "\e74f";
|
||||
}
|
||||
|
||||
.cn-icon-debug:before {
|
||||
content: "\e606";
|
||||
}
|
||||
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -1,7 +1,29 @@
|
||||
@import './font/iconfont';
|
||||
@font-face { // 由于主题嵌套原因，原ele的icon图标字体加载会出错，需重写
|
||||
font-family: 'element-icons';
|
||||
src: url('~@/assets/css/themes/src/fonts/element-icons.woff') format('woff'), /* chrome, firefox */
|
||||
url('~@/assets/css/themes/src/fonts/element-icons.ttf') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
|
||||
font-weight: normal;
|
||||
font-display: auto;
|
||||
font-style: normal;
|
||||
}
|
||||
$--font-path: '~@/assets/css/themes/src/fonts'; // 避免ele原字体加载语句出错
|
||||
|
||||
@import './common';
|
||||
@import './rightBoxCommon';
|
||||
@import './tableCommon';
|
||||
@import './chart';
|
||||
@import '../stylus/index.scss';
|
||||
@import './font/iconfont.css';
|
||||
|
||||
/* 主题 */
|
||||
|
||||
.theme-light {
|
||||
$--theme: light;
|
||||
@import './themes/theme-light.scss'; // 加载主题变量
|
||||
@import './themes/src/index.scss'; // 加载ele样式
|
||||
@import './components/index'; // 加载cn组件样式
|
||||
@import './common/index.scss'; // 加载通用样式
|
||||
}
|
||||
|
||||
.theme-dark {
|
||||
$--theme: dark;
|
||||
@import './themes/theme-dark.scss'; // 加载主题变量
|
||||
@import './themes/src/index.scss'; // 加载ele样式
|
||||
@import './components/index'; // 加载cn组件样式
|
||||
@import './common/index.scss'; // 加载通用样式
|
||||
}
|
||||
|
||||
@@ -1,85 +0,0 @@
|
||||
/*** 定义自定义变量和重写element-ui变量 ***/
|
||||
|
||||
/** 重写element-ui变量 **/
|
||||
|
||||
$--color-primary: #0091ff; // 主题色
|
||||
$--color-primary-dark-10: darken(#0091ff, 10%); // 默认主题色 深10%
|
||||
$--color-primary-light-10: lighten(#0091ff, 10%); // 默认主题色 浅10%
|
||||
$--color-primary-light-20: lighten(#0091ff, 20%); // 默认主题色 浅20%
|
||||
|
||||
/* menu相关 */
|
||||
$--menu-background-color: #00162B; // menu背景色
|
||||
$--menu-hover-background-color: #000C18; // menu背景色
|
||||
$--menu-item-font-color: #BEBEBE; // menu字色
|
||||
$--menu-item-hover-fill: $--color-primary; // menu鼠标悬浮、激活时背景色
|
||||
|
||||
$--tree-node-hover-background-color: #F5F7FA;
|
||||
|
||||
$--collapse-header-height: 42px;
|
||||
$--collapse-border-color: #EFF2F5;
|
||||
|
||||
/** 自定义变量 **/
|
||||
:root {
|
||||
/* 自适应变量 */
|
||||
@media only screen and (min-width : 10px) {
|
||||
--chart-height-unit: 25px; // chart的单元高度
|
||||
/* --entity-width: calc(50% - 5px); // entity列表每个entity框的宽度
|
||||
--entity-height: 190px; // entity列表每个entity框的高度*/
|
||||
}
|
||||
@media only screen and (min-width : 1224px) {
|
||||
--chart-height-unit: 30px;
|
||||
}
|
||||
/* @media only screen and (min-width : 1560px) {
|
||||
--entity-width: calc(33.3% - 7px);
|
||||
}*/
|
||||
@media only screen and (min-width : 1824px) {
|
||||
--chart-height-unit: 40px;
|
||||
/* --entity-width: calc(33.3% - 7px);
|
||||
--entity-height: 210px;*/
|
||||
}
|
||||
@media only screen and (min-width : 2424px) {
|
||||
--chart-height-unit: 55px;
|
||||
/* --entity-width: calc(25% - 8px);
|
||||
--entity-height: 240px;*/
|
||||
}
|
||||
}
|
||||
|
||||
$--border-color-primary: #DEDEDE;
|
||||
$--border-radius-primary: 2px;
|
||||
|
||||
$--right-box-border-color: #E7EAED;
|
||||
|
||||
/* 按钮 */
|
||||
$--button-border-radius: $--border-radius-primary; // 按钮圆角
|
||||
|
||||
$--button-primary-color: #FFF; // 普通按钮字色
|
||||
$--button-primary-background-color: $--color-primary; // 普通按钮背景色
|
||||
$--button-hover-tint-percent: 20%; // 非灰色按钮在鼠标hover时背景色变浅的幅度
|
||||
$--button-active-shade-percent: 0; // 非灰色按钮在focus时背景色变深的幅度
|
||||
|
||||
$--button-gray-color: #666; // 灰色按钮字色
|
||||
$--button-gray-hover-color: $--button-gray-color; // 灰色按钮hover字色
|
||||
$--button-gray-active-color: $--color-primary; // 灰色按钮focus字色
|
||||
$--button-gray-background-color: #F9F9F9; // 灰色按钮背景色
|
||||
$--button-gray-hover-background-color: #FFF; // 灰色按钮hover背景色
|
||||
$--button-gray-active-background-color: $--button-gray-hover-background-color; // 灰色按钮focus背景色
|
||||
$--button-gray-border-color: $--border-color-primary; // 灰色按钮边框色
|
||||
$--button-gray-hover-border-color: $--button-gray-border-color; // 灰色按钮hover边框色
|
||||
$--button-gray-active-border-color-tint-percent: 30%; // 灰色按钮在focus时边框色相对于主题色变浅的幅度
|
||||
|
||||
$--color-danger: #DE5D3F; //全局警告色红色
|
||||
$--color-success: #23BF9A; //全局正常色绿色
|
||||
$--color-warning: $--color-primary; //全局警告橙色
|
||||
$--color-suspended: #9e9c98; //全局停用色灰色
|
||||
$--color-monitor: #98AEC5; //全局停用色灰色
|
||||
|
||||
$--chart-single-value-icon-background-color: #E8F6FF;
|
||||
|
||||
$--content-right-background-color: #EFF2F5; //右侧背景色
|
||||
|
||||
/** 改变 icon 字体路径变量，并引入element-ui变量文件 **/
|
||||
$--font-path: '~element-plus/lib/theme-chalk/fonts';
|
||||
@import "~element-plus/packages/theme-chalk/src/index";
|
||||
:export {
|
||||
themeColor: $--color-primary;
|
||||
}
|
||||
11
src/assets/css/themes/THEME_README.md
Normal file
11
src/assets/css/themes/THEME_README.md
Normal file
@@ -0,0 +1,11 @@
|
||||
# 主题功能说明
|
||||
|
||||
### 说明
|
||||
|
||||
- 对项目中的主题相关颜色进行归类、抽取变量
|
||||
- 代码中设置元素的颜色时，对主题相关色应使用变量，不应使用颜色值
|
||||
- 切换主题时，更改body标签上的class
|
||||
|
||||
### 源码改动
|
||||
- theme-chalk/src/common/var.scss 首行增加$--theme属性
|
||||
- theme-chalk/src/mixins/mixins.scss 改动较多，如需了解请比对文件差异
|
||||
67
src/assets/css/themes/common.scss
Normal file
67
src/assets/css/themes/common.scss
Normal file
@@ -0,0 +1,67 @@
|
||||
/*---滚动条默认显示样式--*/
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: #ddd;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #fff;
|
||||
}
|
||||
/*---鼠标点击滚动条显示样式--*/
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: #c8c8c8;
|
||||
border-radius: 6px;
|
||||
}
|
||||
/*---滚动条大小--*/
|
||||
::-webkit-scrollbar {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
/*---滚动框背景样式--*/
|
||||
::-webkit-scrollbar-track-piece {
|
||||
background-color: transparent;
|
||||
}
|
||||
/* input的placeholder字色 */
|
||||
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
|
||||
color: lighten(#0091ff, 20%);
|
||||
}
|
||||
.myDatePicker .el-picker-panel__footer{
|
||||
.el-button{
|
||||
display: none;
|
||||
}
|
||||
.is-plain{
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
th *:first-letter,
|
||||
.left-menu *:first-letter,
|
||||
.option-popper *,
|
||||
.header__operations *:first-letter {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.outer-box {
|
||||
padding: 10px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.el-table__empty-block {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
/* 淡化amcharts的logo */
|
||||
g [aria-labelledby$=-title] {
|
||||
opacity: 0.1;
|
||||
transform: translateX(calc(100% - 52px)) scale(.7);
|
||||
}
|
||||
|
||||
.no-data {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
color: #999;
|
||||
}
|
||||
.no-data-hide {
|
||||
display: none;
|
||||
}
|
||||
7
src/assets/css/themes/src/affix.scss
Normal file
7
src/assets/css/themes/src/affix.scss
Normal file
@@ -0,0 +1,7 @@
|
||||
@import "mixins/mixins";
|
||||
|
||||
@include b(affix) {
|
||||
@include m(fixed) {
|
||||
position: fixed;
|
||||
}
|
||||
}
|
||||
147
src/assets/css/themes/src/alert.scss
Normal file
147
src/assets/css/themes/src/alert.scss
Normal file
@@ -0,0 +1,147 @@
|
||||
@import "mixins/mixins";
|
||||
@import "common/var";
|
||||
|
||||
@include b(alert) {
|
||||
width: 100%;
|
||||
padding: $--alert-padding;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
border-radius: $--alert-border-radius;
|
||||
position: relative;
|
||||
background-color: $--color-white;
|
||||
overflow: hidden;
|
||||
opacity: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transition: opacity .2s;
|
||||
|
||||
@include when(light) {
|
||||
.#{$namespace}-alert__closebtn {
|
||||
color: $--color-text-placeholder;
|
||||
}
|
||||
}
|
||||
|
||||
@include when(dark) {
|
||||
.#{$namespace}-alert__closebtn {
|
||||
color: $--color-white;
|
||||
}
|
||||
.#{$namespace}-alert__description {
|
||||
color: $--color-white;
|
||||
}
|
||||
}
|
||||
|
||||
@include when(center) {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@include m(success) {
|
||||
&.is-light {
|
||||
background-color: $--alert-success-color;
|
||||
color: $--color-success;
|
||||
|
||||
.#{$namespace}-alert__description {
|
||||
color: $--color-success;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-dark {
|
||||
background-color: $--color-success;
|
||||
color: $--color-white;
|
||||
}
|
||||
}
|
||||
|
||||
@include m(info) {
|
||||
&.is-light {
|
||||
background-color: $--alert-info-color;
|
||||
color: $--color-info;
|
||||
}
|
||||
|
||||
&.is-dark {
|
||||
background-color: $--color-info;
|
||||
color: $--color-white;
|
||||
}
|
||||
|
||||
.#{$namespace}-alert__description {
|
||||
color: $--color-info;
|
||||
}
|
||||
}
|
||||
|
||||
@include m(warning) {
|
||||
&.is-light {
|
||||
background-color: $--alert-warning-color;
|
||||
color: $--color-warning;
|
||||
|
||||
.#{$namespace}-alert__description {
|
||||
color: $--color-warning;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-dark {
|
||||
background-color: $--color-warning;
|
||||
color: $--color-white;
|
||||
}
|
||||
}
|
||||
|
||||
@include m(error) {
|
||||
&.is-light {
|
||||
background-color: $--alert-danger-color;
|
||||
color: $--color-danger;
|
||||
|
||||
.#{$namespace}-alert__description {
|
||||
color: $--color-danger;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-dark {
|
||||
background-color: $--color-danger;
|
||||
color: $--color-white;
|
||||
}
|
||||
}
|
||||
|
||||
@include e(content) {
|
||||
display: table-cell;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
@include e(icon) {
|
||||
font-size: $--alert-icon-size;
|
||||
width: $--alert-icon-size;
|
||||
@include when(big) {
|
||||
font-size: $--alert-icon-large-size;
|
||||
width: $--alert-icon-large-size;
|
||||
}
|
||||
}
|
||||
|
||||
@include e(title) {
|
||||
font-size: $--alert-title-font-size;
|
||||
line-height: 18px;
|
||||
@include when(bold) {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
& .#{$namespace}-alert__description {
|
||||
font-size: $--alert-description-font-size;
|
||||
margin: 5px 0 0 0;
|
||||
}
|
||||
|
||||
@include e(closebtn) {
|
||||
font-size: $--alert-close-font-size;
|
||||
opacity: 1;
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 15px;
|
||||
cursor: pointer;
|
||||
|
||||
@include when(customed) {
|
||||
font-style: normal;
|
||||
font-size: $--alert-close-customed-font-size;
|
||||
top: 9px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{$namespace}-alert-fade-enter-from,
|
||||
.#{$namespace}-alert-fade-leave-active {
|
||||
opacity: 0;
|
||||
}
|
||||
7
src/assets/css/themes/src/aside.scss
Normal file
7
src/assets/css/themes/src/aside.scss
Normal file
@@ -0,0 +1,7 @@
|
||||
@import "mixins/mixins";
|
||||
|
||||
@include b(aside) {
|
||||
overflow: auto;
|
||||
box-sizing: border-box;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
85
src/assets/css/themes/src/autocomplete.scss
Normal file
85
src/assets/css/themes/src/autocomplete.scss
Normal file
@@ -0,0 +1,85 @@
|
||||
@import "mixins/mixins";
|
||||
@import "mixins/utils";
|
||||
@import "common/var";
|
||||
@import "./input.scss";
|
||||
@import "./scrollbar.scss";
|
||||
@import "./popper";
|
||||
|
||||
@include b(autocomplete) {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
@include e(popper) {
|
||||
@include picker-popper(
|
||||
$--color-white,
|
||||
1px solid $--border-color-light,
|
||||
$--box-shadow-light,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@include b(autocomplete-suggestion) {
|
||||
border-radius: $--border-radius-base;
|
||||
box-sizing: border-box;
|
||||
|
||||
@include e(wrap) {
|
||||
max-height: 280px;
|
||||
padding: 10px 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@include e(list) {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
& li {
|
||||
padding: 0 20px;
|
||||
margin: 0;
|
||||
line-height: 34px;
|
||||
cursor: pointer;
|
||||
color: $--color-text-regular;
|
||||
font-size: $--font-size-base;
|
||||
list-style: none;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
&:hover {
|
||||
background-color: $--select-option-hover-background;
|
||||
}
|
||||
|
||||
&.highlighted {
|
||||
background-color: $--select-option-hover-background;
|
||||
}
|
||||
|
||||
&.divider {
|
||||
margin-top: 6px;
|
||||
border-top: 1px solid $--color-black;
|
||||
}
|
||||
|
||||
&.divider:last-child {
|
||||
margin-bottom: -6px;
|
||||
}
|
||||
}
|
||||
|
||||
@include when(loading) {
|
||||
li {
|
||||
text-align: center;
|
||||
height: 100px;
|
||||
line-height: 100px;
|
||||
font-size: 20px;
|
||||
color: #999;
|
||||
@include utils-vertical-center;
|
||||
|
||||
&:hover {
|
||||
background-color: $--color-white;
|
||||
}
|
||||
}
|
||||
|
||||
& .#{$namespace}-icon-loading {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
51
src/assets/css/themes/src/avatar.scss
Normal file
51
src/assets/css/themes/src/avatar.scss
Normal file
@@ -0,0 +1,51 @@
|
||||
@import "mixins/mixins";
|
||||
@import "common/var";
|
||||
|
||||
@include b(avatar) {
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
color: $--avatar-font-color;
|
||||
background: $--avatar-background-color;
|
||||
width: $--avatar-large-size;
|
||||
height: $--avatar-large-size;
|
||||
line-height: $--avatar-large-size;
|
||||
font-size: $--avatar-text-font-size;
|
||||
|
||||
>img {
|
||||
display: block;
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
@include m(circle) {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
@include m(square) {
|
||||
border-radius: $--avatar-border-radius;
|
||||
}
|
||||
|
||||
@include m(icon) {
|
||||
font-size: $--avatar-icon-font-size;
|
||||
}
|
||||
|
||||
@include m(large) {
|
||||
width: $--avatar-large-size;
|
||||
height: $--avatar-large-size;
|
||||
line-height: $--avatar-large-size;
|
||||
}
|
||||
|
||||
@include m(medium) {
|
||||
width: $--avatar-medium-size;
|
||||
height: $--avatar-medium-size;
|
||||
line-height: $--avatar-medium-size;
|
||||
}
|
||||
|
||||
@include m(small) {
|
||||
width: $--avatar-small-size;
|
||||
height: $--avatar-small-size;
|
||||
line-height: $--avatar-small-size;
|
||||
}
|
||||
}
|
||||
22
src/assets/css/themes/src/backtop.scss
Normal file
22
src/assets/css/themes/src/backtop.scss
Normal file
@@ -0,0 +1,22 @@
|
||||
@import "mixins/mixins";
|
||||
@import "common/var";
|
||||
|
||||
@include b(backtop) {
|
||||
position: fixed;
|
||||
background-color: $--backtop-background-color;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
color: $--backtop-font-color;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 20px;
|
||||
box-shadow: 0 0 6px rgba(0,0,0, .12);
|
||||
cursor: pointer;
|
||||
z-index: 5;
|
||||
|
||||
&:hover {
|
||||
background-color: $--backtop-hover-background-color
|
||||
}
|
||||
}
|
||||
57
src/assets/css/themes/src/badge.scss
Normal file
57
src/assets/css/themes/src/badge.scss
Normal file
@@ -0,0 +1,57 @@
|
||||
@import "mixins/mixins";
|
||||
@import "common/var";
|
||||
|
||||
@include b(badge) {
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
|
||||
@include e(content) {
|
||||
background-color: $--badge-background-color;
|
||||
border-radius: $--badge-radius;
|
||||
color: $--color-white;
|
||||
display: inline-block;
|
||||
font-size: $--badge-font-size;
|
||||
height: $--badge-size;
|
||||
line-height: $--badge-size;
|
||||
padding: 0 $--badge-padding;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
border: 1px solid $--color-white;
|
||||
|
||||
@include when(fixed) {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: #{1 + $--badge-size / 2};
|
||||
transform: translateY(-50%) translateX(100%);
|
||||
|
||||
@include when(dot) {
|
||||
right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@include when(dot) {
|
||||
height: 8px;
|
||||
width: 8px;
|
||||
padding: 0;
|
||||
right: 0;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
@each $type in (primary, success, warning, info, danger) {
|
||||
@include m($type) {
|
||||
@if $type == primary {
|
||||
background-color: $--color-primary;
|
||||
} @else if $type == success {
|
||||
background-color: $--color-success;
|
||||
} @else if $type == warning {
|
||||
background-color: $--color-warning;
|
||||
} @else if $type == info {
|
||||
background-color: $--color-info;
|
||||
} @else {
|
||||
background-color: $--color-danger;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
2
src/assets/css/themes/src/base.scss
Normal file
2
src/assets/css/themes/src/base.scss
Normal file
@@ -0,0 +1,2 @@
|
||||
@import "common/transition.scss";
|
||||
@import "icon.scss";
|
||||
0
src/assets/css/themes/src/breadcrumb-item.scss
Normal file
0
src/assets/css/themes/src/breadcrumb-item.scss
Normal file
55
src/assets/css/themes/src/breadcrumb.scss
Normal file
55
src/assets/css/themes/src/breadcrumb.scss
Normal file
@@ -0,0 +1,55 @@
|
||||
@import "mixins/mixins";
|
||||
@import "mixins/utils";
|
||||
@import "common/var";
|
||||
|
||||
@include b(breadcrumb) {
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
@include utils-clearfix;
|
||||
|
||||
@include e(separator) {
|
||||
margin: 0 9px;
|
||||
font-weight: bold;
|
||||
color: $--color-text-placeholder;
|
||||
|
||||
&[class*=icon] {
|
||||
margin: 0 6px;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
@include e(item) {
|
||||
float: left;
|
||||
|
||||
@include e(inner) {
|
||||
color: $--color-text-regular;
|
||||
|
||||
&.is-link, & a {
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
transition: $--color-transition-base;
|
||||
color: $--color-text-primary;
|
||||
|
||||
&:hover {
|
||||
color: $--color-primary;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
.#{$namespace}-breadcrumb__inner,
|
||||
.#{$namespace}-breadcrumb__inner a {
|
||||
&, &:hover {
|
||||
font-weight: normal;
|
||||
color: $--color-text-regular;
|
||||
cursor: text;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$namespace}-breadcrumb__separator {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
0
src/assets/css/themes/src/button-group.scss
Normal file
0
src/assets/css/themes/src/button-group.scss
Normal file
264
src/assets/css/themes/src/button.scss
Normal file
264
src/assets/css/themes/src/button.scss
Normal file
@@ -0,0 +1,264 @@
|
||||
@charset "UTF-8";
|
||||
@import "common/var";
|
||||
@import "mixins/button";
|
||||
@import "mixins/mixins";
|
||||
@import "mixins/utils";
|
||||
|
||||
@include b(button) {
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
min-height: $--input-height;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
background: $--button-default-background-color;
|
||||
border: $--border-base;
|
||||
border-color: $--button-default-border-color;
|
||||
color: $--button-default-font-color;
|
||||
-webkit-appearance: none;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
outline: none;
|
||||
margin: 0;
|
||||
transition: .1s;
|
||||
font-weight: $--button-font-weight;
|
||||
@include utils-user-select(none);
|
||||
& + & {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
@include button-size($--button-padding-vertical, $--button-padding-horizontal, $--button-font-size, $--button-border-radius);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $--color-primary;
|
||||
border-color: $--color-primary-light-7;
|
||||
background-color: $--color-primary-light-9;
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
|
||||
border-color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
& [class*="#{$namespace}-icon-"] {
|
||||
& + span {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@include when(plain) {
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: $--color-white;
|
||||
border-color: $--color-primary;
|
||||
color: $--color-primary;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: $--color-white;
|
||||
border-color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
|
||||
color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include when(active) {
|
||||
color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
|
||||
border-color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
|
||||
}
|
||||
|
||||
@include when(disabled) {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $--button-disabled-font-color;
|
||||
cursor: not-allowed;
|
||||
background-image: none;
|
||||
background-color: $--button-disabled-background-color;
|
||||
border-color: $--button-disabled-border-color;
|
||||
}
|
||||
|
||||
&.#{$namespace}-button--text {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&.is-plain {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: $--color-white;
|
||||
border-color: $--button-disabled-border-color;
|
||||
color: $--button-disabled-font-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include when(loading) {
|
||||
position: relative;
|
||||
pointer-events: none;
|
||||
|
||||
&:before {
|
||||
pointer-events: none;
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -1px;
|
||||
top: -1px;
|
||||
right: -1px;
|
||||
bottom: -1px;
|
||||
border-radius: inherit;
|
||||
background-color: rgba(255,255,255,.35);
|
||||
}
|
||||
}
|
||||
@include when(round) {
|
||||
border-radius: 20px;
|
||||
padding: 12px 23px;
|
||||
}
|
||||
@include when(circle) {
|
||||
border-radius: 50%;
|
||||
padding: $--button-padding-vertical;
|
||||
}
|
||||
@include m(primary) {
|
||||
@include button-variant($--button-primary-font-color, $--button-primary-background-color, $--button-primary-border-color);
|
||||
}
|
||||
@include m(success) {
|
||||
@include button-variant($--button-success-font-color, $--button-success-background-color, $--button-success-border-color);
|
||||
}
|
||||
@include m(warning) {
|
||||
@include button-variant($--button-warning-font-color, $--button-warning-background-color, $--button-warning-border-color);
|
||||
}
|
||||
@include m(danger) {
|
||||
@include button-variant($--button-danger-font-color, $--button-danger-background-color, $--button-danger-border-color);
|
||||
}
|
||||
@include m(info) {
|
||||
@include button-variant($--button-info-font-color, $--button-info-background-color, $--button-info-border-color);
|
||||
}
|
||||
@include m(medium) {
|
||||
min-height: $--input-medium-height;
|
||||
|
||||
@include button-size($--button-medium-padding-vertical, $--button-medium-padding-horizontal, $--button-medium-font-size, $--button-medium-border-radius);
|
||||
@include when(circle) {
|
||||
padding: $--button-medium-padding-vertical;
|
||||
}
|
||||
}
|
||||
@include m(small) {
|
||||
min-height: $--input-small-height;
|
||||
|
||||
@include button-size($--button-small-padding-vertical, $--button-small-padding-horizontal, $--button-small-font-size, $--button-small-border-radius);
|
||||
@include when(circle) {
|
||||
padding: $--button-small-padding-vertical;
|
||||
}
|
||||
}
|
||||
@include m(mini) {
|
||||
min-height: $--input-mini-height;
|
||||
|
||||
@include button-size($--button-mini-padding-vertical, $--button-mini-padding-horizontal, $--button-mini-font-size, $--button-mini-border-radius);
|
||||
@include when(circle) {
|
||||
padding: $--button-mini-padding-vertical;
|
||||
}
|
||||
}
|
||||
@include m(text) {
|
||||
border-color: transparent;
|
||||
color: $--color-primary;
|
||||
background: transparent;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: mix($--color-white, $--color-primary, $--button-hover-tint-percent);
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
}
|
||||
&:active {
|
||||
color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&.is-disabled,
|
||||
&.is-disabled:hover,
|
||||
&.is-disabled:focus {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include b(button-group) {
|
||||
@include utils-clearfix;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
|
||||
& > .#{$namespace}-button {
|
||||
float: left;
|
||||
position: relative;
|
||||
& + .#{$namespace}-button {
|
||||
margin-left: 0;
|
||||
}
|
||||
&:first-child {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
&:last-child {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
&:first-child:last-child {
|
||||
border-top-right-radius: $--button-border-radius;
|
||||
border-bottom-right-radius: $--button-border-radius;
|
||||
border-top-left-radius: $--button-border-radius;
|
||||
border-bottom-left-radius: $--button-border-radius;
|
||||
|
||||
&.is-round {
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
&.is-circle {
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
&:not(:first-child):not(:last-child) {
|
||||
border-radius: 0;
|
||||
}
|
||||
&:not(:last-child) {
|
||||
margin-right: -1px;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@include when(active) {
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
& > .#{$namespace}-dropdown {
|
||||
& > .#{$namespace}-button {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border-left-color: rgba($--color-white, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
@each $type in (primary, success, warning, danger, info) {
|
||||
.#{$namespace}-button--#{$type} {
|
||||
&:first-child {
|
||||
border-right-color: rgba($--color-white, 0.5);
|
||||
}
|
||||
&:last-child {
|
||||
border-left-color: rgba($--color-white, 0.5);
|
||||
}
|
||||
&:not(:first-child):not(:last-child) {
|
||||
border-left-color: rgba($--color-white, 0.5);
|
||||
border-right-color: rgba($--color-white, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
79
src/assets/css/themes/src/calendar.scss
Normal file
79
src/assets/css/themes/src/calendar.scss
Normal file
@@ -0,0 +1,79 @@
|
||||
@import "mixins/mixins";
|
||||
@import "common/var";
|
||||
@import "button";
|
||||
@import "button-group";
|
||||
|
||||
@include b(calendar) {
|
||||
background-color:#fff;
|
||||
|
||||
@include e(header) {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 12px 20px;
|
||||
border-bottom: $--table-border;
|
||||
}
|
||||
|
||||
@include e(title) {
|
||||
color: #000000;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
@include e(body) {
|
||||
padding: 12px 20px 35px;
|
||||
}
|
||||
}
|
||||
|
||||
@include b(calendar-table) {
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
|
||||
thead th {
|
||||
padding: 12px 0;
|
||||
color: $--color-text-regular;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
&:not(.is-range) {
|
||||
td.prev,
|
||||
td.next {
|
||||
color: $--color-text-placeholder;
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
border-bottom: $--calendar-border;
|
||||
border-right: $--calendar-border;
|
||||
vertical-align: top;
|
||||
transition: background-color 0.2s ease;
|
||||
|
||||
@include when(selected) {
|
||||
background-color: $--calendar-selected-background-color;
|
||||
}
|
||||
|
||||
@include when(today) {
|
||||
color: $--color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
tr:first-child td {
|
||||
border-top: $--calendar-border;
|
||||
}
|
||||
|
||||
tr td:first-child {
|
||||
border-left: $--calendar-border;
|
||||
}
|
||||
|
||||
tr.#{$namespace}-calendar-table__row--hide-border td {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
@include b(calendar-day) {
|
||||
box-sizing: border-box;
|
||||
padding: 8px;
|
||||
height: $--calendar-cell-width;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
background-color: $--calendar-selected-background-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
32
src/assets/css/themes/src/card.scss
Normal file
32
src/assets/css/themes/src/card.scss
Normal file
@@ -0,0 +1,32 @@
|
||||
@import "mixins/mixins";
|
||||
@import "common/var";
|
||||
|
||||
@include b(card) {
|
||||
border-radius: $--card-border-radius;
|
||||
border: 1px solid $--card-border-color;
|
||||
background-color: $--color-white;
|
||||
overflow: hidden;
|
||||
color: $--color-text-primary;
|
||||
transition: 0.3s;
|
||||
|
||||
@include when(always-shadow) {
|
||||
box-shadow: $--box-shadow-light;
|
||||
}
|
||||
|
||||
@include when(hover-shadow) {
|
||||
&:hover,
|
||||
&:focus {
|
||||
box-shadow: $--box-shadow-light;
|
||||
}
|
||||
}
|
||||
|
||||
@include e(header) {
|
||||
padding: #{$--card-padding - 2 $--card-padding};
|
||||
border-bottom: 1px solid $--card-border-color;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@include e(body) {
|
||||
padding: $--card-padding;
|
||||
}
|
||||
}
|
||||
50
src/assets/css/themes/src/carousel-item.scss
Normal file
50
src/assets/css/themes/src/carousel-item.scss
Normal file
@@ -0,0 +1,50 @@
|
||||
@import "mixins/mixins";
|
||||
@import "common/var";
|
||||
|
||||
@include b(carousel) {
|
||||
@include e(item) {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
z-index: #{$--index-normal - 1};
|
||||
|
||||
@include when(active) {
|
||||
z-index: #{$--index-normal + 1};
|
||||
}
|
||||
|
||||
@include when(animating) {
|
||||
transition: transform .4s ease-in-out;
|
||||
}
|
||||
|
||||
@include m(card) {
|
||||
width: 50%;
|
||||
transition: transform .4s ease-in-out;
|
||||
&.is-in-stage {
|
||||
cursor: pointer;
|
||||
z-index: $--index-normal;
|
||||
&:hover .#{$namespace}-carousel__mask,
|
||||
&.is-hover .#{$namespace}-carousel__mask {
|
||||
opacity: 0.12;
|
||||
}
|
||||
}
|
||||
&.is-active {
|
||||
z-index: #{$--index-normal + 1};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include e(mask) {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: $--color-white;
|
||||
opacity: 0.24;
|
||||
transition: .2s;
|
||||
}
|
||||
}
|
||||
161
src/assets/css/themes/src/carousel.scss
Normal file
161
src/assets/css/themes/src/carousel.scss
Normal file
@@ -0,0 +1,161 @@
|
||||
@import "mixins/mixins";
|
||||
@import "common/var";
|
||||
|
||||
@include b(carousel) {
|
||||
position: relative;
|
||||
|
||||
@include m(horizontal) {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
@include m(vertical) {
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
@include e(container) {
|
||||
position: relative;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
@include e(arrow) {
|
||||
border: none;
|
||||
outline: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
height: $--carousel-arrow-size;
|
||||
width: $--carousel-arrow-size;
|
||||
cursor: pointer;
|
||||
transition: .3s;
|
||||
border-radius: 50%;
|
||||
background-color: $--carousel-arrow-background;
|
||||
color: $--color-white;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
z-index: 10;
|
||||
transform: translateY(-50%);
|
||||
text-align: center;
|
||||
font-size: $--carousel-arrow-font-size;
|
||||
|
||||
@include m(left) {
|
||||
left: 16px;
|
||||
}
|
||||
|
||||
@include m(right) {
|
||||
right: 16px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $--carousel-arrow-hover-background;
|
||||
}
|
||||
|
||||
& i {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
@include e(indicators) {
|
||||
position: absolute;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
z-index: #{$--index-normal + 1};
|
||||
|
||||
@include m(horizontal) {
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
@include m(vertical) {
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
@include m(outside) {
|
||||
bottom: #{$--carousel-indicator-height + $--carousel-indicator-padding-vertical * 2};
|
||||
text-align: center;
|
||||
position: static;
|
||||
transform: none;
|
||||
.#{$namespace}-carousel__indicator:hover button {
|
||||
opacity: 0.64;
|
||||
}
|
||||
button {
|
||||
background-color: $--carousel-indicator-out-color;
|
||||
opacity: 0.24;
|
||||
}
|
||||
}
|
||||
|
||||
@include m(labels) {
|
||||
left: 0;
|
||||
right: 0;
|
||||
transform: none;
|
||||
text-align: center;
|
||||
|
||||
.#{$namespace}-carousel__button {
|
||||
height: auto;
|
||||
width: auto;
|
||||
padding: 2px 18px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.#{$namespace}-carousel__indicator {
|
||||
padding: 6px 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include e(indicator) {
|
||||
background-color: transparent;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover button {
|
||||
opacity: 0.72;
|
||||
}
|
||||
|
||||
@include m(horizontal) {
|
||||
display: inline-block;
|
||||
padding: $--carousel-indicator-padding-vertical $--carousel-indicator-padding-horizontal;
|
||||
}
|
||||
|
||||
@include m(vertical) {
|
||||
padding: $--carousel-indicator-padding-horizontal $--carousel-indicator-padding-vertical;
|
||||
.#{$namespace}-carousel__button {
|
||||
width: $--carousel-indicator-height;
|
||||
height: #{$--carousel-indicator-width / 2};
|
||||
}
|
||||
}
|
||||
|
||||
@include when(active) {
|
||||
button {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include e(button) {
|
||||
display: block;
|
||||
opacity: 0.48;
|
||||
width: $--carousel-indicator-width;
|
||||
height: $--carousel-indicator-height;
|
||||
background-color: $--color-white;
|
||||
border: none;
|
||||
outline: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
transition: .3s;
|
||||
}
|
||||
}
|
||||
|
||||
.carousel-arrow-left-enter-from,
|
||||
.carousel-arrow-left-leave-active {
|
||||
transform: translateY(-50%) translateX(-10px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.carousel-arrow-right-enter-from,
|
||||
.carousel-arrow-right-leave-active {
|
||||
transform: translateY(-50%) translateX(10px);
|
||||
opacity: 0;
|
||||
}
|
||||
121
src/assets/css/themes/src/cascader-panel.scss
Normal file
121
src/assets/css/themes/src/cascader-panel.scss
Normal file
@@ -0,0 +1,121 @@
|
||||
@import "mixins/mixins";
|
||||
@import "common/var";
|
||||
@import "./checkbox";
|
||||
@import "./radio";
|
||||
@import "./scrollbar";
|
||||
|
||||
@include b(cascader-panel) {
|
||||
display: flex;
|
||||
border-radius: $--cascader-menu-radius;
|
||||
font-size: $--cascader-menu-font-size;
|
||||
|
||||
@include when(bordered) {
|
||||
border: $--cascader-menu-border;
|
||||
border-radius: $--cascader-menu-radius;
|
||||
}
|
||||
}
|
||||
|
||||
@include b(cascader-menu) {
|
||||
min-width: 180px;
|
||||
box-sizing: border-box;
|
||||
color: $--cascader-menu-font-color;
|
||||
border-right: $--cascader-menu-border;
|
||||
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
.#{$namespace}-cascader-node {
|
||||
padding-right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@include e(wrap) {
|
||||
height: 204px;
|
||||
}
|
||||
|
||||
@include e(list) {
|
||||
position: relative;
|
||||
min-height: 100%;
|
||||
margin: 0;
|
||||
padding: 6px 0;
|
||||
list-style: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@include e(hover-zone) {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@include e(empty-text) {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
text-align: center;
|
||||
color: $--cascader-color-empty;
|
||||
}
|
||||
}
|
||||
|
||||
@include b(cascader-node) {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 30px 0 20px;
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
outline: none;
|
||||
|
||||
&.is-selectable.in-active-path {
|
||||
color: $--cascader-menu-font-color;
|
||||
}
|
||||
|
||||
&.in-active-path,
|
||||
&.is-selectable.in-checked-path,
|
||||
&.is-active {
|
||||
color: $--cascader-menu-selected-font-color;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&:not(.is-disabled) {
|
||||
cursor: pointer;
|
||||
&:hover, &:focus {
|
||||
background: $--cascader-node-background-hover;
|
||||
}
|
||||
}
|
||||
|
||||
@include when(disabled) {
|
||||
color: $--cascader-node-color-disabled;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
@include e(prefix) {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
@include e(postfix) {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
@include e(label) {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
padding: 0 10px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
> .#{$namespace}-radio {
|
||||
margin-right: 0;
|
||||
|
||||
.#{$namespace}-radio__label {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
185
src/assets/css/themes/src/cascader.scss
Normal file
185
src/assets/css/themes/src/cascader.scss
Normal file
@@ -0,0 +1,185 @@
|
||||
@import "mixins/mixins";
|
||||
@import "common/var";
|
||||
@import "./input";
|
||||
@import "./popper";
|
||||
@import "./tag";
|
||||
@import "./cascader-panel";
|
||||
|
||||
@include b(cascader) {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
font-size: $--font-size-base;
|
||||
line-height: $--input-height;
|
||||
outline: none;
|
||||
|
||||
&:not(.is-disabled):hover {
|
||||
.#{$namespace}-input__inner {
|
||||
cursor: pointer;
|
||||
border-color: $--input-hover-border;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$namespace}-input {
|
||||
cursor: pointer;
|
||||
|
||||
.#{$namespace}-input__inner {
|
||||
text-overflow: ellipsis;
|
||||
|
||||
&:focus {
|
||||
border-color: $--input-focus-border;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$namespace}-icon-arrow-down {
|
||||
transition: transform .3s;
|
||||
font-size: 14px;
|
||||
|
||||
@include when(reverse) {
|
||||
transform: rotateZ(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
.#{$namespace}-icon-circle-close:hover {
|
||||
color: $--input-clear-hover-color;
|
||||
}
|
||||
|
||||
@include when(focus) {
|
||||
.#{$namespace}-input__inner {
|
||||
border-color: $--input-focus-border;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include m(medium) {
|
||||
font-size: $--input-medium-font-size;
|
||||
line-height: $--input-medium-height;
|
||||
}
|
||||
|
||||
@include m(small) {
|
||||
font-size: $--input-small-font-size;
|
||||
line-height: $--input-small-height;
|
||||
}
|
||||
|
||||
@include m(mini) {
|
||||
font-size: $--input-mini-font-size;
|
||||
line-height: $--input-mini-height;
|
||||
}
|
||||
|
||||
@include when(disabled) {
|
||||
.#{$namespace}-cascader__label {
|
||||
z-index: #{$--index-normal + 1};
|
||||
color: $--disabled-color-base;
|
||||
}
|
||||
}
|
||||
|
||||
@include e(dropdown) {
|
||||
font-size: $--cascader-menu-font-size;
|
||||
border-radius: $--cascader-menu-radius;
|
||||
|
||||
@include picker-popper(
|
||||
$--cascader-menu-fill,
|
||||
$--cascader-menu-border,
|
||||
$--cascader-menu-shadow,
|
||||
);
|
||||
}
|
||||
|
||||
@include e(tags) {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 30px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
line-height: normal;
|
||||
text-align: left;
|
||||
box-sizing: border-box;
|
||||
|
||||
.#{$namespace}-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
max-width: 100%;
|
||||
margin: 2px 0 2px 6px;
|
||||
text-overflow: ellipsis;
|
||||
background: $--cascader-tag-background;
|
||||
|
||||
&:not(.is-hit) {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
> span {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.#{$namespace}-icon-close {
|
||||
flex: none;
|
||||
background-color: $--color-text-placeholder;
|
||||
color: $--color-white;
|
||||
|
||||
&:hover {
|
||||
background-color: $--color-text-secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include e(suggestion-panel) {
|
||||
border-radius: $--cascader-menu-radius;
|
||||
}
|
||||
|
||||
@include e(suggestion-list) {
|
||||
max-height: 204px;
|
||||
margin: 0;
|
||||
padding: 6px 0;
|
||||
font-size: $--font-size-base;
|
||||
color: $--cascader-menu-font-color;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@include e(suggestion-item) {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 34px;
|
||||
padding: 0 15px;
|
||||
text-align: left;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover, &:focus {
|
||||
background: $--cascader-node-background-hover;
|
||||
}
|
||||
|
||||
&.is-checked {
|
||||
color: $--cascader-menu-selected-font-color;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
> span {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@include e(empty-text) {
|
||||
margin: 10px 0;
|
||||
color: $--cascader-color-empty;
|
||||
}
|
||||
|
||||
@include e(search-input) {
|
||||
flex: 1;
|
||||
height: 24px;
|
||||
min-width: 60px;
|
||||
margin: 2px 0 2px 15px;
|
||||
padding: 0;
|
||||
color: $--cascader-menu-font-color;
|
||||
border: none;
|
||||
outline: none;
|
||||
box-sizing: border-box;
|
||||
|
||||
&::placeholder {
|
||||
color: $--color-text-placeholder;
|
||||
}
|
||||
}
|
||||
}
|
||||
26
src/assets/css/themes/src/check-tag.scss
Normal file
26
src/assets/css/themes/src/check-tag.scss
Normal file
@@ -0,0 +1,26 @@
|
||||
@import "mixins/mixins";
|
||||
@import "common/var";
|
||||
|
||||
@include b(check-tag) {
|
||||
background-color: $--background-color-base;
|
||||
border-radius: $--border-radius-base;
|
||||
color: $--color-info;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
font-size: $--font-size-base;
|
||||
line-height: $--font-size-base;
|
||||
padding: 7px 15px;
|
||||
transition: $--all-transition;
|
||||
font-weight: bold;
|
||||
&:hover {
|
||||
background-color: rgb(220, 223, 230);
|
||||
}
|
||||
|
||||
@include when(checked) {
|
||||
background-color: #DEEDFC;
|
||||
color: $--color-primary-light-1;
|
||||
&:hover {
|
||||
background-color: $--color-primary-light-7;
|
||||
}
|
||||
}
|
||||
}
|
||||
0
src/assets/css/themes/src/checkbox-button.scss
Normal file
0
src/assets/css/themes/src/checkbox-button.scss
Normal file
0
src/assets/css/themes/src/checkbox-group.scss
Normal file
0
src/assets/css/themes/src/checkbox-group.scss
Normal file
359
src/assets/css/themes/src/checkbox.scss
Normal file
359
src/assets/css/themes/src/checkbox.scss
Normal file
@@ -0,0 +1,359 @@
|
||||
@import "common/var";
|
||||
@import "mixins/mixins";
|
||||
@import "mixins/_button";
|
||||
@import "mixins/utils";
|
||||
|
||||
@include b(checkbox) {
|
||||
color: $--checkbox-font-color;
|
||||
font-weight: $--checkbox-font-weight;
|
||||
font-size: $--font-size-base;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
user-select: none;
|
||||
margin-right: 30px;
|
||||
|
||||
@include when(bordered) {
|
||||
padding: $--checkbox-bordered-padding;
|
||||
border-radius: $--border-radius-base;
|
||||
border: $--border-base;
|
||||
box-sizing: border-box;
|
||||
line-height: normal;
|
||||
height: $--checkbox-bordered-height;
|
||||
|
||||
&.is-checked {
|
||||
border-color: $--color-primary;
|
||||
}
|
||||
|
||||
&.is-disabled {
|
||||
border-color: $--border-color-lighter;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
& + .#{$namespace}-checkbox.is-bordered {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
&.#{$namespace}-checkbox--medium {
|
||||
padding: $--checkbox-bordered-medium-padding;
|
||||
border-radius: $--button-medium-border-radius;
|
||||
height: $--checkbox-bordered-medium-height;
|
||||
|
||||
.#{$namespace}-checkbox__label {
|
||||
line-height: 17px;
|
||||
font-size: $--button-medium-font-size;
|
||||
}
|
||||
|
||||
.#{$namespace}-checkbox__inner {
|
||||
height: $--checkbox-bordered-medium-input-height;
|
||||
width: $--checkbox-bordered-medium-input-width;
|
||||
}
|
||||
}
|
||||
|
||||
&.#{$namespace}-checkbox--small {
|
||||
padding: $--checkbox-bordered-small-padding;
|
||||
border-radius: $--button-small-border-radius;
|
||||
height: $--checkbox-bordered-small-height;
|
||||
|
||||
.#{$namespace}-checkbox__label {
|
||||
line-height: 15px;
|
||||
font-size: $--button-small-font-size;
|
||||
}
|
||||
|
||||
.#{$namespace}-checkbox__inner {
|
||||
height: $--checkbox-bordered-small-input-height;
|
||||
width: $--checkbox-bordered-small-input-width;
|
||||
|
||||
&::after {
|
||||
height: 6px;
|
||||
width: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.#{$namespace}-checkbox--mini {
|
||||
padding: $--checkbox-bordered-mini-padding;
|
||||
border-radius: $--button-mini-border-radius;
|
||||
height: $--checkbox-bordered-mini-height;
|
||||
|
||||
.#{$namespace}-checkbox__label {
|
||||
line-height: 12px;
|
||||
font-size: $--button-mini-font-size;
|
||||
}
|
||||
|
||||
.#{$namespace}-checkbox__inner {
|
||||
height: $--checkbox-bordered-mini-input-height;
|
||||
width: $--checkbox-bordered-mini-input-width;
|
||||
&::after {
|
||||
height: 6px;
|
||||
width: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include e(input) {
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
|
||||
@include when(disabled) {
|
||||
.#{$namespace}-checkbox__inner {
|
||||
background-color: $--checkbox-disabled-input-fill;
|
||||
border-color: $--checkbox-disabled-border-color;
|
||||
cursor: not-allowed;
|
||||
|
||||
&::after {
|
||||
cursor: not-allowed;
|
||||
border-color: $--checkbox-disabled-icon-color;
|
||||
}
|
||||
|
||||
& + .#{$namespace}-checkbox__label {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-checked {
|
||||
.#{$namespace}-checkbox__inner {
|
||||
background-color: $--checkbox-disabled-checked-input-fill;
|
||||
border-color: $--checkbox-disabled-checked-input-border-color;
|
||||
|
||||
&::after {
|
||||
border-color: $--checkbox-disabled-checked-icon-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-indeterminate {
|
||||
.#{$namespace}-checkbox__inner {
|
||||
background-color: $--checkbox-disabled-checked-input-fill;
|
||||
border-color: $--checkbox-disabled-checked-input-border-color;
|
||||
|
||||
&::before {
|
||||
background-color: $--checkbox-disabled-checked-icon-color;
|
||||
border-color: $--checkbox-disabled-checked-icon-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& + span.#{$namespace}-checkbox__label {
|
||||
color: $--disabled-color-base;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
@include when(checked) {
|
||||
.#{$namespace}-checkbox__inner {
|
||||
background-color: $--checkbox-checked-background-color;
|
||||
border-color: $--checkbox-checked-input-border-color;
|
||||
|
||||
&::after {
|
||||
transform: rotate(45deg) scaleY(1);
|
||||
}
|
||||
}
|
||||
|
||||
& + .#{$namespace}-checkbox__label {
|
||||
color: $--checkbox-checked-font-color;
|
||||
}
|
||||
}
|
||||
@include when(focus) { /*focus时 视觉上区分*/
|
||||
.#{$namespace}-checkbox__inner {
|
||||
border-color: $--checkbox-input-border-color-hover;
|
||||
}
|
||||
}
|
||||
@include when(indeterminate) {
|
||||
.#{$namespace}-checkbox__inner {
|
||||
background-color: $--checkbox-checked-background-color;
|
||||
border-color: $--checkbox-checked-input-border-color;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
display: block;
|
||||
background-color: $--checkbox-checked-icon-color;
|
||||
height: 2px;
|
||||
transform: scale(0.5);
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@include e(inner) {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
border: $--checkbox-input-border;
|
||||
border-radius: $--checkbox-border-radius;
|
||||
box-sizing: border-box;
|
||||
width: $--checkbox-input-width;
|
||||
height: $--checkbox-input-height;
|
||||
background-color: $--checkbox-background-color;
|
||||
z-index: $--index-normal;
|
||||
transition: border-color .25s cubic-bezier(.71,-.46,.29,1.46),
|
||||
background-color .25s cubic-bezier(.71,-.46,.29,1.46);
|
||||
|
||||
&:hover {
|
||||
border-color: $--checkbox-input-border-color-hover;
|
||||
}
|
||||
|
||||
&::after {
|
||||
box-sizing: content-box;
|
||||
content: "";
|
||||
border: 1px solid $--checkbox-checked-icon-color;
|
||||
border-left: 0;
|
||||
border-top: 0;
|
||||
height: 7px;
|
||||
left: 4px;
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
transform: rotate(45deg) scaleY(0);
|
||||
width: 3px;
|
||||
transition: transform .15s ease-in .05s;
|
||||
transform-origin: center;
|
||||
}
|
||||
}
|
||||
|
||||
@include e(original) {
|
||||
opacity: 0;
|
||||
outline: none;
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
@include e(label) {
|
||||
display: inline-block;
|
||||
padding-left: 10px;
|
||||
line-height: 19px;
|
||||
font-size: $--checkbox-font-size;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@include b(checkbox-button) {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
@include e(inner) {
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
font-weight: $--checkbox-font-weight;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
background: $--button-default-background-color;
|
||||
border: $--border-base;
|
||||
border-left: 0;
|
||||
color: $--button-default-font-color;
|
||||
-webkit-appearance: none;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
outline: none;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
transition: $--all-transition;
|
||||
@include utils-user-select(none);
|
||||
|
||||
@include button-size($--button-padding-vertical, $--button-padding-horizontal, $--button-font-size, 0);
|
||||
|
||||
&:hover {
|
||||
color: $--color-primary;
|
||||
}
|
||||
|
||||
& [class*="#{$namespace}-icon-"] {
|
||||
line-height: 0.9;
|
||||
|
||||
& + span {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include e(original) {
|
||||
opacity: 0;
|
||||
outline: none;
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
&.is-checked {
|
||||
& .#{$namespace}-checkbox-button__inner {
|
||||
color: $--checkbox-button-checked-font-color;
|
||||
background-color: $--checkbox-button-checked-background-color;
|
||||
border-color: $--checkbox-button-checked-border-color;
|
||||
box-shadow: -1px 0 0 0 $--color-primary-light-4;
|
||||
}
|
||||
&:first-child .#{$namespace}-checkbox-button__inner {
|
||||
border-left-color: $--checkbox-button-checked-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-disabled {
|
||||
& .#{$namespace}-checkbox-button__inner {
|
||||
color: $--button-disabled-font-color;
|
||||
cursor: not-allowed;
|
||||
background-image: none;
|
||||
background-color: $--button-disabled-background-color;
|
||||
border-color: $--button-disabled-border-color;
|
||||
box-shadow: none;
|
||||
}
|
||||
&:first-child .#{$namespace}-checkbox-button__inner {
|
||||
border-left-color: $--button-disabled-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
.#{$namespace}-checkbox-button__inner {
|
||||
border-left: $--border-base;
|
||||
border-radius: $--border-radius-base 0 0 $--border-radius-base;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-focus {
|
||||
& .#{$namespace}-checkbox-button__inner {
|
||||
border-color: $--checkbox-button-checked-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
.#{$namespace}-checkbox-button__inner {
|
||||
border-radius: 0 $--border-radius-base $--border-radius-base 0;
|
||||
}
|
||||
}
|
||||
@include m(medium) {
|
||||
.#{$namespace}-checkbox-button__inner {
|
||||
@include button-size($--button-medium-padding-vertical, $--button-medium-padding-horizontal, $--button-medium-font-size, 0);
|
||||
}
|
||||
}
|
||||
@include m(small) {
|
||||
.#{$namespace}-checkbox-button__inner {
|
||||
@include button-size($--button-small-padding-vertical, $--button-small-padding-horizontal, $--button-small-font-size, 0);
|
||||
}
|
||||
}
|
||||
@include m(mini) {
|
||||
.#{$namespace}-checkbox-button__inner {
|
||||
@include button-size($--button-mini-padding-vertical, $--button-mini-padding-horizontal, $--button-mini-font-size, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include b(checkbox-group) {
|
||||
font-size: 0;
|
||||
}
|
||||
200
src/assets/css/themes/src/col.scss
Normal file
200
src/assets/css/themes/src/col.scss
Normal file
@@ -0,0 +1,200 @@
|
||||
@import './common/var.scss';
|
||||
@import './mixins/mixins.scss';
|
||||
|
||||
[class*='#{$namespace}-col-'] {
|
||||
float: left;
|
||||
box-sizing: border-box;
|
||||
@include when(guttered) {
|
||||
display: block;
|
||||
min-height: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$namespace}-col-0 {
|
||||
display: none;
|
||||
// to avoid introducing !important syntax, redundant css rule is required due to selector priority.
|
||||
@include when(guttered) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@for $i from 0 through 24 {
|
||||
.#{$namespace}-col-#{$i} {
|
||||
max-width: (1 / 24 * $i * 100) * 1%;
|
||||
flex: 0 0 (1 / 24 * $i * 100) * 1%;
|
||||
}
|
||||
|
||||
.#{$namespace}-col-offset-#{$i} {
|
||||
margin-left: (1 / 24 * $i * 100) * 1%;
|
||||
}
|
||||
|
||||
.#{$namespace}-col-pull-#{$i} {
|
||||
position: relative;
|
||||
right: (1 / 24 * $i * 100) * 1%;
|
||||
}
|
||||
|
||||
.#{$namespace}-col-push-#{$i} {
|
||||
position: relative;
|
||||
left: (1 / 24 * $i * 100) * 1%;
|
||||
}
|
||||
}
|
||||
|
||||
@include res(xs) {
|
||||
.#{$namespace}-col-xs-0 {
|
||||
display: none;
|
||||
@include when(guttered) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@for $i from 0 through 24 {
|
||||
.#{$namespace}-col-xs-#{$i} {
|
||||
@if $i != 0 {
|
||||
display: block;
|
||||
}
|
||||
max-width: (1 / 24 * $i * 100) * 1%;
|
||||
flex: 0 0 (1 / 24 * $i * 100) * 1%;
|
||||
}
|
||||
|
||||
.#{$namespace}-col-xs-offset-#{$i} {
|
||||
margin-left: (1 / 24 * $i * 100) * 1%;
|
||||
}
|
||||
|
||||
.#{$namespace}-col-xs-pull-#{$i} {
|
||||
position: relative;
|
||||
right: (1 / 24 * $i * 100) * 1%;
|
||||
}
|
||||
|
||||
.#{$namespace}-col-xs-push-#{$i} {
|
||||
position: relative;
|
||||
left: (1 / 24 * $i * 100) * 1%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include res(sm) {
|
||||
.#{$namespace}-col-sm-0 {
|
||||
display: none;
|
||||
@include when(guttered) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@for $i from 0 through 24 {
|
||||
.#{$namespace}-col-sm-#{$i} {
|
||||
@if $i != 0 {
|
||||
display: block;
|
||||
}
|
||||
max-width: (1 / 24 * $i * 100) * 1%;
|
||||
flex: 0 0 (1 / 24 * $i * 100) * 1%;
|
||||
}
|
||||
|
||||
.#{$namespace}-col-sm-offset-#{$i} {
|
||||
margin-left: (1 / 24 * $i * 100) * 1%;
|
||||
}
|
||||
|
||||
.#{$namespace}-col-sm-pull-#{$i} {
|
||||
position: relative;
|
||||
right: (1 / 24 * $i * 100) * 1%;
|
||||
}
|
||||
|
||||
.#{$namespace}-col-sm-push-#{$i} {
|
||||
position: relative;
|
||||
left: (1 / 24 * $i * 100) * 1%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include res(md) {
|
||||
.#{$namespace}-col-md-0 {
|
||||
display: none;
|
||||
@include when(guttered) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@for $i from 0 through 24 {
|
||||
.#{$namespace}-col-md-#{$i} {
|
||||
@if $i != 0 {
|
||||
display: block;
|
||||
}
|
||||
max-width: (1 / 24 * $i * 100) * 1%;
|
||||
flex: 0 0 (1 / 24 * $i * 100) * 1%;
|
||||
}
|
||||
|
||||
.#{$namespace}-col-md-offset-#{$i} {
|
||||
margin-left: (1 / 24 * $i * 100) * 1%;
|
||||
}
|
||||
|
||||
.#{$namespace}-col-md-pull-#{$i} {
|
||||
position: relative;
|
||||
right: (1 / 24 * $i * 100) * 1%;
|
||||
}
|
||||
|
||||
.#{$namespace}-col-md-push-#{$i} {
|
||||
position: relative;
|
||||
left: (1 / 24 * $i * 100) * 1%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include res(lg) {
|
||||
.#{$namespace}-col-lg-0 {
|
||||
display: none;
|
||||
@include when(guttered) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@for $i from 0 through 24 {
|
||||
.#{$namespace}-col-lg-#{$i} {
|
||||
@if $i != 0 {
|
||||
display: block;
|
||||
}
|
||||
max-width: (1 / 24 * $i * 100) * 1%;
|
||||
flex: 0 0 (1 / 24 * $i * 100) * 1%;
|
||||
}
|
||||
|
||||
.#{$namespace}-col-lg-offset-#{$i} {
|
||||
margin-left: (1 / 24 * $i * 100) * 1%;
|
||||
}
|
||||
|
||||
.#{$namespace}-col-lg-pull-#{$i} {
|
||||
position: relative;
|
||||
right: (1 / 24 * $i * 100) * 1%;
|
||||
}
|
||||
|
||||
.#{$namespace}-col-lg-push-#{$i} {
|
||||
position: relative;
|
||||
left: (1 / 24 * $i * 100) * 1%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include res(xl) {
|
||||
.#{$namespace}-col-xl-0 {
|
||||
display: none;
|
||||
@include when(guttered) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@for $i from 0 through 24 {
|
||||
.#{$namespace}-col-xl-#{$i} {
|
||||
@if $i != 0 {
|
||||
display: block;
|
||||
}
|
||||
max-width: (1 / 24 * $i * 100) * 1%;
|
||||
flex: 0 0 (1 / 24 * $i * 100) * 1%;
|
||||
}
|
||||
|
||||
.#{$namespace}-col-xl-offset-#{$i} {
|
||||
margin-left: (1 / 24 * $i * 100) * 1%;
|
||||
}
|
||||
|
||||
.#{$namespace}-col-xl-pull-#{$i} {
|
||||
position: relative;
|
||||
right: (1 / 24 * $i * 100) * 1%;
|
||||
}
|
||||
|
||||
.#{$namespace}-col-xl-push-#{$i} {
|
||||
position: relative;
|
||||
left: (1 / 24 * $i * 100) * 1%;
|
||||
}
|
||||
}
|
||||
}
|
||||
0
src/assets/css/themes/src/collapse-item.scss
Normal file
0
src/assets/css/themes/src/collapse-item.scss
Normal file
0
src/assets/css/themes/src/collapse-transition.scss
Normal file
0
src/assets/css/themes/src/collapse-transition.scss
Normal file
63
src/assets/css/themes/src/collapse.scss
Normal file
63
src/assets/css/themes/src/collapse.scss
Normal file
@@ -0,0 +1,63 @@
|
||||
@import "mixins/mixins";
|
||||
@import "common/var";
|
||||
@import "common/transition";
|
||||
|
||||
@include b(collapse) {
|
||||
border-top: 1px solid $--collapse-border-color;
|
||||
border-bottom: 1px solid $--collapse-border-color;
|
||||
}
|
||||
@include b(collapse-item) {
|
||||
@include when(disabled) {
|
||||
.#{$namespace}-collapse-item__header {
|
||||
color: $--font-color-disabled-base;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
@include e(header) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: $--collapse-header-height;
|
||||
line-height: $--collapse-header-height;
|
||||
background-color: $--collapse-header-background-color;
|
||||
color: $--collapse-header-font-color;
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid $--collapse-border-color;
|
||||
font-size: $--collapse-header-font-size;
|
||||
font-weight: 500;
|
||||
transition: border-bottom-color .3s;
|
||||
outline: none;
|
||||
@include e(arrow) {
|
||||
margin: 0 8px 0 auto;
|
||||
transition: transform .3s;
|
||||
font-weight: 300;
|
||||
@include when(active) {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
&.focusing:focus:not(:hover){
|
||||
color: $--color-primary;
|
||||
}
|
||||
@include when(active) {
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@include e(wrap) {
|
||||
will-change: height;
|
||||
background-color: $--collapse-content-background-color;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px solid $--collapse-border-color;
|
||||
}
|
||||
|
||||
@include e(content) {
|
||||
padding-bottom: 25px;
|
||||
font-size: $--collapse-content-font-size;
|
||||
color: $--collapse-content-font-color;
|
||||
line-height: 1.769230769230769;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
}
|
||||
387
src/assets/css/themes/src/color-picker.scss
Normal file
387
src/assets/css/themes/src/color-picker.scss
Normal file
@@ -0,0 +1,387 @@
|
||||
@import "mixins/mixins";
|
||||
@import "common/var";
|
||||
|
||||
@include b(color-predefine) {
|
||||
display: flex;
|
||||
font-size: 12px;
|
||||
margin-top: 8px;
|
||||
width: 280px;
|
||||
|
||||
@include e(colors) {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
@include e(color-selector) {
|
||||
margin: 0 0 8px 8px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
|
||||
&:nth-child(10n + 1) {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
box-shadow: 0 0 3px 2px $--color-primary;
|
||||
}
|
||||
|
||||
> div {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
@include when(alpha) {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include b(color-hue-slider) {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
width: 280px;
|
||||
height: 12px;
|
||||
background-color: #f00;
|
||||
padding: 0 2px;
|
||||
float: right;
|
||||
|
||||
@include e(bar) {
|
||||
position: relative;
|
||||
background: linear-gradient(
|
||||
to right, #f00 0%,
|
||||
#ff0 17%, #0f0 33%,
|
||||
#0ff 50%, #00f 67%,
|
||||
#f0f 83%, #f00 100%);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@include e(thumb) {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 4px;
|
||||
height: 100%;
|
||||
border-radius: 1px;
|
||||
background: #fff;
|
||||
border: 1px solid #f0f0f0;
|
||||
box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@include when(vertical) {
|
||||
width: 12px;
|
||||
height: 180px;
|
||||
padding: 2px 0;
|
||||
|
||||
.#{$namespace}-color-hue-slider__bar {
|
||||
background: linear-gradient(
|
||||
to bottom, #f00 0%,
|
||||
#ff0 17%, #0f0 33%,
|
||||
#0ff 50%, #00f 67%,
|
||||
#f0f 83%, #f00 100%);
|
||||
}
|
||||
|
||||
.#{$namespace}-color-hue-slider__thumb {
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include b(color-svpanel) {
|
||||
position: relative;
|
||||
width: 280px;
|
||||
height: 180px;
|
||||
|
||||
@include e(('white', 'black')) {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
@include e('white') {
|
||||
background: linear-gradient(to right, #fff, rgba(255,255,255,0));
|
||||
}
|
||||
|
||||
@include e('black') {
|
||||
background: linear-gradient(to top, #000, rgba(0,0,0,0));
|
||||
}
|
||||
|
||||
@include e(cursor) {
|
||||
position: absolute;
|
||||
|
||||
> div {
|
||||
cursor: head;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
box-shadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0,0,0,0.3), 0 0 1px 2px rgba(0,0,0,0.4);
|
||||
border-radius: 50%;
|
||||
transform: translate(-2px, -2px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include b(color-alpha-slider) {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
width: 280px;
|
||||
height: 12px;
|
||||
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
|
||||
|
||||
@include e(bar) {
|
||||
position: relative;
|
||||
background: linear-gradient(
|
||||
to right, rgba(255, 255, 255, 0) 0%,
|
||||
rgba(255, 255, 255, 1) 100%);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@include e(thumb) {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 4px;
|
||||
height: 100%;
|
||||
border-radius: 1px;
|
||||
background: #fff;
|
||||
border: 1px solid #f0f0f0;
|
||||
box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@include when(vertical) {
|
||||
width: 20px;
|
||||
height: 180px;
|
||||
|
||||
.#{$namespace}-color-alpha-slider__bar {
|
||||
background: linear-gradient(
|
||||
to bottom, rgba(255, 255, 255, 0) 0%,
|
||||
rgba(255, 255, 255, 1) 100%);
|
||||
}
|
||||
|
||||
.#{$namespace}-color-alpha-slider__thumb {
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include b(color-dropdown) {
|
||||
width: 300px;
|
||||
|
||||
@include e(main-wrapper) {
|
||||
margin-bottom: 6px;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
@include e(btns) {
|
||||
margin-top: 6px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@include e(value) {
|
||||
float: left;
|
||||
line-height: 26px;
|
||||
font-size: 12px;
|
||||
color: $--color-black;
|
||||
width: 160px;
|
||||
}
|
||||
|
||||
@include e(btn) {
|
||||
border: 1px solid #dcdcdc;
|
||||
color: #333;
|
||||
line-height: 24px;
|
||||
border-radius: 2px;
|
||||
padding: 0 20px;
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
outline: none;
|
||||
font-size: 12px;
|
||||
|
||||
&[disabled] {
|
||||
color: #cccccc;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
&:hover {
|
||||
color: $--color-primary;
|
||||
border-color: $--color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
@include e(link-btn) {
|
||||
cursor: pointer;
|
||||
color: $--color-primary;
|
||||
text-decoration: none;
|
||||
padding: 15px;
|
||||
font-size: 12px;
|
||||
&:hover {
|
||||
color: tint($--color-primary, $--button-hover-tint-percent);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include b(color-picker) {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
line-height: normal;
|
||||
height: 40px;
|
||||
|
||||
@include when(disabled) {
|
||||
.#{$namespace}-color-picker__trigger {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
@include m(medium) {
|
||||
height: 36px;
|
||||
|
||||
.#{$namespace}-color-picker__trigger {
|
||||
height: 36px;
|
||||
width: 36px;
|
||||
}
|
||||
|
||||
.#{$namespace}-color-picker__mask {
|
||||
height: 34px;
|
||||
width: 34px;
|
||||
}
|
||||
}
|
||||
|
||||
@include m(small) {
|
||||
height: 32px;
|
||||
|
||||
.#{$namespace}-color-picker__trigger {
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
.#{$namespace}-color-picker__mask {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
.#{$namespace}-color-picker__icon,
|
||||
.#{$namespace}-color-picker__empty {
|
||||
transform: translate3d(-50%, -50%, 0) scale(0.8);
|
||||
}
|
||||
}
|
||||
|
||||
@include m(mini) {
|
||||
height: 28px;
|
||||
|
||||
.#{$namespace}-color-picker__trigger {
|
||||
height: 28px;
|
||||
width: 28px;
|
||||
}
|
||||
|
||||
.#{$namespace}-color-picker__mask {
|
||||
height: 26px;
|
||||
width: 26px;
|
||||
}
|
||||
|
||||
.#{$namespace}-color-picker__icon,
|
||||
.#{$namespace}-color-picker__empty {
|
||||
transform: translate3d(-50%, -50%, 0) scale(0.8);
|
||||
}
|
||||
}
|
||||
|
||||
@include e(mask) {
|
||||
height: 38px;
|
||||
width: 38px;
|
||||
border-radius: 4px;
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: 1px;
|
||||
z-index: 1;
|
||||
cursor: not-allowed;
|
||||
background-color: rgba(255, 255, 255, .7);
|
||||
}
|
||||
|
||||
@include e(trigger) {
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 4px;
|
||||
border: 1px solid #e6e6e6;
|
||||
border-radius: 4px;
|
||||
font-size: 0;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@include e(color) {
|
||||
position: relative;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #999;
|
||||
border-radius: $--border-radius-small;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
|
||||
@include when(alpha) {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
|
||||
}
|
||||
}
|
||||
|
||||
@include e(color-inner) {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
@include e(empty) {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
}
|
||||
|
||||
@include e(icon) {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
color: $--color-white;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@include e(panel) {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
padding: 6px;
|
||||
box-sizing: content-box;
|
||||
background-color: $--color-white;
|
||||
border-radius: $--border-radius-base;
|
||||
box-shadow: $--dropdown-menu-box-shadow;
|
||||
&.#{$namespace}-popper{
|
||||
border: 1px solid $--border-color-lighter;
|
||||
}
|
||||
}
|
||||
}
|
||||
42
src/assets/css/themes/src/common/popup.scss
Normal file
42
src/assets/css/themes/src/common/popup.scss
Normal file
@@ -0,0 +1,42 @@
|
||||
@import "./var.scss";
|
||||
@import "../mixins/mixins";
|
||||
|
||||
.v-modal-enter {
|
||||
animation: v-modal-in .2s ease;
|
||||
}
|
||||
|
||||
.v-modal-leave {
|
||||
animation: v-modal-out .2s ease forwards;
|
||||
}
|
||||
|
||||
@keyframes v-modal-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes v-modal-out {
|
||||
0% {
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.v-modal {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: $--popup-modal-opacity;
|
||||
background: $--popup-modal-background-color;
|
||||
}
|
||||
|
||||
@include b(popup-parent) {
|
||||
@include m(hidden) {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
103
src/assets/css/themes/src/common/transition.scss
Normal file
103
src/assets/css/themes/src/common/transition.scss
Normal file
@@ -0,0 +1,103 @@
|
||||
@import '../mixins/config';
|
||||
@import "var";
|
||||
|
||||
.fade-in-linear-enter-active,
|
||||
.fade-in-linear-leave-active {
|
||||
transition: $--fade-linear-transition;
|
||||
}
|
||||
|
||||
.fade-in-linear-enter-from,
|
||||
.fade-in-linear-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.#{$namespace}-fade-in-linear-enter-active,
|
||||
.#{$namespace}-fade-in-linear-leave-active {
|
||||
transition: $--fade-linear-transition;
|
||||
}
|
||||
.#{$namespace}-fade-in-linear-enter-from,
|
||||
.#{$namespace}-fade-in-linear-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.#{$namespace}-fade-in-enter-active,
|
||||
.#{$namespace}-fade-in-leave-active {
|
||||
transition: all .3s cubic-bezier(.55,0,.1,1);
|
||||
}
|
||||
.#{$namespace}-fade-in-enter-from,
|
||||
.#{$namespace}-fade-in-leave-active {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.#{$namespace}-zoom-in-center-enter-active,
|
||||
.#{$namespace}-zoom-in-center-leave-active {
|
||||
transition: all .3s cubic-bezier(.55,0,.1,1);
|
||||
}
|
||||
.#{$namespace}-zoom-in-center-enter-from,
|
||||
.#{$namespace}-zoom-in-center-leave-active {
|
||||
opacity: 0;
|
||||
transform: scaleX(0);
|
||||
}
|
||||
|
||||
.#{$namespace}-zoom-in-top-enter-active,
|
||||
.#{$namespace}-zoom-in-top-leave-active {
|
||||
opacity: 1;
|
||||
transform: scaleY(1);
|
||||
transition: $--md-fade-transition;
|
||||
transform-origin: center top;
|
||||
|
||||
&[data-popper-placement^="top"] {
|
||||
transform-origin: center bottom;
|
||||
}
|
||||
}
|
||||
.#{$namespace}-zoom-in-top-enter-from,
|
||||
.#{$namespace}-zoom-in-top-leave-active {
|
||||
opacity: 0;
|
||||
transform: scaleY(0);
|
||||
}
|
||||
|
||||
.#{$namespace}-zoom-in-bottom-enter-active,
|
||||
.#{$namespace}-zoom-in-bottom-leave-active {
|
||||
opacity: 1;
|
||||
transform: scaleY(1);
|
||||
transition: $--md-fade-transition;
|
||||
transform-origin: center bottom;
|
||||
}
|
||||
.#{$namespace}-zoom-in-bottom-enter-from,
|
||||
.#{$namespace}-zoom-in-bottom-leave-active {
|
||||
opacity: 0;
|
||||
transform: scaleY(0);
|
||||
}
|
||||
|
||||
.#{$namespace}-zoom-in-left-enter-active,
|
||||
.#{$namespace}-zoom-in-left-leave-active {
|
||||
opacity: 1;
|
||||
transform: scale(1, 1);
|
||||
transition: $--md-fade-transition;
|
||||
transform-origin: top left;
|
||||
}
|
||||
.#{$namespace}-zoom-in-left-enter-from,
|
||||
.#{$namespace}-zoom-in-left-leave-active {
|
||||
opacity: 0;
|
||||
transform: scale(.45, .45);
|
||||
}
|
||||
|
||||
.collapse-transition {
|
||||
transition: 0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out;
|
||||
}
|
||||
.horizontal-collapse-transition {
|
||||
transition: 0.3s width ease-in-out, 0.3s padding-left ease-in-out, 0.3s padding-right ease-in-out;
|
||||
}
|
||||
|
||||
.#{$namespace}-list-enter-active,
|
||||
.#{$namespace}-list-leave-active {
|
||||
transition: all 1s;
|
||||
}
|
||||
.#{$namespace}-list-enter-from, .#{$namespace}-list-leave-active {
|
||||
opacity: 0;
|
||||
transform: translateY(-30px);
|
||||
}
|
||||
|
||||
.#{$namespace}-opacity-transition {
|
||||
transition: opacity .3s cubic-bezier(.55,0,.1,1);
|
||||
}
|
||||
1035
src/assets/css/themes/src/common/var.scss
Normal file
1035
src/assets/css/themes/src/common/var.scss
Normal file
File diff suppressed because it is too large
Load Diff
14
src/assets/css/themes/src/container.scss
Normal file
14
src/assets/css/themes/src/container.scss
Normal file
@@ -0,0 +1,14 @@
|
||||
@import "mixins/mixins";
|
||||
|
||||
@include b(container) {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex: 1;
|
||||
flex-basis: auto;
|
||||
box-sizing: border-box;
|
||||
min-width: 0;
|
||||
|
||||
@include when(vertical) {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
12
src/assets/css/themes/src/date-picker.scss
Normal file
12
src/assets/css/themes/src/date-picker.scss
Normal file
@@ -0,0 +1,12 @@
|
||||
@import "./date-picker/date-table.scss";
|
||||
@import "./date-picker/month-table.scss";
|
||||
@import "./date-picker/year-table.scss";
|
||||
@import "./date-picker/time-spinner.scss";
|
||||
@import "./date-picker/picker.scss";
|
||||
@import "./date-picker/date-picker.scss";
|
||||
@import "./date-picker/date-range-picker.scss";
|
||||
@import "./date-picker/time-range-picker.scss";
|
||||
@import "./date-picker/time-picker.scss";
|
||||
@import "./input.scss";
|
||||
@import "./scrollbar.scss";
|
||||
@import "./popper";
|
||||
101
src/assets/css/themes/src/date-picker/date-picker.scss
Normal file
101
src/assets/css/themes/src/date-picker/date-picker.scss
Normal file
@@ -0,0 +1,101 @@
|
||||
@import "../common/var";
|
||||
@import "../mixins/mixins";
|
||||
@import "./picker-panel.scss";
|
||||
|
||||
@include b(date-picker) {
|
||||
width: 322px;
|
||||
|
||||
&.has-sidebar.has-time {
|
||||
width: 434px;
|
||||
}
|
||||
|
||||
&.has-sidebar {
|
||||
width: 438px;
|
||||
}
|
||||
|
||||
&.has-time .#{$namespace}-picker-panel__body-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.#{$namespace}-picker-panel__content {
|
||||
width: 292px;
|
||||
}
|
||||
|
||||
table {
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@include e(editor-wrap) {
|
||||
position: relative;
|
||||
display: table-cell;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
@include e(time-header) {
|
||||
position: relative;
|
||||
border-bottom: 1px solid $--datepicker-inner-border-color;
|
||||
font-size: 12px;
|
||||
padding: 8px 5px 5px 5px;
|
||||
display: table;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@include e(header) {
|
||||
margin: 12px;
|
||||
text-align: center;
|
||||
|
||||
@include m(bordered) {
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: solid 1px $--border-color-lighter;
|
||||
|
||||
& + .#{$namespace}-picker-panel__content {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include e(header-label) {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
padding: 0 5px;
|
||||
line-height: 22px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
color: $--color-text-regular;
|
||||
|
||||
&:hover {
|
||||
color: $--datepicker-hover-font-color;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $--datepicker-active-color;
|
||||
}
|
||||
}
|
||||
|
||||
@include e(prev-btn) {
|
||||
float: left;
|
||||
}
|
||||
|
||||
@include e(next-btn) {
|
||||
float: right;
|
||||
}
|
||||
|
||||
@include e(time-wrap) {
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@include e(time-label) {
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
line-height: 30px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.#{$namespace}-time-panel {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
104
src/assets/css/themes/src/date-picker/date-range-picker.scss
Normal file
104
src/assets/css/themes/src/date-picker/date-range-picker.scss
Normal file
@@ -0,0 +1,104 @@
|
||||
@import "../common/var";
|
||||
|
||||
@include b(date-range-picker) {
|
||||
width: 646px;
|
||||
|
||||
&.has-sidebar {
|
||||
width: 756px;
|
||||
}
|
||||
|
||||
table {
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.#{$namespace}-picker-panel__body {
|
||||
min-width: 513px;
|
||||
}
|
||||
|
||||
.#{$namespace}-picker-panel__content {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@include e(header) {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
height: 28px;
|
||||
|
||||
[class*=arrow-left] {
|
||||
float: left;
|
||||
}
|
||||
|
||||
[class*=arrow-right] {
|
||||
float: right;
|
||||
}
|
||||
|
||||
div {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
margin-right: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
@include e(content) {
|
||||
float: left;
|
||||
width: 50%;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 16px;
|
||||
|
||||
@include when(left) {
|
||||
border-right: 1px solid $--datepicker-inner-border-color;
|
||||
}
|
||||
.#{$namespace}-date-range-picker__header {
|
||||
|
||||
div {
|
||||
margin-left: 50px;
|
||||
margin-right: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include e(editors-wrap) {
|
||||
box-sizing: border-box;
|
||||
display: table-cell;
|
||||
|
||||
@include when(right) {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
@include e(time-header) {
|
||||
position: relative;
|
||||
border-bottom: 1px solid $--datepicker-inner-border-color;
|
||||
font-size: 12px;
|
||||
padding: 8px 5px 5px 5px;
|
||||
display: table;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
> .#{$namespace}-icon-arrow-right {
|
||||
font-size: 20px;
|
||||
vertical-align: middle;
|
||||
display: table-cell;
|
||||
color: $--datepicker-icon-color;
|
||||
}
|
||||
}
|
||||
|
||||
@include e(time-picker-wrap) {
|
||||
position: relative;
|
||||
display: table-cell;
|
||||
padding: 0 5px;
|
||||
|
||||
.#{$namespace}-picker-panel {
|
||||
position: absolute;
|
||||
top: 13px;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
background: $--color-white;
|
||||
}
|
||||
.#{$namespace}-time-panel {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
}
|
||||
151
src/assets/css/themes/src/date-picker/date-table.scss
Normal file
151
src/assets/css/themes/src/date-picker/date-table.scss
Normal file
@@ -0,0 +1,151 @@
|
||||
@import "../common/var";
|
||||
@import "../mixins/mixins";
|
||||
|
||||
@include b(date-table) {
|
||||
font-size: 12px;
|
||||
user-select: none;
|
||||
|
||||
@include when(week-mode) {
|
||||
.#{$namespace}-date-table__row {
|
||||
&:hover {
|
||||
div {
|
||||
background-color: $--datepicker-inrange-background-color;
|
||||
}
|
||||
td.available:hover {
|
||||
color: $--datepicker-font-color;
|
||||
}
|
||||
td:first-child div {
|
||||
margin-left: 5px;
|
||||
border-top-left-radius: 15px;
|
||||
border-bottom-left-radius: 15px;
|
||||
}
|
||||
td:last-child div {
|
||||
margin-right: 5px;
|
||||
border-top-right-radius: 15px;
|
||||
border-bottom-right-radius: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
&.current div {
|
||||
background-color: $--datepicker-inrange-background-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
width: 32px;
|
||||
height: 30px;
|
||||
padding: 4px 0;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
|
||||
& div {
|
||||
height: 30px;
|
||||
padding: 3px 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
& span {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
line-height: 24px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
&.next-month,
|
||||
&.prev-month {
|
||||
color: $--datepicker-off-font-color;
|
||||
}
|
||||
|
||||
&.today {
|
||||
position: relative;
|
||||
span {
|
||||
color: $--color-primary;
|
||||
font-weight: bold;
|
||||
}
|
||||
&.start-date span,
|
||||
&.end-date span {
|
||||
color: $--color-white;
|
||||
}
|
||||
}
|
||||
|
||||
&.available:hover {
|
||||
color: $--datepicker-hover-font-color;
|
||||
}
|
||||
|
||||
&.in-range div {
|
||||
background-color: $--datepicker-inrange-background-color;
|
||||
&:hover {
|
||||
background-color: $--datepicker-inrange-hover-background-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.current:not(.disabled) span {
|
||||
color: $--color-white;
|
||||
background-color: $--datepicker-active-color;
|
||||
}
|
||||
&.start-date div,
|
||||
&.end-date div {
|
||||
color: $--color-white;
|
||||
}
|
||||
|
||||
&.start-date span,
|
||||
&.end-date span {
|
||||
background-color: $--datepicker-active-color;
|
||||
}
|
||||
|
||||
&.start-date div {
|
||||
margin-left: 5px;
|
||||
border-top-left-radius: 15px;
|
||||
border-bottom-left-radius: 15px;
|
||||
}
|
||||
|
||||
&.end-date div {
|
||||
margin-right: 5px;
|
||||
border-top-right-radius: 15px;
|
||||
border-bottom-right-radius: 15px;
|
||||
}
|
||||
|
||||
&.disabled div {
|
||||
background-color: $--background-color-base;
|
||||
opacity: 1;
|
||||
cursor: not-allowed;
|
||||
color: $--color-text-placeholder;
|
||||
}
|
||||
|
||||
&.selected div {
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
background-color: $--datepicker-inrange-background-color;
|
||||
border-radius: 15px;
|
||||
&:hover {
|
||||
background-color: $--datepicker-inrange-hover-background-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.selected span {
|
||||
background-color: $--datepicker-active-color;
|
||||
color: $--color-white;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
&.week {
|
||||
font-size: 80%;
|
||||
color: $--datepicker-header-font-color;
|
||||
}
|
||||
}
|
||||
|
||||
th {
|
||||
padding: 5px;
|
||||
color: $--datepicker-header-font-color;
|
||||
font-weight: 400;
|
||||
border-bottom: solid 1px $--border-color-lighter;
|
||||
}
|
||||
}
|
||||
82
src/assets/css/themes/src/date-picker/month-table.scss
Normal file
82
src/assets/css/themes/src/date-picker/month-table.scss
Normal file
@@ -0,0 +1,82 @@
|
||||
@import "../common/var";
|
||||
|
||||
@include b(month-table) {
|
||||
font-size: 12px;
|
||||
margin: -1px;
|
||||
border-collapse: collapse;
|
||||
|
||||
td {
|
||||
text-align: center;
|
||||
padding: 8px 0px;
|
||||
cursor: pointer;
|
||||
& div {
|
||||
height: 48px;
|
||||
padding: 6px 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
&.today {
|
||||
.cell {
|
||||
color: $--color-primary;
|
||||
font-weight: bold;
|
||||
}
|
||||
&.start-date .cell,
|
||||
&.end-date .cell {
|
||||
color: $--color-white;
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled .cell {
|
||||
background-color: $--background-color-base;
|
||||
cursor: not-allowed;
|
||||
color: $--color-text-placeholder;
|
||||
|
||||
&:hover {
|
||||
color: $--color-text-placeholder;
|
||||
}
|
||||
}
|
||||
|
||||
.cell {
|
||||
width: 60px;
|
||||
height: 36px;
|
||||
display: block;
|
||||
line-height: 36px;
|
||||
color: $--datepicker-font-color;
|
||||
margin: 0 auto;
|
||||
border-radius: 18px;
|
||||
&:hover {
|
||||
color: $--datepicker-hover-font-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.in-range div {
|
||||
background-color: $--datepicker-inrange-background-color;
|
||||
&:hover {
|
||||
background-color: $--datepicker-inrange-hover-background-color;
|
||||
}
|
||||
}
|
||||
&.start-date div,
|
||||
&.end-date div {
|
||||
color: $--color-white;
|
||||
}
|
||||
|
||||
&.start-date .cell,
|
||||
&.end-date .cell {
|
||||
color: $--color-white;
|
||||
background-color: $--datepicker-active-color;
|
||||
}
|
||||
|
||||
&.start-date div {
|
||||
border-top-left-radius: 24px;
|
||||
border-bottom-left-radius: 24px;
|
||||
}
|
||||
|
||||
&.end-date div {
|
||||
border-top-right-radius: 24px;
|
||||
border-bottom-right-radius: 24px;
|
||||
}
|
||||
|
||||
&.current:not(.disabled) .cell {
|
||||
color: $--datepicker-active-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
122
src/assets/css/themes/src/date-picker/picker-panel.scss
Normal file
122
src/assets/css/themes/src/date-picker/picker-panel.scss
Normal file
@@ -0,0 +1,122 @@
|
||||
@import "../common/var";
|
||||
|
||||
@include b(picker-panel) {
|
||||
position: relative;
|
||||
color: $--color-text-regular;
|
||||
background: $--color-white;
|
||||
border-radius: $--border-radius-base;
|
||||
line-height: 30px;
|
||||
|
||||
.#{$namespace}-time-panel {
|
||||
margin: 5px 0;
|
||||
border: solid 1px $--datepicker-border-color;
|
||||
background-color: $--color-white;
|
||||
box-shadow: $--box-shadow-light;
|
||||
}
|
||||
|
||||
@include e((body, body-wrapper)) {
|
||||
&::after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
@include e(content) {
|
||||
position: relative;
|
||||
margin: 15px;
|
||||
}
|
||||
|
||||
@include e(footer) {
|
||||
border-top: 1px solid $--datepicker-inner-border-color;
|
||||
padding: 4px;
|
||||
text-align: right;
|
||||
background-color: $--color-white;
|
||||
position: relative;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
@include e(shortcut) {
|
||||
display: block;
|
||||
width: 100%;
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
line-height: 28px;
|
||||
font-size: 14px;
|
||||
color: $--datepicker-font-color;
|
||||
padding-left: 12px;
|
||||
text-align: left;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: $--datepicker-hover-font-color;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: #e6f1fe;
|
||||
color: $--datepicker-active-color;
|
||||
}
|
||||
}
|
||||
|
||||
@include e(btn) {
|
||||
border: 1px solid #dcdcdc;
|
||||
color: #333;
|
||||
line-height: 24px;
|
||||
border-radius: 2px;
|
||||
padding: 0 20px;
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
outline: none;
|
||||
font-size: 12px;
|
||||
|
||||
&[disabled] {
|
||||
color: #cccccc;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
@include e(icon-btn) {
|
||||
font-size: 12px;
|
||||
color: $--datepicker-icon-color;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
margin-top: 8px;
|
||||
|
||||
&:hover {
|
||||
color: $--datepicker-hover-font-color;
|
||||
}
|
||||
|
||||
@include when(disabled) {
|
||||
color: $--font-color-disabled-base;
|
||||
|
||||
&:hover {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include e(link-btn) {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$namespace}-picker-panel *[slot=sidebar],
|
||||
.#{$namespace}-picker-panel__sidebar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 110px;
|
||||
border-right: 1px solid $--datepicker-inner-border-color;
|
||||
box-sizing: border-box;
|
||||
padding-top: 6px;
|
||||
background-color: $--color-white;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.#{$namespace}-picker-panel *[slot=sidebar] + .#{$namespace}-picker-panel__body,
|
||||
.#{$namespace}-picker-panel__sidebar + .#{$namespace}-picker-panel__body {
|
||||
margin-left: 110px;
|
||||
}
|
||||
213
src/assets/css/themes/src/date-picker/picker.scss
Normal file
213
src/assets/css/themes/src/date-picker/picker.scss
Normal file
@@ -0,0 +1,213 @@
|
||||
@import "../mixins/mixins";
|
||||
@import "../common/var";
|
||||
@import "../common/transition";
|
||||
|
||||
@include b(picker) {
|
||||
@include e(popper) {
|
||||
@include picker-popper(
|
||||
$--color-white,
|
||||
1px solid $--datepicker-border-color,
|
||||
$--box-shadow-light,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@include b(date-editor) {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
|
||||
&.#{$namespace}-input,
|
||||
&.#{$namespace}-input__inner {
|
||||
width: 220px;
|
||||
}
|
||||
|
||||
@include m((monthrange)) {
|
||||
&.#{$namespace}-input,
|
||||
&.#{$namespace}-input__inner {
|
||||
width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
@include m((daterange, timerange)) {
|
||||
&.#{$namespace}-input,
|
||||
&.#{$namespace}-input__inner {
|
||||
width: 350px;
|
||||
}
|
||||
}
|
||||
|
||||
@include m(datetimerange) {
|
||||
&.#{$namespace}-input,
|
||||
&.#{$namespace}-input__inner {
|
||||
width: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
@include m(dates) {
|
||||
.#{$namespace}-input__inner {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$namespace}-icon-circle-close {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.#{$namespace}-range__icon {
|
||||
font-size: 14px;
|
||||
margin-left: -5px;
|
||||
color: $--color-text-placeholder;
|
||||
float: left;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
.#{$namespace}-range-input {
|
||||
appearance: none;
|
||||
border: none;
|
||||
outline: none;
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 39%;
|
||||
text-align: center;
|
||||
font-size: $--font-size-base;
|
||||
color: $--color-text-regular;
|
||||
|
||||
&::placeholder {
|
||||
color: $--color-text-placeholder;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$namespace}-range-separator {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
padding: 0 5px;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
line-height: 32px;
|
||||
font-size: 14px;
|
||||
width: 5%;
|
||||
color: $--color-text-primary;
|
||||
}
|
||||
|
||||
.#{$namespace}-range__close-icon {
|
||||
font-size: 14px;
|
||||
color: $--color-text-placeholder;
|
||||
width: 25px;
|
||||
display: inline-block;
|
||||
float: right;
|
||||
line-height: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
@include b(range-editor) {
|
||||
&.#{$namespace}-input__inner {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 3px 10px;
|
||||
}
|
||||
|
||||
.#{$namespace}-range-input {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
@include when(active) {
|
||||
border-color: $--color-primary;
|
||||
|
||||
&:hover {
|
||||
border-color: $--color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
@include m(medium) {
|
||||
line-height: $--input-medium-height;
|
||||
|
||||
&.#{$namespace}-input__inner {
|
||||
height: $--input-medium-height;
|
||||
}
|
||||
|
||||
.#{$namespace}-range-separator {
|
||||
line-height: 28px;
|
||||
font-size: $--input-medium-font-size;
|
||||
}
|
||||
|
||||
.#{$namespace}-range-input {
|
||||
font-size: $--input-medium-font-size;
|
||||
}
|
||||
|
||||
.#{$namespace}-range__icon,
|
||||
.#{$namespace}-range__close-icon {
|
||||
line-height: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
@include m(small) {
|
||||
line-height: $--input-small-height;
|
||||
|
||||
&.#{$namespace}-input__inner {
|
||||
height: $--input-small-height;
|
||||
}
|
||||
|
||||
.#{$namespace}-range-separator {
|
||||
line-height: 24px;
|
||||
font-size: $--input-small-font-size;
|
||||
}
|
||||
|
||||
.#{$namespace}-range-input {
|
||||
font-size: $--input-small-font-size;
|
||||
}
|
||||
|
||||
.#{$namespace}-range__icon,
|
||||
.#{$namespace}-range__close-icon {
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@include m(mini) {
|
||||
line-height: $--input-mini-height;
|
||||
|
||||
&.#{$namespace}-input__inner {
|
||||
height: $--input-mini-height;
|
||||
}
|
||||
|
||||
.#{$namespace}-range-separator {
|
||||
line-height: 20px;
|
||||
font-size: $--input-mini-font-size;
|
||||
}
|
||||
|
||||
.#{$namespace}-range-input {
|
||||
font-size: $--input-mini-font-size;
|
||||
}
|
||||
|
||||
.#{$namespace}-range__icon,
|
||||
.#{$namespace}-range__close-icon {
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@include when(disabled) {
|
||||
background-color: $--input-disabled-fill;
|
||||
border-color: $--input-disabled-border;
|
||||
color: $--input-disabled-color;
|
||||
cursor: not-allowed;
|
||||
|
||||
&:hover, &:focus {
|
||||
border-color: $--input-disabled-border;
|
||||
}
|
||||
|
||||
input {
|
||||
background-color: $--input-disabled-fill;
|
||||
color: $--input-disabled-color;
|
||||
cursor: not-allowed;
|
||||
&::placeholder {
|
||||
color: $--input-disabled-placeholder-color;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$namespace}-range-separator {
|
||||
color: $--input-disabled-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
81
src/assets/css/themes/src/date-picker/time-picker.scss
Normal file
81
src/assets/css/themes/src/date-picker/time-picker.scss
Normal file
@@ -0,0 +1,81 @@
|
||||
@import "../common/var";
|
||||
|
||||
@include b(time-panel) {
|
||||
border-radius: 2px;
|
||||
position: relative;
|
||||
width: 180px;
|
||||
left: 0;
|
||||
z-index: $--index-top;
|
||||
user-select: none;
|
||||
box-sizing: content-box;
|
||||
|
||||
@include e(content) {
|
||||
font-size: 0;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&::after, &::before {
|
||||
content: "";
|
||||
top: 50%;
|
||||
position: absolute;
|
||||
margin-top: -15px;
|
||||
height: 32px;
|
||||
z-index: -1;
|
||||
left: 0;
|
||||
right: 0;
|
||||
box-sizing: border-box;
|
||||
padding-top: 6px;
|
||||
text-align: left;
|
||||
border-top: 1px solid $--border-color-light;
|
||||
border-bottom: 1px solid $--border-color-light;
|
||||
}
|
||||
|
||||
&::after {
|
||||
left: 50%;
|
||||
margin-left: 12%;
|
||||
margin-right: 12%;
|
||||
}
|
||||
|
||||
&::before {
|
||||
padding-left: 50%;
|
||||
margin-right: 12%;
|
||||
margin-left: 12%;
|
||||
}
|
||||
|
||||
&.has-seconds {
|
||||
&::after {
|
||||
left: calc(100% / 3 * 2);
|
||||
}
|
||||
|
||||
&::before {
|
||||
padding-left: calc(100% / 3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include e(footer) {
|
||||
border-top: 1px solid $--datepicker-inner-border-color;
|
||||
padding: 4px;
|
||||
height: 36px;
|
||||
line-height: 25px;
|
||||
text-align: right;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@include e(btn) {
|
||||
border: none;
|
||||
line-height: 28px;
|
||||
padding: 0 5px;
|
||||
margin: 0 5px;
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
outline: none;
|
||||
font-size: 12px;
|
||||
color: $--color-text-primary;
|
||||
|
||||
&.confirm {
|
||||
font-weight: 800;
|
||||
color: $--datepicker-active-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
32
src/assets/css/themes/src/date-picker/time-range-picker.scss
Normal file
32
src/assets/css/themes/src/date-picker/time-range-picker.scss
Normal file
@@ -0,0 +1,32 @@
|
||||
@import "../common/var";
|
||||
|
||||
@include b(time-range-picker) {
|
||||
width: 354px;
|
||||
overflow: visible;
|
||||
|
||||
@include e(content) {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@include e(cell) {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 4px 7px 7px;
|
||||
width: 50%;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@include e(header) {
|
||||
margin-bottom: 5px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@include e(body) {
|
||||
border-radius:2px;
|
||||
border: 1px solid $--datepicker-border-color;
|
||||
}
|
||||
}
|
||||
110
src/assets/css/themes/src/date-picker/time-spinner.scss
Normal file
110
src/assets/css/themes/src/date-picker/time-spinner.scss
Normal file
@@ -0,0 +1,110 @@
|
||||
@import "../common/var";
|
||||
|
||||
@include b(time-spinner) {
|
||||
&.has-seconds {
|
||||
.#{$namespace}-time-spinner__wrapper {
|
||||
width: 33.3%;
|
||||
}
|
||||
}
|
||||
|
||||
@include e(wrapper) {
|
||||
max-height: 190px;
|
||||
overflow: auto;
|
||||
display: inline-block;
|
||||
width: 50%;
|
||||
vertical-align: top;
|
||||
position: relative;
|
||||
|
||||
& .#{$namespace}-scrollbar__wrap:not(.#{$namespace}-scrollbar__wrap--hidden-default) {
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
@include when(arrow) {
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
|
||||
.#{$namespace}-time-spinner__list {
|
||||
transform: translateY(-32px);
|
||||
}
|
||||
|
||||
.#{$namespace}-time-spinner__item:hover:not(.disabled):not(.active) {
|
||||
background: $--color-white;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include e(arrow) {
|
||||
font-size: 12px;
|
||||
color: $--color-text-secondary;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: $--index-normal;
|
||||
text-align: center;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: $--color-primary;
|
||||
}
|
||||
|
||||
&.#{$namespace}-icon-arrow-up {
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
&.#{$namespace}-icon-arrow-down {
|
||||
bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@include e(input) {
|
||||
&.#{$namespace}-input {
|
||||
width: 70%;
|
||||
|
||||
.#{$namespace}-input__inner {
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include e(list) {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
text-align: center;
|
||||
|
||||
&::after,
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
@include e(item) {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
font-size: 12px;
|
||||
color: $--color-text-regular;
|
||||
|
||||
&:hover:not(.disabled):not(.active) {
|
||||
background: $--background-color-base;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.active:not(.disabled) {
|
||||
color: $--color-text-primary;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
color: $--color-text-placeholder;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
51
src/assets/css/themes/src/date-picker/year-table.scss
Normal file
51
src/assets/css/themes/src/date-picker/year-table.scss
Normal file
@@ -0,0 +1,51 @@
|
||||
@import "../common/var";
|
||||
|
||||
@include b(year-table) {
|
||||
font-size: 12px;
|
||||
margin: -1px;
|
||||
border-collapse: collapse;
|
||||
|
||||
.#{$namespace}-icon {
|
||||
color: $--datepicker-icon-color;
|
||||
}
|
||||
|
||||
td {
|
||||
text-align: center;
|
||||
padding: 20px 3px;
|
||||
cursor: pointer;
|
||||
|
||||
&.today {
|
||||
.cell {
|
||||
color: $--color-primary;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled .cell {
|
||||
background-color: $--background-color-base;
|
||||
cursor: not-allowed;
|
||||
color: $--color-text-placeholder;
|
||||
|
||||
&:hover {
|
||||
color: $--color-text-placeholder;
|
||||
}
|
||||
}
|
||||
|
||||
.cell {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
display: block;
|
||||
line-height: 32px;
|
||||
color: $--datepicker-font-color;
|
||||
margin: 0 auto;
|
||||
|
||||
&:hover {
|
||||
color: $--datepicker-hover-font-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.current:not(.disabled) .cell {
|
||||
color: $--datepicker-active-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
20
src/assets/css/themes/src/descriptions-item.scss
Normal file
20
src/assets/css/themes/src/descriptions-item.scss
Normal file
@@ -0,0 +1,20 @@
|
||||
@import 'mixins/mixins';
|
||||
@import 'common/var';
|
||||
|
||||
@include b(descriptions) {
|
||||
@include e(label) {
|
||||
&.is-bordered-label {
|
||||
font-weight: bold;
|
||||
color: $--color-text-secondary;
|
||||
background: $--descriptions-item-bordered-label-background;
|
||||
}
|
||||
|
||||
&:not(.is-bordered-label) {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@include e(content) {
|
||||
|
||||
}
|
||||
}
|
||||
96
src/assets/css/themes/src/descriptions.scss
Normal file
96
src/assets/css/themes/src/descriptions.scss
Normal file
@@ -0,0 +1,96 @@
|
||||
@import 'mixins/mixins';
|
||||
@import 'common/var';
|
||||
@import 'descriptions-item';
|
||||
|
||||
@include b(descriptions) {
|
||||
box-sizing: border-box;
|
||||
font-size: $--font-size-base;
|
||||
color: $--color-text-primary;
|
||||
|
||||
@include e(header) {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: $--descriptions-header-margin-bottom;
|
||||
|
||||
@include e(title) {
|
||||
font-size: $--descriptions-title-font-size;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
@include e(body) {
|
||||
color: $--color-text-regular;
|
||||
background-color: $--color-white;
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
|
||||
th, td {
|
||||
text-align: left;
|
||||
font-weight: normal;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.is-bordered {
|
||||
th, td {
|
||||
border: $--descriptions-table-border;
|
||||
padding: 12px 10px;
|
||||
}
|
||||
}
|
||||
|
||||
:not(.is-bordered) {
|
||||
th, td {
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@include m(medium) {
|
||||
&.is-bordered {
|
||||
th, td {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.is-bordered) {
|
||||
th, td {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include m(small) {
|
||||
font-size: 12px;
|
||||
|
||||
&.is-bordered {
|
||||
th, td {
|
||||
padding: 8px 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.is-bordered) {
|
||||
th, td {
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include m(mini) {
|
||||
font-size: 12px;
|
||||
|
||||
&.is-bordered {
|
||||
th, td {
|
||||
padding: 6px 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.is-bordered) {
|
||||
th, td {
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
153
src/assets/css/themes/src/dialog.scss
Normal file
153
src/assets/css/themes/src/dialog.scss
Normal file
@@ -0,0 +1,153 @@
|
||||
@import 'mixins/mixins';
|
||||
@import 'mixins/utils';
|
||||
@import 'common/var';
|
||||
@import 'common/popup';
|
||||
@import './overlay.scss';
|
||||
|
||||
@include b(dialog) {
|
||||
position: relative;
|
||||
margin: 0 auto 50px;
|
||||
background: $--dialog-background-color;
|
||||
border-radius: $--border-radius-small;
|
||||
box-shadow: $--dialog-box-shadow;
|
||||
box-sizing: border-box;
|
||||
width: 50%;
|
||||
|
||||
@include when(fullscreen) {
|
||||
width: 100%;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
@include e(wrapper) {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
overflow: auto;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@include e(header) {
|
||||
padding: $--dialog-padding-primary;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
@include e(headerbtn) {
|
||||
position: absolute;
|
||||
top: $--dialog-padding-primary;
|
||||
right: $--dialog-padding-primary;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
font-size: $--message-close-size;
|
||||
|
||||
.#{$namespace}-dialog__close {
|
||||
color: $--color-info;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
.#{$namespace}-dialog__close {
|
||||
color: $--color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include e(title) {
|
||||
line-height: $--dialog-font-line-height;
|
||||
font-size: $--dialog-title-font-size;
|
||||
color: $--color-text-primary;
|
||||
}
|
||||
|
||||
@include e(body) {
|
||||
padding: ($--dialog-padding-primary + 10px) $--dialog-padding-primary;
|
||||
color: $--color-text-regular;
|
||||
font-size: $--dialog-content-font-size;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
@include e(footer) {
|
||||
padding: $--dialog-padding-primary;
|
||||
padding-top: 10px;
|
||||
text-align: right;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
// 内容居中布局
|
||||
@include m(center) {
|
||||
text-align: center;
|
||||
|
||||
@include e(body) {
|
||||
text-align: initial;
|
||||
padding: 25px ($--dialog-padding-primary + 5px) 30px;
|
||||
}
|
||||
|
||||
@include e(footer) {
|
||||
text-align: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-fade-enter-active {
|
||||
animation: modal-fade-in 0.3s !important;
|
||||
.#{$namespace}-dialog {
|
||||
animation: dialog-fade-in 0.3s;
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-fade-leave-active {
|
||||
animation: modal-fade-out 0.3s;
|
||||
.#{$namespace}-dialog {
|
||||
animation: dialog-fade-out 0.3s;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@keyframes dialog-fade-in {
|
||||
0% {
|
||||
transform: translate3d(0, -20px, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translate3d(0, 0, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes dialog-fade-out {
|
||||
0% {
|
||||
transform: translate3d(0, 0, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translate3d(0, -20px, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes modal-fade-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translate3d(0, 0, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes modal-fade-out {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
12
src/assets/css/themes/src/display.scss
Normal file
12
src/assets/css/themes/src/display.scss
Normal file
@@ -0,0 +1,12 @@
|
||||
@import "common/var";
|
||||
@import "mixins/mixins";
|
||||
|
||||
.hidden {
|
||||
@each $break-point-name, $value in $--breakpoints-spec {
|
||||
&-#{$break-point-name} {
|
||||
@include res($break-point-name, $--breakpoints-spec) {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
47
src/assets/css/themes/src/divider.scss
Normal file
47
src/assets/css/themes/src/divider.scss
Normal file
@@ -0,0 +1,47 @@
|
||||
@import "common/var";
|
||||
@import "mixins/mixins";
|
||||
|
||||
@include b(divider) {
|
||||
background-color: $--border-color-base;
|
||||
position: relative;
|
||||
|
||||
@include m(horizontal) {
|
||||
display: block;
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
margin: 24px 0;
|
||||
}
|
||||
|
||||
@include m(vertical) {
|
||||
display: inline-block;
|
||||
width: 1px;
|
||||
height: 1em;
|
||||
margin: 0 8px;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@include e(text) {
|
||||
position: absolute;
|
||||
background-color: $--color-white;
|
||||
padding: 0 20px;
|
||||
font-weight: 500;
|
||||
color: $--color-text-primary;
|
||||
font-size: 14px;
|
||||
|
||||
@include when(left) {
|
||||
left: 20px;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
@include when(center) {
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
}
|
||||
|
||||
@include when(right) {
|
||||
right: 20px;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
172
src/assets/css/themes/src/drawer.scss
Normal file
172
src/assets/css/themes/src/drawer.scss
Normal file
@@ -0,0 +1,172 @@
|
||||
@import 'mixins/mixins';
|
||||
@import 'common/var';
|
||||
@import './overlay.scss';
|
||||
|
||||
@keyframes #{$namespace}-drawer-fade-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin drawer-animation($direction) {
|
||||
@keyframes #{$direction}-drawer-animation {
|
||||
0% {
|
||||
@if $direction == ltr {
|
||||
transform: translate(0px, 0px);
|
||||
}
|
||||
|
||||
@if $direction == rtl {
|
||||
transform: translate(0px, 0px);
|
||||
}
|
||||
|
||||
@if $direction == ttb {
|
||||
transform: translate(0px, 0px);
|
||||
}
|
||||
|
||||
@if $direction == btt {
|
||||
transform: translate(0px, 0px);
|
||||
}
|
||||
}
|
||||
|
||||
100% {
|
||||
@if $direction == ltr {
|
||||
transform: translate(-100%, 0px);
|
||||
}
|
||||
|
||||
@if $direction == rtl {
|
||||
transform: translate(100%, 0px);
|
||||
}
|
||||
|
||||
@if $direction == ttb {
|
||||
transform: translate(0px, -100%);
|
||||
}
|
||||
|
||||
@if $direction == btt {
|
||||
transform: translate(0px, 100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin animation-in($direction) {
|
||||
&.#{$direction} {
|
||||
animation: #{$direction}-drawer-animation 0.3s linear reverse;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin animation-out($direction) {
|
||||
&.#{$direction} {
|
||||
animation: #{$direction}-drawer-animation 0.3s linear;
|
||||
}
|
||||
}
|
||||
|
||||
@include drawer-animation(rtl);
|
||||
@include drawer-animation(ltr);
|
||||
@include drawer-animation(ttb);
|
||||
@include drawer-animation(btt);
|
||||
|
||||
$directions: rtl, ltr, ttb, btt;
|
||||
|
||||
@include b(drawer) {
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
background-color: $--dialog-background-color;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2),
|
||||
0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12);
|
||||
overflow: hidden;
|
||||
|
||||
@each $direction in $directions {
|
||||
.#{$namespace}-drawer-fade-enter-active & {
|
||||
@include animation-in($direction);
|
||||
}
|
||||
|
||||
.#{$namespace}-drawer-fade-leave-active & {
|
||||
@include animation-out($direction);
|
||||
}
|
||||
}
|
||||
|
||||
&__header {
|
||||
align-items: center;
|
||||
color: rgb(114, 118, 123);
|
||||
display: flex;
|
||||
margin-bottom: 32px;
|
||||
padding: $--dialog-padding-primary;
|
||||
padding-bottom: 0;
|
||||
& > :first-child {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
margin: 0;
|
||||
flex: 1;
|
||||
line-height: inherit;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
&__close-btn {
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: $--font-size-extra-large;
|
||||
color: inherit;
|
||||
background-color: transparent;
|
||||
outline: none;
|
||||
&:hover {
|
||||
i {
|
||||
color: $--color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__body {
|
||||
flex: 1;
|
||||
& > * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
&.ltr,
|
||||
&.rtl {
|
||||
height: 100%;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
&.ttb,
|
||||
&.btt {
|
||||
width: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
&.ltr {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&.rtl {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
&.ttb {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
&.btt {
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$namespace}-drawer-fade-enter-active {
|
||||
animation: #{$namespace}-drawer-fade-in 0.3s;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.#{$namespace}-drawer-fade-leave-active {
|
||||
overflow: hidden !important;
|
||||
animation: #{$namespace}-drawer-fade-in 0.3s reverse;
|
||||
}
|
||||
0
src/assets/css/themes/src/dropdown-item.scss
Normal file
0
src/assets/css/themes/src/dropdown-item.scss
Normal file
0
src/assets/css/themes/src/dropdown-menu.scss
Normal file
0
src/assets/css/themes/src/dropdown-menu.scss
Normal file
204
src/assets/css/themes/src/dropdown.scss
Normal file
204
src/assets/css/themes/src/dropdown.scss
Normal file
@@ -0,0 +1,204 @@
|
||||
@import "mixins/mixins";
|
||||
@import "common/var";
|
||||
@import "button";
|
||||
|
||||
@include b(dropdown) {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
color: $--color-text-regular;
|
||||
font-size: $--font-size-base;
|
||||
line-height: 1;
|
||||
|
||||
@include e(popper) {
|
||||
// using attributes selector to override
|
||||
|
||||
@include picker-popper(
|
||||
$--color-white,
|
||||
1px solid $--border-color-light,
|
||||
$--dropdown-menu-box-shadow,
|
||||
);
|
||||
|
||||
.#{$namespace}-dropdown-menu {
|
||||
border: none;
|
||||
}
|
||||
|
||||
#{& + '-selfdefine'} {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@include b(scrollbar__bar) {
|
||||
z-index: #{$--dropdown-menu-index + 1};
|
||||
}
|
||||
|
||||
@include b(dropdown__list) {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$namespace}-button-group {
|
||||
display: block;
|
||||
|
||||
.#{$namespace}-button {
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
|
||||
& .#{$namespace}-dropdown__caret-button {
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
position: relative;
|
||||
border-left: none;
|
||||
|
||||
&::before {
|
||||
$gap: 5px;
|
||||
|
||||
content: '';
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 1px;
|
||||
top: $gap;
|
||||
bottom: $gap;
|
||||
left: 0;
|
||||
background: mix(white, transparent, 50%);
|
||||
}
|
||||
|
||||
&.#{$namespace}-button--default::before {
|
||||
background: mix($--button-default-border-color, transparent, 50%);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&::before {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
& .#{$namespace}-dropdown__icon {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
@include e(icon) {
|
||||
font-size: 12px;
|
||||
margin: 0 3px;
|
||||
}
|
||||
|
||||
.#{$namespace}-dropdown-selfdefine { // 自定义
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include b(dropdown-menu) {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: $--dropdown-menu-index;
|
||||
padding: 10px 0;
|
||||
margin: 0;
|
||||
background-color: $--color-white;
|
||||
border: none;
|
||||
border-radius: $--border-radius-base;
|
||||
box-shadow: none;
|
||||
|
||||
@include e(item) {
|
||||
list-style: none;
|
||||
line-height: 36px;
|
||||
padding: 0 20px;
|
||||
margin: 0;
|
||||
font-size: $--font-size-base;
|
||||
color: $--color-text-regular;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
&:not(.is-disabled):hover, &:focus {
|
||||
background-color: $--dropdown-menuItem-hover-fill;
|
||||
color: $--dropdown-menuItem-hover-color;
|
||||
}
|
||||
|
||||
i {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
@include m(divided) {
|
||||
$divided-offset: 6px;
|
||||
|
||||
position: relative;
|
||||
margin-top: $divided-offset;
|
||||
border-top: 1px solid $--border-color-lighter;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
height: $divided-offset;
|
||||
display: block;
|
||||
margin: 0 -20px;
|
||||
background-color: $--color-white;
|
||||
}
|
||||
}
|
||||
|
||||
@include when(disabled) {
|
||||
cursor: not-allowed;
|
||||
color: $--font-color-disabled-base;
|
||||
}
|
||||
}
|
||||
|
||||
@include m(medium) {
|
||||
padding: 6px 0;
|
||||
|
||||
@include e(item) {
|
||||
line-height: 30px;
|
||||
padding: 0 17px;
|
||||
font-size: 14px;
|
||||
|
||||
&.#{$namespace}-dropdown-menu__item--divided {
|
||||
$divided-offset: 6px;
|
||||
margin-top: $divided-offset;
|
||||
|
||||
&:before {
|
||||
height: $divided-offset;
|
||||
margin: 0 -17px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include m(small) {
|
||||
padding: 6px 0;
|
||||
|
||||
@include e(item) {
|
||||
line-height: 27px;
|
||||
padding: 0 15px;
|
||||
font-size: 13px;
|
||||
|
||||
&.#{$namespace}-dropdown-menu__item--divided {
|
||||
$divided-offset: 4px;
|
||||
margin-top: $divided-offset;
|
||||
|
||||
&:before {
|
||||
height: $divided-offset;
|
||||
margin: 0 -15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include m(mini) {
|
||||
padding: 3px 0;
|
||||
|
||||
@include e(item) {
|
||||
line-height: 24px;
|
||||
padding: 0 10px;
|
||||
font-size: 12px;
|
||||
|
||||
&.#{$namespace}-dropdown-menu__item--divided {
|
||||
$divided-offset: 3px;
|
||||
margin-top: $divided-offset;
|
||||
|
||||
&:before {
|
||||
height: $divided-offset;
|
||||
margin: 0 -10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
45
src/assets/css/themes/src/empty.scss
Normal file
45
src/assets/css/themes/src/empty.scss
Normal file
@@ -0,0 +1,45 @@
|
||||
@import "mixins/mixins";
|
||||
@import "common/var";
|
||||
|
||||
@include b(empty) {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
padding: $--empty-padding;
|
||||
|
||||
@include e(image) {
|
||||
width: $--empty-image-width;
|
||||
|
||||
img {
|
||||
user-select: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
vertical-align: top;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: $--svg-monochrome-grey;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
@include e(description) {
|
||||
margin-top: $--empty-description-margin-top;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
font-size: $--font-size-base;
|
||||
color: $--color-text-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
@include e(bottom) {
|
||||
margin-top: $--empty-bottom-margin-top;
|
||||
}
|
||||
}
|
||||
BIN
src/assets/css/themes/src/fonts/element-icons.ttf
Normal file
BIN
src/assets/css/themes/src/fonts/element-icons.ttf
Normal file
Binary file not shown.
BIN
src/assets/css/themes/src/fonts/element-icons.woff
Normal file
BIN
src/assets/css/themes/src/fonts/element-icons.woff
Normal file
Binary file not shown.
8
src/assets/css/themes/src/footer.scss
Normal file
8
src/assets/css/themes/src/footer.scss
Normal file
@@ -0,0 +1,8 @@
|
||||
@import "mixins/mixins";
|
||||
@import "common/var";
|
||||
|
||||
@include b(footer) {
|
||||
padding: $--footer-padding;
|
||||
box-sizing: border-box;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
0
src/assets/css/themes/src/form-item.scss
Normal file
0
src/assets/css/themes/src/form-item.scss
Normal file
167
src/assets/css/themes/src/form.scss
Normal file
167
src/assets/css/themes/src/form.scss
Normal file
@@ -0,0 +1,167 @@
|
||||
@import "mixins/mixins";
|
||||
@import "mixins/utils";
|
||||
@import "common/var";
|
||||
|
||||
@include b(form) {
|
||||
@include m(label-left) {
|
||||
& .#{$namespace}-form-item__label {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
@include m(label-top) {
|
||||
& .#{$namespace}-form-item__label {
|
||||
float: none;
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
padding: 0 0 10px 0;
|
||||
}
|
||||
}
|
||||
@include m(inline) {
|
||||
& .#{$namespace}-form-item {
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
vertical-align: top;
|
||||
}
|
||||
& .#{$namespace}-form-item__label {
|
||||
float: none;
|
||||
display: inline-block;
|
||||
}
|
||||
& .#{$namespace}-form-item__content {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
&.#{$namespace}-form--label-top .#{$namespace}-form-item__content {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include b(form-item) {
|
||||
margin-bottom: 22px;
|
||||
@include utils-clearfix;
|
||||
|
||||
& .#{$namespace}-form-item {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
& .#{$namespace}-input__validateIcon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@include m(medium) {
|
||||
.#{$namespace}-form-item__label {
|
||||
line-height: 36px;
|
||||
}
|
||||
.#{$namespace}-form-item__content {
|
||||
line-height: 36px;
|
||||
}
|
||||
}
|
||||
@include m(small) {
|
||||
.#{$namespace}-form-item__label {
|
||||
line-height: 32px;
|
||||
}
|
||||
.#{$namespace}-form-item__content {
|
||||
line-height: 32px;
|
||||
}
|
||||
&.#{$namespace}-form-item {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.#{$namespace}-form-item__error {
|
||||
padding-top: 2px;
|
||||
}
|
||||
}
|
||||
@include m(mini) {
|
||||
.#{$namespace}-form-item__label {
|
||||
line-height: 28px;
|
||||
}
|
||||
.#{$namespace}-form-item__content {
|
||||
line-height: 28px;
|
||||
}
|
||||
&.#{$namespace}-form-item {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.#{$namespace}-form-item__error {
|
||||
padding-top: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
@include e(label-wrap) {
|
||||
float: left;
|
||||
.#{$namespace}-form-item__label {
|
||||
display: inline-block;
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include e(label) {
|
||||
text-align: right;
|
||||
vertical-align: middle;
|
||||
float: left;
|
||||
font-size: $--form-label-font-size;
|
||||
color: $--color-text-regular;
|
||||
line-height: 40px;
|
||||
padding: 0 12px 0 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@include e(content) {
|
||||
line-height: 40px;
|
||||
position: relative;
|
||||
font-size: 14px;
|
||||
@include utils-clearfix;
|
||||
|
||||
.#{$namespace}-input-group {
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
@include e(error) {
|
||||
color: $--color-danger;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
padding-top: 4px;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
|
||||
@include m(inline) {
|
||||
position: relative;
|
||||
top: auto;
|
||||
left: auto;
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@include when(required) {
|
||||
@include pseudo('not(.is-no-asterisk)') {
|
||||
& > .#{$namespace}-form-item__label:before,
|
||||
& .#{$namespace}-form-item__label-wrap > .#{$namespace}-form-item__label:before {
|
||||
content: '*';
|
||||
color: $--color-danger;
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include when(error) {
|
||||
& .#{$namespace}-input__inner,
|
||||
& .#{$namespace}-textarea__inner {
|
||||
&, &:focus {
|
||||
border-color: $--color-danger;
|
||||
}
|
||||
}
|
||||
& .#{$namespace}-input-group__append,
|
||||
& .#{$namespace}-input-group__prepend {
|
||||
& .#{$namespace}-input__inner {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
.#{$namespace}-input__validateIcon {
|
||||
color: $--color-danger;
|
||||
}
|
||||
}
|
||||
|
||||
@include m(feedback) {
|
||||
.#{$namespace}-input__validateIcon {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
8
src/assets/css/themes/src/header.scss
Normal file
8
src/assets/css/themes/src/header.scss
Normal file
@@ -0,0 +1,8 @@
|
||||
@import "mixins/mixins";
|
||||
@import "common/var";
|
||||
|
||||
@include b(header) {
|
||||
padding: $--header-padding;
|
||||
box-sizing: border-box;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
1167
src/assets/css/themes/src/icon.scss
Normal file
1167
src/assets/css/themes/src/icon.scss
Normal file
File diff suppressed because it is too large
Load Diff
134
src/assets/css/themes/src/image-viewer.scss
Normal file
134
src/assets/css/themes/src/image-viewer.scss
Normal file
@@ -0,0 +1,134 @@
|
||||
@import "mixins/mixins";
|
||||
@import "common/var";
|
||||
|
||||
@mixin op-icon() {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
font-size: 24px;
|
||||
color: #fff;
|
||||
background-color: $--color-text-regular;
|
||||
border-color: #fff;
|
||||
}
|
||||
|
||||
@include b(image-viewer) {
|
||||
|
||||
@include e(wrapper) {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
@include e(btn) {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
opacity: .8;
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
@include e(close) {
|
||||
top: 40px;
|
||||
right: 40px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
@include e(canvas) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@include e(actions) {
|
||||
left: 50%;
|
||||
bottom: 30px;
|
||||
transform: translateX(-50%);
|
||||
width: 282px;
|
||||
height: 44px;
|
||||
padding: 0 23px;
|
||||
background-color: $--color-text-regular;
|
||||
border-color: #fff;
|
||||
border-radius: 22px;
|
||||
|
||||
@include e(actions__inner) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: justify;
|
||||
cursor: default;
|
||||
font-size: 23px;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
}
|
||||
|
||||
@include e(prev){
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
left: 40px;
|
||||
@include op-icon()
|
||||
}
|
||||
|
||||
@include e(next){
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
right: 40px;
|
||||
text-indent: 2px;
|
||||
@include op-icon();
|
||||
}
|
||||
|
||||
@include e(close) {
|
||||
@include op-icon();
|
||||
}
|
||||
|
||||
@include e(mask) {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: .5;
|
||||
background: #000;
|
||||
}
|
||||
}
|
||||
|
||||
.viewer-fade-enter-active {
|
||||
animation: viewer-fade-in .3s;
|
||||
}
|
||||
|
||||
.viewer-fade-leave-active {
|
||||
animation: viewer-fade-out .3s;
|
||||
}
|
||||
|
||||
@keyframes viewer-fade-in {
|
||||
0% {
|
||||
transform: translate3d(0, -20px, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translate3d(0, 0, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes viewer-fade-out {
|
||||
0% {
|
||||
transform: translate3d(0, 0, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translate3d(0, -20px, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
48
src/assets/css/themes/src/image.scss
Normal file
48
src/assets/css/themes/src/image.scss
Normal file
@@ -0,0 +1,48 @@
|
||||
@import "mixins/mixins";
|
||||
@import "common/var";
|
||||
@import "./image-viewer.scss";
|
||||
|
||||
%size {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@include b(image) {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
|
||||
@include e(inner) {
|
||||
@extend %size;
|
||||
vertical-align: top;
|
||||
|
||||
@include m(center) {
|
||||
position: relative;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@include e(placeholder) {
|
||||
@extend %size;
|
||||
background: $--background-color-base;
|
||||
}
|
||||
|
||||
@include e(error) {
|
||||
@extend %size;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
background: $--background-color-base;
|
||||
color: $--color-text-placeholder;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
@include e(preview) {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
92
src/assets/css/themes/src/index.scss
Normal file
92
src/assets/css/themes/src/index.scss
Normal file
@@ -0,0 +1,92 @@
|
||||
@import "./base.scss";
|
||||
@import "./pagination.scss";
|
||||
@import "./dialog.scss";
|
||||
@import "./autocomplete.scss";
|
||||
@import "./dropdown.scss";
|
||||
@import "./dropdown-menu.scss";
|
||||
@import "./dropdown-item.scss";
|
||||
@import "./menu.scss";
|
||||
@import "./submenu.scss";
|
||||
@import "./menu-item.scss";
|
||||
@import "./menu-item-group.scss";
|
||||
@import "./input.scss";
|
||||
@import "./input-number.scss";
|
||||
@import "./radio.scss";
|
||||
@import "./radio-group.scss";
|
||||
@import "./radio-button.scss";
|
||||
@import "./checkbox.scss";
|
||||
@import "./checkbox-button.scss";
|
||||
@import "./checkbox-group.scss";
|
||||
@import "./switch.scss";
|
||||
@import "./select.scss";
|
||||
@import "./button.scss";
|
||||
@import "./button-group.scss";
|
||||
@import "./table.scss";
|
||||
@import "./table-column.scss";
|
||||
@import "./date-picker.scss";
|
||||
@import "./time-select.scss";
|
||||
@import "./time-picker.scss";
|
||||
@import "./popover.scss";
|
||||
@import "./tooltip.scss";
|
||||
@import "./message-box.scss";
|
||||
@import "./breadcrumb.scss";
|
||||
@import "./breadcrumb-item.scss";
|
||||
@import "./form.scss";
|
||||
@import "./form-item.scss";
|
||||
@import "./tabs.scss";
|
||||
@import "./tab-pane.scss";
|
||||
@import "./tag.scss";
|
||||
@import "./tree.scss";
|
||||
@import "./alert.scss";
|
||||
@import "./notification.scss";
|
||||
@import "./slider.scss";
|
||||
@import "./loading.scss";
|
||||
@import "./row.scss";
|
||||
@import "./col.scss";
|
||||
@import "./upload.scss";
|
||||
@import "./progress.scss";
|
||||
@import "./spinner.scss";
|
||||
@import "./message.scss";
|
||||
@import "./badge.scss";
|
||||
@import "./card.scss";
|
||||
@import "./rate.scss";
|
||||
@import "./steps.scss";
|
||||
@import "./step.scss";
|
||||
@import "./carousel.scss";
|
||||
@import "./scrollbar.scss";
|
||||
@import "./carousel-item.scss";
|
||||
@import "./collapse.scss";
|
||||
@import "./collapse-item.scss";
|
||||
@import "./cascader.scss";
|
||||
@import "./color-picker.scss";
|
||||
@import "./transfer.scss";
|
||||
@import "./container.scss";
|
||||
@import "./header.scss";
|
||||
@import "./aside.scss";
|
||||
@import "./main.scss";
|
||||
@import "./footer.scss";
|
||||
@import "./timeline.scss";
|
||||
@import "./timeline-item.scss";
|
||||
@import "./link.scss";
|
||||
@import "./divider.scss";
|
||||
@import "./image.scss";
|
||||
@import "./image-viewer.scss";
|
||||
@import "./calendar.scss";
|
||||
@import "./backtop.scss";
|
||||
@import "./infinite-scroll.scss";
|
||||
@import "./page-header.scss";
|
||||
@import "./cascader-panel.scss";
|
||||
@import "./avatar.scss";
|
||||
@import "./drawer.scss";
|
||||
@import "./popconfirm.scss";
|
||||
@import "./overlay.scss";
|
||||
@import "./virtual-list.scss";
|
||||
@import "./space.scss";
|
||||
@import "./skeleton.scss";
|
||||
@import "./skeleton-item.scss";
|
||||
@import "./empty.scss";
|
||||
@import "./affix.scss";
|
||||
@import "./check-tag.scss";
|
||||
@import "./descriptions";
|
||||
@import "./descriptions-item";
|
||||
@import "./result.scss";
|
||||
0
src/assets/css/themes/src/infinite-scroll.scss
Normal file
0
src/assets/css/themes/src/infinite-scroll.scss
Normal file
0
src/assets/css/themes/src/infiniteScroll.scss
Normal file
0
src/assets/css/themes/src/infiniteScroll.scss
Normal file
180
src/assets/css/themes/src/input-number.scss
Normal file
180
src/assets/css/themes/src/input-number.scss
Normal file
@@ -0,0 +1,180 @@
|
||||
@import "mixins/mixins";
|
||||
@import "common/var";
|
||||
@import "input";
|
||||
|
||||
@include b(input-number) {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 180px;
|
||||
line-height: #{$--input-height - 2};
|
||||
|
||||
.#{$namespace}-input {
|
||||
display: block;
|
||||
|
||||
&__inner {
|
||||
-webkit-appearance: none;
|
||||
padding-left: #{$--input-height + 10};
|
||||
padding-right: #{$--input-height + 10};
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
@include e((increase, decrease)) {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 1px;
|
||||
width: $--input-height;
|
||||
height: auto;
|
||||
text-align: center;
|
||||
background: $--background-color-base;
|
||||
color: $--color-text-regular;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
|
||||
&:hover {
|
||||
color: $--color-primary;
|
||||
|
||||
&:not(.is-disabled) ~ .#{$namespace}-input .#{$namespace}-input__inner:not(.is-disabled) {
|
||||
border-color: $--input-focus-border;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-disabled {
|
||||
color: $--disabled-color-base;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
@include e(increase) {
|
||||
right: 1px;
|
||||
border-radius: 0 $--border-radius-base $--border-radius-base 0;
|
||||
border-left: $--border-base;
|
||||
}
|
||||
|
||||
@include e(decrease) {
|
||||
left: 1px;
|
||||
border-radius: $--border-radius-base 0 0 $--border-radius-base;
|
||||
border-right: $--border-base;
|
||||
}
|
||||
|
||||
@include when(disabled) {
|
||||
@include e((increase, decrease)) {
|
||||
border-color: $--disabled-border-base;
|
||||
color: $--disabled-border-base;
|
||||
|
||||
&:hover {
|
||||
color: $--disabled-border-base;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include m(medium) {
|
||||
width: 200px;
|
||||
line-height: #{$--input-medium-height - 2};
|
||||
|
||||
@include e((increase, decrease)) {
|
||||
width: $--input-medium-height;
|
||||
font-size: $--input-medium-font-size;
|
||||
}
|
||||
|
||||
.#{$namespace}-input__inner {
|
||||
padding-left: #{$--input-medium-height + 7};
|
||||
padding-right: #{$--input-medium-height + 7};
|
||||
}
|
||||
}
|
||||
|
||||
@include m(small) {
|
||||
width: 130px;
|
||||
line-height: #{$--input-small-height - 2};
|
||||
|
||||
@include e((increase, decrease)) {
|
||||
width: $--input-small-height;
|
||||
font-size: $--input-small-font-size;
|
||||
|
||||
[class*=#{$namespace}-icon] {
|
||||
transform: scale(.9);
|
||||
}
|
||||
}
|
||||
|
||||
.#{$namespace}-input__inner {
|
||||
padding-left: #{$--input-small-height + 7};
|
||||
padding-right: #{$--input-small-height + 7};
|
||||
}
|
||||
}
|
||||
|
||||
@include m(mini) {
|
||||
width: 130px;
|
||||
line-height: #{$--input-mini-height - 2};
|
||||
|
||||
@include e((increase, decrease)) {
|
||||
width: $--input-mini-height;
|
||||
font-size: $--input-mini-font-size;
|
||||
|
||||
[class*=#{$namespace}-icon] {
|
||||
transform: scale(.8);
|
||||
}
|
||||
}
|
||||
|
||||
.#{$namespace}-input__inner {
|
||||
padding-left: #{$--input-mini-height + 7};
|
||||
padding-right: #{$--input-mini-height + 7};
|
||||
}
|
||||
}
|
||||
|
||||
@include when(without-controls) {
|
||||
.#{$namespace}-input__inner {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@include when(controls-right) {
|
||||
.#{$namespace}-input__inner {
|
||||
padding-left: 15px;
|
||||
padding-right: #{$--input-height + 10};
|
||||
}
|
||||
|
||||
@include e((increase, decrease)) {
|
||||
height: auto;
|
||||
line-height: #{($--input-height - 2) / 2};
|
||||
|
||||
[class*=#{$namespace}-icon] {
|
||||
transform: scale(.8);
|
||||
}
|
||||
}
|
||||
|
||||
@include e(increase) {
|
||||
border-radius: 0 $--border-radius-base 0 0;
|
||||
border-bottom: $--border-base;
|
||||
}
|
||||
|
||||
@include e(decrease) {
|
||||
right: 1px;
|
||||
bottom: 1px;
|
||||
top: auto;
|
||||
left: auto;
|
||||
border-right: none;
|
||||
border-left: $--border-base;
|
||||
border-radius: 0 0 $--border-radius-base 0;
|
||||
}
|
||||
|
||||
&[class*=medium] {
|
||||
[class*=increase], [class*=decrease] {
|
||||
line-height: #{($--input-medium-height - 2) / 2};
|
||||
}
|
||||
}
|
||||
|
||||
&[class*=small] {
|
||||
[class*=increase], [class*=decrease] {
|
||||
line-height: #{($--input-small-height - 2) / 2};
|
||||
}
|
||||
}
|
||||
|
||||
&[class*=mini] {
|
||||
[class*=increase], [class*=decrease] {
|
||||
line-height: #{($--input-mini-height - 2) / 2};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
360
src/assets/css/themes/src/input.scss
Normal file
360
src/assets/css/themes/src/input.scss
Normal file
@@ -0,0 +1,360 @@
|
||||
@import "mixins/mixins";
|
||||
@import "common/var";
|
||||
|
||||
@include b(textarea) {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
vertical-align: bottom;
|
||||
font-size: $--font-size-base;
|
||||
|
||||
@include e(inner) {
|
||||
display: block;
|
||||
resize: vertical;
|
||||
padding: 5px 15px;
|
||||
line-height: 1.5;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
font-size: inherit;
|
||||
color: $--input-font-color;
|
||||
background-color: $--input-background-color;
|
||||
background-image: none;
|
||||
border: $--input-border;
|
||||
border-radius: $--input-border-radius;
|
||||
transition: $--border-transition-base;
|
||||
|
||||
&::placeholder {
|
||||
color: $--input-placeholder-color;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: $--input-hover-border;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: $--input-focus-border;
|
||||
}
|
||||
}
|
||||
|
||||
& .#{$namespace}-input__count {
|
||||
color: $--color-info;
|
||||
background: $--color-white;
|
||||
position: absolute;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
bottom: 5px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
@include when(disabled) {
|
||||
.#{$namespace}-textarea__inner {
|
||||
background-color: $--input-disabled-fill;
|
||||
border-color: $--input-disabled-border;
|
||||
color: $--input-disabled-color;
|
||||
cursor: not-allowed;
|
||||
|
||||
&::placeholder {
|
||||
color: $--input-disabled-placeholder-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include when(exceed) {
|
||||
.#{$namespace}-textarea__inner {
|
||||
border-color: $--color-danger;
|
||||
}
|
||||
|
||||
.#{$namespace}-input__count {
|
||||
color: $--color-danger;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include b(input) {
|
||||
position: relative;
|
||||
font-size: $--font-size-base;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
line-height: $--input-height;
|
||||
@include scroll-bar;
|
||||
|
||||
& .#{$namespace}-input__clear {
|
||||
color: $--input-icon-color;
|
||||
font-size: $--input-font-size;
|
||||
cursor: pointer;
|
||||
transition: $--color-transition-base;
|
||||
|
||||
&:hover {
|
||||
color: $--input-clear-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
& .#{$namespace}-input__count {
|
||||
height: 100%;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
color: $--color-info;
|
||||
font-size: 12px;
|
||||
|
||||
.#{$namespace}-input__count-inner {
|
||||
background: $--color-white;
|
||||
line-height: initial;
|
||||
display: inline-block;
|
||||
padding: 0 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@include e(inner) {
|
||||
-webkit-appearance: none;
|
||||
background-color: $--input-background-color;
|
||||
background-image: none;
|
||||
border-radius: $--input-border-radius;
|
||||
border: $--input-border;
|
||||
box-sizing: border-box;
|
||||
color: $--input-font-color;
|
||||
display: inline-block;
|
||||
font-size: inherit;
|
||||
height: $--input-height;
|
||||
line-height: $--input-height;
|
||||
outline: none;
|
||||
padding: 0 15px;
|
||||
transition: $--border-transition-base;
|
||||
width: 100%;
|
||||
|
||||
&::placeholder {
|
||||
color: $--input-placeholder-color;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: $--input-hover-border;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: $--input-focus-border;
|
||||
}
|
||||
}
|
||||
|
||||
@include e(suffix) {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
right: 5px;
|
||||
top: 0;
|
||||
text-align: center;
|
||||
color: $--input-icon-color;
|
||||
transition: all .3s;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@include e(suffix-inner) {
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
@include e(prefix) {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
left: 5px;
|
||||
top: 0;
|
||||
text-align: center;
|
||||
color: $--input-icon-color;
|
||||
transition: all .3s;
|
||||
}
|
||||
|
||||
@include e(icon) {
|
||||
width: 25px;
|
||||
text-align: center;
|
||||
transition: all .3s;
|
||||
line-height: $--input-height;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
height: 100%;
|
||||
width: 0;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
@include e(validateIcon) {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@include when(active) {
|
||||
.#{$namespace}-input__inner {
|
||||
outline: none;
|
||||
border-color: $--input-focus-border;
|
||||
}
|
||||
}
|
||||
|
||||
@include when(disabled) {
|
||||
.#{$namespace}-input__inner {
|
||||
background-color: $--input-disabled-fill;
|
||||
border-color: $--input-disabled-border;
|
||||
color: $--input-disabled-color;
|
||||
cursor: not-allowed;
|
||||
|
||||
&::placeholder {
|
||||
color: $--input-disabled-placeholder-color;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$namespace}-input__icon {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
@include when(exceed) {
|
||||
.#{$namespace}-input__inner {
|
||||
border-color: $--color-danger;
|
||||
}
|
||||
|
||||
.#{$namespace}-input__suffix {
|
||||
.#{$namespace}-input__count {
|
||||
color: $--color-danger;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include m(suffix) {
|
||||
.#{$namespace}-input__inner {
|
||||
padding-right: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
@include m(prefix) {
|
||||
.#{$namespace}-input__inner {
|
||||
padding-left: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
@include m(medium) {
|
||||
font-size: $--input-medium-font-size;
|
||||
line-height: $--input-medium-height;
|
||||
|
||||
@include e(inner) {
|
||||
height: $--input-medium-height;
|
||||
line-height: $--input-medium-height;
|
||||
}
|
||||
|
||||
.#{$namespace}-input__icon {
|
||||
line-height: $--input-medium-height;
|
||||
}
|
||||
}
|
||||
@include m(small) {
|
||||
font-size: $--input-small-font-size;
|
||||
line-height: $--input-small-height;
|
||||
|
||||
@include e(inner) {
|
||||
height: $--input-small-height;
|
||||
line-height: $--input-small-height;
|
||||
}
|
||||
|
||||
.#{$namespace}-input__icon {
|
||||
line-height: $--input-small-height;
|
||||
}
|
||||
}
|
||||
@include m(mini) {
|
||||
font-size: $--input-mini-font-size;
|
||||
line-height: $--input-mini-height;
|
||||
|
||||
@include e(inner) {
|
||||
height: $--input-mini-height;
|
||||
line-height: $--input-mini-height;
|
||||
}
|
||||
|
||||
.#{$namespace}-input__icon {
|
||||
line-height: $--input-mini-height;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include b(input-group) {
|
||||
line-height: normal;
|
||||
display: inline-table;
|
||||
width: 100%;
|
||||
border-collapse: separate;
|
||||
border-spacing:0;
|
||||
|
||||
> .#{$namespace}-input__inner {
|
||||
vertical-align: middle;
|
||||
display: table-cell;
|
||||
}
|
||||
|
||||
@include e((append, prepend)) {
|
||||
background-color: $--background-color-base;
|
||||
color: $--color-info;
|
||||
vertical-align: middle;
|
||||
display: table-cell;
|
||||
position: relative;
|
||||
border: $--border-base;
|
||||
border-radius: $--input-border-radius;
|
||||
padding: 0 20px;
|
||||
width: 1px;
|
||||
white-space: nowrap;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.#{$namespace}-select,
|
||||
.#{$namespace}-button {
|
||||
display: inline-block;
|
||||
margin: -10px -20px;
|
||||
}
|
||||
|
||||
button.#{$namespace}-button,
|
||||
div.#{$namespace}-select .#{$namespace}-input__inner,
|
||||
div.#{$namespace}-select:hover .#{$namespace}-input__inner {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
color: inherit;
|
||||
border-top: 0;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.#{$namespace}-button,
|
||||
.#{$namespace}-input {
|
||||
font-size: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
@include e(prepend) {
|
||||
border-right: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
@include e(append) {
|
||||
border-left: 0;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
@include m(prepend) {
|
||||
.#{$namespace}-input__inner {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
.#{$namespace}-select .#{$namespace}-input.is-focus .#{$namespace}-input__inner {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@include m(append) {
|
||||
.#{$namespace}-input__inner {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
.#{$namespace}-select .#{$namespace}-input.is-focus .#{$namespace}-input__inner {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** disalbe default clear on IE */
|
||||
.#{$namespace}-input__inner::-ms-clear {
|
||||
display: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
81
src/assets/css/themes/src/link.scss
Normal file
81
src/assets/css/themes/src/link.scss
Normal file
@@ -0,0 +1,81 @@
|
||||
@import "mixins/mixins";
|
||||
@import "common/var";
|
||||
|
||||
$typeMap: (
|
||||
primary: $--link-primary-font-color,
|
||||
danger: $--link-danger-font-color,
|
||||
success: $--link-success-font-color,
|
||||
warning: $--link-warning-font-color,
|
||||
info: $--link-info-font-color);
|
||||
|
||||
@include b(link) {
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
font-size: $--link-font-size;
|
||||
font-weight: $--link-font-weight;
|
||||
|
||||
@include when(underline) {
|
||||
&:hover:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 0;
|
||||
bottom: 0;
|
||||
border-bottom: 1px solid $--link-default-active-color
|
||||
}
|
||||
}
|
||||
|
||||
@include when(disabled) {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
& [class*="#{$namespace}-icon-"] {
|
||||
& + span {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&.#{$namespace}-link--default {
|
||||
color: $--link-default-font-color;
|
||||
&:hover {
|
||||
color: $--link-default-active-color
|
||||
}
|
||||
&:after {
|
||||
border-color: $--link-default-active-color
|
||||
}
|
||||
@include when(disabled) {
|
||||
color: $--link-disabled-font-color
|
||||
}
|
||||
}
|
||||
|
||||
@each $type, $primaryColor in $typeMap {
|
||||
&.#{$namespace}-link--#{$type} {
|
||||
color: $primaryColor;
|
||||
&:hover {
|
||||
color: mix($primaryColor, $--color-white, 80%)
|
||||
}
|
||||
&:after {
|
||||
border-color: $primaryColor
|
||||
}
|
||||
@include when(disabled) {
|
||||
color: mix($primaryColor, $--color-white, 50%)
|
||||
}
|
||||
@include when(underline) {
|
||||
&:hover:after {
|
||||
border-color: $primaryColor
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user