UNPKG

@alifd/next/es/shell/main.scss

Version:

1@charset "UTF-8";
2
3@import "../core/index-noreset.scss";
4@import "scss/mixin";
5@import "scss/variable";
6@import "./rtl.scss";
7
8#{$shell-prefix} {
  @include box-sizing;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: all .2s $motion-ease;
14
  &-content-wrapper {
      overflow: auto;
  }
18
  &-header {
      display: flex;
      width: 100%;
      justify-content: space-between;
      align-items: center;
      z-index: 9;
25
      .dock-trigger,
      .nav-trigger {
          outline: 0;
          // background: $shell-dark-header-background;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
          width: 32px;
          height: 32px;
      }
37
      .nav-trigger {
          margin-right: 10px;
      }
      .dock-trigger {
          margin-left: 10px;
      }
44
      &#{$shell-prefix}-fixed-header {
          position: sticky;
          top: 0;
      }
49
      #{$shell-prefix}-navigation {
          flex: 1 1;
          display: flex;
          align-items: center;
          flex-direction: row;
      }
      #{$shell-prefix}-branding {
          display: flex;
          align-items: center;
      }
      #{$shell-prefix}-action {
          display: flex;
          align-items: center;
      }
  }
65
  &-sub-main {
      flex: 1 1;
      display: flex;
      flex-direction: column;
      height: 100%;
      overflow: auto;
      outline: 0;
  }
  &-main {
      display: flex;
      flex: 1 1 auto;
      flex-direction: row;
      position: relative;
      height: 100%;
      box-sizing: content-box;
      overflow: auto;
      transition: all .2s $motion-ease;
83
      #{$shell-prefix}-content {
          flex: 1 1 auto;
      }
87
      #{$shell-prefix}-content-inner {
          margin: 0 auto;
          // display: grid;
      }
92
      #{$shell-prefix}-footer {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          width: 100%;
      }
  }
101
  .#{$css-prefix}aside-navigation,
  .#{$css-prefix}aside-tooldock {
      display: flex;
      &.fixed {
          position: fixed;
          top: 0;
          bottom: 0;
          z-index: 1;
      }
  }
112
  .#{$css-prefix}aside-navigation.fixed {
      left: 0;
  }
  .#{$css-prefix}aside-tooldock.fixed {
      right: 0;
  }
119
  &-aside {
      transition: all .2s $motion-ease;
122
      .aside-trigger {
          cursor: pointer;
          outline: 0;
          position: absolute;
          right: 0;
          top: 50%;
          width: 20px;
          height: 48px;
          display: flex;
          border: 1px solid #DDD;
          align-items: center;
          justify-content: center;
      }
      .local-nav-trigger {
          outline: 0;
          border-left: none;
          transform: translate(100%, -50%);
          right: 0;
      }
      .ancillary-trigger {
          outline: 0;
          transform: translate(-100%, -50%);
          border-right: 0;
          left: 1px;
      }
148
      &.#{$css-prefix}aside-localnavigation {
          position: relative;
      }
152
      &.#{$css-prefix}aside-ancillary {
          position: relative;
      }
156
157
      &#{$shell-prefix}-navigation {
          display: flex;
          flex-direction: column;
          justify-self: flex-start;
          transition: all .2s $motion-ease;
      }
164
      &#{$shell-prefix}-tooldock {
          display: flex;
          flex-direction: column;
          align-items: center;
      }
170
      #{$shell-prefix}-tooldockitem {
          width: 100%;
          text-align: center;
      }
175
      #{$shell-prefix}-localnavigation {
          position: relative;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-self: flex-start;
          transition: all .2s $motion-ease;
      }
184
      #{$shell-prefix}-ancillary {
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-self: flex-start;
          transition: all .2s $motion-ease;
      }
  }
193
  &-light {
      @include shell-trigger-background(
          $shell-light-header-background,
          $shell-light-header-background,
          $shell-light-local-navigation-background,
          $shell-light-ancillary-background
      );
201
      #{$shell-prefix}-header {
          @include shell-header-type(
              $shell-light-header-color,
              $shell-light-header-height,
              $shell-light-header-background,
              $shell-light-header-divider,
              $shell-light-header-shadow,
              $shell-light-header-paddingLeft
          );
211
          #{$shell-prefix}-navigation {
              @include shell-header-navigation(
                  $shell-light-navigation-hoz-align,
                  $shell-light-header-height,
                  $shell-light-header-height,
                  $shell-light-navigation-hoz-marginLeft
              );
          }
      }
221
      #{$shell-prefix}-task-header {
          @include shell-task-header(
              $shell-light-multitask-min-height,
              $shell-light-multitask-background,
              $shell-light-multitask-divider,
              $shell-light-multitask-shadow,
              $shell-light-multitask-paddingLeft
          );
      }
231
      #{$shell-prefix}-main {
          background: $shell-light-content-background;
234
          #{$shell-prefix}-appbar {
              @include shell-appbar(
                  $shell-light-appbar-min-height,
                  $shell-light-appbar-background,
                  $shell-light-appbar-divider,
                  $shell-light-appbar-shadow,
                  $shell-light-appbar-paddingLeft
              );
          }
244
          @include shell-content(
              $shell-light-content-paddingTop,
              $shell-light-content-paddingLeft,
              $shell-light-content-max-width,
              $shell-light-content-gutter-row,
              $shell-light-content-gutter-column,
              $shell-light-content-columns
          );
253
          #{$shell-prefix}-footer {
              background: $shell-light-footer-background;
              min-height: $shell-light-footer-min-height;
              color: $shell-light-footer-color;
              font-size: $shell-light-footer-font-size;
          }
      }
261
      #{$shell-prefix}-aside {
          &#{$shell-prefix}-navigation {
              @include shell-navigation(
                  $shell-light-navigation-ver-width,
                  $shell-light-navigation-ver-background,
                  $shell-light-navigation-ver-divider,
                  $shell-light-navigation-ver-shadow,
                  $shell-light-navigation-ver-paddingTop,
                  $shell-light-navigation-ver-paddingBottom,
                  $shell-light-navigation-ver-width-mini
              );
          }
          &#{$shell-prefix}-tooldock {
              @include shell-tooldock(
                  $shell-light-tooldock-width,
                  $shell-light-tooldock-background,
                  $shell-light-tooldock-divider,
                  $shell-light-tooldock-shadow,
                  $shell-light-tooldock-paddingTop,
                  $shell-light-tooldock-paddingBottom
              );
          }
          #{$shell-prefix}-tooldockitem {
              @include shell-tooldock-item(
                  $shell-light-tooldock-item-paddingTop,
                  $shell-light-tooldock-item-color,
                  $shell-light-tooldock-item-background,
                  $shell-light-tooldock-item-color-hover,
                  $shell-light-tooldock-item-background-hover
              );
          }
          #{$shell-prefix}-localnavigation {
              @include shell-localnavigation(
                  $shell-light-local-navigation-width,
                  $shell-light-local-navigation-background,
                  $shell-light-local-navigation-divider,
                  $shell-light-local-navigation-shadow,
                  $shell-light-local-navigation-paddingTop,
                  $shell-light-local-navigation-paddingBottom
              );
          }
          #{$shell-prefix}-ancillary {
              @include shell-ancillary(
                  $shell-light-ancillary-width,
                  $shell-light-ancillary-background,
                  $shell-light-ancillary-divider,
                  $shell-light-ancillary-shadow,
                  $shell-light-ancillary-paddingTop,
                  $shell-light-ancillary-paddingBottom
              );
          }
      }
  }
315
  &-dark {
      @include shell-trigger-background(
          $shell-dark-header-background,
          $shell-dark-header-background,
          $shell-dark-local-navigation-background,
          $shell-dark-ancillary-background
      );
323
      #{$shell-prefix}-header {
          @include shell-header-type(
              $shell-dark-header-color,
              $shell-dark-header-height,
              $shell-dark-header-background,
              $shell-dark-header-divider,
              $shell-dark-header-shadow,
              $shell-dark-header-paddingLeft
          );
333
          #{$shell-prefix}-navigation {
              @include shell-header-navigation(
                  $shell-dark-navigation-hoz-align,
                  $shell-dark-header-height,
                  $shell-dark-header-height,
                  $shell-dark-navigation-hoz-marginLeft
              );
          }
      }
343
      #{$shell-prefix}-task-header {
          @include shell-task-header(
              $shell-dark-multitask-min-height,
              $shell-dark-multitask-background,
              $shell-dark-multitask-divider,
              $shell-dark-multitask-shadow,
              $shell-dark-multitask-paddingLeft
          );
      }
353
      #{$shell-prefix}-main {
          background: $shell-dark-content-background;
356
          #{$shell-prefix}-appbar {
              @include shell-appbar(
                  $shell-dark-appbar-min-height,
                  $shell-dark-appbar-background,
                  $shell-dark-appbar-divider,
                  $shell-dark-appbar-shadow,
                  $shell-dark-appbar-paddingLeft
              );
          }
366
          @include shell-content(
              $shell-dark-content-paddingTop,
              $shell-dark-content-paddingLeft,
              $shell-dark-content-max-width,
              $shell-dark-content-gutter-row,
              $shell-dark-content-gutter-column,
              $shell-dark-content-columns
          );
375
          #{$shell-prefix}-footer {
              background: $shell-dark-footer-background;
              min-height: $shell-dark-footer-min-height;
              color: $shell-dark-footer-color;
              font-size: $shell-dark-footer-font-size;
          }
      }
383
      #{$shell-prefix}-aside {
          &#{$shell-prefix}-navigation {
              @include shell-navigation(
                  $shell-dark-navigation-ver-width,
                  $shell-dark-navigation-ver-background,
                  $shell-dark-navigation-ver-divider,
                  $shell-dark-navigation-ver-shadow,
                  $shell-dark-navigation-ver-paddingTop,
                  $shell-dark-navigation-ver-paddingBottom,
                  $shell-dark-navigation-ver-width-mini
              );
          }
          &#{$shell-prefix}-tooldock {
              @include shell-tooldock(
                  $shell-dark-tooldock-width,
                  $shell-dark-tooldock-background,
                  $shell-dark-tooldock-divider,
                  $shell-dark-tooldock-shadow,
                  $shell-dark-tooldock-paddingTop,
                  $shell-dark-tooldock-paddingBottom
              );
          }
          #{$shell-prefix}-tooldockitem {
              @include shell-tooldock-item(
                  $shell-dark-tooldock-item-paddingTop,
                  $shell-dark-tooldock-item-color,
                  $shell-dark-tooldock-item-background,
                  $shell-dark-tooldock-item-color-hover,
                  $shell-dark-tooldock-item-background-hover
              );
          }
          #{$shell-prefix}-localnavigation {
              @include shell-localnavigation(
                  $shell-dark-local-navigation-width,
                  $shell-dark-local-navigation-background,
                  $shell-dark-local-navigation-divider,
                  $shell-dark-local-navigation-shadow,
                  $shell-dark-local-navigation-paddingTop,
                  $shell-dark-local-navigation-paddingBottom
              );
          }
          #{$shell-prefix}-ancillary {
              @include shell-ancillary(
                  $shell-dark-ancillary-width,
                  $shell-dark-ancillary-background,
                  $shell-dark-ancillary-divider,
                  $shell-dark-ancillary-shadow,
                  $shell-dark-ancillary-paddingTop,
                  $shell-dark-ancillary-paddingBottom
              );
          }
      }
  }
437
  &-brand {
      @include shell-trigger-background(
          $shell-brand-header-background,
          $shell-brand-header-background,
          $shell-brand-local-navigation-background,
          $shell-brand-ancillary-background
      );
445
      #{$shell-prefix}-header {
          @include shell-header-type(
              $shell-brand-header-color,
              $shell-brand-header-height,
              $shell-brand-header-background,
              $shell-brand-header-divider,
              $shell-brand-header-shadow,
              $shell-brand-header-paddingLeft
          );
455
          #{$shell-prefix}-navigation {
              @include shell-header-navigation(
                  $shell-brand-navigation-hoz-align,
                  $shell-brand-header-height,
                  $shell-brand-header-height,
                  $shell-brand-navigation-hoz-marginLeft
              );
          }
      }
465
      #{$shell-prefix}-task-header {
          @include shell-task-header(
              $shell-brand-multitask-min-height,
              $shell-brand-multitask-background,
              $shell-brand-multitask-divider,
              $shell-brand-multitask-shadow,
              $shell-brand-multitask-paddingLeft
          );
      }
475
      #{$shell-prefix}-main {
          background: $shell-brand-content-background;
478
          #{$shell-prefix}-appbar {
              @include shell-appbar(
                  $shell-brand-appbar-min-height,
                  $shell-brand-appbar-background,
                  $shell-brand-appbar-divider,
                  $shell-brand-appbar-shadow,
                  $shell-brand-appbar-paddingLeft
              );
          }
488
          @include shell-content(
              $shell-brand-content-paddingTop,
              $shell-brand-content-paddingLeft,
              $shell-brand-content-max-width,
              $shell-brand-content-gutter-row,
              $shell-brand-content-gutter-column,
              $shell-brand-content-columns
          );
497
          #{$shell-prefix}-footer {
              background: $shell-brand-footer-background;
              min-height: $shell-brand-footer-min-height;
              color: $shell-brand-footer-color;
              font-size: $shell-brand-footer-font-size;
          }
      }
505
      #{$shell-prefix}-aside {
          &#{$shell-prefix}-navigation {
              @include shell-navigation(
                  $shell-brand-navigation-ver-width,
                  $shell-brand-navigation-ver-background,
                  $shell-brand-navigation-ver-divider,
                  $shell-brand-navigation-ver-shadow,
                  $shell-brand-navigation-ver-paddingTop,
                  $shell-brand-navigation-ver-paddingBottom,
                  $shell-brand-navigation-ver-width-mini
              );
          }
518
          &#{$shell-prefix}-tooldock {
              @include shell-tooldock(
                  $shell-brand-tooldock-width,
                  $shell-brand-tooldock-background,
                  $shell-brand-tooldock-divider,
                  $shell-brand-tooldock-shadow,
                  $shell-brand-tooldock-paddingTop,
                  $shell-brand-tooldock-paddingBottom
              );
          }
          #{$shell-prefix}-tooldockitem {
              @include shell-tooldock-item(
                  $shell-brand-tooldock-item-paddingTop,
                  $shell-brand-tooldock-item-color,
                  $shell-brand-tooldock-item-background,
                  $shell-brand-tooldock-item-color-hover,
                  $shell-brand-tooldock-item-background-hover
              );
          }
          #{$shell-prefix}-localnavigation {
              @include shell-localnavigation(
                  $shell-brand-local-navigation-width,
                  $shell-brand-local-navigation-background,
                  $shell-brand-local-navigation-divider,
                  $shell-brand-local-navigation-shadow,
                  $shell-brand-local-navigation-paddingTop,
                  $shell-brand-local-navigation-paddingBottom
              );
          }
          #{$shell-prefix}-ancillary {
              @include shell-ancillary(
                  $shell-brand-ancillary-width,
                  $shell-brand-ancillary-background,
                  $shell-brand-ancillary-divider,
                  $shell-brand-ancillary-shadow,
                  $shell-brand-ancillary-paddingTop,
                  $shell-brand-ancillary-paddingBottom
              );
          }
      }
  }
560
  &-header #{$shell-prefix}-navigation {
      &#{$shell-prefix}-nav-left {
          justify-content: flex-start;
      }
      &#{$shell-prefix}-nav-right {
          justify-content: flex-end;
      }
      &#{$shell-prefix}-nav-center {
          justify-content: center;
      }
  }
572
  &#{$shell-prefix}-phone {
      .#{$css-prefix}aside-navigation {
          width: 100%;
576
          &#{$shell-prefix}-collapse {
              width: 0;
          }
      }
      #{$shell-prefix}-header #{$shell-prefix}-navigation {
          display: none;
      }
      #{$shell-prefix}-navigation {
          width: 100%;
          height: 100%;
          transition: height .2s $motion-ease;
          &#{$shell-prefix}-collapse {
              padding: 0;
              height: 0;
              transition: height .2s $motion-ease;
          }
      }
      #{$shell-prefix}-tooldock {
          height: $shell-dark-tooldock-height;
          left: 0;
          right: 0;
          position: absolute;
          width: 100%;
          flex-direction: row;
          justify-content: center;
          &#{$shell-prefix}-collapse {
              display: none;
              height: 0;
              padding: 0;
              transition: all .2s $motion-ease;
          }
      }
  }
610
  &#{$shell-prefix}-tablet,
  &#{$shell-prefix}-phone {
      #{$shell-prefix}-aside.#{$css-prefix}aside-ancillary {
          width: 0;
      }
      #{$shell-prefix}-ancillary {
          transform: translateX(-100%);
      }
      #{$shell-prefix}-aside.#{$css-prefix}aside-localnavigation {
          width: 0;
      }
  }
623}

1	`@charset "UTF-8";`
2
3	`@import "../core/index-noreset.scss";`
4	`@import "scss/mixin";`
5	`@import "scss/variable";`
6	`@import "./rtl.scss";`
7
8	`#{$shell-prefix} {`
9	`@include box-sizing;`
10	`position: relative;`
11	`display: flex;`
12	`flex-direction: column;`
13	`transition: all .2s $motion-ease;`
14
15	`&-content-wrapper {`
16	`overflow: auto;`
17	`}`
18
19	`&-header {`
20	`display: flex;`
21	`width: 100%;`
22	`justify-content: space-between;`
23	`align-items: center;`
24	`z-index: 9;`
25
26	`.dock-trigger,`
27	`.nav-trigger {`
28	`outline: 0;`
29	`// background: $shell-dark-header-background;`
30	`display: flex;`
31	`justify-content: center;`
32	`align-items: center;`
33	`cursor: pointer;`
34	`width: 32px;`
35	`height: 32px;`
36	`}`
37
38	`.nav-trigger {`
39	`margin-right: 10px;`
40	`}`
41	`.dock-trigger {`
42	`margin-left: 10px;`
43	`}`
44
45	`&#{$shell-prefix}-fixed-header {`
46	`position: sticky;`
47	`top: 0;`
48	`}`
49
50	`#{$shell-prefix}-navigation {`
51	`flex: 1 1;`
52	`display: flex;`
53	`align-items: center;`
54	`flex-direction: row;`
55	`}`
56	`#{$shell-prefix}-branding {`
57	`display: flex;`
58	`align-items: center;`
59	`}`
60	`#{$shell-prefix}-action {`
61	`display: flex;`
62	`align-items: center;`
63	`}`
64	`}`
65
66	`&-sub-main {`
67	`flex: 1 1;`
68	`display: flex;`
69	`flex-direction: column;`
70	`height: 100%;`
71	`overflow: auto;`
72	`outline: 0;`
73	`}`
74	`&-main {`
75	`display: flex;`
76	`flex: 1 1 auto;`
77	`flex-direction: row;`
78	`position: relative;`
79	`height: 100%;`
80	`box-sizing: content-box;`
81	`overflow: auto;`
82	`transition: all .2s $motion-ease;`
83
84	`#{$shell-prefix}-content {`
85	`flex: 1 1 auto;`
86	`}`
87
88	`#{$shell-prefix}-content-inner {`
89	`margin: 0 auto;`
90	`// display: grid;`
91	`}`
92
93	`#{$shell-prefix}-footer {`
94	`display: flex;`
95	`flex-direction: column;`
96	`justify-content: center;`
97	`align-items: center;`
98	`width: 100%;`
99	`}`
100	`}`
101
102	`.#{$css-prefix}aside-navigation,`
103	`.#{$css-prefix}aside-tooldock {`
104	`display: flex;`
105	`&.fixed {`
106	`position: fixed;`
107	`top: 0;`
108	`bottom: 0;`
109	`z-index: 1;`
110	`}`
111	`}`
112
113	`.#{$css-prefix}aside-navigation.fixed {`
114	`left: 0;`
115	`}`
116	`.#{$css-prefix}aside-tooldock.fixed {`
117	`right: 0;`
118	`}`
119
120	`&-aside {`
121	`transition: all .2s $motion-ease;`
122
123	`.aside-trigger {`
124	`cursor: pointer;`
125	`outline: 0;`
126	`position: absolute;`
127	`right: 0;`
128	`top: 50%;`
129	`width: 20px;`
130	`height: 48px;`
131	`display: flex;`
132	`border: 1px solid #DDD;`
133	`align-items: center;`
134	`justify-content: center;`
135	`}`
136	`.local-nav-trigger {`
137	`outline: 0;`
138	`border-left: none;`
139	`transform: translate(100%, -50%);`
140	`right: 0;`
141	`}`
142	`.ancillary-trigger {`
143	`outline: 0;`
144	`transform: translate(-100%, -50%);`
145	`border-right: 0;`
146	`left: 1px;`
147	`}`
148
149	`&.#{$css-prefix}aside-localnavigation {`
150	`position: relative;`
151	`}`
152
153	`&.#{$css-prefix}aside-ancillary {`
154	`position: relative;`
155	`}`
156
157
158	`&#{$shell-prefix}-navigation {`
159	`display: flex;`
160	`flex-direction: column;`
161	`justify-self: flex-start;`
162	`transition: all .2s $motion-ease;`
163	`}`
164
165	`&#{$shell-prefix}-tooldock {`
166	`display: flex;`
167	`flex-direction: column;`
168	`align-items: center;`
169	`}`
170
171	`#{$shell-prefix}-tooldockitem {`
172	`width: 100%;`
173	`text-align: center;`
174	`}`
175
176	`#{$shell-prefix}-localnavigation {`
177	`position: relative;`
178	`height: 100%;`
179	`display: flex;`
180	`flex-direction: column;`
181	`justify-self: flex-start;`
182	`transition: all .2s $motion-ease;`
183	`}`
184
185	`#{$shell-prefix}-ancillary {`
186	`height: 100%;`
187	`display: flex;`
188	`flex-direction: column;`
189	`justify-self: flex-start;`
190	`transition: all .2s $motion-ease;`
191	`}`
192	`}`
193
194	`&-light {`
195	`@include shell-trigger-background(`
196	`$shell-light-header-background,`
197	`$shell-light-header-background,`
198	`$shell-light-local-navigation-background,`
199	`$shell-light-ancillary-background`
200	`);`
201
202	`#{$shell-prefix}-header {`
203	`@include shell-header-type(`
204	`$shell-light-header-color,`
205	`$shell-light-header-height,`
206	`$shell-light-header-background,`
207	`$shell-light-header-divider,`
208	`$shell-light-header-shadow,`
209	`$shell-light-header-paddingLeft`
210	`);`
211
212	`#{$shell-prefix}-navigation {`
213	`@include shell-header-navigation(`
214	`$shell-light-navigation-hoz-align,`
215	`$shell-light-header-height,`
216	`$shell-light-header-height,`
217	`$shell-light-navigation-hoz-marginLeft`
218	`);`
219	`}`
220	`}`
221
222	`#{$shell-prefix}-task-header {`
223	`@include shell-task-header(`
224	`$shell-light-multitask-min-height,`
225	`$shell-light-multitask-background,`
226	`$shell-light-multitask-divider,`
227	`$shell-light-multitask-shadow,`
228	`$shell-light-multitask-paddingLeft`
229	`);`
230	`}`
231
232	`#{$shell-prefix}-main {`
233	`background: $shell-light-content-background;`
234
235	`#{$shell-prefix}-appbar {`
236	`@include shell-appbar(`
237	`$shell-light-appbar-min-height,`
238	`$shell-light-appbar-background,`
239	`$shell-light-appbar-divider,`
240	`$shell-light-appbar-shadow,`
241	`$shell-light-appbar-paddingLeft`
242	`);`
243	`}`
244
245	`@include shell-content(`
246	`$shell-light-content-paddingTop,`
247	`$shell-light-content-paddingLeft,`
248	`$shell-light-content-max-width,`
249	`$shell-light-content-gutter-row,`
250	`$shell-light-content-gutter-column,`
251	`$shell-light-content-columns`
252	`);`
253
254	`#{$shell-prefix}-footer {`
255	`background: $shell-light-footer-background;`
256	`min-height: $shell-light-footer-min-height;`
257	`color: $shell-light-footer-color;`
258	`font-size: $shell-light-footer-font-size;`
259	`}`
260	`}`
261
262	`#{$shell-prefix}-aside {`
263	`&#{$shell-prefix}-navigation {`
264	`@include shell-navigation(`
265	`$shell-light-navigation-ver-width,`
266	`$shell-light-navigation-ver-background,`
267	`$shell-light-navigation-ver-divider,`
268	`$shell-light-navigation-ver-shadow,`
269	`$shell-light-navigation-ver-paddingTop,`
270	`$shell-light-navigation-ver-paddingBottom,`
271	`$shell-light-navigation-ver-width-mini`
272	`);`
273	`}`
274	`&#{$shell-prefix}-tooldock {`
275	`@include shell-tooldock(`
276	`$shell-light-tooldock-width,`
277	`$shell-light-tooldock-background,`
278	`$shell-light-tooldock-divider,`
279	`$shell-light-tooldock-shadow,`
280	`$shell-light-tooldock-paddingTop,`
281	`$shell-light-tooldock-paddingBottom`
282	`);`
283	`}`
284	`#{$shell-prefix}-tooldockitem {`
285	`@include shell-tooldock-item(`
286	`$shell-light-tooldock-item-paddingTop,`
287	`$shell-light-tooldock-item-color,`
288	`$shell-light-tooldock-item-background,`
289	`$shell-light-tooldock-item-color-hover,`
290	`$shell-light-tooldock-item-background-hover`
291	`);`
292	`}`
293	`#{$shell-prefix}-localnavigation {`
294	`@include shell-localnavigation(`
295	`$shell-light-local-navigation-width,`
296	`$shell-light-local-navigation-background,`
297	`$shell-light-local-navigation-divider,`
298	`$shell-light-local-navigation-shadow,`
299	`$shell-light-local-navigation-paddingTop,`
300	`$shell-light-local-navigation-paddingBottom`
301	`);`
302	`}`
303	`#{$shell-prefix}-ancillary {`
304	`@include shell-ancillary(`
305	`$shell-light-ancillary-width,`
306	`$shell-light-ancillary-background,`
307	`$shell-light-ancillary-divider,`
308	`$shell-light-ancillary-shadow,`
309	`$shell-light-ancillary-paddingTop,`
310	`$shell-light-ancillary-paddingBottom`
311	`);`
312	`}`
313	`}`
314	`}`
315
316	`&-dark {`
317	`@include shell-trigger-background(`
318	`$shell-dark-header-background,`
319	`$shell-dark-header-background,`
320	`$shell-dark-local-navigation-background,`
321	`$shell-dark-ancillary-background`
322	`);`
323
324	`#{$shell-prefix}-header {`
325	`@include shell-header-type(`
326	`$shell-dark-header-color,`
327	`$shell-dark-header-height,`
328	`$shell-dark-header-background,`
329	`$shell-dark-header-divider,`
330	`$shell-dark-header-shadow,`
331	`$shell-dark-header-paddingLeft`
332	`);`
333
334	`#{$shell-prefix}-navigation {`
335	`@include shell-header-navigation(`
336	`$shell-dark-navigation-hoz-align,`
337	`$shell-dark-header-height,`
338	`$shell-dark-header-height,`
339	`$shell-dark-navigation-hoz-marginLeft`
340	`);`
341	`}`
342	`}`
343
344	`#{$shell-prefix}-task-header {`
345	`@include shell-task-header(`
346	`$shell-dark-multitask-min-height,`
347	`$shell-dark-multitask-background,`
348	`$shell-dark-multitask-divider,`
349	`$shell-dark-multitask-shadow,`
350	`$shell-dark-multitask-paddingLeft`
351	`);`
352	`}`
353
354	`#{$shell-prefix}-main {`
355	`background: $shell-dark-content-background;`
356
357	`#{$shell-prefix}-appbar {`
358	`@include shell-appbar(`
359	`$shell-dark-appbar-min-height,`
360	`$shell-dark-appbar-background,`
361	`$shell-dark-appbar-divider,`
362	`$shell-dark-appbar-shadow,`
363	`$shell-dark-appbar-paddingLeft`
364	`);`
365	`}`
366
367	`@include shell-content(`
368	`$shell-dark-content-paddingTop,`
369	`$shell-dark-content-paddingLeft,`
370	`$shell-dark-content-max-width,`
371	`$shell-dark-content-gutter-row,`
372	`$shell-dark-content-gutter-column,`
373	`$shell-dark-content-columns`
374	`);`
375
376	`#{$shell-prefix}-footer {`
377	`background: $shell-dark-footer-background;`
378	`min-height: $shell-dark-footer-min-height;`
379	`color: $shell-dark-footer-color;`
380	`font-size: $shell-dark-footer-font-size;`
381	`}`
382	`}`
383
384	`#{$shell-prefix}-aside {`
385	`&#{$shell-prefix}-navigation {`
386	`@include shell-navigation(`
387	`$shell-dark-navigation-ver-width,`
388	`$shell-dark-navigation-ver-background,`
389	`$shell-dark-navigation-ver-divider,`
390	`$shell-dark-navigation-ver-shadow,`
391	`$shell-dark-navigation-ver-paddingTop,`
392	`$shell-dark-navigation-ver-paddingBottom,`
393	`$shell-dark-navigation-ver-width-mini`
394	`);`
395	`}`
396	`&#{$shell-prefix}-tooldock {`
397	`@include shell-tooldock(`
398	`$shell-dark-tooldock-width,`
399	`$shell-dark-tooldock-background,`
400	`$shell-dark-tooldock-divider,`
401	`$shell-dark-tooldock-shadow,`
402	`$shell-dark-tooldock-paddingTop,`
403	`$shell-dark-tooldock-paddingBottom`
404	`);`
405	`}`
406	`#{$shell-prefix}-tooldockitem {`
407	`@include shell-tooldock-item(`
408	`$shell-dark-tooldock-item-paddingTop,`
409	`$shell-dark-tooldock-item-color,`
410	`$shell-dark-tooldock-item-background,`
411	`$shell-dark-tooldock-item-color-hover,`
412	`$shell-dark-tooldock-item-background-hover`
413	`);`
414	`}`
415	`#{$shell-prefix}-localnavigation {`
416	`@include shell-localnavigation(`
417	`$shell-dark-local-navigation-width,`
418	`$shell-dark-local-navigation-background,`
419	`$shell-dark-local-navigation-divider,`
420	`$shell-dark-local-navigation-shadow,`
421	`$shell-dark-local-navigation-paddingTop,`
422	`$shell-dark-local-navigation-paddingBottom`
423	`);`
424	`}`
425	`#{$shell-prefix}-ancillary {`
426	`@include shell-ancillary(`
427	`$shell-dark-ancillary-width,`
428	`$shell-dark-ancillary-background,`
429	`$shell-dark-ancillary-divider,`
430	`$shell-dark-ancillary-shadow,`
431	`$shell-dark-ancillary-paddingTop,`
432	`$shell-dark-ancillary-paddingBottom`
433	`);`
434	`}`
435	`}`
436	`}`
437
438	`&-brand {`
439	`@include shell-trigger-background(`
440	`$shell-brand-header-background,`
441	`$shell-brand-header-background,`
442	`$shell-brand-local-navigation-background,`
443	`$shell-brand-ancillary-background`
444	`);`
445
446	`#{$shell-prefix}-header {`
447	`@include shell-header-type(`
448	`$shell-brand-header-color,`
449	`$shell-brand-header-height,`
450	`$shell-brand-header-background,`
451	`$shell-brand-header-divider,`
452	`$shell-brand-header-shadow,`
453	`$shell-brand-header-paddingLeft`
454	`);`
455
456	`#{$shell-prefix}-navigation {`
457	`@include shell-header-navigation(`
458	`$shell-brand-navigation-hoz-align,`
459	`$shell-brand-header-height,`
460	`$shell-brand-header-height,`
461	`$shell-brand-navigation-hoz-marginLeft`
462	`);`
463	`}`
464	`}`
465
466	`#{$shell-prefix}-task-header {`
467	`@include shell-task-header(`
468	`$shell-brand-multitask-min-height,`
469	`$shell-brand-multitask-background,`
470	`$shell-brand-multitask-divider,`
471	`$shell-brand-multitask-shadow,`
472	`$shell-brand-multitask-paddingLeft`
473	`);`
474	`}`
475
476	`#{$shell-prefix}-main {`
477	`background: $shell-brand-content-background;`
478
479	`#{$shell-prefix}-appbar {`
480	`@include shell-appbar(`
481	`$shell-brand-appbar-min-height,`
482	`$shell-brand-appbar-background,`
483	`$shell-brand-appbar-divider,`
484	`$shell-brand-appbar-shadow,`
485	`$shell-brand-appbar-paddingLeft`
486	`);`
487	`}`
488
489	`@include shell-content(`
490	`$shell-brand-content-paddingTop,`
491	`$shell-brand-content-paddingLeft,`
492	`$shell-brand-content-max-width,`
493	`$shell-brand-content-gutter-row,`
494	`$shell-brand-content-gutter-column,`
495	`$shell-brand-content-columns`
496	`);`
497
498	`#{$shell-prefix}-footer {`
499	`background: $shell-brand-footer-background;`
500	`min-height: $shell-brand-footer-min-height;`
501	`color: $shell-brand-footer-color;`
502	`font-size: $shell-brand-footer-font-size;`
503	`}`
504	`}`
505
506	`#{$shell-prefix}-aside {`
507	`&#{$shell-prefix}-navigation {`
508	`@include shell-navigation(`
509	`$shell-brand-navigation-ver-width,`
510	`$shell-brand-navigation-ver-background,`
511	`$shell-brand-navigation-ver-divider,`
512	`$shell-brand-navigation-ver-shadow,`
513	`$shell-brand-navigation-ver-paddingTop,`
514	`$shell-brand-navigation-ver-paddingBottom,`
515	`$shell-brand-navigation-ver-width-mini`
516	`);`
517	`}`
518
519	`&#{$shell-prefix}-tooldock {`
520	`@include shell-tooldock(`
521	`$shell-brand-tooldock-width,`
522	`$shell-brand-tooldock-background,`
523	`$shell-brand-tooldock-divider,`
524	`$shell-brand-tooldock-shadow,`
525	`$shell-brand-tooldock-paddingTop,`
526	`$shell-brand-tooldock-paddingBottom`
527	`);`
528	`}`
529	`#{$shell-prefix}-tooldockitem {`
530	`@include shell-tooldock-item(`
531	`$shell-brand-tooldock-item-paddingTop,`
532	`$shell-brand-tooldock-item-color,`
533	`$shell-brand-tooldock-item-background,`
534	`$shell-brand-tooldock-item-color-hover,`
535	`$shell-brand-tooldock-item-background-hover`
536	`);`
537	`}`
538	`#{$shell-prefix}-localnavigation {`
539	`@include shell-localnavigation(`
540	`$shell-brand-local-navigation-width,`
541	`$shell-brand-local-navigation-background,`
542	`$shell-brand-local-navigation-divider,`
543	`$shell-brand-local-navigation-shadow,`
544	`$shell-brand-local-navigation-paddingTop,`
545	`$shell-brand-local-navigation-paddingBottom`
546	`);`
547	`}`
548	`#{$shell-prefix}-ancillary {`
549	`@include shell-ancillary(`
550	`$shell-brand-ancillary-width,`
551	`$shell-brand-ancillary-background,`
552	`$shell-brand-ancillary-divider,`
553	`$shell-brand-ancillary-shadow,`
554	`$shell-brand-ancillary-paddingTop,`
555	`$shell-brand-ancillary-paddingBottom`
556	`);`
557	`}`
558	`}`
559	`}`
560
561	`&-header #{$shell-prefix}-navigation {`
562	`&#{$shell-prefix}-nav-left {`
563	`justify-content: flex-start;`
564	`}`
565	`&#{$shell-prefix}-nav-right {`
566	`justify-content: flex-end;`
567	`}`
568	`&#{$shell-prefix}-nav-center {`
569	`justify-content: center;`
570	`}`
571	`}`
572
573	`&#{$shell-prefix}-phone {`
574	`.#{$css-prefix}aside-navigation {`
575	`width: 100%;`
576
577	`&#{$shell-prefix}-collapse {`
578	`width: 0;`
579	`}`
580	`}`
581	`#{$shell-prefix}-header #{$shell-prefix}-navigation {`
582	`display: none;`
583	`}`
584	`#{$shell-prefix}-navigation {`
585	`width: 100%;`
586	`height: 100%;`
587	`transition: height .2s $motion-ease;`
588	`&#{$shell-prefix}-collapse {`
589	`padding: 0;`
590	`height: 0;`
591	`transition: height .2s $motion-ease;`
592	`}`
593	`}`
594	`#{$shell-prefix}-tooldock {`
595	`height: $shell-dark-tooldock-height;`
596	`left: 0;`
597	`right: 0;`
598	`position: absolute;`
599	`width: 100%;`
600	`flex-direction: row;`
601	`justify-content: center;`
602	`&#{$shell-prefix}-collapse {`
603	`display: none;`
604	`height: 0;`
605	`padding: 0;`
606	`transition: all .2s $motion-ease;`
607	`}`
608	`}`
609	`}`
610
611	`&#{$shell-prefix}-tablet,`
612	`&#{$shell-prefix}-phone {`
613	`#{$shell-prefix}-aside.#{$css-prefix}aside-ancillary {`
614	`width: 0;`
615	`}`
616	`#{$shell-prefix}-ancillary {`
617	`transform: translateX(-100%);`
618	`}`
619	`#{$shell-prefix}-aside.#{$css-prefix}aside-localnavigation {`
620	`width: 0;`
621	`}`
622	`}`
623	`}`