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

chore: code clean

Browse Source
This commit is contained in:
07akioni 2019-11-28 14:03:12 +08:00
parent c015771f67
commit d1d05b7c84
15 changed files with 152 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "naive-ui",
"version": "0.5.19",
"version": "0.5.20",
"description": "",
"main": "index.js",
"scripts": {

3
packages/common/Avator/src/main.vue
View File

@ -32,10 +32,11 @@
<script>
import withapp from '../../../mixins/withapp'
import themeable from '../../../mixins/themeable'
import asthemecontext from '../../../mixins/asthemecontext'
export default {
name: 'NAvatar',
mixins: [withapp, themeable],
mixins: [withapp, themeable, asthemecontext],
props: {
size: {
type: [String, Number],

2
packages/common/Form/src/FormItemRow.vue
View File

@ -1,6 +1,6 @@
<script>
import NFormItemCol from './FormItemCol'
import NRow from '../../Grid/src/main'
import NRow from '../../Grid/src/Row'
import NFormItem from './FormItem'
export default {

10
packages/common/Grid/index.js
View File

@ -1,10 +1,12 @@
/* istanbul ignore file */
import Grid from './src/main.vue'
import Row from './src/Row.vue'
import Col from './src/Col.vue'
Grid.install = function (Vue) {
Vue.component(Grid.name, Grid)
Vue.component(Col.name, Col)
const Grid = {
install: function (Vue) {
Vue.component(Row.name, Row)
Vue.component(Col.name, Col)
}
}
export default Grid

6
packages/common/Grid/src/Col.vue
View File

@ -65,9 +65,3 @@ export default {
}
}
</script>
<style>
.n-row {
width: 100%;
}
</style>

6
packages/common/Grid/src/main.vue → packages/common/Grid/src/Row.vue
View File

@ -59,9 +59,3 @@ export default {
}
}
</script>
<style>
.n-row {
width: 100%;
}
</style>

54
styles/Avatar.scss
View File

@ -19,33 +19,35 @@
@include themes-mixin {
@include b(avatar) {
@include avatar-size-mixin('small');
@include avatar-size-mixin('medium');
@include avatar-size-mixin('large');
@include b(icon) {
transition: fill .3s $default-cubic-bezier;
fill: white;
vertical-align: bottom;
}
color: white;
transition: background-color .3s $default-cubic-bezier, color .3s $default-cubic-bezier;
background-color: $--overlay-5;
font-size: 14px;
display: inline-block;
position: relative;
border-radius: 6px;
overflow: hidden;
text-align: center;
img {
width: 100%;
height: 100%;
}
@include e(text) {
white-space: nowrap;
@include once {
@include avatar-size-mixin('small');
@include avatar-size-mixin('medium');
@include avatar-size-mixin('large');
@include b(icon) {
transition: fill .3s $default-cubic-bezier;
fill: white;
vertical-align: bottom;
}
color: white;
transition: background-color .3s $default-cubic-bezier, color .3s $default-cubic-bezier;
font-size: 14px;
display: inline-block;
position: absolute;
left: 50%;
top: 50%;
position: relative;
border-radius: 6px;
overflow: hidden;
text-align: center;
img {
width: 100%;
height: 100%;
}
@include e(text) {
white-space: nowrap;
display: inline-block;
position: absolute;
left: 50%;
top: 50%;
}
}
background-color: $--avatar-background-color;
}
}

1
styles/Grid.scss
View File

@ -1,5 +1,4 @@
@import './mixins/mixins.scss';
@import './themes/vars.scss';
@include b(row) {
@include m(flex) {

164
styles/Layout.scss
View File

@ -2,102 +2,122 @@
@include themes-mixin {
@include b(layout) {
box-sizing: border-box;
position: relative;
display: flex;
flex-wrap: nowrap;
transition: margin-left .3s $default-cubic-bezier;
flex-direction: column;
overflow: auto;
@include m(has-sider) {
flex-direction: row;
& > {
@include b(layout) {
flex: 1;
@include once {
box-sizing: border-box;
position: relative;
display: flex;
flex-wrap: nowrap;
transition: margin-left .3s $default-cubic-bezier;
flex-direction: column;
overflow: auto;
@include m(has-sider) {
flex-direction: row;
& > {
@include b(layout) {
flex: 1;
}
}
}
}
@include m(absolute-positioned) {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
@include m(absolute-positioned) {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
}
}
@include b(layout-header) {
box-sizing: border-box;
width: 100%;
background-color: $--n-card-color;
@include m(absolute-positioned) {
position: absolute;
left: 0;
right: 0;
top: 0;
@include once {
transition: background-color .3s $default-cubic-bezier, border-color .3s $default-cubic-bezier;
box-sizing: border-box;
width: 100%;
@include m(absolute-positioned) {
position: absolute;
left: 0;
right: 0;
top: 0;
}
}
background-color: $--layout-header-background-color;
@include m(bordered) {
border-bottom: solid 1px $--n-divider-color;
border-bottom: solid 1px $--layout-header-border-color;
}
}
@include b(layout-content) {
box-sizing: border-box;
position: relative;
@include once {
box-sizing: border-box;
position: relative;
}
transition: margin-left .3s $default-cubic-bezier;
}
@include b(layout-footer) {
box-sizing: border-box;
@include m(bordered) {
border-top: solid 1px $--n-divider-color;
@include once {
transition: border-color .3s $default-cubic-bezier;
box-sizing: border-box;
@include m(absolute-positioned) {
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
}
@include m(absolute-positioned) {
position: absolute;
left: 0;
right: 0;
bottom: 0;
@include m(bordered) {
border-top: solid 1px $--layout-footer-border-color;
}
}
@include b(layout-sider) {
box-sizing: border-box;
position: relative;
background-color: $--n-card-color;
transition: min-width .3s $default-cubic-bezier, max-width .3s $default-cubic-bezier, transform .3s $default-cubic-bezier;
@include once {
box-sizing: border-box;
position: relative;
transition: min-width .3s $default-cubic-bezier, max-width .3s $default-cubic-bezier, transform .3s $default-cubic-bezier, background-color .3s $default-cubic-bezier, border-color .3s $default-cubic-bezier;
}
background-color: $--layout-sider-background-color;
@include e(toggle-button) {
z-index: 1;
transition: transform .3s $default-cubic-bezier;
cursor: pointer;
width: 36px;
height: 36px;
path {
transition: fill .3s $default-cubic-bezier;
fill: $service-layout-toggle-button-color;
@include once {
z-index: 1;
transition: transform .3s $default-cubic-bezier;
cursor: pointer;
width: 36px;
height: 36px;
position: absolute;
top: 50%;
right: 0;
transform: translateX(50%) translateY(-50%);
}
path {
@include once {
transition: fill .3s $default-cubic-bezier;
}
fill: $--layout-sider-toggle-button-fill;
}
position: absolute;
top: 50%;
right: 0;
transform: translateX(50%) translateY(-50%);
}
@include e(content) {
opacity: 0;
transition: opacity .3s $default-cubic-bezier,;
}
@include m(show-content) {
@include once {
@include e(content) {
opacity: 1;
opacity: 0;
transition: opacity .3s $default-cubic-bezier;
}
}
@include once {
@include m(show-content) {
@include e(content) {
opacity: 1;
}
}
@include m(collapsed) {
@include e(toggle-button) {
transform: translateX(50%) translateY(-50%) rotate(180deg);
}
}
@include m(absolute-positioned) {
position: absolute;
left: 0;
top: 0;
bottom: 0;
}
}
@include m(bordered) {
border-right: solid 1px $--n-divider-color;
}
@include m(collapsed) {
@include e(toggle-button) {
transform: translateX(50%) translateY(-50%) rotate(180deg);
}
}
@include m(absolute-positioned) {
position: absolute;
left: 0;
top: 0;
bottom: 0;
border-right: solid 1px $--layout-sider-border-color;
}
}
}

3
styles/themes/dark/components/Avatar.scss Normal file
View File

@ -0,0 +1,3 @@
@mixin setup-dark-avatar {
$--avatar-background-color: $--overlay-5 !global;
}

7
styles/themes/dark/components/Layout.scss
View File

@ -1,3 +1,8 @@
@mixin setup-dark-layout {
$--layout-header-background-color: $--n-card-color !global;
$--layout-header-border-color: $--n-divider-color !global;
$--layout-footer-border-color: $--n-divider-color !global;
$--layout-sider-border-color: $--n-divider-color !global;
$--layout-sider-background-color: $--n-card-color !global;
$--layout-sider-toggle-button-fill: rgba(255, 255, 255, .3)!global;
}

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

@ -52,6 +52,7 @@
@import "components/Card.scss";
@import "components/AutoComplete.scss";
@import "components/Affix.scss";
@import "components/Avatar.scss";
@mixin setup-dark-theme() {
@include setup-dark-colors();
@ -131,4 +132,5 @@
@include setup-dark-card;
@include setup-dark-auto-complete;
@include setup-dark-affix;
@include setup-dark-avatar;
}

3
styles/themes/light/components/Avatar.scss Normal file
View File

@ -0,0 +1,3 @@
@mixin setup-light-avatar {
$--avatar-background-color: $--overlay-5 !global;
}

7
styles/themes/light/components/Layout.scss
View File

@ -1,3 +1,8 @@
@mixin setup-light-layout {
$--layout-header-background-color: $--n-card-color !global;
$--layout-header-border-color: $--n-divider-color !global;
$--layout-footer-border-color: $--n-divider-color !global;
$--layout-sider-border-color: $--n-divider-color !global;
$--layout-sider-background-color: $--n-card-color !global;
$--layout-sider-toggle-button-fill: rgba(0, 0, 0, .15) !global;
}

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

@ -52,6 +52,7 @@
@import "components/Card.scss";
@import "components/AutoComplete.scss";
@import "components/Affix.scss";
@import "components/Avatar.scss";
@mixin setup-light-theme() {
@include setup-light-colors();
@ -130,4 +131,5 @@
@include setup-light-card;
@include setup-light-auto-complete;
@include setup-light-affix;
@include setup-light-avatar;
}