@activecollab/components
Version:
ActiveCollab Components
92 lines • 5.8 kB
JavaScript
import styled, { css } from "styled-components";
import { BoxSizingStyle } from "../BoxSizingStyle";
import { FontStyle } from "../FontStyle";
import { InputResetStyle } from "../InputResetStyle";
import { Body2 } from "../Typography";
export const StyledInputWrapper = styled.div.withConfig({
displayName: "Styles__StyledInputWrapper",
componentId: "sc-ce8kcp-0"
})(["align-items:center;background-color:var(--input-background-color);border-color:var(--color-theme-500);border-radius:8px;border-style:solid;border-width:1px;cursor:text;display:flex;height:32px;padding-block:4px;padding-inline:4px;transition:all 0.3s ease;width:360px;", " ", " ", " ", " ", " ", " ", " ", " ", ""], FontStyle, BoxSizingStyle, props => props.$mode === "flat" && css(["background-color:transparent;border:none;border-radius:none;"]), props => props.$size === "small" && css(["border-radius:6px;height:24px;"]), props => props.$size === "big" && css(["height:40px;"]), props => props.$size === "biggest" && css(["height:48px;"]), props => props.$disabled && css(["cursor:default;opacity:50%;"]), props => !props.$disabled && !props.$invalid && css(["&:focus-within,&:hover{border-color:var(--color-primary);}"]), props => !props.$disabled && props.$invalid && props.$mode === "outlined" && css(["border-color:var(--red-alert);"]));
StyledInputWrapper.displayName = "StyledInputWrapper";
export const StyledInput = styled.input.withConfig({
displayName: "Styles__StyledInput",
componentId: "sc-ce8kcp-1"
})(["", " ", " background-color:var(--input-background-color);border:none;color:var(--color-theme-900);font-size:0.875rem;font-weight:400;letter-spacing:0.02em;margin-block:0;margin-inline:4px;outline:none;padding:0;width:100%;", " &::placeholder{color:var(--color-theme-transparent-500);}", " ", " ", " ", " ", " ", ""], BoxSizingStyle, InputResetStyle, props => props.$mode === "flat" && css(["background-color:transparent;"]), props => props.$size === "big" && css(["font-size:1rem;"]), props => props.$size === "biggest" && css(["font-size:1.25rem;font-weight:700;"]), props => props.disabled && css(["cursor:default;"]), props => props.$loading && css(["cursor:progress;"]), props => props.align && css(["text-align:", ";"], props.align), props => props.$mode === "flat" && props.$invalid && css(["color:var(--red-alert);"]));
StyledInput.displayName = "StyledInput";
export const StyledPasswordIndicatorWrapper = styled.div.withConfig({
displayName: "Styles__StyledPasswordIndicatorWrapper",
componentId: "sc-ce8kcp-2"
})(["display:flex;gap:2px;margin-top:6px;margin-bottom:4px;"]);
StyledPasswordIndicatorWrapper.displayName = "StyledPasswordIndicatorWrapper";
export const StyledPasswordIndicator = styled.div.withConfig({
displayName: "Styles__StyledPasswordIndicator",
componentId: "sc-ce8kcp-3"
})(["width:100%;height:4px;border-radius:6px;background-color:", ";"], props => {
const {
$strength,
$index
} = props;
if ($strength === 0) {
return "var(--color-theme-300)";
} else if ($strength === 1) {
return $index === 0 ? "var(--red-alert)" : "var(--color-theme-300)";
} else if ($strength === 2) {
return $index < 2 ? "var(--color-orange)" : "var(--color-theme-300)";
} else if ($strength === 3) {
return $index < 3 ? "var(--color-blue-sky)" : "var(--color-theme-300)";
} else {
return "var(--color-sucess-green)";
}
});
StyledPasswordIndicator.displayName = "StyledPasswordIndicator";
export const StyledInputSelectTrigger = styled.div.withConfig({
displayName: "Styles__StyledInputSelectTrigger",
componentId: "sc-ce8kcp-4"
})(["display:flex;gap:6px;align-items:center;margin-right:2px;margin-left:8px;color:var(--color-theme-700);font-weight:400;letter-spacing:0.02em;font-size:0.875rem;flex-shrink:0;cursor:", ";pointer-events:", ";", ""], props => {
if (props.$disabled) {
return "unset";
}
return "pointer";
}, props => {
if (props.$disabled) {
return "none";
}
return "unset";
}, props => props.$size === "big" && css(["font-size:1rem;"]));
StyledInputSelectTrigger.displayName = "StyledInputSelectTrigger";
export const StyledFlagTriggerLabel = styled.span.withConfig({
displayName: "Styles__StyledFlagTriggerLabel",
componentId: "sc-ce8kcp-5"
})(["font-size:", ";"], _ref => {
let {
$size
} = _ref;
return $size === "small" ? "20px" : "24px";
});
StyledFlagTriggerLabel.displayName = "StyledFlagTriggerLabel";
export const StyledOptionFlag = styled.span.withConfig({
displayName: "Styles__StyledOptionFlag",
componentId: "sc-ce8kcp-6"
})(["font-size:24px;margin-right:4px;"]);
StyledFlagTriggerLabel.displayName = "StyledOptionFlag";
export const StyledOptionName = styled(Body2).withConfig({
displayName: "Styles__StyledOptionName",
componentId: "sc-ce8kcp-7"
})(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"]);
StyledOptionName.displayName = "StyledOptionName";
export const StyledOptionCode = styled(Body2).withConfig({
displayName: "Styles__StyledOptionCode",
componentId: "sc-ce8kcp-8"
})(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-left:auto;color:var(--color-theme-600);flex-shrink:0;"]);
StyledOptionCode.displayName = "StyledOptionCode";
export const StyledOptionRowEnd = styled.span.withConfig({
displayName: "Styles__StyledOptionRowEnd",
componentId: "sc-ce8kcp-9"
})(["display:flex;align-items:center;gap:8px;"]);
StyledOptionRowEnd.displayName = "StyledOptionRowEnd";
export const StyledOptionWrapper = styled.span.withConfig({
displayName: "Styles__StyledOptionWrapper",
componentId: "sc-ce8kcp-10"
})(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-right:8px;display:flex;justify-items:center;align-items:center;"]);
StyledOptionWrapper.displayName = "StyledOptionWrapper";
//# sourceMappingURL=Styles.js.map