@activecollab/components
Version:
ActiveCollab Components
66 lines • 2.17 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;
return $mode === "outlined" && css(["border:1px solid var(--color-theme-500);background-color:var(--input-background-color);"]);
}, _ref2 => {
let {
disabled
} = _ref2;
return disabled && css(["opacity:50%;cursor:default;"]);
}, _ref3 => {
let {
$invalid,
disabled,
$mode
} = _ref3;
return !$invalid && !disabled && $mode === "outlined" && css(["&:hover,&:focus{border-color:var(--color-primary-700);}"]);
}, _ref4 => {
let {
$invalid,
$mode
} = _ref4;
return $invalid && $mode === "outlined" && css(["", " &:hover{", "}"], {
"borderColor": "var(--red-alert)"
}, {
"borderColor": "var(--red-alert)"
});
}, _ref5 => {
let {
$size
} = _ref5;
return $size === "small" && css(["height:24px;border-radius:var(--ac-br-6);"]);
}, _ref6 => {
let {
$size
} = _ref6;
return $size === "regular" && css(["height:32px;border-radius:var(--ac-br-8);"]);
}, _ref7 => {
let {
$size
} = _ref7;
return $size === "big" && css(["height:40px;border-radius:var(--ac-br-8);"]);
}, _ref8 => {
let {
$size
} = _ref8;
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;
return !$open && css(["transform:rotate(180deg);"]);
});
StyledCaretIcon.displayName = "StyledCaretIcon";
//# sourceMappingURL=Styles.js.map