@sellmate/design-system 0.0.56 → 1.0.0

package/dist/collection/components/sd-select/sd-select.css

@@ -1,40 +1,6 @@
-.sd-select__dropdown {
-  overflow-y: auto;
-  overflow-x: hidden;
-  scroll-behavior: smooth;
-}
-.sd-select__dropdown::-webkit-scrollbar {
-  opacity: 0;
-  background: #e5e5e5;
-}
-.sd-select__dropdown::-webkit-scrollbar:horizontal {
-  height: 8px;
-}
-.sd-select__dropdown::-webkit-scrollbar:vertical {
-  width: 8px;
-}
-.sd-select__dropdown::-webkit-scrollbar-thumb {
-  height: 80px;
-  background-color: #cccccc;
-  border-radius: 4px;
-}
-.sd-select__dropdown::-webkit-scrollbar-track {
-  background-color: transparent;
-}
-
-.sd-select__dropdown .sd-select__option-placeholder {
-  height: 48px;
-  display: flex;
-  align-items: center;
-  padding: 8px 16px;
-  font-size: 12px;
-  line-height: 0;
-  text-align: left;
-  color: #888888;
-}
-
 sd-select {
   display: inline-flex;
+  flex-flow: column nowrap;
   width: fit-content;
   height: fit-content;
 }
@@ -44,58 +10,16 @@ sd-select *:focus-within {
   outline: none !important;
 }
 sd-select .sd-select {
-  display: flex;
-  width: var(--select-width, 200px);
-  height: 28px;
-  position: relative;
-  color: #333333;
-  cursor: pointer;
-  user-select: none;
-  border: 1px solid #aaaaaa;
-  border-radius: 4px;
-  background-color: white;
-}
-sd-select .sd-select:hover:not(.sd-select--disabled) {
-  background: #f6f6f6;
-}
-sd-select .sd-select.sd-select--disabled {
-  cursor: not-allowed;
-  background-color: #eeeeee;
-  border-color: #cccccc;
-}
-sd-select .sd-select.sd-select--disabled .sd-select__label {
-  border-right: 1px solid #cccccc;
-}
-sd-select .sd-select.sd-select--disabled .sd-select__trigger {
-  color: #888888;
-}
-sd-select .sd-select.sd-select--disabled .sd-select__trigger:focus, sd-select .sd-select.sd-select--disabled .sd-select__trigger:focus-visible, sd-select .sd-select.sd-select--disabled .sd-select__trigger:focus-within {
-  outline: none !important;
-}
-sd-select .sd-select__label {
-  font-size: 12px;
-  line-height: 20px;
-  font-weight: 500;
-  color: #333333;
-  padding: 4px 12px;
-  border-right: 1px solid #cccccc;
-  border-radius: 4px 0 0 4px;
-  background-color: #f6f6f6;
-  display: inline-block;
-  white-space: nowrap;
-}
-sd-select .sd-select__container {
-  position: relative;
   width: 100%;
-  display: flex;
 }
-sd-select .sd-select__container .sd-select__trigger {
-  padding: 4px 20px 4px 12px;
+sd-select .sd-select .sd-select__trigger {
+  padding: 4px 28px 4px 12px;
   display: flex;
   width: 100%;
+  height: 100%;
   align-items: center;
 }
-sd-select .sd-select__container .sd-select__trigger .sd-select__value {
+sd-select .sd-select .sd-select__trigger .sd-select__value {
   flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -105,7 +29,7 @@ sd-select .sd-select__container .sd-select__trigger .sd-select__value {
   font-weight: 400;
   text-align: left;
 }
-sd-select .sd-select__container .sd-select__trigger .sd-select__clear {
+sd-select .sd-select .sd-select__trigger .sd-select__clear {
   margin: 0 4px;
   width: 8px;
   height: 8px;
@@ -113,7 +37,7 @@ sd-select .sd-select__container .sd-select__trigger .sd-select__clear {
   outline: none;
   border: none;
 }
-sd-select .sd-select__container .sd-select__arrow {
+sd-select .sd-select .sd-select__arrow {
   position: absolute;
   top: 8px;
   right: 8px;
@@ -121,20 +45,8 @@ sd-select .sd-select__container .sd-select__arrow {
   height: 12px;
   color: #888888;
   transition: transform 0.3s ease;
+  margin-left: 8px;
 }
-sd-select .sd-select__container .sd-select__arrow--open {
+sd-select .sd-select .sd-select__arrow--open {
   transform: rotate(180deg);
-}
-
-.sd-select__dropdown {
-  width: var(--select-dropdown-width, 200px);
-  max-height: var(--select-dropdown-height, 260px);
-  padding-bottom: 2px;
-  background-color: white;
-  box-shadow: 2px 2px 12px 2px rgba(0, 0, 0, 0.1);
-  border-radius: 4px;
-  overflow-y: auto;
-  color: #333333;
-  display: flex;
-  flex-direction: column;
 }