Skip to content

Commit 3bd9643

Browse files
matmkianmatmkian
committed
chore: build dist
1 parent ecbf7ea commit 3bd9643

File tree

10 files changed

+24530
-6101
lines changed

10 files changed

+24530
-6101
lines changed

‎dist/lumx.css

Lines changed: 23746 additions & 5306 deletions
Large diffs are not rendered by default.

‎dist/lumx.js

Lines changed: 707 additions & 608 deletions
Large diffs are not rendered by default.

‎dist/lumx.min.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/lumx.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/lumx.min.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/scss/_lumx.scss renamed to ‎dist/scss/_lumx-lumapps.scss

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
1-
///* ========================================================================
2-
// #FRAMEWORK
3-
// ======================================================================== */
4-
51
$mdi-font-path: '../../node_modules/@mdi/font/fonts' !default;
62

73
@import 'bourbon';
84
@import 'materialdesignicons';
95
@import 'mq';
6+
@import 'core-lumapps';
7+
@import 'components-lumapps';
108
@import 'settings/settings.color-palette';
119
@import 'settings/settings.colors';
1210
@import 'settings/settings.core';

‎dist/scss/_lumx-material.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
@import 'core-material';
2+
@import 'components-material';
3+
@import 'lumx-lumapps';

‎dist/scss/modules/_button.scss

Lines changed: 56 additions & 161 deletions
Original file line numberDiff line numberDiff line change
@@ -1,152 +1,85 @@
1-
///*------------------------------------*\
2-
// #BUTTON
3-
//\*------------------------------------*/
1+
/* ==========================================================================
2+
Button
3+
========================================================================== */
4+
5+
$btn-emphasis-fallback: (
6+
'raised': 'emphasis-high',
7+
'flat': 'emphasis-low',
8+
'fab': 'emphasis-high',
9+
'icon': 'emphasis-low',
10+
);
11+
12+
$btn-size-fallback: (
13+
'xs': 's',
14+
's': 's',
15+
'm': 'm',
16+
'l': 'm',
17+
'xl': 'm',
18+
);
19+
20+
$btn-variant-fallback: (
21+
'raised': 'variant-button',
22+
'flat': 'variant-button',
23+
'fab': 'variant-icon',
24+
'icon': 'variant-icon',
25+
);
426

5-
// Button vars
6-
$btn-font-size: ('xs': 10px, 's': 13px, 'm': 14px, 'l': 16px, 'xl': 16px);
7-
$btn-icon-size: ('xs': 14px, 's': 18px, 'm': 20px, 'l': 24px, 'xl': 24px);
8-
$btn-fab-size: ('xs': 14px, 's': 18px, 'm': 20px, 'l': 20px, 'xl': 24px);
9-
10-
11-
12-
13-
14-
// Button mixins
1527
@mixin btn($size, $color, $type, $disabled: null) {
16-
@include btn-reset();
17-
18-
@if $disabled {
19-
@include btn-disabled($type);
20-
}
21-
28+
@include lumx-button-base;
29+
@include lumx-state-transition;
2230
@include btn-size($size, $type);
2331
@include btn-color($color, $type);
2432
@include btn-type($type);
2533
}
2634

2735
@mixin btn-size($size, $type: null) {
28-
line-height: map-get($sizes, $size);
29-
30-
@if $type == 'raised' or $type == 'flat' {
31-
min-width: 64px;
32-
@include font-size(map-get($btn-font-size, $size));
33-
}
34-
35-
@if $type == 'raised' {
36-
padding-left: $base-spacing-unit * 2;
37-
padding-right: $base-spacing-unit * 2;
38-
}
39-
40-
@if $type == 'flat' {
41-
padding-left: $base-spacing-unit;
42-
padding-right: $base-spacing-unit;
43-
}
44-
45-
@if $type == 'icon' or $type == 'fab' {
46-
@include size(map-get($sizes, $size));
36+
@include lumx-button-size(
37+
map-get($btn-emphasis-fallback, $type),
38+
map-get($btn-variant-fallback, $type),
39+
map-get($btn-size-fallback, $size)
40+
);
41+
42+
@if (map-get($btn-variant-fallback, $type) == 'variant-button') {
43+
@include lumx-button-text(map-get($btn-size-fallback, $size));
44+
pointer-events: visible;
45+
} @else {
46+
i {
47+
@include lumx-button-icon(variant-icon, position-left, map-get($btn-size-fallback, $size));
48+
}
4749
}
4850

49-
@if $type == 'icon' {
50-
@include font-size(map-get($btn-icon-size, $size));
51+
@if (map-get($btn-variant-fallback, $type) == 'variant-button') {
52+
@if (map-get($btn-emphasis-fallback, $type) == 'emphasis-high') {
53+
@if (map-get($btn-size-fallback, $size) == 'm') {
54+
padding: 0 $lumx-spacing-unit * 2;
55+
} @else {
56+
padding: 0 $lumx-spacing-unit * 1.5;
57+
}
58+
} @else {
59+
padding: 0 $lumx-spacing-unit;
60+
}
5161
}
5262

53-
@if $type == 'fab' {
54-
@include font-size(map-get($btn-fab-size, $size));
63+
.ripple {
64+
display: none;
5565
}
5666
}
5767

5868
@mixin btn-color($color, $type) {
59-
@if $type == 'raised' or $type == 'fab' {
60-
@if $color == 'white' or $color == 'light-blue' or $color == 'cyan' or $color == 'green' or $color == 'light-green' or $color == 'lime' or $color == 'yellow' or $color == 'amber' or $color == 'orange' or $color == 'grey' {
61-
color: $black-1;
62-
} @else {
63-
color: $white-1;
64-
}
65-
66-
background-color: map-get($colors, $color);
67-
68-
.ripple {
69-
z-index: -1;
70-
background-color: darken(map-get($colors, $color), 50%);
71-
}
72-
}
73-
74-
@if $type == 'flat' or $type == 'icon' {
75-
color: map-get($colors, $color);
76-
77-
.ripple {
78-
z-index: -1;
79-
background-color: map-get($colors, $color);
80-
}
81-
82-
&:hover {
83-
background-color: rgba(map-get($colors, $color), 0.12);
84-
}
85-
}
69+
@include lumx-button-color(map-get($btn-emphasis-fallback, $type), $color, dark);
8670
}
8771

8872
@mixin btn-type($type) {
89-
@if $type == 'raised' or $type == 'flat' {
90-
border-radius: $base-round;
91-
font-weight: 500;
92-
text-transform: uppercase;
93-
}
94-
95-
@if $type == 'raised' or $type == 'fab' {
96-
@include transition-property(box-shadow);
97-
@include transition-duration(0.2s);
98-
}
99-
100-
@if $type == 'raised' {
101-
@include elevation(2);
102-
103-
&:active {
104-
@include elevation(8);
105-
}
106-
}
107-
108-
@if $type == 'fab' {
109-
@include elevation(6);
110-
111-
&:active {
112-
@include elevation(12);
113-
}
114-
}
115-
116-
@if $type == 'flat' or $type == 'icon' {
117-
@include transition-property(background-color);
118-
@include transition-duration(0.2s);
119-
}
120-
121-
@if $type == 'icon' or $type == 'fab' {
122-
border-radius: 50%;
123-
}
12473
}
12574

12675
@mixin btn-disabled($type) {
127-
box-shadow: none !important;
128-
cursor: not-allowed !important;
129-
color: $black-3 !important;
130-
131-
@if $type == 'raised' or $type == 'fab' {
132-
background-color: $grey-300 !important;
133-
}
134-
135-
@if $type == 'flat' or $type == 'icon' {
136-
background-color: transparent !important;
137-
}
13876
}
13977

140-
141-
142-
143-
144-
// Button base styles
14578
.btn {
146-
@include btn-reset();
79+
@include lumx-button-base;
80+
@include lumx-state-transition;
14781
}
14882

149-
// Size
15083
@each $key, $size in $sizes {
15184
.btn--raised.btn--#{$key} {
15285
@include btn-size($key, 'raised');
@@ -165,8 +98,7 @@ $btn-fab-size: ('xs': 14px, 's': 18px, 'm': 20px, 'l': 20px, 'xl': 24px);
16598
}
16699
}
167100

168-
// Color
169-
@each $key, $color in $colors {
101+
@each $key, $color in $lumx-theme-color-palette {
170102
.btn--raised.btn--#{$key} {
171103
@include btn-color($key, 'raised');
172104
}
@@ -183,40 +115,3 @@ $btn-fab-size: ('xs': 14px, 's': 18px, 'm': 20px, 'l': 20px, 'xl': 24px);
183115
@include btn-color($key, 'fab');
184116
}
185117
}
186-
187-
// Type
188-
.btn--raised {
189-
@include btn-type('raised');
190-
191-
&[disabled],
192-
&.btn--is-disabled {
193-
@include btn-disabled('raised');
194-
}
195-
}
196-
197-
.btn--flat {
198-
@include btn-type('flat');
199-
200-
&[disabled],
201-
&.btn--is-disabled {
202-
@include btn-disabled('flat');
203-
}
204-
}
205-
206-
.btn--icon {
207-
@include btn-type('icon');
208-
209-
&[disabled],
210-
&.btn--is-disabled {
211-
@include btn-disabled('icon');
212-
}
213-
}
214-
215-
.btn--fab {
216-
@include btn-type('fab');
217-
218-
&[disabled],
219-
&.btn--is-disabled {
220-
@include btn-disabled('fab');
221-
}
222-
}

‎webpack/webpack.dev.js

Lines changed: 9 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
const IS_CI = require('is-ci');
2-
var glob = require('glob');
2+
const glob = require('glob');
33

44
const merge = require('webpack-merge');
55

@@ -13,13 +13,10 @@ const { DEFAULT_HOST, DEFAULT_PORT, DEMO_PATH, ROOT_PATH } = require('./constant
1313
const baseConfig = require('./webpack.config');
1414

1515
const entry = Object.assign(baseConfig.entry, {
16-
'app': `${DEMO_PATH}/app.js`,
17-
'modules': [...glob.sync(`${DEMO_PATH}/includes/modules/**/*.js`)],
16+
app: `${DEMO_PATH}/app.js`,
17+
modules: [...glob.sync(`${DEMO_PATH}/includes/modules/**/*.js`)],
1818
});
19-
entry.lumx = [
20-
...entry.lumx,
21-
`${DEMO_PATH}/scss/lumx.scss`,
22-
];
19+
entry.lumx = [...entry.lumx, `${DEMO_PATH}/scss/lumx.scss`];
2320

2421
const plugins = [
2522
...baseConfig.plugins,
@@ -51,7 +48,7 @@ module.exports = merge.smartStrategy({
5148

5249
devServer: {
5350
compress: true,
54-
contentBase: [DEMO_PATH, ROOT_PATH],
51+
contentBase: [DEMO_PATH, ROOT_PATH],
5552
disableHostCheck: true,
5653
headers: {
5754
'Access-Control-Allow-Headers': '*',
@@ -62,16 +59,16 @@ module.exports = merge.smartStrategy({
6259
},
6360
host: DEFAULT_HOST,
6461
hot: true,
65-
open: true,
66-
overlay: true,
62+
open: true,
63+
overlay: true,
6764
// eslint-disable-next-line no-magic-numbers
6865
port: DEFAULT_PORT,
6966
quiet: true,
70-
},
67+
},
7168

7269
module: {
7370
rules: getStyleLoader({ mode: 'dev' }),
74-
},
71+
},
7572

7673
plugins,
7774
});

‎webpack/webpack.prod.js

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -20,11 +20,8 @@ const generatePackage = Boolean(process.env.GENERATE_PACKAGE);
2020
const filename = `[name]${minify ? '.min' : ''}`;
2121
const distTechPath = `${DIST_PATH}`;
2222

23-
const entry = baseConfig.entry;
24-
entry.lumx = [
25-
`${CORE_PATH}/scss/_lumx.scss`,
26-
...entry.lumx,
27-
];
23+
const { entry } = baseConfig;
24+
entry.lumx = [`${CORE_PATH}/scss/_lumx-lumapps.scss`, `${CORE_PATH}/scss/_lumx-material.scss`, ...entry.lumx];
2825

2926
const minimizer = [];
3027
const plugins = [
@@ -62,7 +59,7 @@ if (generatePackage) {
6259
from: `${MODULES_PATH}/**/*.scss`,
6360
to: `${DIST_PATH}/scss/modules`,
6461
flatten: true,
65-
},
62+
},
6663
]),
6764
);
6865
}
@@ -93,7 +90,7 @@ module.exports = merge.smartStrategy({
9390
bail: true,
9491
devtool: minify ? 'source-map' : '',
9592
mode: 'production',
96-
name: `lumx-umd${minify ? '-minified' : ''}`,
93+
name: `lumx-umd${minify ? '-minified' : ''}`,
9794

9895
entry,
9996

0 commit comments

Comments
 (0)