_guides.scss 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  1. .guides {
  2. position: relative;
  3. display: grid;
  4. gap: var(--gutter-y, 2rem) var(--gutter-x, 2rem);
  5. @include media-breakpoint-up(sm) {
  6. padding-left: $gap-6;
  7. &:after {
  8. content: '';
  9. position: absolute;
  10. top: 0;
  11. bottom: 0;
  12. left: #{$gap-6 * .5};
  13. border-right: 1px solid $color-border;
  14. }
  15. }
  16. @include media-breakpoint-up(lg) {
  17. grid-template-columns: repeat(2, 1fr);
  18. padding: 0;
  19. &:after {
  20. left: 50%;
  21. }
  22. }
  23. }
  24. .guide {
  25. position: relative;
  26. @include media-breakpoint-up(sm) {
  27. .guide-date {
  28. display: block;
  29. position: absolute;
  30. top: 2rem;
  31. z-index: 1;
  32. background: $color-gray;
  33. color: $color-muted-light;
  34. left: calc(4rem / -2 - 1rem);
  35. text-transform: uppercase;
  36. line-height: 1.5;
  37. font-size: 12px;
  38. text-align: center;
  39. width: 2rem;
  40. padding: 1rem 0;
  41. }
  42. &:after {
  43. content: '';
  44. width: 1rem;
  45. height: 1rem;
  46. background: $color-white;
  47. z-index: 1;
  48. position: absolute;
  49. top: 3.5rem;
  50. left: calc(-.5rem + 1px);
  51. border: 1px solid $color-border-light;
  52. transform: rotate(45deg);
  53. clip-path: polygon(0 0, 100% 100%, 0 100%);
  54. }
  55. }
  56. @include media-breakpoint-up(lg) {
  57. @for $i from 1 to 10 {
  58. &:nth-child(#{$i}) {
  59. grid-row: $i / #{$i + 2};
  60. }
  61. }
  62. .guide-date {
  63. left: calc(100% + calc(var(--gutter-x, 2rem) / 2) - 1rem);
  64. }
  65. &:nth-child(even) {
  66. .guide-date {
  67. left: calc(var(--gutter-x, 2rem) / -2 - 1rem);
  68. }
  69. }
  70. &:nth-child(odd) {
  71. &:after {
  72. transform: rotate(-135deg);
  73. left: calc(100% - .5rem - 1px);
  74. }
  75. }
  76. }
  77. }
  78. .guide-date {
  79. display: none;
  80. }