ConnectSection.css (1302B)
1 /* This Source Code Form is subject to the terms of the Mozilla Public 2 * License, v. 2.0. If a copy of the MPL was not distributed with this 3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ 4 5 .connect-section { 6 --icon-size: calc(var(--base-unit) * 9); 7 --header-col-gap: calc(var(--base-unit) * 2); 8 margin-block-end: calc(var(--base-unit) * 4); 9 } 10 11 /* 12 * +--------+----------------+ 13 * | <icon> | <heading> 1fr | 14 * +--------+----------------+ 15 */ 16 .connect-section__header { 17 display: grid; 18 grid-template-areas: "icon heading"; 19 grid-template-columns: auto 1fr; 20 grid-template-rows: var(--icon-size); 21 grid-column-gap: var(--header-col-gap); 22 align-items: center; 23 24 padding-block-end: calc(var(--base-unit) * 4); 25 padding-inline: calc(var(--base-unit) * 5); 26 } 27 28 .connect-section__header__title { 29 grid-area: heading; 30 } 31 32 .connect-section__header__icon { 33 grid-area: icon; 34 width: var(--icon-size); 35 height: var(--icon-size); 36 37 -moz-context-properties: fill; 38 fill: currentColor; 39 } 40 41 .connect-section__content { 42 line-height: 1.5; 43 padding-inline-start: calc(var(--base-unit) * 5 + var(--header-col-gap) + var(--icon-size)); 44 padding-inline-end: calc(var(--base-unit) * 5); 45 } 46 47 .connect-section__extra { 48 border-block-start: 1px solid var(--card-separator-color); 49 }