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