_feature-icons.scss 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. ///
  2. /// Paradigm Shift by HTML5 UP
  3. /// html5up.net | @ajlkn
  4. /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
  5. ///
  6. /* Feature Icons */
  7. ul.feature-icons {
  8. display: flex;
  9. flex-wrap: wrap;
  10. list-style: none;
  11. margin: (_size(element-margin) * 1.5) 0;
  12. padding-left: 0;
  13. &:first-child {
  14. margin-top: 0;
  15. }
  16. li {
  17. margin: (_size(element-margin) * 1.25) 0 0 0;
  18. padding: 0.5rem 0 0 4.5rem;
  19. position: relative;
  20. width: 50%;
  21. &:before {
  22. background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 512 512"><path d="M256,0l221.7,128v256L256,512L34.3,384V128L256,0z" fill="#{_palette(border-bg)}" /></svg>');
  23. background-position: center;
  24. background-repeat: no-repeat;
  25. background-size: contain;
  26. color: _palette(fg-bold);
  27. display: block;
  28. font-size: 1.25rem;
  29. height: 3.25rem;
  30. left: 0;
  31. line-height: 3.25rem;
  32. position: absolute;
  33. text-align: center;
  34. top: 0;
  35. width: 3.25rem;
  36. }
  37. &:nth-child(1),
  38. &:nth-child(2) {
  39. margin-top: 0;
  40. }
  41. }
  42. @include breakpoint('<=small') {
  43. margin: 0 0 (_size(element-margin) * 1.5) 0;
  44. li {
  45. width: 100%;
  46. &:nth-child(2) {
  47. margin-top: (_size(element-margin) * 1);
  48. }
  49. }
  50. }
  51. }