vanilla-framework 4.40.0 → 4.41.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/package.json
CHANGED
|
@@ -22,9 +22,38 @@
|
|
|
22
22
|
// stylelint-disable selector-max-type -- table elements can use selector types
|
|
23
23
|
table th {
|
|
24
24
|
&[aria-sort] {
|
|
25
|
-
align-items: center;
|
|
26
25
|
cursor: pointer;
|
|
26
|
+
outline-color: $colors--theme--focus;
|
|
27
27
|
white-space: nowrap;
|
|
28
|
+
|
|
29
|
+
&:hover,
|
|
30
|
+
&:focus-visible {
|
|
31
|
+
color: $colors--theme--link-default;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.p-table__sort-button {
|
|
35
|
+
// "inherit" styles are used to ensure this uses th styles instead of button defaults
|
|
36
|
+
background: inherit;
|
|
37
|
+
border: none;
|
|
38
|
+
color: inherit;
|
|
39
|
+
display: inline-block;
|
|
40
|
+
font: inherit;
|
|
41
|
+
// Cancel the focus outline space to avoid affecting layout
|
|
42
|
+
margin: -2px -#{$sph--x-small};
|
|
43
|
+
max-width: 100%;
|
|
44
|
+
outline-color: inherit;
|
|
45
|
+
overflow: inherit;
|
|
46
|
+
// Small spacer for the focus outline
|
|
47
|
+
padding: 2px $sph--x-small;
|
|
48
|
+
text-align: inherit;
|
|
49
|
+
text-decoration: inherit;
|
|
50
|
+
text-indent: inherit;
|
|
51
|
+
text-overflow: inherit;
|
|
52
|
+
text-transform: inherit;
|
|
53
|
+
text-wrap: inherit;
|
|
54
|
+
vertical-align: inherit;
|
|
55
|
+
white-space: inherit;
|
|
56
|
+
}
|
|
28
57
|
}
|
|
29
58
|
|
|
30
59
|
&[aria-sort='ascending']::after {
|
|
@@ -39,7 +68,6 @@
|
|
|
39
68
|
}
|
|
40
69
|
|
|
41
70
|
&[aria-sort]:hover {
|
|
42
|
-
color: $colors--theme--link-default;
|
|
43
71
|
text-decoration: underline;
|
|
44
72
|
}
|
|
45
73
|
}
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
# desktop vs. 50/50 split between title/description
|
|
4
4
|
# is_list_full_width_on_tablet: whether list title/description each have their
|
|
5
5
|
# own row on tablet vs. 50/50 split between title/description
|
|
6
|
+
# padding: Type of padding to apply. Options are "deep", "shallow", "default". Default is "default".
|
|
6
7
|
# Slots
|
|
7
8
|
# title: top-level title element
|
|
8
9
|
# description: top-level description element
|
|
@@ -10,6 +11,7 @@
|
|
|
10
11
|
# list_item_description_[1-25]: description element of each child list item
|
|
11
12
|
# cta: CTA block element
|
|
12
13
|
{% macro vf_tiered_list(
|
|
14
|
+
padding="default",
|
|
13
15
|
is_description_full_width_on_desktop=true,
|
|
14
16
|
is_list_full_width_on_tablet=true) -%}
|
|
15
17
|
{%- set title_content = caller('title') -%}
|
|
@@ -17,8 +19,17 @@
|
|
|
17
19
|
{%- set has_description = description_content|trim|length > 0 -%}
|
|
18
20
|
{%- set cta_content = caller('cta') -%}
|
|
19
21
|
{%- set has_cta = cta_content|trim|length > 0 -%}
|
|
22
|
+
{%- set padding = padding | trim -%}
|
|
23
|
+
{%- if padding not in ["deep", "shallow", "default"] -%}
|
|
24
|
+
{%- set padding = "default" -%}
|
|
25
|
+
{%- endif -%}
|
|
26
|
+
{%- if padding == "default" -%}
|
|
27
|
+
{%- set padding_classes = "p-section" -%}
|
|
28
|
+
{%- else -%}
|
|
29
|
+
{%- set padding_classes = "p-section--" + padding -%}
|
|
30
|
+
{%- endif -%}
|
|
20
31
|
|
|
21
|
-
<div class="
|
|
32
|
+
<div class="{{ padding_classes }} u-fixed-width">
|
|
22
33
|
<hr class="p-rule">
|
|
23
34
|
<div class="p-section--shallow">
|
|
24
35
|
{% if has_description == true -%}
|