mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-01-30 12:52:43 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(popover): light theme

Browse Source
This commit is contained in:
07akioni 2019-09-27 22:27:01 +08:00
parent 4c64a44de3
commit 07ca274eba
7 changed files with 224 additions and 154 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
packages/common/Popover/src/PopoverContent.js
View File

@ -4,6 +4,7 @@ import mousemoveoutside from '../../../directives/mousemoveoutside'
import placeable from '../../../mixins/placeable'
import zindexable from '../../../mixins/zindexable'
import withapp from '../../../mixins/withapp'
import themeable from '../../../mixins/themeable'
export default {
name: 'NPopoverContent',
@ -44,12 +45,16 @@ export default {
type: Number,
default: null
},
raw: {
type: Boolean,
default: false
},
detachedContainerClass: {
type: String,
default: 'n-popover-detached-content-container'
}
},
mixins: [withapp, placeable, zindexable],
mixins: [withapp, themeable, placeable, zindexable],
directives: {
clickoutside,
mousemoveoutside
@ -216,9 +221,10 @@ export default {
attrs: {
'n-placement': this.placement
},
staticClass: 'n-popover__content',
staticClass: 'n-popover-content',
class: {
'n-popover__content--without-arrow': !this.arrow
'n-popover-content--without-arrow': !this.arrow,
[`n-${this.synthesizedTheme}-theme`]: this.synthesizedTheme
},
style: this.style,
directives: [
@ -236,10 +242,10 @@ export default {
mouseleave: this.handleMouseLeave
}
}, [
...this.$slots.default,
h('div', {}, this.$slots.default),
this.arrow
? h('div', {
staticClass: 'n-popover__arrow'
staticClass: 'n-popover-arrow'
})
: null
])

344
styles/Popover.scss
View File

@ -1,184 +1,232 @@
@import "./mixins/mixins.scss";
@import "./themes/vars.scss";
$popover-arrow-width: 6px;
.n-popover__raw-content, .n-popover__content {
&.n-popover-fade-enter-active,
&.n-popover-fade-leave-active {
transform: scale(1);
@mixin popover-transition {
&.n-popover-fade-enter-to, &.n-popover-fade-leave {
transform: scaleX(.999999); // scale is set to 99999 to get rid of a ridiculous render bug of chrome
opacity: 1;
}
&.n-popover-fade-enter, &.n-popover-fade-leave-to {
opacity: 0;
transform: scale(.85);
}
&.n-popover-fade-enter-active {
transition: opacity .15s $fast-in-cubic-bezier, transform .15s $fast-in-cubic-bezier;
}
&.n-popover-fade-enter, &.n-popover-fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
transform: scale(.9);
}
&.n-popover-fade-leave-to {
&.n-popover-fade-leave-active {
transition: opacity .15s $slow-out-cubic-bezier, transform .15s $slow-out-cubic-bezier;
}
}
.n-popover__content {
transform-origin: inherit;
position: relative;
border-radius: 6px;
background-color: rgba(75, 81, 106, 1);
color: #ffffffe6;
font-size: 12px;
opacity: 1;
box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.16);
&.n-popover__content--without-arrow {
@include themes-mixin {
@include b(popover-content) {
$popover-arrow-width: 6px;
@include once {
@include popover-transition;
transform-origin: inherit;
transform: scale(.99999);
position: relative;
border-radius: 6px;
font-size: 12px;
opacity: 1;
@include m(without-arrow) {
&[n-placement$="top-start"] {
margin-bottom: 6px;
}
&[n-placement$="top"] {
margin-bottom: 6px;
}
&[n-placement$="top-end"] {
margin-bottom: 6px;
}
&[n-placement$="bottom-start"] {
margin-top: 6px;
}
&[n-placement$="bottom"] {
margin-top: 6px;
}
&[n-placement$="bottom-end"] {
margin-top: 6px;
}
&[n-placement$="left-start"] {
margin-right: 6px;
}&[n-placement$="left"] {
margin-right: 6px;
}
&[n-placement$="left-end"] {
margin-right: 6px;
}
&[n-placement$="right-start"] {
margin-left: 6px;
}
&[n-placement$="right"] {
margin-left: 6px;
}
&[n-placement$="right-end"] {
margin-left: 6px;
}
}
}
&[n-placement$="top-start"] {
margin-bottom: 6px;
@include once {
margin-bottom: 10px;
}
@include b(popover-arrow) {
@include once {
bottom: -2 * $popover-arrow-width;
left: 10px;
}
border-top-color: $--popover-background-color;
}
}
&[n-placement$="top"] {
margin-bottom: 6px;
@include once {
margin-bottom: 10px;
}
@include b(popover-arrow) {
@include once {
bottom: -2 * $popover-arrow-width;
transform: translateX(-$popover-arrow-width);
left: 50%;
}
border-top-color: $--popover-background-color;
}
}
&[n-placement$="top-end"] {
margin-bottom: 6px;
@include once {
margin-bottom: 10px;
}
@include b(popover-arrow) {
@include once {
bottom: -2 * $popover-arrow-width;
right: 10px;
}
border-top-color: $--popover-background-color;
}
}
&[n-placement$="bottom-start"] {
margin-top: 6px;
@include once {
margin-top: 10px;
}
@include b(popover-arrow) {
@include once {
top: -2 * $popover-arrow-width;
left: 10px;
}
border-bottom-color: $--popover-background-color;
}
}
&[n-placement$="bottom"] {
margin-top: 6px;
@include once {
margin-top: 10px;
}
@include b(popover-arrow) {
@include once {
top: -2 * $popover-arrow-width;
transform: translateX(-$popover-arrow-width);
left: 50%;
}
border-bottom-color: $--popover-background-color;
}
}
&[n-placement$="bottom-end"] {
margin-top: 6px;
@include once {
margin-top: 10px;
}
@include b(popover-arrow) {
@include once {
top: -2 * $popover-arrow-width;
right: 10px;
}
border-bottom-color: $--popover-background-color;
}
}
&[n-placement$="left-start"] {
margin-right: 6px;
@include once {
margin-right: 10px;
}
@include b(popover-arrow) {
@include once {
right: -2 * $popover-arrow-width;
top: 10px;
}
border-left-color: $--popover-background-color;
}
}&[n-placement$="left"] {
margin-right: 6px;
@include once {
margin-right: 10px;
}
@include b(popover-arrow) {
@include once {
right: -2 * $popover-arrow-width;
transform: translateY(-$popover-arrow-width);
top: 50%;
}
border-left-color: $--popover-background-color;
}
}
&[n-placement$="left-end"] {
margin-right: 10px;
transform-origin: right center;
.n-popover__arrow {
right: -2 * $popover-arrow-width;
border-left-color: rgba(75, 81, 106, 1);
bottom: 10px;
@include once {
margin-right: 10px;
}
@include b(popover-arrow) {
@include once {
right: -2 * $popover-arrow-width;
bottom: 10px;
}
border-left-color: $--popover-background-color;
}
}
&[n-placement$="right-start"] {
margin-left: 6px;
@include once {
margin-left: 10px;
}
@include b(popover-arrow) {
@include once {
left: -2 * $popover-arrow-width;
top: 10px;
}
border-right-color: $--popover-background-color;
}
}
&[n-placement$="right"] {
margin-left: 6px;
@include once {
margin-left: 10px;
}
@include b(popover-arrow) {
@include once {
left: -2 * $popover-arrow-width;
transform: translateY(-$popover-arrow-width);
top: 50%;
}
border-right-color: $--popover-background-color;
}
}
&[n-placement$="right-end"] {
margin-left: 6px;
@include once {
margin-left: 10px;
}
@include b(popover-arrow) {
@include once {
left: -2 * $popover-arrow-width;
bottom: 10px;
}
border-right-color: $--popover-background-color;
}
}
background-color: $--popover-background-color;
color: $--popover-color;
box-shadow: $--popover-box-shadow;
@include b(popover-arrow) {
border-width: 6px;
pointer-events: none;
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
}
.n-popover__arrow {
border-width: $popover-arrow-width;
pointer-events: none;
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
&[n-placement$="top-start"] {
margin-bottom: 10px;
.n-popover__arrow {
bottom: -2 * $popover-arrow-width;
border-top-color: rgba(75, 81, 106, 1);
left: 10px;
}
}
&[n-placement$="top"] {
margin-bottom: 10px;
.n-popover__arrow {
bottom: -2 * $popover-arrow-width;
transform: translateX(-$popover-arrow-width);
border-top-color: rgba(75, 81, 106, 1);
left: 50%;
}
}
&[n-placement$="top-end"] {
margin-bottom: 10px;
.n-popover__arrow {
bottom: -2 * $popover-arrow-width;
border-top-color: rgba(75, 81, 106, 1);
right: 10px;
}
}
&[n-placement$="bottom-start"] {
margin-top: 10px;
.n-popover__arrow {
top: -2 * $popover-arrow-width;
border-bottom-color: rgba(75, 81, 106, 1);
left: 10px;
}
}
&[n-placement$="bottom"] {
margin-top: 10px;
.n-popover__arrow {
top: -2 * $popover-arrow-width;
transform: translateX(-$popover-arrow-width);
border-bottom-color: rgba(75, 81, 106, 1);
left: 50%;
}
}
&[n-placement$="bottom-end"] {
margin-top: 10px;
.n-popover__arrow {
top: -2 * $popover-arrow-width;
border-bottom-color: rgba(75, 81, 106, 1);
right: 10px;
}
}
&[n-placement$="left-start"] {
margin-right: 10px;
.n-popover__arrow {
right: -2 * $popover-arrow-width;
border-left-color: rgba(75, 81, 106, 1);
top: 10px;
}
}&[n-placement$="left"] {
margin-right: 10px;
.n-popover__arrow {
right: -2 * $popover-arrow-width;
transform: translateY(-$popover-arrow-width);
border-left-color: rgba(75, 81, 106, 1);
top: 50%;
}
}
&[n-placement$="left-end"] {
margin-right: 10px;
.n-popover__arrow {
right: -2 * $popover-arrow-width;
border-left-color: rgba(75, 81, 106, 1);
bottom: 10px;
}
}
&[n-placement$="right-start"] {
margin-left: 10px;
.n-popover__arrow {
left: -2 * $popover-arrow-width;
border-right-color: rgba(75, 81, 106, 1);
top: 10px;
}
}
&[n-placement$="right"] {
margin-left: 10px;
.n-popover__arrow {
left: -2 * $popover-arrow-width;
transform: translateY(-$popover-arrow-width);
border-right-color: rgba(75, 81, 106, 1);
top: 50%;
}
}
&[n-placement$="right-end"] {
margin-left: 10px;
.n-popover__arrow {
left: -2 * $popover-arrow-width;
border-right-color: rgba(75, 81, 106, 1);
bottom: 10px;
}
}
}
}

6
styles/themes/commonVars.scss
View File

@ -10,4 +10,8 @@ $--n-font-size: (
"large": 15px
);
$--base-picker-border-radius: 6px !global;
$--base-picker-border-radius: 6px !global;
$--base-select-menu-box-shadow: none;
$--popover-box-shadow: (0px 0px 8px 0px rgba(0,0,0,0.08));

4
styles/themes/dark/components/Popover.scss Normal file
View File

@ -0,0 +1,4 @@
@mixin setup-dark-popover {
$--popover-background-color: $neutral-5 !global;
$--popover-color: $--n-secondary-text-color !global;
}

2
styles/themes/dark/index.scss
View File

@ -7,6 +7,7 @@
@import "components/BasePicker.scss";
@import "components/BaseCancelMark.scss";
@import "components/Tag.scss";
@import "components/Popover.scss";
@mixin setup-dark-theme () {
@include setup-dark-colors();
@ -32,4 +33,5 @@
@include setup-dark-base-picker;
@include setup-dark-base-cancel-mark;
@include setup-dark-tag;
@include setup-dark-popover;
}

4
styles/themes/light/components/Popover.scss Normal file
View File

@ -0,0 +1,4 @@
@mixin setup-light-popover {
$--popover-background-color: white !global;
$--popover-color: $--n-secondary-text-color !global;
}

2
styles/themes/light/index.scss
View File

@ -7,6 +7,7 @@
@import "components/BasePicker.scss";
@import "components/BaseCancelMark.scss";
@import "components/Tag.scss";
@import "components/Popover.scss";
@mixin setup-light-theme () {
@include setup-light-colors();
@ -34,4 +35,5 @@
@include setup-light-base-picker;
@include setup-light-base-cancel-mark;
@include setup-light-tag;
@include setup-light-popover;
}