Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
import { createGlobalStyle } from 'styled-components';
import { sizes } from '@buffetjs/styles';
const Global = createGlobalStyle`
// Storybook
body {
padding: ${sizes.margin * 1.8}px;
margin: ${sizes.margin * 2}px ${sizes.margin * 1.8}px;
}
.story {
font-family: Lato !important;
padding-top: 12px;
section {
font-size: 13px;
padding-bottom: ${sizes.margin * 0.9}px;
}
section div {
&.row {
margin-bottom: ${sizes.margin * 2}px;
}
&.btn-wrapper {
display: inline-block;
align-self: flex-end;
font-family: Lato !important;
padding-top: 12px;
section {
font-size: 13px;
padding-bottom: ${sizes.margin * 0.9}px;
}
section div {
&.row {
margin-bottom: ${sizes.margin * 2}px;
}
&.btn-wrapper {
display: inline-block;
align-self: flex-end;
width: fit-content;
margin-bottom: ${sizes.margin * 1.8}px;
padding-right: ${sizes.margin * 2}px;
height: ${sizes.button.height.large};
button {
outline: 0;
}
}
}
pre {
background-color: #f6f8fa;
border-radius: 3px;
font-size: 85%;
line-height: 1.45;
overflow: auto;
padding: 16px;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
}
}
/**
*
* Wrapper
*
*/
import styled, { css } from 'styled-components';
import { colors, sizes } from '@buffetjs/styles';
const Wrapper = styled.div`
position: relative;
padding-bottom: ${sizes.margin * 2.3}px;
label {
display: block;
margin-bottom: 1rem;
}
> p {
width 100%;
padding-top: 10px;
font-size: 13px;
line-height: normal;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: -8px;
}
${({ error }) =>
!!error &&
import styled from 'styled-components';
import { sizes } from '@buffetjs/styles';
import Icon from '../Icon';
const PrefixIcon = styled(Icon)`
margin-right: ${sizes.margin}px;
font-size: 0.94em;
`;
export default PrefixIcon;
${({ error }) =>
!!error &&
css`
input,
textarea,
select {
border-color: ${colors.darkOrange};
}
`}
`;
${({ error }) => {
if (error) {
return `
border: 1px solid ${colors.darkOrange};
border-radius: 2px;
`;
}
}}
function NavTabs({ links }) {
let color = colors.greyLink;
return (
<ul>
{links.map((link, index) => {
color = gradient(color, 1.5);
const content = link.label ? <p>{link.label}</p> : link.compo || null;
return (
{content}
</ul>
padding-top: 12px;
section {
font-size: 13px;
padding-bottom: ${sizes.margin * 0.9}px;
}
section div {
&.row {
margin-bottom: ${sizes.margin * 2}px;
}
&.btn-wrapper {
display: inline-block;
align-self: flex-end;
width: fit-content;
margin-bottom: ${sizes.margin * 1.8}px;
padding-right: ${sizes.margin * 2}px;
height: ${sizes.button.height.large};
button {
outline: 0;
}
}
}
pre {
background-color: #f6f8fa;
border-radius: 3px;
font-size: 85%;
line-height: 1.45;
overflow: auto;
padding: 16px;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
}
}
`;