@devseed-ui/form/src/fieldset/index.js

devseed UI Kit Form

import styled from 'styled-components';

import { themeVal, glsp } from '@devseed-ui/theme-provider';
import { createOverlineStyles } from '@devseed-ui/typography';

export const FormFieldset = styled.fieldset`
  background-color: ${themeVal('color.base-50a')};
  border-radius: ${themeVal('shape.rounded')};
  border: ${themeVal('layout.border')} solid ${themeVal('color.base-100a')};
  padding: 0;
`;

export const FormLegend = styled.legend`
  ${createOverlineStyles}
  display: flex;
  align-items: center;
  width: 100%;
  border: 0;
  padding: 0;
`;

export const FormFieldsetHeader = styled.div`
  display: flex;
  flex-flow: wrap nowrap;
  justify-content: space-between;
  padding: ${glsp(0.75, 2)};
  border-bottom: ${themeVal('layout.border')} solid
    ${themeVal('color.base-100a')};

  fieldset fieldset & {
    padding: ${glsp(0.25, 1)};
  }
`;

export const FormFieldsetBody = styled.div`
  display: grid;
  grid-template-rows: auto;
  grid-gap: ${glsp()};
  padding: ${glsp(2)};

  fieldset fieldset & {
    padding: ${glsp()};
  }
`;