@seedcss/seed-flexy/dist/seed-flexy.css

Flex object pack for Seed

/**
 * @seedcss/seed-flexy (https://github.com/helpscout/seed/)
 * Flex object pack for Seed
 * Licensed under MIT
 */
.o-flexy {
  box-sizing: border-box;
  align-items: center;
  display: flex;
  justify-content: space-between; }
  @media (min-width: 544px) {
    .o-flexy\@sm {
      align-items: center;
      display: flex;
      justify-content: space-between; } }
  @media (min-width: 768px) {
    .o-flexy\@md {
      align-items: center;
      display: flex;
      justify-content: space-between; } }
  @media (min-width: 992px) {
    .o-flexy\@lg {
      align-items: center;
      display: flex;
      justify-content: space-between; } }

.o-flexy--top {
  align-items: flex-start; }

.o-flexy--middle {
  align-items: center; }

.o-flexy--bottom {
  align-items: flex-end; }

.o-flexy--stretch {
  align-items: stretch; }

@media (min-width: 544px) {
  .o-flexy--top\@sm {
    align-items: flex-start; }
  .o-flexy--middle\@sm {
    align-items: center; }
  .o-flexy--bottom\@sm {
    align-items: flex-end; }
  .o-flexy--stretch\@sm {
    align-items: stretch; } }

@media (min-width: 768px) {
  .o-flexy--top\@md {
    align-items: flex-start; }
  .o-flexy--middle\@md {
    align-items: center; }
  .o-flexy--bottom\@md {
    align-items: flex-end; }
  .o-flexy--stretch\@md {
    align-items: stretch; } }

@media (min-width: 992px) {
  .o-flexy--top\@lg {
    align-items: flex-start; }
  .o-flexy--middle\@lg {
    align-items: center; }
  .o-flexy--bottom\@lg {
    align-items: flex-end; }
  .o-flexy--stretch\@lg {
    align-items: stretch; } }

.o-flexy--gap-xs > * {
  margin-left: 4px; }
  .o-flexy--gap-xs > *:first-child {
    margin-left: 0; }

.o-flexy--gap-sm > * {
  margin-left: 8px; }
  .o-flexy--gap-sm > *:first-child {
    margin-left: 0; }

.o-flexy--gap-md > * {
  margin-left: 12px; }
  .o-flexy--gap-md > *:first-child {
    margin-left: 0; }

.o-flexy--gap-lg > * {
  margin-left: 16px; }
  .o-flexy--gap-lg > *:first-child {
    margin-left: 0; }

.o-flexy--gap-xl > * {
  margin-left: 20px; }
  .o-flexy--gap-xl > *:first-child {
    margin-left: 0; }

@media (min-width: 544px) {
  .o-flexy--gap-xs\@sm > * {
    margin-left: 4px; }
    .o-flexy--gap-xs\@sm > *:first-child {
      margin-left: 0; }
  .o-flexy--gap-sm\@sm > * {
    margin-left: 8px; }
    .o-flexy--gap-sm\@sm > *:first-child {
      margin-left: 0; }
  .o-flexy--gap-md\@sm > * {
    margin-left: 12px; }
    .o-flexy--gap-md\@sm > *:first-child {
      margin-left: 0; }
  .o-flexy--gap-lg\@sm > * {
    margin-left: 16px; }
    .o-flexy--gap-lg\@sm > *:first-child {
      margin-left: 0; }
  .o-flexy--gap-xl\@sm > * {
    margin-left: 20px; }
    .o-flexy--gap-xl\@sm > *:first-child {
      margin-left: 0; } }

@media (min-width: 768px) {
  .o-flexy--gap-xs\@md > * {
    margin-left: 4px; }
    .o-flexy--gap-xs\@md > *:first-child {
      margin-left: 0; }
  .o-flexy--gap-sm\@md > * {
    margin-left: 8px; }
    .o-flexy--gap-sm\@md > *:first-child {
      margin-left: 0; }
  .o-flexy--gap-md\@md > * {
    margin-left: 12px; }
    .o-flexy--gap-md\@md > *:first-child {
      margin-left: 0; }
  .o-flexy--gap-lg\@md > * {
    margin-left: 16px; }
    .o-flexy--gap-lg\@md > *:first-child {
      margin-left: 0; }
  .o-flexy--gap-xl\@md > * {
    margin-left: 20px; }
    .o-flexy--gap-xl\@md > *:first-child {
      margin-left: 0; } }

@media (min-width: 992px) {
  .o-flexy--gap-xs\@lg > * {
    margin-left: 4px; }
    .o-flexy--gap-xs\@lg > *:first-child {
      margin-left: 0; }
  .o-flexy--gap-sm\@lg > * {
    margin-left: 8px; }
    .o-flexy--gap-sm\@lg > *:first-child {
      margin-left: 0; }
  .o-flexy--gap-md\@lg > * {
    margin-left: 12px; }
    .o-flexy--gap-md\@lg > *:first-child {
      margin-left: 0; }
  .o-flexy--gap-lg\@lg > * {
    margin-left: 16px; }
    .o-flexy--gap-lg\@lg > *:first-child {
      margin-left: 0; }
  .o-flexy--gap-xl\@lg > * {
    margin-left: 20px; }
    .o-flexy--gap-xl\@lg > *:first-child {
      margin-left: 0; } }

.o-flexy--just-default {
  justify-content: space-between; }

.o-flexy--just-left {
  justify-content: flex-start; }

.o-flexy--just-center {
  justify-content: center; }

.o-flexy--just-right {
  justify-content: flex-end; }

@media (min-width: 544px) {
  .o-flexy--just-default\@sm {
    justify-content: space-between; }
  .o-flexy--just-left\@sm {
    justify-content: flex-start; }
  .o-flexy--just-center\@sm {
    justify-content: center; }
  .o-flexy--just-right\@sm {
    justify-content: flex-end; } }

@media (min-width: 768px) {
  .o-flexy--just-default\@md {
    justify-content: space-between; }
  .o-flexy--just-left\@md {
    justify-content: flex-start; }
  .o-flexy--just-center\@md {
    justify-content: center; }
  .o-flexy--just-right\@md {
    justify-content: flex-end; } }

@media (min-width: 992px) {
  .o-flexy--just-default\@lg {
    justify-content: space-between; }
  .o-flexy--just-left\@lg {
    justify-content: flex-start; }
  .o-flexy--just-center\@lg {
    justify-content: center; }
  .o-flexy--just-right\@lg {
    justify-content: flex-end; } }

.o-flexy__block {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  flex: 1; }
  @media (min-width: 544px) {
    .o-flexy__block\@sm {
      flex: 1; } }
  @media (min-width: 768px) {
    .o-flexy__block\@md {
      flex: 1; } }
  @media (min-width: 992px) {
    .o-flexy__block\@lg {
      flex: 1; } }

.o-flexy__inline-item {
  box-sizing: border-box;
  max-width: 100%; }

.o-flexy__item {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0; }