@activecollab/components
Version:
ActiveCollab Components
48 lines • 2.19 kB
JavaScript
import styled, { css } from "styled-components";
import { CollapseExpandSingleIcon } from "../Icons";
import { Trigger } from "../Trigger";
export const StyledSelectTrigger = styled(Trigger).withConfig({
displayName: "Styles__StyledSelectTrigger",
componentId: "sc-9799p2-0"
})(["display:flex;align-items:center;justify-content:space-between;padding:0 4px 0 8px;width:300px;transition:border-color 0.3s ease;background-color:transparent;border:none;", " ", " ", " ", " ", " ", " ", ";", ";"], _ref => {
let $mode = _ref.$mode;
return $mode === "outlined" && css(["border:1px solid var(--color-theme-500);background-color:var(--input-background-color);"]);
}, _ref2 => {
let disabled = _ref2.disabled;
return disabled && css(["opacity:50%;cursor:default;"]);
}, _ref3 => {
let $invalid = _ref3.$invalid,
disabled = _ref3.disabled,
$mode = _ref3.$mode;
return !$invalid && !disabled && $mode === "outlined" && css(["&:hover,&:focus{border-color:var(--color-primary-700);}"]);
}, _ref4 => {
let $invalid = _ref4.$invalid,
$mode = _ref4.$mode;
return $invalid && $mode === "outlined" && css(["", " &:hover{", "}"], {
"borderColor": "var(--red-alert)"
}, {
"borderColor": "var(--red-alert)"
});
}, _ref5 => {
let $size = _ref5.$size;
return $size === "small" && css(["height:24px;border-radius:var(--ac-br-6);"]);
}, _ref6 => {
let $size = _ref6.$size;
return $size === "regular" && css(["height:32px;border-radius:var(--ac-br-8);"]);
}, _ref7 => {
let $size = _ref7.$size;
return $size === "big" && css(["height:40px;border-radius:var(--ac-br-8);"]);
}, _ref8 => {
let $size = _ref8.$size;
return $size === "biggest" && css(["height:48px;border-radius:var(--ac-br-8);"]);
});
StyledSelectTrigger.displayName = "StyledSelectTrigger";
export const StyledCaretIcon = styled(CollapseExpandSingleIcon).withConfig({
displayName: "Styles__StyledCaretIcon",
componentId: "sc-9799p2-1"
})(["margin-left:8px;flex-shrink:0;transition:transform 200ms ease;", ""], _ref9 => {
let $open = _ref9.$open;
return !$open && css(["transform:rotate(180deg);"]);
});
StyledCaretIcon.displayName = "StyledCaretIcon";
//# sourceMappingURL=Styles.js.map