test/element-plus
1
0
Fork 0
mirror of https://gitee.com/element-plus/element-plus.git synced 2024-12-05 04:37:47 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

fix: correct css prefix (#1407)

Browse Source
This commit is contained in:
on the field of hope 2021-02-04 16:29:23 +08:00 committed by GitHub
parent ae17b9be04
commit bf09e894c5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
92 changed files with 1034 additions and 1030 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
packages/theme-chalk/src/alert.scss
View File

@ -16,16 +16,16 @@
transition: opacity .2s; transition: opacity .2s;
@include when(light) { @include when(light) {
.el-alert__closebtn { .#{$namespace}-alert__closebtn {
color: $--color-text-placeholder; color: $--color-text-placeholder;
} }
} }
@include when(dark) { @include when(dark) {
.el-alert__closebtn { .#{$namespace}-alert__closebtn {
color: $--color-white; color: $--color-white;
} }
.el-alert__description { .#{$namespace}-alert__description {
color: $--color-white; color: $--color-white;
} }
} }
@ -39,7 +39,7 @@
background-color: $--alert-success-color; background-color: $--alert-success-color;
color: $--color-success; color: $--color-success;
.el-alert__description { .#{$namespace}-alert__description {
color: $--color-success; color: $--color-success;
} }
} }
@ -61,7 +61,7 @@
color: $--color-white; color: $--color-white;
} }
.el-alert__description { .#{$namespace}-alert__description {
color: $--color-info; color: $--color-info;
} }
} }
@ -71,7 +71,7 @@
background-color: $--alert-warning-color; background-color: $--alert-warning-color;
color: $--color-warning; color: $--color-warning;
.el-alert__description { .#{$namespace}-alert__description {
color: $--color-warning; color: $--color-warning;
} }
} }
@ -87,7 +87,7 @@
background-color: $--alert-danger-color; background-color: $--alert-danger-color;
color: $--color-danger; color: $--color-danger;
.el-alert__description { .#{$namespace}-alert__description {
color: $--color-danger; color: $--color-danger;
} }
} }
@ -120,7 +120,7 @@
} }
} }
& .el-alert__description { & .#{$namespace}-alert__description {
font-size: $--alert-description-font-size; font-size: $--alert-description-font-size;
margin: 5px 0 0 0; margin: 5px 0 0 0;
} }
@ -141,7 +141,7 @@
} }
} }
.el-alert-fade-enter, .#{$namespace}-alert-fade-enter,
.el-alert-fade-leave-active { .#{$namespace}-alert-fade-leave-active {
opacity: 0; opacity: 0;
} }

2
packages/theme-chalk/src/autocomplete.scss
View File

@ -78,7 +78,7 @@
} }
} }
& .el-icon-loading { & .#{$namespace}-icon-loading {
vertical-align: middle; vertical-align: middle;
} }
} }

6
packages/theme-chalk/src/breadcrumb.scss
View File

@ -38,8 +38,8 @@
} }
&:last-child { &:last-child {
.el-breadcrumb__inner, .#{$namespace}-breadcrumb__inner,
.el-breadcrumb__inner a { .#{$namespace}-breadcrumb__inner a {
&, &:hover { &, &:hover {
font-weight: normal; font-weight: normal;
color: $--color-text-regular; color: $--color-text-regular;
@ -47,7 +47,7 @@
} }
} }
.el-breadcrumb__separator { .#{$namespace}-breadcrumb__separator {
display: none; display: none;
} }
} }

14
packages/theme-chalk/src/button.scss
View File

@ -45,7 +45,7 @@
border: 0; border: 0;
} }
& [class*="el-icon-"] { & [class*="#{$namespace}-icon-"] {
& + span { & + span {
margin-left: 5px; margin-left: 5px;
} }
@ -83,7 +83,7 @@
border-color: $--button-disabled-border-color; border-color: $--button-disabled-border-color;
} }
&.el-button--text { &.#{$namespace}-button--text {
background-color: transparent; background-color: transparent;
} }
@ -193,10 +193,10 @@
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
& > .el-button { & > .#{$namespace}-button {
float: left; float: left;
position: relative; position: relative;
& + .el-button { & + .#{$namespace}-button {
margin-left: 0; margin-left: 0;
} }
&.is-disabled { &.is-disabled {
@ -242,8 +242,8 @@
} }
} }
& > .el-dropdown { & > .#{$namespace}-dropdown {
& > .el-button { & > .#{$namespace}-button {
border-top-left-radius: 0; border-top-left-radius: 0;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
border-left-color: rgba($--color-white, 0.5); border-left-color: rgba($--color-white, 0.5);
@ -251,7 +251,7 @@
} }
@each $type in (primary, success, warning, danger, info) { @each $type in (primary, success, warning, danger, info) {
.el-button--#{$type} { .#{$namespace}-button--#{$type} {
&:first-child { &:first-child {
border-right-color: rgba($--color-white, 0.5); border-right-color: rgba($--color-white, 0.5);
} }

2
packages/theme-chalk/src/calendar.scss
View File

@ -63,7 +63,7 @@
border-left: $--calendar-border; border-left: $--calendar-border;
} }
tr.el-calendar-table__row--hide-border td { tr.#{$namespace}-calendar-table__row--hide-border td {
border-top: none; border-top: none;
} }

4
packages/theme-chalk/src/carousel-item.scss
View File

@ -26,8 +26,8 @@
&.is-in-stage { &.is-in-stage {
cursor: pointer; cursor: pointer;
z-index: $--index-normal; z-index: $--index-normal;
&:hover .el-carousel__mask, &:hover .#{$namespace}-carousel__mask,
&.is-hover .el-carousel__mask { &.is-hover .#{$namespace}-carousel__mask {
opacity: 0.12; opacity: 0.12;
} }
} }

8
packages/theme-chalk/src/carousel.scss
View File

@ -77,7 +77,7 @@
text-align: center; text-align: center;
position: static; position: static;
transform: none; transform: none;
.el-carousel__indicator:hover button { .#{$namespace}-carousel__indicator:hover button {
opacity: 0.64; opacity: 0.64;
} }
button { button {
@ -92,14 +92,14 @@
transform: none; transform: none;
text-align: center; text-align: center;
.el-carousel__button { .#{$namespace}-carousel__button {
height: auto; height: auto;
width: auto; width: auto;
padding: 2px 18px; padding: 2px 18px;
font-size: 12px; font-size: 12px;
} }
.el-carousel__indicator { .#{$namespace}-carousel__indicator {
padding: 6px 4px; padding: 6px 4px;
} }
} }
@ -120,7 +120,7 @@
@include m(vertical) { @include m(vertical) {
padding: $--carousel-indicator-padding-horizontal $--carousel-indicator-padding-vertical; padding: $--carousel-indicator-padding-horizontal $--carousel-indicator-padding-vertical;
.el-carousel__button { .#{$namespace}-carousel__button {
width: $--carousel-indicator-height; width: $--carousel-indicator-height;
height: #{$--carousel-indicator-width / 2}; height: #{$--carousel-indicator-width / 2};
} }

6
packages/theme-chalk/src/cascader-panel.scss
View File

@ -23,7 +23,7 @@
&:last-child { &:last-child {
border-right: none; border-right: none;
.el-cascader-node { .#{$namespace}-cascader-node {
padding-right: 20px; padding-right: 20px;
} }
} }
@ -111,10 +111,10 @@
text-overflow: ellipsis; text-overflow: ellipsis;
} }
> .el-radio { > .#{$namespace}-radio {
margin-right: 0; margin-right: 0;
.el-radio__label { .#{$namespace}-radio__label {
padding-left: 0; padding-left: 0;
} }
} }

18
packages/theme-chalk/src/cascader.scss
View File

@ -13,16 +13,16 @@
outline: none; outline: none;
&:not(.is-disabled):hover { &:not(.is-disabled):hover {
.el-input__inner { .#{$namespace}-input__inner {
cursor: pointer; cursor: pointer;
border-color: $--input-hover-border; border-color: $--input-hover-border;
} }
} }
.el-input { .#{$namespace}-input {
cursor: pointer; cursor: pointer;
.el-input__inner { .#{$namespace}-input__inner {
text-overflow: ellipsis; text-overflow: ellipsis;
&:focus { &:focus {
@ -30,7 +30,7 @@
} }
} }
.el-icon-arrow-down { .#{$namespace}-icon-arrow-down {
transition: transform .3s; transition: transform .3s;
font-size: 14px; font-size: 14px;
@ -39,12 +39,12 @@
} }
} }
.el-icon-circle-close:hover { .#{$namespace}-icon-circle-close:hover {
color: $--input-clear-hover-color; color: $--input-clear-hover-color;
} }
@include when(focus) { @include when(focus) {
.el-input__inner { .#{$namespace}-input__inner {
border-color: $--input-focus-border; border-color: $--input-focus-border;
} }
} }
@ -66,7 +66,7 @@
} }
@include when(disabled) { @include when(disabled) {
.el-cascader__label { .#{$namespace}-cascader__label {
z-index: #{$--index-normal + 1}; z-index: #{$--index-normal + 1};
color: $--disabled-color-base; color: $--disabled-color-base;
} }
@ -95,7 +95,7 @@
text-align: left; text-align: left;
box-sizing: border-box; box-sizing: border-box;
.el-tag { .#{$namespace}-tag {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
max-width: 100%; max-width: 100%;
@ -113,7 +113,7 @@
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.el-icon-close { .#{$namespace}-icon-close {
flex: none; flex: none;
background-color: $--color-text-placeholder; background-color: $--color-text-placeholder;
color: $--color-white; color: $--color-white;

60
packages/theme-chalk/src/checkbox.scss
View File

@ -31,37 +31,37 @@
cursor: not-allowed; cursor: not-allowed;
} }
& + .el-checkbox.is-bordered { & + .#{$namespace}-checkbox.is-bordered {
margin-left: 10px; margin-left: 10px;
} }
&.el-checkbox--medium { &.#{$namespace}-checkbox--medium {
padding: $--checkbox-bordered-medium-padding; padding: $--checkbox-bordered-medium-padding;
border-radius: $--button-medium-border-radius; border-radius: $--button-medium-border-radius;
height: $--checkbox-bordered-medium-height; height: $--checkbox-bordered-medium-height;
.el-checkbox__label { .#{$namespace}-checkbox__label {
line-height: 17px; line-height: 17px;
font-size: $--button-medium-font-size; font-size: $--button-medium-font-size;
} }
.el-checkbox__inner { .#{$namespace}-checkbox__inner {
height: $--checkbox-bordered-medium-input-height; height: $--checkbox-bordered-medium-input-height;
width: $--checkbox-bordered-medium-input-width; width: $--checkbox-bordered-medium-input-width;
} }
} }
&.el-checkbox--small { &.#{$namespace}-checkbox--small {
padding: $--checkbox-bordered-small-padding; padding: $--checkbox-bordered-small-padding;
border-radius: $--button-small-border-radius; border-radius: $--button-small-border-radius;
height: $--checkbox-bordered-small-height; height: $--checkbox-bordered-small-height;
.el-checkbox__label { .#{$namespace}-checkbox__label {
line-height: 15px; line-height: 15px;
font-size: $--button-small-font-size; font-size: $--button-small-font-size;
} }
.el-checkbox__inner { .#{$namespace}-checkbox__inner {
height: $--checkbox-bordered-small-input-height; height: $--checkbox-bordered-small-input-height;
width: $--checkbox-bordered-small-input-width; width: $--checkbox-bordered-small-input-width;
@ -72,17 +72,17 @@
} }
} }
&.el-checkbox--mini { &.#{$namespace}-checkbox--mini {
padding: $--checkbox-bordered-mini-padding; padding: $--checkbox-bordered-mini-padding;
border-radius: $--button-mini-border-radius; border-radius: $--button-mini-border-radius;
height: $--checkbox-bordered-mini-height; height: $--checkbox-bordered-mini-height;
.el-checkbox__label { .#{$namespace}-checkbox__label {
line-height: 12px; line-height: 12px;
font-size: $--button-mini-font-size; font-size: $--button-mini-font-size;
} }
.el-checkbox__inner { .#{$namespace}-checkbox__inner {
height: $--checkbox-bordered-mini-input-height; height: $--checkbox-bordered-mini-input-height;
width: $--checkbox-bordered-mini-input-width; width: $--checkbox-bordered-mini-input-width;
&::after { &::after {
@ -103,7 +103,7 @@
vertical-align: middle; vertical-align: middle;
@include when(disabled) { @include when(disabled) {
.el-checkbox__inner { .#{$namespace}-checkbox__inner {
background-color: $--checkbox-disabled-input-fill; background-color: $--checkbox-disabled-input-fill;
border-color: $--checkbox-disabled-border-color; border-color: $--checkbox-disabled-border-color;
cursor: not-allowed; cursor: not-allowed;
@ -113,13 +113,13 @@
border-color: $--checkbox-disabled-icon-color; border-color: $--checkbox-disabled-icon-color;
} }
& + .el-checkbox__label { & + .#{$namespace}-checkbox__label {
cursor: not-allowed; cursor: not-allowed;
} }
} }
&.is-checked { &.is-checked {
.el-checkbox__inner { .#{$namespace}-checkbox__inner {
background-color: $--checkbox-disabled-checked-input-fill; background-color: $--checkbox-disabled-checked-input-fill;
border-color: $--checkbox-disabled-checked-input-border-color; border-color: $--checkbox-disabled-checked-input-border-color;
@ -130,7 +130,7 @@
} }
&.is-indeterminate { &.is-indeterminate {
.el-checkbox__inner { .#{$namespace}-checkbox__inner {
background-color: $--checkbox-disabled-checked-input-fill; background-color: $--checkbox-disabled-checked-input-fill;
border-color: $--checkbox-disabled-checked-input-border-color; border-color: $--checkbox-disabled-checked-input-border-color;
@ -141,14 +141,14 @@
} }
} }
& + span.el-checkbox__label { & + span.#{$namespace}-checkbox__label {
color: $--disabled-color-base; color: $--disabled-color-base;
cursor: not-allowed; cursor: not-allowed;
} }
} }
@include when(checked) { @include when(checked) {
.el-checkbox__inner { .#{$namespace}-checkbox__inner {
background-color: $--checkbox-checked-background-color; background-color: $--checkbox-checked-background-color;
border-color: $--checkbox-checked-input-border-color; border-color: $--checkbox-checked-input-border-color;
@ -157,17 +157,17 @@
} }
} }
& + .el-checkbox__label { & + .#{$namespace}-checkbox__label {
color: $--checkbox-checked-font-color; color: $--checkbox-checked-font-color;
} }
} }
@include when(focus) { /*focus时 视觉上区分*/ @include when(focus) { /*focus时 视觉上区分*/
.el-checkbox__inner { .#{$namespace}-checkbox__inner {
border-color: $--checkbox-input-border-color-hover; border-color: $--checkbox-input-border-color-hover;
} }
} }
@include when(indeterminate) { @include when(indeterminate) {
.el-checkbox__inner { .#{$namespace}-checkbox__inner {
background-color: $--checkbox-checked-background-color; background-color: $--checkbox-checked-background-color;
border-color: $--checkbox-checked-input-border-color; border-color: $--checkbox-checked-input-border-color;
@ -275,7 +275,7 @@
color: $--color-primary; color: $--color-primary;
} }
& [class*="el-icon-"] { & [class*="#{$namespace}-icon-"] {
line-height: 0.9; line-height: 0.9;
& + span { & + span {
@ -293,19 +293,19 @@
} }
&.is-checked { &.is-checked {
& .el-checkbox-button__inner { & .#{$namespace}-checkbox-button__inner {
color: $--checkbox-button-checked-font-color; color: $--checkbox-button-checked-font-color;
background-color: $--checkbox-button-checked-background-color; background-color: $--checkbox-button-checked-background-color;
border-color: $--checkbox-button-checked-border-color; border-color: $--checkbox-button-checked-border-color;
box-shadow: -1px 0 0 0 $--color-primary-light-4; box-shadow: -1px 0 0 0 $--color-primary-light-4;
} }
&:first-child .el-checkbox-button__inner { &:first-child .#{$namespace}-checkbox-button__inner {
border-left-color: $--checkbox-button-checked-border-color; border-left-color: $--checkbox-button-checked-border-color;
} }
} }
&.is-disabled { &.is-disabled {
& .el-checkbox-button__inner { & .#{$namespace}-checkbox-button__inner {
color: $--button-disabled-font-color; color: $--button-disabled-font-color;
cursor: not-allowed; cursor: not-allowed;
background-image: none; background-image: none;
@ -313,13 +313,13 @@
border-color: $--button-disabled-border-color; border-color: $--button-disabled-border-color;
box-shadow: none; box-shadow: none;
} }
&:first-child .el-checkbox-button__inner { &:first-child .#{$namespace}-checkbox-button__inner {
border-left-color: $--button-disabled-border-color; border-left-color: $--button-disabled-border-color;
} }
} }
&:first-child { &:first-child {
.el-checkbox-button__inner { .#{$namespace}-checkbox-button__inner {
border-left: $--border-base; border-left: $--border-base;
border-radius: $--border-radius-base 0 0 $--border-radius-base; border-radius: $--border-radius-base 0 0 $--border-radius-base;
box-shadow: none !important; box-shadow: none !important;
@ -327,28 +327,28 @@
} }
&.is-focus { &.is-focus {
& .el-checkbox-button__inner { & .#{$namespace}-checkbox-button__inner {
border-color: $--checkbox-button-checked-border-color; border-color: $--checkbox-button-checked-border-color;
} }
} }
&:last-child { &:last-child {
.el-checkbox-button__inner { .#{$namespace}-checkbox-button__inner {
border-radius: 0 $--border-radius-base $--border-radius-base 0; border-radius: 0 $--border-radius-base $--border-radius-base 0;
} }
} }
@include m(medium) { @include m(medium) {
.el-checkbox-button__inner { .#{$namespace}-checkbox-button__inner {
@include button-size($--button-medium-padding-vertical, $--button-medium-padding-horizontal, $--button-medium-font-size, 0); @include button-size($--button-medium-padding-vertical, $--button-medium-padding-horizontal, $--button-medium-font-size, 0);
} }
} }
@include m(small) { @include m(small) {
.el-checkbox-button__inner { .#{$namespace}-checkbox-button__inner {
@include button-size($--button-small-padding-vertical, $--button-small-padding-horizontal, $--button-small-font-size, 0); @include button-size($--button-small-padding-vertical, $--button-small-padding-horizontal, $--button-small-font-size, 0);
} }
} }
@include m(mini) { @include m(mini) {
.el-checkbox-button__inner { .#{$namespace}-checkbox-button__inner {
@include button-size($--button-mini-padding-vertical, $--button-mini-padding-horizontal, $--button-mini-font-size, 0); @include button-size($--button-mini-padding-vertical, $--button-mini-padding-horizontal, $--button-mini-font-size, 0);
} }
} }

62
packages/theme-chalk/src/col.scss
View File

@ -1,7 +1,7 @@
@import './common/var.scss'; @import './common/var.scss';
@import './mixins/mixins.scss'; @import './mixins/mixins.scss';
[class*='el-col-'] { [class*='#{$namespace}-col-'] {
float: left; float: left;
box-sizing: border-box; box-sizing: border-box;
@include when(guttered) { @include when(guttered) {
@ -10,7 +10,7 @@
} }
} }
.el-col-0 { .#{$namespace}-col-0 {
display: none; display: none;
// to avoid introducing !important syntax, redundant css rule is required due to selector priority. // to avoid introducing !important syntax, redundant css rule is required due to selector priority.
@include when(guttered) { @include when(guttered) {
@ -19,49 +19,49 @@
} }
@for $i from 0 through 24 { @for $i from 0 through 24 {
.el-col-#{$i} { .#{$namespace}-col-#{$i} {
max-width: (1 / 24 * $i * 100) * 1%; max-width: (1 / 24 * $i * 100) * 1%;
flex: 0 0 (1 / 24 * $i * 100) * 1%; flex: 0 0 (1 / 24 * $i * 100) * 1%;
} }
.el-col-offset-#{$i} { .#{$namespace}-col-offset-#{$i} {
margin-left: (1 / 24 * $i * 100) * 1%; margin-left: (1 / 24 * $i * 100) * 1%;
} }
.el-col-pull-#{$i} { .#{$namespace}-col-pull-#{$i} {
position: relative; position: relative;
right: (1 / 24 * $i * 100) * 1%; right: (1 / 24 * $i * 100) * 1%;
} }
.el-col-push-#{$i} { .#{$namespace}-col-push-#{$i} {
position: relative; position: relative;
left: (1 / 24 * $i * 100) * 1%; left: (1 / 24 * $i * 100) * 1%;
} }
} }
@include res(xs) { @include res(xs) {
.el-col-xs-0 { .#{$namespace}-col-xs-0 {
display: none; display: none;
@include when(guttered) { @include when(guttered) {
display: none; display: none;
} }
} }
@for $i from 0 through 24 { @for $i from 0 through 24 {
.el-col-xs-#{$i} { .#{$namespace}-col-xs-#{$i} {
max-width: (1 / 24 * $i * 100) * 1%; max-width: (1 / 24 * $i * 100) * 1%;
flex: 0 0 (1 / 24 * $i * 100) * 1%; flex: 0 0 (1 / 24 * $i * 100) * 1%;
} }
.el-col-xs-offset-#{$i} { .#{$namespace}-col-xs-offset-#{$i} {
margin-left: (1 / 24 * $i * 100) * 1%; margin-left: (1 / 24 * $i * 100) * 1%;
} }
.el-col-xs-pull-#{$i} { .#{$namespace}-col-xs-pull-#{$i} {
position: relative; position: relative;
right: (1 / 24 * $i * 100) * 1%; right: (1 / 24 * $i * 100) * 1%;
} }
.el-col-xs-push-#{$i} { .#{$namespace}-col-xs-push-#{$i} {
position: relative; position: relative;
left: (1 / 24 * $i * 100) * 1%; left: (1 / 24 * $i * 100) * 1%;
} }
@ -69,28 +69,28 @@
} }
@include res(sm) { @include res(sm) {
.el-col-sm-0 { .#{$namespace}-col-sm-0 {
display: none; display: none;
@include when(guttered) { @include when(guttered) {
display: none; display: none;
} }
} }
@for $i from 0 through 24 { @for $i from 0 through 24 {
.el-col-sm-#{$i} { .#{$namespace}-col-sm-#{$i} {
max-width: (1 / 24 * $i * 100) * 1%; max-width: (1 / 24 * $i * 100) * 1%;
flex: 0 0 (1 / 24 * $i * 100) * 1%; flex: 0 0 (1 / 24 * $i * 100) * 1%;
} }
.el-col-sm-offset-#{$i} { .#{$namespace}-col-sm-offset-#{$i} {
margin-left: (1 / 24 * $i * 100) * 1%; margin-left: (1 / 24 * $i * 100) * 1%;
} }
.el-col-sm-pull-#{$i} { .#{$namespace}-col-sm-pull-#{$i} {
position: relative; position: relative;
right: (1 / 24 * $i * 100) * 1%; right: (1 / 24 * $i * 100) * 1%;
} }
.el-col-sm-push-#{$i} { .#{$namespace}-col-sm-push-#{$i} {
position: relative; position: relative;
left: (1 / 24 * $i * 100) * 1%; left: (1 / 24 * $i * 100) * 1%;
} }
@ -98,28 +98,28 @@
} }
@include res(md) { @include res(md) {
.el-col-md-0 { .#{$namespace}-col-md-0 {
display: none; display: none;
@include when(guttered) { @include when(guttered) {
display: none; display: none;
} }
} }
@for $i from 0 through 24 { @for $i from 0 through 24 {
.el-col-md-#{$i} { .#{$namespace}-col-md-#{$i} {
max-width: (1 / 24 * $i * 100) * 1%; max-width: (1 / 24 * $i * 100) * 1%;
flex: 0 0 (1 / 24 * $i * 100) * 1%; flex: 0 0 (1 / 24 * $i * 100) * 1%;
} }
.el-col-md-offset-#{$i} { .#{$namespace}-col-md-offset-#{$i} {
margin-left: (1 / 24 * $i * 100) * 1%; margin-left: (1 / 24 * $i * 100) * 1%;
} }
.el-col-md-pull-#{$i} { .#{$namespace}-col-md-pull-#{$i} {
position: relative; position: relative;
right: (1 / 24 * $i * 100) * 1%; right: (1 / 24 * $i * 100) * 1%;
} }
.el-col-md-push-#{$i} { .#{$namespace}-col-md-push-#{$i} {
position: relative; position: relative;
left: (1 / 24 * $i * 100) * 1%; left: (1 / 24 * $i * 100) * 1%;
} }
@ -127,28 +127,28 @@
} }
@include res(lg) { @include res(lg) {
.el-col-lg-0 { .#{$namespace}-col-lg-0 {
display: none; display: none;
@include when(guttered) { @include when(guttered) {
display: none; display: none;
} }
} }
@for $i from 0 through 24 { @for $i from 0 through 24 {
.el-col-lg-#{$i} { .#{$namespace}-col-lg-#{$i} {
max-width: (1 / 24 * $i * 100) * 1%; max-width: (1 / 24 * $i * 100) * 1%;
flex: 0 0 (1 / 24 * $i * 100) * 1%; flex: 0 0 (1 / 24 * $i * 100) * 1%;
} }
.el-col-lg-offset-#{$i} { .#{$namespace}-col-lg-offset-#{$i} {
margin-left: (1 / 24 * $i * 100) * 1%; margin-left: (1 / 24 * $i * 100) * 1%;
} }
.el-col-lg-pull-#{$i} { .#{$namespace}-col-lg-pull-#{$i} {
position: relative; position: relative;
right: (1 / 24 * $i * 100) * 1%; right: (1 / 24 * $i * 100) * 1%;
} }
.el-col-lg-push-#{$i} { .#{$namespace}-col-lg-push-#{$i} {
position: relative; position: relative;
left: (1 / 24 * $i * 100) * 1%; left: (1 / 24 * $i * 100) * 1%;
} }
@ -156,28 +156,28 @@
} }
@include res(xl) { @include res(xl) {
.el-col-xl-0 { .#{$namespace}-col-xl-0 {
display: none; display: none;
@include when(guttered) { @include when(guttered) {
display: none; display: none;
} }
} }
@for $i from 0 through 24 { @for $i from 0 through 24 {
.el-col-xl-#{$i} { .#{$namespace}-col-xl-#{$i} {
max-width: (1 / 24 * $i * 100) * 1%; max-width: (1 / 24 * $i * 100) * 1%;
flex: 0 0 (1 / 24 * $i * 100) * 1%; flex: 0 0 (1 / 24 * $i * 100) * 1%;
} }
.el-col-xl-offset-#{$i} { .#{$namespace}-col-xl-offset-#{$i} {
margin-left: (1 / 24 * $i * 100) * 1%; margin-left: (1 / 24 * $i * 100) * 1%;
} }
.el-col-xl-pull-#{$i} { .#{$namespace}-col-xl-pull-#{$i} {
position: relative; position: relative;
right: (1 / 24 * $i * 100) * 1%; right: (1 / 24 * $i * 100) * 1%;
} }
.el-col-xl-push-#{$i} { .#{$namespace}-col-xl-push-#{$i} {
position: relative; position: relative;
left: (1 / 24 * $i * 100) * 1%; left: (1 / 24 * $i * 100) * 1%;
} }

2
packages/theme-chalk/src/collapse.scss
View File

@ -8,7 +8,7 @@
} }
@include b(collapse-item) { @include b(collapse-item) {
@include when(disabled) { @include when(disabled) {
.el-collapse-item__header { .#{$namespace}-collapse-item__header {
color: $--font-color-disabled-base; color: $--font-color-disabled-base;
cursor: not-allowed; cursor: not-allowed;
} }

32
packages/theme-chalk/src/color-picker.scss
View File

@ -79,7 +79,7 @@
height: 180px; height: 180px;
padding: 2px 0; padding: 2px 0;
.el-color-hue-slider__bar { .#{$namespace}-color-hue-slider__bar {
background: linear-gradient( background: linear-gradient(
to bottom, #f00 0%, to bottom, #f00 0%,
#ff0 17%, #0f0 33%, #ff0 17%, #0f0 33%,
@ -87,7 +87,7 @@
#f0f 83%, #f00 100%); #f0f 83%, #f00 100%);
} }
.el-color-hue-slider__thumb { .#{$namespace}-color-hue-slider__thumb {
left: 0; left: 0;
top: 0; top: 0;
width: 100%; width: 100%;
@ -165,13 +165,13 @@
width: 20px; width: 20px;
height: 180px; height: 180px;
.el-color-alpha-slider__bar { .#{$namespace}-color-alpha-slider__bar {
background: linear-gradient( background: linear-gradient(
to bottom, rgba(255, 255, 255, 0) 0%, to bottom, rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%); rgba(255, 255, 255, 1) 100%);
} }
.el-color-alpha-slider__thumb { .#{$namespace}-color-alpha-slider__thumb {
left: 0; left: 0;
top: 0; top: 0;
width: 100%; width: 100%;
@ -246,7 +246,7 @@
height: 40px; height: 40px;
@include when(disabled) { @include when(disabled) {
.el-color-picker__trigger { .#{$namespace}-color-picker__trigger {
cursor: not-allowed; cursor: not-allowed;
} }
} }
@ -254,12 +254,12 @@
@include m(medium) { @include m(medium) {
height: 36px; height: 36px;
.el-color-picker__trigger { .#{$namespace}-color-picker__trigger {
height: 36px; height: 36px;
width: 36px; width: 36px;
} }
.el-color-picker__mask { .#{$namespace}-color-picker__mask {
height: 34px; height: 34px;
width: 34px; width: 34px;
} }
@ -268,18 +268,18 @@
@include m(small) { @include m(small) {
height: 32px; height: 32px;
.el-color-picker__trigger { .#{$namespace}-color-picker__trigger {
height: 32px; height: 32px;
width: 32px; width: 32px;
} }
.el-color-picker__mask { .#{$namespace}-color-picker__mask {
height: 30px; height: 30px;
width: 30px; width: 30px;
} }
.el-color-picker__icon, .#{$namespace}-color-picker__icon,
.el-color-picker__empty { .#{$namespace}-color-picker__empty {
transform: translate3d(-50%, -50%, 0) scale(0.8); transform: translate3d(-50%, -50%, 0) scale(0.8);
} }
} }
@ -287,18 +287,18 @@
@include m(mini) { @include m(mini) {
height: 28px; height: 28px;
.el-color-picker__trigger { .#{$namespace}-color-picker__trigger {
height: 28px; height: 28px;
width: 28px; width: 28px;
} }
.el-color-picker__mask { .#{$namespace}-color-picker__mask {
height: 26px; height: 26px;
width: 26px; width: 26px;
} }
.el-color-picker__icon, .#{$namespace}-color-picker__icon,
.el-color-picker__empty { .#{$namespace}-color-picker__empty {
transform: translate3d(-50%, -50%, 0) scale(0.8); transform: translate3d(-50%, -50%, 0) scale(0.8);
} }
} }
@ -380,7 +380,7 @@
background-color: $--color-white; background-color: $--color-white;
border-radius: $--border-radius-base; border-radius: $--border-radius-base;
box-shadow: $--dropdown-menu-box-shadow; box-shadow: $--dropdown-menu-box-shadow;
&.el-popper{ &.#{$namespace}-popper{
border: 1px solid $--border-color-lighter; border: 1px solid $--border-color-lighter;
} }
} }

57
packages/theme-chalk/src/common/transition.scss
View File

@ -1,3 +1,4 @@
@import '../mixins/config';
@import "var"; @import "var";
.fade-in-linear-enter-active, .fade-in-linear-enter-active,
@ -10,36 +11,36 @@
opacity: 0; opacity: 0;
} }
.el-fade-in-linear-enter-active, .#{$namespace}-fade-in-linear-enter-active,
.el-fade-in-linear-leave-active { .#{$namespace}-fade-in-linear-leave-active {
transition: $--fade-linear-transition; transition: $--fade-linear-transition;
} }
.el-fade-in-linear-enter-from, .#{$namespace}-fade-in-linear-enter-from,
.el-fade-in-linear-leave-to { .#{$namespace}-fade-in-linear-leave-to {
opacity: 0; opacity: 0;
} }
.el-fade-in-enter-active, .#{$namespace}-fade-in-enter-active,
.el-fade-in-leave-active { .#{$namespace}-fade-in-leave-active {
transition: all .3s cubic-bezier(.55,0,.1,1); transition: all .3s cubic-bezier(.55,0,.1,1);
} }
.el-fade-in-enter-from, .#{$namespace}-fade-in-enter-from,
.el-fade-in-leave-active { .#{$namespace}-fade-in-leave-active {
opacity: 0; opacity: 0;
} }
.el-zoom-in-center-enter-active, .#{$namespace}-zoom-in-center-enter-active,
.el-zoom-in-center-leave-active { .#{$namespace}-zoom-in-center-leave-active {
transition: all .3s cubic-bezier(.55,0,.1,1); transition: all .3s cubic-bezier(.55,0,.1,1);
} }
.el-zoom-in-center-enter-from, .#{$namespace}-zoom-in-center-enter-from,
.el-zoom-in-center-leave-active { .#{$namespace}-zoom-in-center-leave-active {
opacity: 0; opacity: 0;
transform: scaleX(0); transform: scaleX(0);
} }
.el-zoom-in-top-enter-active, .#{$namespace}-zoom-in-top-enter-active,
.el-zoom-in-top-leave-active { .#{$namespace}-zoom-in-top-leave-active {
opacity: 1; opacity: 1;
transform: scaleY(1); transform: scaleY(1);
transition: $--md-fade-transition; transition: $--md-fade-transition;
@ -49,34 +50,34 @@
transform-origin: center bottom; transform-origin: center bottom;
} }
} }
.el-zoom-in-top-enter-from, .#{$namespace}-zoom-in-top-enter-from,
.el-zoom-in-top-leave-active { .#{$namespace}-zoom-in-top-leave-active {
opacity: 0; opacity: 0;
transform: scaleY(0); transform: scaleY(0);
} }
.el-zoom-in-bottom-enter-active, .#{$namespace}-zoom-in-bottom-enter-active,
.el-zoom-in-bottom-leave-active { .#{$namespace}-zoom-in-bottom-leave-active {
opacity: 1; opacity: 1;
transform: scaleY(1); transform: scaleY(1);
transition: $--md-fade-transition; transition: $--md-fade-transition;
transform-origin: center bottom; transform-origin: center bottom;
} }
.el-zoom-in-bottom-enter-from, .#{$namespace}-zoom-in-bottom-enter-from,
.el-zoom-in-bottom-leave-active { .#{$namespace}-zoom-in-bottom-leave-active {
opacity: 0; opacity: 0;
transform: scaleY(0); transform: scaleY(0);
} }
.el-zoom-in-left-enter-active, .#{$namespace}-zoom-in-left-enter-active,
.el-zoom-in-left-leave-active { .#{$namespace}-zoom-in-left-leave-active {
opacity: 1; opacity: 1;
transform: scale(1, 1); transform: scale(1, 1);
transition: $--md-fade-transition; transition: $--md-fade-transition;
transform-origin: top left; transform-origin: top left;
} }
.el-zoom-in-left-enter-from, .#{$namespace}-zoom-in-left-enter-from,
.el-zoom-in-left-leave-active { .#{$namespace}-zoom-in-left-leave-active {
opacity: 0; opacity: 0;
transform: scale(.45, .45); transform: scale(.45, .45);
} }
@ -88,15 +89,15 @@
transition: 0.3s width ease-in-out, 0.3s padding-left ease-in-out, 0.3s padding-right ease-in-out; transition: 0.3s width ease-in-out, 0.3s padding-left ease-in-out, 0.3s padding-right ease-in-out;
} }
.el-list-enter-active, .#{$namespace}-list-enter-active,
.el-list-leave-active { .#{$namespace}-list-leave-active {
transition: all 1s; transition: all 1s;
} }
.el-list-enter-from, .el-list-leave-active { .#{$namespace}-list-enter-from, .#{$namespace}-list-leave-active {
opacity: 0; opacity: 0;
transform: translateY(-30px); transform: translateY(-30px);
} }
.el-opacity-transition { .#{$namespace}-opacity-transition {
transition: opacity .3s cubic-bezier(.55,0,.1,1); transition: opacity .3s cubic-bezier(.55,0,.1,1);
} }

1
packages/theme-chalk/src/common/var.scss
View File

@ -1,4 +1,5 @@
/* Element Chalk Variables */ /* Element Chalk Variables */
@import "../mixins/config";
// Special comment for theme configurator // Special comment for theme configurator
// type|skipAutoTranslation|Category|Order // type|skipAutoTranslation|Category|Order

8
packages/theme-chalk/src/date-picker/date-picker.scss
View File

@ -13,11 +13,11 @@
width: 438px; width: 438px;
} }
&.has-time .el-picker-panel__body-wrapper { &.has-time .#{$namespace}-picker-panel__body-wrapper {
position: relative; position: relative;
} }
.el-picker-panel__content { .#{$namespace}-picker-panel__content {
width: 292px; width: 292px;
} }
@ -51,7 +51,7 @@
padding-bottom: 12px; padding-bottom: 12px;
border-bottom: solid 1px $--border-color-lighter; border-bottom: solid 1px $--border-color-lighter;
& + .el-picker-panel__content { & + .#{$namespace}-picker-panel__content {
margin-top: 0; margin-top: 0;
} }
} }
@ -95,7 +95,7 @@
margin-left: 10px; margin-left: 10px;
} }
.el-time-panel { .#{$namespace}-time-panel {
position: absolute; position: absolute;
} }
} }

12
packages/theme-chalk/src/date-picker/date-range-picker.scss
View File

@ -12,11 +12,11 @@
width: 100%; width: 100%;
} }
.el-picker-panel__body { .#{$namespace}-picker-panel__body {
min-width: 513px; min-width: 513px;
} }
.el-picker-panel__content { .#{$namespace}-picker-panel__content {
margin: 0; margin: 0;
} }
@ -50,7 +50,7 @@
@include when(left) { @include when(left) {
border-right: 1px solid $--datepicker-inner-border-color; border-right: 1px solid $--datepicker-inner-border-color;
} }
.el-date-range-picker__header { .#{$namespace}-date-range-picker__header {
div { div {
margin-left: 50px; margin-left: 50px;
@ -77,7 +77,7 @@
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
> .el-icon-arrow-right { > .#{$namespace}-icon-arrow-right {
font-size: 20px; font-size: 20px;
vertical-align: middle; vertical-align: middle;
display: table-cell; display: table-cell;
@ -90,14 +90,14 @@
display: table-cell; display: table-cell;
padding: 0 5px; padding: 0 5px;
.el-picker-panel { .#{$namespace}-picker-panel {
position: absolute; position: absolute;
top: 13px; top: 13px;
right: 0; right: 0;
z-index: 1; z-index: 1;
background: $--color-white; background: $--color-white;
} }
.el-time-panel { .#{$namespace}-time-panel {
position: absolute; position: absolute;
} }
} }

2
packages/theme-chalk/src/date-picker/date-table.scss
View File

@ -6,7 +6,7 @@
user-select: none; user-select: none;
@include when(week-mode) { @include when(week-mode) {
.el-date-table__row { .#{$namespace}-date-table__row {
&:hover { &:hover {
div { div {
background-color: $--datepicker-inrange-background-color; background-color: $--datepicker-inrange-background-color;

10
packages/theme-chalk/src/date-picker/picker-panel.scss
View File

@ -7,7 +7,7 @@
border-radius: $--border-radius-base; border-radius: $--border-radius-base;
line-height: 30px; line-height: 30px;
.el-time-panel { .#{$namespace}-time-panel {
margin: 5px 0; margin: 5px 0;
border: solid 1px $--datepicker-border-color; border: solid 1px $--datepicker-border-color;
background-color: $--color-white; background-color: $--color-white;
@ -103,8 +103,8 @@
} }
} }
.el-picker-panel *[slot=sidebar], .#{$namespace}-picker-panel *[slot=sidebar],
.el-picker-panel__sidebar { .#{$namespace}-picker-panel__sidebar {
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
@ -116,7 +116,7 @@
overflow: auto; overflow: auto;
} }
.el-picker-panel *[slot=sidebar] + .el-picker-panel__body, .#{$namespace}-picker-panel *[slot=sidebar] + .#{$namespace}-picker-panel__body,
.el-picker-panel__sidebar + .el-picker-panel__body { .#{$namespace}-picker-panel__sidebar + .#{$namespace}-picker-panel__body {
margin-left: 110px; margin-left: 110px;
} }

64
packages/theme-chalk/src/date-picker/picker.scss
View File

@ -17,44 +17,44 @@
display: inline-block; display: inline-block;
text-align: left; text-align: left;
&.el-input, &.#{$namespace}-input,
&.el-input__inner { &.#{$namespace}-input__inner {
width: 220px; width: 220px;
} }
@include m((monthrange)) { @include m((monthrange)) {
&.el-input, &.#{$namespace}-input,
&.el-input__inner { &.#{$namespace}-input__inner {
width: 300px; width: 300px;
} }
} }
@include m((daterange, timerange)) { @include m((daterange, timerange)) {
&.el-input, &.#{$namespace}-input,
&.el-input__inner { &.#{$namespace}-input__inner {
width: 350px; width: 350px;
} }
} }
@include m(datetimerange) { @include m(datetimerange) {
&.el-input, &.#{$namespace}-input,
&.el-input__inner { &.#{$namespace}-input__inner {
width: 400px; width: 400px;
} }
} }
@include m(dates) { @include m(dates) {
.el-input__inner { .#{$namespace}-input__inner {
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
} }
.el-icon-circle-close { .#{$namespace}-icon-circle-close {
cursor: pointer; cursor: pointer;
} }
.el-range__icon { .#{$namespace}-range__icon {
font-size: 14px; font-size: 14px;
margin-left: -5px; margin-left: -5px;
color: $--color-text-placeholder; color: $--color-text-placeholder;
@ -62,7 +62,7 @@
line-height: 32px; line-height: 32px;
} }
.el-range-input { .#{$namespace}-range-input {
appearance: none; appearance: none;
border: none; border: none;
outline: none; outline: none;
@ -80,7 +80,7 @@
} }
} }
.el-range-separator { .#{$namespace}-range-separator {
display: inline-block; display: inline-block;
height: 100%; height: 100%;
padding: 0 5px; padding: 0 5px;
@ -92,7 +92,7 @@
color: $--color-text-primary; color: $--color-text-primary;
} }
.el-range__close-icon { .#{$namespace}-range__close-icon {
font-size: 14px; font-size: 14px;
color: $--color-text-placeholder; color: $--color-text-placeholder;
width: 25px; width: 25px;
@ -103,13 +103,13 @@
} }
@include b(range-editor) { @include b(range-editor) {
&.el-input__inner { &.#{$namespace}-input__inner {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
padding: 3px 10px; padding: 3px 10px;
} }
.el-range-input { .#{$namespace}-range-input {
line-height: 1; line-height: 1;
} }
@ -124,21 +124,21 @@
@include m(medium) { @include m(medium) {
line-height: $--input-medium-height; line-height: $--input-medium-height;
&.el-input__inner { &.#{$namespace}-input__inner {
height: $--input-medium-height; height: $--input-medium-height;
} }
.el-range-separator { .#{$namespace}-range-separator {
line-height: 28px; line-height: 28px;
font-size: $--input-medium-font-size; font-size: $--input-medium-font-size;
} }
.el-range-input { .#{$namespace}-range-input {
font-size: $--input-medium-font-size; font-size: $--input-medium-font-size;
} }
.el-range__icon, .#{$namespace}-range__icon,
.el-range__close-icon { .#{$namespace}-range__close-icon {
line-height: 28px; line-height: 28px;
} }
} }
@ -146,21 +146,21 @@
@include m(small) { @include m(small) {
line-height: $--input-small-height; line-height: $--input-small-height;
&.el-input__inner { &.#{$namespace}-input__inner {
height: $--input-small-height; height: $--input-small-height;
} }
.el-range-separator { .#{$namespace}-range-separator {
line-height: 24px; line-height: 24px;
font-size: $--input-small-font-size; font-size: $--input-small-font-size;
} }
.el-range-input { .#{$namespace}-range-input {
font-size: $--input-small-font-size; font-size: $--input-small-font-size;
} }
.el-range__icon, .#{$namespace}-range__icon,
.el-range__close-icon { .#{$namespace}-range__close-icon {
line-height: 24px; line-height: 24px;
} }
} }
@ -168,21 +168,21 @@
@include m(mini) { @include m(mini) {
line-height: $--input-mini-height; line-height: $--input-mini-height;
&.el-input__inner { &.#{$namespace}-input__inner {
height: $--input-mini-height; height: $--input-mini-height;
} }
.el-range-separator { .#{$namespace}-range-separator {
line-height: 20px; line-height: 20px;
font-size: $--input-mini-font-size; font-size: $--input-mini-font-size;
} }
.el-range-input { .#{$namespace}-range-input {
font-size: $--input-mini-font-size; font-size: $--input-mini-font-size;
} }
.el-range__icon, .#{$namespace}-range__icon,
.el-range__close-icon { .#{$namespace}-range__close-icon {
line-height: 20px; line-height: 20px;
} }
} }
@ -206,7 +206,7 @@
} }
} }
.el-range-separator { .#{$namespace}-range-separator {
color: $--input-disabled-color; color: $--input-disabled-color;
} }
} }

16
packages/theme-chalk/src/date-picker/time-spinner.scss
View File

@ -2,7 +2,7 @@
@include b(time-spinner) { @include b(time-spinner) {
&.has-seconds { &.has-seconds {
.el-time-spinner__wrapper { .#{$namespace}-time-spinner__wrapper {
width: 33.3%; width: 33.3%;
} }
} }
@ -15,7 +15,7 @@
vertical-align: top; vertical-align: top;
position: relative; position: relative;
& .el-scrollbar__wrap:not(.el-scrollbar__wrap--hidden-default) { & .#{$namespace}-scrollbar__wrap:not(.#{$namespace}-scrollbar__wrap--hidden-default) {
padding-bottom: 15px; padding-bottom: 15px;
} }
@ -24,11 +24,11 @@
text-align: center; text-align: center;
overflow: hidden; overflow: hidden;
.el-time-spinner__list { .#{$namespace}-time-spinner__list {
transform: translateY(-32px); transform: translateY(-32px);
} }
.el-time-spinner__item:hover:not(.disabled):not(.active) { .#{$namespace}-time-spinner__item:hover:not(.disabled):not(.active) {
background: $--color-white; background: $--color-white;
cursor: default; cursor: default;
} }
@ -51,20 +51,20 @@
color: $--color-primary; color: $--color-primary;
} }
&.el-icon-arrow-up { &.#{$namespace}-icon-arrow-up {
top: 10px; top: 10px;
} }
&.el-icon-arrow-down { &.#{$namespace}-icon-arrow-down {
bottom: 10px; bottom: 10px;
} }
} }
@include e(input) { @include e(input) {
&.el-input { &.#{$namespace}-input {
width: 70%; width: 70%;
.el-input__inner { .#{$namespace}-input__inner {
padding: 0; padding: 0;
text-align: center; text-align: center;
} }

2
packages/theme-chalk/src/date-picker/year-table.scss
View File

@ -5,7 +5,7 @@
margin: -1px; margin: -1px;
border-collapse: collapse; border-collapse: collapse;
.el-icon { .#{$namespace}-icon {
color: $--datepicker-icon-color; color: $--datepicker-icon-color;
} }

8
packages/theme-chalk/src/dialog.scss
View File

@ -47,13 +47,13 @@
cursor: pointer; cursor: pointer;
font-size: $--message-close-size; font-size: $--message-close-size;
.el-dialog__close { .#{$namespace}-dialog__close {
color: $--color-info; color: $--color-info;
} }
&:focus, &:focus,
&:hover { &:hover {
.el-dialog__close { .#{$namespace}-dialog__close {
color: $--color-primary; color: $--color-primary;
} }
} }
@ -96,14 +96,14 @@
.dialog-fade-enter-active { .dialog-fade-enter-active {
animation: modal-fade-in 0.3s !important; animation: modal-fade-in 0.3s !important;
.el-dialog { .#{$namespace}-dialog {
animation: dialog-fade-in 0.3s; animation: dialog-fade-in 0.3s;
} }
} }
.dialog-fade-leave-active { .dialog-fade-leave-active {
animation: modal-fade-out 0.3s; animation: modal-fade-out 0.3s;
.el-dialog { .#{$namespace}-dialog {
animation: dialog-fade-out 0.3s; animation: dialog-fade-out 0.3s;
} }
} }

14
packages/theme-chalk/src/drawer.scss
View File

@ -2,7 +2,7 @@
@import 'common/var'; @import 'common/var';
@import './overlay.scss'; @import './overlay.scss';
@keyframes el-drawer-fade-in { @keyframes #{$namespace}-drawer-fade-in {
0% { 0% {
opacity: 0; opacity: 0;
} }
@ -81,11 +81,11 @@ $directions: rtl, ltr, ttb, btt;
overflow: hidden; overflow: hidden;
@each $direction in $directions { @each $direction in $directions {
.el-drawer-fade-enter-active & { .#{$namespace}-drawer-fade-enter-active & {
@include animation-in($direction); @include animation-in($direction);
} }
.el-drawer-fade-leave-active & { .#{$namespace}-drawer-fade-leave-active & {
@include animation-out($direction); @include animation-out($direction);
} }
} }
@ -155,12 +155,12 @@ $directions: rtl, ltr, ttb, btt;
} }
} }
.el-drawer-fade-enter-active { .#{$namespace}-drawer-fade-enter-active {
animation: el-drawer-fade-in 0.3s; animation: #{$namespace}-drawer-fade-in 0.3s;
overflow: hidden !important; overflow: hidden !important;
} }
.el-drawer-fade-leave-active { .#{$namespace}-drawer-fade-leave-active {
overflow: hidden !important; overflow: hidden !important;
animation: el-drawer-fade-in 0.3s reverse; animation: #{$namespace}-drawer-fade-in 0.3s reverse;
} }

20
packages/theme-chalk/src/dropdown.scss
View File

@ -18,7 +18,7 @@
$--dropdown-menu-box-shadow, $--dropdown-menu-box-shadow,
); );
.el-dropdown-menu { .#{$namespace}-dropdown-menu {
border: none; border: none;
} }
@ -27,14 +27,14 @@
} }
} }
.el-button-group { .#{$namespace}-button-group {
display: block; display: block;
.el-button { .#{$namespace}-button {
float: none; float: none;
} }
} }
& .el-dropdown__caret-button { & .#{$namespace}-dropdown__caret-button {
padding-left: 5px; padding-left: 5px;
padding-right: 5px; padding-right: 5px;
position: relative; position: relative;
@ -53,7 +53,7 @@
background: mix(white, transparent, 50%); background: mix(white, transparent, 50%);
} }
&.el-button--default::before { &.#{$namespace}-button--default::before {
background: mix($--button-default-border-color, transparent, 50%); background: mix($--button-default-border-color, transparent, 50%);
} }
@ -64,7 +64,7 @@
} }
} }
& .el-dropdown__icon { & .#{$namespace}-dropdown__icon {
padding-left: 0; padding-left: 0;
} }
} }
@ -73,7 +73,7 @@
margin: 0 3px; margin: 0 3px;
} }
.el-dropdown-selfdefine { // 自定义 .#{$namespace}-dropdown-selfdefine { // 自定义
outline: none; outline: none;
} }
} }
@ -139,7 +139,7 @@
padding: 0 17px; padding: 0 17px;
font-size: 14px; font-size: 14px;
&.el-dropdown-menu__item--divided { &.#{$namespace}-dropdown-menu__item--divided {
$divided-offset: 6px; $divided-offset: 6px;
margin-top: $divided-offset; margin-top: $divided-offset;
@ -159,7 +159,7 @@
padding: 0 15px; padding: 0 15px;
font-size: 13px; font-size: 13px;
&.el-dropdown-menu__item--divided { &.#{$namespace}-dropdown-menu__item--divided {
$divided-offset: 4px; $divided-offset: 4px;
margin-top: $divided-offset; margin-top: $divided-offset;
@ -179,7 +179,7 @@
padding: 0 10px; padding: 0 10px;
font-size: 12px; font-size: 12px;
&.el-dropdown-menu__item--divided { &.#{$namespace}-dropdown-menu__item--divided {
$divided-offset: 3px; $divided-offset: 3px;
margin-top: $divided-offset; margin-top: $divided-offset;

58
packages/theme-chalk/src/form.scss
View File

@ -4,12 +4,12 @@
@include b(form) { @include b(form) {
@include m(label-left) { @include m(label-left) {
& .el-form-item__label { & .#{$namespace}-form-item__label {
text-align: left; text-align: left;
} }
} }
@include m(label-top) { @include m(label-top) {
& .el-form-item__label { & .#{$namespace}-form-item__label {
float: none; float: none;
display: inline-block; display: inline-block;
text-align: left; text-align: left;
@ -17,20 +17,20 @@
} }
} }
@include m(inline) { @include m(inline) {
& .el-form-item { & .#{$namespace}-form-item {
display: inline-block; display: inline-block;
margin-right: 10px; margin-right: 10px;
vertical-align: top; vertical-align: top;
} }
& .el-form-item__label { & .#{$namespace}-form-item__label {
float: none; float: none;
display: inline-block; display: inline-block;
} }
& .el-form-item__content { & .#{$namespace}-form-item__content {
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
} }
&.el-form--label-top .el-form-item__content { &.#{$namespace}-form--label-top .#{$namespace}-form-item__content {
display: block; display: block;
} }
} }
@ -39,54 +39,54 @@
margin-bottom: 22px; margin-bottom: 22px;
@include utils-clearfix; @include utils-clearfix;
& .el-form-item { & .#{$namespace}-form-item {
margin-bottom: 0; margin-bottom: 0;
} }
& .el-input__validateIcon { & .#{$namespace}-input__validateIcon {
display: none; display: none;
} }
@include m(medium) { @include m(medium) {
.el-form-item__label { .#{$namespace}-form-item__label {
line-height: 36px; line-height: 36px;
} }
.el-form-item__content { .#{$namespace}-form-item__content {
line-height: 36px; line-height: 36px;
} }
} }
@include m(small) { @include m(small) {
.el-form-item__label { .#{$namespace}-form-item__label {
line-height: 32px; line-height: 32px;
} }
.el-form-item__content { .#{$namespace}-form-item__content {
line-height: 32px; line-height: 32px;
} }
&.el-form-item { &.#{$namespace}-form-item {
margin-bottom: 18px; margin-bottom: 18px;
} }
.el-form-item__error { .#{$namespace}-form-item__error {
padding-top: 2px; padding-top: 2px;
} }
} }
@include m(mini) { @include m(mini) {
.el-form-item__label { .#{$namespace}-form-item__label {
line-height: 28px; line-height: 28px;
} }
.el-form-item__content { .#{$namespace}-form-item__content {
line-height: 28px; line-height: 28px;
} }
&.el-form-item { &.#{$namespace}-form-item {
margin-bottom: 18px; margin-bottom: 18px;
} }
.el-form-item__error { .#{$namespace}-form-item__error {
padding-top: 1px; padding-top: 1px;
} }
} }
@include e(label-wrap) { @include e(label-wrap) {
float: left; float: left;
.el-form-item__label { .#{$namespace}-form-item__label {
display: inline-block; display: inline-block;
float: none; float: none;
} }
@ -108,7 +108,7 @@
font-size: 14px; font-size: 14px;
@include utils-clearfix; @include utils-clearfix;
.el-input-group { .#{$namespace}-input-group {
vertical-align: top; vertical-align: top;
} }
} }
@ -132,8 +132,8 @@
@include when(required) { @include when(required) {
@include pseudo('not(.is-no-asterisk)') { @include pseudo('not(.is-no-asterisk)') {
& > .el-form-item__label:before, & > .#{$namespace}-form-item__label:before,
& .el-form-item__label-wrap > .el-form-item__label:before { & .#{$namespace}-form-item__label-wrap > .#{$namespace}-form-item__label:before {
content: '*'; content: '*';
color: $--color-danger; color: $--color-danger;
margin-right: 4px; margin-right: 4px;
@ -142,25 +142,25 @@
} }
@include when(error) { @include when(error) {
& .el-input__inner, & .#{$namespace}-input__inner,
& .el-textarea__inner { & .#{$namespace}-textarea__inner {
&, &:focus { &, &:focus {
border-color: $--color-danger; border-color: $--color-danger;
} }
} }
& .el-input-group__append, & .#{$namespace}-input-group__append,
& .el-input-group__prepend { & .#{$namespace}-input-group__prepend {
& .el-input__inner { & .#{$namespace}-input__inner {
border-color: transparent; border-color: transparent;
} }
} }
.el-input__validateIcon { .#{$namespace}-input__validateIcon {
color: $--color-danger; color: $--color-danger;
} }
} }
@include m(feedback) { @include m(feedback) {
.el-input__validateIcon { .#{$namespace}-input__validateIcon {
display: inline-block; display: inline-block;
} }
} }

568
packages/theme-chalk/src/icon.scss
View File

File diff suppressed because it is too large Load Diff

20
packages/theme-chalk/src/input-number.scss
View File

@ -8,7 +8,7 @@
width: 180px; width: 180px;
line-height: #{$--input-height - 2}; line-height: #{$--input-height - 2};
.el-input { .#{$namespace}-input {
display: block; display: block;
&__inner { &__inner {
@ -34,7 +34,7 @@
&:hover { &:hover {
color: $--color-primary; color: $--color-primary;
&:not(.is-disabled) ~ .el-input .el-input__inner:not(.is-disabled) { &:not(.is-disabled) ~ .#{$namespace}-input .#{$namespace}-input__inner:not(.is-disabled) {
border-color: $--input-focus-border; border-color: $--input-focus-border;
} }
} }
@ -78,7 +78,7 @@
font-size: $--input-medium-font-size; font-size: $--input-medium-font-size;
} }
.el-input__inner { .#{$namespace}-input__inner {
padding-left: #{$--input-medium-height + 7}; padding-left: #{$--input-medium-height + 7};
padding-right: #{$--input-medium-height + 7}; padding-right: #{$--input-medium-height + 7};
} }
@ -92,12 +92,12 @@
width: $--input-small-height; width: $--input-small-height;
font-size: $--input-small-font-size; font-size: $--input-small-font-size;
[class*=el-icon] { [class*=#{$namespace}-icon] {
transform: scale(.9); transform: scale(.9);
} }
} }
.el-input__inner { .#{$namespace}-input__inner {
padding-left: #{$--input-small-height + 7}; padding-left: #{$--input-small-height + 7};
padding-right: #{$--input-small-height + 7}; padding-right: #{$--input-small-height + 7};
} }
@ -111,26 +111,26 @@
width: $--input-mini-height; width: $--input-mini-height;
font-size: $--input-mini-font-size; font-size: $--input-mini-font-size;
[class*=el-icon] { [class*=#{$namespace}-icon] {
transform: scale(.8); transform: scale(.8);
} }
} }
.el-input__inner { .#{$namespace}-input__inner {
padding-left: #{$--input-mini-height + 7}; padding-left: #{$--input-mini-height + 7};
padding-right: #{$--input-mini-height + 7}; padding-right: #{$--input-mini-height + 7};
} }
} }
@include when(without-controls) { @include when(without-controls) {
.el-input__inner { .#{$namespace}-input__inner {
padding-left: 15px; padding-left: 15px;
padding-right: 15px; padding-right: 15px;
} }
} }
@include when(controls-right) { @include when(controls-right) {
.el-input__inner { .#{$namespace}-input__inner {
padding-left: 15px; padding-left: 15px;
padding-right: #{$--input-height + 10}; padding-right: #{$--input-height + 10};
} }
@ -139,7 +139,7 @@
height: auto; height: auto;
line-height: #{($--input-height - 2) / 2}; line-height: #{($--input-height - 2) / 2};
[class*=el-icon] { [class*=#{$namespace}-icon] {
transform: scale(.8); transform: scale(.8);
} }
} }

62
packages/theme-chalk/src/input.scss
View File

@ -37,7 +37,7 @@
} }
} }
& .el-input__count { & .#{$namespace}-input__count {
color: $--color-info; color: $--color-info;
background: $--color-white; background: $--color-white;
position: absolute; position: absolute;
@ -48,7 +48,7 @@
} }
@include when(disabled) { @include when(disabled) {
.el-textarea__inner { .#{$namespace}-textarea__inner {
background-color: $--input-disabled-fill; background-color: $--input-disabled-fill;
border-color: $--input-disabled-border; border-color: $--input-disabled-border;
color: $--input-disabled-color; color: $--input-disabled-color;
@ -61,11 +61,11 @@
} }
@include when(exceed) { @include when(exceed) {
.el-textarea__inner { .#{$namespace}-textarea__inner {
border-color: $--color-danger; border-color: $--color-danger;
} }
.el-input__count { .#{$namespace}-input__count {
color: $--color-danger; color: $--color-danger;
} }
} }
@ -79,7 +79,7 @@
line-height: $--input-height; line-height: $--input-height;
@include scroll-bar; @include scroll-bar;
& .el-input__clear { & .#{$namespace}-input__clear {
color: $--input-icon-color; color: $--input-icon-color;
font-size: $--input-font-size; font-size: $--input-font-size;
cursor: pointer; cursor: pointer;
@ -90,14 +90,14 @@
} }
} }
& .el-input__count { & .#{$namespace}-input__count {
height: 100%; height: 100%;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
color: $--color-info; color: $--color-info;
font-size: 12px; font-size: 12px;
.el-input__count-inner { .#{$namespace}-input__count-inner {
background: $--color-white; background: $--color-white;
line-height: initial; line-height: initial;
display: inline-block; display: inline-block;
@ -182,14 +182,14 @@
} }
@include when(active) { @include when(active) {
.el-input__inner { .#{$namespace}-input__inner {
outline: none; outline: none;
border-color: $--input-focus-border; border-color: $--input-focus-border;
} }
} }
@include when(disabled) { @include when(disabled) {
.el-input__inner { .#{$namespace}-input__inner {
background-color: $--input-disabled-fill; background-color: $--input-disabled-fill;
border-color: $--input-disabled-border; border-color: $--input-disabled-border;
color: $--input-disabled-color; color: $--input-disabled-color;
@ -200,31 +200,31 @@
} }
} }
.el-input__icon { .#{$namespace}-input__icon {
cursor: not-allowed; cursor: not-allowed;
} }
} }
@include when(exceed) { @include when(exceed) {
.el-input__inner { .#{$namespace}-input__inner {
border-color: $--color-danger; border-color: $--color-danger;
} }
.el-input__suffix { .#{$namespace}-input__suffix {
.el-input__count { .#{$namespace}-input__count {
color: $--color-danger; color: $--color-danger;
} }
} }
} }
@include m(suffix) { @include m(suffix) {
.el-input__inner { .#{$namespace}-input__inner {
padding-right: 30px; padding-right: 30px;
} }
} }
@include m(prefix) { @include m(prefix) {
.el-input__inner { .#{$namespace}-input__inner {
padding-left: 30px; padding-left: 30px;
} }
} }
@ -237,7 +237,7 @@
height: $--input-medium-height; height: $--input-medium-height;
} }
.el-input__icon { .#{$namespace}-input__icon {
line-height: $--input-medium-height; line-height: $--input-medium-height;
} }
} }
@ -249,7 +249,7 @@
height: $--input-small-height; height: $--input-small-height;
} }
.el-input__icon { .#{$namespace}-input__icon {
line-height: $--input-small-height; line-height: $--input-small-height;
} }
} }
@ -261,7 +261,7 @@
height: $--input-mini-height; height: $--input-mini-height;
} }
.el-input__icon { .#{$namespace}-input__icon {
line-height: $--input-mini-height; line-height: $--input-mini-height;
} }
} }
@ -274,7 +274,7 @@
border-collapse: separate; border-collapse: separate;
border-spacing:0; border-spacing:0;
> .el-input__inner { > .#{$namespace}-input__inner {
vertical-align: middle; vertical-align: middle;
display: table-cell; display: table-cell;
} }
@ -295,15 +295,15 @@
outline: none; outline: none;
} }
.el-select, .#{$namespace}-select,
.el-button { .#{$namespace}-button {
display: inline-block; display: inline-block;
margin: -10px -20px; margin: -10px -20px;
} }
button.el-button, button.#{$namespace}-button,
div.el-select .el-input__inner, div.#{$namespace}-select .#{$namespace}-input__inner,
div.el-select:hover .el-input__inner { div.#{$namespace}-select:hover .#{$namespace}-input__inner {
border-color: transparent; border-color: transparent;
background-color: transparent; background-color: transparent;
color: inherit; color: inherit;
@ -311,8 +311,8 @@
border-bottom: 0; border-bottom: 0;
} }
.el-button, .#{$namespace}-button,
.el-input { .#{$namespace}-input {
font-size: inherit; font-size: inherit;
} }
} }
@ -330,28 +330,28 @@
} }
@include m(prepend) { @include m(prepend) {
.el-input__inner { .#{$namespace}-input__inner {
border-top-left-radius: 0; border-top-left-radius: 0;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
} }
.el-select .el-input.is-focus .el-input__inner { .#{$namespace}-select .#{$namespace}-input.is-focus .#{$namespace}-input__inner {
border-color: transparent; border-color: transparent;
} }
} }
@include m(append) { @include m(append) {
.el-input__inner { .#{$namespace}-input__inner {
border-top-right-radius: 0; border-top-right-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
} }
.el-select .el-input.is-focus .el-input__inner { .#{$namespace}-select .#{$namespace}-input.is-focus .#{$namespace}-input__inner {
border-color: transparent; border-color: transparent;
} }
} }
} }
/** disalbe default clear on IE */ /** disalbe default clear on IE */
.el-input__inner::-ms-clear { .#{$namespace}-input__inner::-ms-clear {
display: none; display: none;
width: 0; width: 0;
height: 0; height: 0;

6
packages/theme-chalk/src/link.scss
View File

@ -38,14 +38,14 @@ $typeMap: (
cursor: not-allowed; cursor: not-allowed;
} }
& [class*="el-icon-"] { & [class*="#{$namespace}-icon-"] {
& + span { & + span {
margin-left: 5px; margin-left: 5px;
} }
} }
&.el-link--default { &.#{$namespace}-link--default {
color: $--link-default-font-color; color: $--link-default-font-color;
&:hover { &:hover {
color: $--link-default-active-color color: $--link-default-active-color
@ -59,7 +59,7 @@ $typeMap: (
} }
@each $type, $primaryColor in $typeMap { @each $type, $primaryColor in $typeMap {
&.el-link--#{$type} { &.#{$namespace}-link--#{$type} {
color: $primaryColor; color: $primaryColor;
&:hover { &:hover {
color: mix($primaryColor, $--color-white, 80%) color: mix($primaryColor, $--color-white, 80%)

8
packages/theme-chalk/src/loading.scss
View File

@ -25,7 +25,7 @@
@include when(fullscreen) { @include when(fullscreen) {
position: fixed; position: fixed;
.el-loading-spinner { .#{$namespace}-loading-spinner {
margin-top: #{- $--loading-fullscreen-spinner-size / 2}; margin-top: #{- $--loading-fullscreen-spinner-size / 2};
.circular { .circular {
@ -43,7 +43,7 @@
text-align: center; text-align: center;
position: absolute; position: absolute;
.el-loading-text { .#{$namespace}-loading-text {
color: $--color-primary; color: $--color-primary;
margin: 3px 0; margin: 3px 0;
font-size: 14px; font-size: 14px;
@ -69,8 +69,8 @@
} }
} }
.el-loading-fade-enter-from, .#{$namespace}-loading-fade-enter-from,
.el-loading-fade-leave-to { .#{$namespace}-loading-fade-leave-to {
opacity: 0; opacity: 0;
} }

66
packages/theme-chalk/src/menu.scss
View File

@ -45,13 +45,13 @@
padding-left: 0; padding-left: 0;
background-color: $--menu-background-color; background-color: $--menu-background-color;
@include utils-clearfix; @include utils-clearfix;
&.el-menu--horizontal { &.#{$namespace}-menu--horizontal {
border-bottom: solid 1px #e6e6e6; border-bottom: solid 1px #e6e6e6;
} }
@include m(horizontal) { @include m(horizontal) {
border-right: none; border-right: none;
& > .el-menu-item { & > .#{$namespace}-menu-item {
float: left; float: left;
height: 60px; height: 60px;
line-height: 60px; line-height: 60px;
@ -69,25 +69,25 @@
background-color: #fff; background-color: #fff;
} }
} }
& > .el-submenu { & > .#{$namespace}-submenu {
float: left; float: left;
&:focus, &:focus,
&:hover { &:hover {
outline: none; outline: none;
.el-submenu__title { .#{$namespace}-submenu__title {
color: $--color-text-primary; color: $--color-text-primary;
} }
} }
&.is-active { &.is-active {
.el-submenu__title { .#{$namespace}-submenu__title {
border-bottom: 2px solid $--color-primary; border-bottom: 2px solid $--color-primary;
color: $--color-text-primary; color: $--color-text-primary;
} }
} }
& .el-submenu__title { & .#{$namespace}-submenu__title {
height: 60px; height: 60px;
line-height: 60px; line-height: 60px;
border-bottom: 2px solid transparent; border-bottom: 2px solid transparent;
@ -97,16 +97,16 @@
background-color: #fff; background-color: #fff;
} }
} }
& .el-submenu__icon-arrow { & .#{$namespace}-submenu__icon-arrow {
position: static; position: static;
vertical-align: middle; vertical-align: middle;
margin-left: 8px; margin-left: 8px;
margin-top: -3px; margin-top: -3px;
} }
} }
& .el-menu { & .#{$namespace}-menu {
& .el-menu-item, & .#{$namespace}-menu-item,
& .el-submenu__title { & .#{$namespace}-submenu__title {
background-color: $--color-white; background-color: $--color-white;
float: none; float: none;
height: 36px; height: 36px;
@ -114,17 +114,17 @@
padding: 0 10px; padding: 0 10px;
color: $--color-text-secondary; color: $--color-text-secondary;
} }
& .el-menu-item.is-active, & .#{$namespace}-menu-item.is-active,
& .el-submenu.is-active > .el-submenu__title { & .#{$namespace}-submenu.is-active > .#{$namespace}-submenu__title {
color: $--color-text-primary; color: $--color-text-primary;
} }
} }
& .el-menu-item:not(.is-disabled):hover, & .#{$namespace}-menu-item:not(.is-disabled):hover,
& .el-menu-item:not(.is-disabled):focus { & .#{$namespace}-menu-item:not(.is-disabled):focus {
outline: none; outline: none;
color: $--color-text-primary; color: $--color-text-primary;
} }
& > .el-menu-item.is-active { & > .#{$namespace}-menu-item.is-active {
border-bottom: 2px solid $--color-primary; border-bottom: 2px solid $--color-primary;
color: $--color-text-primary; color: $--color-text-primary;
} }
@ -132,15 +132,15 @@
@include m(collapse) { @include m(collapse) {
width: 64px; width: 64px;
> .el-menu-item, > .#{$namespace}-menu-item,
> .el-submenu > .el-submenu__title { > .#{$namespace}-submenu > .#{$namespace}-submenu__title {
[class^='el-icon-'] { [class^='#{$namespace}-icon-'] {
margin: 0; margin: 0;
vertical-align: middle; vertical-align: middle;
width: 24px; width: 24px;
text-align: center; text-align: center;
} }
.el-submenu__icon-arrow { .#{$namespace}-submenu__icon-arrow {
display: none; display: none;
} }
span { span {
@ -152,17 +152,17 @@
} }
} }
> .el-menu-item.is-active i { > .#{$namespace}-menu-item.is-active i {
color: inherit; color: inherit;
} }
.el-menu .el-submenu { .#{$namespace}-menu .#{$namespace}-submenu {
min-width: 200px; min-width: 200px;
} }
.el-submenu { .#{$namespace}-submenu {
position: relative; position: relative;
& .el-menu { & .#{$namespace}-menu {
position: absolute; position: absolute;
margin-left: 5px; margin-left: 5px;
top: 0; top: 0;
@ -174,7 +174,7 @@
} }
&.is-opened { &.is-opened {
> .el-submenu__title .el-submenu__icon-arrow { > .#{$namespace}-submenu__title .#{$namespace}-submenu__icon-arrow {
transform: none; transform: none;
} }
} }
@ -192,7 +192,7 @@
@include b(menu-item) { @include b(menu-item) {
@include menu-item; @include menu-item;
& [class^='el-icon-'] { & [class^='#{$namespace}-icon-'] {
margin-right: 5px; margin-right: 5px;
width: 24px; width: 24px;
text-align: center; text-align: center;
@ -219,10 +219,10 @@
background-color: $--menu-item-hover-fill; background-color: $--menu-item-hover-fill;
} }
} }
& .el-menu { & .#{$namespace}-menu {
border: none; border: none;
} }
& .el-menu-item { & .#{$namespace}-menu-item {
height: 50px; height: 50px;
line-height: 50px; line-height: 50px;
padding: 0 45px; padding: 0 45px;
@ -237,24 +237,24 @@
font-size: 12px; font-size: 12px;
} }
@include when(active) { @include when(active) {
.el-submenu__title { .#{$namespace}-submenu__title {
border-bottom-color: $--color-primary; border-bottom-color: $--color-primary;
} }
} }
@include when(opened) { @include when(opened) {
> .el-submenu__title .el-submenu__icon-arrow { > .#{$namespace}-submenu__title .#{$namespace}-submenu__icon-arrow {
transform: rotateZ(180deg); transform: rotateZ(180deg);
} }
} }
@include when(disabled) { @include when(disabled) {
.el-submenu__title, .#{$namespace}-submenu__title,
.el-menu-item { .#{$namespace}-menu-item {
opacity: 0.25; opacity: 0.25;
cursor: not-allowed; cursor: not-allowed;
background: none !important; background: none !important;
} }
} }
[class^='el-icon-'] { [class^='#{$namespace}-icon-'] {
vertical-align: middle; vertical-align: middle;
margin-right: 5px; margin-right: 5px;
width: 24px; width: 24px;
@ -275,7 +275,7 @@
} }
} }
.horizontal-collapse-transition .el-submenu__title .el-submenu__icon-arrow { .horizontal-collapse-transition .#{$namespace}-submenu__title .#{$namespace}-submenu__icon-arrow {
transition: 0.2s; transition: 0.2s;
opacity: 0; opacity: 0;
} }

20
packages/theme-chalk/src/message-box.scss
View File

@ -18,7 +18,7 @@
overflow: hidden; overflow: hidden;
backface-visibility: hidden; backface-visibility: hidden;
@at-root .el-overlay.is-message-box { @at-root .#{$namespace}-overlay.is-message-box {
text-align: center; text-align: center;
&::after { &::after {
content: ''; content: '';
@ -55,13 +55,13 @@
font-size: $--message-close-size; font-size: $--message-close-size;
cursor: pointer; cursor: pointer;
.el-message-box__close { .#{$namespace}-message-box__close {
color: $--color-info; color: $--color-info;
} }
&:focus, &:focus,
&:hover { &:hover {
.el-message-box__close { .#{$namespace}-message-box__close {
color: $--color-primary; color: $--color-primary;
} }
} }
@ -99,24 +99,24 @@
padding-left: 1px; padding-left: 1px;
} }
+ .el-message-box__message { + .#{$namespace}-message-box__message {
padding-left: 36px; padding-left: 36px;
padding-right: 12px; padding-right: 12px;
} }
&.el-icon-success { &.#{$namespace}-icon-success {
color: $--messagebox-success-color; color: $--messagebox-success-color;
} }
&.el-icon-info { &.#{$namespace}-icon-info {
color: $--messagebox-info-color; color: $--messagebox-info-color;
} }
&.el-icon-warning { &.#{$namespace}-icon-warning {
color: $--messagebox-warning-color; color: $--messagebox-warning-color;
} }
&.el-icon-error { &.#{$namespace}-icon-error {
color: $--messagebox-danger-color; color: $--messagebox-danger-color;
} }
} }
@ -191,13 +191,13 @@
} }
.fade-in-linear-enter-active { .fade-in-linear-enter-active {
.el-message-box { .#{$namespace}-message-box {
animation: msgbox-fade-in 0.3s; animation: msgbox-fade-in 0.3s;
} }
} }
.fade-in-linear-leave-active { .fade-in-linear-leave-active {
.el-message-box { .#{$namespace}-message-box {
animation: msgbox-fade-in 0.3s reverse; animation: msgbox-fade-in 0.3s reverse;
} }
} }

22
packages/theme-chalk/src/message.scss
View File

@ -24,7 +24,7 @@
} }
@include when(closable) { @include when(closable) {
.el-message__content { .#{$namespace}-message__content {
padding-right: 16px; padding-right: 16px;
} }
} }
@ -34,7 +34,7 @@
} }
@include m(info) { @include m(info) {
.el-message__content { .#{$namespace}-message__content {
color: $--message-info-font-color; color: $--message-info-font-color;
} }
} }
@ -43,7 +43,7 @@
background-color: $--color-success-lighter; background-color: $--color-success-lighter;
border-color: $--color-success-light; border-color: $--color-success-light;
.el-message__content { .#{$namespace}-message__content {
color: $--message-success-font-color; color: $--message-success-font-color;
} }
} }
@ -52,7 +52,7 @@
background-color: $--color-warning-lighter; background-color: $--color-warning-lighter;
border-color: $--color-warning-light; border-color: $--color-warning-light;
.el-message__content { .#{$namespace}-message__content {
color: $--message-warning-font-color; color: $--message-warning-font-color;
} }
} }
@ -61,7 +61,7 @@
background-color: $--color-danger-lighter; background-color: $--color-danger-lighter;
border-color: $--color-danger-light; border-color: $--color-danger-light;
.el-message__content { .#{$namespace}-message__content {
color: $--message-danger-font-color; color: $--message-danger-font-color;
} }
} }
@ -96,25 +96,25 @@
} }
} }
& .el-icon-success { & .#{$namespace}-icon-success {
color: $--message-success-font-color; color: $--message-success-font-color;
} }
& .el-icon-error { & .#{$namespace}-icon-error {
color: $--message-danger-font-color; color: $--message-danger-font-color;
} }
& .el-icon-info { & .#{$namespace}-icon-info {
color: $--message-info-font-color; color: $--message-info-font-color;
} }
& .el-icon-warning { & .#{$namespace}-icon-warning {
color: $--message-warning-font-color; color: $--message-warning-font-color;
} }
} }
.el-message-fade-enter-from, .#{$namespace}-message-fade-enter-from,
.el-message-fade-leave-to { .#{$namespace}-message-fade-leave-to {
opacity: 0; opacity: 0;
transform: translate(-50%, -100%); transform: translate(-50%, -100%);
} }

6
packages/theme-chalk/src/mixins/mixins.scss
View File

@ -189,12 +189,12 @@
} }
@mixin picker-popper($background, $border, $box-shadow) { @mixin picker-popper($background, $border, $box-shadow) {
&.el-popper[role="tooltip"] { &.#{$namespace}-popper[role="tooltip"] {
background: $background; background: $background;
border: $border; border: $border;
box-shadow: $box-shadow; box-shadow: $box-shadow;
.el-popper__arrow { .#{$namespace}-popper__arrow {
&::before { &::before {
border: $border; border: $border;
} }
@ -205,7 +205,7 @@
in ('top': 'left', 'bottom': 'right', 'left': 'bottom', 'right': 'top') in ('top': 'left', 'bottom': 'right', 'left': 'bottom', 'right': 'top')
{ {
&[data-popper-placement^='#{$placement}'] { &[data-popper-placement^='#{$placement}'] {
.el-popper__arrow::before { .#{$namespace}-popper__arrow::before {
border-#{$placement}-color: transparent; border-#{$placement}-color: transparent;
border-#{$adjacency}-color: transparent; border-#{$adjacency}-color: transparent;
} }

12
packages/theme-chalk/src/notification.scss
View File

@ -66,24 +66,24 @@
} }
} }
.el-icon-success { .#{$namespace}-icon-success {
color: $--notification-success-icon-color; color: $--notification-success-icon-color;
} }
.el-icon-error { .#{$namespace}-icon-error {
color: $--notification-danger-icon-color; color: $--notification-danger-icon-color;
} }
.el-icon-info { .#{$namespace}-icon-info {
color: $--notification-info-icon-color; color: $--notification-info-icon-color;
} }
.el-icon-warning { .#{$namespace}-icon-warning {
color: $--notification-warning-icon-color; color: $--notification-warning-icon-color;
} }
} }
.el-notification-fade-enter-from { .#{$namespace}-notification-fade-enter-from {
&.right { &.right {
right: 0; right: 0;
transform: translateX(100%); transform: translateX(100%);
@ -95,6 +95,6 @@
} }
} }
.el-notification-fade-leave-to { .#{$namespace}-notification-fade-leave-to {
opacity: 0; opacity: 0;
} }

2
packages/theme-chalk/src/option-group.scss
View File

@ -36,7 +36,7 @@
line-height: $--select-group-height; line-height: $--select-group-height;
} }
& .el-select-dropdown__item { & .#{$namespace}-select-dropdown__item {
padding-left: $gap; padding-left: $gap;
} }
} }

2
packages/theme-chalk/src/page-header.scss
View File

@ -22,7 +22,7 @@
background-color: $--border-color-base; background-color: $--border-color-base;
} }
.el-icon-back { .#{$namespace}-icon-back {
font-size: 18px; font-size: 18px;
margin-right: 6px; margin-right: 6px;
align-self: center; align-self: center;

42
packages/theme-chalk/src/pagination.scss
View File

@ -21,23 +21,23 @@
box-sizing: border-box; box-sizing: border-box;
} }
.el-input__inner { .#{$namespace}-input__inner {
text-align: center; text-align: center;
-moz-appearance: textfield; -moz-appearance: textfield;
line-height: normal; line-height: normal;
} }
// pagesize 的下拉 icon // pagesize 的下拉 icon
.el-input__suffix { .#{$namespace}-input__suffix {
right: 0; right: 0;
transform: scale(.8); transform: scale(.8);
} }
.el-select .el-input { .#{$namespace}-select .#{$namespace}-input {
width: 100px; width: 100px;
margin: 0 5px; margin: 0 5px;
.el-input__inner { .#{$namespace}-input__inner {
padding-right: 25px; padding-right: 25px;
border-radius: $--pagination-border-radius; border-radius: $--pagination-border-radius;
} }
@ -72,7 +72,7 @@
margin: 0; margin: 0;
color: $--pagination-button-color; color: $--pagination-button-color;
.el-icon { .#{$namespace}-icon {
display: block; display: block;
font-size: 12px; font-size: 12px;
font-weight: bold; font-weight: bold;
@ -87,7 +87,7 @@
padding-left: 12px; padding-left: 12px;
} }
.el-pager li.disabled { .#{$namespace}-pager li.disabled {
color: $--color-text-placeholder; color: $--color-text-placeholder;
cursor: not-allowed; cursor: not-allowed;
} }
@ -95,10 +95,10 @@
@include m(small) { @include m(small) {
.btn-prev, .btn-prev,
.btn-next, .btn-next,
.el-pager li, .#{$namespace}-pager li,
.el-pager li.btn-quicknext, .#{$namespace}-pager li.btn-quicknext,
.el-pager li.btn-quickprev, .#{$namespace}-pager li.btn-quickprev,
.el-pager li:last-child { .#{$namespace}-pager li:last-child {
border-color: transparent; border-color: transparent;
font-size: 12px; font-size: 12px;
line-height: 22px; line-height: 22px;
@ -123,7 +123,7 @@
@include e(editor) { @include e(editor) {
height: 22px; height: 22px;
&.el-input .el-input__inner { &.#{$namespace}-input .#{$namespace}-input__inner {
height: 22px; height: 22px;
} }
} }
@ -134,7 +134,7 @@
font-weight: normal; font-weight: normal;
color: $--color-text-regular; color: $--color-text-regular;
.el-input .el-input__inner { .#{$namespace}-input .#{$namespace}-input__inner {
font-size: $--pagination-font-size; font-size: $--pagination-font-size;
padding-left: 8px; padding-left: 8px;
@ -155,7 +155,7 @@
font-weight: normal; font-weight: normal;
color: $--color-text-regular; color: $--color-text-regular;
.el-input__inner { .#{$namespace}-input__inner {
padding: 0 3px; padding: 0 3px;
} }
} }
@ -174,16 +174,16 @@
box-sizing: border-box; box-sizing: border-box;
border-radius: $--pagination-border-radius; border-radius: $--pagination-border-radius;
&.el-input { &.#{$namespace}-input {
width: 50px; width: 50px;
} }
&.el-input .el-input__inner { &.#{$namespace}-input .#{$namespace}-input__inner {
height: $--pagination-button-height; height: $--pagination-button-height;
} }
.el-input__inner::-webkit-inner-spin-button, .#{$namespace}-input__inner::-webkit-inner-spin-button,
.el-input__inner::-webkit-outer-spin-button { .#{$namespace}-input__inner::-webkit-outer-spin-button {
-webkit-appearance: none; -webkit-appearance: none;
margin: 0; margin: 0;
} }
@ -192,7 +192,7 @@
@include when(background) { @include when(background) {
.btn-prev, .btn-prev,
.btn-next, .btn-next,
.el-pager li { .#{$namespace}-pager li {
margin: 0 5px; margin: 0 5px;
background-color: $--color-info-lighter; background-color: $--color-info-lighter;
color: $--color-text-regular; color: $--color-text-regular;
@ -212,7 +212,7 @@
} }
} }
.el-pager li:not(.disabled) { .#{$namespace}-pager li:not(.disabled) {
&:hover { &:hover {
color: $--pagination-hover-color; color: $--pagination-hover-color;
} }
@ -223,10 +223,10 @@
} }
} }
&.el-pagination--small { &.#{$namespace}-pagination--small {
.btn-prev, .btn-prev,
.btn-next, .btn-next,
.el-pager li { .#{$namespace}-pager li {
margin: 0 3px; margin: 0 3px;
min-width: 22px; min-width: 22px;
} }

2
packages/theme-chalk/src/popover.scss
View File

@ -2,7 +2,7 @@
@import 'common/var'; @import 'common/var';
@include b(popover) { @include b(popover) {
&.el-popper { &.#{$namespace}-popper {
background: $--popover-background-color; background: $--popover-background-color;
min-width: 150px; min-width: 150px;
border-radius: 4px; border-radius: 4px;

20
packages/theme-chalk/src/progress.scss
View File

@ -23,7 +23,7 @@
@include m((circle,dashboard)) { @include m((circle,dashboard)) {
display: inline-block; display: inline-block;
.el-progress__text { .#{$namespace}-progress__text {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 0; left: 0;
@ -41,11 +41,11 @@
@include m(without-text) { @include m(without-text) {
.el-progress__text { .#{$namespace}-progress__text {
display: none; display: none;
} }
.el-progress-bar { .#{$namespace}-progress-bar {
padding-right: 0; padding-right: 0;
margin-right: 0; margin-right: 0;
display: block; display: block;
@ -53,38 +53,38 @@
} }
@include m(text-inside) { @include m(text-inside) {
.el-progress-bar { .#{$namespace}-progress-bar {
padding-right: 0; padding-right: 0;
margin-right: 0; margin-right: 0;
} }
} }
@include when(success) { @include when(success) {
.el-progress-bar__inner { .#{$namespace}-progress-bar__inner {
background-color: $--color-success; background-color: $--color-success;
} }
.el-progress__text { .#{$namespace}-progress__text {
color: $--color-success; color: $--color-success;
} }
} }
@include when(warning) { @include when(warning) {
.el-progress-bar__inner { .#{$namespace}-progress-bar__inner {
background-color: $--color-warning; background-color: $--color-warning;
} }
.el-progress__text { .#{$namespace}-progress__text {
color: $--color-warning; color: $--color-warning;
} }
} }
@include when(exception) { @include when(exception) {
.el-progress-bar__inner { .#{$namespace}-progress-bar__inner {
background-color: $--color-danger; background-color: $--color-danger;
} }
.el-progress__text { .#{$namespace}-progress__text {
color: $--color-danger; color: $--color-danger;
} }
} }

20
packages/theme-chalk/src/radio-button.scss
View File

@ -32,7 +32,7 @@
color: $--color-primary; color: $--color-primary;
} }
& [class*="el-icon-"] { & [class*="#{$namespace}-icon-"] {
line-height: 0.9; line-height: 0.9;
& + span { & + span {
@ -42,7 +42,7 @@
} }
&:first-child { &:first-child {
.el-radio-button__inner { .#{$namespace}-radio-button__inner {
border-left: $--border-base; border-left: $--border-base;
border-radius: $--border-radius-base 0 0 $--border-radius-base; border-radius: $--border-radius-base 0 0 $--border-radius-base;
box-shadow: none !important; box-shadow: none !important;
@ -56,7 +56,7 @@
z-index: -1; z-index: -1;
&:checked { &:checked {
& + .el-radio-button__inner { & + .#{$namespace}-radio-button__inner {
color: $--radio-button-checked-font-color; color: $--radio-button-checked-font-color;
background-color: $--radio-button-checked-background-color; background-color: $--radio-button-checked-background-color;
border-color: $--radio-button-checked-border-color; border-color: $--radio-button-checked-border-color;
@ -65,7 +65,7 @@
} }
&:disabled { &:disabled {
& + .el-radio-button__inner { & + .#{$namespace}-radio-button__inner {
color: $--button-disabled-font-color; color: $--button-disabled-font-color;
cursor: not-allowed; cursor: not-allowed;
background-image: none; background-image: none;
@ -73,36 +73,36 @@
border-color: $--button-disabled-border-color; border-color: $--button-disabled-border-color;
box-shadow: none; box-shadow: none;
} }
&:checked + .el-radio-button__inner { &:checked + .#{$namespace}-radio-button__inner {
background-color: $--radio-button-disabled-checked-fill; background-color: $--radio-button-disabled-checked-fill;
} }
} }
} }
&:last-child { &:last-child {
.el-radio-button__inner { .#{$namespace}-radio-button__inner {
border-radius: 0 $--border-radius-base $--border-radius-base 0; border-radius: 0 $--border-radius-base $--border-radius-base 0;
} }
} }
&:first-child:last-child { &:first-child:last-child {
.el-radio-button__inner { .#{$namespace}-radio-button__inner {
border-radius: $--border-radius-base; border-radius: $--border-radius-base;
} }
} }
@include m(medium) { @include m(medium) {
& .el-radio-button__inner { & .#{$namespace}-radio-button__inner {
@include button-size($--button-medium-padding-vertical, $--button-medium-padding-horizontal, $--button-medium-font-size, 0); @include button-size($--button-medium-padding-vertical, $--button-medium-padding-horizontal, $--button-medium-font-size, 0);
} }
} }
@include m(small) { @include m(small) {
& .el-radio-button__inner { & .#{$namespace}-radio-button__inner {
@include button-size($--button-small-padding-vertical, $--button-small-padding-horizontal, $--button-small-font-size, 0); @include button-size($--button-small-padding-vertical, $--button-small-padding-horizontal, $--button-small-font-size, 0);
} }
} }
@include m(mini) { @include m(mini) {
& .el-radio-button__inner { & .#{$namespace}-radio-button__inner {
@include button-size($--button-mini-padding-vertical, $--button-mini-padding-horizontal, $--button-mini-font-size, 0); @include button-size($--button-mini-padding-vertical, $--button-mini-padding-horizontal, $--button-mini-font-size, 0);
} }
} }

30
packages/theme-chalk/src/radio.scss
View File

@ -32,7 +32,7 @@
border-color: $--border-color-lighter; border-color: $--border-color-lighter;
} }
& + .el-radio.is-bordered { & + .#{$namespace}-radio.is-bordered {
margin-left: 10px; margin-left: 10px;
} }
} }
@ -42,10 +42,10 @@
padding: $--radio-bordered-medium-padding; padding: $--radio-bordered-medium-padding;
border-radius: $--button-medium-border-radius; border-radius: $--button-medium-border-radius;
height: $--radio-bordered-medium-height; height: $--radio-bordered-medium-height;
.el-radio__label { .#{$namespace}-radio__label {
font-size: $--button-medium-font-size; font-size: $--button-medium-font-size;
} }
.el-radio__inner { .#{$namespace}-radio__inner {
height: $--radio-bordered-medium-input-height; height: $--radio-bordered-medium-input-height;
width: $--radio-bordered-medium-input-width; width: $--radio-bordered-medium-input-width;
} }
@ -56,10 +56,10 @@
padding: $--radio-bordered-small-padding; padding: $--radio-bordered-small-padding;
border-radius: $--button-small-border-radius; border-radius: $--button-small-border-radius;
height: $--radio-bordered-small-height; height: $--radio-bordered-small-height;
.el-radio__label { .#{$namespace}-radio__label {
font-size: $--button-small-font-size; font-size: $--button-small-font-size;
} }
.el-radio__inner { .#{$namespace}-radio__inner {
height: $--radio-bordered-small-input-height; height: $--radio-bordered-small-input-height;
width: $--radio-bordered-small-input-width; width: $--radio-bordered-small-input-width;
} }
@ -70,10 +70,10 @@
padding: $--radio-bordered-mini-padding; padding: $--radio-bordered-mini-padding;
border-radius: $--button-mini-border-radius; border-radius: $--button-mini-border-radius;
height: $--radio-bordered-mini-height; height: $--radio-bordered-mini-height;
.el-radio__label { .#{$namespace}-radio__label {
font-size: $--button-mini-font-size; font-size: $--button-mini-font-size;
} }
.el-radio__inner { .#{$namespace}-radio__inner {
height: $--radio-bordered-mini-input-height; height: $--radio-bordered-mini-input-height;
width: $--radio-bordered-mini-input-width; width: $--radio-bordered-mini-input-width;
} }
@ -94,7 +94,7 @@
vertical-align: middle; vertical-align: middle;
@include when(disabled) { @include when(disabled) {
.el-radio__inner { .#{$namespace}-radio__inner {
background-color: $--radio-disabled-input-fill; background-color: $--radio-disabled-input-fill;
border-color: $--radio-disabled-input-border-color; border-color: $--radio-disabled-input-border-color;
cursor: not-allowed; cursor: not-allowed;
@ -104,12 +104,12 @@
background-color: $--radio-disabled-icon-color; background-color: $--radio-disabled-icon-color;
} }
& + .el-radio__label { & + .#{$namespace}-radio__label {
cursor: not-allowed; cursor: not-allowed;
} }
} }
&.is-checked { &.is-checked {
.el-radio__inner { .#{$namespace}-radio__inner {
background-color: $--radio-disabled-checked-input-fill; background-color: $--radio-disabled-checked-input-fill;
border-color: $--radio-disabled-checked-input-border-color; border-color: $--radio-disabled-checked-input-border-color;
@ -118,14 +118,14 @@
} }
} }
} }
& + span.el-radio__label { & + span.#{$namespace}-radio__label {
color: $--color-text-placeholder; color: $--color-text-placeholder;
cursor: not-allowed; cursor: not-allowed;
} }
} }
@include when(checked) { @include when(checked) {
.el-radio__inner { .#{$namespace}-radio__inner {
border-color: $--radio-checked-input-border-color; border-color: $--radio-checked-input-border-color;
background: $--radio-checked-icon-color; background: $--radio-checked-icon-color;
@ -134,13 +134,13 @@
} }
} }
& + .el-radio__label { & + .#{$namespace}-radio__label {
color: $--radio-checked-font-color; color: $--radio-checked-font-color;
} }
} }
@include when(focus) { @include when(focus) {
.el-radio__inner { .#{$namespace}-radio__inner {
border-color: $--radio-input-border-color-hover; border-color: $--radio-input-border-color-hover;
} }
} }
@ -187,7 +187,7 @@
} }
&:focus:not(.is-focus):not(:active):not(.is-disabled) { /*获得焦点时 样式提醒*/ &:focus:not(.is-focus):not(:active):not(.is-disabled) { /*获得焦点时 样式提醒*/
.el-radio__inner { .#{$namespace}-radio__inner {
box-shadow: 0 0 2px 2px $--radio-input-border-color-hover; box-shadow: 0 0 2px 2px $--radio-input-border-color-hover;
} }
} }

8
packages/theme-chalk/src/scrollbar.scss
View File

@ -60,15 +60,15 @@
} }
} }
.el-scrollbar-fade-enter-active { .#{$namespace}-scrollbar-fade-enter-active {
transition: opacity 340ms ease-out; transition: opacity 340ms ease-out;
} }
.el-scrollbar-fade-leave-active { .#{$namespace}-scrollbar-fade-leave-active {
transition: opacity 120ms ease-out; transition: opacity 120ms ease-out;
} }
.el-scrollbar-fade-enter-from, .#{$namespace}-scrollbar-fade-enter-from,
.el-scrollbar-fade-leave-active { .#{$namespace}-scrollbar-fade-leave-active {
opacity: 0; opacity: 0;
} }

4
packages/theme-chalk/src/select-dropdown.scss
View File

@ -8,7 +8,7 @@
box-sizing: border-box; box-sizing: border-box;
@include when(multiple) { @include when(multiple) {
& .el-select-dropdown__item.selected { & .#{$namespace}-select-dropdown__item.selected {
color: $--select-option-selected-font-color; color: $--select-option-selected-font-color;
background-color: $--select-dropdown-background; background-color: $--select-dropdown-background;
@ -29,7 +29,7 @@
} }
} }
.el-scrollbar.is-empty .el-select-dropdown__list{ .#{$namespace}-scrollbar.is-empty .#{$namespace}-select-dropdown__list{
padding: 0; padding: 0;
} }
} }

22
packages/theme-chalk/src/select.scss
View File

@ -33,24 +33,24 @@
line-height: $--input-medium-height; line-height: $--input-medium-height;
} }
.el-select__tags > span { .#{$namespace}-select__tags > span {
display: inline-block; display: inline-block;
} }
&:hover { &:hover {
.el-input__inner { .#{$namespace}-input__inner {
border-color: $--select-border-color-hover; border-color: $--select-border-color-hover;
} }
} }
.el-select__tags-text { .#{$namespace}-select__tags-text {
text-overflow: ellipsis; text-overflow: ellipsis;
display: inline-block; display: inline-block;
overflow-x: hidden; overflow-x: hidden;
vertical-align: bottom; vertical-align: bottom;
} }
.el-input__inner { .#{$namespace}-input__inner {
cursor: pointer; cursor: pointer;
padding-right: 35px; padding-right: 35px;
display: block; display: block;
@ -60,10 +60,10 @@
} }
} }
.el-input { .#{$namespace}-input {
display: block; display: block;
& .el-select__caret { & .#{$namespace}-select__caret {
color: $--select-input-color; color: $--select-input-color;
font-size: $--select-input-font-size; font-size: $--select-input-font-size;
transition: transform 0.3s; transition: transform 0.3s;
@ -89,7 +89,7 @@
} }
&.is-disabled { &.is-disabled {
& .el-input__inner { & .#{$namespace}-input__inner {
cursor: not-allowed; cursor: not-allowed;
&:hover { &:hover {
@ -98,7 +98,7 @@
} }
} }
&.is-focus .el-input__inner { &.is-focus .#{$namespace}-input__inner {
border-color: $--select-input-focus-border-color; border-color: $--select-input-focus-border-color;
} }
} }
@ -145,17 +145,17 @@
flex-wrap: wrap; flex-wrap: wrap;
} }
.el-tag__close { .#{$namespace}-tag__close {
margin-top: -2px; margin-top: -2px;
} }
.el-select__tags .el-tag { .#{$namespace}-select__tags .#{$namespace}-tag {
box-sizing: border-box; box-sizing: border-box;
border-color: transparent; border-color: transparent;
margin: 2px 0 2px 6px; margin: 2px 0 2px 6px;
background-color: #f0f2f5; background-color: #f0f2f5;
.el-icon-close { .#{$namespace}-icon-close {
background-color: $--color-text-placeholder; background-color: $--color-text-placeholder;
right: -7px; right: -7px;
top: 0; top: 0;

6
packages/theme-chalk/src/skeleton.scss vendored
View File

@ -10,10 +10,10 @@
$--skeleton-color 63% $--skeleton-color 63%
); );
background-size: 400% 100%; background-size: 400% 100%;
animation: el-skeleton-loading 1.4s ease infinite; animation: #{$namespace}-skeleton-loading 1.4s ease infinite;
} }
@keyframes el-skeleton-loading { @keyframes #{$namespace}-skeleton-loading {
0% { 0% {
background-position: 100% 50%; background-position: 100% 50%;
} }
@ -33,7 +33,7 @@
} }
@include when(animated) { @include when(animated) {
.el-skeleton__item { .#{$namespace}-skeleton__item {
@include skeleton-color(); @include skeleton-color();
} }
} }

46
packages/theme-chalk/src/slider.scss
View File

@ -26,15 +26,15 @@
&.disabled { &.disabled {
cursor: default; cursor: default;
.el-slider__bar { .#{$namespace}-slider__bar {
background-color: $--slider-disable-color; background-color: $--slider-disable-color;
} }
.el-slider__button { .#{$namespace}-slider__button {
border-color: $--slider-disable-color; border-color: $--slider-disable-color;
} }
.el-slider__button-wrapper { .#{$namespace}-slider__button-wrapper {
&:hover, &:hover,
&.hover { &.hover {
cursor: not-allowed; cursor: not-allowed;
@ -45,7 +45,7 @@
} }
} }
.el-slider__button { .#{$namespace}-slider__button {
&:hover, &:hover,
&.hover, &.hover,
&.dragging { &.dragging {
@ -69,15 +69,15 @@
margin-top: 3px; margin-top: 3px;
width: 130px; width: 130px;
&.el-input-number--mini { &.#{$namespace}-input-number--mini {
margin-top: 5px; margin-top: 5px;
} }
&.el-input-number--medium { &.#{$namespace}-input-number--medium {
margin-top: 0; margin-top: 0;
} }
&.el-input-number--large { &.#{$namespace}-input-number--large {
margin-top: -2px; margin-top: -2px;
} }
} }
@ -168,40 +168,40 @@
@include when(vertical) { @include when(vertical) {
position: relative; position: relative;
.el-slider__runway { .#{$namespace}-slider__runway {
width: $--slider-height; width: $--slider-height;
height: 100%; height: 100%;
margin: 0 16px; margin: 0 16px;
} }
.el-slider__bar { .#{$namespace}-slider__bar {
width: $--slider-height; width: $--slider-height;
height: auto; height: auto;
border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px;
} }
.el-slider__button-wrapper { .#{$namespace}-slider__button-wrapper {
top: auto; top: auto;
left: $--slider-button-wrapper-offset; left: $--slider-button-wrapper-offset;
transform: translateY(50%); transform: translateY(50%);
} }
.el-slider__stop { .#{$namespace}-slider__stop {
transform: translateY(50%); transform: translateY(50%);
} }
&.el-slider--with-input { &.#{$namespace}-slider--with-input {
padding-bottom: #{$--input-medium-height + 22px}; padding-bottom: #{$--input-medium-height + 22px};
.el-slider__input { .#{$namespace}-slider__input {
overflow: visible; overflow: visible;
float: none; float: none;
position: absolute; position: absolute;
bottom: 22px; bottom: 22px;
width: 36px; width: 36px;
margin-top: 15px; margin-top: 15px;
.el-input__inner { .#{$namespace}-input__inner {
text-align: center; text-align: center;
padding-left: 5px; padding-left: 5px;
padding-right: 5px; padding-right: 5px;
} }
.el-input-number__decrease, .#{$namespace}-input-number__decrease,
.el-input-number__increase .#{$namespace}-input-number__increase
{ {
top: $--input-small-height; top: $--input-small-height;
margin-top: -1px; margin-top: -1px;
@ -210,29 +210,29 @@
box-sizing: border-box; box-sizing: border-box;
transition: $--border-transition-base; transition: $--border-transition-base;
} }
.el-input-number__decrease { .#{$namespace}-input-number__decrease {
width: 18px; width: 18px;
right: 18px; right: 18px;
border-bottom-left-radius: $--input-border-radius; border-bottom-left-radius: $--input-border-radius;
} }
.el-input-number__increase { .#{$namespace}-input-number__increase {
width: 19px; width: 19px;
border-bottom-right-radius: $--input-border-radius; border-bottom-right-radius: $--input-border-radius;
& ~ .el-input .el-input__inner { & ~ .#{$namespace}-input .#{$namespace}-input__inner {
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
} }
} }
&:hover { &:hover {
.el-input-number__decrease, .#{$namespace}-input-number__decrease,
.el-input-number__increase .#{$namespace}-input-number__increase
{ {
border-color: $--input-hover-border; border-color: $--input-hover-border;
} }
} }
&:active { &:active {
.el-input-number__decrease, .#{$namespace}-input-number__decrease,
.el-input-number__increase .#{$namespace}-input-number__increase
{ {
border-color: $--input-focus-border; border-color: $--input-focus-border;
} }

4
packages/theme-chalk/src/step.scss
View File

@ -84,7 +84,7 @@
line-height: 1; line-height: 1;
color: inherit; color: inherit;
&[class*=el-icon]:not(.is-status) { &[class*=#{$namespace}-icon]:not(.is-status) {
font-size: 25px; font-size: 25px;
font-weight: normal; font-weight: normal;
} }
@ -253,7 +253,7 @@
} }
@include e(icon-inner) { @include e(icon-inner) {
&[class*=el-icon]:not(.is-status) { &[class*=#{$namespace}-icon]:not(.is-status) {
font-size: 18px; font-size: 18px;
} }

16
packages/theme-chalk/src/switch.scss
View File

@ -10,8 +10,8 @@
height: $--switch-height; height: $--switch-height;
vertical-align: middle; vertical-align: middle;
@include when(disabled) { @include when(disabled) {
& .el-switch__core, & .#{$namespace}-switch__core,
& .el-switch__label { & .#{$namespace}-switch__label {
cursor: not-allowed; cursor: not-allowed;
} }
} }
@ -66,7 +66,7 @@
transition: border-color .3s, background-color .3s; transition: border-color .3s, background-color .3s;
vertical-align: middle; vertical-align: middle;
.el-switch__action{ .#{$namespace}-switch__action{
position: absolute; position: absolute;
top: 1px; top: 1px;
left: 1px; left: 1px;
@ -83,10 +83,10 @@
} }
@include when(checked) { @include when(checked) {
.el-switch__core { .#{$namespace}-switch__core {
border-color: $--switch-on-color; border-color: $--switch-on-color;
background-color: $--switch-on-color; background-color: $--switch-on-color;
.el-switch__action{ .#{$namespace}-switch__action{
left: 100%; left: 100%;
margin-left: -$--switch-button-size - 1px; margin-left: -$--switch-button-size - 1px;
color:$--switch-on-color ; color:$--switch-on-color ;
@ -99,13 +99,13 @@
} }
@include m(wide) { @include m(wide) {
.el-switch__label { .#{$namespace}-switch__label {
&.el-switch__label--left { &.#{$namespace}-switch__label--left {
span { span {
left: 10px; left: 10px;
} }
} }
&.el-switch__label--right { &.#{$namespace}-switch__label--right {
span { span {
right: 10px; right: 10px;
} }

4
packages/theme-chalk/src/table-column.scss
View File

@ -83,14 +83,14 @@
@include e(checkbox-group) { @include e(checkbox-group) {
padding: 10px; padding: 10px;
label.el-checkbox { label.#{$namespace}-checkbox {
display: block; display: block;
margin-right: 5px; margin-right: 5px;
margin-bottom: 8px; margin-bottom: 8px;
margin-left: 5px; margin-left: 5px;
} }
.el-checkbox:last-child { .#{$namespace}-checkbox:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
} }

48
packages/theme-chalk/src/table.scss
View File

@ -53,7 +53,7 @@
transform: rotate(90deg); transform: rotate(90deg);
} }
> .el-icon { > .#{$namespace}-icon {
position: absolute; position: absolute;
left: 50%; left: 50%;
top: 50%; top: 50%;
@ -95,13 +95,13 @@
} }
@include m(scrollable-x) { @include m(scrollable-x) {
.el-table__body-wrapper { .#{$namespace}-table__body-wrapper {
overflow-x: auto; overflow-x: auto;
} }
} }
@include m(scrollable-y) { @include m(scrollable-y) {
.el-table__body-wrapper { .#{$namespace}-table__body-wrapper {
overflow-y: auto; overflow-y: auto;
} }
} }
@ -233,7 +233,7 @@
padding-left: 10px; padding-left: 10px;
padding-right: 10px; padding-right: 10px;
&.el-tooltip { &.#{$namespace}-tooltip {
white-space: nowrap; white-space: nowrap;
min-width: 50px; min-width: 50px;
} }
@ -275,7 +275,7 @@
border-bottom: none; border-bottom: none;
// fix: #1013 // fix: #1013
// &.el-loading-parent--relative { // &.#{$namespace}-loading-parent--relative {
// border-color: transparent; // border-color: transparent;
// } // }
@ -334,9 +334,9 @@
left: auto; left: auto;
right: 0; right: 0;
.el-table__fixed-header-wrapper, .#{$namespace}-table__fixed-header-wrapper,
.el-table__fixed-body-wrapper, .#{$namespace}-table__fixed-body-wrapper,
.el-table__fixed-footer-wrapper { .#{$namespace}-table__fixed-footer-wrapper {
left: auto; left: auto;
right: 0; right: 0;
} }
@ -400,33 +400,33 @@
position: relative; position: relative;
@include when(scrolling-none) { @include when(scrolling-none) {
~ .el-table__fixed, ~ .#{$namespace}-table__fixed,
~ .el-table__fixed-right { ~ .#{$namespace}-table__fixed-right {
box-shadow: none; box-shadow: none;
} }
} }
@include when(scrolling-left) { @include when(scrolling-left) {
~ .el-table__fixed { ~ .#{$namespace}-table__fixed {
box-shadow: none; box-shadow: none;
} }
} }
@include when(scrolling-right) { @include when(scrolling-right) {
~ .el-table__fixed-right { ~ .#{$namespace}-table__fixed-right {
box-shadow: none; box-shadow: none;
} }
} }
.el-table--border { .#{$namespace}-table--border {
@include when(scrolling-right) { @include when(scrolling-right) {
~ .el-table__fixed-right { ~ .#{$namespace}-table__fixed-right {
border-left: $--table-border; border-left: $--table-border;
} }
} }
@include when(scrolling-left) { @include when(scrolling-left) {
~ .el-table__fixed { ~ .#{$namespace}-table__fixed {
border-right: $--table-border; border-right: $--table-border;
} }
} }
@ -478,8 +478,8 @@
} }
@include m(striped) { @include m(striped) {
& .el-table__body { & .#{$namespace}-table__body {
& tr.el-table__row--striped { & tr.#{$namespace}-table__row--striped {
td { td {
background: #FAFAFA; background: #FAFAFA;
} }
@ -493,7 +493,7 @@
@include e(body) { @include e(body) {
tr.hover-row { tr.hover-row {
&, &.el-table__row--striped { &, &.#{$namespace}-table__row--striped {
&, &.current-row { &, &.current-row {
> td { > td {
background-color: $--table-row-hover-background-color; background-color: $--table-row-hover-background-color;
@ -530,27 +530,27 @@
} }
@include m(enable-row-transition) { @include m(enable-row-transition) {
.el-table__body td { .#{$namespace}-table__body td {
transition: background-color .25s ease; transition: background-color .25s ease;
} }
} }
@include m(enable-row-hover) { @include m(enable-row-hover) {
.el-table__body tr:hover > td { .#{$namespace}-table__body tr:hover > td {
background-color: $--table-row-hover-background-color; background-color: $--table-row-hover-background-color;
} }
} }
@include m(fluid-height) { @include m(fluid-height) {
.el-table__fixed, .#{$namespace}-table__fixed,
.el-table__fixed-right { .#{$namespace}-table__fixed-right {
bottom: 0; bottom: 0;
overflow: hidden; overflow: hidden;
} }
} }
[class*=el-table__row--level] { [class*=#{$namespace}-table__row--level] {
.el-table__expand-icon { .#{$namespace}-table__expand-icon {
display: inline-block; display: inline-block;
width: 20px; width: 20px;
line-height: 20px; line-height: 20px;

148
packages/theme-chalk/src/tabs.scss
View File

@ -31,7 +31,7 @@
cursor: pointer; cursor: pointer;
transition: all .15s; transition: all .15s;
.el-icon-plus { .#{$namespace}-icon-plus {
transform: scale(0.8, 0.8); transform: scale(0.8, 0.8);
} }
@ -108,7 +108,7 @@
outline: none; outline: none;
} }
& .el-icon-close { & .#{$namespace}-icon-close {
border-radius: 50%; border-radius: 50%;
text-align: center; text-align: center;
transition: all .3s cubic-bezier(.645,.045,.355,1); transition: all .3s cubic-bezier(.645,.045,.355,1);
@ -143,22 +143,22 @@
position: relative; position: relative;
} }
@include m(card) { @include m(card) {
> .el-tabs__header { > .#{$namespace}-tabs__header {
border-bottom: 1px solid $--border-color-light; border-bottom: 1px solid $--border-color-light;
} }
> .el-tabs__header .el-tabs__nav-wrap::after { > .#{$namespace}-tabs__header .#{$namespace}-tabs__nav-wrap::after {
content: none; content: none;
} }
> .el-tabs__header .el-tabs__nav { > .#{$namespace}-tabs__header .#{$namespace}-tabs__nav {
border: 1px solid $--border-color-light; border: 1px solid $--border-color-light;
border-bottom: none; border-bottom: none;
border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0;
box-sizing: border-box; box-sizing: border-box;
} }
> .el-tabs__header .el-tabs__active-bar { > .#{$namespace}-tabs__header .#{$namespace}-tabs__active-bar {
display: none; display: none;
} }
> .el-tabs__header .el-tabs__item .el-icon-close { > .#{$namespace}-tabs__header .#{$namespace}-tabs__item .#{$namespace}-icon-close {
position: relative; position: relative;
font-size: 12px; font-size: 12px;
width: 0; width: 0;
@ -170,7 +170,7 @@
right: -2px; right: -2px;
transform-origin: 100% 50%; transform-origin: 100% 50%;
} }
> .el-tabs__header .el-tabs__item { > .#{$namespace}-tabs__header .#{$namespace}-tabs__item {
border-bottom: 1px solid transparent; border-bottom: 1px solid transparent;
border-left: 1px solid $--border-color-light; border-left: 1px solid $--border-color-light;
transition: color .3s cubic-bezier(.645,.045,.355,1), padding .3s cubic-bezier(.645,.045,.355,1); transition: color .3s cubic-bezier(.645,.045,.355,1), padding .3s cubic-bezier(.645,.045,.355,1);
@ -182,7 +182,7 @@
padding-left: 13px; padding-left: 13px;
padding-right: 13px; padding-right: 13px;
& .el-icon-close { & .#{$namespace}-icon-close {
width: 14px; width: 14px;
} }
} }
@ -194,7 +194,7 @@
padding-left: 20px; padding-left: 20px;
padding-right: 20px; padding-right: 20px;
.el-icon-close { .#{$namespace}-icon-close {
width: 14px; width: 14px;
} }
} }
@ -206,18 +206,18 @@
border: 1px solid $--border-color-base; border: 1px solid $--border-color-base;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.12), 0 0 6px 0 rgba(0,0,0,0.04); box-shadow: 0 2px 4px 0 rgba(0,0,0,0.12), 0 0 6px 0 rgba(0,0,0,0.04);
> .el-tabs__content { > .#{$namespace}-tabs__content {
padding: 15px; padding: 15px;
} }
> .el-tabs__header { > .#{$namespace}-tabs__header {
background-color: $--background-color-base; background-color: $--background-color-base;
border-bottom: 1px solid $--border-color-light; border-bottom: 1px solid $--border-color-light;
margin: 0; margin: 0;
} }
> .el-tabs__header .el-tabs__nav-wrap::after { > .#{$namespace}-tabs__header .#{$namespace}-tabs__nav-wrap::after {
content: none; content: none;
} }
> .el-tabs__header .el-tabs__item { > .#{$namespace}-tabs__header .#{$namespace}-tabs__item {
transition: all .3s cubic-bezier(.645,.045,.355,1); transition: all .3s cubic-bezier(.645,.045,.355,1);
border: 1px solid transparent; border: 1px solid transparent;
margin-top: -1px; margin-top: -1px;
@ -227,7 +227,7 @@
margin-left: -1px; margin-left: -1px;
} }
& + .el-tabs__item { & + .#{$namespace}-tabs__item {
margin-left: -1px; margin-left: -1px;
} }
@ -245,50 +245,50 @@
} }
} }
> .el-tabs__header .is-scrollable .el-tabs__item:first-child { > .#{$namespace}-tabs__header .is-scrollable .#{$namespace}-tabs__item:first-child {
margin-left: 0; margin-left: 0;
} }
} }
@include m((top, bottom)) { @include m((top, bottom)) {
.el-tabs__item.is-top:nth-child(2), .#{$namespace}-tabs__item.is-top:nth-child(2),
.el-tabs__item.is-bottom:nth-child(2) { .#{$namespace}-tabs__item.is-bottom:nth-child(2) {
padding-left: 0; padding-left: 0;
} }
.el-tabs__item.is-top:last-child, .#{$namespace}-tabs__item.is-top:last-child,
.el-tabs__item.is-bottom:last-child { .#{$namespace}-tabs__item.is-bottom:last-child {
padding-right: 0; padding-right: 0;
} }
&.el-tabs--border-card, &.el-tabs--card, &.#{$namespace}-tabs--border-card, &.#{$namespace}-tabs--card,
.el-tabs--left, .el-tabs--right { .#{$namespace}-tabs--left, .#{$namespace}-tabs--right {
> .el-tabs__header { > .#{$namespace}-tabs__header {
.el-tabs__item:nth-child(2) { .#{$namespace}-tabs__item:nth-child(2) {
padding-left: 20px; padding-left: 20px;
} }
.el-tabs__item:last-child { .#{$namespace}-tabs__item:last-child {
padding-right: 20px; padding-right: 20px;
} }
} }
} }
} }
@include m(bottom) { @include m(bottom) {
.el-tabs__header.is-bottom { .#{$namespace}-tabs__header.is-bottom {
margin-bottom: 0; margin-bottom: 0;
margin-top: 10px; margin-top: 10px;
} }
&.el-tabs--border-card { &.#{$namespace}-tabs--border-card {
.el-tabs__header.is-bottom { .#{$namespace}-tabs__header.is-bottom {
border-bottom: 0; border-bottom: 0;
border-top: 1px solid $--border-color-base; border-top: 1px solid $--border-color-base;
} }
.el-tabs__nav-wrap.is-bottom { .#{$namespace}-tabs__nav-wrap.is-bottom {
margin-top: -1px; margin-top: -1px;
margin-bottom: 0; margin-bottom: 0;
} }
.el-tabs__item.is-bottom:not(.is-active) { .#{$namespace}-tabs__item.is-bottom:not(.is-active) {
border: 1px solid transparent; border: 1px solid transparent;
} }
.el-tabs__item.is-bottom { .#{$namespace}-tabs__item.is-bottom {
margin: 0 -1px -1px -1px; margin: 0 -1px -1px -1px;
} }
} }
@ -296,28 +296,28 @@
@include m((left, right)) { @include m((left, right)) {
overflow: hidden; overflow: hidden;
.el-tabs__header.is-left, .#{$namespace}-tabs__header.is-left,
.el-tabs__header.is-right, .#{$namespace}-tabs__header.is-right,
.el-tabs__nav-wrap.is-left, .#{$namespace}-tabs__nav-wrap.is-left,
.el-tabs__nav-wrap.is-right, .#{$namespace}-tabs__nav-wrap.is-right,
.el-tabs__nav-scroll { .#{$namespace}-tabs__nav-scroll {
height: 100%; height: 100%;
} }
.el-tabs__active-bar.is-left, .#{$namespace}-tabs__active-bar.is-left,
.el-tabs__active-bar.is-right { .#{$namespace}-tabs__active-bar.is-right {
top: 0; top: 0;
bottom: auto; bottom: auto;
width: 2px; width: 2px;
height: auto; height: auto;
} }
.el-tabs__nav-wrap.is-left, .#{$namespace}-tabs__nav-wrap.is-left,
.el-tabs__nav-wrap.is-right { .#{$namespace}-tabs__nav-wrap.is-right {
margin-bottom: 0; margin-bottom: 0;
> .el-tabs__nav-prev, > .#{$namespace}-tabs__nav-prev,
> .el-tabs__nav-next { > .#{$namespace}-tabs__nav-next {
height: 30px; height: 30px;
line-height: 30px; line-height: 30px;
width: 100%; width: 100%;
@ -328,11 +328,11 @@
transform: rotateZ(90deg); transform: rotateZ(90deg);
} }
} }
> .el-tabs__nav-prev { > .#{$namespace}-tabs__nav-prev {
left: auto; left: auto;
top: 0; top: 0;
} }
> .el-tabs__nav-next { > .#{$namespace}-tabs__nav-next {
right: auto; right: auto;
bottom: 0; bottom: 0;
} }
@ -349,52 +349,52 @@
} }
} }
.el-tabs__nav.is-left, .#{$namespace}-tabs__nav.is-left,
.el-tabs__nav.is-right { .#{$namespace}-tabs__nav.is-right {
float: none; float: none;
} }
.el-tabs__item.is-left, .#{$namespace}-tabs__item.is-left,
.el-tabs__item.is-right { .#{$namespace}-tabs__item.is-right {
display: block; display: block;
} }
} }
@include m(left) { @include m(left) {
.el-tabs__header.is-left { .#{$namespace}-tabs__header.is-left {
float: left; float: left;
margin-bottom: 0; margin-bottom: 0;
margin-right: 10px; margin-right: 10px;
} }
.el-tabs__nav-wrap.is-left { .#{$namespace}-tabs__nav-wrap.is-left {
margin-right: -1px; margin-right: -1px;
&::after { &::after {
left: auto; left: auto;
right: 0; right: 0;
} }
} }
.el-tabs__active-bar.is-left { .#{$namespace}-tabs__active-bar.is-left {
right: 0; right: 0;
left: auto; left: auto;
} }
.el-tabs__item.is-left { .#{$namespace}-tabs__item.is-left {
text-align: right; text-align: right;
} }
&.el-tabs--card { &.#{$namespace}-tabs--card {
.el-tabs__active-bar.is-left { .#{$namespace}-tabs__active-bar.is-left {
display: none; display: none;
} }
.el-tabs__item.is-left { .#{$namespace}-tabs__item.is-left {
border-left: none; border-left: none;
border-right: 1px solid $--border-color-light; border-right: 1px solid $--border-color-light;
border-bottom: none; border-bottom: none;
border-top: 1px solid $--border-color-light; border-top: 1px solid $--border-color-light;
text-align: left; text-align: left;
} }
.el-tabs__item.is-left:first-child { .#{$namespace}-tabs__item.is-left:first-child {
border-right: 1px solid $--border-color-light; border-right: 1px solid $--border-color-light;
border-top: none; border-top: none;
} }
.el-tabs__item.is-left.is-active { .#{$namespace}-tabs__item.is-left.is-active {
border: 1px solid $--border-color-light; border: 1px solid $--border-color-light;
border-right-color: #fff; border-right-color: #fff;
border-left: none; border-left: none;
@ -408,22 +408,22 @@
} }
} }
.el-tabs__nav { .#{$namespace}-tabs__nav {
border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px;
border-bottom: 1px solid $--border-color-light; border-bottom: 1px solid $--border-color-light;
border-right: none; border-right: none;
} }
.el-tabs__new-tab { .#{$namespace}-tabs__new-tab {
float: none; float: none;
} }
} }
&.el-tabs--border-card { &.#{$namespace}-tabs--border-card {
.el-tabs__header.is-left { .#{$namespace}-tabs__header.is-left {
border-right: 1px solid #dfe4ed; border-right: 1px solid #dfe4ed;
} }
.el-tabs__item.is-left { .#{$namespace}-tabs__item.is-left {
border: 1px solid transparent; border: 1px solid transparent;
margin: -1px 0 -1px -1px; margin: -1px 0 -1px -1px;
@ -436,13 +436,13 @@
} }
} }
@include m(right) { @include m(right) {
.el-tabs__header.is-right { .#{$namespace}-tabs__header.is-right {
float: right; float: right;
margin-bottom: 0; margin-bottom: 0;
margin-left: 10px; margin-left: 10px;
} }
.el-tabs__nav-wrap.is-right { .#{$namespace}-tabs__nav-wrap.is-right {
margin-left: -1px; margin-left: -1px;
&::after { &::after {
left: 0; left: 0;
@ -450,23 +450,23 @@
} }
} }
.el-tabs__active-bar.is-right { .#{$namespace}-tabs__active-bar.is-right {
left: 0; left: 0;
} }
&.el-tabs--card { &.#{$namespace}-tabs--card {
.el-tabs__active-bar.is-right { .#{$namespace}-tabs__active-bar.is-right {
display: none; display: none;
} }
.el-tabs__item.is-right { .#{$namespace}-tabs__item.is-right {
border-bottom: none; border-bottom: none;
border-top: 1px solid $--border-color-light; border-top: 1px solid $--border-color-light;
} }
.el-tabs__item.is-right:first-child { .#{$namespace}-tabs__item.is-right:first-child {
border-left: 1px solid $--border-color-light; border-left: 1px solid $--border-color-light;
border-top: none; border-top: none;
} }
.el-tabs__item.is-right.is-active { .#{$namespace}-tabs__item.is-right.is-active {
border: 1px solid $--border-color-light; border: 1px solid $--border-color-light;
border-left-color: #fff; border-left-color: #fff;
border-right: none; border-right: none;
@ -480,17 +480,17 @@
} }
} }
.el-tabs__nav { .#{$namespace}-tabs__nav {
border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0;
border-bottom: 1px solid $--border-color-light; border-bottom: 1px solid $--border-color-light;
border-left: none; border-left: none;
} }
} }
&.el-tabs--border-card { &.#{$namespace}-tabs--border-card {
.el-tabs__header.is-right { .#{$namespace}-tabs__header.is-right {
border-left: 1px solid #dfe4ed; border-left: 1px solid #dfe4ed;
} }
.el-tabs__item.is-right { .#{$namespace}-tabs__item.is-right {
border: 1px solid transparent; border: 1px solid transparent;
margin: -1px -1px -1px 0; margin: -1px -1px -1px 0;

26
packages/theme-chalk/src/tag.scss
View File

@ -10,7 +10,7 @@
border-color: $--tag-primary-color; border-color: $--tag-primary-color;
} }
.el-tag__close { .#{$namespace}-tag__close {
color: mix($--tag-primary-color, $--color-white, $fontColorWeight); color: mix($--tag-primary-color, $--color-white, $fontColorWeight);
&:hover { &:hover {
color: $--color-white; color: $--color-white;
@ -18,7 +18,7 @@
} }
} }
&.el-tag--info { &.#{$namespace}-tag--info {
background-color: mix($--tag-info-color, $--color-white, $backgroundColorWeight); background-color: mix($--tag-info-color, $--color-white, $backgroundColorWeight);
border-color: mix($--tag-info-color, $--color-white, $borderColorWeight); border-color: mix($--tag-info-color, $--color-white, $borderColorWeight);
color: mix($--tag-info-color, $--color-white, $fontColorWeight); color: mix($--tag-info-color, $--color-white, $fontColorWeight);
@ -27,7 +27,7 @@
border-color: $--tag-info-color; border-color: $--tag-info-color;
} }
.el-tag__close { .#{$namespace}-tag__close {
color: mix($--tag-info-color, $--color-white, $fontColorWeight); color: mix($--tag-info-color, $--color-white, $fontColorWeight);
&:hover { &:hover {
color: $--color-white; color: $--color-white;
@ -36,7 +36,7 @@
} }
} }
&.el-tag--success { &.#{$namespace}-tag--success {
background-color: mix($--tag-success-color, $--color-white, $backgroundColorWeight); background-color: mix($--tag-success-color, $--color-white, $backgroundColorWeight);
border-color: mix($--tag-success-color, $--color-white, $borderColorWeight); border-color: mix($--tag-success-color, $--color-white, $borderColorWeight);
color: mix($--tag-success-color, $--color-white, $fontColorWeight); color: mix($--tag-success-color, $--color-white, $fontColorWeight);
@ -45,7 +45,7 @@
border-color: $--tag-success-color; border-color: $--tag-success-color;
} }
.el-tag__close { .#{$namespace}-tag__close {
color: mix($--tag-success-color, $--color-white, $fontColorWeight); color: mix($--tag-success-color, $--color-white, $fontColorWeight);
&:hover { &:hover {
color: $--color-white; color: $--color-white;
@ -54,7 +54,7 @@
} }
} }
&.el-tag--warning { &.#{$namespace}-tag--warning {
background-color: mix($--tag-warning-color, $--color-white, $backgroundColorWeight); background-color: mix($--tag-warning-color, $--color-white, $backgroundColorWeight);
border-color: mix($--tag-warning-color, $--color-white, $borderColorWeight); border-color: mix($--tag-warning-color, $--color-white, $borderColorWeight);
color: mix($--tag-warning-color, $--color-white, $fontColorWeight); color: mix($--tag-warning-color, $--color-white, $fontColorWeight);
@ -63,7 +63,7 @@
border-color: $--tag-warning-color; border-color: $--tag-warning-color;
} }
.el-tag__close { .#{$namespace}-tag__close {
color: mix($--tag-warning-color, $--color-white, $fontColorWeight); color: mix($--tag-warning-color, $--color-white, $fontColorWeight);
&:hover { &:hover {
color: $--color-white; color: $--color-white;
@ -72,7 +72,7 @@
} }
} }
&.el-tag--danger { &.#{$namespace}-tag--danger {
background-color: mix($--tag-danger-color, $--color-white, $backgroundColorWeight); background-color: mix($--tag-danger-color, $--color-white, $backgroundColorWeight);
border-color: mix($--tag-danger-color, $--color-white, $borderColorWeight); border-color: mix($--tag-danger-color, $--color-white, $borderColorWeight);
color: mix($--tag-danger-color, $--color-white, $fontColorWeight); color: mix($--tag-danger-color, $--color-white, $fontColorWeight);
@ -81,7 +81,7 @@
border-color: $--tag-danger-color; border-color: $--tag-danger-color;
} }
.el-tag__close { .#{$namespace}-tag__close {
color: mix($--tag-danger-color, $--color-white, $fontColorWeight); color: mix($--tag-danger-color, $--color-white, $fontColorWeight);
&:hover { &:hover {
color: $--color-white; color: $--color-white;
@ -105,7 +105,7 @@
box-sizing: border-box; box-sizing: border-box;
white-space: nowrap; white-space: nowrap;
.el-icon-close { .#{$namespace}-icon-close {
border-radius: 50%; border-radius: 50%;
text-align: center; text-align: center;
position: relative; position: relative;
@ -135,7 +135,7 @@
height: 28px; height: 28px;
line-height: 26px; line-height: 26px;
.el-icon-close { .#{$namespace}-icon-close {
transform: scale(.8); transform: scale(.8);
} }
} }
@ -145,7 +145,7 @@
padding: 0 8px; padding: 0 8px;
line-height: 22px; line-height: 22px;
.el-icon-close { .#{$namespace}-icon-close {
transform: scale(.8); transform: scale(.8);
} }
} }
@ -155,7 +155,7 @@
padding: 0 5px; padding: 0 5px;
line-height: 19px; line-height: 19px;
.el-icon-close { .#{$namespace}-icon-close {
margin-left: -3px; margin-left: -3px;
transform: scale(.7); transform: scale(.7);
} }

2
packages/theme-chalk/src/time-select.scss
View File

@ -9,7 +9,7 @@
min-width: 0; min-width: 0;
} }
.time-select .el-picker-panel__content { .time-select .#{$namespace}-picker-panel__content {
max-height: 200px; max-height: 200px;
margin: 0; margin: 0;
} }

4
packages/theme-chalk/src/timeline.scss
View File

@ -6,8 +6,8 @@
font-size: $--font-size-base; font-size: $--font-size-base;
list-style: none; list-style: none;
& .el-timeline-item:last-child { & .#{$namespace}-timeline-item:last-child {
& .el-timeline-item__tail { & .#{$namespace}-timeline-item__tail {
display: none; display: none;
} }
} }

32
packages/theme-chalk/src/transfer.scss
View File

@ -52,7 +52,7 @@
font-size: 14px; font-size: 14px;
} }
& [class*="el-icon-"] + span { & [class*="#{$namespace}-icon-"] + span {
margin-left: 0; margin-left: 0;
} }
} }
@ -98,11 +98,11 @@
padding-left: 15px; padding-left: 15px;
display: block !important; display: block !important;
& + .el-transfer-panel__item { & + .#{$namespace}-transfer-panel__item {
margin-left: 0; margin-left: 0;
} }
&.el-checkbox { &.#{$namespace}-checkbox {
color: $--color-text-regular; color: $--color-text-regular;
} }
@ -110,7 +110,7 @@
color: $--color-primary; color: $--color-primary;
} }
&.el-checkbox .el-checkbox__label { &.#{$namespace}-checkbox .#{$namespace}-checkbox__label {
width: 100%; width: 100%;
@include utils-ellipsis; @include utils-ellipsis;
display: block; display: block;
@ -119,7 +119,7 @@
line-height: $--transfer-item-height; line-height: $--transfer-item-height;
} }
.el-checkbox__input { .#{$namespace}-checkbox__input {
position: absolute; position: absolute;
top: 8px; top: 8px;
} }
@ -132,7 +132,7 @@
display: block; display: block;
width: auto; width: auto;
.el-input__inner { .#{$namespace}-input__inner {
height: $--transfer-filter-height; height: $--transfer-filter-height;
width: 100%; width: 100%;
font-size: 12px; font-size: 12px;
@ -143,16 +143,16 @@
padding-left: 30px; padding-left: 30px;
} }
.el-input__icon { .#{$namespace}-input__icon {
margin-left: 5px; margin-left: 5px;
} }
.el-icon-circle-close { .#{$namespace}-icon-circle-close {
cursor: pointer; cursor: pointer;
} }
} }
.el-transfer-panel__header { .#{$namespace}-transfer-panel__header {
height: $--transfer-panel-header-height; height: $--transfer-panel-header-height;
line-height: $--transfer-panel-header-height; line-height: $--transfer-panel-header-height;
background: $--transfer-panel-header-background-color; background: $--transfer-panel-header-background-color;
@ -162,11 +162,11 @@
box-sizing: border-box; box-sizing: border-box;
color: $--color-black; color: $--color-black;
.el-checkbox { .#{$namespace}-checkbox {
display: block; display: block;
line-height: 40px; line-height: 40px;
.el-checkbox__label { .#{$namespace}-checkbox__label {
font-size: 16px; font-size: 16px;
color: $--color-text-primary; color: $--color-text-primary;
font-weight: normal; font-weight: normal;
@ -182,7 +182,7 @@
} }
} }
.el-transfer-panel__footer { .#{$namespace}-transfer-panel__footer {
height: $--transfer-panel-footer-height; height: $--transfer-panel-footer-height;
background: $--color-white; background: $--color-white;
margin: 0; margin: 0;
@ -195,13 +195,13 @@
z-index: $--index-normal; z-index: $--index-normal;
@include utils-vertical-center; @include utils-vertical-center;
.el-checkbox { .#{$namespace}-checkbox {
padding-left: 20px; padding-left: 20px;
color: $--color-text-regular; color: $--color-text-regular;
} }
} }
.el-transfer-panel__empty { .#{$namespace}-transfer-panel__empty {
margin: 0; margin: 0;
height: $--transfer-item-height; height: $--transfer-item-height;
line-height: $--transfer-item-height; line-height: $--transfer-item-height;
@ -210,11 +210,11 @@
text-align: center; text-align: center;
} }
.el-checkbox__label { .#{$namespace}-checkbox__label {
padding-left: 8px; padding-left: 8px;
} }
.el-checkbox__inner { .#{$namespace}-checkbox__inner {
height: 14px; height: 14px;
width: 14px; width: 14px;
border-radius: 3px; border-radius: 3px;

18
packages/theme-chalk/src/tree.scss
View File

@ -39,13 +39,13 @@
white-space: nowrap; white-space: nowrap;
outline: none; outline: none;
&:focus { /* focus */ &:focus { /* focus */
> .el-tree-node__content { > .#{$namespace}-tree-node__content {
background-color: $--tree-node-hover-background-color; background-color: $--tree-node-hover-background-color;
} }
} }
@include when(drop-inner) { @include when(drop-inner) {
> .el-tree-node__content .el-tree-node__label { > .#{$namespace}-tree-node__content .#{$namespace}-tree-node__label {
background-color: $--color-primary; background-color: $--color-primary;
color: #fff; color: #fff;
} }
@ -57,17 +57,17 @@
height: 26px; height: 26px;
cursor: pointer; cursor: pointer;
& > .el-tree-node__expand-icon { & > .#{$namespace}-tree-node__expand-icon {
padding: 6px; padding: 6px;
} }
& > label.el-checkbox { & > label.#{$namespace}-checkbox {
margin-right: 8px; margin-right: 8px;
} }
&:hover { &:hover {
background-color: $--tree-node-hover-background-color; background-color: $--tree-node-hover-background-color;
} }
.el-tree.is-dragging & { .#{$namespace}-tree.is-dragging & {
cursor: move; cursor: move;
& * { & * {
@ -75,7 +75,7 @@
} }
} }
.el-tree.is-dragging.is-drop-not-allow & { .#{$namespace}-tree.is-dragging.is-drop-not-allow & {
cursor: not-allowed; cursor: not-allowed;
} }
} }
@ -108,16 +108,16 @@
color: $--tree-expand-icon-color; color: $--tree-expand-icon-color;
} }
& > .el-tree-node__children { & > .#{$namespace}-tree-node__children {
overflow: hidden; overflow: hidden;
background-color: transparent; background-color: transparent;
} }
&.is-expanded > .el-tree-node__children { &.is-expanded > .#{$namespace}-tree-node__children {
display: block; display: block;
} }
} }
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content { .#{$namespace}-tree--highlight-current .#{$namespace}-tree-node.is-current > .#{$namespace}-tree-node__content {
background-color: mix($--color-white, $--color-primary, 92%); background-color: mix($--color-white, $--color-primary, 92%);
} }

90
packages/theme-chalk/src/upload.scss
View File

@ -52,7 +52,7 @@
border-color: $--color-primary; border-color: $--color-primary;
color: $--color-primary; color: $--color-primary;
.el-upload-dragger { .#{$namespace}-upload-dragger {
border-color: $--color-primary; border-color: $--color-primary;
} }
} }
@ -70,24 +70,24 @@
position: relative; position: relative;
overflow: hidden; overflow: hidden;
.el-icon-upload { .#{$namespace}-icon-upload {
font-size: 67px; font-size: 67px;
color: $--color-text-placeholder; color: $--color-text-placeholder;
margin: 40px 0 16px; margin: 40px 0 16px;
line-height: 50px; line-height: 50px;
} }
+ .el-upload__tip { + .#{$namespace}-upload__tip {
text-align: center; text-align: center;
} }
~ .el-upload__files { ~ .#{$namespace}-upload__files {
border-top: $--border-base; border-top: $--border-base;
margin-top: 7px; margin-top: 7px;
padding-top: 5px; padding-top: 5px;
} }
.el-upload__text { .#{$namespace}-upload__text {
color: $--color-text-regular; color: $--color-text-regular;
font-size: 14px; font-size: 14px;
text-align: center; text-align: center;
@ -124,19 +124,19 @@
border-radius: 4px; border-radius: 4px;
width: 100%; width: 100%;
.el-progress { .#{$namespace}-progress {
position: absolute; position: absolute;
top: 20px; top: 20px;
width: 100%; width: 100%;
} }
.el-progress__text { .#{$namespace}-progress__text {
position: absolute; position: absolute;
right: 0; right: 0;
top: -13px; top: -13px;
} }
.el-progress-bar { .#{$namespace}-progress-bar {
margin-right: 0; margin-right: 0;
padding-right: 0; padding-right: 0;
} }
@ -145,11 +145,11 @@
margin-top: 10px; margin-top: 10px;
} }
& .el-icon-upload-success { & .#{$namespace}-icon-upload-success {
color: $--color-success; color: $--color-success;
} }
.el-icon-close { .#{$namespace}-icon-close {
display: none; display: none;
position: absolute; position: absolute;
top: 5px; top: 5px;
@ -164,7 +164,7 @@
} }
} }
& .el-icon-close-tip { & .#{$namespace}-icon-close-tip {
display: none; display: none;
position: absolute; position: absolute;
top: 5px; top: 5px;
@ -178,40 +178,40 @@
&:hover { &:hover {
background-color: $--background-color-base; background-color: $--background-color-base;
.el-icon-close { .#{$namespace}-icon-close {
display: inline-block; display: inline-block;
} }
.el-progress__text { .#{$namespace}-progress__text {
display: none; display: none;
} }
} }
@include when(success) { @include when(success) {
.el-upload-list__item-status-label { .#{$namespace}-upload-list__item-status-label {
display: block; display: block;
} }
.el-upload-list__item-name:hover, .el-upload-list__item-name:focus { .#{$namespace}-upload-list__item-name:hover, .#{$namespace}-upload-list__item-name:focus {
color: $--link-hover-color; color: $--link-hover-color;
cursor: pointer; cursor: pointer;
} }
&:focus:not(:hover) { /* 键盘focus */ &:focus:not(:hover) { /* 键盘focus */
.el-icon-close-tip { .#{$namespace}-icon-close-tip {
display: inline-block; display: inline-block;
} }
} }
&:not(.focusing):focus, &:active { /* click时 */ &:not(.focusing):focus, &:active { /* click时 */
outline-width: 0; outline-width: 0;
.el-icon-close-tip { .#{$namespace}-icon-close-tip {
display: none; display: none;
} }
} }
&:hover, &:focus { &:hover, &:focus {
.el-upload-list__item-status-label { .#{$namespace}-upload-list__item-status-label {
display: none; display: none;
} }
} }
@ -219,7 +219,7 @@
} }
@include when(disabled) { @include when(disabled) {
.el-upload-list__item:hover .el-upload-list__item-status-label { .#{$namespace}-upload-list__item:hover .#{$namespace}-upload-list__item-status-label {
display: block; display: block;
} }
} }
@ -234,7 +234,7 @@
transition: color .3s; transition: color .3s;
white-space: nowrap; white-space: nowrap;
[class^="el-icon"] { [class^="#{$namespace}-icon"] {
height: 100%; height: 100%;
margin-right: 7px; margin-right: 7px;
color: $--color-text-secondary; color: $--color-text-secondary;
@ -268,7 +268,7 @@
display: inline; display: inline;
vertical-align: top; vertical-align: top;
.el-upload-list__item { .#{$namespace}-upload-list__item {
overflow: hidden; overflow: hidden;
background-color: #fff; background-color: #fff;
border: 1px solid #c0ccda; border: 1px solid #c0ccda;
@ -279,35 +279,35 @@
margin: 0 8px 8px 0; margin: 0 8px 8px 0;
display: inline-block; display: inline-block;
.el-icon-check, .#{$namespace}-icon-check,
.el-icon-circle-check { .#{$namespace}-icon-circle-check {
color: $--color-white; color: $--color-white;
} }
.el-icon-close { .#{$namespace}-icon-close {
display: none; display: none;
} }
&:hover { &:hover {
.el-upload-list__item-status-label { .#{$namespace}-upload-list__item-status-label {
display: none; display: none;
} }
.el-progress__text { .#{$namespace}-progress__text {
display: block; display: block;
} }
} }
} }
.el-upload-list__item-name { .#{$namespace}-upload-list__item-name {
display: none; display: none;
} }
.el-upload-list__item-thumbnail { .#{$namespace}-upload-list__item-thumbnail {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.el-upload-list__item-status-label { .#{$namespace}-upload-list__item-status-label {
position: absolute; position: absolute;
right: -15px; right: -15px;
top: -6px; top: -6px;
@ -325,7 +325,7 @@
} }
} }
.el-upload-list__item-actions { .#{$namespace}-upload-list__item-actions {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -354,7 +354,7 @@
margin-left: 15px; margin-left: 15px;
} }
.el-upload-list__item-delete { .#{$namespace}-upload-list__item-delete {
position: static; position: static;
font-size: inherit; font-size: inherit;
color: inherit; color: inherit;
@ -368,21 +368,21 @@
} }
} }
.el-progress { .#{$namespace}-progress {
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
bottom: auto; bottom: auto;
width: 126px; width: 126px;
.el-progress__text { .#{$namespace}-progress__text {
top: 50%; top: 50%;
} }
} }
} }
@include m(picture) { @include m(picture) {
.el-upload-list__item { .#{$namespace}-upload-list__item {
overflow: hidden; overflow: hidden;
z-index: 0; z-index: 0;
background-color: #fff; background-color: #fff;
@ -393,26 +393,26 @@
padding: 10px 10px 10px 90px; padding: 10px 10px 10px 90px;
height: 92px; height: 92px;
.el-icon-check, .#{$namespace}-icon-check,
.el-icon-circle-check { .#{$namespace}-icon-circle-check {
color: $--color-white; color: $--color-white;
} }
&:hover { &:hover {
.el-upload-list__item-status-label { .#{$namespace}-upload-list__item-status-label {
background: transparent; background: transparent;
box-shadow: none; box-shadow: none;
top: -2px; top: -2px;
right: -12px; right: -12px;
} }
.el-progress__text { .#{$namespace}-progress__text {
display: block; display: block;
} }
} }
&.is-success { &.is-success {
.el-upload-list__item-name { .#{$namespace}-upload-list__item-name {
line-height: 70px; line-height: 70px;
margin-top: 0; margin-top: 0;
i { i {
@ -422,7 +422,7 @@
} }
} }
.el-upload-list__item-thumbnail { .#{$namespace}-upload-list__item-thumbnail {
vertical-align: middle; vertical-align: middle;
display: inline-block; display: inline-block;
width: 70px; width: 70px;
@ -434,7 +434,7 @@
background-color: $--color-white background-color: $--color-white
} }
.el-upload-list__item-name { .#{$namespace}-upload-list__item-name {
display: block; display: block;
margin-top: 20px; margin-top: 20px;
@ -447,7 +447,7 @@
} }
} }
.el-upload-list__item-status-label { .#{$namespace}-upload-list__item-status-label {
position: absolute; position: absolute;
right: -17px; right: -17px;
top: -7px; top: -7px;
@ -465,7 +465,7 @@
} }
} }
.el-progress { .#{$namespace}-progress {
position: relative; position: relative;
top: -7px; top: -7px;
} }
@ -514,7 +514,7 @@
position: static; position: static;
width: 243px; width: 243px;
+ .el-upload__inner { + .#{$namespace}-upload__inner {
opacity: 0; opacity: 0;
} }
} }
@ -595,7 +595,7 @@
color: $--color-text-primary; color: $--color-text-primary;
} }
+ .el-upload__inner { + .#{$namespace}-upload__inner {
opacity: 0; opacity: 0;
position: relative; position: relative;
z-index: 1; z-index: 1;

4
website/demo-styles/alert.scss
View File

@ -1,7 +1,7 @@
.demo-block.demo-alert .el-alert { .demo-block.demo-alert .#{$namespace}-alert {
margin: 20px 0 0; margin: 20px 0 0;
} }
.demo-block.demo-alert .el-alert:first-child { .demo-block.demo-alert .#{$namespace}-alert:first-child {
margin: 0; margin: 0;
} }

2
website/demo-styles/avatar.scss
View File

@ -24,7 +24,7 @@
color: #8492a6; color: #8492a6;
} }
.el-col:not(:last-child) { .#{$namespace}-col:not(:last-child) {
border-right: 1px solid rgba(224,230,237,.5); border-right: 1px solid rgba(224,230,237,.5);
} }

2
website/demo-styles/badge.scss
View File

@ -1,4 +1,4 @@
.demo-badge.demo-block .el-dropdown { .demo-badge.demo-block .#{$namespace}-dropdown {
vertical-align: middle; vertical-align: middle;
} }
.demo-badge.demo-block { .demo-badge.demo-block {

10
website/demo-styles/button.scss
View File

@ -1,5 +1,5 @@
.demo-block.demo-button { .demo-block.demo-button {
.el-row { .#{$namespace}-row {
margin-bottom: 20px; margin-bottom: 20px;
align-items: baseline; align-items: baseline;
@ -7,15 +7,15 @@
margin-bottom: 0; margin-bottom: 0;
} }
} }
.el-button + .el-button { .#{$namespace}-button + .#{$namespace}-button {
margin-left: 10px; margin-left: 10px;
} }
.el-button-group { .#{$namespace}-button-group {
.el-button + .el-button { .#{$namespace}-button + .#{$namespace}-button {
margin-left: 0; margin-left: 0;
} }
& + .el-button-group { & + .#{$namespace}-button-group {
margin-left: 10px; margin-left: 10px;
} }
} }

4
website/demo-styles/carousel.scss
View File

@ -17,11 +17,11 @@
margin-bottom: 20px; margin-bottom: 20px;
} }
.demo-carousel .el-carousel__container { .demo-carousel .#{$namespace}-carousel__container {
text-align: center; text-align: center;
} }
.demo-carousel .el-carousel__item { .demo-carousel .#{$namespace}-carousel__item {
h3 { h3 {
color: #fff; color: #fff;
font-size: 18px; font-size: 18px;

4
website/demo-styles/cascader.scss
View File

@ -1,10 +1,10 @@
.demo-cascader { .demo-cascader {
.el-cascader { .#{$namespace}-cascader {
width: 222px; width: 222px;
} }
} }
.demo-cascader-size { .demo-cascader-size {
.el-cascader { .#{$namespace}-cascader {
vertical-align: top; vertical-align: top;
margin-right: 15px; margin-right: 15px;
} }

2
website/demo-styles/collapse.scss
View File

@ -1,5 +1,5 @@
.demo-collapse { .demo-collapse {
.el-collapse-item__header { .#{$namespace}-collapse-item__header {
.header-icon { .header-icon {
margin-left: 5px; margin-left: 5px;
} }

2
website/demo-styles/color-picker.scss
View File

@ -15,6 +15,6 @@
font-size: 14px; font-size: 14px;
margin-bottom: 20px; margin-bottom: 20px;
} }
.demo-color-picker .el-color-picker + .el-color-picker { .demo-color-picker .#{$namespace}-color-picker + .#{$namespace}-color-picker {
margin-left: 20px; margin-left: 20px;
} }

22
website/demo-styles/container.scss
View File

@ -1,44 +1,44 @@
.el-header, .#{$namespace}-header,
.el-footer { .#{$namespace}-footer {
background-color: #b3c0d1; background-color: #b3c0d1;
color: #333; color: #333;
line-height: 60px; line-height: 60px;
} }
.el-aside { .#{$namespace}-aside {
color: #333; color: #333;
} }
.demo-container .common-layout { .demo-container .common-layout {
.el-header, .#{$namespace}-header,
.el-footer { .#{$namespace}-footer {
text-align: center; text-align: center;
} }
.el-aside { .#{$namespace}-aside {
background-color: #d3dce6; background-color: #d3dce6;
text-align: center; text-align: center;
line-height: 200px; line-height: 200px;
} }
.el-main { .#{$namespace}-main {
background-color: #e9eef3; background-color: #e9eef3;
color: #333; color: #333;
text-align: center; text-align: center;
line-height: 160px; line-height: 160px;
} }
.el-container { .#{$namespace}-container {
margin-bottom: 40px; margin-bottom: 40px;
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
&:nth-child(5) .el-aside, &:nth-child(5) .#{$namespace}-aside,
&:nth-child(6) .el-aside { &:nth-child(6) .#{$namespace}-aside {
line-height: 260px; line-height: 260px;
} }
&:nth-child(7) .el-aside { &:nth-child(7) .#{$namespace}-aside {
line-height: 320px; line-height: 320px;
} }
} }

8
website/demo-styles/dialog.scss
View File

@ -5,16 +5,16 @@
.full-image { .full-image {
width: 100%; width: 100%;
} }
.el-dialog__wrapper { .#{$namespace}-dialog__wrapper {
margin: 0; margin: 0;
} }
.el-select { .#{$namespace}-select {
width: 300px; width: 300px;
} }
.el-input { .#{$namespace}-input {
width: 300px; width: 300px;
} }
.el-button--text { .#{$namespace}-button--text {
margin-right: 15px; margin-right: 15px;
} }
} }

2
website/demo-styles/drawer.scss
View File

@ -16,6 +16,6 @@
} }
} }
.el-drawer__body { .#{$namespace}-drawer__body {
padding: 20px; padding: 20px;
} }

10
website/demo-styles/dropdown.scss
View File

@ -1,16 +1,16 @@
.demo-block { .demo-block {
.el-dropdown { .#{$namespace}-dropdown {
vertical-align: top; vertical-align: top;
& + .el-dropdown { & + .#{$namespace}-dropdown {
margin-left: 15px; margin-left: 15px;
} }
} }
.el-dropdown-link { .#{$namespace}-dropdown-link {
cursor: pointer; cursor: pointer;
color: #409eff; color: #409eff;
} }
.el-icon-arrow-down { .#{$namespace}-icon-arrow-down {
font-size: 12px; font-size: 12px;
} }
} }
@ -18,7 +18,7 @@
.block-col-2 { .block-col-2 {
margin: -24px; margin: -24px;
.el-col { .#{$namespace}-col {
padding: 30px 0; padding: 30px 0;
text-align: center; text-align: center;
border-right: 1px solid #eff2f6; border-right: 1px solid #eff2f6;

16
website/demo-styles/form.scss
View File

@ -1,8 +1,8 @@
.demo-form { .demo-form {
.el-select .el-input { .#{$namespace}-select .#{$namespace}-input {
width: 380px; width: 380px;
} }
.el-form { .#{$namespace}-form {
width: 460px; width: 460px;
} }
@ -10,7 +10,7 @@
text-align: center; text-align: center;
} }
.el-checkbox-group { .#{$namespace}-checkbox-group {
width: 320px; width: 320px;
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -28,14 +28,14 @@
height: 0; height: 0;
} }
.el-checkbox { .#{$namespace}-checkbox {
float: left; float: left;
width: 160px; width: 160px;
padding-right: 20px; padding-right: 20px;
margin: 0; margin: 0;
padding: 0; padding: 0;
+ .el-checkbox { + .#{$namespace}-checkbox {
margin-left: 0; margin-left: 0;
} }
} }
@ -46,7 +46,7 @@
.demo-form-inline { .demo-form-inline {
width: auto; width: auto;
.el-input { .#{$namespace}-input {
width: 150px; width: 150px;
} }
> * { > * {
@ -56,12 +56,12 @@
.demo-ruleForm { .demo-ruleForm {
width: 460px; width: 460px;
.el-select .el-input { .#{$namespace}-select .#{$namespace}-input {
width: 360px; width: 360px;
} }
} }
.demo-dynamic { .demo-dynamic {
.el-input { .#{$namespace}-input {
margin-right: 10px; margin-right: 10px;
width: 270px; width: 270px;
vertical-align: top; vertical-align: top;

4
website/demo-styles/image.scss
View File

@ -32,7 +32,7 @@
width: 49%; width: 49%;
} }
.el-image { .#{$namespace}-image {
width: 300px; width: 300px;
height: 200px; height: 200px;
} }
@ -66,7 +66,7 @@
height: 400px; height: 400px;
overflow-y: auto; overflow-y: auto;
.el-image { .#{$namespace}-image {
display: block; display: block;
min-height: 200px; min-height: 200px;
margin-bottom: 10px; margin-bottom: 10px;

2
website/demo-styles/index.scss
View File

@ -1,3 +1,5 @@
@import 'element-theme-chalk/src/mixins/config.scss';
@import "./affix.scss"; @import "./affix.scss";
@import "./alert.scss"; @import "./alert.scss";
@import "./badge.scss"; @import "./badge.scss";

2
website/demo-styles/input-number.scss
View File

@ -1,5 +1,5 @@
.demo-block.demo-input-number { .demo-block.demo-input-number {
.el-input-number + .el-input-number { .#{$namespace}-input-number + .#{$namespace}-input-number {
margin-left: 10px; margin-left: 10px;
} }
} }

20
website/demo-styles/input.scss
View File

@ -1,23 +1,23 @@
.demo-input { .demo-input {
.el-select .el-input { .#{$namespace}-select .#{$namespace}-input {
width: 130px; width: 130px;
} }
.el-input { .#{$namespace}-input {
width: 180px; width: 180px;
} }
.el-textarea { .#{$namespace}-textarea {
width: 414px; width: 414px;
} }
.el-input-group { .#{$namespace}-input-group {
width: 100%; width: 100%;
} }
.demo-input-size { .demo-input-size {
.el-input { .#{$namespace}-input {
vertical-align: top; vertical-align: top;
margin: 0 10px 10px 0; margin: 0 10px 10px 0;
} }
} }
.input-with-select .el-input-group__prepend { .input-with-select .#{$namespace}-input-group__prepend {
background-color: #fff; background-color: #fff;
} }
.demo-autocomplete { .demo-autocomplete {
@ -29,16 +29,16 @@
color: #8492a6; color: #8492a6;
} }
.el-col:not(:last-child) { .#{$namespace}-col:not(:last-child) {
border-right: 1px solid rgba(224, 230, 237, 0.5); border-right: 1px solid rgba(224, 230, 237, 0.5);
} }
.el-autocomplete { .#{$namespace}-autocomplete {
text-align: left; text-align: left;
} }
} }
} }
.el-autocomplete-suggestion.my-autocomplete { .#{$namespace}-autocomplete-suggestion.my-autocomplete {
li { li {
line-height: normal; line-height: normal;
padding-top: 7px; padding-top: 7px;
@ -59,7 +59,7 @@
} }
.demo-input-suffix { .demo-input-suffix {
margin-bottom: 15px; margin-bottom: 15px;
.el-input { .#{$namespace}-input {
margin-right: 15px; margin-right: 15px;
} }
} }

4
website/demo-styles/layout.scss
View File

@ -1,11 +1,11 @@
.demo-layout { .demo-layout {
.el-row { .#{$namespace}-row {
margin-bottom: 20px; margin-bottom: 20px;
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
} }
.el-col { .#{$namespace}-col {
border-radius: 4px; border-radius: 4px;
} }
.bg-purple-dark { .bg-purple-dark {

2
website/demo-styles/loading.scss
View File

@ -1,3 +1,3 @@
.demo-loading .el-table { .demo-loading .#{$namespace}-table {
border: none; border: none;
} }

6
website/demo-styles/menu.scss
View File

@ -1,8 +1,8 @@
.demo-block.demo-menu { .demo-block.demo-menu {
.el-menu-demo { .#{$namespace}-menu-demo {
padding-left: 55px; padding-left: 55px;
} }
.el-menu-vertical-demo:not(.el-menu--collapse) { .#{$namespace}-menu-vertical-demo:not(.#{$namespace}-menu--collapse) {
width: 240px; width: 240px;
min-height: 400px; min-height: 400px;
} }
@ -19,7 +19,7 @@
.tac { .tac {
text-align: center; text-align: center;
.el-menu-vertical-demo { .#{$namespace}-menu-vertical-demo {
display: inline-block; display: inline-block;
text-align: left; text-align: left;
} }

2
website/demo-styles/pagination.scss
View File

@ -40,7 +40,7 @@
line-height: 44px; line-height: 44px;
} }
.demo-pagination .last .demonstration + .el-pagination { .demo-pagination .last .demonstration + .#{$namespace}-pagination {
width: 70%; width: 70%;
margin: 5px 20px 0 0; margin: 5px 20px 0 0;
} }

6
website/demo-styles/popover.scss
View File

@ -1,11 +1,11 @@
.demo-block.demo-popover { .demo-block.demo-popover {
.el-popover + .el-popover { .#{$namespace}-popover + .#{$namespace}-popover {
margin-left: 10px; margin-left: 10px;
} }
.el-input { .#{$namespace}-input {
width: 360px; width: 360px;
} }
.el-button { .#{$namespace}-button {
margin-left: 10px; margin-left: 10px;
} }
} }

4
website/demo-styles/progress.scss
View File

@ -1,9 +1,9 @@
.demo-block.demo-progress { .demo-block.demo-progress {
.el-progress--line { .#{$namespace}-progress--line {
margin-bottom: 15px; margin-bottom: 15px;
width: 350px; width: 350px;
} }
.el-progress--circle { .#{$namespace}-progress--circle {
margin-right: 15px; margin-right: 15px;
} }
} }

2
website/demo-styles/select.scss
View File

@ -1,3 +1,3 @@
.demo-select .el-select { .demo-select .#{$namespace}-select {
width: 240px; width: 240px;
} }

2
website/demo-styles/skeleton.scss vendored
View File

@ -1,5 +1,5 @@
.demo-block.demo-skeleton { .demo-block.demo-skeleton {
.el-card { .#{$namespace}-card {
margin-bottom: 16px; margin-bottom: 16px;
} }

2
website/demo-styles/slider.scss
View File

@ -17,7 +17,7 @@
line-height: 44px; line-height: 44px;
} }
.demo-block.demo-slider .demonstration + .el-slider { .demo-block.demo-slider .demonstration + .#{$namespace}-slider {
float: right; float: right;
width: 70%; width: 70%;
margin-right: 20px; margin-right: 20px;

2
website/demo-styles/switch.scss
View File

@ -1,5 +1,5 @@
.demo-block.demo-switch { .demo-block.demo-switch {
.el-switch { .#{$namespace}-switch {
margin: 20px 20px 20px 0; margin: 20px 20px 20px 0;
} }
} }

6
website/demo-styles/table.scss
View File

@ -1,8 +1,8 @@
.el-table .warning-row { .#{$namespace}-table .warning-row {
background: oldlace; background: oldlace;
} }
.el-table .success-row { .#{$namespace}-table .success-row {
background: #f0f9eb; background: #f0f9eb;
} }
@ -15,7 +15,7 @@
width: 90px; width: 90px;
color: #99a9bf; color: #99a9bf;
} }
.el-form-item { .#{$namespace}-form-item {
margin-right: 0; margin-right: 0;
margin-bottom: 0; margin-bottom: 0;
width: 50%; width: 50%;

2
website/demo-styles/tag.scss
View File

@ -1,5 +1,5 @@
.demo-block.demo-tag { .demo-block.demo-tag {
.el-tag + .el-tag { .#{$namespace}-tag + .#{$namespace}-tag {
margin-left: 10px; margin-left: 10px;
} }

2
website/demo-styles/time-picker.scss
View File

@ -1,5 +1,5 @@
.demo-block { .demo-block {
.el-date-editor + .el-date-editor { .#{$namespace}-date-editor + .#{$namespace}-date-editor {
margin-left: 10px; margin-left: 10px;
} }
} }

2
website/demo-styles/timeline.scss
View File

@ -1,6 +1,6 @@
.demo-timeline .source .radio { .demo-timeline .source .radio {
margin-bottom: 20px; margin-bottom: 20px;
} }
.demo-timeline .source .radio .el-radio-group { .demo-timeline .source .radio .#{$namespace}-radio-group {
margin-left: 20px; margin-left: 20px;
} }

8
website/demo-styles/tooltip.scss
View File

@ -1,5 +1,5 @@
.demo-tooltip { .demo-tooltip {
.el-tooltip + .el-tooltip { .#{$namespace}-tooltip + .#{$namespace}-tooltip {
margin-left: 15px; margin-left: 15px;
} }
.box { .box {
@ -28,11 +28,11 @@
margin: 4px; margin: 4px;
} }
.left .el-tooltip__popper, .left .#{$namespace}-tooltip__popper,
.right .el-tooltip__popper { .right .#{$namespace}-tooltip__popper {
padding: 8px 10px; padding: 8px 10px;
} }
.el-tooltip { .#{$namespace}-tooltip {
margin-left: 0; margin-left: 0;
} }
} }

2
website/demo-styles/upload.scss
View File

@ -10,7 +10,7 @@
width: 360px; width: 360px;
} }
.avatar-uploader { .avatar-uploader {
.el-upload { .#{$namespace}-upload {
border: 1px dashed #d9d9d9; border: 1px dashed #d9d9d9;
border-radius: 6px; border-radius: 6px;
cursor: pointer; cursor: pointer;