_flat-links.scss 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. $flatLinksClass: '.flat-links';
  2. .flat-links {
  3. padding-left: 15px;
  4. display: flex;
  5. flex-direction: row;
  6. flex-wrap: wrap;
  7. justify-content: space-between;
  8. @media (max-width: 768px) {
  9. display: none;
  10. }
  11. &__item {
  12. padding: 5px;
  13. height: 90px;
  14. width: 49%;
  15. margin-bottom: 10px;
  16. background: #929292;
  17. display: flex;
  18. flex-direction: row;
  19. justify-content: flex-start;
  20. vertical-align: middle;
  21. align-items: center;
  22. &:hover {
  23. text-decoration: none;
  24. background: #004d7b;
  25. }
  26. &-icon {
  27. display: block;
  28. }
  29. &-description {
  30. display: block;
  31. margin-left: 10px;
  32. color: #fff;
  33. font-weight: 700;
  34. font-size: 13px;
  35. }
  36. }
  37. &--mobile {
  38. display: none;
  39. @media (max-width: 768px) {
  40. display: block;
  41. }
  42. flex-direction: column;
  43. padding-left: 0;
  44. #{$flatLinksClass}__item {
  45. width: 100%;
  46. }
  47. }
  48. &--news {
  49. display: none;
  50. @media (max-width: 768px) {
  51. display: block;
  52. }
  53. flex-direction: column;
  54. padding-left: 0;
  55. #{$flatLinksClass}__item {
  56. width: 100%;
  57. }
  58. }
  59. &--vertical {
  60. flex-direction: column;
  61. padding-left: 0;
  62. #{$flatLinksClass}__item {
  63. width: 100%;
  64. }
  65. }
  66. }