@selco/installation-ui-css 1.0.3 → 1.0.5
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/dist/index.css +182 -23
- package/dist/index.min.css +2 -2
- package/package.json +1 -1
- package/src/digitv2/index.scss +6 -1
- package/src/index.scss +17 -14
- package/src/pages/employee/projectdetailstable.scss +203 -0
- package/src/pages/employee/reverseactionbar.scss +18 -0
package/package.json
CHANGED
package/src/digitv2/index.scss
CHANGED
package/src/index.scss
CHANGED
|
@@ -115,6 +115,7 @@
|
|
|
115
115
|
@import "./pages/employee/searchaction.scss";
|
|
116
116
|
@import "./pages/employee/customcheckbox.scss";
|
|
117
117
|
@import "./pages/employee/reverseactionbar.scss";
|
|
118
|
+
@import "./pages/employee/projectdetailstable.scss";
|
|
118
119
|
|
|
119
120
|
.wbh-header-container {
|
|
120
121
|
display: flex !important;
|
|
@@ -688,6 +689,7 @@ input[type="number"] {
|
|
|
688
689
|
}
|
|
689
690
|
.employee-app-wrapper {
|
|
690
691
|
min-height: calc(100vh - 8em);
|
|
692
|
+
margin: 0;
|
|
691
693
|
}
|
|
692
694
|
|
|
693
695
|
.ws-custom-wrapper {
|
|
@@ -817,20 +819,6 @@ input[type="number"] {
|
|
|
817
819
|
justify-content: space-between;
|
|
818
820
|
flex-direction: row-reverse;
|
|
819
821
|
}
|
|
820
|
-
.previous-button {
|
|
821
|
-
width: 100%;
|
|
822
|
-
}
|
|
823
|
-
@media (min-width: 640px) {
|
|
824
|
-
.previous-button{
|
|
825
|
-
width: 240px;
|
|
826
|
-
}
|
|
827
|
-
}
|
|
828
|
-
@media (min-width: 48rem) {
|
|
829
|
-
.previous-button{
|
|
830
|
-
margin-left: 4rem;
|
|
831
|
-
width: 240px;
|
|
832
|
-
}
|
|
833
|
-
}
|
|
834
822
|
.view-composer-header-section{
|
|
835
823
|
display: flex;
|
|
836
824
|
justify-content: space-between;
|
|
@@ -878,4 +866,19 @@ input[type="number"] {
|
|
|
878
866
|
.digit-popup-children-wrap{
|
|
879
867
|
overflow: visible !important;
|
|
880
868
|
}
|
|
869
|
+
}
|
|
870
|
+
|
|
871
|
+
.digit-bread-crumb--item{
|
|
872
|
+
.digit-bread-crumb-seperator{
|
|
873
|
+
color: #0B0C0C
|
|
874
|
+
}
|
|
875
|
+
}
|
|
876
|
+
|
|
877
|
+
.digit-multiselectdropdown-wrap {
|
|
878
|
+
.digit-multiselectdropodwn-menuitem {
|
|
879
|
+
.digit-label.selectAll {
|
|
880
|
+
font-size: 16px;
|
|
881
|
+
text-decoration: underline;
|
|
882
|
+
}
|
|
883
|
+
}
|
|
881
884
|
}
|
|
@@ -0,0 +1,203 @@
|
|
|
1
|
+
$primary-blue: #1976d2;
|
|
2
|
+
$primary-blue-dark: #1565c0;
|
|
3
|
+
$border-color: #e0e0e0;
|
|
4
|
+
$text-primary: #333333;
|
|
5
|
+
$text-secondary: #666666;
|
|
6
|
+
$background-white: white;
|
|
7
|
+
$background-gray: #f8f9fa;
|
|
8
|
+
$background-hover: #f0f7ff;
|
|
9
|
+
$background-action: #e3f2fd;
|
|
10
|
+
$font-family: Roboto;
|
|
11
|
+
$border-radius: 10px;
|
|
12
|
+
$box-shadow: 1px 1px 4px 0px rgba(0,0,0,0.2);
|
|
13
|
+
|
|
14
|
+
@mixin flex-center {
|
|
15
|
+
display: flex;
|
|
16
|
+
align-items: center;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
@mixin hover-transition {
|
|
20
|
+
transition: background-color 0.2s ease;
|
|
21
|
+
|
|
22
|
+
&:hover {
|
|
23
|
+
background-color: $background-hover;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
@mixin cell-padding {
|
|
28
|
+
padding: 16px 18px;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.project-details-table {
|
|
32
|
+
display: flex;
|
|
33
|
+
overflow-x: auto;
|
|
34
|
+
overflow-y: visible;
|
|
35
|
+
box-shadow: $box-shadow;
|
|
36
|
+
width: 100%;
|
|
37
|
+
|
|
38
|
+
.table {
|
|
39
|
+
width: 100%;
|
|
40
|
+
min-width: fit-content;
|
|
41
|
+
border-collapse: collapse;
|
|
42
|
+
font-family: $font-family;
|
|
43
|
+
font-size: 14px;
|
|
44
|
+
background-color: $background-white;
|
|
45
|
+
border: 1px solid $border-color;
|
|
46
|
+
|
|
47
|
+
thead {
|
|
48
|
+
th {
|
|
49
|
+
background-color: #EEEEEE;
|
|
50
|
+
color: #0B4B66;
|
|
51
|
+
font-weight: 600;
|
|
52
|
+
text-align: left;
|
|
53
|
+
@include cell-padding;
|
|
54
|
+
font-size: 16px;
|
|
55
|
+
line-height: 18px;
|
|
56
|
+
position: relative;
|
|
57
|
+
|
|
58
|
+
&:not(:last-child)::after {
|
|
59
|
+
content: '';
|
|
60
|
+
position: absolute;
|
|
61
|
+
right: 0;
|
|
62
|
+
top: 8px;
|
|
63
|
+
bottom: 8px;
|
|
64
|
+
width: 1px;
|
|
65
|
+
background-color: #787878;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
&[style*="min-width: 100px"] {
|
|
69
|
+
text-align: center;
|
|
70
|
+
width: 60px;
|
|
71
|
+
min-width: 60px;
|
|
72
|
+
padding: 12px;
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
tbody {
|
|
78
|
+
td {
|
|
79
|
+
@include cell-padding;
|
|
80
|
+
border-right: 1px solid $border-color;
|
|
81
|
+
border-bottom: 1px solid $border-color;
|
|
82
|
+
color: $text-secondary;
|
|
83
|
+
font-size: 14px;
|
|
84
|
+
line-height: 1.4;
|
|
85
|
+
|
|
86
|
+
&:last-child {
|
|
87
|
+
border-right: none;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
&:has(input[type="checkbox"]) {
|
|
91
|
+
text-align: center;
|
|
92
|
+
width: 60px;
|
|
93
|
+
min-width: 60px;
|
|
94
|
+
padding: 12px;
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
tr {
|
|
99
|
+
&:nth-child(even) {
|
|
100
|
+
background-color: $background-gray;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
&:nth-child(odd) {
|
|
104
|
+
background-color: $background-white;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
&:hover {
|
|
108
|
+
background-color: $background-hover;
|
|
109
|
+
cursor: pointer;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
td:first-child {
|
|
113
|
+
font-weight: 500;
|
|
114
|
+
color: $text-primary;
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.pagination {
|
|
121
|
+
@include flex-center;
|
|
122
|
+
justify-content: flex-end;
|
|
123
|
+
padding: 16px 0;
|
|
124
|
+
gap: 12px;
|
|
125
|
+
font-size: 14px;
|
|
126
|
+
color: $text-secondary;
|
|
127
|
+
background-color: #FAFAFA;
|
|
128
|
+
border-top: 1px solid $border-color;
|
|
129
|
+
margin-top: 0;
|
|
130
|
+
|
|
131
|
+
select {
|
|
132
|
+
padding: 6px 12px;
|
|
133
|
+
border: 1px solid $border-color;
|
|
134
|
+
border-radius: $border-radius;
|
|
135
|
+
background-color: $background-white;
|
|
136
|
+
font-size: 14px;
|
|
137
|
+
margin: 0 8px;
|
|
138
|
+
|
|
139
|
+
&:focus {
|
|
140
|
+
outline: 2px solid $primary-blue;
|
|
141
|
+
outline-offset: -1px;
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
.cp {
|
|
146
|
+
padding: 8px;
|
|
147
|
+
cursor: pointer;
|
|
148
|
+
border-radius: $border-radius;
|
|
149
|
+
@include hover-transition;
|
|
150
|
+
|
|
151
|
+
&:hover {
|
|
152
|
+
background-color: #f0f0f0;
|
|
153
|
+
}
|
|
154
|
+
}
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
.actionBarWrapper {
|
|
158
|
+
background-color: $background-action;
|
|
159
|
+
border: 1px solid $primary-blue;
|
|
160
|
+
border-radius: $border-radius;
|
|
161
|
+
padding: 12px 16px;
|
|
162
|
+
margin-top: 16px;
|
|
163
|
+
@include flex-center;
|
|
164
|
+
justify-content: space-between;
|
|
165
|
+
|
|
166
|
+
.search-instruction-header {
|
|
167
|
+
color: $text-primary;
|
|
168
|
+
font-weight: 500;
|
|
169
|
+
}
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
.toast {
|
|
173
|
+
position: fixed;
|
|
174
|
+
top: 20px;
|
|
175
|
+
right: 20px;
|
|
176
|
+
z-index: 1000;
|
|
177
|
+
padding: 12px 16px;
|
|
178
|
+
border-radius: $border-radius;
|
|
179
|
+
background-color: $background-white;
|
|
180
|
+
box-shadow: $box-shadow;
|
|
181
|
+
border-left: 4px solid $primary-blue;
|
|
182
|
+
|
|
183
|
+
&.error {
|
|
184
|
+
border-left-color: #d32f2f;
|
|
185
|
+
}
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
@media (max-width: 768px) {
|
|
189
|
+
.table {
|
|
190
|
+
min-width: 800px;
|
|
191
|
+
white-space: nowrap;
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
.table th,
|
|
195
|
+
.table td {
|
|
196
|
+
min-width: 120px;
|
|
197
|
+
|
|
198
|
+
&:first-child {
|
|
199
|
+
min-width: 150px;
|
|
200
|
+
}
|
|
201
|
+
}
|
|
202
|
+
}
|
|
203
|
+
}
|
|
@@ -12,6 +12,11 @@
|
|
|
12
12
|
gap: 10px;
|
|
13
13
|
align-items: center;
|
|
14
14
|
}
|
|
15
|
+
|
|
16
|
+
.previous-button {
|
|
17
|
+
margin-left: 0;
|
|
18
|
+
width: 100%;
|
|
19
|
+
}
|
|
15
20
|
}
|
|
16
21
|
@media (min-width: 640px) {
|
|
17
22
|
.reverse-actionbar {
|
|
@@ -28,6 +33,19 @@
|
|
|
28
33
|
gap: 10px;
|
|
29
34
|
align-items: center;
|
|
30
35
|
}
|
|
36
|
+
|
|
37
|
+
.previous-button{
|
|
38
|
+
width: 240px;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
@media (min-width: 48rem) {
|
|
44
|
+
.reverse-actionbar {
|
|
45
|
+
.previous-button{
|
|
46
|
+
margin-left: 4rem;
|
|
47
|
+
width: 240px;
|
|
48
|
+
}
|
|
31
49
|
}
|
|
32
50
|
}
|
|
33
51
|
|