@crossed/ui/src/styles/flex.ts

A universal & performant styling library for React Native, Next.js & React

/**
 * Copyright (c) Paymium.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root of this projects source tree.
 */

import { createStyles } from '@crossed/styled';

export const shrinkStyles = createStyles(() => ({
  on: { base: { flexShrink: 1 } },
  off: { base: { flexShrink: 0 } },
}));

export const growStyles = createStyles(() => ({
  on: { base: { flexGrow: 1 } },
  off: { base: { flexGrow: 0 } },
}));

export const flexDirectionStyles = createStyles(() => ({
  row: { base: { flexDirection: 'row' } },
  rowReverse: { base: { flexDirection: 'row-reverse' } },
  column: { base: { flexDirection: 'column' } },
  columnReverse: { base: { flexDirection: 'column-reverse' } },
}));

export const flexDirectionResponsiveStyles = createStyles(() => ({
  mdCol: {
    media: { md: { flexDirection: 'column' } },
  },
  mdRow: {
    media: { md: { flexDirection: 'row' } },
  },
}));