@deque/cauldron-styles 3.0.1-canary.dda42da8 → 3.0.1-canary.f7d9078a
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/index.css +234 -76
- package/package.json +1 -1
package/dist/index.css
CHANGED
|
@@ -122,6 +122,11 @@
|
|
|
122
122
|
|
|
123
123
|
.cauldron--theme-dark {
|
|
124
124
|
--workspace-background-color: var(--dark-workspace-color);
|
|
125
|
+
color-scheme: dark;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
.cauldron--theme-light {
|
|
129
|
+
color-scheme: light;
|
|
125
130
|
}
|
|
126
131
|
|
|
127
132
|
html {
|
|
@@ -210,7 +215,7 @@ p {
|
|
|
210
215
|
padding: var(--layout-padding) var(--layout-padding) 0 var(--layout-padding);
|
|
211
216
|
position: fixed;
|
|
212
217
|
overflow-x: hidden;
|
|
213
|
-
overflow-y:
|
|
218
|
+
overflow-y: auto;
|
|
214
219
|
-webkit-overflow-scrolling: touch;
|
|
215
220
|
right: 0;
|
|
216
221
|
bottom: 0;
|
|
@@ -230,7 +235,7 @@ p {
|
|
|
230
235
|
|
|
231
236
|
.Layout .Main:focus {
|
|
232
237
|
outline: 0;
|
|
233
|
-
border-left-color: var(--
|
|
238
|
+
border-left-color: var(--gray-90);
|
|
234
239
|
}
|
|
235
240
|
|
|
236
241
|
/* the left-bar style focus indication */
|
|
@@ -294,6 +299,10 @@ p {
|
|
|
294
299
|
color: var(--white);
|
|
295
300
|
}
|
|
296
301
|
|
|
302
|
+
.cauldron--theme-dark .Layout .Main:focus {
|
|
303
|
+
border-left-color: var(--white);
|
|
304
|
+
}
|
|
305
|
+
|
|
297
306
|
:root {
|
|
298
307
|
--alert-warning-background-color: #d93251;
|
|
299
308
|
--alert-warning-header-text-color: #fff;
|
|
@@ -1575,7 +1584,6 @@ textarea.Field--has-error:focus:hover,
|
|
|
1575
1584
|
min-height: var(--space-large);
|
|
1576
1585
|
color: var(--error);
|
|
1577
1586
|
text-align: left;
|
|
1578
|
-
margin-bottom: var(--space-smallest);
|
|
1579
1587
|
font-size: var(--text-size-smallest);
|
|
1580
1588
|
font-weight: var(--font-weight-normal);
|
|
1581
1589
|
padding-left: var(--space-half);
|
|
@@ -1585,6 +1593,7 @@ textarea.Field--has-error:focus:hover,
|
|
|
1585
1593
|
display: block;
|
|
1586
1594
|
position: relative;
|
|
1587
1595
|
box-sizing: border-box;
|
|
1596
|
+
margin-bottom: var(--space-smallest);
|
|
1588
1597
|
}
|
|
1589
1598
|
|
|
1590
1599
|
.Field.is--flex-row {
|
|
@@ -1604,6 +1613,10 @@ textarea.Field--has-error:focus:hover,
|
|
|
1604
1613
|
justify-content: flex-end;
|
|
1605
1614
|
}
|
|
1606
1615
|
|
|
1616
|
+
.Checkbox {
|
|
1617
|
+
margin-bottom: var(--space-smallest);
|
|
1618
|
+
}
|
|
1619
|
+
|
|
1607
1620
|
.Checkbox + .Checkbox,
|
|
1608
1621
|
.Radio + .Radio {
|
|
1609
1622
|
margin-top: var(--space-smallest);
|
|
@@ -1952,6 +1965,7 @@ p .Link {
|
|
|
1952
1965
|
.Field__select {
|
|
1953
1966
|
display: flex;
|
|
1954
1967
|
flex-direction: column;
|
|
1968
|
+
margin-bottom: var(--space-smallest);
|
|
1955
1969
|
}
|
|
1956
1970
|
|
|
1957
1971
|
.Field__select--disabled {
|
|
@@ -2776,88 +2790,136 @@ button.TooltipTabstop {
|
|
|
2776
2790
|
color: var(--text-color-light);
|
|
2777
2791
|
}
|
|
2778
2792
|
|
|
2793
|
+
:root {
|
|
2794
|
+
--loader-ring-size: 104px;
|
|
2795
|
+
--loader-ring-thickness: 10px;
|
|
2796
|
+
--loader-inner-ring-size: 4px;
|
|
2797
|
+
--loader-ring-color: var(--accent-primary);
|
|
2798
|
+
--loader-inner-ring-color: #fff;
|
|
2799
|
+
--loader-logo-color: var(--accent-primary);
|
|
2800
|
+
--loader-text-color: var(--gray-90);
|
|
2801
|
+
--loader-overlay-border-color: var(--gray-40);
|
|
2802
|
+
--loader-overlay-background-color: var(--workspace-background-color);
|
|
2803
|
+
}
|
|
2804
|
+
|
|
2805
|
+
.cauldron--theme-dark {
|
|
2806
|
+
--loader-ring-color: var(--accent-dark);
|
|
2807
|
+
--loader-inner-ring-color: var(--accent-info);
|
|
2808
|
+
--loader-logo-color: var(--white);
|
|
2809
|
+
--loader-text-color: var(--white);
|
|
2810
|
+
--loader-overlay-border-color: #5d676e;
|
|
2811
|
+
--loader-overlay-background-color: var(--accent-medium);
|
|
2812
|
+
}
|
|
2813
|
+
|
|
2814
|
+
.Loader--large {
|
|
2815
|
+
--loader-ring-size: 192px;
|
|
2816
|
+
--loader-ring-thickness: 16px;
|
|
2817
|
+
--loader-inner-ring-size: calc(var(--loader-ring-thickness) * 0.5);
|
|
2818
|
+
}
|
|
2819
|
+
|
|
2820
|
+
.Loader {
|
|
2821
|
+
position: relative;
|
|
2822
|
+
display: flex;
|
|
2823
|
+
height: var(--loader-ring-size);
|
|
2824
|
+
width: var(--loader-ring-size);
|
|
2825
|
+
align-items: center;
|
|
2826
|
+
justify-content: center;
|
|
2827
|
+
}
|
|
2828
|
+
|
|
2829
|
+
.Loader:before,
|
|
2830
|
+
.Loader:after {
|
|
2831
|
+
content: '';
|
|
2832
|
+
display: block;
|
|
2833
|
+
border-radius: 50%;
|
|
2834
|
+
}
|
|
2835
|
+
|
|
2836
|
+
.Loader:before {
|
|
2837
|
+
height: var(--loader-ring-size);
|
|
2838
|
+
width: var(--loader-ring-size);
|
|
2839
|
+
border: var(--loader-ring-thickness) solid var(--loader-ring-color);
|
|
2840
|
+
position: absolute;
|
|
2841
|
+
}
|
|
2842
|
+
|
|
2843
|
+
.Loader:after {
|
|
2844
|
+
--size: calc(
|
|
2845
|
+
var(--loader-ring-size) - var(--loader-ring-thickness) +
|
|
2846
|
+
var(--loader-inner-ring-size)
|
|
2847
|
+
);
|
|
2848
|
+
height: var(--size);
|
|
2849
|
+
width: var(--size);
|
|
2850
|
+
border: var(--loader-inner-ring-size) solid transparent;
|
|
2851
|
+
border-top: var(--loader-inner-ring-size) solid var(--loader-inner-ring-color);
|
|
2852
|
+
animation: spin 1.5s linear infinite;
|
|
2853
|
+
}
|
|
2854
|
+
|
|
2779
2855
|
.Loader__overlay {
|
|
2780
|
-
background: var(--
|
|
2856
|
+
background: var(--loader-overlay-background-color);
|
|
2781
2857
|
position: absolute;
|
|
2782
2858
|
display: inline-flex;
|
|
2783
2859
|
flex-direction: column;
|
|
2784
2860
|
align-items: center;
|
|
2785
|
-
border:
|
|
2861
|
+
border: 1px solid var(--loader-overlay-border-color);
|
|
2786
2862
|
border-radius: 3px;
|
|
2787
2863
|
top: 50%;
|
|
2788
2864
|
left: 50%;
|
|
2789
2865
|
transform: translate(-50%, -50%);
|
|
2790
|
-
|
|
2791
|
-
|
|
2792
|
-
|
|
2793
|
-
padding: 1em;
|
|
2794
|
-
padding-top: 0;
|
|
2866
|
+
width: 260px;
|
|
2867
|
+
padding: var(--space-large) var(--space-small) var(--space-small)
|
|
2868
|
+
var(--space-small);
|
|
2795
2869
|
z-index: var(--z-index-loader);
|
|
2870
|
+
box-shadow: 1px 1px 7px 0 rgba(0, 0, 0, 0.3);
|
|
2871
|
+
font-size: var(--text-size-smaller);
|
|
2872
|
+
color: var(--text-color-base);
|
|
2873
|
+
text-align: center;
|
|
2796
2874
|
}
|
|
2797
2875
|
|
|
2798
2876
|
.cauldron--theme-dark .Loader__overlay {
|
|
2799
|
-
|
|
2877
|
+
color: var(--accent-light);
|
|
2800
2878
|
}
|
|
2801
2879
|
|
|
2802
|
-
.
|
|
2803
|
-
|
|
2804
|
-
|
|
2805
|
-
|
|
2806
|
-
height:
|
|
2807
|
-
|
|
2808
|
-
|
|
2809
|
-
background: linear-gradient(
|
|
2810
|
-
to right,
|
|
2811
|
-
var(--gray-60) 10%,
|
|
2812
|
-
rgba(255, 255, 255, 0) 42%
|
|
2813
|
-
);
|
|
2814
|
-
transform: translateZ(0);
|
|
2815
|
-
position: relative;
|
|
2816
|
-
animation: load 1.4s linear infinite;
|
|
2880
|
+
.Loader__overlay__loader {
|
|
2881
|
+
display: flex;
|
|
2882
|
+
align-items: center;
|
|
2883
|
+
justify-content: center;
|
|
2884
|
+
min-height: var(--loader-ring-size);
|
|
2885
|
+
min-width: var(--loader-ring-size);
|
|
2886
|
+
margin-bottom: var(--space-small);
|
|
2817
2887
|
}
|
|
2818
2888
|
|
|
2819
|
-
.
|
|
2820
|
-
|
|
2821
|
-
|
|
2822
|
-
background: var(--gray-60);
|
|
2823
|
-
border-radius: 100% 0 0 0;
|
|
2824
|
-
position: absolute;
|
|
2825
|
-
top: 0;
|
|
2826
|
-
left: 0;
|
|
2827
|
-
content: '';
|
|
2889
|
+
.Loader__overlay--large .Loader__overlay__loader {
|
|
2890
|
+
min-height: 192px;
|
|
2891
|
+
min-width: 192px;
|
|
2828
2892
|
}
|
|
2829
2893
|
|
|
2830
|
-
.
|
|
2831
|
-
|
|
2832
|
-
|
|
2833
|
-
|
|
2834
|
-
|
|
2835
|
-
|
|
2836
|
-
margin:
|
|
2894
|
+
.Loader__overlay__label {
|
|
2895
|
+
color: var(--loader-text-color);
|
|
2896
|
+
font-size: var(--text-size-normal);
|
|
2897
|
+
}
|
|
2898
|
+
|
|
2899
|
+
.Loader__overlay > *:last-child {
|
|
2900
|
+
margin-bottom: 0;
|
|
2901
|
+
padding-bottom: 0;
|
|
2902
|
+
}
|
|
2903
|
+
|
|
2904
|
+
.Loader__overlay .Loader {
|
|
2837
2905
|
position: absolute;
|
|
2838
|
-
top: 0;
|
|
2839
|
-
left: 0;
|
|
2840
|
-
bottom: 0;
|
|
2841
|
-
right: 0;
|
|
2842
2906
|
}
|
|
2843
2907
|
|
|
2844
|
-
.
|
|
2845
|
-
|
|
2846
|
-
|
|
2847
|
-
|
|
2848
|
-
var(--workspace-background-color) 45%
|
|
2849
|
-
);
|
|
2908
|
+
.Loader__overlay svg {
|
|
2909
|
+
color: var(--loader-logo-color);
|
|
2910
|
+
height: calc(var(--loader-ring-size) * 0.7);
|
|
2911
|
+
width: calc(var(--loader-ring-size) * 0.7);
|
|
2850
2912
|
}
|
|
2851
2913
|
|
|
2852
|
-
.
|
|
2853
|
-
|
|
2914
|
+
.Loader__overlay--large svg {
|
|
2915
|
+
height: 120px;
|
|
2916
|
+
width: 120px;
|
|
2854
2917
|
}
|
|
2855
2918
|
|
|
2856
|
-
@keyframes
|
|
2919
|
+
@keyframes spin {
|
|
2857
2920
|
0% {
|
|
2858
2921
|
transform: rotate(0deg);
|
|
2859
2922
|
}
|
|
2860
|
-
|
|
2861
2923
|
100% {
|
|
2862
2924
|
transform: rotate(360deg);
|
|
2863
2925
|
}
|
|
@@ -3441,58 +3503,88 @@ button.TooltipTabstop {
|
|
|
3441
3503
|
|
|
3442
3504
|
:root {
|
|
3443
3505
|
--panel-border-color: var(--gray-40);
|
|
3444
|
-
--panel-
|
|
3445
|
-
--panel-
|
|
3446
|
-
--panel-content-background-color: var(--white);
|
|
3447
|
-
--panel-content-color: var(--gray-60);
|
|
3506
|
+
--panel-background-color: var(--white);
|
|
3507
|
+
--panel-heading-color: var(--gray-90);
|
|
3448
3508
|
}
|
|
3449
3509
|
|
|
3450
3510
|
.Panel {
|
|
3511
|
+
padding: var(--space-large);
|
|
3451
3512
|
border: 1px solid var(--panel-border-color);
|
|
3513
|
+
border-radius: 3px;
|
|
3514
|
+
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.15);
|
|
3515
|
+
background-color: var(--panel-background-color);
|
|
3516
|
+
}
|
|
3517
|
+
|
|
3518
|
+
.Panel__Heading {
|
|
3519
|
+
font-size: var(--text-size-medium);
|
|
3520
|
+
color: var(--panel-heading-color);
|
|
3521
|
+
padding: 0;
|
|
3522
|
+
margin: 0 0 var(--space-large) 0;
|
|
3523
|
+
font-weight: var(--font-weight-bold);
|
|
3524
|
+
}
|
|
3525
|
+
|
|
3526
|
+
/* Dark Theme */
|
|
3527
|
+
|
|
3528
|
+
.cauldron--theme-dark {
|
|
3529
|
+
--panel-border-color: #5d676f;
|
|
3530
|
+
--panel-background-color: var(--accent-medium);
|
|
3531
|
+
--panel-heading-color: var(--accent-light);
|
|
3532
|
+
}
|
|
3533
|
+
|
|
3534
|
+
:root {
|
|
3535
|
+
--issue-panel-border-color: var(--gray-40);
|
|
3536
|
+
--issue-panel-header-background-color: var(--gray-20);
|
|
3537
|
+
--issue-panel-header-color: var(--gray-90);
|
|
3538
|
+
--issue-panel-content-background-color: var(--white);
|
|
3539
|
+
--issue-panel-content-color: var(--gray-60);
|
|
3452
3540
|
}
|
|
3453
3541
|
|
|
3454
|
-
.
|
|
3455
|
-
|
|
3456
|
-
|
|
3542
|
+
.IssuePanel {
|
|
3543
|
+
border: 1px solid var(--issue-panel-border-color);
|
|
3544
|
+
}
|
|
3545
|
+
|
|
3546
|
+
.IssuePanel__Header {
|
|
3547
|
+
background-color: var(--issue-panel-header-background-color);
|
|
3548
|
+
color: var(--issue-panel-header-color);
|
|
3457
3549
|
font-size: var(--text-size-normal);
|
|
3458
3550
|
display: flex;
|
|
3459
|
-
border-bottom: 1px solid var(--panel-border-color);
|
|
3551
|
+
border-bottom: 1px solid var(--issue-panel-border-color);
|
|
3460
3552
|
align-items: center;
|
|
3461
3553
|
padding: var(--space-half) 0;
|
|
3462
3554
|
}
|
|
3463
3555
|
|
|
3464
|
-
.
|
|
3556
|
+
.IssuePanel__Header-title {
|
|
3465
3557
|
flex-grow: 1;
|
|
3466
3558
|
display: flex;
|
|
3467
3559
|
font-weight: var(--font-weight-bold);
|
|
3468
3560
|
padding-left: var(--space-small);
|
|
3469
3561
|
}
|
|
3470
3562
|
|
|
3471
|
-
.
|
|
3563
|
+
.IssuePanel__Header-actions {
|
|
3472
3564
|
flex-grow: 1;
|
|
3473
3565
|
text-align: right;
|
|
3474
3566
|
margin-right: var(--space-smallest);
|
|
3475
3567
|
}
|
|
3476
3568
|
|
|
3477
|
-
.
|
|
3569
|
+
.IssuePanel__Content {
|
|
3478
3570
|
font-size: var(--text-size-smaller);
|
|
3479
|
-
background-color: var(--panel-content-background-color);
|
|
3480
|
-
color: var(--panel-content-color);
|
|
3571
|
+
background-color: var(--issue-panel-content-background-color);
|
|
3572
|
+
color: var(--issue-panel-content-color);
|
|
3481
3573
|
padding: var(--space-small);
|
|
3482
3574
|
}
|
|
3483
3575
|
|
|
3484
3576
|
/* Dark Theme */
|
|
3485
3577
|
|
|
3486
3578
|
.cauldron--theme-dark {
|
|
3487
|
-
--panel-border-color: #5d676f;
|
|
3488
|
-
--panel-header-background-color: var(--accent-dark);
|
|
3489
|
-
--panel-header-color: var(--white);
|
|
3490
|
-
--panel-content-background-color: var(--accent-medium);
|
|
3491
|
-
--panel-content-color: var(--accent-light);
|
|
3579
|
+
--issue-panel-border-color: #5d676f;
|
|
3580
|
+
--issue-panel-header-background-color: var(--accent-dark);
|
|
3581
|
+
--issue-panel-header-color: var(--white);
|
|
3582
|
+
--issue-panel-content-background-color: var(--accent-medium);
|
|
3583
|
+
--issue-panel-content-color: var(--accent-light);
|
|
3492
3584
|
}
|
|
3493
3585
|
|
|
3494
|
-
.cauldron--theme-dark .
|
|
3495
|
-
border-bottom: 1px solid var(--panel-border-color);
|
|
3586
|
+
.cauldron--theme-dark .IssuePanel__Header {
|
|
3587
|
+
border-bottom: 1px solid var(--issue-panel-border-color);
|
|
3496
3588
|
}
|
|
3497
3589
|
|
|
3498
3590
|
:root {
|
|
@@ -3693,3 +3785,69 @@ button.TooltipTabstop {
|
|
|
3693
3785
|
.Address {
|
|
3694
3786
|
line-height: var(--address-line-height);
|
|
3695
3787
|
}
|
|
3788
|
+
|
|
3789
|
+
.Pagination > ul {
|
|
3790
|
+
list-style-type: none;
|
|
3791
|
+
display: flex;
|
|
3792
|
+
align-items: center;
|
|
3793
|
+
font-size: var(--text-size-small);
|
|
3794
|
+
}
|
|
3795
|
+
|
|
3796
|
+
.Pagination > ul > li {
|
|
3797
|
+
margin-right: 5px;
|
|
3798
|
+
}
|
|
3799
|
+
|
|
3800
|
+
.Pagination button {
|
|
3801
|
+
height: 2.26rem;
|
|
3802
|
+
width: 2.26rem;
|
|
3803
|
+
border-radius: 2px;
|
|
3804
|
+
display: flex;
|
|
3805
|
+
justify-content: center;
|
|
3806
|
+
align-items: center;
|
|
3807
|
+
/* light theme-specific styles */
|
|
3808
|
+
background: var(--gray-20);
|
|
3809
|
+
border: 1px solid var(--gray-40);
|
|
3810
|
+
color: var(--gray-90);
|
|
3811
|
+
}
|
|
3812
|
+
|
|
3813
|
+
.Pagination button[aria-disabled='true'] {
|
|
3814
|
+
color: var(--gray-40);
|
|
3815
|
+
margin: 2px;
|
|
3816
|
+
}
|
|
3817
|
+
|
|
3818
|
+
.Pagination button .Icon {
|
|
3819
|
+
width: auto;
|
|
3820
|
+
height: auto;
|
|
3821
|
+
}
|
|
3822
|
+
|
|
3823
|
+
.Pagination [role='log'] {
|
|
3824
|
+
margin-left: calc(var(--space-medium) - 5px);
|
|
3825
|
+
margin-right: calc(var(--space-medium) - 5px);
|
|
3826
|
+
color: var(--gray-60);
|
|
3827
|
+
}
|
|
3828
|
+
|
|
3829
|
+
.Pagination [role='log'] strong {
|
|
3830
|
+
color: var(--gray-90);
|
|
3831
|
+
}
|
|
3832
|
+
|
|
3833
|
+
/*
|
|
3834
|
+
* dark theme
|
|
3835
|
+
*/
|
|
3836
|
+
|
|
3837
|
+
.cauldron--theme-dark .Pagination button {
|
|
3838
|
+
background-color: var(--accent-medium);
|
|
3839
|
+
border-color: transparent;
|
|
3840
|
+
}
|
|
3841
|
+
|
|
3842
|
+
.cauldron--theme-dark .Pagination button[aria-disabled='true'] {
|
|
3843
|
+
color: #5d676f;
|
|
3844
|
+
}
|
|
3845
|
+
|
|
3846
|
+
.cauldron--theme-dark .Pagination [role='log'] {
|
|
3847
|
+
color: var(--accent-light);
|
|
3848
|
+
font-variant-numeric: tabular-nums;
|
|
3849
|
+
}
|
|
3850
|
+
|
|
3851
|
+
.cauldron--theme-dark .Pagination [role='log'] strong {
|
|
3852
|
+
color: var(--white);
|
|
3853
|
+
}
|
package/package.json
CHANGED