@festo-ui/web-essentials 4.0.3-pre-20221213.1 → 5.0.0-dev.19

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.
Files changed (76) hide show
  1. package/README.md +73 -73
  2. package/dist/css/festo-web-essentials.css +500 -3316
  3. package/dist/css/festo-web-essentials.css.map +1 -1
  4. package/dist/css/festo-web-essentials.min.css +3 -3
  5. package/dist/css/festo-web-essentials.min.css.map +1 -1
  6. package/dist/css/organisms/festo-web-essentials-organisms.css +8 -15
  7. package/dist/css/organisms/festo-web-essentials-organisms.css.map +1 -1
  8. package/dist/css/organisms/festo-web-essentials-organisms.min.css +1 -1
  9. package/dist/css/organisms/festo-web-essentials-organisms.min.css.map +1 -1
  10. package/dist/css/themes/flatpickr/festo.css +3 -18
  11. package/dist/css/themes/flatpickr/festo.css.map +1 -1
  12. package/dist/css/themes/flatpickr/festo.min.css +2 -2
  13. package/dist/css/themes/flatpickr/festo.min.css.map +1 -1
  14. package/dist/scss/_breadcrumb.scss +37 -37
  15. package/dist/scss/_button.scss +128 -128
  16. package/dist/scss/_cards.scss +98 -98
  17. package/dist/scss/_checkbox.scss +153 -153
  18. package/dist/scss/_chips.scss +145 -145
  19. package/dist/scss/_fonts.scss +59 -59
  20. package/dist/scss/_icons.scss +1446 -1446
  21. package/dist/scss/_loading-indicator.scss +176 -176
  22. package/dist/scss/_mobile-flyout.scss +108 -108
  23. package/dist/scss/_navbar-menu.scss +351 -351
  24. package/dist/scss/_navbar.scss +258 -258
  25. package/dist/scss/_popover.scss +201 -201
  26. package/dist/scss/_progressbar.scss +67 -67
  27. package/dist/scss/_radio.scss +152 -152
  28. package/dist/scss/_root.scss +111 -111
  29. package/dist/scss/_search-input.scss +92 -92
  30. package/dist/scss/_select.scss +95 -95
  31. package/dist/scss/_stepper-horizontal.scss +127 -127
  32. package/dist/scss/_stepper-vertical.scss +121 -121
  33. package/dist/scss/_table.scss +150 -150
  34. package/dist/scss/_timepicker.scss +68 -68
  35. package/dist/scss/_tree.scss +211 -211
  36. package/dist/scss/_variables.scss +252 -252
  37. package/dist/scss/festo-web-essentials.scss +1 -1
  38. package/dist/scss/organisms/_footer.scss +142 -142
  39. package/dist/scss/organisms/_header-slider.scss +153 -153
  40. package/dist/scss/organisms/_image-gallery.scss +257 -257
  41. package/dist/scss/organisms/_login.scss +57 -57
  42. package/dist/scss/organisms/_side-menu.scss +54 -54
  43. package/dist/scss/organisms/festo-web-essentials-organisms.scss +15 -15
  44. package/dist/scss/themes/flatpickr/festo.scss +834 -834
  45. package/package.json +88 -9
  46. package/scss/_breadcrumb.scss +37 -37
  47. package/scss/_button.scss +128 -128
  48. package/scss/_cards.scss +98 -98
  49. package/scss/_checkbox.scss +153 -153
  50. package/scss/_chips.scss +145 -145
  51. package/scss/_fonts.scss +59 -59
  52. package/scss/_icons.scss +1446 -1446
  53. package/scss/_loading-indicator.scss +176 -176
  54. package/scss/_mobile-flyout.scss +108 -108
  55. package/scss/_navbar-menu.scss +351 -351
  56. package/scss/_navbar.scss +258 -258
  57. package/scss/_popover.scss +201 -201
  58. package/scss/_progressbar.scss +67 -67
  59. package/scss/_radio.scss +152 -152
  60. package/scss/_root.scss +111 -111
  61. package/scss/_search-input.scss +92 -92
  62. package/scss/_select.scss +95 -95
  63. package/scss/_stepper-horizontal.scss +127 -127
  64. package/scss/_stepper-vertical.scss +121 -121
  65. package/scss/_table.scss +150 -150
  66. package/scss/_timepicker.scss +68 -68
  67. package/scss/_tree.scss +211 -211
  68. package/scss/_variables.scss +252 -252
  69. package/scss/festo-web-essentials.scss +1 -1
  70. package/scss/organisms/_footer.scss +142 -142
  71. package/scss/organisms/_header-slider.scss +153 -153
  72. package/scss/organisms/_image-gallery.scss +257 -257
  73. package/scss/organisms/_login.scss +57 -57
  74. package/scss/organisms/_side-menu.scss +54 -54
  75. package/scss/organisms/festo-web-essentials-organisms.scss +15 -15
  76. package/scss/themes/flatpickr/festo.scss +834 -834
package/README.md CHANGED
@@ -1,74 +1,74 @@
1
- # FESTO UI
2
-
3
- ## Web Essentials - Digital Styleguide
4
-
5
- Welcome to the CSS component framework of Festo for web developers!
6
- Here you’ll find components that have been implemented by the specification of the Design department.
7
- The library contains everything you need to build great projects in the design of Festo.
8
- Showcases, components, templates and much more, containing the digital essentials of the Festo Brand.
9
-
10
- The Web Essentials project is the base layer for all Festo web developments in the form of a CSS framework.
11
- It is written in SCSS and brings you all the features you need to quickstart your next web project.
12
- For example it contains a responsive grid layout, icons, form controls and many more.
13
- This framework comes with no javascript at all so you can use it with the javascript framework of your choice.
14
-
15
- We are also providing [examples](https://github.com/Festo-se/festo-ui-examples) that you can use as a quickstart for your next Festo web application.
16
- Let us know if you have a demand for a specific example and we will see what we can do.
17
-
18
- ### Angular & React
19
-
20
- We love [Angular](https://storybook--610a420ed778290041e03230.chromatic.com) and [React](https://storybook--610a422cd778290041e033a7.chromatic.com) at Festo.
21
- That's why we deliver component libraries for both frameworks based on the Web Essentials ([@festo-ui/angular](https://www.npmjs.com/package/@festo-ui/angular) and [@festo-ui/react](https://www.npmjs.com/package/@festo-ui/react)).
22
- These libraries extend the basic HTML controls of the Web Essentials with enhanced (non-basic) features.
23
- For example Checkboxes with indeterminate state or sortable table headings.
24
-
25
- ## Getting started
26
-
27
- Festo Web Essentials comes as a NPM package.
28
- Oh you don't know NPM? Then you must start a bit further at [Node.js](https://nodejs.org).
29
-
30
- ### Install
31
-
32
- Installing the libraries is very easy. Just use this command to install the Web Essentials to your project:
33
-
34
- `npm install @festo-ui/web-essentials`
35
-
36
- If you just need the static CSS resources then you can find them inside the `dist` directory.
37
-
38
- Import the css like this:
39
-
40
- ```css
41
- ... @import '~@festo-ui/web-essentials/dist/css/festo-web-essentials.min.css' ...;
42
- ```
43
-
44
- ### Using the SCSS variables in your project
45
-
46
- If you want to use the variables (color or more) from the web essentials library, you can add the scss resources.
47
-
48
- You'll find them inside the directory `node_modules/@festo-ui/web-essentials/scss`.
49
-
50
- You can use the variables like this:
51
- `example.scss`
52
-
53
- ```scss
54
- @import '~@festo-ui/web-essentials/scss/variables';
55
-
56
- background: $hero; // background is carul now
57
- @extend .fwe-icon-menu-close; // add the menu-close icon as ::before element
58
- ```
59
-
60
- ## Using Web Essentials with local fonts
61
-
62
- If you want to use Web Essentials in an __offline__ environment, you have to provide local files for the Festo font.
63
- * Download the required fonts here: https://festo.sharepoint.com/sites/tggfw/SitePages/Font-Richtlinie.aspx
64
- * Override the css variable for the font:
65
- ```scss
66
- @font-face {
67
- font-family: "localMeta";
68
- src: url("../src/fonts/MetaChinese.woff") format("woff"), url("../src/fonts/MetaChinese.woff2") format("woff2");
69
- }
70
-
71
- :root {
72
- --fwe-font-family-sans-serif: "localMeta";
73
- }
1
+ # FESTO UI
2
+
3
+ ## Web Essentials - Digital Styleguide
4
+
5
+ Welcome to the CSS component framework of Festo for web developers!
6
+ Here you’ll find components that have been implemented by the specification of the Design department.
7
+ The library contains everything you need to build great projects in the design of Festo.
8
+ Showcases, components, templates and much more, containing the digital essentials of the Festo Brand.
9
+
10
+ The Web Essentials project is the base layer for all Festo web developments in the form of a CSS framework.
11
+ It is written in SCSS and brings you all the features you need to quickstart your next web project.
12
+ For example it contains a responsive grid layout, icons, form controls and many more.
13
+ This framework comes with no javascript at all so you can use it with the javascript framework of your choice.
14
+
15
+ We are also providing [examples](https://github.com/Festo-se/festo-ui-examples) that you can use as a quickstart for your next Festo web application.
16
+ Let us know if you have a demand for a specific example and we will see what we can do.
17
+
18
+ ### Angular & React
19
+
20
+ We love [Angular](https://storybook--610a420ed778290041e03230.chromatic.com) and [React](https://storybook--610a422cd778290041e033a7.chromatic.com) at Festo.
21
+ That's why we deliver component libraries for both frameworks based on the Web Essentials ([@festo-ui/angular](https://www.npmjs.com/package/@festo-ui/angular) and [@festo-ui/react](https://www.npmjs.com/package/@festo-ui/react)).
22
+ These libraries extend the basic HTML controls of the Web Essentials with enhanced (non-basic) features.
23
+ For example Checkboxes with indeterminate state or sortable table headings.
24
+
25
+ ## Getting started
26
+
27
+ Festo Web Essentials comes as a NPM package.
28
+ Oh you don't know NPM? Then you must start a bit further at [Node.js](https://nodejs.org).
29
+
30
+ ### Install
31
+
32
+ Installing the libraries is very easy. Just use this command to install the Web Essentials to your project:
33
+
34
+ `npm install @festo-ui/web-essentials`
35
+
36
+ If you just need the static CSS resources then you can find them inside the `dist` directory.
37
+
38
+ Import the css like this:
39
+
40
+ ```css
41
+ ... @import '~@festo-ui/web-essentials/dist/css/festo-web-essentials.min.css' ...;
42
+ ```
43
+
44
+ ### Using the SCSS variables in your project
45
+
46
+ If you want to use the variables (color or more) from the web essentials library, you can add the scss resources.
47
+
48
+ You'll find them inside the directory `node_modules/@festo-ui/web-essentials/scss`.
49
+
50
+ You can use the variables like this:
51
+ `example.scss`
52
+
53
+ ```scss
54
+ @import '~@festo-ui/web-essentials/scss/variables';
55
+
56
+ background: $hero; // background is carul now
57
+ @extend .fwe-icon-menu-close; // add the menu-close icon as ::before element
58
+ ```
59
+
60
+ ## Using Web Essentials with local fonts
61
+
62
+ If you want to use Web Essentials in an __offline__ environment, you have to provide local files for the Festo font.
63
+ * Download the required fonts here: https://festo.sharepoint.com/sites/tggfw/SitePages/Font-Richtlinie.aspx
64
+ * Override the css variable for the font:
65
+ ```scss
66
+ @font-face {
67
+ font-family: "localMeta";
68
+ src: url("../src/fonts/MetaChinese.woff") format("woff"), url("../src/fonts/MetaChinese.woff2") format("woff2");
69
+ }
70
+
71
+ :root {
72
+ --fwe-font-family-sans-serif: "localMeta";
73
+ }
74
74
  ```