Michael Davis | 1947575 | 2017-02-23 18:30:23 -0600 | [diff] [blame] | 1 | // Content layout styles |
Michael Davis | 71ec745 | 2017-04-24 16:28:57 -0500 | [diff] [blame] | 2 | $nav__toplvlWidth: 120px; |
| 3 | $nav__seclvlWidth: 240px; |
Michael Davis | 1947575 | 2017-02-23 18:30:23 -0600 | [diff] [blame] | 4 | |
Derick Montague | 1a606be | 2019-05-23 21:32:28 -0500 | [diff] [blame] | 5 | // Main element class |
Michael Davis | 1947575 | 2017-02-23 18:30:23 -0600 | [diff] [blame] | 6 | .content__container { |
Michael Davis | 1947575 | 2017-02-23 18:30:23 -0600 | [diff] [blame] | 7 | margin-left: $nav__toplvlWidth; |
Derick Montague | 1a606be | 2019-05-23 21:32:28 -0500 | [diff] [blame] | 8 | padding: 1em 0.1em; |
| 9 | |
| 10 | @include mediaQuery(x-small) { |
Michael Davis | 0f03ad1 | 2017-02-27 16:54:18 -0600 | [diff] [blame] | 11 | padding: 1rem 2rem; |
Michael Davis | 1947575 | 2017-02-23 18:30:23 -0600 | [diff] [blame] | 12 | } |
Derick Montague | 1a606be | 2019-05-23 21:32:28 -0500 | [diff] [blame] | 13 | |
Michael Davis | 706b75b | 2017-08-18 16:40:03 -0500 | [diff] [blame] | 14 | section.row, |
Derick Montague | 1a606be | 2019-05-23 21:32:28 -0500 | [diff] [blame] | 15 | .column.row.row, |
| 16 | .row.row.columns { |
Michael Davis | 706b75b | 2017-08-18 16:40:03 -0500 | [diff] [blame] | 17 | margin-left: 0; |
| 18 | } |
Derick Montague | 1a606be | 2019-05-23 21:32:28 -0500 | [diff] [blame] | 19 | |
| 20 | // Must be applied to the <main> element in the app |
| 21 | // Required to create an elegant page transition |
| 22 | @include page-transition; |
| 23 | &.ng-leave-active, |
| 24 | &.ng-enter { |
| 25 | @include page-transition-visibility; |
| 26 | } |
Michael Davis | 1947575 | 2017-02-23 18:30:23 -0600 | [diff] [blame] | 27 | } |
Michael Davis | 6af1346 | 2017-04-04 14:07:02 -0500 | [diff] [blame] | 28 | |
Michael Davis | 272297b | 2017-04-24 12:11:53 -0500 | [diff] [blame] | 29 | .content-header { |
| 30 | font-weight: 700; |
| 31 | margin-bottom: 0; |
| 32 | margin-top: 2em; |
| 33 | } |
| 34 | |
Dixsie Wolmers | c652ed1 | 2019-07-19 13:03:28 -0500 | [diff] [blame] | 35 | // TODO: Determine if label and content-label are the same - remove generic element selector |
Derick Montague | 1a606be | 2019-05-23 21:32:28 -0500 | [diff] [blame] | 36 | .content-label, |
| 37 | label { |
Dixsie Wolmers | c652ed1 | 2019-07-19 13:03:28 -0500 | [diff] [blame] | 38 | @include label; |
Michael Davis | 272297b | 2017-04-24 12:11:53 -0500 | [diff] [blame] | 39 | } |
Iftekharul Islam | 8947e70 | 2017-07-27 10:28:07 -0500 | [diff] [blame] | 40 | |
Derick Montague | 30d7c63 | 2019-07-31 22:35:48 -0500 | [diff] [blame] | 41 | // TODO: Remove and replace with section and section-title pattern |
Dixsie Wolmers | c652ed1 | 2019-07-19 13:03:28 -0500 | [diff] [blame] | 42 | // Page header |
| 43 | .page-header { |
| 44 | width: 100%; |
| 45 | position: relative; |
Derick Montague | 30d7c63 | 2019-07-31 22:35:48 -0500 | [diff] [blame] | 46 | border-bottom: 1px solid $border-color-01; |
Dixsie Wolmers | c652ed1 | 2019-07-19 13:03:28 -0500 | [diff] [blame] | 47 | margin: 0.5em 0 2.2em; |
| 48 | padding-left: 0; |
| 49 | } |
| 50 | // TODO: Remove and replace with the .section and .section-title pattern |
Iftekharul Islam | 8947e70 | 2017-07-27 10:28:07 -0500 | [diff] [blame] | 51 | .subhead { |
Gunnar Mills | 9719544 | 2018-11-26 16:51:57 -0600 | [diff] [blame] | 52 | width: 100%; |
Yoshie Muranaka | 6f7ec80 | 2019-06-24 14:35:41 -0500 | [diff] [blame] | 53 | border-bottom: 1px solid $border-color-01; |
Derick Montague | 1a606be | 2019-05-23 21:32:28 -0500 | [diff] [blame] | 54 | padding-bottom: 0.5em; |
Gunnar Mills | 84e114a | 2018-11-14 13:44:41 -0600 | [diff] [blame] | 55 | } |