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

feat(badge): better rippling color in dark theme

Browse Source
This commit is contained in:
07akioni 2019-10-09 18:11:54 +08:00
parent 85c9ce7ea2
commit 697dd7b773
11 changed files with 112 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
demo/documentation/components/badge/enUS/basic.md
View File

@ -1,10 +1,10 @@
# Basic
```html
<n-badge :value="value" :max="15">
<n-icon type="ios-alarm" :size="24" />
<div class="block" />
</n-badge>
<n-badge :value="value" dot>
<n-icon type="ios-alarm" :size="24" />
<div class="block" />
</n-badge>
<n-button-group>
<n-button icon="md-add" @click="value += 1" />
@ -24,4 +24,14 @@ export default {
.n-badge {
margin: 0 32px 8px 0;
}
.block {
width: 32px;
height: 32px;
background-color: #dddddd;
border-radius: 4px;
transition: background-color .3s cubic-bezier(.4, 0, .2, 1);
}
.n-dark-theme .block {
background-color: rgba(255, 255, 255, .15);
}
```

14
demo/documentation/components/badge/enUS/customContent.md
View File

@ -1,14 +1,24 @@
# Custom content
```html
<n-badge value="new">
<n-icon type="ios-alarm" :size="24" />
<div class="block" />
</n-badge>
<n-badge value="hot">
<n-icon type="ios-alarm" :size="24" />
<div class="block" />
</n-badge>
```
```css
.n-badge {
margin: 0 32px 8px 0;
}
.block {
width: 32px;
height: 32px;
background-color: #dddddd;
border-radius: 4px;
transition: background-color .3s cubic-bezier(.4, 0, .2, 1);
}
.n-dark-theme .block {
background-color: rgba(255, 255, 255, .15);
}
```

14
demo/documentation/components/badge/enUS/manual.md
View File

@ -2,10 +2,10 @@
```html
<div class="demo">
<n-badge :value="value" :max="15" :show="show">
<n-icon type="ios-alarm" :size="24" />
<div class="block" />
</n-badge>
<n-badge :value="value" dot :show="show">
<n-icon type="ios-alarm" :size="24" />
<div class="block" />
</n-badge>
<n-button-group>
<n-button icon="md-add" @click="value += 1" />
@ -35,4 +35,14 @@ export default {
.n-button-group {
margin: 0 12px 0 0;
}
.block {
width: 32px;
height: 32px;
background-color: #dddddd;
border-radius: 4px;
transition: background-color .3s cubic-bezier(.4, 0, .2, 1);
}
.n-dark-theme .block {
background-color: rgba(255, 255, 255, .15);
}
```

18
demo/documentation/components/badge/enUS/overflow.md
View File

@ -2,16 +2,16 @@
Set `max` prop to handle overflow situation.
```html
<n-badge :value="value" show-zero>
<n-icon type="ios-alarm" :size="24" />
<div class="block" />
</n-badge>
<n-badge :value="value" :max="99">
<n-icon type="ios-alarm" :size="24" />
<div class="block" />
</n-badge>
<n-badge :value="value" show-zero :max="100">
<n-icon type="ios-alarm" :size="24" />
<div class="block" />
</n-badge>
<n-badge :value="value" show-zero :max="10">
<n-icon type="ios-alarm" :size="24" />
<div class="block" />
</n-badge>
<n-button-group>
<n-button icon="md-add" @click="value += 1" />
@ -31,4 +31,14 @@ export default {
.n-badge {
margin: 0 32px 8px 0;
}
.block {
width: 32px;
height: 32px;
background-color: #dddddd;
border-radius: 4px;
transition: background-color .3s cubic-bezier(.4, 0, .2, 1);
}
.n-dark-theme .block {
background-color: rgba(255, 255, 255, .15);
}
```

14
demo/documentation/components/badge/enUS/processing.md
View File

@ -2,10 +2,10 @@
Set `processing` prop to indicate it is processing.
```html
<n-badge dot processing>
<n-icon type="ios-alarm" :size="24"/>
<div class="block" />
</n-badge>
<n-badge dot type="info" processing>
<n-icon type="ios-alarm" :size="24"/>
<div class="block" />
</n-badge>
```
```js
@ -21,4 +21,14 @@ export default {
.n-badge {
margin: 0 32px 8px 0;
}
.block {
width: 32px;
height: 32px;
background-color: #dddddd;
border-radius: 4px;
transition: background-color .3s cubic-bezier(.4, 0, .2, 1);
}
.n-dark-theme .block {
background-color: rgba(255, 255, 255, .15);
}
```

14
demo/documentation/components/badge/enUS/showZero.md
View File

@ -2,10 +2,10 @@
Set `show-zero` prop to display zero.
```html
<n-badge :value="value">
<n-icon type="ios-alarm" :size="24" />
<div class="block" />
</n-badge>
<n-badge :value="value" show-zero>
<n-icon type="ios-alarm" :size="24" />
<div class="block" />
</n-badge>
<n-button-group>
<n-button icon="md-add" @click="value += 1" />
@ -25,4 +25,14 @@ export default {
.n-badge {
margin: 0 32px 8px 0;
}
.block {
width: 32px;
height: 32px;
background-color: #dddddd;
border-radius: 4px;
transition: background-color .3s cubic-bezier(.4, 0, .2, 1);
}
.n-dark-theme .block {
background-color: rgba(255, 255, 255, .15);
}
```

20
demo/documentation/components/badge/enUS/type.md
View File

@ -2,19 +2,19 @@
Badge has `default`, `error`, `info`, `success`, `warning` types.
```html
<n-badge dot>
<n-icon type="ios-alarm" :size="24" />
<div class="block" />
</n-badge>
<n-badge dot type="error">
<n-icon type="ios-alarm" :size="24" />
<div class="block" />
</n-badge>
<n-badge dot type="info">
<n-icon type="ios-alarm" :size="24" />
<div class="block" />
</n-badge>
<n-badge dot type="success">
<n-icon type="ios-alarm" :size="24" />
<div class="block" />
</n-badge>
<n-badge dot type="warning">
<n-icon type="ios-alarm" :size="24" />
<div class="block" />
</n-badge>
```
```js
@ -30,4 +30,14 @@ export default {
.n-badge {
margin: 0 32px 8px 0;
}
.block {
width: 32px;
height: 32px;
background-color: #dddddd;
border-radius: 4px;
transition: background-color .3s cubic-bezier(.4, 0, .2, 1);
}
.n-dark-theme .block {
background-color: rgba(255, 255, 255, .15);
}
```

4
demo/styles/ComponentDemo.scss
View File

@ -3,9 +3,13 @@
@include themes-mixin {
@include b(code-box) {
color: $--n-secondary-text-color;
background-color: $--n-card-color;
border: 1px solid $--n-divider-color;
background-clip: padding-box;
@include e(title) {
color: $--n-text-color;
}
@include e(code) {
border-top: 1px solid $--n-divider-color;
code {

7
styles/Badge.scss
View File

@ -67,15 +67,15 @@
@mixin badge-ripple-mixin($type) {
@keyframes #{$theme}-#{$type}-badge-ripple--spread {
from {
box-shadow: 0 0 0 0px map-get($map: $--badge-background-color, $key: $type);
box-shadow: 0 0 0 0px map-get($map: $--badge-rippling-color, $key: $type);
}
to {
box-shadow: 0 0 0 4px map-get($map: $--badge-background-color, $key: $type);
box-shadow: 0 0 0 4px map-get($map: $--badge-rippling-color, $key: $type);
}
}
@keyframes #{$theme}-#{$type}-badge-ripple--opacity {
from {
opacity: .4;
opacity: $--badge-rippling-start-opacity;
}
to {
opacity: 0;
@ -119,7 +119,6 @@
@include fade-in-scale-up-transition(badge, left bottom);
transition: background-color .3s $default-cubic-bezier, color .3s $default-cubic-bezier;
color: white;
user-select: none;
position: absolute;
height: 18px;
line-height: 18px;

8
styles/themes/dark/components/Badge.scss
View File

@ -6,4 +6,12 @@
"error": $--error-hs,
"warning": $--warning-hs
) !global;
$--badge-rippling-color: (
"default": mix($--error-hs, white, 75%),
"info": mix($--info-hs, white, 75%),
"success": mix($--success-hs, white, 75%),
"error": mix($--error-hs, white, 75%),
"warning": mix($--warning-hs, white, 75%)
) !global;
$--badge-rippling-start-opacity: .6 !global;
}

8
styles/themes/light/components/Badge.scss
View File

@ -6,4 +6,12 @@
"warning": $warning-6,
"error": $error-6
) !global;
$--badge-rippling-color: (
"default": $error-6,
"info": $info-6,
"success": $success-6,
"warning": $warning-6,
"error": $error-6
) !global;
$--badge-rippling-start-opacity: .4 !global;
}