@carbon/ibm-products 1.5.0 → 1.6.0
Sign up to get free protection for your applications and to get access to all the features.
- package/css/index-full-carbon.css +206 -44
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +3 -3
- package/css/index-without-carbon-released-only.css +31 -27
- package/css/index-without-carbon-released-only.css.map +1 -1
- package/css/index-without-carbon-released-only.min.css +3 -3
- package/css/index-without-carbon.css +193 -39
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +3 -3
- package/css/index.css +195 -41
- package/css/index.css.map +1 -1
- package/css/index.min.css +3 -3
- package/es/components/AddSelect/AddSelect.js +106 -65
- package/es/components/AddSelect/AddSelectBreadcrumbs.js +56 -0
- package/es/components/AddSelect/AddSelectList.js +94 -0
- package/es/components/AddSelect/AddSelectSidebar.js +46 -0
- package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +5 -2
- package/es/components/CancelableTextEdit/CancelableTextEdit.js +2 -2
- package/es/components/Card/Card.js +6 -4
- package/es/components/InlineEdit/InlineEdit.js +223 -74
- package/es/components/NotificationsPanel/NotificationsPanel.js +16 -3
- package/es/components/PageHeader/PageHeader.js +7 -4
- package/es/components/PageHeader/PageHeaderTitle.js +10 -6
- package/es/components/SidePanel/SidePanel.js +32 -15
- package/es/components/WebTerminal/WebTerminal.js +1 -1
- package/es/settings.js +0 -5
- package/lib/components/AddSelect/AddSelect.js +110 -65
- package/lib/components/AddSelect/AddSelectBreadcrumbs.js +71 -0
- package/lib/components/AddSelect/AddSelectList.js +112 -0
- package/lib/components/AddSelect/AddSelectSidebar.js +63 -0
- package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +5 -2
- package/lib/components/CancelableTextEdit/CancelableTextEdit.js +1 -1
- package/lib/components/Card/Card.js +6 -4
- package/lib/components/InlineEdit/InlineEdit.js +219 -72
- package/lib/components/NotificationsPanel/NotificationsPanel.js +13 -1
- package/lib/components/PageHeader/PageHeader.js +7 -4
- package/lib/components/PageHeader/PageHeaderTitle.js +10 -6
- package/lib/components/SidePanel/SidePanel.js +32 -15
- package/lib/components/WebTerminal/WebTerminal.js +1 -1
- package/lib/settings.js +0 -6
- package/package.json +12 -12
- package/scss/components/AddSelect/_add-select.scss +24 -0
- package/scss/components/BreadcrumbWithOverflow/_index.scss +1 -1
- package/scss/components/CancelableTextEdit/_cancelable-text-edit.scss +1 -0
- package/scss/components/CreateInfluencer/_create-influencer.scss +4 -4
- package/scss/components/CreateTearsheet/_create-tearsheet.scss +2 -2
- package/scss/components/InlineEdit/_inline-edit.scss +210 -9
- package/scss/components/InlineEdit/_storybook-styles.scss +13 -0
- package/scss/components/NotificationsPanel/_notifications-panel.scss +2 -2
- package/scss/components/PageHeader/_index.scss +1 -1
- package/scss/components/PageHeader/_page-header.scss +1 -1
- package/scss/components/ProductiveCard/_productive-card.scss +0 -4
- package/scss/components/SidePanel/_side-panel.scss +15 -6
- package/scss/components/StatusIcon/_index.scss +1 -1
- package/scss/components/TagSet/_index.scss +1 -1
- package/scss/components/UserProfileImage/_index.scss +1 -1
- package/scss/components/WebTerminal/_web-terminal.scss +2 -2
- package/scss/global/styles/_project-settings.scss +5 -1
- package/es/generated/feature-flags/feature-flags.js +0 -15
- package/lib/generated/feature-flags/feature-flags.js +0 -22
- package/scss/generated/feature-flags/_feature-flags.scss +0 -19
package/css/index.css
CHANGED
@@ -4065,7 +4065,7 @@ fieldset[disabled] .bx--form__helper-text {
|
|
4065
4065
|
outline: 2px solid transparent;
|
4066
4066
|
outline-offset: -2px;
|
4067
4067
|
border-bottom: 1px solid transparent;
|
4068
|
-
background-color: var(--cds-field
|
4068
|
+
background-color: var(--cds-field, #f4f4f4);
|
4069
4069
|
color: var(--cds-text-disabled, #c6c6c6);
|
4070
4070
|
cursor: not-allowed;
|
4071
4071
|
-webkit-text-fill-color: var(--cds-disabled-02, #c6c6c6);
|
@@ -11580,7 +11580,7 @@ a.bx--overflow-menu-options__btn::before {
|
|
11580
11580
|
/* stylelint-disable-line no-invalid-position-at-import-rule */
|
11581
11581
|
/* stylelint-disable-line no-invalid-position-at-import-rule */
|
11582
11582
|
/* stylelint-disable-line no-invalid-position-at-import-rule */
|
11583
|
-
@keyframes
|
11583
|
+
@keyframes influencer-menu-entrance {
|
11584
11584
|
0% {
|
11585
11585
|
opacity: 0;
|
11586
11586
|
transform: translateX(calc(-1 * var(--cds-spacing-05, 1rem)));
|
@@ -11590,7 +11590,7 @@ a.bx--overflow-menu-options__btn::before {
|
|
11590
11590
|
transform: translateX(0);
|
11591
11591
|
}
|
11592
11592
|
}
|
11593
|
-
@keyframes
|
11593
|
+
@keyframes influencer-menu-exit {
|
11594
11594
|
0% {
|
11595
11595
|
opacity: 1;
|
11596
11596
|
transform: translateX(0);
|
@@ -11625,14 +11625,14 @@ a.bx--overflow-menu-options__btn::before {
|
|
11625
11625
|
|
11626
11626
|
.c4p--create-influencer__side-nav-opening,
|
11627
11627
|
.c4p--create-influencer__progress-indicator-opening {
|
11628
|
-
animation:
|
11628
|
+
animation: influencer-menu-entrance 240ms 1;
|
11629
11629
|
animation-fill-mode: forwards;
|
11630
11630
|
transition-timing-function: cubic-bezier(0, 0, 0.38, 0.9);
|
11631
11631
|
}
|
11632
11632
|
|
11633
11633
|
.c4p--create-influencer__side-nav-closing,
|
11634
11634
|
.c4p--create-influencer__progress-indicator-closing {
|
11635
|
-
animation:
|
11635
|
+
animation: influencer-menu-exit 240ms 1;
|
11636
11636
|
animation-fill-mode: forwards;
|
11637
11637
|
transition-timing-function: cubic-bezier(0.2, 0, 1, 0.9);
|
11638
11638
|
}
|
@@ -12253,7 +12253,7 @@ a.bx--overflow-menu-options__btn::before {
|
|
12253
12253
|
stroke-dashoffset: 0;
|
12254
12254
|
}
|
12255
12255
|
}
|
12256
|
-
@keyframes
|
12256
|
+
@keyframes side-panel-exit-left {
|
12257
12257
|
0% {
|
12258
12258
|
opacity: 1;
|
12259
12259
|
transform: translateX(0);
|
@@ -12263,7 +12263,7 @@ a.bx--overflow-menu-options__btn::before {
|
|
12263
12263
|
transform: translateX(calc(-1 * 30rem));
|
12264
12264
|
}
|
12265
12265
|
}
|
12266
|
-
@keyframes
|
12266
|
+
@keyframes side-panel-exit-right {
|
12267
12267
|
0% {
|
12268
12268
|
opacity: 1;
|
12269
12269
|
transform: translateX(0);
|
@@ -12311,7 +12311,7 @@ a.bx--overflow-menu-options__btn::before {
|
|
12311
12311
|
right: 0;
|
12312
12312
|
border-left: 1px solid var(--cds-decorative-01, #e0e0e0);
|
12313
12313
|
}
|
12314
|
-
@keyframes
|
12314
|
+
@keyframes side-panel-entrance-right {
|
12315
12315
|
0% {
|
12316
12316
|
opacity: 0;
|
12317
12317
|
transform: translateX(16rem);
|
@@ -12327,7 +12327,7 @@ a.bx--overflow-menu-options__btn::before {
|
|
12327
12327
|
left: 0;
|
12328
12328
|
border-right: 1px solid var(--cds-decorative-01, #e0e0e0);
|
12329
12329
|
}
|
12330
|
-
@keyframes
|
12330
|
+
@keyframes side-panel-entrance-left {
|
12331
12331
|
0% {
|
12332
12332
|
opacity: 0;
|
12333
12333
|
transform: translateX(-16rem);
|
@@ -12354,7 +12354,7 @@ a.bx--overflow-menu-options__btn::before {
|
|
12354
12354
|
right: 0;
|
12355
12355
|
border-left: 1px solid var(--cds-decorative-01, #e0e0e0);
|
12356
12356
|
}
|
12357
|
-
@keyframes
|
12357
|
+
@keyframes side-panel-entrance-right {
|
12358
12358
|
0% {
|
12359
12359
|
opacity: 0;
|
12360
12360
|
transform: translateX(20rem);
|
@@ -12370,7 +12370,7 @@ a.bx--overflow-menu-options__btn::before {
|
|
12370
12370
|
left: 0;
|
12371
12371
|
border-right: 1px solid var(--cds-decorative-01, #e0e0e0);
|
12372
12372
|
}
|
12373
|
-
@keyframes
|
12373
|
+
@keyframes side-panel-entrance-left {
|
12374
12374
|
0% {
|
12375
12375
|
opacity: 0;
|
12376
12376
|
transform: translateX(-20rem);
|
@@ -12397,7 +12397,7 @@ a.bx--overflow-menu-options__btn::before {
|
|
12397
12397
|
right: 0;
|
12398
12398
|
border-left: 1px solid var(--cds-decorative-01, #e0e0e0);
|
12399
12399
|
}
|
12400
|
-
@keyframes
|
12400
|
+
@keyframes side-panel-entrance-right {
|
12401
12401
|
0% {
|
12402
12402
|
opacity: 0;
|
12403
12403
|
transform: translateX(30rem);
|
@@ -12413,7 +12413,7 @@ a.bx--overflow-menu-options__btn::before {
|
|
12413
12413
|
left: 0;
|
12414
12414
|
border-right: 1px solid var(--cds-decorative-01, #e0e0e0);
|
12415
12415
|
}
|
12416
|
-
@keyframes
|
12416
|
+
@keyframes side-panel-entrance-left {
|
12417
12417
|
0% {
|
12418
12418
|
opacity: 0;
|
12419
12419
|
transform: translateX(-30rem);
|
@@ -12440,7 +12440,7 @@ a.bx--overflow-menu-options__btn::before {
|
|
12440
12440
|
right: 0;
|
12441
12441
|
border-left: 1px solid var(--cds-decorative-01, #e0e0e0);
|
12442
12442
|
}
|
12443
|
-
@keyframes
|
12443
|
+
@keyframes side-panel-entrance-right {
|
12444
12444
|
0% {
|
12445
12445
|
opacity: 0;
|
12446
12446
|
transform: translateX(40rem);
|
@@ -12456,7 +12456,7 @@ a.bx--overflow-menu-options__btn::before {
|
|
12456
12456
|
left: 0;
|
12457
12457
|
border-right: 1px solid var(--cds-decorative-01, #e0e0e0);
|
12458
12458
|
}
|
12459
|
-
@keyframes
|
12459
|
+
@keyframes side-panel-entrance-left {
|
12460
12460
|
0% {
|
12461
12461
|
opacity: 0;
|
12462
12462
|
transform: translateX(-40rem);
|
@@ -12483,7 +12483,7 @@ a.bx--overflow-menu-options__btn::before {
|
|
12483
12483
|
right: 0;
|
12484
12484
|
border-left: 1px solid var(--cds-decorative-01, #e0e0e0);
|
12485
12485
|
}
|
12486
|
-
@keyframes
|
12486
|
+
@keyframes side-panel-entrance-right {
|
12487
12487
|
0% {
|
12488
12488
|
opacity: 0;
|
12489
12489
|
transform: translateX(75%);
|
@@ -12499,7 +12499,7 @@ a.bx--overflow-menu-options__btn::before {
|
|
12499
12499
|
left: 0;
|
12500
12500
|
border-right: 1px solid var(--cds-decorative-01, #e0e0e0);
|
12501
12501
|
}
|
12502
|
-
@keyframes
|
12502
|
+
@keyframes side-panel-entrance-left {
|
12503
12503
|
0% {
|
12504
12504
|
opacity: 0;
|
12505
12505
|
transform: translateX(-75%);
|
@@ -12543,6 +12543,15 @@ a.bx--overflow-menu-options__btn::before {
|
|
12543
12543
|
content: "";
|
12544
12544
|
opacity: var(--c4p--side-panel--divider-opacity);
|
12545
12545
|
}
|
12546
|
+
.c4p--side-panel__container .c4p--side-panel__title-container.c4p--side-panel__title-container--reduced-motion {
|
12547
|
+
z-index: 5;
|
12548
|
+
border-bottom: 1px solid var(--cds-decorative-01, #e0e0e0);
|
12549
|
+
margin-bottom: var(--cds-spacing-05, 1rem);
|
12550
|
+
}
|
12551
|
+
.c4p--side-panel__container .c4p--side-panel__title-container.c4p--side-panel__title-container--reduced-motion.c4p--side-panel__title-container--no-title-animation {
|
12552
|
+
border-bottom: 0;
|
12553
|
+
margin-bottom: 0;
|
12554
|
+
}
|
12546
12555
|
.c4p--side-panel__container .c4p--side-panel__title-container.c4p--side-panel__on-detail-step .c4p--side-panel__collapsed-title-text {
|
12547
12556
|
top: var(--cds-spacing-09, 3rem);
|
12548
12557
|
}
|
@@ -12773,7 +12782,7 @@ a.bx--overflow-menu-options__btn::before {
|
|
12773
12782
|
background-color: var(--cds-field-02, #ffffff);
|
12774
12783
|
}
|
12775
12784
|
|
12776
|
-
@keyframes
|
12785
|
+
@keyframes side-panel-overlay-entrance {
|
12777
12786
|
0% {
|
12778
12787
|
opacity: 0;
|
12779
12788
|
}
|
@@ -12781,7 +12790,7 @@ a.bx--overflow-menu-options__btn::before {
|
|
12781
12790
|
opacity: 1;
|
12782
12791
|
}
|
12783
12792
|
}
|
12784
|
-
@keyframes
|
12793
|
+
@keyframes side-panel-overlay-exit {
|
12785
12794
|
0% {
|
12786
12795
|
opacity: 1;
|
12787
12796
|
}
|
@@ -14149,7 +14158,7 @@ a.bx--side-nav__link--current::before {
|
|
14149
14158
|
/* stylelint-disable-line no-invalid-position-at-import-rule */
|
14150
14159
|
/* stylelint-disable-line no-invalid-position-at-import-rule */
|
14151
14160
|
/* stylelint-disable-line no-invalid-position-at-import-rule */
|
14152
|
-
@keyframes
|
14161
|
+
@keyframes step-content-entrance {
|
14153
14162
|
0% {
|
14154
14163
|
opacity: 0;
|
14155
14164
|
transform: translateY(-0.75rem);
|
@@ -14168,7 +14177,7 @@ a.bx--side-nav__link--current::before {
|
|
14168
14177
|
}
|
14169
14178
|
|
14170
14179
|
.c4p--tearsheet-create .c4p--tearsheet-create__step__step--visible-step {
|
14171
|
-
animation: 400ms
|
14180
|
+
animation: 400ms step-content-entrance;
|
14172
14181
|
animation-fill-mode: forwards;
|
14173
14182
|
animation-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
|
14174
14183
|
opacity: 0;
|
@@ -16623,6 +16632,14 @@ a.bx--side-nav__link--current::before {
|
|
16623
16632
|
.c4p--add-select__selections {
|
16624
16633
|
border-top: 1px solid var(--cds-ui-03, #e0e0e0);
|
16625
16634
|
}
|
16635
|
+
.c4p--add-select__selections-wrapper {
|
16636
|
+
display: block;
|
16637
|
+
}
|
16638
|
+
.c4p--add-select__selections-cell-wrapper {
|
16639
|
+
display: flex;
|
16640
|
+
align-items: center;
|
16641
|
+
justify-content: space-between;
|
16642
|
+
}
|
16626
16643
|
|
16627
16644
|
.c4p--add-select__influencer-header {
|
16628
16645
|
display: flex;
|
@@ -16660,6 +16677,18 @@ a.bx--side-nav__link--current::before {
|
|
16660
16677
|
padding-right: 0;
|
16661
16678
|
}
|
16662
16679
|
|
16680
|
+
.c4p--add-select .bx--structured-list-td {
|
16681
|
+
padding-bottom: var(--cds-spacing-05, 1rem);
|
16682
|
+
}
|
16683
|
+
|
16684
|
+
.c4p--add-select .bx--radio-button-wrapper .bx--radio-button__label {
|
16685
|
+
justify-content: left;
|
16686
|
+
}
|
16687
|
+
|
16688
|
+
.c4p--add-select .bx--breadcrumb .bx--link {
|
16689
|
+
cursor: pointer;
|
16690
|
+
}
|
16691
|
+
|
16663
16692
|
/* stylelint-disable-line no-invalid-position-at-import-rule */
|
16664
16693
|
/* stylelint-disable-line no-invalid-position-at-import-rule */
|
16665
16694
|
/* stylelint-disable-line no-invalid-position-at-import-rule */
|
@@ -16823,7 +16852,7 @@ a.bx--side-nav__link--current::before {
|
|
16823
16852
|
/* stylelint-disable-line no-invalid-position-at-import-rule */
|
16824
16853
|
/* stylelint-disable-line no-invalid-position-at-import-rule */
|
16825
16854
|
/* stylelint-disable-line no-invalid-position-at-import-rule */
|
16826
|
-
@keyframes
|
16855
|
+
@keyframes fade-in {
|
16827
16856
|
0% {
|
16828
16857
|
opacity: 0;
|
16829
16858
|
transform: translateY(-38.5rem);
|
@@ -16833,7 +16862,7 @@ a.bx--side-nav__link--current::before {
|
|
16833
16862
|
transform: translateY(0);
|
16834
16863
|
}
|
16835
16864
|
}
|
16836
|
-
@keyframes
|
16865
|
+
@keyframes fade-out {
|
16837
16866
|
0% {
|
16838
16867
|
opacity: 1;
|
16839
16868
|
transform: translateY(0);
|
@@ -16976,8 +17005,6 @@ a.bx--side-nav__link--current::before {
|
|
16976
17005
|
--cds-layer-selected-hover: #4c4c4c;
|
16977
17006
|
--cds-layer-selected-inverse: #f4f4f4;
|
16978
17007
|
--cds-border-subtle-selected: #525252;
|
16979
|
-
--cds-layer-disabled: #262626;
|
16980
|
-
--cds-field-disabled: #262626;
|
16981
17008
|
--cds-border-disabled: #262626;
|
16982
17009
|
--cds-text-disabled: #525252;
|
16983
17010
|
--cds-button-disabled: #525252;
|
@@ -18528,7 +18555,7 @@ a.bx--side-nav__link--current::before {
|
|
18528
18555
|
|
18529
18556
|
.bx--search-input[disabled] {
|
18530
18557
|
border-bottom: 1px solid transparent;
|
18531
|
-
background-color: var(--cds-field
|
18558
|
+
background-color: var(--cds-field, #f4f4f4);
|
18532
18559
|
color: var(--cds-disabled-02, #c6c6c6);
|
18533
18560
|
cursor: not-allowed;
|
18534
18561
|
}
|
@@ -19721,9 +19748,6 @@ a.bx--side-nav__link--current::before {
|
|
19721
19748
|
justify-content: space-between;
|
19722
19749
|
border-top: 1px solid var(--cds-ui-03, #e0e0e0);
|
19723
19750
|
}
|
19724
|
-
.c4p--card__productive .c4p--card__footer .bx--btn svg {
|
19725
|
-
margin-left: var(--cds-spacing-03, 0.5rem);
|
19726
|
-
}
|
19727
19751
|
.c4p--card__productive .c4p--card__footer-no-button {
|
19728
19752
|
justify-content: flex-end;
|
19729
19753
|
}
|
@@ -21113,7 +21137,7 @@ a.bx--side-nav__link--current::before {
|
|
21113
21137
|
/* stylelint-disable-line no-invalid-position-at-import-rule */
|
21114
21138
|
/* stylelint-disable-line no-invalid-position-at-import-rule */
|
21115
21139
|
/* stylelint-disable-line no-invalid-position-at-import-rule */
|
21116
|
-
@keyframes
|
21140
|
+
@keyframes web-terminal-entrance {
|
21117
21141
|
0% {
|
21118
21142
|
opacity: 0;
|
21119
21143
|
transform: translateX(36.5rem);
|
@@ -21123,7 +21147,7 @@ a.bx--side-nav__link--current::before {
|
|
21123
21147
|
transform: translateX(0);
|
21124
21148
|
}
|
21125
21149
|
}
|
21126
|
-
@keyframes
|
21150
|
+
@keyframes web-terminal-exit {
|
21127
21151
|
0% {
|
21128
21152
|
opacity: 1;
|
21129
21153
|
transform: translateX(0);
|
@@ -21271,8 +21295,6 @@ a.bx--side-nav__link--current::before {
|
|
21271
21295
|
--cds-layer-selected-hover: #656565;
|
21272
21296
|
--cds-layer-selected-inverse: #f4f4f4;
|
21273
21297
|
--cds-border-subtle-selected: #6f6f6f;
|
21274
|
-
--cds-layer-disabled: #393939;
|
21275
|
-
--cds-field-disabled: #393939;
|
21276
21298
|
--cds-border-disabled: #393939;
|
21277
21299
|
--cds-text-disabled: #6f6f6f;
|
21278
21300
|
--cds-button-disabled: #6f6f6f;
|
@@ -21717,8 +21739,6 @@ a.bx--side-nav__link--current::before {
|
|
21717
21739
|
--cds-layer-selected-hover: #4c4c4c;
|
21718
21740
|
--cds-layer-selected-inverse: #f4f4f4;
|
21719
21741
|
--cds-border-subtle-selected: #525252;
|
21720
|
-
--cds-layer-disabled: #262626;
|
21721
|
-
--cds-field-disabled: #262626;
|
21722
21742
|
--cds-border-disabled: #262626;
|
21723
21743
|
--cds-text-disabled: #525252;
|
21724
21744
|
--cds-button-disabled: #525252;
|
@@ -22672,6 +22692,7 @@ a.bx--side-nav__link--current::before {
|
|
22672
22692
|
.c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__main {
|
22673
22693
|
position: relative;
|
22674
22694
|
display: inline-flex;
|
22695
|
+
width: 100%;
|
22675
22696
|
min-height: var(--size);
|
22676
22697
|
vertical-align: top;
|
22677
22698
|
}
|
@@ -22782,17 +22803,150 @@ a.bx--side-nav__link--current::before {
|
|
22782
22803
|
/* stylelint-disable-line no-invalid-position-at-import-rule */
|
22783
22804
|
/* stylelint-disable-line no-invalid-position-at-import-rule */
|
22784
22805
|
.c4p--inline-edit {
|
22806
|
+
--c4p--inline-edit--size: var(--cds-spacing-08, 2.5rem);
|
22807
|
+
--c4p--inline-edit--icon-size: var(--cds-spacing-05, 1rem);
|
22808
|
+
--c4p--inline-edit--background-color: var(--cds-ui-01, #f4f4f4);
|
22809
|
+
position: relative;
|
22785
22810
|
display: inline-flex;
|
22786
|
-
|
22811
|
+
max-width: 100%;
|
22812
|
+
height: var(--c4p--inline-edit--size);
|
22813
|
+
background-color: var(--c4p--inline-edit--background-color);
|
22814
|
+
cursor: text;
|
22815
|
+
transition: background-color 70ms cubic-bezier(0, 0, 0.38, 0.9), box-shadow 70ms cubic-bezier(0, 0, 0.38, 0.9), border-color 70ms cubic-bezier(0, 0, 0.38, 0.9);
|
22816
|
+
white-space: nowrap;
|
22787
22817
|
}
|
22788
|
-
|
22789
|
-
|
22818
|
+
.c4p--inline-edit.c4p--inline-edit--light {
|
22819
|
+
--c4p--inline-edit--background-color: transparent;
|
22820
|
+
}
|
22821
|
+
.c4p--inline-edit:hover {
|
22822
|
+
--c4p--inline-edit--background-color: var(--cds-hover-field, #e5e5e5);
|
22823
|
+
}
|
22824
|
+
.c4p--inline-edit.c4p--inline-edit--sm {
|
22825
|
+
--c4p--inline-edit--size: var(--cds-spacing-07, 2rem);
|
22826
|
+
--c4p--inline-edit--icon-size: var(--cds-spacing-05, 1rem);
|
22827
|
+
}
|
22828
|
+
.c4p--inline-edit.c4p--inline-edit--lg {
|
22829
|
+
--c4p--inline-edit--size: var(--cds-spacing-09, 3rem);
|
22830
|
+
--c4p--inline-edit--icon-size: var(--cds-spacing-05, 1rem);
|
22831
|
+
}
|
22832
|
+
.c4p--inline-edit.c4p--inline-edit--editing {
|
22833
|
+
outline: var(--cds-spacing-01, 0.125rem) solid var(--cds-focus, #0f62fe);
|
22834
|
+
outline-offset: calc(-1 * var(--cds-spacing-01, 0.125rem));
|
22835
|
+
background-color: var(--cds-ui-01, #f4f4f4);
|
22836
|
+
}
|
22837
|
+
@media screen and (prefers-contrast) {
|
22838
|
+
.c4p--inline-edit.c4p--inline-edit--editing {
|
22839
|
+
outline-style: dotted;
|
22840
|
+
}
|
22841
|
+
}
|
22842
|
+
.c4p--inline-edit .c4p--inline-edit--invalid {
|
22843
|
+
outline: var(--cds-spacing-01, 0.125rem) solid var(--cds-support-01, #da1e28);
|
22844
|
+
outline-offset: calc(-1 * var(--cds-spacing-01, 0.125rem));
|
22845
|
+
}
|
22846
|
+
@media screen and (prefers-contrast) {
|
22847
|
+
.c4p--inline-edit .c4p--inline-edit--invalid {
|
22848
|
+
outline-style: dotted;
|
22849
|
+
}
|
22850
|
+
}
|
22851
|
+
.c4p--inline-edit .c4p--inline-edit__input {
|
22790
22852
|
display: flex;
|
22853
|
+
overflow: hidden;
|
22854
|
+
max-width: calc(100% - 2 * var(--c4p--inline-edit--size) - var(--cds-spacing-05, 1rem));
|
22855
|
+
height: 100%;
|
22856
|
+
flex: 1 1 100%;
|
22791
22857
|
align-items: center;
|
22858
|
+
margin-right: calc(2 * var(--c4p--inline-edit--size));
|
22859
|
+
margin-left: var(--cds-spacing-05, 1rem);
|
22792
22860
|
}
|
22793
|
-
|
22794
|
-
|
22795
|
-
|
22861
|
+
.c4p--inline-edit .c4p--inline-edit__input:focus {
|
22862
|
+
outline: none;
|
22863
|
+
}
|
22864
|
+
.c4p--inline-edit .c4p--inline-edit__placeholder {
|
22865
|
+
position: absolute;
|
22866
|
+
left: var(--cds-spacing-03, 0.5rem);
|
22867
|
+
}
|
22868
|
+
.c4p--inline-edit .c4p--inline-edit__controls {
|
22869
|
+
position: absolute;
|
22870
|
+
top: 0;
|
22871
|
+
right: 0;
|
22872
|
+
width: calc(2 * var(--c4p--inline-edit--size));
|
22873
|
+
height: 100%;
|
22874
|
+
cursor: text;
|
22875
|
+
}
|
22876
|
+
.c4p--inline-edit .c4p--inline-edit__controls--animation {
|
22877
|
+
clip-path: polygon(0 0, -100vw 0, -100vw -100vh, 100vw -100vh, 100vw 0, 100% 0, 100% 100%, 100vw 100%, 100vw 100vh, -100vw 100vh, -100vw 100%, 0 100%);
|
22878
|
+
}
|
22879
|
+
.c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__controls::after {
|
22880
|
+
position: absolute;
|
22881
|
+
top: 0;
|
22882
|
+
left: 0;
|
22883
|
+
display: block;
|
22884
|
+
width: 100%;
|
22885
|
+
height: 100%;
|
22886
|
+
box-sizing: border-box;
|
22887
|
+
border: 2px solid var(--cds-focus, #0f62fe);
|
22888
|
+
border-left: 0;
|
22889
|
+
content: "";
|
22890
|
+
pointer-events: none;
|
22891
|
+
}
|
22892
|
+
.c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__save, .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__cancel {
|
22893
|
+
width: var(--c4p--inline-edit--size);
|
22894
|
+
height: 100%;
|
22895
|
+
min-height: initial;
|
22896
|
+
max-height: var(--c4p--inline-edit--size);
|
22897
|
+
padding: calc(0.5 * (var(--c4p--inline-edit--size) - var(--c4p--inline-edit--icon-size)));
|
22898
|
+
border: 2px solid transparent;
|
22899
|
+
}
|
22900
|
+
.c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__save:hover, .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__cancel:hover {
|
22901
|
+
outline: initial;
|
22902
|
+
}
|
22903
|
+
.c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__save:focus:active, .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__save:focus, .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__cancel:focus:active, .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__cancel:focus {
|
22904
|
+
border-color: var(--cds-focus, #0f62fe);
|
22905
|
+
box-shadow: initial;
|
22906
|
+
outline: initial;
|
22907
|
+
}
|
22908
|
+
.c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__save:focus:active:hover, .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__cancel:focus:active:hover {
|
22909
|
+
box-shadow: inset 0 0 0 1px var(--cds-field-01, #f4f4f4);
|
22910
|
+
}
|
22911
|
+
.c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__save::before, .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__cancel::before {
|
22912
|
+
background-color: transparent;
|
22913
|
+
}
|
22914
|
+
.c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__save[disabled], .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__cancel[disabled] {
|
22915
|
+
border-color: transparent;
|
22916
|
+
}
|
22917
|
+
.c4p--inline-edit .c4p--inline-edit__controls .c4p--inline-edit__edit {
|
22918
|
+
margin-left: var(--c4p--inline-edit--size);
|
22919
|
+
}
|
22920
|
+
.c4p--inline-edit .c4p--inline-edit__controls--animation .c4p--inline-edit__cancel {
|
22921
|
+
margin-left: var(--c4p--inline-edit--size);
|
22922
|
+
transition: margin-left 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
22923
|
+
}
|
22924
|
+
.c4p--inline-edit .c4p--inline-edit__controls--saveable .c4p--inline-edit__cancel {
|
22925
|
+
margin-left: 0;
|
22926
|
+
}
|
22927
|
+
.c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__edit {
|
22928
|
+
width: var(--c4p--inline-edit--size);
|
22929
|
+
height: 100%;
|
22930
|
+
min-height: initial;
|
22931
|
+
max-height: var(--c4p--inline-edit--size);
|
22932
|
+
padding: calc(0.5 * (var(--c4p--inline-edit--size) - var(--c4p--inline-edit--icon-size)));
|
22933
|
+
border: 2px solid transparent;
|
22934
|
+
position: absolute;
|
22935
|
+
top: 0;
|
22936
|
+
right: 0;
|
22937
|
+
}
|
22938
|
+
.c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__edit:hover, .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__edit:active, .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__edit:focus {
|
22939
|
+
border-color: transparent;
|
22940
|
+
background-color: transparent;
|
22941
|
+
box-shadow: initial;
|
22942
|
+
outline: initial;
|
22943
|
+
}
|
22944
|
+
.c4p--inline-edit .c4p--inline-edit__edit--hover-visible {
|
22945
|
+
opacity: 0;
|
22946
|
+
transition: opacity 70ms cubic-bezier(0, 0, 0.38, 0.9);
|
22947
|
+
}
|
22948
|
+
.c4p--inline-edit:hover .c4p--inline-edit__edit--hover-visible {
|
22949
|
+
opacity: 1;
|
22796
22950
|
}
|
22797
22951
|
|
22798
22952
|
/*# sourceMappingURL=index.css.map */
|