seed-flexy/dist/seed-flexy.css

Flex object pack for Seed

/**
 * seed-flexy v0.3.4 (https://github.com/helpscout/seed-flexy)
 * 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; }