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

style: color changes and some chore...

Browse Source
This commit is contained in:
07akioni 2019-09-20 17:39:18 +08:00
parent 99f7835f64
commit ac388884da
6 changed files with 79 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.js
View File

@ -58,6 +58,7 @@ import Time from './packages/common/Time'
import LoadingBar from './packages/common/LoadingBar'
import Slider from './packages/common/Slider'
import Tree from './packages/common/Tree'
import Grid from './packages/common/Grid'
function install (Vue) {
Card.install(Vue)
@ -120,6 +121,7 @@ function install (Vue) {
Time.install(Vue)
Slider.install(Vue)
Tree.install(Vue)
Grid.install(Vue)
}
export default {

1
styles/index.scss
View File

@ -48,6 +48,7 @@
@import './LoadingBar.scss';
@import './Slider.scss';
@import './Tree.scss';
@import './Grid.scss';
@import "./NimbusServiceLayout.scss";
@import "./Popover.scss";

12
styles/themes/default.scss
View File

@ -3,7 +3,10 @@
@mixin setup-default-theme () {
@include setup-dark-colors();
$n-color: $neutral-2 !global;
$secondary-color: $neutral-3 !global;
$n-divider-color: $neutral-5 !global;
$n-border-color: $neutral-5 !global;
$n-primary-color: $primary-6 !global;
/**
* service layout
*/
@ -12,6 +15,15 @@
$service-layout-nav-background-color: $neutral-7 !global;
$service-layout-color: $n-color !global;
$service-layout-border-color: $neutral-5 !global;
$service-layout-toggle-button-color: rgba(255, 255, 255, .3)!global;
$service-layout-item-background-image: linear-gradient(47deg,rgba(232,232,235,.4) 0%,rgba(31,38,62,.4) 100%) !global;
/**
* scrollbar
*/
$scrollbar-color: (
"default": rgba(255,255,255,0.2),
"hover": rgba(255,255,255,0.3)
) !global;
/**
* Divider
*/

33
styles/themes/light.scss
View File

@ -3,9 +3,11 @@
@mixin setup-light-theme () {
@include setup-light-colors();
$n-color: $neutral-2 !global;
$n-selected-color: $neutral-7 !global;
$secondary-color: $neutral-3 !global;
$n-divider-color: $neutral-6 !global;
$border-color: $neutral-5 !global;
$n-border-color: $neutral-5 !global;
$n-primary-color: $primary-6 !global;
/**
* service layout
*/
@ -14,10 +16,19 @@
$service-layout-nav-background-color: $neutral-10 !global;
$service-layout-color: $n-color !global ;
$service-layout-border-color: $n-divider-color !global;
$service-layout-toggle-button-color: rgba(0, 0, 0, .15)!global;
$service-layout-item-background-image: linear-gradient(47deg, $neutral-7, $neutral-7) !global;
/**
* scrollbar
*/
$scrollbar-color: (
"default": rgba(0,0,0,0.25),
"hover": rgba(0,0,0,0.40)
) !global;
/*
* Divider
*/
$divider-color: $n-divider-color !global;
$divider-color: $n-divider-color !global;
/**
* button
*/
@ -54,7 +65,7 @@
"large": 20px
) !global;
$button-border-color: (
"default": $border-color,
"default": $n-border-color,
"primary": $primary-6,
"info": $info-6,
"success": $success-6,
@ -100,15 +111,15 @@
$button-ghost-hover-alpha: .1;
$button-ghost-active-alpha: .15;
$button-ghost-focus-alpha: .1;
$button-ghost-weight: percentage(red($border-color) / (255 - red($border-color)) * $button-ghost-alpha);
$button-ghost-hover-weight: percentage(red($border-color) / (255 - red($border-color)) * $button-ghost-hover-alpha);
$button-ghost-active-weight: percentage(red($border-color) / (255 - red($border-color)) * $button-ghost-active-alpha);
$button-ghost-focus-weight: percentage(red($border-color) / (255 - red($border-color)) * $button-ghost-focus-alpha);
$button-ghost-weight: percentage(red($n-border-color) / (255 - red($n-border-color)) * $button-ghost-alpha);
$button-ghost-hover-weight: percentage(red($n-border-color) / (255 - red($n-border-color)) * $button-ghost-hover-alpha);
$button-ghost-active-weight: percentage(red($n-border-color) / (255 - red($n-border-color)) * $button-ghost-active-alpha);
$button-ghost-focus-weight: percentage(red($n-border-color) / (255 - red($n-border-color)) * $button-ghost-focus-alpha);
$button-background-color: (
"default": mix($border-color, white, $button-ghost-weight),
"default-focus": mix($border-color, white, $button-ghost-focus-weight),
"default-hover": mix($border-color, white, $button-ghost-hover-weight),
"default-active": mix($border-color, white, $button-ghost-active-weight),
"default": mix($n-border-color, white, $button-ghost-weight),
"default-focus": mix($n-border-color, white, $button-ghost-focus-weight),
"default-hover": mix($n-border-color, white, $button-ghost-hover-weight),
"default-active": mix($n-border-color, white, $button-ghost-active-weight),
"primary": $primary-6,
"primary-focus": $primary-5,
"primary-hover": $primary-5,

79
styles/themes/lightColors.scss
View File

@ -19,46 +19,47 @@
$neutral-8: rgb(244, 244, 244) !global;
$neutral-9: rgb(250, 250, 250) !global;
$neutral-10: rgb(255, 255, 255) !global;
$primary-1: #e6ffee !global;
$primary-2: #9bf2bb !global;
$primary-3: #6ee69e !global;
$primary-4: #45d985 !global;
$primary-5: #21cc71 !global;
$primary-6: #00c060 !global;
$primary-7: #009952 !global;
$primary-8: #007341 !global;
$primary-9: #004d2e !global;
$primary-10: #002618 !global;
$success-1: #e6ffee !global;
$success-2: #9bf2bb !global;
$success-3: #6ee69e !global;
$success-4: #45d985 !global;
$success-5: #21cc71 !global;
$success-6: #00c060 !global;
$success-7: #009952 !global;
$success-8: #007341 !global;
$success-9: #004d2e !global;
$success-10: #002618 !global;
$primary-1: #d3e0d7 !global;
$primary-2: #a7d4b6 !global;
$primary-3: #7dc798 !global;
$primary-4: #57ba7f !global;
$primary-5: #36ad6a !global;
$primary-6: #18a058 !global;
$primary-7: #0c7a43 !global;
$primary-8: #04542f !global;
$primary-9: #002e1a !global;
$primary-10: #000805 !global;
$success-1: #d3e0d7 !global;
$success-2: #a7d4b6 !global;
$success-3: #7dc798 !global;
$success-4: #57ba7f !global;
$success-5: #36b46a !global;
$success-6: #18a058 !global;
$success-7: #0c7a43 !global;
$success-8: #04542f !global;
$success-9: #002e1a !global;
$success-10: #000805 !global;
$info-1: #edfaff !global;
$info-2: #c4ebff !global;
$info-3: #9cdbff !global;
$info-4: #73c7ff !global;
$info-5: #49affc !global;
$info-6: #2090f0 !global;
$info-7: #106dc9 !global;
$info-8: #054fa3 !global;
$info-9: #00367d !global;
$info-10: #002357 !global;
$warning-1: #fff8f0 !global;
$warning-2: #ffead4 !global;
$warning-3: #ffd4ab !global;
$warning-4: #ffba82 !global;
$warning-5: #ff9e59 !global;
$warning-6: #ff8030 !global;
$warning-7: #d9601e !global;
$warning-8: #b34410 !global;
$warning-9: #8c2c06 !global;
$warning-10: #661c03 !global;
$info-2: #c4e8ff !global;
$info-3: #9cd4ff !global;
$info-4: #73beff !global;
$info-5: #4098fc !global;
$info-6: #2080f0 !global;
$info-7: #1060c9 !global;
$info-8: #0544a3 !global;
$info-9: #002e7d !global;
$info-10: #001d57 !global;
$warning-1: #fffbed !global;
$warning-2: #fff0c4 !global;
$warning-3: #ffe39c !global;
$warning-4: #ffd373 !global;
$warning-5: #fcb040 !global;
$warning-6: #f0a020 !global;
$warning-7: #c97c10 !global;
$warning-8: #a35c05 !global;
$warning-9: #7d4100 !global;
$warning-10: #572a00 !global;
$error-1: #fff0f0 !global;
$error-2: #ffdee0 !global;
$error-3: #f7b0b7 !global;

4
styles/themes/vars.scss
View File

@ -188,8 +188,8 @@ $default-text-gradient-danger: linear-gradient(214deg, rgba(224,32,32,1) 0%, rgb
$default-cubic-bezier: cubic-bezier(.4, 0, .2, 1);
$scrollbar-color: rgba(255,255,255,0.2);
$scrollbar-color--hover: rgba(255,255,255,0.3);
// $scrollbar-color: rgba(255,255,255,0.2);
// $scrollbar-color--hover: rgba(255,255,255,0.3);
@mixin scrollbar {
&::-webkit-scrollbar {