softui-css 1.8.5 → 1.9.0
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/softui.css +404 -13
- package/dist/softui.js +197 -29
- package/dist/softui.min.css +1 -1
- package/dist/softui.min.js +1 -1
- package/package.json +1 -1
package/dist/softui.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/*! SoftUI v1.
|
|
1
|
+
/*! SoftUI v1.9.0 — A Neumorphic CSS Library */
|
|
2
2
|
|
|
3
3
|
/* ===========================================
|
|
4
4
|
CSS Variables / Tokens
|
|
@@ -433,6 +433,16 @@ a.sui-btn-warning:visited {
|
|
|
433
433
|
color: var(--sui-text-light);
|
|
434
434
|
}
|
|
435
435
|
|
|
436
|
+
.sui-input[type="number"] {
|
|
437
|
+
-moz-appearance: textfield;
|
|
438
|
+
appearance: textfield;
|
|
439
|
+
}
|
|
440
|
+
.sui-input[type="number"]::-webkit-inner-spin-button,
|
|
441
|
+
.sui-input[type="number"]::-webkit-outer-spin-button {
|
|
442
|
+
-webkit-appearance: none;
|
|
443
|
+
margin: 0;
|
|
444
|
+
}
|
|
445
|
+
|
|
436
446
|
.sui-input:focus,
|
|
437
447
|
.sui-input.sui-input-focus {
|
|
438
448
|
box-shadow: var(--sui-shadow-inset), 0 0 0 3px rgba(91, 84, 224, 0.35);
|
|
@@ -463,6 +473,132 @@ a.sui-btn-warning:visited {
|
|
|
463
473
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%238B95A8' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
|
|
464
474
|
}
|
|
465
475
|
|
|
476
|
+
/* Styled Select (custom dropdown replacement for native <select>) */
|
|
477
|
+
.sui-styled-select {
|
|
478
|
+
position: relative;
|
|
479
|
+
display: inline-block;
|
|
480
|
+
width: 100%;
|
|
481
|
+
}
|
|
482
|
+
|
|
483
|
+
.sui-styled-select-trigger {
|
|
484
|
+
display: flex;
|
|
485
|
+
align-items: center;
|
|
486
|
+
justify-content: space-between;
|
|
487
|
+
width: 100%;
|
|
488
|
+
padding: 10px 16px;
|
|
489
|
+
font-size: 14px;
|
|
490
|
+
font-family: var(--sui-font);
|
|
491
|
+
color: var(--sui-text);
|
|
492
|
+
background: var(--sui-bg);
|
|
493
|
+
border: none;
|
|
494
|
+
border-radius: var(--sui-radius-sm);
|
|
495
|
+
box-shadow: var(--sui-shadow-inset);
|
|
496
|
+
cursor: pointer;
|
|
497
|
+
outline: none;
|
|
498
|
+
text-align: left;
|
|
499
|
+
transition: box-shadow var(--sui-transition-fast);
|
|
500
|
+
}
|
|
501
|
+
|
|
502
|
+
.sui-styled-select-trigger::after {
|
|
503
|
+
content: '';
|
|
504
|
+
width: 6px;
|
|
505
|
+
height: 6px;
|
|
506
|
+
border-right: 2px solid var(--sui-text-muted);
|
|
507
|
+
border-bottom: 2px solid var(--sui-text-muted);
|
|
508
|
+
transform: rotate(45deg);
|
|
509
|
+
flex-shrink: 0;
|
|
510
|
+
margin-left: 12px;
|
|
511
|
+
transition: transform var(--sui-transition-fast);
|
|
512
|
+
}
|
|
513
|
+
|
|
514
|
+
.sui-styled-select.open .sui-styled-select-trigger::after {
|
|
515
|
+
transform: rotate(-135deg);
|
|
516
|
+
}
|
|
517
|
+
|
|
518
|
+
.sui-styled-select-trigger:focus-visible {
|
|
519
|
+
box-shadow: var(--sui-shadow-inset), 0 0 0 2px var(--sui-primary);
|
|
520
|
+
}
|
|
521
|
+
|
|
522
|
+
.sui-styled-select-value {
|
|
523
|
+
flex: 1;
|
|
524
|
+
overflow: hidden;
|
|
525
|
+
text-overflow: ellipsis;
|
|
526
|
+
white-space: nowrap;
|
|
527
|
+
}
|
|
528
|
+
|
|
529
|
+
.sui-styled-select-placeholder {
|
|
530
|
+
color: var(--sui-text-muted);
|
|
531
|
+
}
|
|
532
|
+
|
|
533
|
+
.sui-styled-select-menu {
|
|
534
|
+
position: absolute;
|
|
535
|
+
top: calc(100% + 6px);
|
|
536
|
+
left: 0;
|
|
537
|
+
right: 0;
|
|
538
|
+
background: var(--sui-bg);
|
|
539
|
+
border-radius: var(--sui-radius-sm);
|
|
540
|
+
box-shadow: var(--sui-shadow-raised);
|
|
541
|
+
padding: 6px;
|
|
542
|
+
z-index: 100;
|
|
543
|
+
max-height: 240px;
|
|
544
|
+
overflow-y: auto;
|
|
545
|
+
display: none;
|
|
546
|
+
}
|
|
547
|
+
|
|
548
|
+
.sui-styled-select.open .sui-styled-select-menu {
|
|
549
|
+
display: block;
|
|
550
|
+
}
|
|
551
|
+
|
|
552
|
+
.sui-styled-select-option {
|
|
553
|
+
padding: 8px 12px;
|
|
554
|
+
font-size: 14px;
|
|
555
|
+
font-family: var(--sui-font);
|
|
556
|
+
color: var(--sui-text);
|
|
557
|
+
border-radius: var(--sui-radius-xs);
|
|
558
|
+
cursor: pointer;
|
|
559
|
+
transition: background var(--sui-transition-fast);
|
|
560
|
+
white-space: nowrap;
|
|
561
|
+
}
|
|
562
|
+
|
|
563
|
+
.sui-styled-select-option:hover {
|
|
564
|
+
background: rgba(91, 84, 224, 0.06);
|
|
565
|
+
}
|
|
566
|
+
|
|
567
|
+
[data-theme="dark"] .sui-styled-select-option:hover {
|
|
568
|
+
background: rgba(124, 107, 255, 0.1);
|
|
569
|
+
}
|
|
570
|
+
|
|
571
|
+
.sui-styled-select-option.selected {
|
|
572
|
+
color: var(--sui-primary);
|
|
573
|
+
font-weight: 600;
|
|
574
|
+
background: rgba(91, 84, 224, 0.08);
|
|
575
|
+
}
|
|
576
|
+
|
|
577
|
+
.sui-styled-select-option.focused {
|
|
578
|
+
background: rgba(91, 84, 224, 0.06);
|
|
579
|
+
}
|
|
580
|
+
|
|
581
|
+
/* Sizes */
|
|
582
|
+
.sui-styled-select-sm .sui-styled-select-trigger {
|
|
583
|
+
padding: 7px 12px;
|
|
584
|
+
font-size: 13px;
|
|
585
|
+
}
|
|
586
|
+
|
|
587
|
+
.sui-styled-select-sm .sui-styled-select-option {
|
|
588
|
+
padding: 6px 10px;
|
|
589
|
+
font-size: 13px;
|
|
590
|
+
}
|
|
591
|
+
|
|
592
|
+
.sui-styled-select-lg .sui-styled-select-trigger {
|
|
593
|
+
padding: 14px 20px;
|
|
594
|
+
font-size: 16px;
|
|
595
|
+
}
|
|
596
|
+
|
|
597
|
+
.sui-styled-select-lg .sui-styled-select-option {
|
|
598
|
+
padding: 10px 14px;
|
|
599
|
+
font-size: 16px;
|
|
600
|
+
}
|
|
601
|
+
|
|
466
602
|
.sui-textarea {
|
|
467
603
|
resize: vertical;
|
|
468
604
|
min-height: 80px;
|
|
@@ -855,6 +991,10 @@ a.sui-btn-warning:visited {
|
|
|
855
991
|
margin-right: auto;
|
|
856
992
|
}
|
|
857
993
|
|
|
994
|
+
.sui-navbar-brand:hover {
|
|
995
|
+
color: var(--sui-text);
|
|
996
|
+
}
|
|
997
|
+
|
|
858
998
|
.sui-navbar-links {
|
|
859
999
|
display: flex;
|
|
860
1000
|
gap: 4px;
|
|
@@ -1136,7 +1276,7 @@ a.sui-btn-warning:visited {
|
|
|
1136
1276
|
width: 90%;
|
|
1137
1277
|
max-width: 520px;
|
|
1138
1278
|
max-height: 85vh;
|
|
1139
|
-
overflow
|
|
1279
|
+
overflow: visible;
|
|
1140
1280
|
transform: translateY(20px) scale(0.97);
|
|
1141
1281
|
transition: transform var(--sui-transition-base) ease;
|
|
1142
1282
|
}
|
|
@@ -2727,6 +2867,56 @@ a.sui-btn-warning:visited {
|
|
|
2727
2867
|
background-position: right 10px center;
|
|
2728
2868
|
}
|
|
2729
2869
|
|
|
2870
|
+
/* Filter — native select fallback */
|
|
2871
|
+
select.sui-datatable-filter {
|
|
2872
|
+
padding: 6px 28px 6px 10px;
|
|
2873
|
+
font-size: 13px;
|
|
2874
|
+
font-family: inherit;
|
|
2875
|
+
color: var(--sui-text);
|
|
2876
|
+
background: var(--sui-bg);
|
|
2877
|
+
border: none;
|
|
2878
|
+
border-radius: var(--sui-radius-xs);
|
|
2879
|
+
box-shadow: var(--sui-shadow-raised-sm);
|
|
2880
|
+
outline: none;
|
|
2881
|
+
cursor: pointer;
|
|
2882
|
+
appearance: none;
|
|
2883
|
+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");
|
|
2884
|
+
background-repeat: no-repeat;
|
|
2885
|
+
background-position: right 10px center;
|
|
2886
|
+
flex-shrink: 0;
|
|
2887
|
+
}
|
|
2888
|
+
|
|
2889
|
+
/* Filter — styled dropdown */
|
|
2890
|
+
.sui-datatable-filter.sui-dropdown {
|
|
2891
|
+
flex-shrink: 0;
|
|
2892
|
+
}
|
|
2893
|
+
|
|
2894
|
+
.sui-datatable-filter .sui-dropdown-toggle {
|
|
2895
|
+
padding: 6px 12px;
|
|
2896
|
+
font-size: 13px;
|
|
2897
|
+
font-family: inherit;
|
|
2898
|
+
color: var(--sui-text);
|
|
2899
|
+
background: var(--sui-bg);
|
|
2900
|
+
border: none;
|
|
2901
|
+
border-radius: var(--sui-radius-xs);
|
|
2902
|
+
box-shadow: var(--sui-shadow-raised-sm);
|
|
2903
|
+
cursor: pointer;
|
|
2904
|
+
display: flex;
|
|
2905
|
+
align-items: center;
|
|
2906
|
+
gap: 8px;
|
|
2907
|
+
}
|
|
2908
|
+
|
|
2909
|
+
.sui-datatable-filter .sui-dropdown-toggle::after {
|
|
2910
|
+
width: 5px;
|
|
2911
|
+
height: 5px;
|
|
2912
|
+
border-width: 1.5px;
|
|
2913
|
+
margin-left: 4px;
|
|
2914
|
+
}
|
|
2915
|
+
|
|
2916
|
+
.sui-datatable-filter .sui-dropdown-menu {
|
|
2917
|
+
min-width: max-content;
|
|
2918
|
+
}
|
|
2919
|
+
|
|
2730
2920
|
/* Sortable headers */
|
|
2731
2921
|
.sui-datatable .sui-table th[data-sort] {
|
|
2732
2922
|
cursor: pointer;
|
|
@@ -4308,10 +4498,11 @@ a.sui-btn-warning:visited {
|
|
|
4308
4498
|
|
|
4309
4499
|
/* Calendar — Date Picker (popover trigger) */
|
|
4310
4500
|
.sui-datepicker-trigger {
|
|
4311
|
-
display:
|
|
4501
|
+
display: flex;
|
|
4312
4502
|
align-items: center;
|
|
4313
4503
|
gap: 8px;
|
|
4314
|
-
|
|
4504
|
+
width: 100%;
|
|
4505
|
+
padding: 12px 18px;
|
|
4315
4506
|
font-size: 14px;
|
|
4316
4507
|
font-weight: 500;
|
|
4317
4508
|
font-family: var(--sui-font);
|
|
@@ -4322,7 +4513,6 @@ a.sui-btn-warning:visited {
|
|
|
4322
4513
|
box-shadow: var(--sui-shadow-inset);
|
|
4323
4514
|
cursor: pointer;
|
|
4324
4515
|
transition: var(--sui-transition);
|
|
4325
|
-
min-width: 200px;
|
|
4326
4516
|
}
|
|
4327
4517
|
|
|
4328
4518
|
.sui-datepicker-trigger:hover {
|
|
@@ -4347,24 +4537,19 @@ a.sui-btn-warning:visited {
|
|
|
4347
4537
|
|
|
4348
4538
|
.sui-datepicker {
|
|
4349
4539
|
position: relative;
|
|
4350
|
-
display: inline-block;
|
|
4351
4540
|
}
|
|
4352
4541
|
|
|
4353
4542
|
.sui-datepicker-popover {
|
|
4354
4543
|
position: absolute;
|
|
4355
4544
|
top: calc(100% + 8px);
|
|
4356
4545
|
left: 50%;
|
|
4357
|
-
transform: translateX(-50%)
|
|
4546
|
+
transform: translateX(-50%);
|
|
4358
4547
|
z-index: 500;
|
|
4359
|
-
|
|
4360
|
-
visibility: hidden;
|
|
4361
|
-
transition: opacity var(--sui-transition-fast) ease, transform var(--sui-transition-fast) ease, visibility var(--sui-transition-fast);
|
|
4548
|
+
display: none;
|
|
4362
4549
|
}
|
|
4363
4550
|
|
|
4364
4551
|
.sui-datepicker-popover.open {
|
|
4365
|
-
|
|
4366
|
-
visibility: visible;
|
|
4367
|
-
transform: translateX(-50%) translateY(0);
|
|
4552
|
+
display: block;
|
|
4368
4553
|
}
|
|
4369
4554
|
|
|
4370
4555
|
.sui-datepicker-popover .sui-calendar {
|
|
@@ -7699,6 +7884,7 @@ a.sui-btn-warning:visited {
|
|
|
7699
7884
|
}
|
|
7700
7885
|
|
|
7701
7886
|
.sui-chart-bars-horizontal {
|
|
7887
|
+
display: flex;
|
|
7702
7888
|
flex-direction: column;
|
|
7703
7889
|
align-items: stretch;
|
|
7704
7890
|
height: auto;
|
|
@@ -12624,6 +12810,211 @@ a.sui-btn-warning:visited {
|
|
|
12624
12810
|
box-shadow: var(--sui-shadow-raised);
|
|
12625
12811
|
}
|
|
12626
12812
|
|
|
12813
|
+
/* ===========================================
|
|
12814
|
+
Pricing / Plan Cards
|
|
12815
|
+
=========================================== */
|
|
12816
|
+
.sui-pricing {
|
|
12817
|
+
display: flex;
|
|
12818
|
+
gap: 20px;
|
|
12819
|
+
align-items: stretch;
|
|
12820
|
+
flex-wrap: wrap;
|
|
12821
|
+
justify-content: center;
|
|
12822
|
+
}
|
|
12823
|
+
|
|
12824
|
+
.sui-pricing-card {
|
|
12825
|
+
background: var(--sui-bg);
|
|
12826
|
+
border-radius: var(--sui-radius-lg);
|
|
12827
|
+
box-shadow: var(--sui-shadow-raised);
|
|
12828
|
+
padding: 32px 28px;
|
|
12829
|
+
display: flex;
|
|
12830
|
+
flex-direction: column;
|
|
12831
|
+
align-items: center;
|
|
12832
|
+
text-align: center;
|
|
12833
|
+
flex: 1;
|
|
12834
|
+
min-width: 240px;
|
|
12835
|
+
max-width: 340px;
|
|
12836
|
+
position: relative;
|
|
12837
|
+
transition: var(--sui-transition);
|
|
12838
|
+
}
|
|
12839
|
+
|
|
12840
|
+
.sui-pricing-card:hover {
|
|
12841
|
+
transform: translateY(-4px);
|
|
12842
|
+
box-shadow: var(--sui-shadow-raised-lg);
|
|
12843
|
+
}
|
|
12844
|
+
|
|
12845
|
+
/* Featured / recommended plan */
|
|
12846
|
+
.sui-pricing-featured {
|
|
12847
|
+
box-shadow: 0 0 0 3px var(--sui-primary), 0 0 16px rgba(91, 84, 224, 0.25);
|
|
12848
|
+
z-index: 1;
|
|
12849
|
+
}
|
|
12850
|
+
|
|
12851
|
+
.sui-pricing-featured:hover {
|
|
12852
|
+
box-shadow: 0 0 0 3px var(--sui-primary), 0 0 20px rgba(91, 84, 224, 0.3);
|
|
12853
|
+
}
|
|
12854
|
+
|
|
12855
|
+
.sui-pricing-badge {
|
|
12856
|
+
position: absolute;
|
|
12857
|
+
top: -12px;
|
|
12858
|
+
left: 50%;
|
|
12859
|
+
transform: translateX(-50%);
|
|
12860
|
+
background: var(--sui-primary);
|
|
12861
|
+
color: #fff;
|
|
12862
|
+
font-size: 11px;
|
|
12863
|
+
font-weight: 700;
|
|
12864
|
+
font-family: var(--sui-font);
|
|
12865
|
+
text-transform: uppercase;
|
|
12866
|
+
letter-spacing: 0.5px;
|
|
12867
|
+
padding: 4px 16px;
|
|
12868
|
+
border-radius: var(--sui-radius-full);
|
|
12869
|
+
white-space: nowrap;
|
|
12870
|
+
}
|
|
12871
|
+
|
|
12872
|
+
.sui-pricing-name {
|
|
12873
|
+
font-size: 18px;
|
|
12874
|
+
font-weight: 700;
|
|
12875
|
+
color: var(--sui-text);
|
|
12876
|
+
margin: 0 0 4px;
|
|
12877
|
+
}
|
|
12878
|
+
|
|
12879
|
+
.sui-pricing-desc {
|
|
12880
|
+
font-size: 13px;
|
|
12881
|
+
color: var(--sui-text-muted);
|
|
12882
|
+
margin: 0 0 20px;
|
|
12883
|
+
}
|
|
12884
|
+
|
|
12885
|
+
.sui-pricing-price {
|
|
12886
|
+
display: flex;
|
|
12887
|
+
align-items: baseline;
|
|
12888
|
+
gap: 4px;
|
|
12889
|
+
margin-bottom: 4px;
|
|
12890
|
+
}
|
|
12891
|
+
|
|
12892
|
+
.sui-pricing-amount {
|
|
12893
|
+
font-size: 42px;
|
|
12894
|
+
font-weight: 800;
|
|
12895
|
+
color: var(--sui-text);
|
|
12896
|
+
line-height: 1;
|
|
12897
|
+
}
|
|
12898
|
+
|
|
12899
|
+
.sui-pricing-currency {
|
|
12900
|
+
font-size: 18px;
|
|
12901
|
+
font-weight: 700;
|
|
12902
|
+
color: var(--sui-text-muted);
|
|
12903
|
+
}
|
|
12904
|
+
|
|
12905
|
+
.sui-pricing-period {
|
|
12906
|
+
font-size: 13px;
|
|
12907
|
+
color: var(--sui-text-muted);
|
|
12908
|
+
margin-bottom: 24px;
|
|
12909
|
+
}
|
|
12910
|
+
|
|
12911
|
+
.sui-pricing-features {
|
|
12912
|
+
list-style: none;
|
|
12913
|
+
padding: 0;
|
|
12914
|
+
margin: 0 0 28px;
|
|
12915
|
+
width: 100%;
|
|
12916
|
+
text-align: left;
|
|
12917
|
+
}
|
|
12918
|
+
|
|
12919
|
+
.sui-pricing-features li {
|
|
12920
|
+
display: flex;
|
|
12921
|
+
align-items: center;
|
|
12922
|
+
gap: 10px;
|
|
12923
|
+
padding: 8px 0;
|
|
12924
|
+
font-size: 14px;
|
|
12925
|
+
color: var(--sui-text);
|
|
12926
|
+
border-bottom: 1px solid var(--sui-bg-dark);
|
|
12927
|
+
}
|
|
12928
|
+
|
|
12929
|
+
.sui-pricing-features li:last-child {
|
|
12930
|
+
border-bottom: none;
|
|
12931
|
+
}
|
|
12932
|
+
|
|
12933
|
+
.sui-pricing-features li::before {
|
|
12934
|
+
content: '';
|
|
12935
|
+
width: 18px;
|
|
12936
|
+
height: 18px;
|
|
12937
|
+
flex-shrink: 0;
|
|
12938
|
+
border-radius: 50%;
|
|
12939
|
+
background: var(--sui-success);
|
|
12940
|
+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
|
|
12941
|
+
background-repeat: no-repeat;
|
|
12942
|
+
background-position: center;
|
|
12943
|
+
background-size: 10px;
|
|
12944
|
+
}
|
|
12945
|
+
|
|
12946
|
+
.sui-pricing-features li.disabled {
|
|
12947
|
+
color: var(--sui-text-light);
|
|
12948
|
+
text-decoration: line-through;
|
|
12949
|
+
}
|
|
12950
|
+
|
|
12951
|
+
.sui-pricing-features li.disabled::before {
|
|
12952
|
+
background: var(--sui-bg-dark);
|
|
12953
|
+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
|
|
12954
|
+
background-repeat: no-repeat;
|
|
12955
|
+
background-position: center;
|
|
12956
|
+
background-size: 10px;
|
|
12957
|
+
}
|
|
12958
|
+
|
|
12959
|
+
.sui-pricing-cta {
|
|
12960
|
+
margin-top: auto;
|
|
12961
|
+
width: 100%;
|
|
12962
|
+
}
|
|
12963
|
+
|
|
12964
|
+
/* Billing toggle */
|
|
12965
|
+
.sui-pricing-toggle {
|
|
12966
|
+
display: flex;
|
|
12967
|
+
align-items: center;
|
|
12968
|
+
justify-content: center;
|
|
12969
|
+
gap: 12px;
|
|
12970
|
+
margin-bottom: 32px;
|
|
12971
|
+
font-size: 14px;
|
|
12972
|
+
font-weight: 500;
|
|
12973
|
+
color: var(--sui-text-muted);
|
|
12974
|
+
}
|
|
12975
|
+
|
|
12976
|
+
.sui-pricing-toggle-active {
|
|
12977
|
+
color: var(--sui-text);
|
|
12978
|
+
font-weight: 600;
|
|
12979
|
+
}
|
|
12980
|
+
|
|
12981
|
+
.sui-pricing-save {
|
|
12982
|
+
font-size: 11px;
|
|
12983
|
+
font-weight: 700;
|
|
12984
|
+
color: var(--sui-success);
|
|
12985
|
+
background: rgba(31, 169, 110, 0.1);
|
|
12986
|
+
padding: 2px 8px;
|
|
12987
|
+
border-radius: var(--sui-radius-full);
|
|
12988
|
+
}
|
|
12989
|
+
|
|
12990
|
+
/* Inset variant */
|
|
12991
|
+
.sui-pricing-inset .sui-pricing-card {
|
|
12992
|
+
box-shadow: var(--sui-shadow-inset);
|
|
12993
|
+
}
|
|
12994
|
+
|
|
12995
|
+
.sui-pricing-inset .sui-pricing-card:hover {
|
|
12996
|
+
box-shadow: var(--sui-shadow-inset);
|
|
12997
|
+
transform: none;
|
|
12998
|
+
}
|
|
12999
|
+
|
|
13000
|
+
.sui-pricing-inset .sui-pricing-featured {
|
|
13001
|
+
box-shadow: var(--sui-shadow-inset), 0 0 0 3px var(--sui-primary);
|
|
13002
|
+
}
|
|
13003
|
+
|
|
13004
|
+
/* Selectable variant */
|
|
13005
|
+
.sui-pricing-selectable .sui-pricing-card {
|
|
13006
|
+
cursor: pointer;
|
|
13007
|
+
}
|
|
13008
|
+
|
|
13009
|
+
.sui-pricing-selectable .sui-pricing-card.selected {
|
|
13010
|
+
box-shadow: 0 0 0 3px var(--sui-primary), 0 0 16px rgba(91, 84, 224, 0.25);
|
|
13011
|
+
}
|
|
13012
|
+
|
|
13013
|
+
.sui-pricing-selectable.sui-pricing-inset .sui-pricing-card.selected {
|
|
13014
|
+
box-shadow: var(--sui-shadow-inset), 0 0 0 3px var(--sui-primary);
|
|
13015
|
+
}
|
|
13016
|
+
|
|
13017
|
+
|
|
12627
13018
|
/* ===========================================
|
|
12628
13019
|
Reduced Motion
|
|
12629
13020
|
=========================================== */
|