diff --git a/components/common/Select/index.module.scss b/components/common/Select/index.module.scss index 236d7e59..7956a5fe 100644 --- a/components/common/Select/index.module.scss +++ b/components/common/Select/index.module.scss @@ -19,14 +19,6 @@ } } - &.modal { - background-color: var(--select-modal-bg); - - &:hover { - background-color: var(--select-modal-bg-hover); - } - } - &.bound { background-color: var(--select-contained-bg); @@ -35,6 +27,10 @@ } } + &.full { + width: 100%; + } + &.table { min-width: $unit * 30; } @@ -89,12 +85,14 @@ } .select { + animation: scaleIn $duration-zoom ease-out; background: var(--dialog-bg); border-radius: $card-corner; border: 1px solid rgba(0, 0, 0, 0.24); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16); padding: 0 $unit; min-width: var(--radix-select-trigger-width); + transform-origin: var(--radix-select-content-transform-origin); max-height: 40vh; z-index: 40; @@ -119,4 +117,50 @@ .scroll.up { transform: scale(1, -1); } + + @keyframes scaleIn { + 0% { + opacity: 0; + transform: scale(0); + } + 20% { + opacity: 0.2; + transform: scale(0.4); + } + 40% { + opacity: 0.4; + transform: scale(0.8); + } + 60% { + opacity: 0.6; + transform: scale(1); + } + 65% { + opacity: 0.65; + transform: scale(1.1); + } + 70% { + opacity: 0.7; + transform: scale(1); + } + 75% { + opacity: 0.75; + transform: scale(0.98); + } + 80% { + opacity: 0.8; + transform: scale(1.02); + } + 90% { + opacity: 0.9; + transform: scale(0.96); + } + 100% { + opacity: 1; + transform: scale(1); + } + } +} + +[data-radix-popper-content-wrapper] { } diff --git a/components/common/Select/index.tsx b/components/common/Select/index.tsx index bc87effb..5e41a1d0 100644 --- a/components/common/Select/index.tsx +++ b/components/common/Select/index.tsx @@ -48,10 +48,7 @@ const Select = React.forwardRef(function select( [styles.medium]: !props.trigger || props.trigger?.size === 'medium', [styles.large]: props.trigger?.size === 'large', }, - props.trigger?.className?.split(' ').map((className) => { - console.log('className', className) - return styles[className] - }) + props.trigger?.className?.split(' ').map((className) => styles[className]) ) const selectClasses = classNames( @@ -122,6 +119,7 @@ const Select = React.forwardRef(function select( />