@scania/tegel 0.0.8 → 0.0.10

package/dist/collection/components/dropdown-v2/dropdown-v2.css

@@ -1,286 +0,0 @@
-:host button {
-  all: unset;
-  height: 100%;
-  width: 100%;
-  background-color: var(--sdds-dropdown-bg);
-  border-bottom: 1px solid var(--sdds-dropdown-border-bottom);
-  border-radius: 4px 4px 0 0;
-}
-:host button:hover {
-  border-bottom: 1px solid var(--sdds-dropdown-border-bottom-hover);
-}
-:host button .value-wrapper {
-  padding: 0 16px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-:host button.placeholder {
-  color: var(--sdds-dropdown-placeholder-color);
-}
-:host button.value {
-  color: var(--sdds-dropdown-value-color);
-}
-:host button:focus {
-  border-bottom-color: transparent;
-}
-:host button:focus::before {
-  content: "";
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 2px;
-  background: var(--sdds-dropdown-border-bottom-open);
-}
-:host button:disabled {
-  color: var(--sdds-dropdown-disabled-color);
-}
-
-:host .filter {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  height: 100%;
-  background-color: var(--sdds-dropdown-bg);
-  border-bottom: 1px solid var(--sdds-dropdown-border-bottom);
-  padding-left: 16px;
-  border-radius: 4px 4px 0 0;
-}
-:host .filter:hover {
-  border-bottom: 1px solid var(--sdds-dropdown-border-bottom-hover);
-}
-:host .filter.disabled {
-  color: var(--sdds-dropdown-disabled-color);
-}
-:host .filter .value-wrapper {
-  display: flex;
-  width: 100%;
-  height: 100%;
-}
-:host .filter .label-inside-as-placeholder {
-  position: absolute;
-  font: var(--sdds-detail-02);
-  letter-spacing: var(--sdds-detail-02-ls);
-  color: var(--sdds-dropdown-placeholder-color);
-}
-:host .filter .label-inside-as-placeholder.lg {
-  top: 20px;
-}
-:host .filter .label-inside-as-placeholder.md {
-  top: 16px;
-}
-:host .filter .label-inside-as-placeholder.sm {
-  display: none;
-}
-:host .filter .label-inside-as-placeholder.selected {
-  font: var(--sdds-detail-07);
-  letter-spacing: var(--sdds-detail-07-ls);
-  transition: all 0.2s ease-in-out;
-}
-:host .filter .label-inside-as-placeholder.selected.lg {
-  top: 12px;
-}
-:host .filter .label-inside-as-placeholder.selected.md {
-  top: 8px;
-}
-:host .filter .label-inside-as-placeholder.selected.sm {
-  display: none;
-}
-:host .filter .label-inside-as-placeholder.selected + .placeholder:not(.sm) {
-  margin-top: 8px;
-}
-:host .filter.focus {
-  border-bottom-color: transparent;
-}
-:host .filter.focus::before {
-  content: "";
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 2px;
-  background: var(--sdds-dropdown-border-bottom-open);
-}
-:host .filter input {
-  flex: 1;
-  all: unset;
-  width: 100%;
-}
-:host .filter input::placeholder {
-  color: var(--sdds-dropdown-placeholder-color);
-}
-:host .filter input:disabled::placeholder {
-  color: var(--sdds-dropdown-disabled-color);
-}
-:host .filter sdds-icon {
-  margin-right: 16px;
-  z-index: 101;
-}
-
-:host {
-  display: block;
-  position: relative;
-  z-index: 100;
-}
-:host .label-outside {
-  font: var(--sdds-detail-05);
-  letter-spacing: var(--sdds-detail-05-ls);
-  color: var(--sdds-dropdown-label-color);
-  margin-bottom: 8px;
-}
-:host .label-outside.disabled {
-  color: var(--sdds-dropdown-disabled-color);
-}
-:host .dropdown-select {
-  position: relative;
-}
-:host .dropdown-select.disabled .label-inside,
-:host .dropdown-select.disabled .placeholder,
-:host .dropdown-select.disabled .label-inside-as-placeholder,
-:host .dropdown-select.disabled .value-wrapper {
-  color: var(--sdds-dropdown-disabled-color);
-}
-:host .dropdown-select .label-inside {
-  position: absolute;
-  font: var(--sdds-detail-07);
-  letter-spacing: var(--sdds-detail-07-ls);
-  color: var(--sdds-dropdown-label-inside-color);
-}
-:host .dropdown-select .label-inside.lg {
-  top: 12px;
-  left: 16px;
-}
-:host .dropdown-select .label-inside.md {
-  top: 8px;
-  left: 16px;
-}
-:host .dropdown-select .label-inside.sm {
-  display: none;
-}
-:host .dropdown-select .label-inside + .placeholder:not(.sm) {
-  margin-top: 8px;
-}
-:host .dropdown-select .placeholder {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-:host .dropdown-select .label-inside-as-placeholder {
-  font: var(--sdds-detail-02);
-  letter-spacing: var(--sdds-detail-02-ls);
-  color: var(--sdds-dropdown-placeholder-color);
-}
-:host .dropdown-select .label-inside-as-placeholder.selected {
-  position: absolute;
-  font: var(--sdds-detail-07);
-  letter-spacing: var(--sdds-detail-07-ls);
-  transition: all 0.2s ease-in-out;
-}
-:host .dropdown-select .label-inside-as-placeholder.selected.lg {
-  top: 12px;
-}
-:host .dropdown-select .label-inside-as-placeholder.selected.md {
-  top: 8px;
-}
-:host .dropdown-select .label-inside-as-placeholder.selected.sm {
-  display: none;
-}
-:host .dropdown-select .label-inside-as-placeholder.selected + .placeholder:not(.sm) {
-  margin-top: 8px;
-}
-:host .dropdown-select.lg {
-  height: 55px;
-}
-:host .dropdown-select.md {
-  height: 47px;
-}
-:host .dropdown-select.sm {
-  height: 39px;
-}
-:host .helper {
-  margin-top: 4px;
-  color: var(--sdds-dropdown-helper-color);
-  font: var(--sdds-detail-05);
-  letter-spacing: var(--sdds-detail-05-ls);
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-:host .helper.error {
-  color: var(--sdds-negative);
-}
-:host .helper.disabled {
-  color: var(--sdds-dropdown-disabled-color);
-}
-:host .dropdown-list {
-  position: absolute;
-  margin-top: 1px;
-  width: 100%;
-  transform-origin: top;
-  transition: transform 0.2s ease-in-out;
-  box-shadow: rgba(0, 0, 0, 0.1) 0 2px 3px 0;
-  border-radius: 0 0 4px 4px;
-  overflow-y: auto;
-}
-:host .dropdown-list::-webkit-scrollbar {
-  width: 4px;
-  background-color: inherit;
-}
-:host .dropdown-list::-webkit-scrollbar-thumb {
-  background-color: var(--sdds-grey-300);
-}
-:host .dropdown-list ::-webkit-scrollbar-button {
-  height: 0;
-  width: 0;
-}
-:host .dropdown-list.lg {
-  max-height: 312px;
-}
-:host .dropdown-list.md {
-  max-height: 312px;
-}
-:host .dropdown-list.sm {
-  max-height: 260px;
-}
-:host .dropdown-list.up {
-  bottom: 100%;
-  margin-top: 0;
-  margin-bottom: 1px;
-  transform-origin: bottom;
-  display: flex;
-  flex-direction: column-reverse;
-  box-shadow: rgba(0, 0, 0, 0.1) 0 -1px 3px 0;
-  border-radius: 4px 4px 0 0;
-}
-:host .dropdown-list.up.label-outside {
-  bottom: calc(100% - 24px);
-}
-:host .dropdown-list.closed {
-  transform: scaleY(0);
-  visibility: hidden;
-}
-:host .dropdown-list.open {
-  transform: scaleY(1);
-}
-:host .dropdown-list .no-result {
-  display: flex;
-  align-items: center;
-  padding: 0 16px;
-  background-color: var(--sdds-dropdown-bg);
-}
-:host .dropdown-list .no-result.lg {
-  height: 56px;
-}
-:host .dropdown-list .no-result.md {
-  height: 48px;
-}
-:host .dropdown-list .no-result.sm {
-  height: 40px;
-}
-:host sdds-icon {
-  transition: transform 0.2s ease-in-out;
-}
-:host sdds-icon.open {
-  transform: rotateZ(180deg);
-}