6 changed files with 0 additions and 397 deletions
@ -1,11 +0,0 @@ |
|||||
@use 'core/_base' as *; |
|
||||
@use 'sass:selector'; |
|
||||
|
|
||||
@include setNamespace('card'); |
|
||||
|
|
||||
#{b()} { |
|
||||
background-color: #fff; |
|
||||
border-radius: 4px; |
|
||||
padding: 10px; |
|
||||
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1); |
|
||||
} |
|
||||
@ -1,51 +0,0 @@ |
|||||
@use 'core/_base' as *; |
|
||||
@use 'sass:selector'; |
|
||||
|
|
||||
@include setNamespace('dropdown'); |
|
||||
|
|
||||
#{b()} { |
|
||||
position: relative; |
|
||||
|
|
||||
#{e('content')} { |
|
||||
position: absolute; |
|
||||
top: 100%; |
|
||||
left: 0; |
|
||||
z-index: 9999; |
|
||||
display: grid; |
|
||||
grid-template-rows: 1fr; |
|
||||
transition: grid-template-rows 0.1s ease-out; |
|
||||
overflow: hidden; |
|
||||
min-width: 80px; |
|
||||
&#{is('hidden')} { |
|
||||
grid-template-rows: 0fr; |
|
||||
} |
|
||||
#{e('wrapper')} { |
|
||||
min-height: 0; |
|
||||
#{e('list')} { |
|
||||
box-sizing: border-box; |
|
||||
background-color: #fff; |
|
||||
border: 1px solid #dcdfe6; |
|
||||
border-radius: 4px; |
|
||||
|
|
||||
#{e('item')} { |
|
||||
padding: 10px; |
|
||||
font-size: 14px; |
|
||||
line-height: 1; |
|
||||
display: flex; |
|
||||
justify-content: center; |
|
||||
cursor: pointer; |
|
||||
&:hover { |
|
||||
background-color: #f5f5f5; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
#{e('line')} { |
|
||||
width: 100%; |
|
||||
height: 1px; |
|
||||
background-color: #dcdfe6; |
|
||||
transform: scaleY(0.5); |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
@ -1,38 +0,0 @@ |
|||||
@use 'core/_base' as *; |
|
||||
@use 'sass:selector'; |
|
||||
|
|
||||
@include setNamespace('empty'); |
|
||||
|
|
||||
#{b()} { |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
align-items: center; |
|
||||
justify-content: center; |
|
||||
padding: 40px 20px; |
|
||||
text-align: center; |
|
||||
color: #909399; |
|
||||
font-size: 14px; |
|
||||
|
|
||||
#{e('image')} { |
|
||||
margin-bottom: 20px; |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
justify-content: center; |
|
||||
|
|
||||
img { |
|
||||
display: block; |
|
||||
user-select: none; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
#{e('description')} { |
|
||||
margin-bottom: 20px; |
|
||||
color: #909399; |
|
||||
font-size: 14px; |
|
||||
line-height: 1.5; |
|
||||
} |
|
||||
|
|
||||
#{e('footer')} { |
|
||||
margin-top: 10px; |
|
||||
} |
|
||||
} |
|
||||
@ -1,59 +0,0 @@ |
|||||
@use 'core/_base' as *; |
|
||||
|
|
||||
@include setNamespace('float'); |
|
||||
|
|
||||
#{b()} { |
|
||||
box-sizing: border-box; |
|
||||
margin: 0; |
|
||||
min-width: 0; |
|
||||
/* fixed + 块级 + 100% 会占满视口宽，getBoundingClientRect 近 innerWidth，clamp 会把 x 锁死 */ |
|
||||
width: max-content; |
|
||||
max-width: calc(100vw - 1rem); |
|
||||
border-radius: var(--radius-box, 0.5rem); |
|
||||
box-shadow: |
|
||||
0 4px 6px -1px rgb(0 0 0 / 0.08), |
|
||||
0 2px 4px -2px rgb(0 0 0 / 0.06); |
|
||||
background-color: var(--color-base-100, #fafafa); |
|
||||
border: var(--border, 1px) solid var(--color-base-300, oklch(92% 0.04 240)); |
|
||||
overflow: hidden; |
|
||||
|
|
||||
&#{is('dragging')} { |
|
||||
cursor: grabbing; |
|
||||
user-select: none; |
|
||||
touch-action: none; |
|
||||
} |
|
||||
|
|
||||
&#{is('no-drag')} { |
|
||||
#{e('handle')} { |
|
||||
cursor: default; |
|
||||
touch-action: auto; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
#{e('handle')} { |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
justify-content: center; |
|
||||
min-height: 2rem; |
|
||||
cursor: grab; |
|
||||
touch-action: none; |
|
||||
flex-shrink: 0; |
|
||||
|
|
||||
&:active { |
|
||||
cursor: grabbing; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
#{e('handle-grip')} { |
|
||||
display: block; |
|
||||
width: 2rem; |
|
||||
height: 0.25rem; |
|
||||
border-radius: 999px; |
|
||||
opacity: 0.35; |
|
||||
} |
|
||||
|
|
||||
#{e('body')} { |
|
||||
box-sizing: border-box; |
|
||||
min-height: 0; |
|
||||
} |
|
||||
} |
|
||||
@ -1,94 +0,0 @@ |
|||||
@use 'core/_base' as *; |
|
||||
@use 'sass:selector'; |
|
||||
|
|
||||
@include setNamespace('input'); |
|
||||
|
|
||||
#{b()} { |
|
||||
position: relative; |
|
||||
display: inline-flex; |
|
||||
width: 100%; |
|
||||
box-sizing: border-box; |
|
||||
vertical-align: middle; |
|
||||
&#{m('mini')} #{e('wrapper')} { |
|
||||
height: 32px; |
|
||||
line-height: 32px; |
|
||||
font-size: 12px; |
|
||||
} |
|
||||
&#{m('small')} #{e('wrapper')} { |
|
||||
height: 36px; |
|
||||
line-height: 36px; |
|
||||
font-size: 14px; |
|
||||
} |
|
||||
&#{m('large')} #{e('wrapper')} { |
|
||||
height: 44px; |
|
||||
line-height: 44px; |
|
||||
font-size: 16px; |
|
||||
} |
|
||||
|
|
||||
#{e('wrapper')} { |
|
||||
width: 100%; |
|
||||
display: inline-flex; |
|
||||
font-size: 14px; |
|
||||
height: 40px; |
|
||||
line-height: 40px; |
|
||||
color: #606266; |
|
||||
transition: |
|
||||
border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), |
|
||||
background-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); |
|
||||
background-color: #e9e9e9; |
|
||||
border: 1px solid transparent; |
|
||||
border-radius: 4px; |
|
||||
padding: 0 15px; |
|
||||
box-sizing: border-box; |
|
||||
&:not(:disabled):has(#{e('inner')}:focus) { |
|
||||
border-color: #007bff; |
|
||||
box-shadow: 0 0 3px 2px rgba(0, 123, 255, 0.4); |
|
||||
background-color: #fff; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
#{e('inner')} { |
|
||||
-webkit-appearance: none; |
|
||||
background-image: none; |
|
||||
background: none; |
|
||||
border: none; |
|
||||
box-sizing: border-box; |
|
||||
line-height: inherit; |
|
||||
color: inherit; |
|
||||
font-size: inherit; |
|
||||
outline: none; |
|
||||
width: 100%; |
|
||||
} |
|
||||
|
|
||||
#{e('prefix')} { |
|
||||
margin-right: 8px; |
|
||||
font-size: 1.5em; |
|
||||
} |
|
||||
#{e('suffix')} { |
|
||||
margin-left: 8px; |
|
||||
font-size: 1.5em; |
|
||||
} |
|
||||
|
|
||||
&#{is('disabled')} { |
|
||||
#{e('wrapper')} { |
|
||||
// color: #ccc; |
|
||||
// background-color: #e9e9e9; |
|
||||
opacity: 0.6; |
|
||||
} |
|
||||
#{e('inner')} { |
|
||||
cursor: not-allowed; |
|
||||
} |
|
||||
} |
|
||||
&#{is('readonly')} { |
|
||||
#{e('inner')} { |
|
||||
cursor: default; |
|
||||
} |
|
||||
position: relative; |
|
||||
transition: width 0.2s ease-in-out; |
|
||||
&#{is('hover-show')}:hover #{e('wrapper')} { |
|
||||
position: absolute; |
|
||||
transform: translateY(-50%); |
|
||||
width: 300px; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
@ -1,144 +0,0 @@ |
|||||
@use 'core/_base' as *; |
|
||||
@use 'sass:selector'; |
|
||||
|
|
||||
@include setNamespace('select'); |
|
||||
|
|
||||
#{b()} { |
|
||||
position: relative; |
|
||||
display: inline-flex; |
|
||||
width: 100%; |
|
||||
box-sizing: border-box; |
|
||||
vertical-align: middle; |
|
||||
|
|
||||
&#{m('mini')} #{e('wrapper')} { |
|
||||
height: 32px; |
|
||||
line-height: 32px; |
|
||||
font-size: 12px; |
|
||||
} |
|
||||
&#{m('small')} #{e('wrapper')} { |
|
||||
height: 36px; |
|
||||
line-height: 36px; |
|
||||
font-size: 14px; |
|
||||
} |
|
||||
&#{m('large')} #{e('wrapper')} { |
|
||||
height: 44px; |
|
||||
line-height: 44px; |
|
||||
font-size: 16px; |
|
||||
} |
|
||||
|
|
||||
#{e('wrapper')} { |
|
||||
width: 100%; |
|
||||
display: inline-flex; |
|
||||
align-items: center; |
|
||||
justify-content: space-between; |
|
||||
font-size: 14px; |
|
||||
height: 40px; |
|
||||
line-height: 40px; |
|
||||
color: #606266; |
|
||||
transition: |
|
||||
border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), |
|
||||
background-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); |
|
||||
background-color: #e9e9e9; |
|
||||
border: 1px solid transparent; |
|
||||
border-radius: 4px; |
|
||||
padding: 0 15px; |
|
||||
box-sizing: border-box; |
|
||||
cursor: pointer; |
|
||||
|
|
||||
&:hover:not(:disabled) { |
|
||||
background-color: #fff; |
|
||||
} |
|
||||
|
|
||||
&:not(:disabled):has(#{e('inner')}:focus) { |
|
||||
border-color: #007bff; |
|
||||
box-shadow: 0 0 3px 2px rgba(0, 123, 255, 0.4); |
|
||||
background-color: #fff; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
#{e('inner')} { |
|
||||
flex: 1; |
|
||||
box-sizing: border-box; |
|
||||
line-height: inherit; |
|
||||
color: inherit; |
|
||||
font-size: inherit; |
|
||||
outline: none; |
|
||||
overflow: hidden; |
|
||||
text-overflow: ellipsis; |
|
||||
white-space: nowrap; |
|
||||
} |
|
||||
|
|
||||
#{e('suffix')} { |
|
||||
margin-left: 8px; |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
color: #909399; |
|
||||
transition: transform 0.2s; |
|
||||
flex-shrink: 0; |
|
||||
} |
|
||||
|
|
||||
#{e('dropdown')} { |
|
||||
position: absolute; |
|
||||
top: calc(100% + 4px); |
|
||||
left: 0; |
|
||||
right: 0; |
|
||||
z-index: 99; |
|
||||
display: grid; |
|
||||
grid-template-rows: 1fr; |
|
||||
transition: grid-template-rows 0.1s ease-out; |
|
||||
overflow: hidden; |
|
||||
|
|
||||
&#{is('hidden')} { |
|
||||
grid-template-rows: 0fr; |
|
||||
} |
|
||||
|
|
||||
#{e('dropdown-wrapper')} { |
|
||||
min-height: 0; |
|
||||
#{e('dropdown-list')} { |
|
||||
box-sizing: border-box; |
|
||||
background-color: #fff; |
|
||||
border: 1px solid #dcdfe6; |
|
||||
border-radius: 4px; |
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); |
|
||||
max-height: 274px; |
|
||||
overflow-y: auto; |
|
||||
|
|
||||
#{e('dropdown-item')} { |
|
||||
padding: 10px 15px; |
|
||||
font-size: 14px; |
|
||||
line-height: 1.5; |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
cursor: pointer; |
|
||||
color: #606266; |
|
||||
|
|
||||
&:hover { |
|
||||
background-color: #f5f7fa; |
|
||||
} |
|
||||
|
|
||||
&#{is('selected')} { |
|
||||
color: #007bff; |
|
||||
background-color: #ecf5ff; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
#{e('dropdown-line')} { |
|
||||
width: 100%; |
|
||||
height: 1px; |
|
||||
background-color: #dcdfe6; |
|
||||
transform: scaleY(0.5); |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
&#{is('disabled')} { |
|
||||
#{e('wrapper')} { |
|
||||
opacity: 0.6; |
|
||||
cursor: not-allowed; |
|
||||
} |
|
||||
#{e('inner')} { |
|
||||
cursor: not-allowed; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
Loading…
Reference in new issue