diff --git a/packages/sortable-list/src/components/Action/index.less b/packages/sortable-list/src/components/Action/index.less index 3dcc0075..574c2eb2 100644 --- a/packages/sortable-list/src/components/Action/index.less +++ b/packages/sortable-list/src/components/Action/index.less @@ -1,17 +1,17 @@ .Action { display: flex; - width: 12px; - padding: 15px; + flex: 0 0 auto; align-items: center; justify-content: center; - flex: 0 0 auto; - touch-action: none; - cursor: var(--cursor, pointer); - border-radius: 5px; + width: 12px; + padding: 15px; + background-color: transparent; border: none; + border-radius: 5px; outline: none; + cursor: var(--cursor, pointer); appearance: none; - background-color: transparent; + touch-action: none; -webkit-tap-highlight-color: transparent; @media (hover: hover) { @@ -26,8 +26,8 @@ svg { flex: 0 0 auto; - margin: auto; height: 100%; + margin: auto; overflow: visible; fill: #919eab; } diff --git a/packages/sortable-list/src/components/BaseItem/index.less b/packages/sortable-list/src/components/BaseItem/index.less index cdc87464..5875816e 100644 --- a/packages/sortable-list/src/components/BaseItem/index.less +++ b/packages/sortable-list/src/components/BaseItem/index.less @@ -6,12 +6,12 @@ @keyframes pop { 0% { - transform: scale(1); box-shadow: var(--box-shadow); + transform: scale(1); } 100% { - transform: scale(var(--scale)); box-shadow: var(--box-shadow-picked-up); + transform: scale(var(--scale)); } } @@ -41,8 +41,7 @@ &-dragOverlay { --scale: 1.05; --box-shadow: @box-shadow; - --box-shadow-picked-up: @box-shadow-border, - -1px 0 15px 0 rgba(34, 33, 81, 0.01), + --box-shadow-picked-up: @box-shadow-border, -1px 0 15px 0 rgba(34, 33, 81, 0.01), 0px 15px 15px 0 rgba(34, 33, 81, 0.25); z-index: 999; } @@ -52,16 +51,16 @@ display: flex; flex-grow: 1; align-items: center; + box-sizing: border-box; padding: 16px 24px; + list-style: none; background-color: @component-background; - box-shadow: @box-shadow; - outline: none; border-radius: 4px; - box-sizing: border-box; - list-style: none; - transform-origin: 50% 50%; + outline: none; + box-shadow: @box-shadow; transform: scale(var(--scale, 1)); + transform-origin: 50% 50%; transition: box-shadow 200ms ease-in-out; &:hover { @@ -71,13 +70,13 @@ } &:not(.avx-sortable-withHandle) { - touch-action: manipulation; cursor: grab; + touch-action: manipulation; } &-dragging:not(&-dragOverlay) { - opacity: var(--dragging-opacity, 0.5); z-index: 0; + opacity: var(--dragging-opacity, 0.5); &:focus { box-shadow: @box-shadow; @@ -87,32 +86,32 @@ &-disabled { color: #999; background-color: #f1f1f1; + cursor: not-allowed; &:focus { box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.1), @box-shadow; } - cursor: not-allowed; } &-dragOverlay { - cursor: inherit; - animation: pop 200ms cubic-bezier(0.18, 0.67, 0.6, 1.22); - transform: scale(var(--scale)); box-shadow: var(--box-shadow-picked-up); + transform: scale(var(--scale)); + cursor: inherit; opacity: 1; + animation: pop 200ms cubic-bezier(0.18, 0.67, 0.6, 1.22); } &-color:before { - content: ''; position: absolute; top: 50%; - transform: translateY(-50%); left: 0; - height: 100%; - width: 3px; display: block; + width: 3px; + height: 100%; + background-color: var(--color); border-top-left-radius: 3px; border-bottom-left-radius: 3px; - background-color: var(--color); + transform: translateY(-50%); + content: ''; } }