1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 | @import '../../globals/scss/helper-mixins';
|
9 | @import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
|
10 | @import '../../globals/scss/vars';
|
11 |
|
12 | @include exports('data-table-v2-inline-edit') {
|
13 |
|
14 | $data-table-suffix: if(feature-flag-enabled('components-x'), '-v2', '');
|
15 |
|
16 | .#{$prefix}--inline-edit-label {
|
17 | display: flex;
|
18 | justify-content: space-between;
|
19 | align-items: center;
|
20 |
|
21 | &:hover {
|
22 | .#{$prefix}--inline-edit-label__icon {
|
23 | opacity: 1;
|
24 | }
|
25 | }
|
26 | }
|
27 |
|
28 | .#{$prefix}--inline-edit-label--inactive {
|
29 | display: none;
|
30 | }
|
31 |
|
32 | .#{$prefix}--inline-edit-label__action {
|
33 | @include button-reset(false);
|
34 |
|
35 | &:hover {
|
36 | cursor: pointer;
|
37 | }
|
38 |
|
39 | &:focus {
|
40 | @include focus-outline;
|
41 | padding: $spacing-3xs;
|
42 |
|
43 | .#{$prefix}--inline-edit-label__icon {
|
44 | width: auto;
|
45 | opacity: 1;
|
46 | }
|
47 | }
|
48 | }
|
49 |
|
50 | .#{$prefix}--inline-edit-label__icon {
|
51 | fill: $ui-05;
|
52 | opacity: 0;
|
53 | }
|
54 |
|
55 | .#{$prefix}--inline-edit-input {
|
56 | display: none;
|
57 | }
|
58 |
|
59 | .#{$prefix}--inline-edit-input--active {
|
60 | display: block;
|
61 | margin-left: rem(-12px);
|
62 |
|
63 | input {
|
64 | padding-left: $spacing-sm;
|
65 | }
|
66 | }
|
67 |
|
68 | .#{$prefix}--data-table#{$data-table-suffix}--short {
|
69 | input {
|
70 | height: rem(32px);
|
71 | }
|
72 |
|
73 | select {
|
74 | padding: 0.45rem 2.75rem 0.45rem $spacing-md;
|
75 | }
|
76 |
|
77 | .#{$prefix}--select__arrow {
|
78 | top: 0.875rem;
|
79 | }
|
80 | }
|
81 | }
|