@things-factory/operato-fleet 7.0.1-alpha.99 → 7.0.1-beta.0

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/_index.html CHANGED
@@ -69,7 +69,8 @@
69
69
  line-height: 1.5;
70
70
  -webkit-font-smoothing: antialiased;
71
71
 
72
- accent-color: var(--primary-color);
72
+ accent-color: var(--md-sys-color-primary);
73
+ background-color: var(--md-sys-color-background);
73
74
  }
74
75
  </style>
75
76
 
@@ -8,7 +8,7 @@ export class FleetItem extends LitElement {
8
8
  css`
9
9
  :host {
10
10
  font-size: 12px;
11
- color: var(--secondary-color);
11
+ color: var(--md-sys-color-secondary);
12
12
  }
13
13
 
14
14
  [first-line] {
@@ -30,12 +30,12 @@ export class FleetSearch extends connect(store)(localize(i18next)(LitElement)) {
30
30
  display: flex;
31
31
  flex-direction: column;
32
32
  overflow: hidden;
33
- background-color: var(--main-section-background-color);
33
+ background-color: var(--md-sys-color-background);
34
34
  border-right: 1px solid rgba(0, 0, 0, 0.2);
35
35
  }
36
36
 
37
37
  [search-result] {
38
- background-color: #fff;
38
+ background-color: var(--md-sys-color-surface);
39
39
  border: 1px solid rgba(0, 0, 0, 0.1);
40
40
  border-width: 1px 0;
41
41
  padding: 3px 0 3px 7px;
@@ -52,13 +52,13 @@ export class FleetSearch extends connect(store)(localize(i18next)(LitElement)) {
52
52
  }
53
53
 
54
54
  li {
55
- background-color: #fff;
55
+ background-color: var(--md-sys-color-surface);
56
56
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
57
57
  padding: 10px 7px 7px 10px;
58
58
  }
59
59
 
60
60
  [active] {
61
- background-color: var(--primary-color);
61
+ background-color: var(--md-sys-color-primary);
62
62
  }
63
63
 
64
64
  [active] * {
@@ -7,7 +7,7 @@ export class GeofenceItem extends LitElement {
7
7
  css`
8
8
  :host {
9
9
  font-size: 12px;
10
- color: var(--secondary-color);
10
+ color: var(--md-sys-color-secondary);
11
11
  }
12
12
 
13
13
  [first-line] {
@@ -17,13 +17,13 @@ export class GeofenceSearch extends LitElement {
17
17
  display: flex;
18
18
  flex-direction: column;
19
19
  overflow: hidden;
20
- background-color: var(--main-section-background-color);
20
+ background-color: var(--md-sys-color-background);
21
21
  box-shadow: inset 2px 0px 3px 0px rgba(0, 0, 0, 0.15);
22
22
  border-right: 1px solid rgba(0, 0, 0, 0.2);
23
23
  }
24
24
 
25
25
  [search-result] {
26
- background-color: #fff;
26
+ background-color: var(--md-sys-color-surface);
27
27
  border: 1px solid rgba(0, 0, 0, 0.1);
28
28
  border-width: 1px 0;
29
29
  padding: 3px 0 3px 7px;
@@ -38,13 +38,13 @@ export class GeofenceSearch extends LitElement {
38
38
  }
39
39
 
40
40
  li {
41
- background-color: #fff;
41
+ background-color: var(--md-sys-color-surface);
42
42
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
43
43
  padding: 10px 7px 7px 10px;
44
44
  }
45
45
 
46
46
  [active] {
47
- background-color: var(--primary-color);
47
+ background-color: var(--md-sys-color-primary);
48
48
  }
49
49
  [active] * {
50
50
  color: #fff !important;
@@ -8,7 +8,7 @@ export const FMSPageStyles = css`
8
8
  /* grist의 수평 스크롤이 나오도록 */
9
9
  overflow: hidden;
10
10
 
11
- --mdc-theme-primary: var(--secondary-color);
11
+ --mdc-theme-primary: var(--md-sys-color-secondary);
12
12
  }
13
13
 
14
14
  [main] {
@@ -39,7 +39,7 @@ export const FMSPageStyles = css`
39
39
 
40
40
  [search] {
41
41
  --mdc-text-field-fill-color: transparent;
42
- --mdc-text-field-ink-color: var(--secondary-color);
42
+ --mdc-text-field-ink-color: var(--md-sys-color-secondary);
43
43
 
44
44
  display: flex;
45
45
  flex-direction: row;
@@ -48,7 +48,7 @@ export const FMSPageStyles = css`
48
48
  justify-content: flex-start;
49
49
  padding: 5px 15px;
50
50
  box-shadow: inset 0px 3px 3px 0px rgba(0, 0, 0, 0.2);
51
- background-color: var(--main-section-background-color);
51
+ background-color: var(--md-sys-color-background);
52
52
  }
53
53
 
54
54
  [search] * {
@@ -14,7 +14,7 @@ class MapMode extends LitElement {
14
14
 
15
15
  margin: 10px;
16
16
  padding-right: 12px;
17
- background-color: #fff;
17
+ background-color: var(--md-sys-color-surface);
18
18
  box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;
19
19
  }
20
20
  mwc-radio {
@@ -10,7 +10,7 @@ export const ReportStyles = css`
10
10
  /* grist의 수평 스크롤이 나오도록 */
11
11
  overflow: hidden;
12
12
 
13
- --mdc-theme-primary: var(--secondary-color);
13
+ --mdc-theme-primary: var(--md-sys-color-secondary);
14
14
  }
15
15
 
16
16
  ox-grist {
@@ -21,7 +21,7 @@ export const ReportStyles = css`
21
21
 
22
22
  [search] {
23
23
  --mdc-text-field-fill-color: transparent;
24
- --mdc-text-field-ink-color: var(--secondary-color);
24
+ --mdc-text-field-ink-color: var(--md-sys-color-secondary);
25
25
 
26
26
  display: flex;
27
27
  flex-direction: row;
@@ -30,7 +30,7 @@ export const ReportStyles = css`
30
30
  justify-content: flex-start;
31
31
  padding: 5px 15px;
32
32
  box-shadow: inset 0px 3px 3px 0px rgba(0, 0, 0, 0.2);
33
- background-color: var(--main-section-background-color);
33
+ background-color: var(--md-sys-color-background);
34
34
  }
35
35
 
36
36
  [search] * {
@@ -5,13 +5,12 @@ body {
5
5
  --secondary-color-rgb: 52, 69, 99;
6
6
  --secondary-color: rgb(var(--secondary-color-rgb));
7
7
  --focus-color: var(--theme-white-color);
8
- --primary-background-color: var(--secondary-color);
8
+ --primary-background-color: var(--md-sys-color-secondary);
9
9
  --secondary-background-color: #283644;
10
- --main-section-background-color: #edf5fd;
11
10
  --theme-white-color: #fff;
12
11
  --theme-black-color: rgba(0, 0, 0, 0.9);
13
12
 
14
- --focus-background-color: var(--primary-color);
13
+ --focus-background-color: var(--md-sys-color-primary);
15
14
  --primary-text-color: #111;
16
15
  --secondary-text-color: #3a4868;
17
16
 
@@ -41,7 +40,7 @@ body {
41
40
  --padding-wide: var(--margin-wide);
42
41
 
43
42
  --scrollbar-thumb-color: rgba(57, 78, 100, 0.5);
44
- --scrollbar-thumb-hover-color: var(--primary-color);
43
+ --scrollbar-thumb-hover-color: var(--md-sys-color-primary);
45
44
 
46
45
  --fontsize-default: 14px;
47
46
  --fontsize-small: 13px;
@@ -53,7 +52,7 @@ body {
53
52
  /* title & description style */
54
53
  --title-margin: var(--margin-narrow) 0;
55
54
  --title-font: bold 24px var(--theme-font);
56
- --title-text-color: var(--secondary-color);
55
+ --title-text-color: var(--md-sys-color-secondary);
57
56
  --title-font-mobile: bold 20px var(--theme-font);
58
57
 
59
58
  --page-description-margin: var(--margin-narrow) 0 var(--margin-wide) 0;
@@ -62,8 +61,8 @@ body {
62
61
 
63
62
  --subtitle-padding: 12px 5px 3px 5px;
64
63
  --subtitle-font: bold 18px var(--theme-font);
65
- --subtitle-text-color: var(--primary-color);
66
- --subtitle-border-bottom: 1px solid var(--primary-color);
64
+ --subtitle-text-color: var(--md-sys-color-primary);
65
+ --subtitle-border-bottom: 1px solid var(--md-sys-color-primary);
67
66
 
68
67
  /* icon style */
69
68
  --icon-tiny-size: 24px;
@@ -75,21 +74,21 @@ body {
75
74
  --mdc-theme-on-primary: var(--theme-white-color);
76
75
  --mdc-theme-primary: var(--secondary-text-color);
77
76
  --mdc-theme-on-secondary: var(--theme-white-color);
78
- --mdc-theme-secondary: var(--primary-color);
79
- --mdc-button-outline-color: var(--primary-color);
77
+ --mdc-theme-secondary: var(--md-sys-color-primary);
78
+ --mdc-button-outline-color: var(--md-sys-color-primary);
80
79
  --mdc-danger-button-primary-color: var(--status-danger-color);
81
80
  --mdc-danger-button-outline-color: var(--status-danger-color);
82
81
  --mdc-button-outline-width: 1px;
83
82
  --mdc-button-horizontal-padding: 16px;
84
83
 
85
- --md-fab-container-color: var(--primary-color);
84
+ --md-fab-container-color: var(--md-sys-color-primary);
86
85
  --md-fab-icon-color: var(--focus-color);
87
86
 
88
87
  --md-theme-on-primary: var(--theme-white-color);
89
88
  --md-theme-primary: var(--secondary-text-color);
90
89
  --md-theme-on-secondary: var(--theme-white-color);
91
- --md-theme-secondary: var(--primary-color);
92
- --md-button-outline-color: var(--primary-color);
90
+ --md-theme-secondary: var(--md-sys-color-primary);
91
+ --md-button-outline-color: var(--md-sys-color-primary);
93
92
  --md-danger-button-primary-color: var(--status-danger-color);
94
93
  --md-danger-button-outline-color: var(--status-danger-color);
95
94
  --md-button-outline-width: 1px;
@@ -101,16 +100,16 @@ body {
101
100
  --button-border-radius: var(--border-radius);
102
101
  --button-margin: var(--margin-default) var(--margin-default) var(--margin-default) 0;
103
102
  --button-padding: calc(var(--padding-narrow) * 1.5) var(--padding-wide);
104
- --button-color: var(--secondary-color);
103
+ --button-color: var(--md-sys-color-secondary);
105
104
  --button-font: 600 var(--fontsize-default) var(--theme-font);
106
105
  --button-text-transform: capitalize;
107
106
  --button-active-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.2);
108
- --button-activ-border: 1px solid var(--primary-color);
109
- --button-activ-background-color: var(--primary-color);
107
+ --button-activ-border: 1px solid var(--md-sys-color-primary);
108
+ --button-activ-background-color: var(--md-sys-color-primary);
110
109
  --button-activ-color: var(--theme-white-color);
111
110
  --iconbtn-padding: var(--padding-narrow);
112
111
 
113
- --button-primary-background-color: var(--primary-color);
112
+ --button-primary-background-color: var(--md-sys-color-primary);
114
113
  --button-primary-active-background-color: var(--status-success-color);
115
114
  --button-primary-padding: var(--margin-default) var(--margin-wide);
116
115
  --button-primary-color: var(--theme-white-color);
@@ -118,25 +117,25 @@ body {
118
117
 
119
118
  /* table style */
120
119
  --th-padding: var(--padding-default);
121
- --th-border-top: 2px solid var(--secondary-color);
120
+ --th-border-top: 2px solid var(--md-sys-color-secondary);
122
121
  --th-text-transform: capitalize;
123
122
  --th-font: bold var(--fontsize-small) var(--theme-font);
124
123
  --th-color: rgba(var(--secondary-color-rgb), 0.8);
125
124
 
126
- --tr-background-color: var(--theme-white-color);
125
+ --tr-background-color: var(--md-sys-color-surface-variant);
127
126
  --tr-background-odd-color: rgba(255, 255, 255, 0.4);
128
127
  --tr-background-hover-color: #e1f5fe;
129
128
  --td-border-line: 1px solid rgba(0, 0, 0, 0.05);
130
129
  --td-border-bottom: 1px solid rgba(0, 0, 0, 0.09);
131
130
  --td-padding: var(--padding-default);
132
131
  --td-font: normal 13px var(--theme-font);
133
- --td-color: var(--secondary-color);
132
+ --td-color: var(--md-sys-color-secondary);
134
133
 
135
134
  --label-cell-background-color: #f6f6f6; /* th or td common background color */
136
135
 
137
136
  /* form style */
138
137
  --label-font: normal var(--fontsize-default) var(--theme-font);
139
- --label-color: var(--secondary-color);
138
+ --label-color: var(--md-sys-color-on-surface);
140
139
  --label-text-transform: capitalize;
141
140
  --input-margin: var(--margin-narrow) 0;
142
141
  --input-padding: 6px 2px;
@@ -1,10 +1,10 @@
1
1
  body {
2
- --report-background-color: var(--main-section-background-color);
2
+ --report-background-color: var(--md-sys-color-background);
3
3
  --report-padding: 15px;
4
4
  --report-title-margin: 0 0 0 10px;
5
5
  --report-title-border: none;
6
- --report-title-color: var(--secondary-color);
7
- --report-title-icon-color: var(--primary-color);
6
+ --report-title-color: var(--md-sys-color-secondary);
7
+ --report-title-icon-color: var(--md-sys-color-primary);
8
8
  --report-title-icon-margin: 0 3px 2px 0;
9
9
  --report-title-icon-size: 14px;
10
10
  --report-title-with-grid-padding: 0;
@@ -30,7 +30,7 @@ export class MenuTools extends connect(store)(LitElement) {
30
30
  css`
31
31
  :host {
32
32
  display: flex;
33
- background-color: var(--secondary-color);
33
+ background-color: var(--md-sys-color-secondary);
34
34
 
35
35
  /* for narrow mode */
36
36
  flex-direction: column;