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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -79,7 +79,7 @@
height: 180px;
padding: 2px 0;
.el-color-hue-slider__bar {
.#{$namespace}-color-hue-slider__bar {
background: linear-gradient(
to bottom, #f00 0%,
#ff0 17%, #0f0 33%,
@ -87,7 +87,7 @@
#f0f 83%, #f00 100%);
}
.el-color-hue-slider__thumb {
.#{$namespace}-color-hue-slider__thumb {
left: 0;
top: 0;
width: 100%;
@ -165,13 +165,13 @@
width: 20px;
height: 180px;
.el-color-alpha-slider__bar {
.#{$namespace}-color-alpha-slider__bar {
background: linear-gradient(
to bottom, rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%);
}
.el-color-alpha-slider__thumb {
.#{$namespace}-color-alpha-slider__thumb {
left: 0;
top: 0;
width: 100%;
@ -246,7 +246,7 @@
height: 40px;
@include when(disabled) {
.el-color-picker__trigger {
.#{$namespace}-color-picker__trigger {
cursor: not-allowed;
}
}
@ -254,12 +254,12 @@
@include m(medium) {
height: 36px;
.el-color-picker__trigger {
.#{$namespace}-color-picker__trigger {
height: 36px;
width: 36px;
}
.el-color-picker__mask {
.#{$namespace}-color-picker__mask {
height: 34px;
width: 34px;
}
@ -268,18 +268,18 @@
@include m(small) {
height: 32px;
.el-color-picker__trigger {
.#{$namespace}-color-picker__trigger {
height: 32px;
width: 32px;
}
.el-color-picker__mask {
.#{$namespace}-color-picker__mask {
height: 30px;
width: 30px;
}
.el-color-picker__icon,
.el-color-picker__empty {
.#{$namespace}-color-picker__icon,
.#{$namespace}-color-picker__empty {
transform: translate3d(-50%, -50%, 0) scale(0.8);
}
}
@ -287,18 +287,18 @@
@include m(mini) {
height: 28px;
.el-color-picker__trigger {
.#{$namespace}-color-picker__trigger {
height: 28px;
width: 28px;
}
.el-color-picker__mask {
.#{$namespace}-color-picker__mask {
height: 26px;
width: 26px;
}
.el-color-picker__icon,
.el-color-picker__empty {
.#{$namespace}-color-picker__icon,
.#{$namespace}-color-picker__empty {
transform: translate3d(-50%, -50%, 0) scale(0.8);
}
}
@ -380,7 +380,7 @@
background-color: $--color-white;
border-radius: $--border-radius-base;
box-shadow: $--dropdown-menu-box-shadow;
&.el-popper{
&.#{$namespace}-popper{
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";
.fade-in-linear-enter-active,
@ -10,36 +11,36 @@
opacity: 0;
}
.el-fade-in-linear-enter-active,
.el-fade-in-linear-leave-active {
.#{$namespace}-fade-in-linear-enter-active,
.#{$namespace}-fade-in-linear-leave-active {
transition: $--fade-linear-transition;
}
.el-fade-in-linear-enter-from,
.el-fade-in-linear-leave-to {
.#{$namespace}-fade-in-linear-enter-from,
.#{$namespace}-fade-in-linear-leave-to {
opacity: 0;
}
.el-fade-in-enter-active,
.el-fade-in-leave-active {
.#{$namespace}-fade-in-enter-active,
.#{$namespace}-fade-in-leave-active {
transition: all .3s cubic-bezier(.55,0,.1,1);
}
.el-fade-in-enter-from,
.el-fade-in-leave-active {
.#{$namespace}-fade-in-enter-from,
.#{$namespace}-fade-in-leave-active {
opacity: 0;
}
.el-zoom-in-center-enter-active,
.el-zoom-in-center-leave-active {
.#{$namespace}-zoom-in-center-enter-active,
.#{$namespace}-zoom-in-center-leave-active {
transition: all .3s cubic-bezier(.55,0,.1,1);
}
.el-zoom-in-center-enter-from,
.el-zoom-in-center-leave-active {
.#{$namespace}-zoom-in-center-enter-from,
.#{$namespace}-zoom-in-center-leave-active {
opacity: 0;
transform: scaleX(0);
}
.el-zoom-in-top-enter-active,
.el-zoom-in-top-leave-active {
.#{$namespace}-zoom-in-top-enter-active,
.#{$namespace}-zoom-in-top-leave-active {
opacity: 1;
transform: scaleY(1);
transition: $--md-fade-transition;
@ -49,34 +50,34 @@
transform-origin: center bottom;
}
}
.el-zoom-in-top-enter-from,
.el-zoom-in-top-leave-active {
.#{$namespace}-zoom-in-top-enter-from,
.#{$namespace}-zoom-in-top-leave-active {
opacity: 0;
transform: scaleY(0);
}
.el-zoom-in-bottom-enter-active,
.el-zoom-in-bottom-leave-active {
.#{$namespace}-zoom-in-bottom-enter-active,
.#{$namespace}-zoom-in-bottom-leave-active {
opacity: 1;
transform: scaleY(1);
transition: $--md-fade-transition;
transform-origin: center bottom;
}
.el-zoom-in-bottom-enter-from,
.el-zoom-in-bottom-leave-active {
.#{$namespace}-zoom-in-bottom-enter-from,
.#{$namespace}-zoom-in-bottom-leave-active {
opacity: 0;
transform: scaleY(0);
}
.el-zoom-in-left-enter-active,
.el-zoom-in-left-leave-active {
.#{$namespace}-zoom-in-left-enter-active,
.#{$namespace}-zoom-in-left-leave-active {
opacity: 1;
transform: scale(1, 1);
transition: $--md-fade-transition;
transform-origin: top left;
}
.el-zoom-in-left-enter-from,
.el-zoom-in-left-leave-active {
.#{$namespace}-zoom-in-left-enter-from,
.#{$namespace}-zoom-in-left-leave-active {
opacity: 0;
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;
}
.el-list-enter-active,
.el-list-leave-active {
.#{$namespace}-list-enter-active,
.#{$namespace}-list-leave-active {
transition: all 1s;
}
.el-list-enter-from, .el-list-leave-active {
.#{$namespace}-list-enter-from, .#{$namespace}-list-leave-active {
opacity: 0;
transform: translateY(-30px);
}
.el-opacity-transition {
.#{$namespace}-opacity-transition {
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 */
@import "../mixins/config";
// Special comment for theme configurator
// type|skipAutoTranslation|Category|Order

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

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

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

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

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

@ -6,7 +6,7 @@
user-select: none;
@include when(week-mode) {
.el-date-table__row {
.#{$namespace}-date-table__row {
&:hover {
div {
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;
line-height: 30px;
.el-time-panel {
.#{$namespace}-time-panel {
margin: 5px 0;
border: solid 1px $--datepicker-border-color;
background-color: $--color-white;
@ -103,8 +103,8 @@
}
}
.el-picker-panel *[slot=sidebar],
.el-picker-panel__sidebar {
.#{$namespace}-picker-panel *[slot=sidebar],
.#{$namespace}-picker-panel__sidebar {
position: absolute;
top: 0;
bottom: 0;
@ -116,7 +116,7 @@
overflow: auto;
}
.el-picker-panel *[slot=sidebar] + .el-picker-panel__body,
.el-picker-panel__sidebar + .el-picker-panel__body {
.#{$namespace}-picker-panel *[slot=sidebar] + .#{$namespace}-picker-panel__body,
.#{$namespace}-picker-panel__sidebar + .#{$namespace}-picker-panel__body {
margin-left: 110px;
}

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

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

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

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

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

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

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

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

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

@ -2,7 +2,7 @@
@import 'common/var';
@import './overlay.scss';
@keyframes el-drawer-fade-in {
@keyframes #{$namespace}-drawer-fade-in {
0% {
opacity: 0;
}
@ -81,11 +81,11 @@ $directions: rtl, ltr, ttb, btt;
overflow: hidden;
@each $direction in $directions {
.el-drawer-fade-enter-active & {
.#{$namespace}-drawer-fade-enter-active & {
@include animation-in($direction);
}
.el-drawer-fade-leave-active & {
.#{$namespace}-drawer-fade-leave-active & {
@include animation-out($direction);
}
}
@ -155,12 +155,12 @@ $directions: rtl, ltr, ttb, btt;
}
}
.el-drawer-fade-enter-active {
animation: el-drawer-fade-in 0.3s;
.#{$namespace}-drawer-fade-enter-active {
animation: #{$namespace}-drawer-fade-in 0.3s;
overflow: hidden !important;
}
.el-drawer-fade-leave-active {
.#{$namespace}-drawer-fade-leave-active {
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,
);
.el-dropdown-menu {
.#{$namespace}-dropdown-menu {
border: none;
}
@ -27,14 +27,14 @@
}
}
.el-button-group {
.#{$namespace}-button-group {
display: block;
.el-button {
.#{$namespace}-button {
float: none;
}
}
& .el-dropdown__caret-button {
& .#{$namespace}-dropdown__caret-button {
padding-left: 5px;
padding-right: 5px;
position: relative;
@ -53,7 +53,7 @@
background: mix(white, transparent, 50%);
}
&.el-button--default::before {
&.#{$namespace}-button--default::before {
background: mix($--button-default-border-color, transparent, 50%);
}
@ -64,7 +64,7 @@
}
}
& .el-dropdown__icon {
& .#{$namespace}-dropdown__icon {
padding-left: 0;
}
}
@ -73,7 +73,7 @@
margin: 0 3px;
}
.el-dropdown-selfdefine { // 自定义
.#{$namespace}-dropdown-selfdefine { // 自定义
outline: none;
}
}
@ -139,7 +139,7 @@
padding: 0 17px;
font-size: 14px;
&.el-dropdown-menu__item--divided {
&.#{$namespace}-dropdown-menu__item--divided {
$divided-offset: 6px;
margin-top: $divided-offset;
@ -159,7 +159,7 @@
padding: 0 15px;
font-size: 13px;
&.el-dropdown-menu__item--divided {
&.#{$namespace}-dropdown-menu__item--divided {
$divided-offset: 4px;
margin-top: $divided-offset;
@ -179,7 +179,7 @@
padding: 0 10px;
font-size: 12px;
&.el-dropdown-menu__item--divided {
&.#{$namespace}-dropdown-menu__item--divided {
$divided-offset: 3px;
margin-top: $divided-offset;

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

@ -4,12 +4,12 @@
@include b(form) {
@include m(label-left) {
& .el-form-item__label {
& .#{$namespace}-form-item__label {
text-align: left;
}
}
@include m(label-top) {
& .el-form-item__label {
& .#{$namespace}-form-item__label {
float: none;
display: inline-block;
text-align: left;
@ -17,20 +17,20 @@
}
}
@include m(inline) {
& .el-form-item {
& .#{$namespace}-form-item {
display: inline-block;
margin-right: 10px;
vertical-align: top;
}
& .el-form-item__label {
& .#{$namespace}-form-item__label {
float: none;
display: inline-block;
}
& .el-form-item__content {
& .#{$namespace}-form-item__content {
display: inline-block;
vertical-align: top;
}
&.el-form--label-top .el-form-item__content {
&.#{$namespace}-form--label-top .#{$namespace}-form-item__content {
display: block;
}
}
@ -39,54 +39,54 @@
margin-bottom: 22px;
@include utils-clearfix;
& .el-form-item {
& .#{$namespace}-form-item {
margin-bottom: 0;
}
& .el-input__validateIcon {
& .#{$namespace}-input__validateIcon {
display: none;
}
@include m(medium) {
.el-form-item__label {
.#{$namespace}-form-item__label {
line-height: 36px;
}
.el-form-item__content {
.#{$namespace}-form-item__content {
line-height: 36px;
}
}
@include m(small) {
.el-form-item__label {
.#{$namespace}-form-item__label {
line-height: 32px;
}
.el-form-item__content {
.#{$namespace}-form-item__content {
line-height: 32px;
}
&.el-form-item {
&.#{$namespace}-form-item {
margin-bottom: 18px;
}
.el-form-item__error {
.#{$namespace}-form-item__error {
padding-top: 2px;
}
}
@include m(mini) {
.el-form-item__label {
.#{$namespace}-form-item__label {
line-height: 28px;
}
.el-form-item__content {
.#{$namespace}-form-item__content {
line-height: 28px;
}
&.el-form-item {
&.#{$namespace}-form-item {
margin-bottom: 18px;
}
.el-form-item__error {
.#{$namespace}-form-item__error {
padding-top: 1px;
}
}
@include e(label-wrap) {
float: left;
.el-form-item__label {
.#{$namespace}-form-item__label {
display: inline-block;
float: none;
}
@ -108,7 +108,7 @@
font-size: 14px;
@include utils-clearfix;
.el-input-group {
.#{$namespace}-input-group {
vertical-align: top;
}
}
@ -132,8 +132,8 @@
@include when(required) {
@include pseudo('not(.is-no-asterisk)') {
& > .el-form-item__label:before,
& .el-form-item__label-wrap > .el-form-item__label:before {
& > .#{$namespace}-form-item__label:before,
& .#{$namespace}-form-item__label-wrap > .#{$namespace}-form-item__label:before {
content: '*';
color: $--color-danger;
margin-right: 4px;
@ -142,25 +142,25 @@
}
@include when(error) {
& .el-input__inner,
& .el-textarea__inner {
& .#{$namespace}-input__inner,
& .#{$namespace}-textarea__inner {
&, &:focus {
border-color: $--color-danger;
}
}
& .el-input-group__append,
& .el-input-group__prepend {
& .el-input__inner {
& .#{$namespace}-input-group__append,
& .#{$namespace}-input-group__prepend {
& .#{$namespace}-input__inner {
border-color: transparent;
}
}
.el-input__validateIcon {
.#{$namespace}-input__validateIcon {
color: $--color-danger;
}
}
@include m(feedback) {
.el-input__validateIcon {
.#{$namespace}-input__validateIcon {
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;
line-height: #{$--input-height - 2};
.el-input {
.#{$namespace}-input {
display: block;
&__inner {
@ -34,7 +34,7 @@
&:hover {
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;
}
}
@ -78,7 +78,7 @@
font-size: $--input-medium-font-size;
}
.el-input__inner {
.#{$namespace}-input__inner {
padding-left: #{$--input-medium-height + 7};
padding-right: #{$--input-medium-height + 7};
}
@ -92,12 +92,12 @@
width: $--input-small-height;
font-size: $--input-small-font-size;
[class*=el-icon] {
[class*=#{$namespace}-icon] {
transform: scale(.9);
}
}
.el-input__inner {
.#{$namespace}-input__inner {
padding-left: #{$--input-small-height + 7};
padding-right: #{$--input-small-height + 7};
}
@ -111,26 +111,26 @@
width: $--input-mini-height;
font-size: $--input-mini-font-size;
[class*=el-icon] {
[class*=#{$namespace}-icon] {
transform: scale(.8);
}
}
.el-input__inner {
.#{$namespace}-input__inner {
padding-left: #{$--input-mini-height + 7};
padding-right: #{$--input-mini-height + 7};
}
}
@include when(without-controls) {
.el-input__inner {
.#{$namespace}-input__inner {
padding-left: 15px;
padding-right: 15px;
}
}
@include when(controls-right) {
.el-input__inner {
.#{$namespace}-input__inner {
padding-left: 15px;
padding-right: #{$--input-height + 10};
}
@ -139,7 +139,7 @@
height: auto;
line-height: #{($--input-height - 2) / 2};
[class*=el-icon] {
[class*=#{$namespace}-icon] {
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;
background: $--color-white;
position: absolute;
@ -48,7 +48,7 @@
}
@include when(disabled) {
.el-textarea__inner {
.#{$namespace}-textarea__inner {
background-color: $--input-disabled-fill;
border-color: $--input-disabled-border;
color: $--input-disabled-color;
@ -61,11 +61,11 @@
}
@include when(exceed) {
.el-textarea__inner {
.#{$namespace}-textarea__inner {
border-color: $--color-danger;
}
.el-input__count {
.#{$namespace}-input__count {
color: $--color-danger;
}
}
@ -79,7 +79,7 @@
line-height: $--input-height;
@include scroll-bar;
& .el-input__clear {
& .#{$namespace}-input__clear {
color: $--input-icon-color;
font-size: $--input-font-size;
cursor: pointer;
@ -90,14 +90,14 @@
}
}
& .el-input__count {
& .#{$namespace}-input__count {
height: 100%;
display: inline-flex;
align-items: center;
color: $--color-info;
font-size: 12px;
.el-input__count-inner {
.#{$namespace}-input__count-inner {
background: $--color-white;
line-height: initial;
display: inline-block;
@ -182,14 +182,14 @@
}
@include when(active) {
.el-input__inner {
.#{$namespace}-input__inner {
outline: none;
border-color: $--input-focus-border;
}
}
@include when(disabled) {
.el-input__inner {
.#{$namespace}-input__inner {
background-color: $--input-disabled-fill;
border-color: $--input-disabled-border;
color: $--input-disabled-color;
@ -200,31 +200,31 @@
}
}
.el-input__icon {
.#{$namespace}-input__icon {
cursor: not-allowed;
}
}
@include when(exceed) {
.el-input__inner {
.#{$namespace}-input__inner {
border-color: $--color-danger;
}
.el-input__suffix {
.el-input__count {
.#{$namespace}-input__suffix {
.#{$namespace}-input__count {
color: $--color-danger;
}
}
}
@include m(suffix) {
.el-input__inner {
.#{$namespace}-input__inner {
padding-right: 30px;
}
}
@include m(prefix) {
.el-input__inner {
.#{$namespace}-input__inner {
padding-left: 30px;
}
}
@ -237,7 +237,7 @@
height: $--input-medium-height;
}
.el-input__icon {
.#{$namespace}-input__icon {
line-height: $--input-medium-height;
}
}
@ -249,7 +249,7 @@
height: $--input-small-height;
}
.el-input__icon {
.#{$namespace}-input__icon {
line-height: $--input-small-height;
}
}
@ -261,7 +261,7 @@
height: $--input-mini-height;
}
.el-input__icon {
.#{$namespace}-input__icon {
line-height: $--input-mini-height;
}
}
@ -274,7 +274,7 @@
border-collapse: separate;
border-spacing:0;
> .el-input__inner {
> .#{$namespace}-input__inner {
vertical-align: middle;
display: table-cell;
}
@ -295,15 +295,15 @@
outline: none;
}
.el-select,
.el-button {
.#{$namespace}-select,
.#{$namespace}-button {
display: inline-block;
margin: -10px -20px;
}
button.el-button,
div.el-select .el-input__inner,
div.el-select:hover .el-input__inner {
button.#{$namespace}-button,
div.#{$namespace}-select .#{$namespace}-input__inner,
div.#{$namespace}-select:hover .#{$namespace}-input__inner {
border-color: transparent;
background-color: transparent;
color: inherit;
@ -311,8 +311,8 @@
border-bottom: 0;
}
.el-button,
.el-input {
.#{$namespace}-button,
.#{$namespace}-input {
font-size: inherit;
}
}
@ -330,28 +330,28 @@
}
@include m(prepend) {
.el-input__inner {
.#{$namespace}-input__inner {
border-top-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;
}
}
@include m(append) {
.el-input__inner {
.#{$namespace}-input__inner {
border-top-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;
}
}
}
/** disalbe default clear on IE */
.el-input__inner::-ms-clear {
.#{$namespace}-input__inner::-ms-clear {
display: none;
width: 0;
height: 0;

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

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

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

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

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

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

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

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

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

@ -24,7 +24,7 @@
}
@include when(closable) {
.el-message__content {
.#{$namespace}-message__content {
padding-right: 16px;
}
}
@ -34,7 +34,7 @@
}
@include m(info) {
.el-message__content {
.#{$namespace}-message__content {
color: $--message-info-font-color;
}
}
@ -43,7 +43,7 @@
background-color: $--color-success-lighter;
border-color: $--color-success-light;
.el-message__content {
.#{$namespace}-message__content {
color: $--message-success-font-color;
}
}
@ -52,7 +52,7 @@
background-color: $--color-warning-lighter;
border-color: $--color-warning-light;
.el-message__content {
.#{$namespace}-message__content {
color: $--message-warning-font-color;
}
}
@ -61,7 +61,7 @@
background-color: $--color-danger-lighter;
border-color: $--color-danger-light;
.el-message__content {
.#{$namespace}-message__content {
color: $--message-danger-font-color;
}
}
@ -96,25 +96,25 @@
}
}
& .el-icon-success {
& .#{$namespace}-icon-success {
color: $--message-success-font-color;
}
& .el-icon-error {
& .#{$namespace}-icon-error {
color: $--message-danger-font-color;
}
& .el-icon-info {
& .#{$namespace}-icon-info {
color: $--message-info-font-color;
}
& .el-icon-warning {
& .#{$namespace}-icon-warning {
color: $--message-warning-font-color;
}
}
.el-message-fade-enter-from,
.el-message-fade-leave-to {
.#{$namespace}-message-fade-enter-from,
.#{$namespace}-message-fade-leave-to {
opacity: 0;
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) {
&.el-popper[role="tooltip"] {
&.#{$namespace}-popper[role="tooltip"] {
background: $background;
border: $border;
box-shadow: $box-shadow;
.el-popper__arrow {
.#{$namespace}-popper__arrow {
&::before {
border: $border;
}
@ -205,7 +205,7 @@
in ('top': 'left', 'bottom': 'right', 'left': 'bottom', 'right': 'top')
{
&[data-popper-placement^='#{$placement}'] {
.el-popper__arrow::before {
.#{$namespace}-popper__arrow::before {
border-#{$placement}-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;
}
.el-icon-error {
.#{$namespace}-icon-error {
color: $--notification-danger-icon-color;
}
.el-icon-info {
.#{$namespace}-icon-info {
color: $--notification-info-icon-color;
}
.el-icon-warning {
.#{$namespace}-icon-warning {
color: $--notification-warning-icon-color;
}
}
.el-notification-fade-enter-from {
.#{$namespace}-notification-fade-enter-from {
&.right {
right: 0;
transform: translateX(100%);
@ -95,6 +95,6 @@
}
}
.el-notification-fade-leave-to {
.#{$namespace}-notification-fade-leave-to {
opacity: 0;
}

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

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

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

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

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

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

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

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

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

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

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

@ -32,7 +32,7 @@
color: $--color-primary;
}
& [class*="el-icon-"] {
& [class*="#{$namespace}-icon-"] {
line-height: 0.9;
& + span {
@ -42,7 +42,7 @@
}
&:first-child {
.el-radio-button__inner {
.#{$namespace}-radio-button__inner {
border-left: $--border-base;
border-radius: $--border-radius-base 0 0 $--border-radius-base;
box-shadow: none !important;
@ -56,7 +56,7 @@
z-index: -1;
&:checked {
& + .el-radio-button__inner {
& + .#{$namespace}-radio-button__inner {
color: $--radio-button-checked-font-color;
background-color: $--radio-button-checked-background-color;
border-color: $--radio-button-checked-border-color;
@ -65,7 +65,7 @@
}
&:disabled {
& + .el-radio-button__inner {
& + .#{$namespace}-radio-button__inner {
color: $--button-disabled-font-color;
cursor: not-allowed;
background-image: none;
@ -73,36 +73,36 @@
border-color: $--button-disabled-border-color;
box-shadow: none;
}
&:checked + .el-radio-button__inner {
&:checked + .#{$namespace}-radio-button__inner {
background-color: $--radio-button-disabled-checked-fill;
}
}
}
&:last-child {
.el-radio-button__inner {
.#{$namespace}-radio-button__inner {
border-radius: 0 $--border-radius-base $--border-radius-base 0;
}
}
&:first-child:last-child {
.el-radio-button__inner {
.#{$namespace}-radio-button__inner {
border-radius: $--border-radius-base;
}
}
@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 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 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);
}
}

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

@ -32,7 +32,7 @@
border-color: $--border-color-lighter;
}
& + .el-radio.is-bordered {
& + .#{$namespace}-radio.is-bordered {
margin-left: 10px;
}
}
@ -42,10 +42,10 @@
padding: $--radio-bordered-medium-padding;
border-radius: $--button-medium-border-radius;
height: $--radio-bordered-medium-height;
.el-radio__label {
.#{$namespace}-radio__label {
font-size: $--button-medium-font-size;
}
.el-radio__inner {
.#{$namespace}-radio__inner {
height: $--radio-bordered-medium-input-height;
width: $--radio-bordered-medium-input-width;
}
@ -56,10 +56,10 @@
padding: $--radio-bordered-small-padding;
border-radius: $--button-small-border-radius;
height: $--radio-bordered-small-height;
.el-radio__label {
.#{$namespace}-radio__label {
font-size: $--button-small-font-size;
}
.el-radio__inner {
.#{$namespace}-radio__inner {
height: $--radio-bordered-small-input-height;
width: $--radio-bordered-small-input-width;
}
@ -70,10 +70,10 @@
padding: $--radio-bordered-mini-padding;
border-radius: $--button-mini-border-radius;
height: $--radio-bordered-mini-height;
.el-radio__label {
.#{$namespace}-radio__label {
font-size: $--button-mini-font-size;
}
.el-radio__inner {
.#{$namespace}-radio__inner {
height: $--radio-bordered-mini-input-height;
width: $--radio-bordered-mini-input-width;
}
@ -94,7 +94,7 @@
vertical-align: middle;
@include when(disabled) {
.el-radio__inner {
.#{$namespace}-radio__inner {
background-color: $--radio-disabled-input-fill;
border-color: $--radio-disabled-input-border-color;
cursor: not-allowed;
@ -104,12 +104,12 @@
background-color: $--radio-disabled-icon-color;
}
& + .el-radio__label {
& + .#{$namespace}-radio__label {
cursor: not-allowed;
}
}
&.is-checked {
.el-radio__inner {
.#{$namespace}-radio__inner {
background-color: $--radio-disabled-checked-input-fill;
border-color: $--radio-disabled-checked-input-border-color;
@ -118,14 +118,14 @@
}
}
}
& + span.el-radio__label {
& + span.#{$namespace}-radio__label {
color: $--color-text-placeholder;
cursor: not-allowed;
}
}
@include when(checked) {
.el-radio__inner {
.#{$namespace}-radio__inner {
border-color: $--radio-checked-input-border-color;
background: $--radio-checked-icon-color;
@ -134,13 +134,13 @@
}
}
& + .el-radio__label {
& + .#{$namespace}-radio__label {
color: $--radio-checked-font-color;
}
}
@include when(focus) {
.el-radio__inner {
.#{$namespace}-radio__inner {
border-color: $--radio-input-border-color-hover;
}
}
@ -187,7 +187,7 @@
}
&: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;
}
}

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;
}
.el-scrollbar-fade-leave-active {
.#{$namespace}-scrollbar-fade-leave-active {
transition: opacity 120ms ease-out;
}
.el-scrollbar-fade-enter-from,
.el-scrollbar-fade-leave-active {
.#{$namespace}-scrollbar-fade-enter-from,
.#{$namespace}-scrollbar-fade-leave-active {
opacity: 0;
}

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

@ -8,7 +8,7 @@
box-sizing: border-box;
@include when(multiple) {
& .el-select-dropdown__item.selected {
& .#{$namespace}-select-dropdown__item.selected {
color: $--select-option-selected-font-color;
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;
}
}

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

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

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

@ -10,10 +10,10 @@
$--skeleton-color 63%
);
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% {
background-position: 100% 50%;
}
@ -33,7 +33,7 @@
}
@include when(animated) {
.el-skeleton__item {
.#{$namespace}-skeleton__item {
@include skeleton-color();
}
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -24,7 +24,7 @@
color: #8492a6;
}
.el-col:not(:last-child) {
.#{$namespace}-col:not(:last-child) {
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;
}
.demo-badge.demo-block {

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -32,7 +32,7 @@
width: 49%;
}
.el-image {
.#{$namespace}-image {
width: 300px;
height: 200px;
}
@ -66,7 +66,7 @@
height: 400px;
overflow-y: auto;
.el-image {
.#{$namespace}-image {
display: block;
min-height: 200px;
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 "./alert.scss";
@import "./badge.scss";

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

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

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

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

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

@ -1,11 +1,11 @@
.demo-layout {
.el-row {
.#{$namespace}-row {
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
}
.el-col {
.#{$namespace}-col {
border-radius: 4px;
}
.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;
}

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

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

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

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

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

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

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

@ -1,9 +1,9 @@
.demo-block.demo-progress {
.el-progress--line {
.#{$namespace}-progress--line {
margin-bottom: 15px;
width: 350px;
}
.el-progress--circle {
.#{$namespace}-progress--circle {
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;
}

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

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

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

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

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

@ -1,5 +1,5 @@
.demo-block.demo-switch {
.el-switch {
.#{$namespace}-switch {
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;
}
.el-table .success-row {
.#{$namespace}-table .success-row {
background: #f0f9eb;
}
@ -15,7 +15,7 @@
width: 90px;
color: #99a9bf;
}
.el-form-item {
.#{$namespace}-form-item {
margin-right: 0;
margin-bottom: 0;
width: 50%;

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

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

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

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

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

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

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

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

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

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