half-float.scss 934 B

123456789101112131415161718192021222324252627282930313233343536
  1. /* ========================================================================
  2. Component: half-float
  3. ========================================================================== */
  4. //
  5. // Float an absolute positioned element
  6. // and align it with a half top and bottom offset
  7. // relative to its parent
  8. //
  9. // .half-float
  10. // > .half-float-[top|bottom]
  11. //
  12. // ----------------------------------------------
  13. $half-aligned-size : 128px;
  14. $half-aligned-gutter : 5px;
  15. .half-float {
  16. position: relative;
  17. margin-bottom: ($half-aligned-size/2) + $half-aligned-gutter;
  18. .half-float-bottom,
  19. .half-float-top {
  20. position: absolute;
  21. left: 50%;
  22. bottom: -($half-aligned-size/2);
  23. width: $half-aligned-size;
  24. height: $half-aligned-size;
  25. margin-left: -($half-aligned-size/2);
  26. z-index: 2;
  27. }
  28. .half-float-top {
  29. bottom: auto;
  30. top: -($half-aligned-size/2);
  31. }
  32. }