mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2024-12-15 04:42:23 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(checkbox): use svg rather than css

Browse Source
This commit is contained in:
07akioni 2019-10-10 00:54:56 +08:00
parent d61e074b3e
commit 296d9a0d47
4 changed files with 70 additions and 152 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
packages/common/Checkbox/src/CheckMark.vue Normal file
View File

@ -0,0 +1,9 @@
<template>
<svg
viewBox="0 0 64 64"
>
<path
d="M50.42,16.76L22.34,39.45l-8.1-11.46c-1.12-1.58-3.3-1.96-4.88-0.84c-1.58,1.12-1.95,3.3-0.84,4.88l10.26,14.51 c0.56,0.79,1.42,1.31,2.38,1.45c0.16,0.02,0.32,0.03,0.48,0.03c0.8,0,1.57-0.27,2.2-0.78l30.99-25.03c1.5-1.21,1.74-3.42,0.52-4.92 C54.13,15.78,51.93,15.55,50.42,16.76z"
/>
</svg>
</template>

9
packages/common/Checkbox/src/LineMark.vue Normal file
View File

@ -0,0 +1,9 @@
<template>
<svg
viewBox="0 0 100 100"
>
<path
d="M80.2,55.5H21.4c-2.8,0-5.1-2.5-5.1-5.5l0,0c0-3,2.3-5.5,5.1-5.5h58.7c2.8,0,5.1,2.5,5.1,5.5l0,0C85.2,53.1,82.9,55.5,80.2,55.5z"
/>
</svg>
</template>

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

@ -5,9 +5,12 @@
:class="{'n-checkbox--checked': value, 'n-checkbox--disabled': disabled, 'n-checkbox--indeterminate': indeterminate,[`n-${synthesizedTheme}-theme`]: synthesizedTheme, }"
>
<div
class="n-checkbox__checkbox"
class="n-checkbox-box"
@click="handleClick"
/>
>
<check-mark class="n-checkbox-box__check-mark" />
<line-mark class="n-checkbox-box__line-mark" />
</div>
<div
v-if="$slots.default"
class="n-checkbox__label"
@ -21,9 +24,15 @@
<script>
import withapp from '../../../mixins/withapp'
import themeable from '../../../mixins/themeable'
import CheckMark from './CheckMark'
import LineMark from './LineMark'
export default {
name: 'NCheckbox',
components: {
CheckMark,
LineMark
},
mixins: [
withapp,
themeable

191
styles/Checkbox.scss
View File

@ -21,7 +21,7 @@
// color: #fff;
margin-left: 8px;
}
.n-checkbox__checkbox {
@include b(checkbox-box) {
cursor: pointer;
height: 14px;
width: 14px;
@ -35,14 +35,13 @@
// &: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;
@include e(line-mark) {
position: absolute;
top: 6px;
top: 1px;
left: 1px;
right: 1px;
bottom: 1px;
width: calc(100% - 2px);
opacity: 0;
transform: scale(0.5);
transform-origin: center;
@ -50,19 +49,17 @@
opacity 0.3s $default-cubic-bezier,
border-color 0.3s $default-cubic-bezier;
}
&::after {
box-sizing: content-box;
@include e(check-mark) {
content: "";
// border: 1.5px solid #5C647B;
border-left: 0;
border-top: 0;
height: 8px;
left: 5px;
position: absolute;
top: 1px;
left: 1px;
right: 1px;
bottom: 1px;
width: calc(100% - 2px);
opacity: 0;
transform: rotate(45deg) scale(0.5);
width: 3px;
transform: scale(0.5);
transform-origin: center;
transition: transform 0.3s $default-cubic-bezier,
opacity 0.3s $default-cubic-bezier,
@ -70,41 +67,32 @@
}
}
&.n-checkbox--checked {
.n-checkbox__checkbox {
@include b(checkbox-box) {
// background-color: $checkbox-background--active;
// box-shadow: inset 0 0 0 1px $checkbox-border-color--active;
&::after {
@include e(check-mark) {
opacity: 1;
transform: rotate(45deg) scale(1);
transform: scale(1);
}
}
}
&.n-checkbox--indeterminate {
.n-checkbox__checkbox {
@include b(checkbox-box) {
// background-color: $checkbox-background--active;
// box-shadow: inset 0 0 0 1px $checkbox-border-color--active;
&::after {
@include e(check-mark) {
opacity: 0;
transform: scale(.5);
}
&::before {
@include e(line-mark) {
opacity: 1;
transform: scale(1);
}
}
}
&.n-checkbox--disabled {
.n-checkbox__checkbox {
@include b(checkbox-box) {
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);
// }
}
}
}
@ -113,24 +101,26 @@
.n-checkbox__label {
color: $--checkbox-font-color;
}
.n-checkbox__checkbox {
@include b(checkbox-box) {
box-shadow: inset 0 0 0 1px $--checkbox-border-color;
&:hover {
box-shadow: inset 0 0 0 1px $--checkbox-border-color--active;
}
&::before {
border-bottom: 2px solid $--checkbox-indeterminate-color;
@include e(line-mark) {
path {
fill: $--checkbox-indeterminate-color;
}
}
&::after {
border: 1.5px solid $--checkbox-indeterminate-color;
border-left: 0;
border-top: 0;
@include e(check-mark) {
path {
fill: $--checkbox-indeterminate-color;
}
}
}
&.n-checkbox--checked,
&.n-checkbox--indeterminate {
.n-checkbox__checkbox {
@include b(checkbox-box) {
background-color: $--checkbox-border-color--active;
box-shadow: inset 0 0 0 1px $--checkbox-border-color--active;
border-left: 0;
@ -139,119 +129,20 @@
}
&.n-checkbox--disabled {
.n-checkbox__checkbox {
@include b(checkbox-box) {
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;
@include e(check-mark) {
path {
fill: $--checkbox-disabled;
}
}
&::before {
border-bottom: 2px solid $--checkbox-disabled;
@include e(line-mark) {
path {
fill: $--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);
// }
// }
// }
// }
}