| 1 | @use '../internal' as *;
|
| 2 |
|
| 3 | $generate-utility: should-generate-classes($FRAMES);
|
| 4 |
|
| 5 | @if $generate-utility {
|
| 6 | /* Separate CSS file, but same part as Layout */
|
| 7 |
|
| 8 | /* The base container that is similar in structure to a card but more flexible */
|
| 9 | .frame {
|
| 10 | border-radius: 3px;
|
| 11 | box-shadow: 0 0.2rem 1.25rem 0 rgba(27, 30, 36, 0.07);
|
| 12 | display: flex;
|
| 13 | flex-direction: column;
|
| 14 |
|
| 15 | /* For the frame header and footer, use flex display */
|
| 16 | .frame__header,
|
| 17 | .frame__footer {
|
| 18 | flex: 0 0 auto;
|
| 19 | padding: 1rem;
|
| 20 | }
|
| 21 |
|
| 22 | /* The frame navbar can be used with level or header classes to create a navigation menu */
|
| 23 | .frame__nav {
|
| 24 | flex: 0 0 auto;
|
| 25 | }
|
| 26 |
|
| 27 | .frame__body {
|
| 28 | flex: 1 1 auto;
|
| 29 | overflow-y: auto; /* Show the scrollbar when needed */
|
| 30 | padding: 0 1rem;
|
| 31 | }
|
| 32 |
|
| 33 | .frame__title {
|
| 34 | color: $cirrus-fg;
|
| 35 | font-size: $font-size-m;
|
| 36 | margin: 0.75rem auto 0;
|
| 37 | }
|
| 38 |
|
| 39 | .frame__subtitle {
|
| 40 | color: transparentize($cirrus-fg, 0.4);
|
| 41 | font-size: $font-size-m;
|
| 42 | margin: 0 auto 0.75rem;
|
| 43 | }
|
| 44 | }
|
| 45 | }
|