Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
import { css } from "styled-components";
import tokens from "@paprika/tokens/lib/tokens";
import stylers from "@paprika/stylers";
export const title = css`
background: ${tokens.backgroundColor.level0};
border-bottom: 1px solid ${tokens.border.color};
border-top-left-radius: ${tokens.border.radius};
border-top-right-radius: ${tokens.border.radius};
flex-basis: 50%;
flex-grow: 1;
font-size: ${stylers.fontSize(-1)};
font-weight: bold;
min-height: 20px;
padding: ${tokens.spaceSm} ${tokens.space} ${tokens.spaceSm} ${tokens.spaceLg};
`;
export const flex = css`
align-items: flex-start;
display: flex;
justify-content: center;
color: ${tokens.color.black};
}
`;
export const optionLabel = css`
font-size: 16px;
margin-bottom: 3px;
`;
export const optionBreadcrumb = css`
color: ${tokens.color.blackLighten20};
font-size: 13px;
`;
export const noOptionsSelectedContainer = css`
background: ${tokens.backgroundColor.level0};
padding: ${tokens.space};
`;
export const noOptionsSelected = css`
background: ${tokens.color.white};
border: 1px dashed ${tokens.border.color};
color: ${tokens.textColor.subtle};
font-style: italic;
padding: ${tokens.space};
text-align: center;
`;
import { css } from "styled-components";
import tokens from "@paprika/tokens/lib/tokens";
import stylers from "@paprika/stylers";
export const container = css`
display: flex;
flex-wrap: wrap;
padding: ${tokens.space};
`;
export const optionStyles = css`
align-items: center;
background: ${tokens.backgroundColor.white};
border: 1px solid ${tokens.border.color};
border-radius: ${tokens.border.radius};
box-sizing: border-box;
color: ${tokens.color.black};
display: flex;
flex-basis: 100%;
flex-grow: 1;
${stylers.fontSize(-1)}
justify-content: flex-start;
margin: ${tokens.spaceSm};
`;
export const title = css`
background: ${tokens.backgroundColor.level0};
border-bottom: 1px solid ${tokens.border.color};
border-top: 1px solid ${tokens.border.color};
[data-pka-anchor="listbox-content-inline"] {
border: 0;
flex-basis: 50%;
${({ height }) => {
return `
min-height: ${height}px;
`;
}}
}
[data-pka-prevent-default-on-select="true"] {
cursor: pointer;
&:hover {
background: ${tokens.backgroundColor.level0};
}
}
[data-pka-anchor="listbox-box"] {
border: 0;
}
[data-pka-anchor="listbox-trigger"] {
border: 0;
display: none;
}
[data-ppk-is-root-selected="true"] {
background: ${tokens.color.greenLighten50};
}