mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-02-17 13:20:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(checkbox): light ui

Browse Source
This commit is contained in:
JiwenBai 2019-09-29 16:02:28 +08:00
parent f82d0b6bef
commit c1ec14218b
6 changed files with 272 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/common/Checkbox/src/main.vue
View File

@ -1,7 +1,8 @@
<template>
<div
class="n-checkbox"
:class="{'n-checkbox--checked': value, 'n-checkbox--disabled': disabled, 'n-checkbox--indeterminate': indeterminate }"
:class="{'n-checkbox--checked': value, 'n-checkbox--disabled': disabled, 'n-checkbox--indeterminate': indeterminate,[`n-${synthesizedTheme}-theme`]: synthesizedTheme, }"
>
<div
class="n-checkbox__checkbox"
@ -18,8 +19,15 @@
</template>
<script>
import withapp from '../../../mixins/withapp'
import themeable from '../../../mixins/themeable'
export default {
name: 'NCheckbox',
mixins: [
withapp,
themeable
],
props: {
label: {
type: [Number, Boolean, String],

329
styles/Checkbox.scss
View File

@ -1,104 +1,257 @@
@import './mixins/mixins.scss';
@import './themes/vars.scss';
@import "./mixins/mixins.scss";
@import "./themes/vars.scss";
@include b(checkbox-group) {
.n-checkbox {
margin-right: 18px;
}
}
@include b(checkbox) {
& {
display: inline-flex;
align-items: center;
justify-content: center;
}
.n-checkbox__label {
user-select: none;
cursor: pointer;
font-size: 13px;
color: #fff;
margin-left: 8px;
}
.n-checkbox__checkbox {
cursor: pointer;
height: 14px;
width: 14px;
box-sizing: border-box;
box-shadow: inset 0 0 0 1px $checkbox-border-color;
background-color: transparent;
border-radius: 4px;
position: relative;
transition: box-shadow .3s $default-cubic-bezier, background-color .3s $default-cubic-bezier;
&:hover {
box-shadow: inset 0 0 0 1px $checkbox-border-color--active;
@include themes-mixin {
@include once {
@include b(checkbox-group) {
.n-checkbox {
margin-right: 18px;
}
}
&::before {
box-sizing: content-box;
content: "";
border-bottom: 2px solid #5C647B;
width: 8px;
left: 3px;
position: absolute;
top: 6px;
opacity: 0;
transform: scale(.5);
transform-origin: center;
transition: transform .3s $default-cubic-bezier, opacity .3s $default-cubic-bezier, border-color .3s $default-cubic-bezier;
}
&::after {
box-sizing: content-box;
content: "";
border: 1.5px solid #5C647B;
border-left: 0;
border-top: 0;
height: 8px;
left: 5px;
position: absolute;
top: 1px;
opacity: 0;
transform: rotate(45deg) scale(.5);
width: 3px;
transform-origin: center;
transition: transform .3s $default-cubic-bezier, opacity .3s $default-cubic-bezier, border-color .3s $default-cubic-bezier;
}
}
&.n-checkbox--checked {
.n-checkbox__checkbox {
background-color: $checkbox-background--active;
box-shadow: inset 0 0 0 1px $checkbox-border-color--active;
&::after {
opacity: 1;
transform: rotate(45deg) scale(1);
@include b(checkbox) {
& {
display: inline-flex;
align-items: center;
justify-content: center;
}
.n-checkbox__label {
user-select: none;
cursor: pointer;
font-size: 13px;
// color: #fff;
margin-left: 8px;
}
.n-checkbox__checkbox {
cursor: pointer;
height: 14px;
width: 14px;
box-sizing: border-box;
// box-shadow: inset 0 0 0 1px $checkbox-border-color;
background-color: transparent;
border-radius: 4px;
position: relative;
transition: box-shadow 0.3s $default-cubic-bezier,
background-color 0.3s $default-cubic-bezier;
// &:hover {
// box-shadow: inset 0 0 0 1px $checkbox-border-color--active;
// }
&::before {
box-sizing: content-box;
content: "";
// border-bottom: 2px solid #5c637a;
width: 8px;
left: 3px;
position: absolute;
top: 6px;
opacity: 0;
transform: scale(0.5);
transform-origin: center;
transition: transform 0.3s $default-cubic-bezier,
opacity 0.3s $default-cubic-bezier,
border-color 0.3s $default-cubic-bezier;
}
&::after {
box-sizing: content-box;
content: "";
// border: 1.5px solid #5C647B;
border-left: 0;
border-top: 0;
height: 8px;
left: 5px;
position: absolute;
top: 1px;
opacity: 0;
transform: rotate(45deg) scale(0.5);
width: 3px;
transform-origin: center;
transition: transform 0.3s $default-cubic-bezier,
opacity 0.3s $default-cubic-bezier,
border-color 0.3s $default-cubic-bezier;
}
}
&.n-checkbox--checked {
.n-checkbox__checkbox {
// background-color: $checkbox-background--active;
// box-shadow: inset 0 0 0 1px $checkbox-border-color--active;
&::after {
opacity: 1;
transform: rotate(45deg) scale(1);
}
}
}
&.n-checkbox--indeterminate {
.n-checkbox__checkbox {
// background-color: $checkbox-background--active;
// box-shadow: inset 0 0 0 1px $checkbox-border-color--active;
&::after {
opacity: 0;
}
&::before {
opacity: 1;
transform: scale(1);
}
}
}
&.n-checkbox--disabled {
.n-checkbox__checkbox {
cursor: not-allowed;
// background-color: rgba(255,255,255,.16);
// box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
&::after {
// border: 1.5px solid rgba(255,255,255,.16);
border-left: 0;
border-top: 0;
}
// &::before {
// border-bottom: 1.5px solid rgba(255,255,255,.16);
// }
}
}
}
}
&.n-checkbox--indeterminate {
@include b(checkbox) {
.n-checkbox__label {
color: $--checkbox-font-color;
}
.n-checkbox__checkbox {
background-color: $checkbox-background--active;
box-shadow: inset 0 0 0 1px $checkbox-border-color--active;
&::after {
opacity: 0;
box-shadow: inset 0 0 0 1px $--checkbox-border-color;
&:hover {
box-shadow: inset 0 0 0 1px $--checkbox-border-color--active;
}
&::before {
opacity: 1;
transform: scale(1);
border-bottom: 2px solid $--checkbox-indeterminate-color;
}
}
}
&.n-checkbox--disabled {
.n-checkbox__checkbox {
cursor: not-allowed;
background-color: rgba(255,255,255,.16);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
&::after {
border: 1.5px solid rgba(255,255,255,.16);
border: 1.5px solid $--checkbox-indeterminate-color;
border-left: 0;
border-top: 0;
}
&::before {
border-bottom: 1.5px solid rgba(255,255,255,.16);
}
&.n-checkbox--checked,
&.n-checkbox--indeterminate {
.n-checkbox__checkbox {
background-color: $--checkbox-border-color--active;
box-shadow: inset 0 0 0 1px $--checkbox-border-color--active;
border-left: 0;
border-top: 0;
}
}
&.n-checkbox--disabled {
.n-checkbox__checkbox {
background-color: $--checkbox-disabled-bg-color;
box-shadow: inset 0 0 0 1px $--checkbox-disabled;
&::after {
border: 1.5px solid $--checkbox-disabled;
border-left: 0;
border-top: 0;
}
&::before {
border-bottom: 2px solid $--checkbox-disabled;
}
}
}
}
}
}
// @include b(checkbox-group) {
// .n-checkbox {
// margin-right: 18px;
// }
// }
// @include b(checkbox) {
// & {
// display: inline-flex;
// align-items: center;
// justify-content: center;
// }
// .n-checkbox__label {
// user-select: none;
// cursor: pointer;
// font-size: 13px;
// color: #fff;
// margin-left: 8px;
// }
// .n-checkbox__checkbox {
// cursor: pointer;
// height: 14px;
// width: 14px;
// box-sizing: border-box;
// box-shadow: inset 0 0 0 1px $checkbox-border-color;
// background-color: transparent;
// border-radius: 4px;
// position: relative;
// transition: box-shadow .3s $default-cubic-bezier, background-color .3s $default-cubic-bezier;
// &:hover {
// box-shadow: inset 0 0 0 1px $checkbox-border-color--active;
// }
// &::before {
// box-sizing: content-box;
// content: "";
// border-bottom: 2px solid #5C647B;
// width: 8px;
// left: 3px;
// position: absolute;
// top: 6px;
// opacity: 0;
// transform: scale(.5);
// transform-origin: center;
// transition: transform .3s $default-cubic-bezier, opacity .3s $default-cubic-bezier, border-color .3s $default-cubic-bezier;
// }
// &::after {
// box-sizing: content-box;
// content: "";
// border: 1.5px solid #5C647B;
// border-left: 0;
// border-top: 0;
// height: 8px;
// left: 5px;
// position: absolute;
// top: 1px;
// opacity: 0;
// transform: rotate(45deg) scale(.5);
// width: 3px;
// transform-origin: center;
// transition: transform .3s $default-cubic-bezier, opacity .3s $default-cubic-bezier, border-color .3s $default-cubic-bezier;
// }
// }
// &.n-checkbox--checked {
// .n-checkbox__checkbox {
// background-color: $checkbox-background--active;
// box-shadow: inset 0 0 0 1px $checkbox-border-color--active;
// &::after {
// opacity: 1;
// transform: rotate(45deg) scale(1);
// }
// }
// }
// &.n-checkbox--indeterminate {
// .n-checkbox__checkbox {
// background-color: $checkbox-background--active;
// box-shadow: inset 0 0 0 1px $checkbox-border-color--active;
// &::after {
// opacity: 0;
// }
// &::before {
// opacity: 1;
// transform: scale(1);
// }
// }
// }
// &.n-checkbox--disabled {
// .n-checkbox__checkbox {
// cursor: not-allowed;
// background-color: rgba(255,255,255,.16);
// box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
// &::after {
// border: 1.5px solid rgba(255,255,255,.16);
// border-left: 0;
// border-top: 0;
// }
// &::before {
// border-bottom: 1.5px solid rgba(255,255,255,.16);
// }
// }
// }
// }

9
styles/themes/dark/components/CheckBox.scss Normal file
View File

@ -0,0 +1,9 @@
@mixin setup-dark-checkbox {
$border-color: rgba(255, 255, 255, 0.4);
$--checkbox-font-color: $neutral-3 !global;
$--checkbox-border-color: $border-color !global;
$--checkbox-border-color--active: $primary-6 !global;
$--checkbox-indeterminate-color: $neutral-10 !global;
$--checkbox-disabled: $border-color !global;
$--checkbox-disabled-bg-color: rgba(255, 255, 255, 0.16) !global;
}

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

@ -13,6 +13,7 @@
@import "components/Popover.scss";
@import "components/Tooltip.scss";
@import "components/Confirm.scss";
@import "components/CheckBox.scss";
@mixin setup-dark-theme () {
@include setup-dark-colors();
@ -43,4 +44,5 @@
@include setup-dark-popover;
@include setup-dark-tooltip;
@include setup-dark-confirm;
@include setup-dark-checkbox;
}

8
styles/themes/light/components/CheckBox.scss Normal file
View File

@ -0,0 +1,8 @@
@mixin setup-light-checkbox {
$--checkbox-font-color: $neutral-3 !global;
$--checkbox-border-color: $neutral-5 !global;
$--checkbox-border-color--active: $primary-6 !global;
$--checkbox-indeterminate-color: $neutral-10 !global;
$--checkbox-disabled: $neutral-5 !global;
$--checkbox-disabled-bg-color: $neutral-8 !global;
}

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

@ -14,6 +14,8 @@
@import "components/Popover.scss";
@import "components/Tooltip.scss";
@import "components/Confirm.scss";
@import "components/CheckBox.scss";
@mixin setup-light-theme () {
@include setup-light-colors();
@ -46,4 +48,5 @@
@include setup-light-popover;
@include setup-light-tooltip;
@include setup-light-confirm;
@include setup-light-checkbox;
}