quicklinks.css 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. /**
  2. * @file
  3. * This file is used to style the Quick Links block.
  4. */
  5. .quicklinks {
  6. background-color: #fff;
  7. }
  8. @media screen and (min-width: 60rem) { /* 960px */
  9. .quicklinks {
  10. padding: 2rem 0;
  11. }
  12. }
  13. /* Small */
  14. @media screen and (min-width: 30rem) { /* 480px */
  15. .quicklinks__content {
  16. display: flex;
  17. flex-wrap: wrap;
  18. }
  19. }
  20. /* Large */
  21. @media screen and (min-width: 60rem) { /* 960px */
  22. .quicklinks__content {
  23. flex-wrap: nowrap;
  24. }
  25. }
  26. .quicklinks__col {
  27. position: relative;
  28. min-height: 9rem;
  29. padding: 1.5rem 0.25rem;
  30. text-align: center;
  31. }
  32. /* Small */
  33. @media screen and (min-width: 30rem) { /* 480px */
  34. .quicklinks__col {
  35. flex-basis: 50%;
  36. padding-top: 1rem;
  37. padding-bottom: 1rem;
  38. }
  39. }
  40. .quicklinks__col::after {
  41. position: absolute;
  42. right: 10%;
  43. bottom: 0;
  44. display: block;
  45. width: 80%;
  46. height: 1px;
  47. content: "";
  48. background-color: #e6eee0;
  49. }
  50. .quicklinks__col:last-child::after {
  51. display: none;
  52. }
  53. /* Small */
  54. @media screen and (min-width: 30rem) { /* 480px */
  55. .quicklinks__col:nth-child(3)::after {
  56. display: none;
  57. }
  58. }
  59. /* Large */
  60. @media screen and (min-width: 60rem) { /* 960px */
  61. .quicklinks__col::after {
  62. position: absolute;
  63. top: 0;
  64. right: 0;
  65. display: block;
  66. width: 1px;
  67. height: 100%;
  68. content: "";
  69. background-color: #e6eee0;
  70. }
  71. .quicklinks__col:nth-child(3)::after {
  72. display: block;
  73. }
  74. }
  75. .quicklinks__img {
  76. margin-bottom: 1rem;
  77. }