_objects.box.scss 892 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
  1. /* ==========================================================================
  2. #BOX
  3. ========================================================================== */
  4. /**
  5. * The box object simply boxes off content. Extend with cosmetic styles in the
  6. * Components layer.
  7. *
  8. * 1. So we can apply the `.o-box` class to naturally-inline elements.
  9. */
  10. .o-box {
  11. @include inuit-clearfix();
  12. display: block; /* [1] */
  13. padding: $inuit-global-spacing-unit;
  14. > :last-child {
  15. margin-bottom: 0;
  16. }
  17. }
  18. /* Size variants
  19. ========================================================================== */
  20. .o-box--flush {
  21. padding: 0;
  22. }
  23. .o-box--tiny {
  24. padding: $inuit-global-spacing-unit-tiny;
  25. }
  26. .o-box--small {
  27. padding: $inuit-global-spacing-unit-small;
  28. }
  29. .o-box--large {
  30. padding: $inuit-global-spacing-unit-large;
  31. }
  32. .o-box--huge {
  33. padding: $inuit-global-spacing-unit-huge;
  34. }