_flat-links.scss 1.6 KB

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