lumina-sass 2.0.0 → 2.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "lumina-sass",
3
- "version": "2.0.0",
3
+ "version": "2.0.2",
4
4
  "description": "Lumina Sass design tokens and mixins",
5
5
  "main": "src/_index.sass",
6
6
  "sass": "src/_index.sass",
@@ -34,7 +34,8 @@
34
34
  "serve": "http-server demo",
35
35
  "release": "standard-version",
36
36
  "dev": "npm run build && npm run serve",
37
- "build": "sass demo/style.sass demo/style.css",
37
+ "build:demo": "sass demo/style.sass demo/style.css",
38
+ "build": "sass src/_index.sass test/index.css && sass src/color/_index.sass test/color.css && sass src/mix/_index.sass test/mix.css && sass src/flexbox/_index.sass test/flexbox.css && sass src/flexbox/_index.sass test/flexbox.css",
38
39
  "test": "echo \"Error: no test specified\" && exit 1"
39
40
  },
40
41
  "files": [
package/src/_index.sass CHANGED
@@ -1,4 +1,7 @@
1
1
  @forward 'mix'
2
2
  @forward 'color'
3
3
  @forward 'flexbox'
4
- @forward 'utils/flexbox'
4
+
5
+ *, *::before, *::after
6
+ box-sizing: border-box
7
+ writing-mode: horizontal-tb
@@ -25,6 +25,6 @@
25
25
  align-items: flex-end
26
26
  @include mix.flexbox-generator('flex-col')
27
27
 
28
- .flex-wrap-col-ontent-center
28
+ .flex-wrap-col-content-center
29
29
  align-content: center
30
30
  @include mix.flexbox-generator('flex-wrap-col')
@@ -1,21 +1,21 @@
1
1
  @use '../mix/index' as mix
2
2
 
3
- .flex-row-reversed-justify-center-content-center
3
+ .flex-row-reversed-content-center-justify-center
4
4
  align-content: center
5
5
  justify-content: center
6
6
  @include mix.flexbox-generator('flex-wrap-reversed-row')
7
7
 
8
- .flex-row-reversed-justify-around-content-center
8
+ .flex-row-reversed-content-center-justify-around
9
9
  align-content: center
10
10
  justify-content: space-around
11
11
  @include mix.flexbox-generator('flex-wrap-reversed-row')
12
12
 
13
- .flex-row-reversed-justify-between-content-center
13
+ .flex-row-reversed-content-center-justify-between
14
14
  align-content: center
15
15
  justify-content: space-between
16
16
  @include mix.flexbox-generator('flex-wrap-reversed-row')
17
17
 
18
- .flex-row-reversed-justify-evenly-content-center
18
+ .flex-row-reversed-content-center-justify-evenly
19
19
  align-content: center
20
20
  justify-content: space-evenly
21
21
  @include mix.flexbox-generator('flex-wrap-reversed-row')
@@ -23,7 +23,7 @@
23
23
  justify-content: center
24
24
  @include mix.flexbox-generator('flex-row')
25
25
 
26
- .flex-row-items-center-justify-content-space-between
26
+ .flex-row-items-center-justify-content-between
27
27
  align-items: center
28
28
  justify-content: space-between
29
29
  @include mix.flexbox-generator('flex-row')
@@ -32,7 +32,8 @@
32
32
  justify-content: center
33
33
  @include mix.flexbox-generator('flex-row')
34
34
 
35
- .flex-row-items-center
35
+
36
+ .flex-row-items-center-justify-center
36
37
  align-items: center
37
- @include mix.flexbox-generator('flex-row')
38
-
38
+ justify-content: center
39
+ @include mix.flexbox-generator('flex-row')
@@ -25,7 +25,6 @@
25
25
  @include mix.flexbox-generator('flex-wrap-row')
26
26
 
27
27
  // Align items
28
-
29
28
  .flex-wrap-row-items-end
30
29
  align-items: flex-end
31
30
  @include mix.flexbox-generator('flex-wrap-row')
@@ -1,41 +1,45 @@
1
1
  @use '../mix/index' as mix
2
2
 
3
- @forward '../flexbox/flexbox-row'
4
- @forward '../flexbox/flexbox-column'
5
- @forward '../flexbox/flexbox-wrap-row'
6
- @forward '../flexbox/flexbox-reversed-row'
7
- @forward '../flexbox/row-align-justify-mix/flexbox-wrap-row-align-justify'
3
+ @forward 'flexbox-row'
4
+ @forward 'flexbox-column'
5
+ @forward 'flexbox-wrap-row'
6
+ @forward 'flexbox-reversed-row'
8
7
  @forward 'column-align-justify-mix/column-justify-items'
8
+ @forward 'row-align-justify-mix/flex-wrap-row-items-justify'
9
+ @forward 'row-align-justify-mix/flex-wrap-row-content-justify'
9
10
 
10
11
  .flex
11
12
  @include mix.flexbox-generator('flex')
12
13
 
13
- .flex-center
14
- @include mix.flexbox-generator('flex-center')
15
-
16
14
  .flex-row
17
15
  @include mix.flexbox-generator('flex-row')
18
16
 
19
17
  .flex-col
20
18
  @include mix.flexbox-generator('flex-col')
21
19
 
20
+ .inline-flex
21
+ @include mix.flexbox-generator('inline-flex')
22
+
22
23
  .flex-wrap-row
23
24
  @include mix.flexbox-generator('flex-wrap-row')
24
25
 
25
26
  .flex-wrap-col
26
27
  @include mix.flexbox-generator('flex-wrap-col')
27
28
 
29
+ .inline-flex-row
30
+ @include mix.flexbox-generator('inline-flex-row')
31
+
32
+ .inline-flex-col
33
+ @include mix.flexbox-generator('inline-flex-col')
34
+
28
35
  .flex-wrap-reversed-row
29
36
  @include mix.flexbox-generator('flex-wrap-reversed-row')
30
37
 
31
38
  .flex-wrap-reversed-column
32
39
  @include mix.flexbox-generator('flex-wrap-reversed-column')
33
40
 
34
- .inline-flex
35
- @include mix.flexbox-generator('inline-flex')
36
-
37
- .inline-flex-row
38
- @include mix.flexbox-generator('inline-flex-row')
39
41
 
40
- .inline-flex-col
41
- @include mix.flexbox-generator('inline-flex-col')
42
+ .flex-row-items-center-justify-center
43
+ align-items: center
44
+ justify-content: center
45
+ @include mix.flexbox-generator('flex-row')
@@ -1,11 +1,11 @@
1
1
  // Align-content and Justify-content gen
2
2
  @use '../../mix/index' as gen
3
3
 
4
- .flex-col-align-items-center
4
+ .flex-col-items-center
5
5
  align-items: center
6
6
  @include gen.flexbox-generator('flex-col')
7
7
 
8
- .flex-col-justify-evenly-items-center
8
+ .flex-col-items-center-justify-evenly
9
9
  align-items: center
10
10
  justify-content: space-evenly
11
11
  @include gen.flexbox-generator('flex-col')
@@ -13,5 +13,4 @@
13
13
  .flex-col-items-center-justify-center
14
14
  align-items: center
15
15
  justify-content: center
16
- @include gen.flexbox-generator('flex-col')
17
-
16
+ @include gen.flexbox-generator('flex-col')
@@ -0,0 +1,11 @@
1
+ @use '../../mix/index' as mix
2
+
3
+ .flex-wrap-row-content-start-justify-evenly
4
+ align-content: flex-start
5
+ justify-content: space-evenly
6
+ @include mix.flexbox-generator('flex-wrap-row')
7
+
8
+ .flex-wrap-row-content-center-justify-evenly
9
+ align-content: center
10
+ justify-content: space-evenly
11
+ @include mix.flexbox-generator('flex-wrap-row')
@@ -4,10 +4,6 @@
4
4
  align-items: flex-start
5
5
  @include mix.flexbox-generator('flex-wrap-row')
6
6
 
7
- .flex-wrap-row-content-start-justify-evenly
8
- align-content: flex-start
9
- justify-content: space-evenly
10
- @include mix.flexbox-generator('flex-wrap-row')
11
7
 
12
8
  .flex-wrap-row-items-center-justify-center
13
9
  align-items: center
@@ -29,7 +25,7 @@
29
25
  justify-content: space-between
30
26
  @include mix.flexbox-generator('flex-wrap-row')
31
27
 
32
- .flex-wrap-row-align-items-end-justify-between
28
+ .flex-wrap-row-items-end-justify-between
33
29
  align-items: flex-end
34
30
  justify-content: space-between
35
31
  @include mix.flexbox-generator('flex-wrap-row')
@@ -37,4 +33,4 @@
37
33
  .flex-wrap-row-items-end-justify-evenly
38
34
  align-items: flex-end
39
35
  justify-content: space-evenly
40
- @include mix.flexbox-generator('flex-wrap-row')
36
+ @include mix.flexbox-generator('flex-wrap-row')
@@ -1,33 +1,26 @@
1
1
  $flex: ('display': flex)
2
2
  $inline-flex: ('display': inline-flex)
3
3
  $flex-row: ('display': flex, 'flex-wrap': nowrap, 'flex-direction': row)
4
- $flex-row-wrap: ('display': flex, 'flex-wrap': wrap, 'flex-direction': row)
4
+ $flex-wrap-row: ('display': flex, 'flex-wrap': wrap, 'flex-direction': row)
5
5
  $flex-col: ('display': flex, 'flex-wrap': nowrap, 'flex-direction': column)
6
- $flex-col-wrap: ('display': flex, 'flex-wrap': wrap, 'flex-direction': column)
7
- $flex-center: ('display': flex, 'justify-content': center, 'align-items': center)
6
+ $flex-wrap-col: ('display': flex, 'flex-wrap': wrap, 'flex-direction': column)
8
7
  $inline-flex-row: ('flex-wrap': nowrap, 'flex-direction': row, 'display': inline-flex)
9
8
  $inline-flex-col: ('flex-wrap': nowrap, 'display': inline-flex, 'flex-direction': column)
10
9
  $flex-wrap-reversed-row: ('display': flex, 'flex-wrap': wrap, 'flex-direction': row-reverse)
11
10
  $flex-wrap-reversed-col: ('display': flex, 'flex-wrap': wrap, 'flex-direction': column-reverse)
12
11
 
13
- $flex-col-align-center-justify-center: ('display': flex, 'flex-direction': column, 'justify-content': center, 'align-items': center)
14
- $flex-row-align-center-justify-center: ('display': flex, 'flex-direction': row, 'justify-content': center, 'align-items': center)
12
+
15
13
 
16
14
  $flexbox:(
17
15
  'flex': $flex,
18
16
  'flex-row': $flex-row,
19
- 'flex-row-wrap': $flex-row-wrap,
20
- 'flex-wrap-row': $flex-row-wrap,
21
- 'flex-center': $flex-center,
22
- 'flex-col': $flex-col,
23
- 'flex-col-wrap': $flex-col-wrap,
24
- 'flex-wrap-col': $flex-col-wrap,
25
- 'flex-wrap-reversed-col': $flex-wrap-reversed-col,
26
- 'flex-wrap-reversed-column': $flex-wrap-reversed-col,
27
- 'inline-flex': $inline-flex,
17
+ 'flex-col': $flex-col,
18
+ 'inline-flex': $inline-flex,
19
+ 'flex-wrap-row': $flex-wrap-row,
20
+ 'flex-wrap-col': $flex-wrap-col,
28
21
  'inline-flex-row': $inline-flex-row,
29
22
  'inline-flex-col': $inline-flex-col,
30
23
  'flex-wrap-reversed-row': $flex-wrap-reversed-row,
31
- 'flex-col-align-center-justify-center': $flex-col-align-center-justify-center,
32
- 'flex-row-align-center-justify-center': $flex-row-align-center-justify-center,
24
+ 'flex-wrap-reversed-col': $flex-wrap-reversed-col,
25
+ 'flex-wrap-reversed-column': $flex-wrap-reversed-col,
33
26
  )
@@ -1,29 +0,0 @@
1
- @use '../mix/index' as mix
2
-
3
- @forward '../flexbox/flexbox-row'
4
- @forward '../flexbox/flexbox-column'
5
- @forward '../flexbox/flexbox-wrap-row'
6
- @forward '../flexbox/flexbox-reversed-row'
7
- @forward '../flexbox/row-align-justify-mix/flexbox-wrap-row-align-justify'
8
- @forward '../flexbox/column-align-justify-mix/column-justify-items'
9
-
10
- .flex
11
- @include mix.flexbox-generator('flex')
12
-
13
- .flex-row
14
- @include mix.flexbox-generator('flex-row')
15
-
16
- .flex-row-wrap
17
- @include mix.flexbox-generator('flex-row-wrap')
18
-
19
- .flex-col
20
- @include mix.flexbox-generator('flex-col')
21
-
22
- .flex-col-wrap
23
- @include mix.flexbox-generator('flex-col-wrap')
24
-
25
- .flex-col-align-center-justify-center
26
- @include mix.flexbox-generator('flex-col-align-center-justify-center')
27
-
28
- .flex-row-align-center-justify-center
29
- @include mix.flexbox-generator('flex-row-align-center-justify-center')