Skip to content

Commit 9905403

Browse files
javivelascojavivelasco
committed
Do not include commons in app wrapper
1 parent b12bf6e commit 9905403

File tree

5 files changed

+91
-78
lines changed

5 files changed

+91
-78
lines changed

‎components/_globals.scss

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@ $color-accent-contrast: $color-dark-contrast !default;
1717
$unit: 1rem;
1818

1919
// -- Fonts
20-
$font-roboto-url: "https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" !default;
2120
$font-icon-url: "https://fonts.googleapis.com/icon?family=Material+Icons" !default;
2221
$preferred-font: "Roboto", "Helvetica", "Arial", sans-serif !default;
2322
$font-size: 1.6 * $unit !default;

‎components/app/style.scss

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
@import "../commons";
2-
31
.root {
42
position: absolute;
53
top: 0;

‎components/commons.scss

Lines changed: 86 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,15 @@
1-
@import "~normalize.css";
2-
@import "./base";
3-
@import url($font-roboto-url);
1+
$import-normalize: true !default;
2+
$import-font: true !default;
3+
$import-flex-attributes: false !default;
4+
$font-roboto-url: "https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" !default;
5+
6+
@if $import-normalize == true {
7+
@import "~normalize.css";
8+
}
9+
10+
@if $import-font == true {
11+
@import url($font-roboto-url);
12+
}
413

514
html {
615
font-size: 62.5%;
@@ -93,97 +102,99 @@ p {
93102
@include typo-body-1;
94103
}
95104

96-
//-- Flex
97-
[data-flex] {
98-
display: flex;
99-
}
105+
@if $import-flex-attributes == true {
106+
//-- Flex
107+
[data-flex] {
108+
display: flex;
109+
}
100110

101-
body[data-flex] {
102-
position: absolute;
103-
top: 0;
104-
bottom: 0;
105-
left: 0;
106-
width: 100%;
107-
overflow: hidden;
108-
}
111+
body[data-flex] {
112+
position: absolute;
113+
top: 0;
114+
bottom: 0;
115+
left: 0;
116+
width: 100%;
117+
overflow: hidden;
118+
}
109119

110-
// -- Direction
111-
[data-flex^="horizontal"] {
112-
flex-direction: row;
113-
}
120+
// -- Direction
121+
[data-flex^="horizontal"] {
122+
flex-direction: row;
123+
}
114124

115-
[data-flex^="vertical"] {
116-
flex-direction: column;
117-
}
125+
[data-flex^="vertical"] {
126+
flex-direction: column;
127+
}
118128

119129

120-
// -- Size {
121-
[data-flex*="grow"] {
122-
> *:not([data-column]):not([data-flex-grow]) {
123-
flex-grow: 1;
130+
// -- Size {
131+
[data-flex*="grow"] {
132+
> *:not([data-column]):not([data-flex-grow]) {
133+
flex-grow: 1;
134+
}
124135
}
125-
}
126136

127-
[data-flex-grow="min"] {
128-
flex-grow: 0;
129-
}
137+
[data-flex-grow="min"] {
138+
flex-grow: 0;
139+
}
130140

131-
[data-flex-grow="max"] {
132-
flex-grow: 2;
133-
}
141+
[data-flex-grow="max"] {
142+
flex-grow: 2;
143+
}
134144

135-
// -- Container properties
136-
[data-flex*="wrap"] {
137-
flex-wrap: wrap;
138-
}
145+
// -- Container properties
146+
[data-flex*="wrap"] {
147+
flex-wrap: wrap;
148+
}
139149

140-
[data-flex*="center"] {
141-
align-content: center;
142-
align-items: center;
143-
justify-content: center;
144-
}
150+
[data-flex*="center"] {
151+
align-content: center;
152+
align-items: center;
153+
justify-content: center;
154+
}
145155

146-
[data-flex-justify="start"] {
147-
justify-content: flex-start;
148-
}
156+
[data-flex-justify="start"] {
157+
justify-content: flex-start;
158+
}
149159

150-
[data-flex-justify="center"] {
151-
justify-content: center;
152-
}
160+
[data-flex-justify="center"] {
161+
justify-content: center;
162+
}
153163

154-
[data-flex-justify="end"] {
155-
justify-content: flex-end;
156-
}
164+
[data-flex-justify="end"] {
165+
justify-content: flex-end;
166+
}
157167

158-
[data-flex-content="start"] {
159-
align-content: flex-start;
160-
}
168+
[data-flex-content="start"] {
169+
align-content: flex-start;
170+
}
161171

162-
[data-flex-content="center"] {
163-
align-content: center;
164-
}
172+
[data-flex-content="center"] {
173+
align-content: center;
174+
}
165175

166-
[data-flex-content="end"] {
167-
align-content: flex-end;
168-
}
176+
[data-flex-content="end"] {
177+
align-content: flex-end;
178+
}
169179

170-
[data-flex-items="center"] {
171-
align-items: center;
172-
}
180+
[data-flex-items="center"] {
181+
align-items: center;
182+
}
173183

174-
[data-flex-items="start"] {
175-
align-items: flex-start;
176-
}
184+
[data-flex-items="start"] {
185+
align-items: flex-start;
186+
}
177187

178-
[data-flex-items="end"] {
179-
align-items: flex-end;
180-
}
188+
[data-flex-items="end"] {
189+
align-items: flex-end;
190+
}
181191

182-
// -- Children properties
183-
[data-flex-order="first"] {
184-
order: -1;
185-
}
192+
// -- Children properties
193+
[data-flex-order="first"] {
194+
order: -1;
195+
}
186196

187-
[data-flex-order="last"] {
188-
order: 999999;
197+
[data-flex-order="last"] {
198+
order: 999999;
199+
}
189200
}

‎docs/app/components/_globals.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@import "~react-toolbox/base";
2+
@import "~react-toolbox/commons";
23

34
$unit: 1rem;
45
$color-primary-dark: unquote("rgb(#{$color-primary-dark})");

‎spec/style.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
1+
$import-normalize: false;
2+
$import-flex-attributes: true;
3+
14
@import "../components/base";
5+
@import "../components/commons";
26
@import "../components/app_bar/config";
37
@import "../components/button/config";
48

0 commit comments

Comments
 (0)