@policystudio/policy-studio-ui-vue 1.1.44 → 1.1.48
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 +530 -28
- package/package.json +1 -1
- package/src/assets/scss/components/PsSlider.scss +152 -6
- package/src/assets/scss/components/PsSwitch.scss +66 -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/controls/PsSwitch.vue +1 -0
- package/src/components/table-results/PsTableResults.vue +95 -31
- 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,13 @@ video {
|
|
|
2730
3010
|
pointer-events: none;
|
|
2731
3011
|
}
|
|
2732
3012
|
|
|
2733
|
-
.psui-el-switch.
|
|
3013
|
+
.psui-el-switch.disabled .psui-el-switch-button {
|
|
3014
|
+
--bg-opacity: 1;
|
|
3015
|
+
background-color: #E6ECF2;
|
|
3016
|
+
background-color: rgba(230, 236, 242, var(--bg-opacity));
|
|
3017
|
+
}
|
|
3018
|
+
|
|
3019
|
+
.psui-el-switch.size-big {
|
|
2734
3020
|
width: 46px;
|
|
2735
3021
|
height: 24px;
|
|
2736
3022
|
}
|
|
@@ -2750,7 +3036,6 @@ video {
|
|
|
2750
3036
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
2751
3037
|
transition-duration: 300ms;
|
|
2752
3038
|
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
3039
|
left: 2px;
|
|
2755
3040
|
top: 2px;
|
|
2756
3041
|
content: '';
|
|
@@ -2772,13 +3057,12 @@ video {
|
|
|
2772
3057
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
2773
3058
|
transition-duration: 300ms;
|
|
2774
3059
|
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
3060
|
left: 16px;
|
|
2777
3061
|
top: 2px;
|
|
2778
3062
|
content: '';
|
|
2779
3063
|
}
|
|
2780
3064
|
|
|
2781
|
-
.psui-el-switch
|
|
3065
|
+
.psui-el-switch:focus {
|
|
2782
3066
|
outline: 2px solid transparent;
|
|
2783
3067
|
outline-offset: 2px;
|
|
2784
3068
|
}
|
|
@@ -3065,11 +3349,11 @@ video {
|
|
|
3065
3349
|
color: rgba(49, 143, 172, var(--text-opacity));
|
|
3066
3350
|
}
|
|
3067
3351
|
|
|
3068
|
-
.psui-el-slider
|
|
3352
|
+
.psui-el-slider-label {
|
|
3069
3353
|
margin-bottom: 0.5rem;
|
|
3070
3354
|
}
|
|
3071
3355
|
|
|
3072
|
-
.psui-el-slider
|
|
3356
|
+
.psui-el-slider-label span {
|
|
3073
3357
|
--text-opacity: 1;
|
|
3074
3358
|
color: #798490;
|
|
3075
3359
|
color: rgba(121, 132, 144, var(--text-opacity));
|
|
@@ -3077,6 +3361,224 @@ video {
|
|
|
3077
3361
|
line-height: 130%
|
|
3078
3362
|
}
|
|
3079
3363
|
|
|
3364
|
+
.psui-el-slider-input {
|
|
3365
|
+
width: 100%;
|
|
3366
|
+
-webkit-appearance: none;
|
|
3367
|
+
height: 6px;
|
|
3368
|
+
border-radius: 5px;
|
|
3369
|
+
background: #d3d3d3;
|
|
3370
|
+
outline: none;
|
|
3371
|
+
opacity: 0.7;
|
|
3372
|
+
transition: opacity .2s;
|
|
3373
|
+
}
|
|
3374
|
+
|
|
3375
|
+
.psui-el-slider-input:hover {
|
|
3376
|
+
opacity: 1;
|
|
3377
|
+
}
|
|
3378
|
+
|
|
3379
|
+
.psui-el-slider-input::-webkit-slider-thumb {
|
|
3380
|
+
border: none;
|
|
3381
|
+
-webkit-appearance: none;
|
|
3382
|
+
appearance: none;
|
|
3383
|
+
width: 20px;
|
|
3384
|
+
height: 20px;
|
|
3385
|
+
border-radius: 50%;
|
|
3386
|
+
background: #64B5CE;
|
|
3387
|
+
cursor: pointer;
|
|
3388
|
+
}
|
|
3389
|
+
|
|
3390
|
+
.psui-el-slider-input::-moz-range-thumb {
|
|
3391
|
+
border: none;
|
|
3392
|
+
width: 20px;
|
|
3393
|
+
height: 20px;
|
|
3394
|
+
border-radius: 50%;
|
|
3395
|
+
background: #64B5CE;
|
|
3396
|
+
cursor: pointer;
|
|
3397
|
+
}
|
|
3398
|
+
|
|
3399
|
+
.psui-el-slider-input::-webkit-slider-progress,
|
|
3400
|
+
.psui-el-slider-input::-moz-range-progress {
|
|
3401
|
+
border-top-left-radius: 5px;
|
|
3402
|
+
border-bottom-left-radius: 5px;
|
|
3403
|
+
-webkit-appearance: none;
|
|
3404
|
+
box-shadow: none;
|
|
3405
|
+
border: none;
|
|
3406
|
+
background: #64B5CE;
|
|
3407
|
+
height: 6px;
|
|
3408
|
+
}
|
|
3409
|
+
|
|
3410
|
+
.psui-el-slider-bubble {
|
|
3411
|
+
--bg-opacity: 1;
|
|
3412
|
+
background-color: #E6ECF2;
|
|
3413
|
+
background-color: rgba(230, 236, 242, var(--bg-opacity));
|
|
3414
|
+
font-weight: 700;
|
|
3415
|
+
--text-opacity: 1;
|
|
3416
|
+
color: #798490;
|
|
3417
|
+
color: rgba(121, 132, 144, var(--text-opacity));
|
|
3418
|
+
padding-left: 0.5rem;
|
|
3419
|
+
padding-right: 0.5rem;
|
|
3420
|
+
padding-top: 1px;
|
|
3421
|
+
padding-bottom: 1px;
|
|
3422
|
+
border-radius: 0.125rem;
|
|
3423
|
+
float: left;
|
|
3424
|
+
margin-left: 0.5rem;
|
|
3425
|
+
}
|
|
3426
|
+
|
|
3427
|
+
.psui-el-slider.layout-default .psui-el-slider-range-value {
|
|
3428
|
+
position: relative;
|
|
3429
|
+
color: #ffffff ;
|
|
3430
|
+
font-weight: 700;
|
|
3431
|
+
--bg-opacity: 1;
|
|
3432
|
+
background-color: #A2ACB7;
|
|
3433
|
+
background-color: rgba(162, 172, 183, var(--bg-opacity));
|
|
3434
|
+
--text-opacity: 1;
|
|
3435
|
+
color: #E6ECF2;
|
|
3436
|
+
color: rgba(230, 236, 242, var(--text-opacity));
|
|
3437
|
+
border-radius: 0.375rem;
|
|
3438
|
+
width: 2.5rem;
|
|
3439
|
+
text-align: center;
|
|
3440
|
+
display: inline-block;
|
|
3441
|
+
transform: translateX(-6px);
|
|
3442
|
+
margin-bottom: 10px;
|
|
3443
|
+
padding: 2px 4px;
|
|
3444
|
+
}
|
|
3445
|
+
|
|
3446
|
+
.psui-el-slider.layout-rich .psui-el-slider-input {
|
|
3447
|
+
--bg-opacity: 1;
|
|
3448
|
+
background-color: #D6DDE5;
|
|
3449
|
+
background-color: rgba(214, 221, 229, var(--bg-opacity));
|
|
3450
|
+
border-radius: 0.25rem;
|
|
3451
|
+
box-shadow: 0px 1px 0px #FFFFFF, inset 0px 1px 2px rgba(0, 0, 0, 0.1);
|
|
3452
|
+
opacity: 1;
|
|
3453
|
+
height: 0.5rem;
|
|
3454
|
+
}
|
|
3455
|
+
|
|
3456
|
+
.psui-el-slider.layout-rich .psui-el-slider-input::-webkit-slider-thumb {
|
|
3457
|
+
position: relative;
|
|
3458
|
+
--bg-opacity: 1;
|
|
3459
|
+
background-color: #64B5CE;
|
|
3460
|
+
background-color: rgba(100, 181, 206, var(--bg-opacity));
|
|
3461
|
+
width: 1.5rem;
|
|
3462
|
+
height: 1.5rem;
|
|
3463
|
+
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.04), 0px 2px 5px rgba(0, 0, 0, 0.08);
|
|
3464
|
+
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iNiIgdmlld0JveD0iMCAwIDEyIDYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTAuMzUzNzEyIDIuNjc0NDJMMy4xNDY2IDAuMTM0MDhDMy40NjE2OCAtMC4xNTI1MDYgMy45OTk5MiAwLjA1MDczODUgMy45OTk5MiAwLjQ1NjMwMVY1LjU0MzdDMy45OTk5MiA1Ljk0OTU1IDMuNDYxMDIgNi4xNTI2NiAzLjE0NjE0IDUuODY1NDlMMC4zNTMyNDUgMy4zMTg0NEMwLjE1ODExMSAzLjE0MDQ4IDAuMTU4MzIgMi44NTIxNCAwLjM1MzcxMiAyLjY3NDQyWiIgZmlsbD0id2hpdGUiLz4KICA8cGF0aCBkPSJNMTEuNjQ2MSAyLjY3NDQyTDguODUzMjQgMC4xMzQwOEM4LjUzODE3IC0wLjE1MjUwNiA3Ljk5OTkyIDAuMDUwNzM4NSA3Ljk5OTkyIDAuNDU2MzAxVjUuNTQzN0M3Ljk5OTkyIDUuOTQ5NTUgOC41Mzg4MyA2LjE1MjY2IDguODUzNzEgNS44NjU0OUwxMS42NDY2IDMuMzE4NDRDMTEuODQxNyAzLjE0MDQ4IDExLjg0MTUgMi44NTIxNCAxMS42NDYxIDIuNjc0NDJaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4=");
|
|
3465
|
+
background-position: center center;
|
|
3466
|
+
background-repeat: no-repeat;
|
|
3467
|
+
z-index: 30;
|
|
3468
|
+
}
|
|
3469
|
+
|
|
3470
|
+
.psui-el-slider.layout-rich .psui-el-slider-input::-moz-range-thumb {
|
|
3471
|
+
border: none;
|
|
3472
|
+
width: 20px;
|
|
3473
|
+
height: 20px;
|
|
3474
|
+
border-radius: 50%;
|
|
3475
|
+
background: #64B5CE;
|
|
3476
|
+
cursor: pointer;
|
|
3477
|
+
}
|
|
3478
|
+
|
|
3479
|
+
.psui-el-slider.layout-rich .psui-el-slider-wrapper {
|
|
3480
|
+
display: flex;
|
|
3481
|
+
flex-direction: column;
|
|
3482
|
+
justify-content: flex-end;
|
|
3483
|
+
position: relative;
|
|
3484
|
+
height: 80px;
|
|
3485
|
+
}
|
|
3486
|
+
|
|
3487
|
+
.psui-el-slider.layout-rich .psui-el-slider-wrapper-input {
|
|
3488
|
+
position: relative;
|
|
3489
|
+
}
|
|
3490
|
+
|
|
3491
|
+
.psui-el-slider.layout-rich .psui-el-slider-wrapper-input .slider-bar,
|
|
3492
|
+
.psui-el-slider.layout-rich .psui-el-slider-wrapper-input .slider-bar-bg,
|
|
3493
|
+
.psui-el-slider.layout-rich .psui-el-slider-wrapper-input .slider-bar-dynamic,
|
|
3494
|
+
.psui-el-slider.layout-rich .psui-el-slider-wrapper-input .slider-bar-max {
|
|
3495
|
+
position: absolute;
|
|
3496
|
+
top: 0;
|
|
3497
|
+
--bg-opacity: 1;
|
|
3498
|
+
background-color: #318FAC;
|
|
3499
|
+
background-color: rgba(49, 143, 172, var(--bg-opacity));
|
|
3500
|
+
box-shadow: 0px 1px 0px #FFFFFF, inset 0px 1px 2px rgba(0, 0, 0, 0.1);
|
|
3501
|
+
height: 0.5rem;
|
|
3502
|
+
}
|
|
3503
|
+
|
|
3504
|
+
.psui-el-slider.layout-rich .psui-el-slider-wrapper-input .slider-bar {
|
|
3505
|
+
--bg-opacity: 1;
|
|
3506
|
+
background-color: #318FAC;
|
|
3507
|
+
background-color: rgba(49, 143, 172, var(--bg-opacity));
|
|
3508
|
+
left: 0;
|
|
3509
|
+
border-radius: 0.25rem;
|
|
3510
|
+
z-index: 20;
|
|
3511
|
+
}
|
|
3512
|
+
|
|
3513
|
+
.psui-el-slider.layout-rich .psui-el-slider-wrapper-input .slider-bar-max {
|
|
3514
|
+
--bg-opacity: 1;
|
|
3515
|
+
background-color: #A2ACB7;
|
|
3516
|
+
background-color: rgba(162, 172, 183, var(--bg-opacity));
|
|
3517
|
+
right: 0;
|
|
3518
|
+
border-top-right-radius: 0.25rem;
|
|
3519
|
+
border-bottom-right-radius: 0.25rem;
|
|
3520
|
+
}
|
|
3521
|
+
|
|
3522
|
+
.psui-el-slider.layout-rich .psui-el-slider-wrapper-input .slider-bar-bg {
|
|
3523
|
+
z-index: 10;
|
|
3524
|
+
}
|
|
3525
|
+
|
|
3526
|
+
.psui-el-slider.layout-rich .psui-el-slider-wrapper-input .slider-bar-dynamic {
|
|
3527
|
+
z-index: 30;
|
|
3528
|
+
}
|
|
3529
|
+
|
|
3530
|
+
.psui-el-slider.layout-rich .psui-el-slider-range-value {
|
|
3531
|
+
position: absolute;
|
|
3532
|
+
--text-opacity: 1;
|
|
3533
|
+
color: #318FAC;
|
|
3534
|
+
color: rgba(49, 143, 172, var(--text-opacity));
|
|
3535
|
+
font-size: 12px;
|
|
3536
|
+
line-height: 130%;
|
|
3537
|
+
font-weight: 700;
|
|
3538
|
+
text-align: center;
|
|
3539
|
+
width: 1.5rem;
|
|
3540
|
+
display: inline-block;
|
|
3541
|
+
top: -28px;
|
|
3542
|
+
}
|
|
3543
|
+
|
|
3544
|
+
.psui-el-slider.layout-rich .psui-el-slider-grid {
|
|
3545
|
+
position: relative;
|
|
3546
|
+
display: flex;
|
|
3547
|
+
justify-content: space-between;
|
|
3548
|
+
padding-top: 10px;
|
|
3549
|
+
margin-top: 3px;
|
|
3550
|
+
height: 26px;
|
|
3551
|
+
}
|
|
3552
|
+
|
|
3553
|
+
.psui-el-slider.layout-rich .psui-el-slider-grid .line {
|
|
3554
|
+
position: absolute;
|
|
3555
|
+
top: 0;
|
|
3556
|
+
width: 1px;
|
|
3557
|
+
height: 0.5rem;
|
|
3558
|
+
--bg-opacity: 1;
|
|
3559
|
+
background-color: #515E6A;
|
|
3560
|
+
background-color: rgba(81, 94, 106, var(--bg-opacity));
|
|
3561
|
+
}
|
|
3562
|
+
|
|
3563
|
+
.psui-el-slider.layout-rich .psui-el-slider-grid .info {
|
|
3564
|
+
font-size: 12px;
|
|
3565
|
+
line-height: 130%;
|
|
3566
|
+
--text-opacity: 1;
|
|
3567
|
+
color: #515E6A;
|
|
3568
|
+
color: rgba(81, 94, 106, var(--text-opacity));
|
|
3569
|
+
width: 1.5rem;
|
|
3570
|
+
display: inline-block;
|
|
3571
|
+
text-align: center;
|
|
3572
|
+
}
|
|
3573
|
+
|
|
3574
|
+
.psui-el-slider.layout-rich .psui-el-slider-grid .info-min {
|
|
3575
|
+
transform: translateX(-12px);
|
|
3576
|
+
}
|
|
3577
|
+
|
|
3578
|
+
.psui-el-slider.layout-rich .psui-el-slider-grid .info-max {
|
|
3579
|
+
transform: translateX(12px);
|
|
3580
|
+
}
|
|
3581
|
+
|
|
3080
3582
|
.psui-el-toast {
|
|
3081
3583
|
display: flex;
|
|
3082
3584
|
align-items: center;
|