@dynamic-framework/ui-react 2.0.0-dev.4 → 2.0.0-dev.5
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.
- package/dist/css/dynamic-ui-non-root.css +65 -45
- package/dist/css/dynamic-ui-non-root.min.css +2 -2
- package/dist/css/dynamic-ui-root.css +1 -1
- package/dist/css/dynamic-ui-root.min.css +1 -1
- package/dist/css/dynamic-ui.css +65 -45
- package/dist/css/dynamic-ui.min.css +2 -2
- package/dist/index.esm.js +231 -23
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +232 -22
- package/dist/index.js.map +1 -1
- package/dist/types/components/DButton/DButton.d.ts +7 -17
- package/dist/types/components/DInputCheck/DInputCheck.d.ts +2 -1
- package/dist/types/components/DInputSwitch/DInputSwitch.d.ts +2 -1
- package/dist/types/components/DPasswordStrengthMeter/DPasswordStrengthMeter.d.ts +23 -0
- package/dist/types/components/DPasswordStrengthMeter/PasswordCheckItem.d.ts +7 -0
- package/dist/types/components/DPasswordStrengthMeter/PasswordCheckList.d.ts +14 -0
- package/dist/types/components/DPasswordStrengthMeter/PasswordStrength.d.ts +6 -0
- package/dist/types/components/DPasswordStrengthMeter/index.d.ts +3 -0
- package/dist/types/components/DVoucher/DVoucher.d.ts +14 -0
- package/dist/types/components/DVoucher/hooks/useScreenshot.d.ts +5 -0
- package/dist/types/components/DVoucher/hooks/useScreenshotDownload.d.ts +5 -0
- package/dist/types/components/DVoucher/hooks/useScreenshotWebShare.d.ts +5 -0
- package/dist/types/components/DVoucher/index.d.ts +2 -0
- package/dist/types/components/index.d.ts +3 -0
- package/jest/setup.js +0 -2
- package/package.json +6 -4
- package/src/style/abstracts/variables/_buttons.scss +2 -0
- package/src/style/base/_buttons.scss +56 -65
- package/src/style/components/_+import.scss +1 -0
- package/src/style/components/_d-voucher.scss +30 -0
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* dynamic-framework 2.0.0-dev.
|
|
2
|
+
* dynamic-framework 2.0.0-dev.5
|
|
3
3
|
* bootstrap ~5.3.8
|
|
4
4
|
* license https://github.com/dynamic-framework/dynamic-ui/blob/master/libraries/dynamic-ui-react/LICENSE.md
|
|
5
5
|
*/
|
|
@@ -8463,6 +8463,8 @@ body {
|
|
|
8463
8463
|
--bs-btn-sm-padding-x: 0.75rem;
|
|
8464
8464
|
--bs-btn-sm-font-size: var(--bs-fs-small);
|
|
8465
8465
|
--bs-btn-box-shadow: btn-box-shadow;
|
|
8466
|
+
--bs-btn-loading-gap: var(--bs-ref-spacer-2);
|
|
8467
|
+
position: relative;
|
|
8466
8468
|
display: inline-flex;
|
|
8467
8469
|
flex-direction: row;
|
|
8468
8470
|
gap: var(--bs-btn-gap, 0.5rem);
|
|
@@ -8487,16 +8489,13 @@ body {
|
|
|
8487
8489
|
background-color: var(--bs-btn-bg);
|
|
8488
8490
|
box-shadow: var(--bs-btn-box-shadow);
|
|
8489
8491
|
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
|
8492
|
+
/* stylelint-disable-next-line scss/selector-no-union-class-name */
|
|
8490
8493
|
}
|
|
8491
8494
|
@media (prefers-reduced-motion: reduce) {
|
|
8492
8495
|
.btn {
|
|
8493
8496
|
transition: none;
|
|
8494
8497
|
}
|
|
8495
8498
|
}
|
|
8496
|
-
.btn > span {
|
|
8497
|
-
-webkit-text-decoration: var(--bs-btn-text-decoration);
|
|
8498
|
-
text-decoration: var(--bs-btn-text-decoration);
|
|
8499
|
-
}
|
|
8500
8499
|
.btn.hover, .btn:hover {
|
|
8501
8500
|
color: var(--bs-btn-hover-color);
|
|
8502
8501
|
text-decoration: none;
|
|
@@ -8515,6 +8514,15 @@ body {
|
|
|
8515
8514
|
outline: 0;
|
|
8516
8515
|
box-shadow: var(--bs-btn-box-shadow), var(--bs-btn-focus-box-shadow);
|
|
8517
8516
|
}
|
|
8517
|
+
.btn-loading {
|
|
8518
|
+
position: relative;
|
|
8519
|
+
display: inline-flex;
|
|
8520
|
+
gap: var(--bs-btn-loading-gap);
|
|
8521
|
+
align-items: center;
|
|
8522
|
+
justify-content: center;
|
|
8523
|
+
width: 100%;
|
|
8524
|
+
height: 100%;
|
|
8525
|
+
}
|
|
8518
8526
|
.btn-check.focus-visible + .btn, .btn-check:focus-visible + .btn {
|
|
8519
8527
|
border-color: var(--bs-btn-hover-border-color);
|
|
8520
8528
|
outline: 0;
|
|
@@ -9294,19 +9302,16 @@ body {
|
|
|
9294
9302
|
|
|
9295
9303
|
.btn-outline-primary {
|
|
9296
9304
|
--bs-btn-color: var(--bs-primary-500);
|
|
9297
|
-
--bs-btn-hover-border-color: var(--bs-primary-700);
|
|
9298
9305
|
--bs-btn-border-color: var(--bs-primary-500);
|
|
9299
|
-
--bs-btn-
|
|
9300
|
-
--bs-btn-
|
|
9301
|
-
--bs-btn-
|
|
9302
|
-
--bs-btn-
|
|
9303
|
-
--bs-btn-
|
|
9304
|
-
--bs-btn-box-shadow: 0 0 0 transparent;
|
|
9306
|
+
--bs-btn-hover-color: var(--bs-primary-600);
|
|
9307
|
+
--bs-btn-hover-border-color: var(--bs-primary-600);
|
|
9308
|
+
--bs-btn-active-color: var(--bs-primary-700);
|
|
9309
|
+
--bs-btn-active-border-color: var(--bs-primary-700);
|
|
9310
|
+
--bs-btn-focus-color: var(--bs-primary-700);
|
|
9305
9311
|
--bs-btn-focus-shadow-rgb: var(--bs-btn-primary-focus-shadow-rgb);
|
|
9306
|
-
|
|
9307
|
-
.btn-outline-primary:disabled, .btn-outline-primary.disabled {
|
|
9308
|
-
--bs-btn-disabled-border-color: var(--bs-primary-500);
|
|
9312
|
+
--bs-btn-box-shadow: 0 0 0 transparent;
|
|
9309
9313
|
--bs-btn-disabled-color: var(--bs-primary-500);
|
|
9314
|
+
--bs-btn-disabled-border-color: var(--bs-primary-500);
|
|
9310
9315
|
}
|
|
9311
9316
|
|
|
9312
9317
|
.btn-outline-secondary {
|
|
@@ -9314,20 +9319,16 @@ body {
|
|
|
9314
9319
|
--bs-btn-hover-border-color: var(--bs-secondary-400);
|
|
9315
9320
|
--bs-btn-border-color: var(--bs-secondary-200);
|
|
9316
9321
|
--bs-btn-active-border-color: var(--bs-secondary-400);
|
|
9317
|
-
--bs-btn-active-color: var(--bs-secondary-700);
|
|
9318
|
-
--bs-btn-hover-color: var(--bs-secondary-700);
|
|
9319
9322
|
--bs-btn-focus-color: var(--bs-secondary-700);
|
|
9320
|
-
--bs-btn-box-shadow: 0 0 0 transparent;
|
|
9321
9323
|
--bs-btn-focus-shadow-rgb: var(--bs-btn-secondary-focus-shadow-rgb);
|
|
9322
|
-
|
|
9323
|
-
|
|
9324
|
+
--bs-btn-box-shadow: 0 0 0 transparent;
|
|
9325
|
+
--bs-btn-disabled-color: var(--bs-secondary-700);
|
|
9324
9326
|
--bs-btn-disabled-border-color: var(--bs-secondary-200);
|
|
9325
|
-
--bs-btn-disabled-color: var(--bs-secondary-600);
|
|
9326
9327
|
}
|
|
9327
9328
|
|
|
9328
9329
|
.btn-outline-light {
|
|
9329
9330
|
--bs-btn-color: var(--bs-gray-25);
|
|
9330
|
-
--bs-btn-hover-border-color: var(--bs-gray-
|
|
9331
|
+
--bs-btn-hover-border-color: var(--bs-gray-50);
|
|
9331
9332
|
--bs-btn-border-color: var(--bs-gray-25);
|
|
9332
9333
|
--bs-btn-active-border-color: var(--bs-gray-50);
|
|
9333
9334
|
--bs-btn-active-color: var(--bs-gray-50);
|
|
@@ -9335,8 +9336,6 @@ body {
|
|
|
9335
9336
|
--bs-btn-focus-color: var(--bs-gray-50);
|
|
9336
9337
|
--bs-btn-box-shadow: 0 0 0 transparent;
|
|
9337
9338
|
--bs-btn-focus-shadow-rgb: var(--bs-btn-light-focus-shadow-rgb);
|
|
9338
|
-
}
|
|
9339
|
-
.btn-outline-light:disabled, .btn-outline-light.disabled {
|
|
9340
9339
|
--bs-btn-disabled-border-color: var(--bs-gray-25);
|
|
9341
9340
|
--bs-btn-disabled-color: var(--bs-gray-25);
|
|
9342
9341
|
opacity: var(--bs-btn-disabled-opacity);
|
|
@@ -9352,8 +9351,6 @@ body {
|
|
|
9352
9351
|
--bs-btn-focus-color: var(--bs-success-700);
|
|
9353
9352
|
--bs-btn-box-shadow: 0 0 0 transparent;
|
|
9354
9353
|
--bs-btn-focus-shadow-rgb: var(--bs-btn-success-focus-shadow-rgb);
|
|
9355
|
-
}
|
|
9356
|
-
.btn-outline-success:disabled, .btn-outline-success.disabled {
|
|
9357
9354
|
--bs-btn-disabled-border-color: var(--bs-success-500);
|
|
9358
9355
|
--bs-btn-disabled-color: var(--bs-success-500);
|
|
9359
9356
|
}
|
|
@@ -9368,9 +9365,7 @@ body {
|
|
|
9368
9365
|
--bs-btn-focus-color: var(--bs-danger-700);
|
|
9369
9366
|
--bs-btn-box-shadow: 0 0 0 transparent;
|
|
9370
9367
|
--bs-btn-focus-shadow-rgb: var(--bs-btn-danger-focus-shadow-rgb);
|
|
9371
|
-
|
|
9372
|
-
.btn-outline-danger:disabled, .btn-outline-danger.disabled {
|
|
9373
|
-
--bs-btn-active-border-color: var(--bs-danger-500);
|
|
9368
|
+
--bs-btn-disabled-border-color: var(--bs-danger-500);
|
|
9374
9369
|
--bs-btn-disabled-color: var(--bs-danger-500);
|
|
9375
9370
|
}
|
|
9376
9371
|
|
|
@@ -9384,40 +9379,34 @@ body {
|
|
|
9384
9379
|
--bs-btn-focus-color: var(--bs-info-700);
|
|
9385
9380
|
--bs-btn-box-shadow: 0 0 0 transparent;
|
|
9386
9381
|
--bs-btn-focus-shadow-rgb: var(--bs-btn-info-focus-shadow-rgb);
|
|
9387
|
-
}
|
|
9388
|
-
.btn-outline-info:disabled, .btn-outline-info.disabled {
|
|
9389
9382
|
--bs-btn-disabled-border-color: var(--bs-info-500);
|
|
9390
9383
|
--bs-btn-disabled-color: var(--bs-info-500);
|
|
9391
9384
|
}
|
|
9392
9385
|
|
|
9393
9386
|
.btn-outline-warning {
|
|
9394
|
-
--bs-btn-color: var(--bs-warning-
|
|
9395
|
-
--bs-btn-hover-border-color: var(--bs-warning-700);
|
|
9387
|
+
--bs-btn-color: var(--bs-warning-500);
|
|
9396
9388
|
--bs-btn-border-color: var(--bs-warning-500);
|
|
9397
|
-
--bs-btn-
|
|
9389
|
+
--bs-btn-hover-color: var(--bs-warning-600);
|
|
9390
|
+
--bs-btn-hover-border-color: var(--bs-warning-600);
|
|
9398
9391
|
--bs-btn-active-color: var(--bs-warning-700);
|
|
9399
|
-
--bs-btn-
|
|
9392
|
+
--bs-btn-active-border-color: var(--bs-warning-700);
|
|
9400
9393
|
--bs-btn-focus-color: var(--bs-warning-700);
|
|
9401
|
-
--bs-btn-box-shadow: 0 0 0 transparent;
|
|
9402
9394
|
--bs-btn-focus-shadow-rgb: var(--bs-btn-warning-focus-shadow-rgb);
|
|
9403
|
-
|
|
9404
|
-
.btn-outline-warning:disabled, .btn-outline-warning.disabled {
|
|
9395
|
+
--bs-btn-box-shadow: 0 0 0 transparent;
|
|
9405
9396
|
--bs-btn-disabled-border-color: var(--bs-warning-500);
|
|
9406
|
-
--bs-btn-disabled-color: var(--bs-warning-
|
|
9397
|
+
--bs-btn-disabled-color: var(--bs-warning-500);
|
|
9407
9398
|
}
|
|
9408
9399
|
|
|
9409
9400
|
.btn-outline-dark {
|
|
9410
9401
|
--bs-btn-color: var(--bs-black);
|
|
9411
|
-
--bs-btn-hover-border-color: var(--bs-
|
|
9402
|
+
--bs-btn-hover-border-color: var(--bs-gray-600);
|
|
9412
9403
|
--bs-btn-border-color: var(--bs-black);
|
|
9413
|
-
--bs-btn-active-border-color: var(--bs-
|
|
9414
|
-
--bs-btn-active-color: var(--bs-
|
|
9415
|
-
--bs-btn-hover-color: var(--bs-
|
|
9404
|
+
--bs-btn-active-border-color: var(--bs-gray-600);
|
|
9405
|
+
--bs-btn-active-color: var(--bs-gray-600);
|
|
9406
|
+
--bs-btn-hover-color: var(--bs-gray-600);
|
|
9416
9407
|
--bs-btn-focus-color: var(--bs-black);
|
|
9417
9408
|
--bs-btn-box-shadow: 0 0 0 transparent;
|
|
9418
9409
|
--bs-btn-focus-shadow-rgb: var(--bs-btn-dark-focus-shadow-rgb);
|
|
9419
|
-
}
|
|
9420
|
-
.btn-outline-dark:disabled, .btn-outline-dark.disabled {
|
|
9421
9410
|
--bs-btn-disabled-border-color: var(--bs-black);
|
|
9422
9411
|
--bs-btn-disabled-color: var(--bs-black);
|
|
9423
9412
|
}
|
|
@@ -11411,6 +11400,37 @@ react-datepicker__navigation
|
|
|
11411
11400
|
margin: 0;
|
|
11412
11401
|
}
|
|
11413
11402
|
|
|
11403
|
+
.d-voucher {
|
|
11404
|
+
--bs-voucher-header-gap: var(--bs-ref-spacer-4);
|
|
11405
|
+
--bs-voucher-amount-padding: var(--bs-ref-spacer-4);
|
|
11406
|
+
--bs-voucher-amount-background: var(--bs-secondary-50);
|
|
11407
|
+
--bs-voucher-amount-rounded: var(--bs-ref-spacer-4);
|
|
11408
|
+
--bs-voucher-footer-gap: var(--bs-ref-spacer-4);
|
|
11409
|
+
--bs-voucher-margin: 0 0 var(--bs-ref-spacer-4) 0;
|
|
11410
|
+
}
|
|
11411
|
+
|
|
11412
|
+
.d-voucher-header {
|
|
11413
|
+
display: flex;
|
|
11414
|
+
flex-direction: column;
|
|
11415
|
+
gap: var(--bs-voucher-header-gap);
|
|
11416
|
+
align-items: center;
|
|
11417
|
+
justify-content: center;
|
|
11418
|
+
margin: var(--bs-voucher-margin);
|
|
11419
|
+
}
|
|
11420
|
+
|
|
11421
|
+
.d-voucher-amount {
|
|
11422
|
+
padding: var(--bs-voucher-amount-padding);
|
|
11423
|
+
background: var(--bs-voucher-amount-background);
|
|
11424
|
+
border-radius: var(--bs-voucher-amount-rounded);
|
|
11425
|
+
}
|
|
11426
|
+
|
|
11427
|
+
.d-voucher-footer {
|
|
11428
|
+
display: flex;
|
|
11429
|
+
gap: var(--bs-voucher-footer-gap);
|
|
11430
|
+
justify-content: center;
|
|
11431
|
+
justify-content: flex-start;
|
|
11432
|
+
}
|
|
11433
|
+
|
|
11414
11434
|
.d-close {
|
|
11415
11435
|
display: flex;
|
|
11416
11436
|
padding: 0;
|