@it-enterprise/forcebpm-ui-kit 1.0.2-beta.21 → 1.0.2-beta.22

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.
@@ -41,10 +41,24 @@
41
41
  border-color: rgb(var(--v-theme-error)) !important;
42
42
  }
43
43
  }
44
+
44
45
  .v-label {
45
46
  opacity: 1;
46
47
  color: rgb(var(--v-theme-text));
47
48
  }
49
+
50
+ &.v-field--variant-outlined {
51
+ .v-field__outline__start,
52
+ .v-field__outline__notch,
53
+ .v-field__outline__end {
54
+ --v-field-border-width: 0.5px;
55
+ --v-field-border-opacity: 1;
56
+ }
57
+ .v-field--focused .v-field__outline {
58
+ --v-field-border-width: 0.5px;
59
+ --v-field-border-opacity: 1;
60
+ }
61
+ }
48
62
  .v-field__outline__start,
49
63
  .v-field__outline__notch,
50
64
  .v-field__outline__end {
@@ -85,10 +99,6 @@
85
99
  background: rgb(var(--v-theme-primary));
86
100
  }
87
101
  }
88
- .v-field__outline {
89
- --v-field-border-width: 0.5px;
90
- --v-field-border-opacity: 1;
91
- }
92
102
  &.v-field--focused:not(.v-field--error) {
93
103
  .v-label {
94
104
  color: rgb(var(--v-theme-primary));
@@ -179,7 +189,7 @@
179
189
  .f-checkbox {
180
190
  .v-input__control {
181
191
  .v-selection-control {
182
- --v-selection-control-size: 20px;
192
+ --v-selection-control-size: 16px;
183
193
  min-height: 1.2em;
184
194
  .v-selection-control__wrapper {
185
195
  margin-right: 10px;
@@ -192,13 +202,43 @@
192
202
  }
193
203
  }
194
204
  }
205
+ .v-label {
206
+ line-height: var(--v-selection-control-size);
207
+ }
208
+ }
209
+ }
210
+ &.f-checkbox-opacity {
211
+ &:hover {
212
+ .v-input__control {
213
+ .v-selection-control {
214
+ .v-selection-control__wrapper {
215
+ .v-selection-control__input {
216
+ .f-icon {
217
+ opacity: 1;
218
+ }
219
+ }
220
+ }
221
+ }
222
+ }
223
+ }
224
+ .v-input__control {
225
+ .v-selection-control {
226
+ .v-selection-control__wrapper {
227
+ .v-selection-control__input {
228
+ .f-icon {
229
+ transition: all 0.3s ease-in-out;
230
+ opacity: 0.5;
231
+ }
232
+ }
233
+ }
234
+ }
195
235
  }
196
236
  }
197
237
  }
198
238
 
199
239
  //Radio
200
240
  .f-radio {
201
- --v-selection-control-size: 20px;
241
+ --v-selection-control-size: 16px;
202
242
  &.v-selection-control--inline:not(:last-child) {
203
243
  margin-right: 8px;
204
244
  }
@@ -212,6 +252,9 @@
212
252
  }
213
253
  }
214
254
  }
255
+ .v-label {
256
+ margin-left: 4px;
257
+ }
215
258
  }
216
259
 
217
260
  // Switch
@@ -1,4 +1,4 @@
1
- .v-menu {
1
+ .f-menu.v-menu {
2
2
  .v-overlay__content {
3
3
  background: rgb(var(--v-theme-background));
4
4
  color: rgb(var(--v-theme-subTitle));
@@ -29,7 +29,7 @@
29
29
  }
30
30
  }
31
31
 
32
- .v-tooltip {
32
+ .f-tooltip.v-tooltip {
33
33
  .v-overlay__content {
34
34
  background: rgb(var(--v-theme-background));
35
35
  color: rgb(var(--v-theme-subTitle));
@@ -42,7 +42,7 @@
42
42
  }
43
43
  }
44
44
 
45
- .v-overlay__content.v-autocomplete__content {
45
+ .f-menu .v-overlay__content.v-autocomplete__content {
46
46
  .v-list {
47
47
  .v-list-item {
48
48
  min-height: 28px;
@@ -1,3 +1,4 @@
1
+ // todo f-pagination styles
1
2
  .app-pagination {
2
3
  .v-theme--light.v-pagination .v-pagination__item {
3
4
  color: rgb(var(--v-theme-secondary));
@@ -45,15 +46,11 @@
45
46
  font-size: 1em !important;
46
47
  color: rgb(var(--v-theme-secondary));
47
48
  }
48
- // .v-pagination__more {
49
- // color: rgb(var(--v-theme-secondary));
50
- // }
51
49
  &.v-pagination__prev {
52
50
  .v-btn {
53
51
  border: 1px solid rgb(var(--v-theme-secondary));
54
52
  margin: 0;
55
53
  }
56
- // border: 1px solid rgb(var(--v-theme-secondary));
57
54
  background-color: rgb(var(--v-theme-fields));
58
55
  margin: 0 10px;
59
56
  i {
@@ -68,7 +65,6 @@
68
65
  border: 1px solid rgb(var(--v-theme-secondary));
69
66
  margin: 0;
70
67
  }
71
- // border: 1px solid rgb(var(--v-theme-secondary));
72
68
  background-color: rgb(var(--v-theme-fields));
73
69
  margin: 0 10px;
74
70
  i {
@@ -1,4 +1,4 @@
1
- .v-skeleton-loader {
1
+ .f-skeleton-loader.v-skeleton-loader {
2
2
  background: transparent;
3
3
  .v-skeleton-loader__text {
4
4
  margin: 4px 8px;
@@ -18,70 +18,3 @@
18
18
  margin: 0;
19
19
  }
20
20
  }
21
-
22
- // .skeleton-avatar {
23
- // }
24
-
25
- // .v-skeleton-loader.theme--dark {
26
- // div {
27
- // background: var(--v-background2-base) !important;
28
- // &::after {
29
- // background: rgb(var(--v-theme-disabled)) !important;
30
- // }
31
- // }
32
- // }
33
- // .task-card-loader.v-skeleton-loader {
34
- // border: 1px solid rgb(var(--v-theme-fields));
35
- // }
36
- // .table-loader.v-skeleton-loader {
37
- // div {
38
- // background: rgb(var(--v-theme-fields)) !important;
39
- // &::after {
40
- // background: var(--v-disabled3-base) !important;
41
- // }
42
- // }
43
- // .v-skeleton-loader__table-thead {
44
- // padding: 10px 25px;
45
- // background: rgb(var(--v-theme-fields));
46
- // }
47
- // .v-skeleton-loader__table-tbody {
48
- // padding: 0px;
49
- // .v-skeleton-loader__table-row-divider:nth-child(odd) {
50
- // background: rgb(var(--v-theme-line));
51
- // }
52
- // .v-skeleton-loader__table-row-divider:nth-child(even) {
53
- // background: rgb(var(--v-theme-chart));
54
- // }
55
- // .v-skeleton-loader__table-row-divider {
56
- // padding: 0 10px !important;
57
- // height: 40px;
58
- // align-items: center;
59
- // .v-skeleton-loader__table-row {
60
- // height: 40px;
61
- // .v-skeleton-loader__table-cell {
62
- // height: 40px;
63
- // }
64
- // }
65
- // }
66
- // }
67
- // }
68
-
69
- // .v-skeleton-loader__actions {
70
- // .v-skeleton-loader__button {
71
- // width: 255px;
72
- // border-radius: 5.8px;
73
- // }
74
- // }
75
-
76
- // .toolbar-skeleton.v-skeleton-loader {
77
- // .v-skeleton-loader__table-heading {
78
- // .v-skeleton-loader__heading {
79
- // height: 15px;
80
- // }
81
- // padding: 22px 10px 2px 20px;
82
- // background: transparent;
83
- // }
84
- // .v-skeleton-loader__text {
85
- // margin-bottom: -1px;
86
- // }
87
- // }
@@ -1,4 +1,4 @@
1
- .fbpm-action-snackbar {
1
+ .fbpm-action-snackbar.v-overlay {
2
2
  bottom: 8%;
3
3
  .v-snackbar__wrapper {
4
4
  background-color: rgb(var(--v-theme-title-dark));
@@ -1,147 +1,143 @@
1
- // .fbpm-table__header - add to "thead" if need custom header styles
2
- // .fbpm-table__row-hover - add to "tr" if need primary hover
3
- // .fbpm-table__row-selected - add to "tr" if need primary background
4
- // .fbpm-table__check-box - add to "td" if next element "v-checkbox"
1
+ // todo describe table styles
5
2
 
6
- .fbpm-table.v-data-table {
7
- width: 100%;
8
- .v-data-table__wrapper {
9
- overflow-x: hidden;
10
- scrollbar-width: thin;
11
- // padding-right: 10px;
12
- &::-webkit-scrollbar {
13
- width: 2.5px;
14
- }
15
- &::-webkit-scrollbar-track {
16
- box-shadow: inset 0 0 6px rgb(var(--v-theme-line));
17
- }
18
- &::-webkit-scrollbar-thumb {
19
- border-top: 1px solid rgba(0, 0, 0, 0);
20
- border-bottom: 1px solid rgba(0, 0, 0, 0);
21
- background-clip: padding-box;
22
- border-radius: 20px;
23
- height: 50px;
24
- background-color: rgb(var(--v-theme-primary));
25
- }
26
- }
27
- &.darken table {
28
- tbody {
29
- tr {
30
- &:nth-child(odd) {
31
- background: var(--v-background3-base);
32
- &:hover {
33
- background: var(--v-background4-base) !important;
34
- }
35
- }
36
- &:nth-child(even) {
37
- background: var(--v-background4-base);
38
- &:hover {
39
- background: var(--v-background3-base) !important;
40
- }
41
- }
42
- }
43
- }
44
- }
45
- table {
46
- width: 100%;
47
- .fbpm-table__header,
48
- .v-data-table-header {
49
- tr {
50
- th {
51
- color: rgb(var(--v-theme-text)) !important;
52
- font-weight: normal;
53
- line-height: 1;
54
- font-size: 0.8em;
55
- padding: 4px 4px 10px 4px;
56
- height: 24px;
57
- box-shadow: none;
58
- background: var(--v-background2-base);
59
- .v-data-table-header__icon {
60
- -webkit-mask: url('~@/assets/icons/arrow-icon.svg') no-repeat;
61
- mask: url('~@/assets/icons/arrow-icon.svg') no-repeat;
62
- mask-size: contain;
63
- width: 15px;
64
- height: 15px;
65
- transform: rotate(-90deg);
66
- &::after,
67
- &::before {
68
- content: none;
69
- }
70
- }
71
- &.asc .v-data-table-header__icon {
72
- transform: rotate(-90deg);
73
- background-color: rgb(var(--v-theme-title)) !important;
74
- }
75
- &.desc .v-data-table-header__icon {
76
- transform: rotate(-270deg);
77
- background-color: rgb(var(--v-theme-title)) !important;
78
- }
79
- &.active {
80
- font-weight: bold;
81
- color: rgb(var(--v-theme-subTitle)) !important;
82
- }
83
- }
84
- }
85
- }
86
- tbody {
87
- width: 100%;
88
- tr {
89
- position: relative;
90
- z-index: 1;
91
- td {
92
- padding: 17px 0 9px 4px;
93
- font-size: 0.9em;
94
- line-height: 1em;
95
- border: none !important;
96
- height: 40px;
97
- min-width: 100px;
98
- &.fbpm-table__check-box {
99
- width: 40px;
100
- min-width: 40px;
101
- padding: 12px;
102
- border-bottom: none !important;
103
- .v-input--selection-controls__input {
104
- margin: 0;
105
- }
106
- }
107
- &.fbpm-table__avatar {
108
- padding: 6px 0 0 0;
109
- width: 20px;
110
- min-width: 20px;
111
- line-height: 1;
112
- }
113
- }
3
+ // .fbpm-table.v-data-table {
4
+ // width: 100%;
5
+ // .v-data-table__wrapper {
6
+ // overflow-x: hidden;
7
+ // scrollbar-width: thin;
8
+ // &::-webkit-scrollbar {
9
+ // width: 2.5px;
10
+ // }
11
+ // &::-webkit-scrollbar-track {
12
+ // box-shadow: inset 0 0 6px rgb(var(--v-theme-line));
13
+ // }
14
+ // &::-webkit-scrollbar-thumb {
15
+ // border-top: 1px solid rgba(0, 0, 0, 0);
16
+ // border-bottom: 1px solid rgba(0, 0, 0, 0);
17
+ // background-clip: padding-box;
18
+ // border-radius: 20px;
19
+ // height: 50px;
20
+ // background-color: rgb(var(--v-theme-primary));
21
+ // }
22
+ // }
23
+ // &.darken table {
24
+ // tbody {
25
+ // tr {
26
+ // &:nth-child(odd) {
27
+ // background: var(--v-background3-base);
28
+ // &:hover {
29
+ // background: var(--v-background4-base) !important;
30
+ // }
31
+ // }
32
+ // &:nth-child(even) {
33
+ // background: var(--v-background4-base);
34
+ // &:hover {
35
+ // background: var(--v-background3-base) !important;
36
+ // }
37
+ // }
38
+ // }
39
+ // }
40
+ // }
41
+ // table {
42
+ // width: 100%;
43
+ // .fbpm-table__header,
44
+ // .v-data-table-header {
45
+ // tr {
46
+ // th {
47
+ // color: rgb(var(--v-theme-text)) !important;
48
+ // font-weight: normal;
49
+ // line-height: 1;
50
+ // font-size: 0.8em;
51
+ // padding: 4px 4px 10px 4px;
52
+ // height: 24px;
53
+ // box-shadow: none;
54
+ // background: var(--v-background2-base);
55
+ // .v-data-table-header__icon {
56
+ // -webkit-mask: url("~@/assets/icons/arrow-icon.svg") no-repeat;
57
+ // mask: url("~@/assets/icons/arrow-icon.svg") no-repeat;
58
+ // mask-size: contain;
59
+ // width: 15px;
60
+ // height: 15px;
61
+ // transform: rotate(-90deg);
62
+ // &::after,
63
+ // &::before {
64
+ // content: none;
65
+ // }
66
+ // }
67
+ // &.asc .v-data-table-header__icon {
68
+ // transform: rotate(-90deg);
69
+ // background-color: rgb(var(--v-theme-title)) !important;
70
+ // }
71
+ // &.desc .v-data-table-header__icon {
72
+ // transform: rotate(-270deg);
73
+ // background-color: rgb(var(--v-theme-title)) !important;
74
+ // }
75
+ // &.active {
76
+ // font-weight: bold;
77
+ // color: rgb(var(--v-theme-subTitle)) !important;
78
+ // }
79
+ // }
80
+ // }
81
+ // }
82
+ // tbody {
83
+ // width: 100%;
84
+ // tr {
85
+ // position: relative;
86
+ // z-index: 1;
87
+ // td {
88
+ // padding: 17px 0 9px 4px;
89
+ // font-size: 0.9em;
90
+ // line-height: 1em;
91
+ // border: none !important;
92
+ // height: 40px;
93
+ // min-width: 100px;
94
+ // &.fbpm-table__check-box {
95
+ // width: 40px;
96
+ // min-width: 40px;
97
+ // padding: 12px;
98
+ // border-bottom: none !important;
99
+ // .v-input--selection-controls__input {
100
+ // margin: 0;
101
+ // }
102
+ // }
103
+ // &.fbpm-table__avatar {
104
+ // padding: 6px 0 0 0;
105
+ // width: 20px;
106
+ // min-width: 20px;
107
+ // line-height: 1;
108
+ // }
109
+ // }
114
110
 
115
- &:nth-child(odd) {
116
- background: var(--v-background5-base);
117
- &:hover {
118
- background: var(--v-background6-base) !important;
119
- }
120
- }
121
- &:nth-child(even) {
122
- background: var(--v-background6-base);
123
- &:hover {
124
- background: var(--v-background5-base) !important;
125
- }
126
- }
127
- &.fbpm-table__row-hover:hover,
128
- &.fbpm-table__row-selected {
129
- background: rgb(var(--v-theme-background)) !important;
130
- cursor: pointer;
131
- &::after {
132
- content: '';
133
- height: 100%;
134
- width: 100%;
135
- z-index: -1;
136
- display: block;
137
- position: absolute;
138
- top: 0;
139
- left: 0;
140
- background: rgb(var(--v-theme-primary));
141
- opacity: 0.4;
142
- }
143
- }
144
- }
145
- }
146
- }
147
- }
111
+ // &:nth-child(odd) {
112
+ // background: var(--v-background5-base);
113
+ // &:hover {
114
+ // background: var(--v-background6-base) !important;
115
+ // }
116
+ // }
117
+ // &:nth-child(even) {
118
+ // background: var(--v-background6-base);
119
+ // &:hover {
120
+ // background: var(--v-background5-base) !important;
121
+ // }
122
+ // }
123
+ // &.fbpm-table__row-hover:hover,
124
+ // &.fbpm-table__row-selected {
125
+ // background: rgb(var(--v-theme-background)) !important;
126
+ // cursor: pointer;
127
+ // &::after {
128
+ // content: "";
129
+ // height: 100%;
130
+ // width: 100%;
131
+ // z-index: -1;
132
+ // display: block;
133
+ // position: absolute;
134
+ // top: 0;
135
+ // left: 0;
136
+ // background: rgb(var(--v-theme-primary));
137
+ // opacity: 0.4;
138
+ // }
139
+ // }
140
+ // }
141
+ // }
142
+ // }
143
+ // }
@@ -1,25 +0,0 @@
1
- .f-checkbox-sm {
2
- .v-input__control {
3
- .v-selection-control__input {
4
- .v-icon {
5
- font-size: 16px;
6
- height: 16px;
7
- width: 16px;
8
- min-width: 16px;
9
- opacity: 0.5 !important;
10
- }
11
- .v-icon:hover {
12
- opacity: 1 !important;
13
- }
14
- }
15
- }
16
- }
17
- .f-checkbox-sm:hover {
18
- .v-input__control {
19
- .v-selection-control__input {
20
- .v-icon {
21
- opacity: 1 !important;
22
- }
23
- }
24
- }
25
- }