1 | @charset "UTF-8";
|
2 |
|
3 | @mixin shell-header-type(
|
4 | $color,
|
5 | $height,
|
6 | $background,
|
7 | $divider,
|
8 | $shadow,
|
9 | $paddingLeft
|
10 | ) {
|
11 | color: $color;
|
12 | height: $height;
|
13 | background: $background;
|
14 | border-bottom: $divider;
|
15 | box-shadow: $shadow;
|
16 | padding: 0 $paddingLeft;
|
17 | }
|
18 |
|
19 | @mixin shell-header-navigation(
|
20 | $direction,
|
21 | $height,
|
22 | $lineHight,
|
23 | $paddingLeft
|
24 | ) {
|
25 | justify-content: $direction;
|
26 | height: $height;
|
27 | line-height: $lineHight;
|
28 | margin: 0 $paddingLeft;
|
29 | }
|
30 |
|
31 | @mixin shell-task-header(
|
32 | $min-height,
|
33 | $background,
|
34 | $divider,
|
35 | $shadow,
|
36 | $paddingLeft
|
37 | ) {
|
38 | width: 100%;
|
39 | min-height: $min-height;
|
40 | background: $background;
|
41 | border-bottom: $divider;
|
42 | box-shadow: $shadow;
|
43 | padding: 0 $paddingLeft;
|
44 | overflow: auto;
|
45 | }
|
46 |
|
47 | @mixin shell-appbar(
|
48 | $min-height,
|
49 | $background,
|
50 | $divider,
|
51 | $shadow,
|
52 | $paddingLeft
|
53 | ) {
|
54 | min-height: $min-height;
|
55 | background: $background;
|
56 | border-bottom: $divider;
|
57 | box-shadow: $shadow;
|
58 | padding: 0 $paddingLeft;
|
59 | }
|
60 |
|
61 | @mixin shell-content(
|
62 | $paddingTop,
|
63 | $paddingLeft,
|
64 | $max-width,
|
65 | $gutter-row,
|
66 | $gutter-column,
|
67 | $columns
|
68 | ) {
|
69 | #{$shell-prefix}-content {
|
70 | padding: $paddingTop $paddingLeft;
|
71 | }
|
72 |
|
73 |
|
74 |
|
75 |
|
76 |
|
77 |
|
78 |
|
79 | }
|
80 |
|
81 | @mixin shell-trigger-background(
|
82 | $nav-trigger-bg,
|
83 | $dock-trigger-bg,
|
84 | $local-nav-trigger-bg,
|
85 | $ancillary-trigger-bg
|
86 | ) {
|
87 | #{$shell-prefix}-header {
|
88 | .dock-trigger,
|
89 | .nav-trigger {
|
90 | background: $nav-trigger-bg;
|
91 | }
|
92 | }
|
93 |
|
94 | #{$shell-prefix}-aside {
|
95 | .local-nav-trigger {
|
96 | background: $local-nav-trigger-bg;
|
97 | }
|
98 | .ancillary-trigger {
|
99 | background: $ancillary-trigger-bg;
|
100 | }
|
101 | }
|
102 | }
|
103 |
|
104 | @mixin shell-navigation(
|
105 | $width,
|
106 | $background,
|
107 | $divider,
|
108 | $shadow,
|
109 | $paddingTop,
|
110 | $paddingBottom,
|
111 | $width-mini
|
112 | ) {
|
113 | width: $width;
|
114 | background: $background;
|
115 | border-right: $divider;
|
116 | box-shadow: $shadow;
|
117 | padding: $paddingTop 0 $paddingBottom;
|
118 |
|
119 | &#{$shell-prefix}-collapse#{$shell-prefix}-mini {
|
120 | width: $width-mini;
|
121 | }
|
122 |
|
123 | &#{$shell-prefix}-collapse {
|
124 | width: 0;
|
125 | }
|
126 | }
|
127 |
|
128 | @mixin shell-tooldock(
|
129 | $width,
|
130 | $background,
|
131 | $divider,
|
132 | $shadow,
|
133 | $paddingTop,
|
134 | $paddingBottom
|
135 | ) {
|
136 | width: $width;
|
137 | background: $background;
|
138 | border-left: $divider;
|
139 | box-shadow: $shadow;
|
140 | padding: $paddingTop 0 $paddingBottom;
|
141 | }
|
142 |
|
143 | @mixin shell-tooldock-item(
|
144 | $paddingTop,
|
145 | $color,
|
146 | $background,
|
147 | $color-hover,
|
148 | $background-hover
|
149 | ) {
|
150 | padding: $paddingTop 0;
|
151 | color: $color;
|
152 | background: $background;
|
153 |
|
154 | &:hover {
|
155 | color: $color-hover;
|
156 | background: $background-hover;
|
157 | }
|
158 | }
|
159 |
|
160 | @mixin shell-localnavigation(
|
161 | $width,
|
162 | $background,
|
163 | $divider,
|
164 | $shadow,
|
165 | $paddingTop,
|
166 | $paddingBottom
|
167 | ) {
|
168 | width: $width;
|
169 | background: $background;
|
170 | border-right: $divider;
|
171 | box-shadow: $shadow;
|
172 | padding: $paddingTop 0 $paddingBottom;
|
173 | &#{$shell-prefix}-collapse {
|
174 | width: 0;
|
175 | }
|
176 | }
|
177 |
|
178 | @mixin shell-ancillary(
|
179 | $width,
|
180 | $background,
|
181 | $divider,
|
182 | $shadow,
|
183 | $paddingTop,
|
184 | $paddingBottom
|
185 | ) {
|
186 | width: $width;
|
187 | background: $background;
|
188 | border-left: $divider;
|
189 | box-shadow: $shadow;
|
190 | padding: $paddingTop 0 $paddingBottom;
|
191 | &#{$shell-prefix}-collapse {
|
192 | width: 0;
|
193 | }
|
194 | }
|