mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-04-12 14:40:47 +08:00
fix: all components' user-select style prop's effect on safari
This commit is contained in:
07akioni
parent
3c06a36588
commit
1e7bb4a8f5
@ -18,9 +18,10 @@
|
||||
- Fix `n-dropdown`'s disabled option has hover style.
|
||||
- Fix `n-dropdown`'s menu may shift when it's entering.
|
||||
- Fix `n-dropdown`'s transform origin may not be correct in Chrome.
|
||||
- Fix `n-radio-button` may not have correct cursor style in some versions of chrome, closes [#3243](https://github.com/TuSimple/naive-ui/issues/3243).
|
||||
- Fix `n-radio-button` may not have correct cursor style, closes [#3243](https://github.com/TuSimple/naive-ui/issues/3243).
|
||||
- Fix `n-input`'s text color is too shallow with disabled state in Safari, closes [#3241](https://github.com/TuSimple/naive-ui/issues/3241).
|
||||
- Fix `n-input`'s separator may have line wrap.
|
||||
- Fix all components' `user-select` style prop's effect on safari.
|
||||
|
||||
### Feats
|
||||
|
||||
|
||||
@ -18,9 +18,10 @@
|
||||
- 修复 `n-dropdown` 禁用的选项有 hover 样式
|
||||
- 修复 `n-dropdown` 菜单出现可能会闪
|
||||
- 修复 `n-dropdown` 菜单的 transform origin 在 Chrome 上可能不正确
|
||||
- 修复 `n-radio-button` 在某些版本 Chrome 光标样式不正确，关闭 [#3243](https://github.com/TuSimple/naive-ui/issues/3243)
|
||||
- 修复 `n-radio-button` 光标样式可能不正确，关闭 [#3243](https://github.com/TuSimple/naive-ui/issues/3243)
|
||||
- 修复 `n-input` 在 disabled 状态下在 Safari 上文本颜色过浅，关闭 [#3241](https://github.com/TuSimple/naive-ui/issues/3241)
|
||||
- 修复 `n-input` 的分割符可能折行
|
||||
- 修复所有组件的 `user-select` 样式属性在 safari 的效果
|
||||
|
||||
### Feats
|
||||
|
||||
|
||||
10
index.html
10
index.html
@ -14,15 +14,6 @@
|
||||
type="image/svg+xml"
|
||||
href="/demo/assets/images/naivelogo.svg"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/@docsearch/css@alpha"
|
||||
/>
|
||||
<style>
|
||||
:root {
|
||||
--docsearch-primary-color: #18a058;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
@ -42,7 +33,6 @@
|
||||
deriveTitleFromLocale(pathLocale)
|
||||
</script>
|
||||
<div id="app"></div>
|
||||
<div id="search" style="display: none"></div>
|
||||
<script type="module" src="__INDEX__"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -39,6 +39,7 @@ export default cB('scrollbar', `
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
`, [
|
||||
cM('horizontal', `
|
||||
left: 2px;
|
||||
|
||||
@ -245,6 +245,7 @@ export default c([
|
||||
white-space: pre;
|
||||
visibility: hidden;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
opacity: 0;
|
||||
`)
|
||||
]),
|
||||
|
||||
@ -82,6 +82,7 @@ export default cB('breadcrumb', `
|
||||
color: var(--n-separator-color);
|
||||
transition: color .3s var(--n-bezier);
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
`),
|
||||
c('&:last-child', [
|
||||
cE('link', `
|
||||
|
||||
@ -60,6 +60,7 @@ export default c([
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
|
||||
@ -96,6 +96,7 @@ export default cB('carousel', `
|
||||
color: var(--n-arrow-color);
|
||||
border-radius: 8px;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
font-size: 18px;
|
||||
`, [
|
||||
c('svg', `
|
||||
|
||||
@ -142,6 +142,7 @@ export default c([
|
||||
flex-shrink: 0;
|
||||
flex-grow: 0;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
`),
|
||||
cB('checkbox-box', `
|
||||
position: absolute;
|
||||
@ -200,6 +201,7 @@ export default c([
|
||||
color: var(--n-text-color);
|
||||
transition: color .3s var(--n-bezier);
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
padding: var(--n-label-padding);
|
||||
`, [
|
||||
c('&:empty', {
|
||||
|
||||
@ -113,6 +113,7 @@ export default c([
|
||||
min-width: var(--n-scroll-item-width);
|
||||
height: calc(var(--n-scroll-item-height) * 6);
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
`, [
|
||||
c('&:first-child', `
|
||||
min-width: calc(var(--n-scroll-item-width) + 4px);
|
||||
@ -261,6 +262,7 @@ export default c([
|
||||
`),
|
||||
cE('month-year', `
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
flex-grow: 1;
|
||||
position: relative;
|
||||
`, [
|
||||
@ -296,6 +298,7 @@ export default c([
|
||||
`, [
|
||||
cE('day', `
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
line-height: 15px;
|
||||
width: var(--n-item-size);
|
||||
text-align: center;
|
||||
@ -314,6 +317,7 @@ export default c([
|
||||
`, [
|
||||
cB('date-panel-date', `
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
position: relative;
|
||||
width: var(--n-item-size);
|
||||
height: var(--n-item-size);
|
||||
|
||||
@ -11,8 +11,8 @@ I think it is similar with modal, with a bit difference on placement.
|
||||
```demo
|
||||
basic.vue
|
||||
multiple.vue
|
||||
target.vue
|
||||
closable.vue
|
||||
target.vue
|
||||
slot.vue
|
||||
scroll.vue
|
||||
resizable.vue
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<markdown>
|
||||
# Adjustable drawer
|
||||
# Resizable drawer
|
||||
|
||||
Remeber to use `default-width` or `default-height` with `resizable`.
|
||||
</markdown>
|
||||
|
||||
@ -11,8 +11,8 @@
|
||||
```demo
|
||||
basic.vue
|
||||
multiple.vue
|
||||
target.vue
|
||||
closable.vue
|
||||
target.vue
|
||||
slot.vue
|
||||
scroll.vue
|
||||
a11y-debug.vue
|
||||
|
||||
@ -50,6 +50,7 @@ export default c([
|
||||
slideInFromBottomTransition(),
|
||||
cM('unselectable', `
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
`),
|
||||
cM('native-scrollbar', [
|
||||
cB('drawer-content-wrapper', `
|
||||
|
||||
@ -36,11 +36,13 @@ export default cB('form-item', {
|
||||
`, [
|
||||
cE('asterisk', `
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
color: var(--n-asterisk-color);
|
||||
transition: color .3s var(--n-bezier);
|
||||
`),
|
||||
cE('asterisk-placeholder', `
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
visibility: hidden;
|
||||
`)
|
||||
]),
|
||||
|
||||
@ -67,6 +67,7 @@ export default c([
|
||||
]),
|
||||
cB('image-preview', `
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
pointer-events: all;
|
||||
margin: auto;
|
||||
max-height: calc(100vh - 32px);
|
||||
|
||||
@ -11,6 +11,7 @@ import { cB, cE } from '../../../_utils/cssr'
|
||||
export default cB('input-group-label', `
|
||||
position: relative;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
box-sizing: border-box;
|
||||
padding: 0 12px;
|
||||
display: inline-block;
|
||||
|
||||
@ -92,6 +92,7 @@ export default cB('pagination', `
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
@ -45,6 +45,7 @@ export default cB('radio-group', `
|
||||
outline: none;
|
||||
position: relative;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
padding-left: 14px;
|
||||
|
||||
@ -22,6 +22,7 @@ export default cB('radio', `
|
||||
outline: none;
|
||||
position: relative;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
display: inline-flex;
|
||||
align-items: flex-start;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
@ -38,6 +38,7 @@ export default c([
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
`, [
|
||||
cM('reverse', [
|
||||
cB('slider-handles', [
|
||||
|
||||
@ -60,6 +60,7 @@ export default c([
|
||||
`, [
|
||||
cM('spinning', `
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
pointer-events: none;
|
||||
opacity: var(--n-opacity-spinning);
|
||||
`)
|
||||
|
||||
@ -25,6 +25,7 @@ export default cB('switch', `
|
||||
min-width: var(--n-width);
|
||||
vertical-align: middle;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
display: inline-flex;
|
||||
outline: none;
|
||||
justify-content: center;
|
||||
|
||||
@ -4,7 +4,10 @@ export default c([
|
||||
cB('watermark-container', `
|
||||
position: relative;
|
||||
`, [
|
||||
cNotM('selectable', 'user-select: none;')
|
||||
cNotM('selectable', `
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
`)
|
||||
]),
|
||||
cB('watermark', `
|
||||
position: absolute;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user