diff --git a/com.twin.app.shoptime/src/components/TDropDown/TDropDown.jsx b/com.twin.app.shoptime/src/components/TDropDown/TDropDown.jsx new file mode 100644 index 00000000..cf24a5f3 --- /dev/null +++ b/com.twin.app.shoptime/src/components/TDropDown/TDropDown.jsx @@ -0,0 +1,28 @@ +import React from "react"; + +import classNames from "classnames"; + +import DropDown from "@enact/sandstone/Dropdown"; + +import css from "./TDropDown.module.less"; + +export default function TDropDown({ + className, + children, + direction = "below", + size, + color, + selectedIndex, + ...rest +}) { + return ( + + {children} + + ); +} diff --git a/com.twin.app.shoptime/src/components/TDropDown/TDropDown.module.less b/com.twin.app.shoptime/src/components/TDropDown/TDropDown.module.less new file mode 100644 index 00000000..07a11304 --- /dev/null +++ b/com.twin.app.shoptime/src/components/TDropDown/TDropDown.module.less @@ -0,0 +1,114 @@ +@import "../../style/CommonStyle.module.less"; +@import "../../style/utils.module.less"; + +.tDropdown { + margin-left: 0px !important; + margin-right: 0px !important; + + [role="button"] { + height: 60px !important; + border-radius: 6px !important; + padding: 20px 19px !important; + font-family: @baseFontBold !important; + font-size: 24px !important; + background-color: @COLOR_GRAY03 !important; + color: @COLOR_WHITE !important; + margin: 0 !important; + + > div:first-child { + background-color: transparent !important; + box-shadow: none !important; + } + + > div:nth-child(2) > div:nth-child(1) { + margin-right: 0 !important; + margin-left: 10px !important; + font-size: 24px !important; + width: 24px !important; + color: @COLOR_WHITE !important; + } + + &:focus { + background-color: @PRIMARY_COLOR_RED !important; + } + } +} + +[id="floatLayer"] { + --list-background-color: @COLOR_GRAY03; + --list-item-font-color: @COLOR_WHITE; + --list-item-focus-background-color: @PRIMARY_COLOR_RED; + --list-item-focus-font-color: @COLOR_WHITE; + --list-item-select-border-color: @PRIMARY_COLOR_RED; + --scroll-track-color: @COLOR_GRAY03; + --scroll-bar-color: @COLOR_GRAY04; + + > div > div[id] > div:nth-child(2) { + bottom: unset !important; + transform: unset !important; + + > div:nth-child(1) { + //list layout + padding: 0 !important; + margin-top: 4px !important; + box-shadow: none !important; + background-color: var(--list-background-color) !important; + border-radius: 6px !important; + + > div { + padding: 0 !important; + padding-top: 14px !important; + height: auto !important; + + > div > div { + > div { + padding: 0 15px !important; + + &:focus-within { + background-color: var( + --list-item-focus-background-color + ) !important; + } + + > div:nth-child(1) { + font-family: @baseFontBold !important; + color: var(--list-item-font-color) !important; + font-size: 24px !important; + margin: 0 !important; + padding: 0 !important; + height: 60px !important; + line-height: 60px !important; + -webkit-margin-start: 0 !important; + -webkit-inline-start: 0 !important; + + > div:first-child { + //list item shadow + background-color: transparent !important; + box-shadow: none !important; + } + + > div:nth-child(3) { + //check icon + display: none !important; + } + } + } + } + + > div:nth-child(2) > div { + // scroll track + background-color: var(--scroll-track-color) !important; + width: 4px !important; + border-radius: 20px !important; + + > div { + //scroll bar + background: var(--scroll-bar-color) !important; + width: 100% !important; + border-radius: inherit !important; + } + } + } + } + } +}