@carbon/ibm-products 1.2.5 → 1.3.0

Sign up to get free protection for your applications and to get access to all the features.
package/css/index.css CHANGED
@@ -3042,6 +3042,296 @@ em {
3042
3042
  font-size: 0;
3043
3043
  }
3044
3044
 
3045
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
3046
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
3047
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
3048
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
3049
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
3050
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
3051
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
3052
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
3053
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
3054
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
3055
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
3056
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
3057
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
3058
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
3059
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
3060
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
3061
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
3062
+ .bx--structured-list--selection .bx--structured-list-td,
3063
+ .bx--structured-list--selection .bx--structured-list-th {
3064
+ padding-right: 1rem;
3065
+ padding-left: 1rem;
3066
+ }
3067
+ .bx--structured-list--selection .bx--structured-list-td:first-child,
3068
+ .bx--structured-list--selection .bx--structured-list-th:first-child {
3069
+ padding-right: 1rem;
3070
+ padding-left: 1rem;
3071
+ }
3072
+
3073
+ .bx--structured-list-input {
3074
+ display: none;
3075
+ }
3076
+
3077
+ .bx--structured-list {
3078
+ box-sizing: border-box;
3079
+ padding: 0;
3080
+ border: 0;
3081
+ margin: 0;
3082
+ font-family: inherit;
3083
+ font-size: 100%;
3084
+ vertical-align: baseline;
3085
+ display: table;
3086
+ width: 100%;
3087
+ margin-bottom: 5rem;
3088
+ background-color: transparent;
3089
+ border-collapse: collapse;
3090
+ border-spacing: 0;
3091
+ overflow-x: auto;
3092
+ overflow-y: hidden;
3093
+ }
3094
+ .bx--structured-list *,
3095
+ .bx--structured-list *::before,
3096
+ .bx--structured-list *::after {
3097
+ box-sizing: inherit;
3098
+ }
3099
+ .bx--structured-list.bx--structured-list--condensed .bx--structured-list-td, .bx--structured-list.bx--structured-list--condensed .bx--structured-list-th {
3100
+ padding: 0.5rem;
3101
+ }
3102
+ .bx--structured-list .bx--structured-list-row .bx--structured-list-td:first-of-type,
3103
+ .bx--structured-list .bx--structured-list-row .bx--structured-list-th:first-of-type {
3104
+ padding-left: 1rem;
3105
+ }
3106
+ .bx--structured-list.bx--structured-list--flush .bx--structured-list-row .bx--structured-list-td, .bx--structured-list.bx--structured-list--flush .bx--structured-list-row .bx--structured-list-th, .bx--structured-list.bx--structured-list--flush .bx--structured-list-row .bx--structured-list-td:first-of-type, .bx--structured-list.bx--structured-list--flush .bx--structured-list-row .bx--structured-list-th:first-of-type {
3107
+ padding-right: 1rem;
3108
+ padding-left: 0;
3109
+ }
3110
+
3111
+ .bx--structured-list-row {
3112
+ display: table-row;
3113
+ border-bottom: 1px solid var(--cds-ui-03, #e0e0e0);
3114
+ transition: background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
3115
+ }
3116
+
3117
+ .bx--structured-list--selection .bx--structured-list-row:hover:not(.bx--structured-list-row--header-row):not(.bx--structured-list-row--selected) {
3118
+ border-bottom: 1px solid var(--cds-hover-row, #e5e5e5);
3119
+ background-color: var(--cds-hover-row, #e5e5e5);
3120
+ cursor: pointer;
3121
+ }
3122
+
3123
+ .bx--structured-list-row.bx--structured-list-row--selected {
3124
+ background-color: var(--cds-selected-ui, #e0e0e0);
3125
+ }
3126
+
3127
+ .bx--structured-list-row.bx--structured-list-row--header-row {
3128
+ border-bottom: 1px solid var(--cds-selected-ui, #e0e0e0);
3129
+ cursor: inherit;
3130
+ }
3131
+
3132
+ .bx--structured-list-row:focus:not(.bx--structured-list-row--header-row) {
3133
+ outline: 2px solid var(--cds-focus, #0f62fe);
3134
+ outline-offset: -2px;
3135
+ }
3136
+ @media screen and (prefers-contrast) {
3137
+ .bx--structured-list-row:focus:not(.bx--structured-list-row--header-row) {
3138
+ outline-style: dotted;
3139
+ }
3140
+ }
3141
+
3142
+ .bx--structured-list--selection .bx--structured-list-row:hover:not(.bx--structured-list-row--header-row) > .bx--structured-list-td,
3143
+ .bx--structured-list-row.bx--structured-list-row--selected > .bx--structured-list-td {
3144
+ color: var(--cds-text-01, #161616);
3145
+ }
3146
+
3147
+ .bx--structured-list--selection .bx--structured-list-row:hover:not(.bx--structured-list-row--header-row) > .bx--structured-list-td {
3148
+ border-top: 1px solid var(--cds-ui-01, #f4f4f4);
3149
+ }
3150
+
3151
+ .bx--structured-list-thead {
3152
+ display: table-header-group;
3153
+ vertical-align: middle;
3154
+ }
3155
+
3156
+ .bx--structured-list-th {
3157
+ box-sizing: border-box;
3158
+ padding: 0;
3159
+ border: 0;
3160
+ margin: 0;
3161
+ font-family: inherit;
3162
+ font-size: 100%;
3163
+ vertical-align: baseline;
3164
+ padding: 1rem 0.5rem 0.5rem 0.5rem;
3165
+ font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
3166
+ font-weight: var(--cds-productive-heading-01-font-weight, 600);
3167
+ line-height: var(--cds-productive-heading-01-line-height, 1.28572);
3168
+ letter-spacing: var(--cds-productive-heading-01-letter-spacing, 0.16px);
3169
+ display: table-cell;
3170
+ height: 2.5rem;
3171
+ color: var(--cds-text-01, #161616);
3172
+ font-weight: 600;
3173
+ text-align: left;
3174
+ text-transform: none;
3175
+ vertical-align: top;
3176
+ }
3177
+ .bx--structured-list-th *,
3178
+ .bx--structured-list-th *::before,
3179
+ .bx--structured-list-th *::after {
3180
+ box-sizing: inherit;
3181
+ }
3182
+
3183
+ .bx--structured-list-tbody {
3184
+ display: table-row-group;
3185
+ vertical-align: middle;
3186
+ }
3187
+
3188
+ .bx--structured-list-td {
3189
+ box-sizing: border-box;
3190
+ padding: 0;
3191
+ border: 0;
3192
+ margin: 0;
3193
+ font-family: inherit;
3194
+ font-size: 100%;
3195
+ vertical-align: baseline;
3196
+ font-size: var(--cds-body-long-01-font-size, 0.875rem);
3197
+ font-weight: var(--cds-body-long-01-font-weight, 400);
3198
+ line-height: var(--cds-body-long-01-line-height, 1.42857);
3199
+ letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
3200
+ padding: 1rem 0.5rem 1.5rem 0.5rem;
3201
+ position: relative;
3202
+ display: table-cell;
3203
+ max-width: 36rem;
3204
+ color: var(--cds-text-02, #525252);
3205
+ transition: color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
3206
+ }
3207
+ .bx--structured-list-td *,
3208
+ .bx--structured-list-td *::before,
3209
+ .bx--structured-list-td *::after {
3210
+ box-sizing: inherit;
3211
+ }
3212
+
3213
+ .bx--structured-list-content--nowrap {
3214
+ white-space: nowrap;
3215
+ }
3216
+
3217
+ .bx--structured-list-svg {
3218
+ display: inline-block;
3219
+ fill: transparent;
3220
+ transition: all 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
3221
+ vertical-align: middle;
3222
+ }
3223
+
3224
+ .bx--structured-list-input:checked + .bx--structured-list-row .bx--structured-list-svg,
3225
+ .bx--structured-list-input:checked + .bx--structured-list-td .bx--structured-list-svg {
3226
+ fill: var(--cds-icon-01, #161616);
3227
+ }
3228
+
3229
+ .bx--structured-list.bx--skeleton .bx--structured-list-th:first-child {
3230
+ width: 8%;
3231
+ }
3232
+ .bx--structured-list.bx--skeleton .bx--structured-list-th:nth-child(3n+2) {
3233
+ width: 30%;
3234
+ }
3235
+ .bx--structured-list.bx--skeleton .bx--structured-list-th:nth-child(3n+3) {
3236
+ width: 15%;
3237
+ }
3238
+ .bx--structured-list.bx--skeleton span {
3239
+ position: relative;
3240
+ padding: 0;
3241
+ border: none;
3242
+ background: var(--cds-skeleton-01, #e5e5e5);
3243
+ box-shadow: none;
3244
+ pointer-events: none;
3245
+ display: block;
3246
+ width: 75%;
3247
+ height: 1rem;
3248
+ }
3249
+ .bx--structured-list.bx--skeleton span:hover, .bx--structured-list.bx--skeleton span:focus, .bx--structured-list.bx--skeleton span:active {
3250
+ border: none;
3251
+ cursor: default;
3252
+ outline: none;
3253
+ }
3254
+ .bx--structured-list.bx--skeleton span::before {
3255
+ position: absolute;
3256
+ top: 0;
3257
+ left: 0;
3258
+ width: 100%;
3259
+ height: 100%;
3260
+ animation: 3000ms ease-in-out skeleton infinite;
3261
+ background: var(--cds-skeleton-02, #c6c6c6);
3262
+ content: "";
3263
+ will-change: transform-origin, transform, opacity;
3264
+ }
3265
+ @media (prefers-reduced-motion: reduce) {
3266
+ .bx--structured-list.bx--skeleton span::before {
3267
+ animation: none;
3268
+ }
3269
+ }
3270
+
3271
+ .bx--structured-list.bx--structured-list--selection.bx--skeleton .bx--structured-list-th:first-child {
3272
+ width: 5%;
3273
+ }
3274
+ .bx--structured-list.bx--structured-list--selection.bx--skeleton .bx--structured-list-th:first-child span {
3275
+ display: none;
3276
+ }
3277
+
3278
+ @media screen and (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast) {
3279
+ .bx--structured-list-input:checked + .bx--structured-list-td .bx--structured-list-svg {
3280
+ fill: ButtonText;
3281
+ }
3282
+ }
3283
+
3284
+ .c4p--add-select__header {
3285
+ padding: var(--cds-spacing-05, 1rem);
3286
+ padding-bottom: 0;
3287
+ border-top: 1px solid var(--cds-ui-03, #e0e0e0);
3288
+ }
3289
+ .c4p--add-select__header .c4p--add-select__items-label {
3290
+ font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
3291
+ font-weight: var(--cds-productive-heading-01-font-weight, 600);
3292
+ line-height: var(--cds-productive-heading-01-line-height, 1.28572);
3293
+ letter-spacing: var(--cds-productive-heading-01-letter-spacing, 0.16px);
3294
+ }
3295
+
3296
+ .c4p--add-select__items-label {
3297
+ margin-right: var(--cds-spacing-03, 0.5rem);
3298
+ }
3299
+ .c4p--add-select__items-label-container {
3300
+ display: flex;
3301
+ align-items: center;
3302
+ margin-top: var(--cds-spacing-05, 1rem);
3303
+ margin-bottom: var(--cds-spacing-03, 0.5rem);
3304
+ }
3305
+
3306
+ .c4p--add-select__selections {
3307
+ border-top: 1px solid var(--cds-ui-03, #e0e0e0);
3308
+ }
3309
+
3310
+ .c4p--add-select__influencer-header {
3311
+ display: flex;
3312
+ padding: var(--cds-spacing-06, 1.5rem) var(--cds-spacing-05, 1rem) var(--cds-spacing-03, 0.5rem) var(--cds-spacing-05, 1rem);
3313
+ border-bottom: 1px solid var(--cds-ui-03, #e0e0e0);
3314
+ }
3315
+ .c4p--add-select__influencer-header .c4p--add-select__influencer-title {
3316
+ font-size: var(--cds-productive-heading-02-font-size, 1rem);
3317
+ font-weight: var(--cds-productive-heading-02-font-weight, 600);
3318
+ line-height: var(--cds-productive-heading-02-line-height, 1.375);
3319
+ letter-spacing: var(--cds-productive-heading-02-letter-spacing, 0);
3320
+ }
3321
+
3322
+ .c4p--add-select__influencer-title {
3323
+ margin-right: var(--cds-spacing-03, 0.5rem);
3324
+ }
3325
+
3326
+ .c4p--add-select__influencer-body {
3327
+ padding: var(--cds-spacing-05, 1rem);
3328
+ }
3329
+
3330
+ .c4p--add-select .c4p--tearsheet .c4p--tearsheet__influencer {
3331
+ max-width: 29rem;
3332
+ flex: 0 0 50%;
3333
+ }
3334
+
3045
3335
  /* stylelint-disable-line no-invalid-position-at-import-rule */
3046
3336
  /* stylelint-disable-line no-invalid-position-at-import-rule */
3047
3337
  /* stylelint-disable-line no-invalid-position-at-import-rule */
@@ -22260,5 +22550,100 @@ a.bx--side-nav__link--current::before {
22260
22550
  transition: none;
22261
22551
  }
22262
22552
  }
22553
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
22554
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
22555
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
22556
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit {
22557
+ --size: var(--cds-spacing-08, 2.5rem);
22558
+ position: relative;
22559
+ width: 100%;
22560
+ min-height: var(--size);
22561
+ }
22562
+
22563
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit--xl {
22564
+ --size: $spacing-09;
22565
+ }
22566
+
22567
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__input {
22568
+ height: var(--size);
22569
+ padding-right: calc(2 * var(--size));
22570
+ }
22571
+
22572
+ .c4p--cancelable-text-edit__buttons {
22573
+ position: absolute;
22574
+ top: 0;
22575
+ right: 0;
22576
+ }
22577
+
22578
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__revert,
22579
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__save {
22580
+ width: var(--size);
22581
+ height: var(--size);
22582
+ min-height: var(--size);
22583
+ }
22584
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__revert:hover,
22585
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__save:hover {
22586
+ border-color: var(--cds-hover-field, #e5e5e5);
22587
+ border-bottom: 1px solid transparent;
22588
+ background-clip: content-box;
22589
+ box-shadow: initial;
22590
+ }
22591
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__revert:focus:active, .c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__revert:focus,
22592
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__save:focus:active,
22593
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__save:focus {
22594
+ border-width: 2px;
22595
+ border-color: var(--cds-focus, #0f62fe);
22596
+ box-shadow: initial;
22597
+ }
22598
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__revert:focus:active:hover,
22599
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__save:focus:active:hover {
22600
+ padding: 1px;
22601
+ }
22602
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__revert::before,
22603
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__save::before {
22604
+ background-color: transparent;
22605
+ }
22606
+
22607
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit--invalid .bx--text-input-wrapper ~ .c4p--cancelable-text-edit__buttons .c4p--cancelable-text-edit__revert,
22608
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit--invalid .bx--text-input-wrapper ~ .c4p--cancelable-text-edit__buttons .c4p--cancelable-text-edit__save,
22609
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit .bx--text-input-wrapper:focus-within ~ .c4p--cancelable-text-edit__buttons .c4p--cancelable-text-edit__revert,
22610
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit .bx--text-input-wrapper:focus-within ~ .c4p--cancelable-text-edit__buttons .c4p--cancelable-text-edit__save {
22611
+ border: 2px solid transparent;
22612
+ }
22613
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit--invalid .bx--text-input-wrapper ~ .c4p--cancelable-text-edit__buttons .c4p--cancelable-text-edit__revert:hover,
22614
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit--invalid .bx--text-input-wrapper ~ .c4p--cancelable-text-edit__buttons .c4p--cancelable-text-edit__save:hover,
22615
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit .bx--text-input-wrapper:focus-within ~ .c4p--cancelable-text-edit__buttons .c4p--cancelable-text-edit__revert:hover,
22616
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit .bx--text-input-wrapper:focus-within ~ .c4p--cancelable-text-edit__buttons .c4p--cancelable-text-edit__save:hover {
22617
+ border-top: 2px solid transparent;
22618
+ border-bottom: 2px solid transparent;
22619
+ background-clip: content-box;
22620
+ }
22621
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit--invalid .bx--text-input-wrapper ~ .c4p--cancelable-text-edit__buttons .c4p--cancelable-text-edit__save,
22622
+ .c4p--cancelable-text-edit.c4p--cancelable-text-edit .bx--text-input-wrapper:focus-within ~ .c4p--cancelable-text-edit__buttons .c4p--cancelable-text-edit__save {
22623
+ border-right: 2px solid transparent;
22624
+ }
22625
+
22626
+ .c4p--cancelable-text-edit--invalid > .bx--form-requirement,
22627
+ .c4p--cancelable-text-edit--warn > .bx--form-requirement {
22628
+ display: block;
22629
+ max-height: initial;
22630
+ margin-left: calc(20% + 1.25rem);
22631
+ }
22632
+
22633
+ .c4p--cancelable-text-edit--invalid > .bx--form-requirement {
22634
+ color: var(--cds-text-error, #da1e28);
22635
+ }
22636
+
22637
+ .c4p--cancelable-text-edit .bx--text-input {
22638
+ padding-right: calc(2 * var(--size));
22639
+ }
22640
+
22641
+ .c4p--cancelable-text-edit .bx--text-input--invalid {
22642
+ padding-right: calc(3 * var(--size));
22643
+ }
22644
+
22645
+ .c4p--cancelable-text-edit .bx--text-input__invalid-icon {
22646
+ margin-right: var(--cds-spacing-11, 5rem);
22647
+ }
22263
22648
 
22264
22649
  /*# sourceMappingURL=index.css.map */