@patreon/studio
Version:
Patreon Studio Design System
48 lines (47 loc) • 1.41 kB
JavaScript
// TODO (legacied filenames/match-regex)
// This failure is legacied in and should be updated. DO NOT COPY.
// eslint-disable-next-line filenames/match-regex
import styled from 'styled-components';
import { tokens } from '../../tokens';
import { mediaForBreakpoint } from '../../utilities/breakpoints';
// Toaster
export const ToasterContainer = styled.div `
bottom: 0;
display: flex;
align-items: center;
flex-direction: column-reverse;
left: 0;
pointer-events: none;
position: fixed;
right: 0;
top: 0;
padding: ${tokens.global.space.x24};
gap: ${tokens.global.space.x12};
z-index: ${tokens.global.layer.z20};
@media ${mediaForBreakpoint('md')} {
align-items: flex-end;
gap: ${tokens.global.space.x16};
}
`;
// Toast
export const StyledToast = styled.div `
align-items: center;
background-color: ${tokens.global.bg.elevated.default};
bottom: 0;
box-shadow: ${tokens.global.boxShadow.mid};
box-sizing: border-box;
border-radius: ${tokens.global.radius.md};
display: inline-flex;
max-width: 480px;
opacity: ${({ visible }) => (visible ? 1 : 0)};
pointer-events: auto;
transition: all ${tokens.global.transition.regular.duration} ${tokens.global.transition.regular.easing};
svg {
display: block;
}
`;
export const ToastTextWrapper = styled.div `
padding: ${tokens.global.space.x16};
min-width: 0;
`;
//# sourceMappingURL=styled-components.js.map