@operato/context 2.0.0-alpha.64 → 2.0.0-alpha.65

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 (40) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/dist/src/layouts/ox-context-toolbar.js +49 -58
  3. package/dist/src/layouts/ox-context-toolbar.js.map +1 -1
  4. package/dist/src/tools/ox-page-action-context-bar.js +20 -23
  5. package/dist/src/tools/ox-page-action-context-bar.js.map +1 -1
  6. package/dist/stories/ox-context-page-toolbar-select-buttons.stories.js +1 -1
  7. package/dist/stories/ox-context-page-toolbar-select-buttons.stories.js.map +1 -1
  8. package/dist/stories/ox-context-page-toolbar-select.stories.js +1 -1
  9. package/dist/stories/ox-context-page-toolbar-select.stories.js.map +1 -1
  10. package/dist/stories/ox-context-page-toolbar.stories.js +1 -1
  11. package/dist/stories/ox-context-page-toolbar.stories.js.map +1 -1
  12. package/dist/stories/ox-context-toolbar-complex-2.stories.d.ts +19 -0
  13. package/dist/stories/ox-context-toolbar-complex-2.stories.js +136 -0
  14. package/dist/stories/ox-context-toolbar-complex-2.stories.js.map +1 -0
  15. package/dist/stories/ox-context-toolbar-complex.stories copy.d.ts +19 -0
  16. package/dist/stories/ox-context-toolbar-complex.stories copy.js +146 -0
  17. package/dist/stories/ox-context-toolbar-complex.stories copy.js.map +1 -0
  18. package/dist/stories/ox-context-toolbar-complex.stories.d.ts +19 -0
  19. package/dist/stories/ox-context-toolbar-complex.stories.js +146 -0
  20. package/dist/stories/ox-context-toolbar-complex.stories.js.map +1 -0
  21. package/dist/stories/ox-context-toolbar-overflow.stories.d.ts +19 -0
  22. package/dist/stories/ox-context-toolbar-overflow.stories.js +127 -0
  23. package/dist/stories/ox-context-toolbar-overflow.stories.js.map +1 -0
  24. package/dist/stories/ox-context-toolbar.stories copy.d.ts +19 -0
  25. package/dist/stories/ox-context-toolbar.stories copy.js +82 -0
  26. package/dist/stories/ox-context-toolbar.stories copy.js.map +1 -0
  27. package/dist/stories/ox-context-toolbar.stories.d.ts +1 -6
  28. package/dist/stories/ox-context-toolbar.stories.js +23 -31
  29. package/dist/stories/ox-context-toolbar.stories.js.map +1 -1
  30. package/dist/tsconfig.tsbuildinfo +1 -1
  31. package/package.json +2 -2
  32. package/src/layouts/ox-context-toolbar.ts +49 -58
  33. package/src/tools/ox-page-action-context-bar.ts +20 -23
  34. package/stories/ox-context-page-toolbar-select-buttons.stories.ts +1 -1
  35. package/stories/ox-context-page-toolbar-select.stories.ts +1 -1
  36. package/stories/ox-context-page-toolbar.stories.ts +1 -1
  37. package/stories/ox-context-toolbar-complex.stories.ts +158 -0
  38. package/stories/ox-context-toolbar-overflow.stories.ts +139 -0
  39. package/stories/ox-context-toolbar.stories.ts +24 -34
  40. package/themes/context-theme.css +74 -0
package/themes/context-theme.css ADDED
@@ -0,0 +1,74 @@
1
+ body {
2
+ --context-toolbar-background-color: var(--main-section-background-color);
3
+ --context-toolbar-button-background-color: #fff;
4
+ --context-toolbar-border: 1px solid rgba(57, 78, 100, 0.5);
5
+ --context-toolbar-border-hover: 1px solid var(--primary-color);
6
+ --context-toolbar-button-max-width: auto;
7
+ --context-toolbar-button-height: 36px;
8
+ --context-toolbar-button-margin: var(--margin-narrow) 0 var(--margin-wide) 0;
9
+ --context-toolbar-button-padding: 0 9px;
10
+ --context-toolbar-button: normal 13px var(--theme-font);
11
+ --context-toolbar-button-color: var(--secondary-color);
12
+ --context-toolbar-iconbutton-color: var(--primary-text-color);
13
+ --context-toolbar-iconbutton-size: 16px;
14
+ --context-toolbar-function-button-height: 34px;
15
+ --context-toolbar-function-button-radius: 5px;
16
+ --context-toolbar-function-button-background-color: #446281;
17
+ --context-toolbar-function-button-hover-background-color: var(--primary-color);
18
+ --context-toolbar-function-iconbutton-size: 28px;
19
+ --context-toolbar-function-iconbutton-color: var(--primary-background-color);
20
+ --context-toolbar-function-button-lineheight: 36px;
21
+ --context-toolbar-function-button-color: #fff;
22
+ --context-toolbar-function-button-padding: 0 10px;
23
+ --context-toolbar-function-button-border: 1px solid rgba(0, 0, 0, 0.1);
24
+ --context-toolbar-list-background-color: var(--primary-background-color);
25
+ --context-toolbar-list-text: bold 18px var(--theme-font);
26
+ --context-toolbar-list-icon-size: var(--icon-default-size);
27
+ --context-toolbar-side-padding: 15px;
28
+ --context-toolbar-shadow-line: none;
29
+ --context-toolbar-title: bold 19px var(--theme-font);
30
+
31
+ --context-ui-background-color: rgba(40, 54, 68, 0.9);
32
+ --context-ui-box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.2);
33
+ --context-ui-border-radius: 10px;
34
+ --context-ui-padding: 10px;
35
+ --context-ui-list-color: #d0fdee;
36
+ --context-ui-list-border-bottom: 1px solid rgba(0, 0, 0, 0.3);
37
+ --context-ui-list-border-hover-bottom: 1px solid var(--primary-color);
38
+ --context-ui-list-padding: 5px;
39
+ --context-ui-button-color: var(--secondary-text-color);
40
+ --context-ui-button-hover-color: #fff;
41
+ --context-ui-button-background-color: #fff;
42
+ --context-ui-button-background-hover-color: var(--primary-color);
43
+
44
+ --context-action-bar-button-margin: var(--margin-narrow) 0 var(--margin-wide) var(--margin-narrow);
45
+ --context-action-bar-more-button-background-color: var(--context-ui-background-color);
46
+ --context-action-bar-more-button-padding: 6px var(--padding-default);
47
+ --context-action-bar-more-button-color: var(--theme-white-color);
48
+ --context-action-bar-more-button-border-radius: 4px;
49
+ }
50
+
51
+ @media only screen and (max-width: 460px) {
52
+ body {
53
+ --context-toolbar-button: normal 9px var(--theme-font);
54
+ --context-toolbar-button-max-width: 60px;
55
+ --context-toolbar-button-height: 50px;
56
+ --context-toolbar-iconbutton-size: 30px;
57
+ --context-toolbar-border: none;
58
+ --context-toolbar-border-hover: none;
59
+ --context-toolbar-iconbutton-display: block;
60
+ --context-toolbar-iconbutton-margin: -2px;
61
+ --context-toolbar-button-background-color: transparent;
62
+ --context-toolbar-button-margin: 0;
63
+ --context-toolbar-function-button-height: 34px;
64
+ --context-toolbar-function-button-lineheight: 34px;
65
+ --context-toolbar-function-button-radius: 0;
66
+ --context-toolbar-side-padding: 0;
67
+ --context-toolbar-shadow-line: inset 0px 2px 2px 0px rgba(0, 0, 0, 0.1);
68
+ --context-toolbar-button-padding: 0 10px 0 0;
69
+
70
+ --context-action-bar-button-margin: 0;
71
+ --context-action-bar-more-button-border-radius: 0;
72
+ --context-action-bar-more-button-padding: 6px var(--padding-wide);
73
+ }
74
+ }