_inline-lists.scss 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. // Foundation by ZURB
  2. // foundation.zurb.com
  3. // Licensed under MIT Open Source
  4. @import 'global';
  5. //
  6. // @variables
  7. //
  8. $include-html-inline-list-classes: $include-html-classes !default;
  9. // We use this to control the margins and padding of the inline list.
  10. $inline-list-top-margin: 0 !default;
  11. $inline-list-opposite-margin: 0 !default;
  12. $inline-list-bottom-margin: rem-calc(17) !default;
  13. $inline-list-default-float-margin: rem-calc(-22) !default;
  14. $inline-list-default-float-list-margin: rem-calc(22) !default;
  15. $inline-list-padding: 0 !default;
  16. // We use this to control the overflow of the inline list.
  17. $inline-list-overflow: hidden !default;
  18. // We use this to control the list items
  19. $inline-list-display: block !default;
  20. // We use this to control any elements within list items
  21. $inline-list-children-display: block !default;
  22. //
  23. // @mixins
  24. //
  25. // We use this mixin to create inline lists
  26. @mixin inline-list {
  27. list-style: none;
  28. margin-top: $inline-list-top-margin;
  29. margin-bottom: $inline-list-bottom-margin;
  30. margin-#{$default-float}: $inline-list-default-float-margin;
  31. margin-#{$opposite-direction}: $inline-list-opposite-margin;
  32. overflow: $inline-list-overflow;
  33. padding: $inline-list-padding;
  34. > li {
  35. display: $inline-list-display;
  36. float: $default-float;
  37. list-style: none;
  38. margin-#{$default-float}: $inline-list-default-float-list-margin;
  39. > * { display: $inline-list-children-display; }
  40. }
  41. }
  42. @include exports("inline-list") {
  43. @if $include-html-inline-list-classes {
  44. .inline-list {
  45. @include inline-list();
  46. }
  47. }
  48. }