settingsHeader.tsx 639 B

123456789101112131415161718192021
  1. import styled from '@emotion/styled';
  2. import space from 'sentry/styles/space';
  3. // This is required to offer components that sit between this settings header
  4. // and i.e. dropdowns, some zIndex layer room
  5. //
  6. // e.g. app/views/settings/metric/triggers/chart/
  7. const HEADER_Z_INDEX_OFFSET = 5;
  8. const SettingsHeader = styled('div')`
  9. position: sticky;
  10. top: 0;
  11. z-index: ${p => p.theme.zIndex.header + HEADER_Z_INDEX_OFFSET};
  12. padding: ${space(3)} ${space(4)};
  13. border-bottom: 1px solid ${p => p.theme.border};
  14. background: ${p => p.theme.background};
  15. height: ${p => p.theme.settings.headerHeight};
  16. `;
  17. export default SettingsHeader;