github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

Popover: add chalk theme (#7003) 

* Popover: add chalk theme

* Popover: add chalk theme
pull/7011/head
Black Wayne 2017-09-14 11:34:13 +08:00 committed by 杨奕
parent c20954f1f2
commit e62f8c1414
4 changed files with 74 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/popover/src/main.vue
View File

@ -3,7 +3,7 @@
<transition :name="transition" @after-leave="doDestroy">
<div
class="el-popover"
:class="[popperClass]"
:class="[popperClass, content && 'el-popover--plain']"
ref="popper"
v-show="!disabled && showPopper"
:style="{ width: width + 'px' }">

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

@ -13,30 +13,30 @@ $--color-white: #fff;
$--color-black: #000;
$--color-primary: #1989fa;
$--color-primary-light-1: mix($--color-white, $--color-primary, 10%);
$--color-primary-light-2: mix($--color-white, $--color-primary, 20%);
$--color-primary-light-3: mix($--color-white, $--color-primary, 30%);
$--color-primary-light-4: mix($--color-white, $--color-primary, 40%);
$--color-primary-light-5: mix($--color-white, $--color-primary, 50%);
$--color-primary-light-6: mix($--color-white, $--color-primary, 60%);
$--color-primary-light-7: mix($--color-white, $--color-primary, 70%);
$--color-primary-light-8: mix($--color-white, $--color-primary, 80%);
$--color-primary-light-9: mix($--color-white, $--color-primary, 90%);
$--color-primary-light-1: mix($--color-white, $--color-primary, 10%); // #3095fb#
$--color-primary-light-2: mix($--color-white, $--color-primary, 20%); // #47a1fb#
$--color-primary-light-3: mix($--color-white, $--color-primary, 30%); // #5eadfc#
$--color-primary-light-4: mix($--color-white, $--color-primary, 40%); // #75b8fc#
$--color-primary-light-5: mix($--color-white, $--color-primary, 50%); // #8cc4fd#
$--color-primary-light-6: mix($--color-white, $--color-primary, 60%); // #a3d0fd#
$--color-primary-light-7: mix($--color-white, $--color-primary, 70%); // #badcfe#
$--color-primary-light-8: mix($--color-white, $--color-primary, 80%); // #d1e7fe#
$--color-primary-light-9: mix($--color-white, $--color-primary, 90%); // #e8f3ff#
$--color-success: #67c23a;
$--color-warning: #eb9e05;
$--color-danger: #fa5555;
$--color-info: #878d99;
$--color-success-light: mix($--color-white, $--color-success, 80%);
$--color-warning-light: mix($--color-white, $--color-warning, 80%);
$--color-danger-light: mix($--color-white, $--color-danger, 80%);
$--color-info-light: mix($--color-white, $--color-info, 80%);
$--color-success-light: mix($--color-white, $--color-success, 80%); // #e1f3d8#
$--color-warning-light: mix($--color-white, $--color-warning, 80%); // #fbeccd#
$--color-danger-light: mix($--color-white, $--color-danger, 80%); // #fedddd#
$--color-info-light: mix($--color-white, $--color-info, 80%); // #e7e8eb#
$--color-success-lighter: mix($--color-white, $--color-success, 90%);
$--color-warning-lighter: mix($--color-white, $--color-warning, 90%);
$--color-danger-lighter: mix($--color-white, $--color-danger, 90%);
$--color-info-lighter: mix($--color-white, $--color-info, 90%);
$--color-success-lighter: mix($--color-white, $--color-success, 90%); // #f0f9ec#
$--color-warning-lighter: mix($--color-white, $--color-warning, 90%); // #fdf5e6#
$--color-danger-lighter: mix($--color-white, $--color-danger, 90%); // #ffeeee#
$--color-info-lighter: mix($--color-white, $--color-info, 90%); // #f3f4f5#
$--color-text-primary: #2d2f33;
$--color-text-regular: #5a5e66;
@ -70,7 +70,7 @@ $--border-radius-circle: 100%;
-------------------------- */
$--box-shadow-base: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
$--box-shadow-dark: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .12);
$--box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.03);
/* Fill
-------------------------- */
$--fill-base: $--color-white;
@ -78,6 +78,7 @@ $--fill-base: $--color-white;
/* Font
-------------------------- */
$--font-size-base: 14px;
$--font-size-small: 13px;
$--font-color-base: #5a5e66;
$--font-color-disabled-base: #bbb;
$--font-weight-primary: 500;
@ -101,6 +102,7 @@ $--disabled-border-base: $--border-color-lighter;
/* Icon
-------------------------- */
$--icon-color: #666;
$--icon-color-base: $--color-info;
/* Checkbox
-------------------------- */
@ -460,8 +462,11 @@ $--dialog-font-size: 14px;
/* Table
-------------------------- */
$--table-border-color: $--border-color-base;
$--table-border-color: $--border-color-lighter;
$--table-text-color: $--color-text-regular;
$--table-header-color: $--color-text-secondary;
$--table-row-hover-background: $--background-color-base;
$--table-current-row-background: $--background-color-base;
$--table-header-background: $--color-text-secondary;
$--table-footer-background: $--color-text-placeholder;
@ -482,11 +487,12 @@ $--pagination-hover-color: $--color-white;
/* Popover
-------------------------- */
$--popover-fill: $--color-white;
$--popover-font-size: 12px;
$--popover-border-color: $--disabled-border-base;
$--popover-font-size: $--font-size-base;
$--popover-border-color: $--border-color-lighter;
$--popover-arrow-size: 6px;
$--popover-padding: 10px;
$--popover-title-font-size: 13px;
$--popover-padding-large: 28px 34px;
$--popover-title-font-size: 18px;
$--popover-title-color: $--color-text-primary;
/* Tooltip
@ -529,7 +535,7 @@ $--tag-danger-color: $--color-danger;
/* Dropdown
-------------------------- */
$--dropdown-menu-box-shadow: $--box-shadow-dark;
$--dropdown-menu-box-shadow: $--box-shadow-light;
$--dropdown-menuItem-hover-fill: $--color-text-secondary;
$--dropdown-menuItem-hover-color: $--link-color;

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

@ -1,20 +1,6 @@
@import "function";
@import "../common/var";
/* Transition
-------------------------- */
@mixin primary-transition {
transition: $t-primary;
}
@mixin specific-transition($attr) {
transition: $attr $t-primary;
}
@mixin specific-transition-with-time($attr, $time) {
transition: $attr $t-primary;
}
/* Flex
-------------------------- */
@mixin flex-center {
@ -27,16 +13,47 @@
align-items: center;
}
/* Scrollbar
-------------------------- */
@mixin scroll-bar {
$--scrollbar-thumb-background: #b4bccc;
$--scrollbar-track-background: #edeff5;
/* placeholder
&::-webkit-scrollbar {
z-index: 11;
width: 6px;
background: black;
&:horizontal {
height: 6px;
}
&-thumb {
border-radius: 5px;
background: $--scrollbar-thumb-background;
}
&-corner {
background: $--scrollbar-track-background;
}
&-track {
background: $--scrollbar-track-background;
}
}
}
/* Placeholder
-------------------------- */
@mixin placeholder {
&::-webkit-input-placeholder {
@content
}
&::-moz-placeholder {
@content
}
&:-ms-input-placeholder {
@content
}

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

@ -5,13 +5,20 @@
position: absolute;
background: $--popover-fill;
min-width: 150px;
border-radius: 2px;
border-radius: 4px;
border: 1px solid $--popover-border-color;
padding: $--popover-padding;
z-index: $--index-popper;
color: $--color-text-regular;
line-height: 1.7;
text-align: justify;
word-break: break-all;
font-size: $--popover-font-size;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12),
0 0 6px 0 rgba(0, 0, 0, .04);
box-shadow: $--box-shadow-light;
@include m(plain) {
padding: $--popover-padding-large;
}
.popper__arrow,
.popper__arrow::after {
@ -25,6 +32,7 @@
.popper__arrow {
border-width: $--popover-arrow-size;
filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03))
}
.popper__arrow::after {
@ -113,6 +121,6 @@
color: $--popover-title-color;
font-size: $--popover-title-font-size;
line-height: 1;
margin-bottom: 9px;
margin-bottom: 15px;
}
}