1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283 |
- /**
- * @file
- * This file is used to style the Quick Links block.
- */
- .quicklinks {
- background-color: #fff;
- }
- @media screen and (min-width: 60rem) { /* 960px */
- .quicklinks {
- padding: 2rem 0;
- }
- }
- /* Small */
- @media screen and (min-width: 30rem) { /* 480px */
- .quicklinks__content {
- display: flex;
- flex-wrap: wrap;
- }
- }
- /* Large */
- @media screen and (min-width: 60rem) { /* 960px */
- .quicklinks__content {
- flex-wrap: nowrap;
- }
- }
- .quicklinks__col {
- position: relative;
- min-height: 9rem;
- padding: 1.5rem 0.25rem;
- text-align: center;
- }
- /* Small */
- @media screen and (min-width: 30rem) { /* 480px */
- .quicklinks__col {
- flex-basis: 50%;
- padding-top: 1rem;
- padding-bottom: 1rem;
- }
- }
- .quicklinks__col::after {
- position: absolute;
- right: 10%;
- bottom: 0;
- display: block;
- width: 80%;
- height: 1px;
- content: "";
- background-color: #e6eee0;
- }
- .quicklinks__col:last-child::after {
- display: none;
- }
- /* Small */
- @media screen and (min-width: 30rem) { /* 480px */
- .quicklinks__col:nth-child(3)::after {
- display: none;
- }
- }
- /* Large */
- @media screen and (min-width: 60rem) { /* 960px */
- .quicklinks__col::after {
- position: absolute;
- top: 0;
- right: 0;
- display: block;
- width: 1px;
- height: 100%;
- content: "";
- background-color: #e6eee0;
- }
- .quicklinks__col:nth-child(3)::after {
- display: block;
- }
- }
- .quicklinks__img {
- margin-bottom: 1rem;
- }
|