blob: 8c8b9168b03fef2d3ba6ca0f94e78754bedf04ef [file] [log] [blame]
Michael Davis19475752017-02-23 18:30:23 -06001// Content layout styles
Michael Davis71ec7452017-04-24 16:28:57 -05002$nav__toplvlWidth: 120px;
3$nav__seclvlWidth: 240px;
Michael Davis19475752017-02-23 18:30:23 -06004
Derick Montague1a606be2019-05-23 21:32:28 -05005// Main element class
Michael Davis19475752017-02-23 18:30:23 -06006.content__container {
Michael Davis19475752017-02-23 18:30:23 -06007 margin-left: $nav__toplvlWidth;
Derick Montague1a606be2019-05-23 21:32:28 -05008 padding: 1em 0.1em;
9
10 @include mediaQuery(x-small) {
Michael Davis0f03ad12017-02-27 16:54:18 -060011 padding: 1rem 2rem;
Michael Davis19475752017-02-23 18:30:23 -060012 }
Derick Montague1a606be2019-05-23 21:32:28 -050013
Michael Davis706b75b2017-08-18 16:40:03 -050014 section.row,
Derick Montague1a606be2019-05-23 21:32:28 -050015 .column.row.row,
16 .row.row.columns {
Michael Davis706b75b2017-08-18 16:40:03 -050017 margin-left: 0;
18 }
Derick Montague1a606be2019-05-23 21:32:28 -050019
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 Davis19475752017-02-23 18:30:23 -060027}
Michael Davis6af13462017-04-04 14:07:02 -050028
Michael Davis272297b2017-04-24 12:11:53 -050029.content-header {
30 font-weight: 700;
31 margin-bottom: 0;
32 margin-top: 2em;
33}
34
Dixsie Wolmersc652ed12019-07-19 13:03:28 -050035// TODO: Determine if label and content-label are the same - remove generic element selector
Derick Montague1a606be2019-05-23 21:32:28 -050036.content-label,
37label {
Dixsie Wolmersc652ed12019-07-19 13:03:28 -050038 @include label;
Michael Davis272297b2017-04-24 12:11:53 -050039}
Iftekharul Islam8947e702017-07-27 10:28:07 -050040
Dixsie Wolmersc652ed12019-07-19 13:03:28 -050041// TODO: Remove and replace with page and page-title pattern
42// Page header
43.page-header {
44 width: 100%;
45 position: relative;
46 border-bottom: 1px solid $border-color-02;
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 Islam8947e702017-07-27 10:28:07 -050051.subhead {
Gunnar Mills97195442018-11-26 16:51:57 -060052 width: 100%;
Yoshie Muranaka6f7ec802019-06-24 14:35:41 -050053 border-bottom: 1px solid $border-color-01;
Derick Montague1a606be2019-05-23 21:32:28 -050054 padding-bottom: 0.5em;
Gunnar Mills84e114a2018-11-14 13:44:41 -060055}