@scaleflex/widget-provider-views 4.0.7 → 4.1.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.
@@ -1,207 +1,207 @@
1
- // packages/@scaleflex/widget-provider-views/src/components/Details/ProductItem.jsx
2
- .filerobot-Explorer-Details {
3
- &-header{
4
- display: flex;
5
- align-items: center;
6
- margin-left: 30px;
7
- font-size: 12px;
8
-
9
- &-icon {
10
- margin-left: 6px;
11
- }
12
-
13
- &-title {
14
- margin-top: 12px;
15
- display: flex;
16
- align-items: center;
17
- max-width: 90%;
18
-
19
- & label{
20
- text-overflow: ellipsis;
21
- white-space: nowrap;
22
- overflow: hidden;
23
- }
24
-
25
- }
26
- }
27
- &-tabs{
28
- display: flex;
29
- padding: 0 8px;
30
- margin-top: 8px;
31
- font-size: 12px;
32
- cursor: pointer;
33
-
34
- &-details,
35
- &-comments {
36
- display: flex;
37
- justify-content: center;
38
- align-items: center;
39
- width: 50%;
40
- height: 30px;
41
- color: $primary;
42
- border: 1px solid transparent;
43
- border-top-left-radius: .10rem;
44
- border-top-right-radius: .10rem;
45
-
46
- // font-weight: 600;
47
- & label {
48
- width: 100%;
49
- height: 100%;
50
- display: flex;
51
- align-items: center;
52
- justify-content: center;
53
- cursor: pointer;
54
- &:hover {
55
- // color: $blue;
56
- margin-bottom: -1px;
57
- border-bottom: 2px solid #6879EB;
58
- background-color: $background-primary;
59
- color:#6879EB;
60
- }
61
- }
62
-
63
- & > input[type="radio"] {
64
- position: absolute;
65
- left: -200vw;
66
- }
67
- & > input:checked + label {
68
- // color: $blue;
69
- margin-bottom: -1px;
70
- border-bottom: 2px solid #6879EB;
71
- background-color: $background-primary;
72
- color:#6879EB;
73
- }
74
- }
75
-
76
- }
77
- &-icon-preview {
78
- display: flex;
79
- justify-content: center;
80
- margin-top: 8px;
81
- margin-bottom: 21px;
82
- }
83
- &-file-preview {
84
- margin: 8px 5px 12px 8px;
85
- height: 146px;
86
- position: relative;
87
-
88
- &:hover {
89
- .filerobot-Explorer-Details-thumbnailZoomOverlay {
90
- display: flex;
91
- }
92
- }
93
- }
94
- &-thumbnail {
95
- position: relative;
96
- z-index: 1;
97
- width: 100%;
98
- height: 100%;
99
- max-width: 100%;
100
- max-height: 100%;
101
- object-fit: contain;
102
- }
103
- &-info {
104
- font-size: 12px;
105
- margin: 0;
106
- padding: 0;
107
- margin-top: 12px;
108
- padding-left: 12px;
109
-
110
- &-list {
111
- display: flex;
112
- list-style: none;
113
- margin-bottom: 8px;
114
-
115
- &-name {
116
- display: flex;
117
- font-weight: 400;
118
- width: 68px;
119
- padding-right: 2px;
120
- color: #768184;
121
-
122
- & > span{
123
- text-overflow: ellipsis;
124
- white-space: nowrap;
125
- overflow: hidden;
126
- }
127
- }
128
-
129
- &-value {
130
- display: inline-block;
131
- color: #4D4E4E;
132
- font-weight: 400;
133
- width: calc(100% - 68px);
134
- }
135
- }
136
- }
137
- &-section {
138
- margin-top: 8px;
139
- padding-top: 12px;
140
- margin-right: 12px;
141
- margin-left: 12px;
142
- font-size: 12px;
143
- border-top: 1px solid #DFE7ED;
144
- &-header {
145
- display: flex;
146
- justify-content: space-between;
147
- align-items: center;
148
- margin-bottom: 9px;
149
- padding-right: 5px;
150
- &-title {
151
- color: $secondary;
152
- }
153
- }
154
- &-content {
155
- &-list {
156
- display: inline-flex;
157
- -ms-flex-wrap: wrap;
158
- flex-wrap: wrap;
159
- margin: 0;
160
- padding: 0;
161
- width: 100%;
162
- list-style: none;
163
- & li {
164
- position: relative;
165
- display: flex;
166
- align-items: center;
167
- margin: 0 5px 5px 0;
168
- padding: 4px 6px;
169
- border-radius: 2px;
170
- color: #4D4E4E;
171
- background: $background-primary;
172
- font-family: 'Roboto';
173
- font-weight: 400;
174
-
175
-
176
- }
177
- }
178
- }
179
- }
180
- }
181
-
182
- .filerobot-Explorer-Details-thumbnailZoomOverlay {
183
- position: absolute;
184
- display: none;
185
- align-items: center;
186
- justify-content: center;
187
- width: 100%;
188
- height: 100%;
189
- background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.25) 100%);
190
- user-select: none;
191
- z-index: 111;
192
- }
193
-
194
- .filerobot-Explorer-Details-thumbnailZoomOverlayButton {
195
- width: 100%;
196
- height: 100%;
197
-
198
- &:hover {
199
- background: transparent !important;
200
- }
201
-
202
- &:active {
203
- &:before {
204
- opacity: 0.5 !important;
205
- }
206
- }
207
- }
1
+ // packages/@scaleflex/widget-provider-views/src/components/Details/ProductItem.jsx
2
+ .filerobot-Explorer-Details {
3
+ &-header{
4
+ display: flex;
5
+ align-items: center;
6
+ margin-left: 30px;
7
+ font-size: 12px;
8
+
9
+ &-icon {
10
+ margin-left: 6px;
11
+ }
12
+
13
+ &-title {
14
+ margin-top: 12px;
15
+ display: flex;
16
+ align-items: center;
17
+ max-width: 90%;
18
+
19
+ & label{
20
+ text-overflow: ellipsis;
21
+ white-space: nowrap;
22
+ overflow: hidden;
23
+ }
24
+
25
+ }
26
+ }
27
+ &-tabs{
28
+ display: flex;
29
+ padding: 0 8px;
30
+ margin-top: 8px;
31
+ font-size: 12px;
32
+ cursor: pointer;
33
+
34
+ &-details,
35
+ &-comments {
36
+ display: flex;
37
+ justify-content: center;
38
+ align-items: center;
39
+ width: 50%;
40
+ height: 30px;
41
+ color: $primary;
42
+ border: 1px solid transparent;
43
+ border-top-left-radius: .10rem;
44
+ border-top-right-radius: .10rem;
45
+
46
+ // font-weight: 600;
47
+ & label {
48
+ width: 100%;
49
+ height: 100%;
50
+ display: flex;
51
+ align-items: center;
52
+ justify-content: center;
53
+ cursor: pointer;
54
+ &:hover {
55
+ // color: $blue;
56
+ margin-bottom: -1px;
57
+ border-bottom: 2px solid #6879EB;
58
+ background-color: $background-primary;
59
+ color:#6879EB;
60
+ }
61
+ }
62
+
63
+ & > input[type="radio"] {
64
+ position: absolute;
65
+ left: -200vw;
66
+ }
67
+ & > input:checked + label {
68
+ // color: $blue;
69
+ margin-bottom: -1px;
70
+ border-bottom: 2px solid #6879EB;
71
+ background-color: $background-primary;
72
+ color:#6879EB;
73
+ }
74
+ }
75
+
76
+ }
77
+ &-icon-preview {
78
+ display: flex;
79
+ justify-content: center;
80
+ margin-top: 8px;
81
+ margin-bottom: 21px;
82
+ }
83
+ &-file-preview {
84
+ margin: 8px 5px 12px 8px;
85
+ height: 146px;
86
+ position: relative;
87
+
88
+ &:hover {
89
+ .filerobot-Explorer-Details-thumbnailZoomOverlay {
90
+ display: flex;
91
+ }
92
+ }
93
+ }
94
+ &-thumbnail {
95
+ position: relative;
96
+ z-index: 1;
97
+ width: 100%;
98
+ height: 100%;
99
+ max-width: 100%;
100
+ max-height: 100%;
101
+ object-fit: contain;
102
+ }
103
+ &-info {
104
+ font-size: 12px;
105
+ margin: 0;
106
+ padding: 0;
107
+ margin-top: 12px;
108
+ padding-left: 12px;
109
+
110
+ &-list {
111
+ display: flex;
112
+ list-style: none;
113
+ margin-bottom: 8px;
114
+
115
+ &-name {
116
+ display: flex;
117
+ font-weight: 400;
118
+ width: 68px;
119
+ padding-right: 2px;
120
+ color: #768184;
121
+
122
+ & > span{
123
+ text-overflow: ellipsis;
124
+ white-space: nowrap;
125
+ overflow: hidden;
126
+ }
127
+ }
128
+
129
+ &-value {
130
+ display: inline-block;
131
+ color: #4D4E4E;
132
+ font-weight: 400;
133
+ width: calc(100% - 68px);
134
+ }
135
+ }
136
+ }
137
+ &-section {
138
+ margin-top: 8px;
139
+ padding-top: 12px;
140
+ margin-right: 12px;
141
+ margin-left: 12px;
142
+ font-size: 12px;
143
+ border-top: 1px solid #DFE7ED;
144
+ &-header {
145
+ display: flex;
146
+ justify-content: space-between;
147
+ align-items: center;
148
+ margin-bottom: 9px;
149
+ padding-right: 5px;
150
+ &-title {
151
+ color: $secondary;
152
+ }
153
+ }
154
+ &-content {
155
+ &-list {
156
+ display: inline-flex;
157
+ -ms-flex-wrap: wrap;
158
+ flex-wrap: wrap;
159
+ margin: 0;
160
+ padding: 0;
161
+ width: 100%;
162
+ list-style: none;
163
+ & li {
164
+ position: relative;
165
+ display: flex;
166
+ align-items: center;
167
+ margin: 0 5px 5px 0;
168
+ padding: 4px 6px;
169
+ border-radius: 2px;
170
+ color: #4D4E4E;
171
+ background: $background-primary;
172
+ font-family: 'Roboto';
173
+ font-weight: 400;
174
+
175
+
176
+ }
177
+ }
178
+ }
179
+ }
180
+ }
181
+
182
+ .filerobot-Explorer-Details-thumbnailZoomOverlay {
183
+ position: absolute;
184
+ display: none;
185
+ align-items: center;
186
+ justify-content: center;
187
+ width: 100%;
188
+ height: 100%;
189
+ background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.25) 100%);
190
+ user-select: none;
191
+ z-index: 111;
192
+ }
193
+
194
+ .filerobot-Explorer-Details-thumbnailZoomOverlayButton {
195
+ width: 100%;
196
+ height: 100%;
197
+
198
+ &:hover {
199
+ background: transparent !important;
200
+ }
201
+
202
+ &:active {
203
+ &:before {
204
+ opacity: 0.5 !important;
205
+ }
206
+ }
207
+ }