@policystudio/policy-studio-ui-vue 1.1.44 → 1.1.47
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/.storybook/PolicyStudio.js +0 -1
- package/.storybook/eventBus.js +3 -0
- package/dist/css/psui_styles.css +524 -28
- package/package.json +1 -1
- package/src/assets/scss/components/PsSlider.scss +152 -6
- package/src/assets/scss/components/PsSwitch.scss +62 -64
- package/src/assets/scss/components/PsTableResults.scss +256 -18
- package/src/components/controls/PsCheckboxSimple.vue +5 -1
- package/src/components/controls/PsDraggable.vue +1 -0
- package/src/components/controls/PsSlider.vue +204 -84
- package/src/components/table-results/PsTableResults.vue +83 -30
- package/src/components/table-results/PsTableResultsHeadFlexible.vue +117 -0
- package/src/components/tooltip/PsTooltip.vue +6 -1
- package/src/contents/ComparisonData.js +378 -0
- package/src/contents/FlexibleData.js +502 -0
- package/src/contents/ResultsData.js +531 -0
- package/src/index.js +9 -1
- package/src/stories/Slider.stories.js +50 -15
- package/src/stories/TableResults.stories.js +684 -1438
package/dist/css/psui_styles.css
CHANGED
|
@@ -1930,6 +1930,18 @@ video {
|
|
|
1930
1930
|
overflow: auto;
|
|
1931
1931
|
}
|
|
1932
1932
|
|
|
1933
|
+
.psui-el-table-results-wrapper.table-flexible {
|
|
1934
|
+
padding-left: 1rem;
|
|
1935
|
+
padding-right: 1rem;
|
|
1936
|
+
padding-top: 0.5rem;
|
|
1937
|
+
padding-bottom: 0.5rem;
|
|
1938
|
+
border-width: 1px;
|
|
1939
|
+
--border-opacity: 1;
|
|
1940
|
+
border-color: #E6ECF2;
|
|
1941
|
+
border-color: rgba(230, 236, 242, var(--border-opacity));
|
|
1942
|
+
border-radius: 0.5rem;
|
|
1943
|
+
}
|
|
1944
|
+
|
|
1933
1945
|
.psui-el-table-results {
|
|
1934
1946
|
position: relative;
|
|
1935
1947
|
vertical-align: top;
|
|
@@ -2116,10 +2128,11 @@ video {
|
|
|
2116
2128
|
background-color: rgba(243, 246, 249, var(--bg-opacity));
|
|
2117
2129
|
}
|
|
2118
2130
|
|
|
2119
|
-
.psui-el-table-results.layout-comparison
|
|
2120
|
-
|
|
2121
|
-
|
|
2122
|
-
|
|
2131
|
+
.psui-el-table-results.layout-comparison.is-sticky tr:first-of-type th:first-child,
|
|
2132
|
+
.psui-el-table-results.layout-comparison.is-sticky td:first-child {
|
|
2133
|
+
box-shadow: 3px 0px 10px 0px rgba(0, 0, 0, 0.15);
|
|
2134
|
+
border-right-color: transparent;
|
|
2135
|
+
}
|
|
2123
2136
|
|
|
2124
2137
|
.psui-el-table-results.layout-comparison tr th, .psui-el-table-results.layout-comparison tr td {
|
|
2125
2138
|
position: relative;
|
|
@@ -2171,10 +2184,10 @@ video {
|
|
|
2171
2184
|
.psui-el-table-results.layout-comparison thead tr:not(:first-of-type) th:after {
|
|
2172
2185
|
position: absolute;
|
|
2173
2186
|
top: 0;
|
|
2174
|
-
right: 0;
|
|
2175
2187
|
display: inline-block;
|
|
2176
2188
|
width: 1px;
|
|
2177
2189
|
content: '';
|
|
2190
|
+
right: -1px;
|
|
2178
2191
|
height: calc(100% + 0.5rem);
|
|
2179
2192
|
background-color: #C3CAD1;
|
|
2180
2193
|
}
|
|
@@ -2209,6 +2222,12 @@ video {
|
|
|
2209
2222
|
|
|
2210
2223
|
.psui-el-table-results.layout-comparison thead tr:first-of-type th:first-child {
|
|
2211
2224
|
vertical-align: middle;
|
|
2225
|
+
position: sticky;
|
|
2226
|
+
z-index: 10;
|
|
2227
|
+
left: 0;
|
|
2228
|
+
--bg-opacity: 1;
|
|
2229
|
+
background-color: #E6ECF2;
|
|
2230
|
+
background-color: rgba(230, 236, 242, var(--bg-opacity));
|
|
2212
2231
|
padding-left: 22px;
|
|
2213
2232
|
min-width: 240px;
|
|
2214
2233
|
}
|
|
@@ -2244,10 +2263,7 @@ video {
|
|
|
2244
2263
|
}
|
|
2245
2264
|
|
|
2246
2265
|
.psui-el-table-results.layout-comparison tbody tr {
|
|
2247
|
-
|
|
2248
|
-
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
2249
|
-
transition-duration: 150ms;
|
|
2250
|
-
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.03), 0px 1px 2px rgba(0, 0, 0, 0.1);
|
|
2266
|
+
border-bottom: 8px solid transparent;
|
|
2251
2267
|
}
|
|
2252
2268
|
|
|
2253
2269
|
.psui-el-table-results.layout-comparison tbody tr td {
|
|
@@ -2255,6 +2271,11 @@ video {
|
|
|
2255
2271
|
border-right: 1px solid #C8D0D9;
|
|
2256
2272
|
}
|
|
2257
2273
|
|
|
2274
|
+
.psui-el-table-results.layout-comparison tbody tr td > div {
|
|
2275
|
+
position: relative;
|
|
2276
|
+
z-index: 3;
|
|
2277
|
+
}
|
|
2278
|
+
|
|
2258
2279
|
.psui-el-table-results.layout-comparison tbody tr td .title {
|
|
2259
2280
|
font-size: 14px;
|
|
2260
2281
|
line-height: 130%;
|
|
@@ -2280,16 +2301,28 @@ video {
|
|
|
2280
2301
|
background-color: #D3EFDE;
|
|
2281
2302
|
}
|
|
2282
2303
|
|
|
2283
|
-
.psui-el-table-results.layout-comparison tbody tr td:before
|
|
2284
|
-
|
|
2304
|
+
.psui-el-table-results.layout-comparison tbody tr td:before,
|
|
2305
|
+
.psui-el-table-results.layout-comparison tbody tr td:after {
|
|
2306
|
+
content: '';
|
|
2285
2307
|
position: absolute;
|
|
2286
|
-
height: 0.5rem;
|
|
2287
2308
|
left: 0;
|
|
2288
|
-
|
|
2289
|
-
|
|
2290
|
-
|
|
2291
|
-
|
|
2292
|
-
|
|
2309
|
+
width: 100%;
|
|
2310
|
+
background-color: #fff;
|
|
2311
|
+
}
|
|
2312
|
+
|
|
2313
|
+
.psui-el-table-results.layout-comparison tbody tr td:before {
|
|
2314
|
+
top: 0;
|
|
2315
|
+
height: 100%;
|
|
2316
|
+
box-shadow: 0px 0px 4px rgb(0 0 0 / 3%), 0px 1px 2px rgb(0 0 0 / 10%);
|
|
2317
|
+
z-index: 1;
|
|
2318
|
+
}
|
|
2319
|
+
|
|
2320
|
+
.psui-el-table-results.layout-comparison tbody tr td:after {
|
|
2321
|
+
background-color: #fff;
|
|
2322
|
+
bottom: 0;
|
|
2323
|
+
height: 8px;
|
|
2324
|
+
z-index: 11;
|
|
2325
|
+
width: calc(100% - 1px);
|
|
2293
2326
|
}
|
|
2294
2327
|
|
|
2295
2328
|
.psui-el-table-results.layout-comparison tbody tr td:first-child {
|
|
@@ -2297,6 +2330,10 @@ video {
|
|
|
2297
2330
|
padding-right: 0.75rem;
|
|
2298
2331
|
border-top-left-radius: 0.375rem;
|
|
2299
2332
|
border-bottom-left-radius: 0.375rem;
|
|
2333
|
+
background-color: #ffffff ;
|
|
2334
|
+
position: sticky;
|
|
2335
|
+
z-index: 10;
|
|
2336
|
+
left: 0;
|
|
2300
2337
|
border-right-width: 2px;
|
|
2301
2338
|
}
|
|
2302
2339
|
|
|
@@ -2305,24 +2342,267 @@ video {
|
|
|
2305
2342
|
padding-right: 0.75rem;
|
|
2306
2343
|
border-top-right-radius: 0.375rem;
|
|
2307
2344
|
border-bottom-right-radius: 0.375rem;
|
|
2345
|
+
border-right-width: 0;
|
|
2308
2346
|
}
|
|
2309
2347
|
|
|
2310
|
-
.psui-el-table-results.layout-comparison tbody tr.
|
|
2311
|
-
|
|
2348
|
+
.psui-el-table-results.layout-comparison tbody tr.opened td:before {
|
|
2349
|
+
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.04), 0px 5px 6px rgba(0, 0, 0, 0.1);
|
|
2312
2350
|
}
|
|
2313
2351
|
|
|
2314
2352
|
.psui-el-table-results.layout-comparison tbody tr.is-first.opened td:first-child {
|
|
2315
2353
|
border-bottom-left-radius: 0;
|
|
2316
2354
|
}
|
|
2317
2355
|
|
|
2318
|
-
.psui-el-table-results.layout-comparison tbody tr.opened {
|
|
2319
|
-
|
|
2320
|
-
|
|
2356
|
+
.psui-el-table-results.layout-comparison tbody tr.is-first.opened td:last-child {
|
|
2357
|
+
border-bottom-right-radius: 0;
|
|
2358
|
+
}
|
|
2321
2359
|
|
|
2322
2360
|
.psui-el-table-results.layout-comparison tbody tr:not(.is-first) td:first-child {
|
|
2323
2361
|
border-top-left-radius: 0;
|
|
2324
2362
|
}
|
|
2325
2363
|
|
|
2364
|
+
.psui-el-table-results.layout-comparison tbody tr:not(.is-first) td:last-child {
|
|
2365
|
+
border-top-right-radius: 0;
|
|
2366
|
+
}
|
|
2367
|
+
|
|
2368
|
+
.psui-el-table-results.layout-comparison tbody tr:not(.is-first).opened {
|
|
2369
|
+
border-bottom-width: 14px;
|
|
2370
|
+
}
|
|
2371
|
+
|
|
2372
|
+
.psui-el-table-results.layout-flexible tr th:last-child, .psui-el-table-results.layout-flexible tr td:last-child {
|
|
2373
|
+
padding-right: 0.5rem;
|
|
2374
|
+
}
|
|
2375
|
+
|
|
2376
|
+
.psui-el-table-results.layout-flexible thead {
|
|
2377
|
+
background-color: #ffffff ;
|
|
2378
|
+
align-items: flex-start;
|
|
2379
|
+
z-index: 15;
|
|
2380
|
+
}
|
|
2381
|
+
|
|
2382
|
+
.psui-el-table-results.layout-flexible thead:after {
|
|
2383
|
+
content: '';
|
|
2384
|
+
display: inline-block;
|
|
2385
|
+
position: absolute;
|
|
2386
|
+
top: 0;
|
|
2387
|
+
width: 0.5rem;
|
|
2388
|
+
height: 100%;
|
|
2389
|
+
background-color: #ffffff ;
|
|
2390
|
+
right: -8px;
|
|
2391
|
+
}
|
|
2392
|
+
|
|
2393
|
+
.psui-el-table-results.layout-flexible thead tr .title {
|
|
2394
|
+
font-size: 14px;
|
|
2395
|
+
line-height: 130%;
|
|
2396
|
+
font-weight: 700;
|
|
2397
|
+
line-height: 1rem;
|
|
2398
|
+
--text-opacity: 1;
|
|
2399
|
+
color: #28323B;
|
|
2400
|
+
color: rgba(40, 50, 59, var(--text-opacity));
|
|
2401
|
+
}
|
|
2402
|
+
|
|
2403
|
+
.psui-el-table-results.layout-flexible thead tr th {
|
|
2404
|
+
padding-left: 1.5rem;
|
|
2405
|
+
--text-opacity: 1;
|
|
2406
|
+
color: #798490;
|
|
2407
|
+
color: rgba(121, 132, 144, var(--text-opacity));
|
|
2408
|
+
text-align: right;
|
|
2409
|
+
width: auto;
|
|
2410
|
+
vertical-align: top;
|
|
2411
|
+
padding-top: 0.438rem;
|
|
2412
|
+
padding-bottom: 0.625rem;
|
|
2413
|
+
}
|
|
2414
|
+
|
|
2415
|
+
.psui-el-table-results.layout-flexible thead tr th .description {
|
|
2416
|
+
font-size: 12px;
|
|
2417
|
+
line-height: 130%;
|
|
2418
|
+
font-weight: 400;
|
|
2419
|
+
line-height: 110%;
|
|
2420
|
+
}
|
|
2421
|
+
|
|
2422
|
+
.psui-el-table-results.layout-flexible thead tr th:first-child {
|
|
2423
|
+
padding-left: 0;
|
|
2424
|
+
}
|
|
2425
|
+
|
|
2426
|
+
.psui-el-table-results.layout-flexible thead tr th:first-child > div {
|
|
2427
|
+
align-items: flex-start;
|
|
2428
|
+
}
|
|
2429
|
+
|
|
2430
|
+
.psui-el-table-results.layout-flexible thead tr:first-of-type th {
|
|
2431
|
+
text-align: left;
|
|
2432
|
+
padding-top: 0;
|
|
2433
|
+
padding-bottom: 0;
|
|
2434
|
+
}
|
|
2435
|
+
|
|
2436
|
+
.psui-el-table-results.layout-flexible thead tr:first-of-type th > div {
|
|
2437
|
+
display: flex;
|
|
2438
|
+
flex-direction: row;
|
|
2439
|
+
border-bottom-width: 1px;
|
|
2440
|
+
--border-opacity: 1;
|
|
2441
|
+
border-color: #D6DDE5;
|
|
2442
|
+
border-color: rgba(214, 221, 229, var(--border-opacity));
|
|
2443
|
+
padding-top: 0.5rem;
|
|
2444
|
+
padding-bottom: 0.625rem;
|
|
2445
|
+
}
|
|
2446
|
+
|
|
2447
|
+
.psui-el-table-results.layout-flexible thead tr:first-of-type p {
|
|
2448
|
+
font-size: 16px;
|
|
2449
|
+
line-height: 130%;
|
|
2450
|
+
line-height: 18px;
|
|
2451
|
+
}
|
|
2452
|
+
|
|
2453
|
+
.psui-el-table-results.layout-flexible thead tr:not(:first-of-type) th:first-child {
|
|
2454
|
+
text-align: left;
|
|
2455
|
+
}
|
|
2456
|
+
|
|
2457
|
+
.psui-el-table-results.layout-flexible tbody tr {
|
|
2458
|
+
border-bottom-width: 1px;
|
|
2459
|
+
--border-opacity: 1;
|
|
2460
|
+
border-color: #E6ECF2;
|
|
2461
|
+
border-color: rgba(230, 236, 242, var(--border-opacity));
|
|
2462
|
+
}
|
|
2463
|
+
|
|
2464
|
+
.psui-el-table-results.layout-flexible tbody tr .title {
|
|
2465
|
+
display: flex;
|
|
2466
|
+
align-items: center;
|
|
2467
|
+
line-height: 24px;
|
|
2468
|
+
}
|
|
2469
|
+
|
|
2470
|
+
.psui-el-table-results.layout-flexible tbody tr td {
|
|
2471
|
+
padding-left: 2rem;
|
|
2472
|
+
--text-opacity: 1;
|
|
2473
|
+
color: #34404A;
|
|
2474
|
+
color: rgba(52, 64, 74, var(--text-opacity));
|
|
2475
|
+
height: 2.5rem;
|
|
2476
|
+
text-align: right;
|
|
2477
|
+
font-size: 14px;
|
|
2478
|
+
line-height: 130%;
|
|
2479
|
+
padding-top: 0.688rem;
|
|
2480
|
+
padding-bottom: 0.688rem;
|
|
2481
|
+
min-height: 41.5px;
|
|
2482
|
+
}
|
|
2483
|
+
|
|
2484
|
+
.psui-el-table-results.layout-flexible tbody tr td > div {
|
|
2485
|
+
display: flex;
|
|
2486
|
+
align-items: center;
|
|
2487
|
+
}
|
|
2488
|
+
|
|
2489
|
+
.psui-el-table-results.layout-flexible tbody tr td .actions {
|
|
2490
|
+
display: flex;
|
|
2491
|
+
align-items: center;
|
|
2492
|
+
height: 100%;
|
|
2493
|
+
position: relative;
|
|
2494
|
+
}
|
|
2495
|
+
|
|
2496
|
+
.psui-el-table-results.layout-flexible tbody tr td .actions-button {
|
|
2497
|
+
cursor: pointer;
|
|
2498
|
+
margin-left: 0.25rem;
|
|
2499
|
+
}
|
|
2500
|
+
|
|
2501
|
+
.psui-el-table-results.layout-flexible tbody tr td .actions .is-last-deep {
|
|
2502
|
+
padding-left: 1rem;
|
|
2503
|
+
}
|
|
2504
|
+
|
|
2505
|
+
.psui-el-table-results.layout-flexible tbody tr td:first-child {
|
|
2506
|
+
padding-left: 0;
|
|
2507
|
+
padding-right: 2rem;
|
|
2508
|
+
text-align: left;
|
|
2509
|
+
display: block;
|
|
2510
|
+
padding-top: 8px;
|
|
2511
|
+
padding-bottom: 8px;
|
|
2512
|
+
}
|
|
2513
|
+
|
|
2514
|
+
.psui-el-table-results.layout-flexible tbody tr td.column-flexible_score {
|
|
2515
|
+
--text-opacity: 1;
|
|
2516
|
+
color: #A2ACB7;
|
|
2517
|
+
color: rgba(162, 172, 183, var(--text-opacity));
|
|
2518
|
+
}
|
|
2519
|
+
|
|
2520
|
+
.psui-el-table-results.layout-flexible tbody tr td .psui-el-tooltip-dialog {
|
|
2521
|
+
text-align: left;
|
|
2522
|
+
max-width: 180px;
|
|
2523
|
+
}
|
|
2524
|
+
|
|
2525
|
+
.psui-el-table-results.layout-flexible tbody tr td .psui-el-tooltip-dialog .psui-el-tooltip-content-wrapper {
|
|
2526
|
+
white-space: normal;
|
|
2527
|
+
}
|
|
2528
|
+
|
|
2529
|
+
.psui-el-table-results.layout-flexible tbody tr.is-first {
|
|
2530
|
+
border-color: transparent;
|
|
2531
|
+
}
|
|
2532
|
+
|
|
2533
|
+
.psui-el-table-results.layout-flexible tbody tr.is-first .actions-button span {
|
|
2534
|
+
font-size: 16px !important;
|
|
2535
|
+
}
|
|
2536
|
+
|
|
2537
|
+
.psui-el-table-results.layout-flexible tbody tr.is-first .title {
|
|
2538
|
+
font-size: 12px;
|
|
2539
|
+
line-height: 130%;
|
|
2540
|
+
font-weight: 700;
|
|
2541
|
+
--text-opacity: 1;
|
|
2542
|
+
color: #515E6A;
|
|
2543
|
+
color: rgba(81, 94, 106, var(--text-opacity));
|
|
2544
|
+
}
|
|
2545
|
+
|
|
2546
|
+
.psui-el-table-results.layout-flexible tbody tr.is-first td {
|
|
2547
|
+
height: auto;
|
|
2548
|
+
padding-top: 0.5rem;
|
|
2549
|
+
padding-bottom: 0;
|
|
2550
|
+
min-height: 1rem;
|
|
2551
|
+
}
|
|
2552
|
+
|
|
2553
|
+
.psui-el-table-results.layout-flexible tbody tr:not(.is-first) td:first-child {
|
|
2554
|
+
position: relative;
|
|
2555
|
+
}
|
|
2556
|
+
|
|
2557
|
+
.psui-el-table-results.layout-flexible tbody tr:not(.is-first) td:first-child:before,
|
|
2558
|
+
.psui-el-table-results.layout-flexible tbody tr:not(.is-first) td:first-child:after {
|
|
2559
|
+
content: '';
|
|
2560
|
+
position: absolute;
|
|
2561
|
+
top: 0;
|
|
2562
|
+
}
|
|
2563
|
+
|
|
2564
|
+
.psui-el-table-results.layout-flexible tbody tr:not(.is-first) td:first-child:before {
|
|
2565
|
+
background-color: #ffffff ;
|
|
2566
|
+
left: 0;
|
|
2567
|
+
width: 22px;
|
|
2568
|
+
height: calc(100% + 1px);
|
|
2569
|
+
}
|
|
2570
|
+
|
|
2571
|
+
.psui-el-table-results.layout-flexible tbody tr:not(.is-first) td:first-child:after {
|
|
2572
|
+
--bg-opacity: 1;
|
|
2573
|
+
background-color: #E6ECF2;
|
|
2574
|
+
background-color: rgba(230, 236, 242, var(--bg-opacity));
|
|
2575
|
+
width: 1px;
|
|
2576
|
+
height: 0;
|
|
2577
|
+
left: 11px;
|
|
2578
|
+
}
|
|
2579
|
+
|
|
2580
|
+
.psui-el-table-results.layout-flexible tbody tr:not(.is-first):hover td {
|
|
2581
|
+
--bg-opacity: 1;
|
|
2582
|
+
background-color: #ECF7FB;
|
|
2583
|
+
background-color: rgba(236, 247, 251, var(--bg-opacity));
|
|
2584
|
+
}
|
|
2585
|
+
|
|
2586
|
+
.psui-el-table-results.layout-flexible tbody tr:not(.is-first).opened td:first-child:after {
|
|
2587
|
+
height: calc(100% + 1px);
|
|
2588
|
+
}
|
|
2589
|
+
|
|
2590
|
+
.psui-el-table-results.layout-flexible tbody tr.is-last {
|
|
2591
|
+
border-bottom-width: 0;
|
|
2592
|
+
}
|
|
2593
|
+
|
|
2594
|
+
.psui-el-table-results.layout-flexible tbody tr.is-active {
|
|
2595
|
+
--bg-opacity: 1;
|
|
2596
|
+
background-color: #F3F6F9;
|
|
2597
|
+
background-color: rgba(243, 246, 249, var(--bg-opacity));
|
|
2598
|
+
}
|
|
2599
|
+
|
|
2600
|
+
.psui-el-table-results.layout-flexible tbody tr.is-active td:first-child {
|
|
2601
|
+
--bg-opacity: 1;
|
|
2602
|
+
background-color: #F3F6F9;
|
|
2603
|
+
background-color: rgba(243, 246, 249, var(--bg-opacity));
|
|
2604
|
+
}
|
|
2605
|
+
|
|
2326
2606
|
.psui-el-checkbox {
|
|
2327
2607
|
position: relative;
|
|
2328
2608
|
--text-opacity: 1;
|
|
@@ -2730,7 +3010,7 @@ video {
|
|
|
2730
3010
|
pointer-events: none;
|
|
2731
3011
|
}
|
|
2732
3012
|
|
|
2733
|
-
.psui-el-switch.size-big{
|
|
3013
|
+
.psui-el-switch.size-big {
|
|
2734
3014
|
width: 46px;
|
|
2735
3015
|
height: 24px;
|
|
2736
3016
|
}
|
|
@@ -2750,7 +3030,6 @@ video {
|
|
|
2750
3030
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
2751
3031
|
transition-duration: 300ms;
|
|
2752
3032
|
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.04), 0px 5px 6px rgba(0, 0, 0, 0.1);
|
|
2753
|
-
box-shadow: 0 0 98px 6px rgba(0, 0, 0, 0.2);
|
|
2754
3033
|
left: 2px;
|
|
2755
3034
|
top: 2px;
|
|
2756
3035
|
content: '';
|
|
@@ -2772,13 +3051,12 @@ video {
|
|
|
2772
3051
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
2773
3052
|
transition-duration: 300ms;
|
|
2774
3053
|
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.04), 0px 5px 6px rgba(0, 0, 0, 0.1);
|
|
2775
|
-
box-shadow: 0 0 98px 6px rgba(0, 0, 0, 0.2);
|
|
2776
3054
|
left: 16px;
|
|
2777
3055
|
top: 2px;
|
|
2778
3056
|
content: '';
|
|
2779
3057
|
}
|
|
2780
3058
|
|
|
2781
|
-
.psui-el-switch
|
|
3059
|
+
.psui-el-switch:focus {
|
|
2782
3060
|
outline: 2px solid transparent;
|
|
2783
3061
|
outline-offset: 2px;
|
|
2784
3062
|
}
|
|
@@ -3065,11 +3343,11 @@ video {
|
|
|
3065
3343
|
color: rgba(49, 143, 172, var(--text-opacity));
|
|
3066
3344
|
}
|
|
3067
3345
|
|
|
3068
|
-
.psui-el-slider
|
|
3346
|
+
.psui-el-slider-label {
|
|
3069
3347
|
margin-bottom: 0.5rem;
|
|
3070
3348
|
}
|
|
3071
3349
|
|
|
3072
|
-
.psui-el-slider
|
|
3350
|
+
.psui-el-slider-label span {
|
|
3073
3351
|
--text-opacity: 1;
|
|
3074
3352
|
color: #798490;
|
|
3075
3353
|
color: rgba(121, 132, 144, var(--text-opacity));
|
|
@@ -3077,6 +3355,224 @@ video {
|
|
|
3077
3355
|
line-height: 130%
|
|
3078
3356
|
}
|
|
3079
3357
|
|
|
3358
|
+
.psui-el-slider-input {
|
|
3359
|
+
width: 100%;
|
|
3360
|
+
-webkit-appearance: none;
|
|
3361
|
+
height: 6px;
|
|
3362
|
+
border-radius: 5px;
|
|
3363
|
+
background: #d3d3d3;
|
|
3364
|
+
outline: none;
|
|
3365
|
+
opacity: 0.7;
|
|
3366
|
+
transition: opacity .2s;
|
|
3367
|
+
}
|
|
3368
|
+
|
|
3369
|
+
.psui-el-slider-input:hover {
|
|
3370
|
+
opacity: 1;
|
|
3371
|
+
}
|
|
3372
|
+
|
|
3373
|
+
.psui-el-slider-input::-webkit-slider-thumb {
|
|
3374
|
+
border: none;
|
|
3375
|
+
-webkit-appearance: none;
|
|
3376
|
+
appearance: none;
|
|
3377
|
+
width: 20px;
|
|
3378
|
+
height: 20px;
|
|
3379
|
+
border-radius: 50%;
|
|
3380
|
+
background: #64B5CE;
|
|
3381
|
+
cursor: pointer;
|
|
3382
|
+
}
|
|
3383
|
+
|
|
3384
|
+
.psui-el-slider-input::-moz-range-thumb {
|
|
3385
|
+
border: none;
|
|
3386
|
+
width: 20px;
|
|
3387
|
+
height: 20px;
|
|
3388
|
+
border-radius: 50%;
|
|
3389
|
+
background: #64B5CE;
|
|
3390
|
+
cursor: pointer;
|
|
3391
|
+
}
|
|
3392
|
+
|
|
3393
|
+
.psui-el-slider-input::-webkit-slider-progress,
|
|
3394
|
+
.psui-el-slider-input::-moz-range-progress {
|
|
3395
|
+
border-top-left-radius: 5px;
|
|
3396
|
+
border-bottom-left-radius: 5px;
|
|
3397
|
+
-webkit-appearance: none;
|
|
3398
|
+
box-shadow: none;
|
|
3399
|
+
border: none;
|
|
3400
|
+
background: #64B5CE;
|
|
3401
|
+
height: 6px;
|
|
3402
|
+
}
|
|
3403
|
+
|
|
3404
|
+
.psui-el-slider-bubble {
|
|
3405
|
+
--bg-opacity: 1;
|
|
3406
|
+
background-color: #E6ECF2;
|
|
3407
|
+
background-color: rgba(230, 236, 242, var(--bg-opacity));
|
|
3408
|
+
font-weight: 700;
|
|
3409
|
+
--text-opacity: 1;
|
|
3410
|
+
color: #798490;
|
|
3411
|
+
color: rgba(121, 132, 144, var(--text-opacity));
|
|
3412
|
+
padding-left: 0.5rem;
|
|
3413
|
+
padding-right: 0.5rem;
|
|
3414
|
+
padding-top: 1px;
|
|
3415
|
+
padding-bottom: 1px;
|
|
3416
|
+
border-radius: 0.125rem;
|
|
3417
|
+
float: left;
|
|
3418
|
+
margin-left: 0.5rem;
|
|
3419
|
+
}
|
|
3420
|
+
|
|
3421
|
+
.psui-el-slider.layout-default .psui-el-slider-range-value {
|
|
3422
|
+
position: relative;
|
|
3423
|
+
color: #ffffff ;
|
|
3424
|
+
font-weight: 700;
|
|
3425
|
+
--bg-opacity: 1;
|
|
3426
|
+
background-color: #A2ACB7;
|
|
3427
|
+
background-color: rgba(162, 172, 183, var(--bg-opacity));
|
|
3428
|
+
--text-opacity: 1;
|
|
3429
|
+
color: #E6ECF2;
|
|
3430
|
+
color: rgba(230, 236, 242, var(--text-opacity));
|
|
3431
|
+
border-radius: 0.375rem;
|
|
3432
|
+
width: 2.5rem;
|
|
3433
|
+
text-align: center;
|
|
3434
|
+
display: inline-block;
|
|
3435
|
+
transform: translateX(-6px);
|
|
3436
|
+
margin-bottom: 10px;
|
|
3437
|
+
padding: 2px 4px;
|
|
3438
|
+
}
|
|
3439
|
+
|
|
3440
|
+
.psui-el-slider.layout-rich .psui-el-slider-input {
|
|
3441
|
+
--bg-opacity: 1;
|
|
3442
|
+
background-color: #D6DDE5;
|
|
3443
|
+
background-color: rgba(214, 221, 229, var(--bg-opacity));
|
|
3444
|
+
border-radius: 0.25rem;
|
|
3445
|
+
box-shadow: 0px 1px 0px #FFFFFF, inset 0px 1px 2px rgba(0, 0, 0, 0.1);
|
|
3446
|
+
opacity: 1;
|
|
3447
|
+
height: 0.5rem;
|
|
3448
|
+
}
|
|
3449
|
+
|
|
3450
|
+
.psui-el-slider.layout-rich .psui-el-slider-input::-webkit-slider-thumb {
|
|
3451
|
+
position: relative;
|
|
3452
|
+
--bg-opacity: 1;
|
|
3453
|
+
background-color: #64B5CE;
|
|
3454
|
+
background-color: rgba(100, 181, 206, var(--bg-opacity));
|
|
3455
|
+
width: 1.5rem;
|
|
3456
|
+
height: 1.5rem;
|
|
3457
|
+
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.04), 0px 2px 5px rgba(0, 0, 0, 0.08);
|
|
3458
|
+
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iNiIgdmlld0JveD0iMCAwIDEyIDYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTAuMzUzNzEyIDIuNjc0NDJMMy4xNDY2IDAuMTM0MDhDMy40NjE2OCAtMC4xNTI1MDYgMy45OTk5MiAwLjA1MDczODUgMy45OTk5MiAwLjQ1NjMwMVY1LjU0MzdDMy45OTk5MiA1Ljk0OTU1IDMuNDYxMDIgNi4xNTI2NiAzLjE0NjE0IDUuODY1NDlMMC4zNTMyNDUgMy4zMTg0NEMwLjE1ODExMSAzLjE0MDQ4IDAuMTU4MzIgMi44NTIxNCAwLjM1MzcxMiAyLjY3NDQyWiIgZmlsbD0id2hpdGUiLz4KICA8cGF0aCBkPSJNMTEuNjQ2MSAyLjY3NDQyTDguODUzMjQgMC4xMzQwOEM4LjUzODE3IC0wLjE1MjUwNiA3Ljk5OTkyIDAuMDUwNzM4NSA3Ljk5OTkyIDAuNDU2MzAxVjUuNTQzN0M3Ljk5OTkyIDUuOTQ5NTUgOC41Mzg4MyA2LjE1MjY2IDguODUzNzEgNS44NjU0OUwxMS42NDY2IDMuMzE4NDRDMTEuODQxNyAzLjE0MDQ4IDExLjg0MTUgMi44NTIxNCAxMS42NDYxIDIuNjc0NDJaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4=");
|
|
3459
|
+
background-position: center center;
|
|
3460
|
+
background-repeat: no-repeat;
|
|
3461
|
+
z-index: 30;
|
|
3462
|
+
}
|
|
3463
|
+
|
|
3464
|
+
.psui-el-slider.layout-rich .psui-el-slider-input::-moz-range-thumb {
|
|
3465
|
+
border: none;
|
|
3466
|
+
width: 20px;
|
|
3467
|
+
height: 20px;
|
|
3468
|
+
border-radius: 50%;
|
|
3469
|
+
background: #64B5CE;
|
|
3470
|
+
cursor: pointer;
|
|
3471
|
+
}
|
|
3472
|
+
|
|
3473
|
+
.psui-el-slider.layout-rich .psui-el-slider-wrapper {
|
|
3474
|
+
display: flex;
|
|
3475
|
+
flex-direction: column;
|
|
3476
|
+
justify-content: flex-end;
|
|
3477
|
+
position: relative;
|
|
3478
|
+
height: 80px;
|
|
3479
|
+
}
|
|
3480
|
+
|
|
3481
|
+
.psui-el-slider.layout-rich .psui-el-slider-wrapper-input {
|
|
3482
|
+
position: relative;
|
|
3483
|
+
}
|
|
3484
|
+
|
|
3485
|
+
.psui-el-slider.layout-rich .psui-el-slider-wrapper-input .slider-bar,
|
|
3486
|
+
.psui-el-slider.layout-rich .psui-el-slider-wrapper-input .slider-bar-bg,
|
|
3487
|
+
.psui-el-slider.layout-rich .psui-el-slider-wrapper-input .slider-bar-dynamic,
|
|
3488
|
+
.psui-el-slider.layout-rich .psui-el-slider-wrapper-input .slider-bar-max {
|
|
3489
|
+
position: absolute;
|
|
3490
|
+
top: 0;
|
|
3491
|
+
--bg-opacity: 1;
|
|
3492
|
+
background-color: #318FAC;
|
|
3493
|
+
background-color: rgba(49, 143, 172, var(--bg-opacity));
|
|
3494
|
+
box-shadow: 0px 1px 0px #FFFFFF, inset 0px 1px 2px rgba(0, 0, 0, 0.1);
|
|
3495
|
+
height: 0.5rem;
|
|
3496
|
+
}
|
|
3497
|
+
|
|
3498
|
+
.psui-el-slider.layout-rich .psui-el-slider-wrapper-input .slider-bar {
|
|
3499
|
+
--bg-opacity: 1;
|
|
3500
|
+
background-color: #318FAC;
|
|
3501
|
+
background-color: rgba(49, 143, 172, var(--bg-opacity));
|
|
3502
|
+
left: 0;
|
|
3503
|
+
border-radius: 0.25rem;
|
|
3504
|
+
z-index: 20;
|
|
3505
|
+
}
|
|
3506
|
+
|
|
3507
|
+
.psui-el-slider.layout-rich .psui-el-slider-wrapper-input .slider-bar-max {
|
|
3508
|
+
--bg-opacity: 1;
|
|
3509
|
+
background-color: #A2ACB7;
|
|
3510
|
+
background-color: rgba(162, 172, 183, var(--bg-opacity));
|
|
3511
|
+
right: 0;
|
|
3512
|
+
border-top-right-radius: 0.25rem;
|
|
3513
|
+
border-bottom-right-radius: 0.25rem;
|
|
3514
|
+
}
|
|
3515
|
+
|
|
3516
|
+
.psui-el-slider.layout-rich .psui-el-slider-wrapper-input .slider-bar-bg {
|
|
3517
|
+
z-index: 10;
|
|
3518
|
+
}
|
|
3519
|
+
|
|
3520
|
+
.psui-el-slider.layout-rich .psui-el-slider-wrapper-input .slider-bar-dynamic {
|
|
3521
|
+
z-index: 30;
|
|
3522
|
+
}
|
|
3523
|
+
|
|
3524
|
+
.psui-el-slider.layout-rich .psui-el-slider-range-value {
|
|
3525
|
+
position: absolute;
|
|
3526
|
+
--text-opacity: 1;
|
|
3527
|
+
color: #318FAC;
|
|
3528
|
+
color: rgba(49, 143, 172, var(--text-opacity));
|
|
3529
|
+
font-size: 12px;
|
|
3530
|
+
line-height: 130%;
|
|
3531
|
+
font-weight: 700;
|
|
3532
|
+
text-align: center;
|
|
3533
|
+
width: 1.5rem;
|
|
3534
|
+
display: inline-block;
|
|
3535
|
+
top: -28px;
|
|
3536
|
+
}
|
|
3537
|
+
|
|
3538
|
+
.psui-el-slider.layout-rich .psui-el-slider-grid {
|
|
3539
|
+
position: relative;
|
|
3540
|
+
display: flex;
|
|
3541
|
+
justify-content: space-between;
|
|
3542
|
+
padding-top: 10px;
|
|
3543
|
+
margin-top: 3px;
|
|
3544
|
+
height: 26px;
|
|
3545
|
+
}
|
|
3546
|
+
|
|
3547
|
+
.psui-el-slider.layout-rich .psui-el-slider-grid .line {
|
|
3548
|
+
position: absolute;
|
|
3549
|
+
top: 0;
|
|
3550
|
+
width: 1px;
|
|
3551
|
+
height: 0.5rem;
|
|
3552
|
+
--bg-opacity: 1;
|
|
3553
|
+
background-color: #515E6A;
|
|
3554
|
+
background-color: rgba(81, 94, 106, var(--bg-opacity));
|
|
3555
|
+
}
|
|
3556
|
+
|
|
3557
|
+
.psui-el-slider.layout-rich .psui-el-slider-grid .info {
|
|
3558
|
+
font-size: 12px;
|
|
3559
|
+
line-height: 130%;
|
|
3560
|
+
--text-opacity: 1;
|
|
3561
|
+
color: #515E6A;
|
|
3562
|
+
color: rgba(81, 94, 106, var(--text-opacity));
|
|
3563
|
+
width: 1.5rem;
|
|
3564
|
+
display: inline-block;
|
|
3565
|
+
text-align: center;
|
|
3566
|
+
}
|
|
3567
|
+
|
|
3568
|
+
.psui-el-slider.layout-rich .psui-el-slider-grid .info-min {
|
|
3569
|
+
transform: translateX(-12px);
|
|
3570
|
+
}
|
|
3571
|
+
|
|
3572
|
+
.psui-el-slider.layout-rich .psui-el-slider-grid .info-max {
|
|
3573
|
+
transform: translateX(12px);
|
|
3574
|
+
}
|
|
3575
|
+
|
|
3080
3576
|
.psui-el-toast {
|
|
3081
3577
|
display: flex;
|
|
3082
3578
|
align-items: center;
|