1// Content layout styles
2$nav__toplvlWidth: 120px;
3$nav__seclvlWidth: 240px;
4
5// Main element class
6.content__container {
7  margin-left: $nav__toplvlWidth;
8  padding: 1em 0.1em;
9
10  @include mediaQuery(x-small) {
11    padding: 1rem 2rem;
12  }
13
14  section.row,
15  .column.row.row,
16  .row.row.columns {
17    margin-left: 0;
18  }
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  }
27}
28
29.content-header {
30  font-weight: 700;
31  margin-bottom: 0;
32  margin-top: 2em;
33}
34
35// TODO: Determine if label and content-label are the same - remove generic element selector
36.content-label,
37label {
38  @include label;
39}
40
41// 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
51.subhead {
52  width: 100%;
53  border-bottom: 1px solid $border-color-01;
54  padding-bottom: 0.5em;
55}
56