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

refactor(service-layout): use flex rather than position absolute to locate sider

Browse Source
This commit is contained in:
07akioni 2020-02-20 17:14:52 +08:00
parent b8e6407382
commit f4e32463f3
14 changed files with 54 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
demo/documentation/components/table/zhCN/index.md
View File

@ -1,4 +1,4 @@
# Table
# 表格 Table
<!--single-column-->
如果你只想画点简单的表格，用它。需要渲染数据请看<n-a to="n-data-table">数据表格 Data Table</n-a>。

7
src/Layout/src/Layout.vue
View File

@ -11,7 +11,12 @@
transition: transitionBlocked ? 'none' : null
}"
>
<n-scrollbar v-if="!useNativeScrollbar" ref="scrollbar" :content-style="scrollContentStyle" :container-style="scrollContainerStyle">
<n-scrollbar
v-if="!useNativeScrollbar"
ref="scrollbar"
:content-style="scrollContentStyle"
:container-style="scrollContainerStyle"
>
<slot />
</n-scrollbar>
<slot v-else />

15
src/Layout/src/LayoutSider.vue
View File

@ -15,7 +15,12 @@
width: styleWidth,
}"
>
<n-scrollbar v-if="!useNativeScrollbar" class="n-layout-sider__content">
<n-scrollbar
v-if="!useNativeScrollbar"
class="n-layout-sider__content"
:content-style="scrollContentStyle"
:container-style="scrollContainerStyle"
>
<slot />
</n-scrollbar>
<div v-else class="n-layout-sider__content">
@ -83,6 +88,14 @@ export default {
duration: {
type: Number,
default: 300
},
scrollContentStyle: {
type: Object,
default: null
},
scrollContainerStyle: {
type: Object,
default: null
}
},
data () {

12
src/_deprecated/NimbusServiceLayout/src/main.vue
View File

@ -92,13 +92,12 @@ export default {
'show-toggle-button': true,
'show-trigger': true,
'collapsed': this.collapsed,
'collapse-mode': 'transform',
'collapse-mode': 'width',
'bordered': true,
'mode': 'absolute',
'show-content': !this.collapsed,
'use-native-scrollbar': false,
'scroll-content-style': {
width: '100%'
'scroll-container-style': {
width: '272px'
}
}
const createMenu = items => {
@ -162,6 +161,10 @@ export default {
}
}, [
h('NLayoutSider', {
style: {
'display': 'flex',
'justify-content': 'flex-end'
},
props: siderProps,
on: {
collapse: () => {
@ -230,7 +233,6 @@ export default {
h('NLayout', {
ref: 'body',
props: {
'mode': 'absolute',
'use-native-scrollbar': false,
'scroll-content-style': {
width: '100%',

6
styles/DataTable.scss
View File

@ -197,7 +197,7 @@
align-items: center;
transition: background-color .3s $--n-ease-in-out-cubic-bezier;
&:hover {
background-color: $--n-action-background-color;
background-color: $--overlay-tab;
}
@include b(icon) {
fill: change-color($--n-secondary-text-color, $alpha: .2);
@ -207,12 +207,12 @@
}
@include m(popover-visible) {
@include e(icon-wrapper) {
background-color: $--n-action-background-color;
background-color: $--overlay-tab;
}
}
@include m(active) {
@include e(icon-wrapper) {
background-color: $--n-action-background-color;
background-color: $--overlay-tab;
@include b(icon) {
fill: $--n-primary-color;
stroke: $--n-primary-color;

2
styles/Typography.scss
View File

@ -180,7 +180,7 @@ $--header-bar-width: (
border-radius: 3px;
font-size: .9em;
background-color: $--typography-code-background-color;
border: 1px solid $--n-border-color;
border: 1px solid $--typography-code-border-color;
}
@include m(primary-depth) {
color: $--n-primary-text-color;

12
styles/themes/dark/components/Alert.scss
View File

@ -1,17 +1,17 @@
@mixin setup-dark-alert {
$--alert-border-color: (
'default': $--overlay-divider,
'default': $--n-divider-color,
'success': change-color($--n-success-hs-color, $alpha: .35),
'info': change-color($--n-info-hs-color, $alpha: .35),
'warning': change-color($--n-warning-hs-color, $alpha: .35),
'error': change-color($--n-error-hs-color, $alpha: .35)
) !global;
$--alert-background-color: (
'default': $--n-action-background-color,
'success': change-color($--n-success-hs-color, $alpha: .2),
'info': change-color($--n-info-hs-color, $alpha: .2),
'warning': change-color($--n-warning-hs-color, $alpha: .2),
'error': change-color($--n-error-hs-color, $alpha: .2)
'default': $--n-input-background-color,
'success': change-color($--n-success-hs-color, $alpha: .25),
'info': change-color($--n-info-hs-color, $alpha: .25),
'warning': change-color($--n-warning-hs-color, $alpha: .25),
'error': change-color($--n-error-hs-color, $alpha: .25)
) !global;
$--alert-title-text-color: (
'default': $--n-primary-text-color,

1
styles/themes/dark/components/Typography.scss
View File

@ -1,3 +1,4 @@
@mixin setup-dark-typography {
$--typography-code-background-color: $--n-code-background-color !global;
$--typography-code-border-color: transparent !global;
}

5
styles/themes/dark/darkColors.scss
View File

@ -14,8 +14,8 @@
$--overlay-avatar: rgba(255, 255, 255, .16) !global;
$--overlay-rail: rgba(255, 255, 255, .18) !global;
$--overlay-border: rgba(255, 255, 255, .14) !global;
$--overlay-divider: rgba(255, 255, 255, .12) !global;
$--overlay-border: rgba(255, 255, 255, .13) !global;
$--overlay-divider: rgba(255, 255, 255, .10) !global;
$--overlay-input: rgba(255, 255, 255, .1) !global;
$--overlay-action: rgba(255, 255, 255, .05) !global;
$--overlay-tab: rgba(255, 255, 255, .08) !global;
@ -23,6 +23,7 @@
$--overlay-scrollbar-hover: rgba(255, 255, 255, .3) !global;
$--overlay-disabled: rgba(255, 255, 255, alpha($--overlay-input) * $--alpha-disabled) !global;
$--neutral-base: black !global;
$--neutral-popover: rgb(89, 93, 119) !global;
$--neutral-modal: rgb(70, 75, 99) !global;
$--neutral-card: rgb(30, 36, 55) !global;

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

@ -60,7 +60,7 @@
@mixin setup-dark-theme($in-js-env: false) {
@include setup-dark-colors();
$--n-default-color: $--primary-default !global;
$--n-base-background-color: $--neutral-base !global;
$--n-primary-color: $--primary-default !global;
$--n-primary-hover-color: $--primary-hover !global;

16
styles/themes/light/components/Button.scss
View File

@ -73,15 +73,11 @@
'error-focus-ripple-start': (0 0 0 0 map-get($map: $--button-border-color, $key: 'error')),
'error-focus-ripple-end': (0 0 0 $--button-box-shadow-ripple-spread map-get($map: $--button-border-color, $key: 'error'))
) !global;
$button-ghost-alpha: 0;
$button-ghost-hover-alpha: .1;
$button-ghost-active-alpha: .15;
$button-ghost-focus-alpha: .1;
$--button-background-color: (
"default": mix($--n-default-color, white, 0),
"default-focus": mix($--n-default-color, white, 8%),
"default-hover": mix($--n-default-color, white, 8%),
"default-active": mix($--n-default-color, white, 12%),
"default": mix($--n-secondary-text-color, $--n-base-background-color, 0),
"default-focus": mix($--n-secondary-text-color, $--n-base-background-color, 8%),
"default-hover": mix($--n-secondary-text-color, $--n-base-background-color, 8%),
"default-active": mix($--n-secondary-text-color, $--n-base-background-color, 12%),
"primary": $--n-primary-color,
"primary-focus": $--n-primary-hover-color,
"primary-hover": $--n-primary-hover-color,
@ -103,6 +99,10 @@
"error-hover": $--n-error-hover-color,
"error-active": $--n-error-active-color,
) !global;
$button-ghost-alpha: 0;
$button-ghost-hover-alpha: .1;
$button-ghost-active-alpha: .15;
$button-ghost-focus-alpha: .1;
$--ghost-button-background-color: (
"default": change-color($--n-secondary-text-color, $alpha: 0),
"default-focus": change-color($--n-secondary-text-color, $alpha: .08),

1
styles/themes/light/components/Typography.scss
View File

@ -1,3 +1,4 @@
@mixin setup-light-typography {
$--typography-code-background-color: $--n-code-background-color !global;
$--typography-code-border-color: $--n-border-color !global;
}

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

@ -60,7 +60,7 @@
@mixin setup-light-theme($in-js-env: false) {
@include setup-light-colors();
$--n-default-color: black !global;
$--n-base-background-color: $--neutral-base !global;
$--n-primary-color: $--primary-default !global;
$--n-primary-hover-color: $--primary-hover !global;

1
styles/themes/light/lightColors.scss
View File

@ -24,6 +24,7 @@
$--overlay-disabled: rgba(0, 0, 0, .04) !global;
$--overlay-tab: rgba(0, 0, 0, .04) !global;
$--neutral-base: white !global;
$--neutral-popover: rgb(255, 255, 255) !global;
$--neutral-modal: rgb(255, 255, 255) !global;
$--neutral-card: rgb(255, 255, 255) !global;