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

refactor: rename lightbar to tracking rect & picker to selection

Browse Source
This commit is contained in:
07akioni 2020-02-14 23:01:06 +08:00
parent 7033bf664e
commit c29bb71a3e
18 changed files with 193 additions and 192 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/Cascader/src/Cascader.vue
View File

@ -15,9 +15,9 @@
@keyup.left="handleKeyUpLeft"
@keyup.right="handleKeyUpRight"
>
<n-base-picker
<n-base-selection
ref="activator"
class="n-cascader-picker"
class="n-cascader-selection"
:size="size"
:theme="syntheticTheme"
:active="active"
@ -84,7 +84,7 @@
</template>
<script>
import NBasePicker from '../../_base/Picker'
import NBaseSelection from '../../_base/Selection'
import withapp from '../../_mixins/withapp'
import themeable from '../../_mixins/themeable'
import clickoutside from '../../_directives/clickoutside'
@ -107,7 +107,7 @@ export default {
components: {
CascaderMenu,
CascaderSelectMenu,
NBasePicker,
NBaseSelection,
NBasePortal
},
provide () {

8
src/Select/src/Select.vue
View File

@ -16,9 +16,9 @@
@keyup.space="handleKeyUpSpace"
@keyup.esc="handleKeyUpEsc"
>
<n-base-picker
<n-base-selection
ref="activator"
class="n-select-picker"
class="n-select-selection"
:active="active"
:pattern="pattern"
:placeholder="localizedPlaceholder"
@ -97,7 +97,7 @@ import {
filterOptions,
valueToOptionMap
} from '../../_utils/component/select'
import NBasePicker from '../../_base/Picker'
import NBaseSelection from '../../_base/Selection'
import withapp from '../../_mixins/withapp'
import themeable from '../../_mixins/themeable'
import asformitem from '../../_mixins/asformitem'
@ -115,7 +115,7 @@ export default {
name: 'NSelect',
components: {
NBaseSelectMenu,
NBasePicker
NBaseSelection
},
directives: {
clickoutside

12
src/Transfer/src/Transfer.vue
View File

@ -45,7 +45,7 @@
key-field="value"
>
<template v-slot:before>
<n-base-light-bar ref="sourceLightBar" :item-size="ITEM_SIZE" :theme="syntheticTheme" />
<n-base-tracking-rect ref="sourceLightBar" :item-size="ITEM_SIZE" :theme="syntheticTheme" />
</template>
<template v-slot="{ item: option, index }">
<n-transfer-source-list-item
@ -63,7 +63,7 @@
</n-scrollbar>
<n-scrollbar v-else>
<div ref="sourceList" class="n-transfer-list-content">
<n-base-light-bar ref="sourceLightBar" :item-size="ITEM_SIZE" :theme="syntheticTheme" />
<n-base-tracking-rect ref="sourceLightBar" :item-size="ITEM_SIZE" :theme="syntheticTheme" />
<n-transfer-source-list-item
v-for="option in filteredSourceOptions"
ref="sourceListItems"
@ -132,7 +132,7 @@
key-field="value"
>
<template v-slot:before>
<n-base-light-bar ref="targetLightBar" :item-size="ITEM_SIZE" :theme="syntheticTheme" />
<n-base-tracking-rect ref="targetLightBar" :item-size="ITEM_SIZE" :theme="syntheticTheme" />
</template>
<template v-slot="{ item: option, index }">
<n-transfer-target-list-item
@ -150,7 +150,7 @@
</n-scrollbar>
<n-scrollbar v-else>
<div ref="targetList" class="n-transfer-list-content">
<n-base-light-bar ref="targetLightBar" :item-size="ITEM_SIZE" :theme="syntheticTheme" />
<n-base-tracking-rect ref="targetLightBar" :item-size="ITEM_SIZE" :theme="syntheticTheme" />
<n-transfer-target-list-item
v-for="(option, index) in filteredTargetOptions"
ref="targetListItems"
@ -183,7 +183,7 @@ import NTransferButton from './TransferButton'
import NInput from '../../Input'
import NIcon from '../../Icon'
import NEmpty from '../../Empty'
import NBaseLightBar from '../../_base/LightBar'
import NBaseTrackingRect from '../../_base/TrackingRect'
import iosSearch from '../../_icons/ios-search'
import locale from '../../_mixins/locale'
import asformitem from '../../_mixins/asformitem'
@ -203,7 +203,7 @@ export default {
NTransferSourceListItem,
NTransferTargetListItem,
NTransferButton,
NBaseLightBar,
NBaseTrackingRect,
NInput,
NIcon,
NEmpty,

7
src/_base/LightBar/index.js
View File

@ -1,7 +0,0 @@
import LightBar from './src/main.vue'
LightBar.install = function (Vue) {
Vue.component(LightBar.name, LightBar)
}
export default LightBar

8
src/_base/Picker/index.js
View File

@ -1,8 +0,0 @@
/* istanbul ignore file */
import BasePicker from './src/main.vue'
BasePicker.install = function (Vue) {
Vue.component(BasePicker.name, BasePicker)
}
export default BasePicker

10
src/_base/SelectMenu/src/SelectMenu.vue
View File

@ -34,7 +34,7 @@
@visible="handleMenuVisible"
>
<template v-slot:before>
<n-base-light-bar ref="lightBar" :item-size="itemSize" :theme="theme" />
<n-base-tracking-rect ref="lightBar" :item-size="itemSize" :theme="theme" />
</template>
<template v-slot="{ item: option }">
<n-select-option
@ -51,7 +51,7 @@
</template>
</recycle-scroller>
<template v-else>
<n-base-light-bar ref="lightBar" :item-size="itemSize" :theme="theme" />
<n-base-tracking-rect ref="lightBar" :item-size="itemSize" :theme="theme" />
<template v-for="option in flattenedOptions">
<n-select-option
v-if="option.type === OPTION_TYPE.OPTION"
@ -94,7 +94,7 @@
import NScrollbar from '../../../Scrollbar'
import NSelectOption from './SelectOption.vue'
import NSelectGroupHeader from './SelectGroupHeader.vue'
import NBaseLightBar from '../../LightBar'
import NBaseTrackingRect from '../../TrackingRect'
import NEmpty from '../../../Empty'
import { RecycleScroller } from 'vue-virtual-scroller'
import debounce from 'lodash-es/debounce'
@ -115,7 +115,7 @@ export default {
},
components: {
NScrollbar,
NBaseLightBar,
NBaseTrackingRect,
NSelectOption,
NEmpty,
NSelectGroupHeader,
@ -334,7 +334,7 @@ export default {
}
},
/**
* light-bar related
* select option background related
*/
updateLightBarTop (el) {
if (this.$refs.lightBar) {

8
src/_base/Selection/index.js Normal file
View File

@ -0,0 +1,8 @@
/* istanbul ignore file */
import BaseSelection from './src/main.vue'
BaseSelection.install = function (Vue) {
Vue.component(BaseSelection.name, BaseSelection)
}
export default BaseSelection

52
src/_base/Picker/src/main.vue → src/_base/Selection/src/main.vue
View File

@ -1,13 +1,13 @@
<template>
<div
class="n-base-picker"
class="n-base-selection"
:class="{
'n-base-picker--active': active,
'n-base-picker--selected': selected || (active && pattern),
'n-base-picker--disabled': disabled,
[`n-base-picker--${size}-size`]: true,
'n-base-picker--multiple': multiple,
'n-base-picker--focus': patternInputFocused,
'n-base-selection--active': active,
'n-base-selection--selected': selected || (active && pattern),
'n-base-selection--disabled': disabled,
[`n-base-selection--${size}-size`]: true,
'n-base-selection--multiple': multiple,
'n-base-selection--focus': patternInputFocused,
[`n-${theme}-theme`]: theme
}"
@click="handleClick"
@ -19,7 +19,7 @@
<!-- multiple -->
<div
ref="focusableEl1"
class="n-base-picker-tags"
class="n-base-selection-tags"
:tabindex="disabled ? false : '0'"
@blur="handleBlur"
>
@ -35,7 +35,7 @@
{{ option.label }}
</n-tag>
<n-base-suffix
class="n-base-picker__mark"
class="n-base-selection__mark"
:loading="loading"
:theme="theme"
:arrow="showArrow"
@ -46,7 +46,7 @@
/>
</div>
<div
class="n-base-picker__placeholder"
class="n-base-selection__placeholder"
>
{{ placeholder }}
</div>
@ -55,7 +55,7 @@
<!-- multiple filterable -->
<div
ref="patternInputWrapper"
class="n-base-picker-tags"
class="n-base-selection-tags"
:tabindex="(disabled || patternInputFocused) ? false : '0'"
>
<n-tag
@ -70,14 +70,14 @@
{{ option.label }}
</n-tag>
<div
class="n-base-picker-input-tag"
class="n-base-selection-input-tag"
>
<input
ref="patternInput"
tabindex="-1"
:disabled="disabled"
:value="pattern"
class="n-base-picker-input-tag__input"
class="n-base-selection-input-tag__input"
@blur="handlePatternInputBlur"
@focus="handlePatternInputFocus"
@keydown.delete="handlePatternKeyDownDelete"
@ -85,12 +85,12 @@
>
<span
ref="patternInputMirror"
class="n-base-picker-input-tag__mirror"
class="n-base-selection-input-tag__mirror"
>{{ pattern ? pattern : '&nbsp;' }}</span>
</div>
<n-base-suffix
ref="suffix"
class="n-base-picker__mark"
class="n-base-selection__mark"
:arrow="showArrow"
:theme="theme"
:disabled="disabled"
@ -101,7 +101,7 @@
/>
</div>
<div
class="n-base-picker__placeholder"
class="n-base-selection__placeholder"
>
{{ placeholder }}
</div>
@ -110,12 +110,12 @@
<!-- single filterable -->
<div
ref="patternInputWrapper"
class="n-base-picker-label"
class="n-base-selection-label"
:tabindex="(!disabled && !patternInputFocused) ? '0' : false"
>
<input
ref="patternInput"
class="n-base-picker-label__input"
class="n-base-selection-label__input"
:value="(patternInputFocused && active) ? pattern : label"
:placeholder="selectedOption ? label : placeholder"
:readonly="!disabled && filterable && active ? false : 'readonly'"
@ -127,7 +127,7 @@
>
<n-base-suffix
ref="suffix"
class="n-base-picker__mark"
class="n-base-selection__mark"
:loading="loading"
:theme="theme"
:arrow="showArrow"
@ -142,25 +142,25 @@
<!-- single -->
<div
ref="focusableEl2"
class="n-base-picker-label"
class="n-base-selection-label"
:tabindex="disabled ? false : '0'"
@blur="handleBlur"
>
<div
v-if="label && label.length"
class="n-base-picker-label__input"
class="n-base-selection-label__input"
>
{{ label }}
</div>
<div
v-else
key="placeholder"
class="n-base-picker-label__input n-base-picker-label__input--placeholder"
class="n-base-selection-label__input n-base-selection-label__input--placeholder"
>
{{ labelPlaceholder }}
</div>
<n-base-suffix
class="n-base-picker__mark"
class="n-base-selection__mark"
:theme="theme"
:arrow="showArrow"
:disabled="disabled"
@ -171,7 +171,7 @@
/>
</div>
</template>
<div class="n-base-picker-border-mask" />
<div class="n-base-selection-border-mask" />
</div>
</template>
@ -180,7 +180,7 @@ import NBaseSuffix from '../../Suffix'
import NTag from '../../../Tag'
export default {
name: 'NBasePicker',
name: 'NBaseSelection',
components: {
NBaseSuffix,
NTag
@ -315,7 +315,7 @@ export default {
}
},
handlePatternInputInput (e) {
// console.log('NBasePicker, handlePatternInput', e)
// console.log('NBaseSelection, handlePatternInput', e)
if (this.multiple) {
this.$nextTick().then(() => {
const textWidth = this.$refs.patternInputMirror.getBoundingClientRect().width

7
src/_base/TrackingRect/index.js Normal file
View File

@ -0,0 +1,7 @@
import TrackingRect from './src/main.vue'
TrackingRect.install = function (Vue) {
Vue.component(TrackingRect.name, TrackingRect)
}
export default TrackingRect

7
src/_base/LightBar/src/main.vue → src/_base/TrackingRect/src/main.vue
View File

@ -1,14 +1,14 @@
<template>
<div
class="n-base-light-bar"
class="n-base-tracking-rect"
:class="{
[`n-${theme}-theme`]: theme
}"
>
<transition name="n-base-light-bar-transition">
<transition name="n-base-tracking-rect-transition">
<div
v-show="show"
class="n-base-light-bar__bar"
class="n-base-tracking-rect__body"
:style="{
top: styleTop,
height: itemSize && itemSize + 'px'
@ -21,6 +21,7 @@
<script>
export default {
name: 'NBaseTrackingRect',
props: {
theme: {
type: String,

196
styles/BaseSelection.scss
View File

@ -1,44 +1,44 @@
@import './mixins/mixins.scss';
@mixin base-picker-size-mixin ($size) {
$base-picker-tag-margin: 3px;
$base-picker-height: map-get($--n-height, $size);
@mixin base-selection-size-mixin ($size) {
$base-selection-tag-margin: 3px;
$base-selection-height: map-get($--n-height, $size);
@include m($size + '-size') {
font-size: map-get($--n-font-size, $size);
@include e(placeholder) {
height: $base-picker-height;
line-height: $base-picker-height;
height: $base-selection-height;
line-height: $base-selection-height;
}
@include b(base-picker-tags) {
min-height: $base-picker-height;
@include b(base-picker-input-tag) {
height: $base-picker-height - 2 * $base-picker-tag-margin;
line-height: $base-picker-height - 2 * $base-picker-tag-margin;
@include b(base-selection-tags) {
min-height: $base-selection-height;
@include b(base-selection-input-tag) {
height: $base-selection-height - 2 * $base-selection-tag-margin;
line-height: $base-selection-height - 2 * $base-selection-tag-margin;
}
}
@include b(base-picker-label) {
height: $base-picker-height;
line-height: $base-picker-height;
@include b(base-selection-label) {
height: $base-selection-height;
line-height: $base-selection-height;
}
}
}
@include themes-mixin {
@include b(base-picker) {
@include b(base-selection) {
@include once {
@include base-picker-size-mixin('small');
@include base-picker-size-mixin('medium');
@include base-picker-size-mixin('large');
@include base-selection-size-mixin('small');
@include base-selection-size-mixin('medium');
@include base-selection-size-mixin('large');
position: relative;
z-index: auto;
box-shadow: none;
border-radius: $--base-picker-border-radius;
border-radius: $--base-selection-border-radius;
width: 100%;
max-width: 100%;
display: inline-block;
vertical-align: bottom;
@include b(base-picker-border-mask) {
border-radius: $--base-picker-border-radius;
@include b(base-selection-border-mask) {
border-radius: $--base-selection-border-radius;
position: absolute;
left: 0;
right: 0;
@ -62,8 +62,8 @@
}
}
}
@include b(base-picker-border-mask) {
border: 1px solid map-get($--base-picker-border-mask-border-color, 'default');
@include b(base-selection-border-mask) {
border: 1px solid map-get($--base-selection-border-mask-border-color, 'default');
}
@include e(placeholder) {
@include once {
@ -74,9 +74,9 @@
opacity: 1;
transition: color .3s $--n-ease-in-out-cubic-bezier;
}
color: map-get($--base-picker-placeholder-color, 'default');
color: map-get($--base-selection-placeholder-color, 'default');
}
@include b(base-picker-tags) {
@include b(base-selection-tags) {
@include once {
cursor: pointer;
outline: none;
@ -84,12 +84,12 @@
position: relative;
z-index: auto;
transition: color .3s $--n-ease-in-out-cubic-bezier, box-shadow .3s $--n-ease-in-out-cubic-bezier, background-color .3s $--n-ease-in-out-cubic-bezier;
border-radius: $--base-picker-border-radius;
border-radius: $--base-selection-border-radius;
}
box-shadow: map-get($--base-picker-box-shadow, 'default');
background-color: map-get($--base-picker-background-color, 'default');
box-shadow: map-get($--base-selection-box-shadow, 'default');
background-color: map-get($--base-selection-background-color, 'default');
}
@include b(base-picker-label) {
@include b(base-selection-label) {
@include once {
display: inline-block;
width: 100%;
@ -100,10 +100,10 @@
box-sizing: border-box;
position: relative;
transition: color .3s $--n-ease-in-out-cubic-bezier, box-shadow .3s $--n-ease-in-out-cubic-bezier, background-color .3s $--n-ease-in-out-cubic-bezier;
border-radius: $--base-picker-border-radius;
border-radius: $--base-selection-border-radius;
}
box-shadow: map-get($--base-picker-box-shadow, 'default');
background-color: map-get($--base-picker-background-color, 'default');
box-shadow: map-get($--base-selection-box-shadow, 'default');
background-color: map-get($--base-selection-background-color, 'default');
@include e(input) {
@include once {
outline: none;
@ -119,17 +119,17 @@
background-color: transparent;
height: 100%;
}
color: $--base-picker-color;
color: $--base-selection-color;
&::placeholder {
transition: color .3s $--n-ease-in-out-cubic-bezier;
color: map-get($--base-picker-placeholder-color, 'default');
color: map-get($--base-selection-placeholder-color, 'default');
}
@include m(placeholder) {
color: map-get($--base-picker-placeholder-color, 'default');
color: map-get($--base-selection-placeholder-color, 'default');
}
}
}
@include b(base-picker-tags) {
@include b(base-selection-tags) {
@include once {
display: flex;
padding: 3px 32px 0 14px;
@ -151,83 +151,83 @@
}
@include not-m(disabled) {
@include m(active) {
@include b(base-picker-border-mask) {
border-color: map-get($--base-picker-border-mask-border-color, 'active');
@include b(base-selection-border-mask) {
border-color: map-get($--base-selection-border-mask-border-color, 'active');
}
@include b(base-picker-label) {
background-color: map-get($--base-picker-background-color, 'active');
@include b(base-selection-label) {
background-color: map-get($--base-selection-background-color, 'active');
}
@include b(base-picker-tags) {
background-color: map-get($--base-picker-background-color, 'active');
@include b(base-selection-tags) {
background-color: map-get($--base-selection-background-color, 'active');
}
@include once {
@include b(base-picker-input-tag) {
@include b(base-selection-input-tag) {
display: inline-block;
}
}
}
@include b(base-picker-label) {
@include b(base-selection-label) {
&:hover ~ {
@include b(base-picker-border-mask) {
border-color: map-get($--base-picker-border-mask-border-color, 'hover');
@include b(base-selection-border-mask) {
border-color: map-get($--base-selection-border-mask-border-color, 'hover');
}
}
&:focus ~ {
@include b(base-picker-border-mask) {
border-color: map-get($--base-picker-border-mask-border-color, 'focus');
box-shadow: map-get($--base-picker-border-mask-box-shadow, 'focus');
@include b(base-selection-border-mask) {
border-color: map-get($--base-selection-border-mask-border-color, 'focus');
box-shadow: map-get($--base-selection-border-mask-box-shadow, 'focus');
}
}
}
@include b(base-picker-tags) {
@include b(base-selection-tags) {
&:hover ~ {
@include b(base-picker-border-mask) {
border-color: map-get($--base-picker-border-mask-border-color, 'hover');
@include b(base-selection-border-mask) {
border-color: map-get($--base-selection-border-mask-border-color, 'hover');
}
}
&:focus ~ {
@include b(base-picker-border-mask) {
border-color: map-get($--base-picker-border-mask-border-color, 'focus');
box-shadow: map-get($--base-picker-border-mask-box-shadow, 'focus');
@include b(base-selection-border-mask) {
border-color: map-get($--base-selection-border-mask-border-color, 'focus');
box-shadow: map-get($--base-selection-border-mask-box-shadow, 'focus');
}
}
}
@include m(focus) {
@include b(base-picker-border-mask) {
border-color: map-get($--base-picker-border-mask-border-color, 'focus');
box-shadow: map-get($--base-picker-border-mask-box-shadow, 'focus');
@include b(base-selection-border-mask) {
border-color: map-get($--base-selection-border-mask-border-color, 'focus');
box-shadow: map-get($--base-selection-border-mask-box-shadow, 'focus');
}
}
}
@include m(disabled) {
cursor: not-allowed;
@include b(base-picker-label) {
@include b(base-selection-label) {
cursor: not-allowed;
background-color: map-get($--base-picker-background-color, 'disabled');
box-shadow: map-get($--base-picker-box-shadow, 'disabled');
background-color: map-get($--base-selection-background-color, 'disabled');
box-shadow: map-get($--base-selection-box-shadow, 'disabled');
@include e(input) {
cursor: not-allowed;
color: map-get($--base-picker-placeholder-color, 'disabled');
color: map-get($--base-selection-placeholder-color, 'disabled');
@include m(placeholder) {
color: map-get($--base-picker-placeholder-color, 'disabled');
color: map-get($--base-selection-placeholder-color, 'disabled');
}
&::placeholder {
color: map-get($--base-picker-placeholder-color, 'disabled');
color: map-get($--base-selection-placeholder-color, 'disabled');
}
}
}
@include b(base-picker-tags) {
@include b(base-selection-tags) {
cursor: not-allowed;
box-shadow: map-get($--base-picker-box-shadow, 'disabled');
background-color: map-get($--base-picker-background-color, "disabled");
box-shadow: map-get($--base-selection-box-shadow, 'disabled');
background-color: map-get($--base-selection-background-color, "disabled");
}
@include e(placeholder) {
cursor: not-allowed;
color: map-get($--base-picker-placeholder-color, 'disabled');
color: map-get($--base-selection-placeholder-color, 'disabled');
}
}
@include b(base-picker-input-tag) {
@include b(base-selection-input-tag) {
@include once {
outline: none;
display: none;
@ -248,8 +248,8 @@
line-height: inherit;
cursor: pointer;
}
caret-color: map-get($--base-picker-caret-color, 'default');
color: $--base-picker-color;
caret-color: map-get($--base-selection-caret-color, 'default');
color: $--base-selection-color;
}
@include once {
@include e(mirror) {
@ -267,58 +267,58 @@
}
@include as-form-item {
@include with-status (error) {
@include b(base-picker) {
@include b(base-picker-border-mask) {
border-color: map-get($--base-picker-border-mask-border-color, 'error-default');
@include b(base-selection) {
@include b(base-selection-border-mask) {
border-color: map-get($--base-selection-border-mask-border-color, 'error-default');
}
@include b(base-picker-label) {
box-shadow: map-get($--base-picker-box-shadow, 'error-default');
@include b(base-selection-label) {
box-shadow: map-get($--base-selection-box-shadow, 'error-default');
}
@include b(base-picker-tags) {
box-shadow: map-get($--base-picker-box-shadow, 'error-default');
@include b(base-selection-tags) {
box-shadow: map-get($--base-selection-box-shadow, 'error-default');
}
@include not-m(disabled) {
@include m(active) {
@include b(base-picker-border-mask) {
border-color: map-get($--base-picker-border-mask-border-color, 'error-active');
@include b(base-selection-border-mask) {
border-color: map-get($--base-selection-border-mask-border-color, 'error-active');
}
@include b(base-picker-label) {
background-color: map-get($--base-picker-background-color, 'error-active');
@include b(base-selection-label) {
background-color: map-get($--base-selection-background-color, 'error-active');
}
@include b(base-picker-tags) {
background-color: map-get($--base-picker-background-color, 'error-active');
@include b(base-selection-tags) {
background-color: map-get($--base-selection-background-color, 'error-active');
}
}
@include b(base-picker-label) {
@include b(base-selection-label) {
&:hover ~ {
@include b(base-picker-border-mask) {
border-color: map-get($--base-picker-border-mask-border-color, 'error-hover');
@include b(base-selection-border-mask) {
border-color: map-get($--base-selection-border-mask-border-color, 'error-hover');
}
}
&:focus ~ {
@include b(base-picker-border-mask) {
border-color: map-get($--base-picker-border-mask-border-color, 'error-focus');
box-shadow: map-get($--base-picker-border-mask-box-shadow, 'error-focus');
@include b(base-selection-border-mask) {
border-color: map-get($--base-selection-border-mask-border-color, 'error-focus');
box-shadow: map-get($--base-selection-border-mask-box-shadow, 'error-focus');
}
}
}
@include b(base-picker-tags) {
@include b(base-selection-tags) {
&:hover ~ {
@include b(base-picker-border-mask) {
border-color: map-get($--base-picker-border-mask-border-color, 'error-hover');
@include b(base-selection-border-mask) {
border-color: map-get($--base-selection-border-mask-border-color, 'error-hover');
}
}
&:focus ~ {
@include b(base-picker-border-mask) {
border-color: map-get($--base-picker-border-mask-border-color, 'error-focus');
box-shadow: map-get($--base-picker-border-mask-box-shadow, 'error-focus');
@include b(base-selection-border-mask) {
border-color: map-get($--base-selection-border-mask-border-color, 'error-focus');
box-shadow: map-get($--base-selection-border-mask-box-shadow, 'error-focus');
}
}
}
@include m(focus) {
@include b(base-picker-border-mask) {
border-color: map-get($--base-picker-border-mask-border-color, 'error-focus');
box-shadow: map-get($--base-picker-border-mask-box-shadow, 'error-focus');
@include b(base-selection-border-mask) {
border-color: map-get($--base-selection-border-mask-border-color, 'error-focus');
box-shadow: map-get($--base-selection-border-mask-box-shadow, 'error-focus');
}
}
}

4
styles/BaseTrackingRect.scss
View File

@ -1,14 +1,14 @@
@import './mixins/mixins.scss';
@include themes-mixin {
@include b(base-light-bar) {
@include b(base-tracking-rect) {
@include once {
position: absolute;
left: 0;
right: 0;
height: 0;
}
@include e(bar) {
@include e(body) {
@include once {
position: absolute;
right: 0;

16
styles/Input.scss
View File

@ -385,16 +385,16 @@
}
border-top-right-radius: 0!important;
border-bottom-right-radius: 0!important;
@include b(base-picker) {
@include b(base-picker-label) {
@include b(base-selection) {
@include b(base-selection-label) {
border-top-right-radius: 0!important;
border-bottom-right-radius: 0!important;
}
@include b(base-picker-tags) {
@include b(base-selection-tags) {
border-top-right-radius: 0!important;
border-bottom-right-radius: 0!important;
}
@include b(base-picker-border-mask) {
@include b(base-selection-border-mask) {
border-top-right-radius: 0!important;
border-bottom-right-radius: 0!important;
}
@ -414,16 +414,16 @@
border-bottom-left-radius: 0!important;
}
}
@include b(base-picker) {
@include b(base-picker-label) {
@include b(base-selection) {
@include b(base-selection-label) {
border-top-left-radius: 0!important;
border-bottom-left-radius: 0!important;
}
@include b(base-picker-tags) {
@include b(base-selection-tags) {
border-top-left-radius: 0!important;
border-bottom-left-radius: 0!important;
}
@include b(base-picker-border-mask) {
@include b(base-selection-border-mask) {
border-top-left-radius: 0!important;
border-bottom-left-radius: 0!important;
}

2
styles/themes/common.scss
View File

@ -23,7 +23,7 @@ $--n-font-size: (
$--button-border-radius: 6px;
$--base-picker-border-radius: 6px;
$--base-selection-border-radius: 6px;
$--base-select-menu-box-shadow: none;

16
styles/themes/dark/components/BasePicker.scss → styles/themes/dark/components/BaseSelection.scss
View File

@ -1,16 +1,16 @@
@mixin setup-dark-base-picker {
$--base-picker-color: $--n-secondary-text-color !global;
$--base-picker-background-color: (
@mixin setup-dark-base-selection {
$--base-selection-color: $--n-secondary-text-color !global;
$--base-selection-background-color: (
'default': rgba(255, 255, 255, .1),
'disabled': rgba(255, 255, 255, .06),
'active': change-color($--primary-6, $alpha: 0.1),
'error-active': change-color($--error-6, $alpha: 0.1)
) !global;
$--base-picker-placeholder-color: (
$--base-selection-placeholder-color: (
'default': rgba(255, 255, 255, .4),
'disabled': rgba(255, 255, 255, .2)
) !global;
$--base-picker-border-mask-border-color: (
$--base-selection-border-mask-border-color: (
'default': transparent,
'hover': $--primary-6,
'active': $--primary-6,
@ -20,16 +20,16 @@
'error-active': $--error-6,
'error-focus': $--error-6
) !global;
$--base-picker-border-mask-box-shadow: (
$--base-selection-border-mask-box-shadow: (
'focus': 0 0 8px 0px change-color($--primary-6, $alpha: .3),
'error-focus': 0 0 8px 0 change-color($--error-6, $alpha: .3)
) !global;
$--base-picker-box-shadow: (
$--base-selection-box-shadow: (
'default': none,
'disabled': none,
'error-default': inset 0 0 0 1px $--error-6
) !global;
$--base-picker-caret-color: (
$--base-selection-caret-color: (
'default': $--n-primary-color,
'error': $--error-6
) !global;

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

@ -4,7 +4,7 @@
@import 'components/Scrollbar.scss';
@import 'components/BaseLoading.scss';
@import 'components/BaseSelectMenu.scss';
@import 'components/BasePicker.scss';
@import 'components/BaseSelection.scss';
@import 'components/BaseSuffix.scss';
@import 'components/Tag.scss';
@import 'components/Table.scss';
@ -91,7 +91,7 @@
@include setup-dark-base-loading;
@include setup-dark-button;
@include setup-dark-base-select-menu;
@include setup-dark-base-picker;
@include setup-dark-base-selection;
@include setup-dark-base-suffix;
@include setup-dark-tag;
@include setup-dark-table;

16
styles/themes/light/components/BasePicker.scss → styles/themes/light/components/BaseSelection.scss
View File

@ -1,16 +1,16 @@
@mixin setup-light-base-picker {
$--base-picker-color: $--n-secondary-text-color !global;
$--base-picker-background-color: (
@mixin setup-light-base-selection {
$--base-selection-color: $--n-secondary-text-color !global;
$--base-selection-background-color: (
'default': rgb(255, 255, 255),
'disabled': $--overlay-8,
'active': rgb(255, 255, 255),
'error-active': rgb(255, 255, 255)
) !global;
$--base-picker-placeholder-color: (
$--base-selection-placeholder-color: (
'default': $--n-disabled-text-color,
'disabled': $--n-disabled-text-color,
) !global;
$--base-picker-border-mask-border-color: (
$--base-selection-border-mask-border-color: (
'default': transparent,
'hover': $--primary-5,
'active': $--primary-5,
@ -20,16 +20,16 @@
'error-active': $--error-5,
'error-focus': $--error-5
) !global;
$--base-picker-border-mask-box-shadow: (
$--base-selection-border-mask-box-shadow: (
'focus': 0 0 0 2px change-color($--primary-5, $alpha: .3),
'error-focus': 0 0 0 2px change-color($--error-5, $alpha: .3)
) !global;
$--base-picker-box-shadow: (
$--base-selection-box-shadow: (
'default': inset 0 0 0 1px $--n-border-color,
'disabled': inset 0 0 0 1px $--n-border-color,
'error-default': inset 0 0 0 1px $--error-5,
) !global;
$--base-picker-caret-color: (
$--base-selection-caret-color: (
'default': $--n-primary-color,
'error': $--error-6
) !global;

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

@ -4,7 +4,7 @@
@import 'components/Scrollbar.scss';
@import 'components/BaseLoading.scss';
@import 'components/BaseSelectMenu.scss';
@import 'components/BasePicker.scss';
@import 'components/BaseSelection.scss';
@import 'components/BaseSuffix.scss';
@import 'components/Tag.scss';
@import 'components/Table.scss';
@ -90,7 +90,7 @@
@include setup-light-base-loading;
@include setup-light-button;
@include setup-light-base-select-menu;
@include setup-light-base-picker;
@include setup-light-base-selection;
@include setup-light-base-suffix;
@include setup-light-tag;
@include setup-light-table;