circles.scss 833 B

123456789101112131415161718192021222324252627282930313233343536373839404142
  1. /* ========================================================================
  2. Component: circles
  3. ========================================================================== */
  4. // Colored circle for indication purposes
  5. $point-sz-sm : 5px;
  6. $point-sz : 7px;
  7. $point-sz-lg : 11px;
  8. $point-sz-xl : 18px;
  9. .circle {
  10. display: inline-block;
  11. width: $point-sz;
  12. height: $point-sz;
  13. border-radius: 500px;
  14. margin: 0 .5em;
  15. background-color: #ddd;
  16. vertical-align: baseline;
  17. border: 2px solid transparent;
  18. &.text-left {
  19. margin-left: 0;
  20. }
  21. &.text-right {
  22. margin-right: 0;
  23. }
  24. }
  25. // Sizes
  26. .circle-sm {
  27. width: $point-sz-sm;
  28. height: $point-sz-sm;
  29. }
  30. .circle-lg {
  31. width: $point-sz-lg;
  32. height: $point-sz-lg;
  33. }
  34. .circle-xl {
  35. width: $point-sz-xl;
  36. height: $point-sz-xl;
  37. }