@openeuropa/bcl-theme-default 1.4.0 → 1.6.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/bcl-builder.config.js +3 -1
- package/css/oe-bcl-ckeditor5.min.css +1 -1
- package/css/oe-bcl-ckeditor5.min.css.map +1 -1
- package/css/oe-bcl-default.css +81 -7
- package/css/oe-bcl-default.css.map +1 -1
- package/css/oe-bcl-default.min.css +1 -1
- package/css/oe-bcl-default.min.css.map +1 -1
- package/package.json +5 -5
- package/src/scss/_inpage-navigation.scss +65 -4
- package/templates/bcl-inpage-navigation/inpage-navigation.html.twig +30 -9
- package/templates/bcl-pagination/pagination.html.twig +13 -10
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@openeuropa/bcl-theme-default",
|
|
3
3
|
"author": "European Commission",
|
|
4
4
|
"license": "EUPL-1.2",
|
|
5
|
-
"version": "1.
|
|
5
|
+
"version": "1.6.0",
|
|
6
6
|
"description": "OE - BCL theme default",
|
|
7
7
|
"scripts": {
|
|
8
8
|
"align-templates": "lerna --scope \"@openeuropa/bcl-twig-templates\" run prepublish",
|
|
@@ -22,9 +22,9 @@
|
|
|
22
22
|
"@ecl/resources-ec-logo": "3.7.1",
|
|
23
23
|
"@ecl/resources-eu-logo": "3.7.1",
|
|
24
24
|
"@ecl/resources-flag-icons": "3.7.1",
|
|
25
|
-
"@openeuropa/bcl-bootstrap": "^1.
|
|
26
|
-
"@openeuropa/bcl-builder": "^1.
|
|
27
|
-
"@openeuropa/bcl-twig-templates": "^1.
|
|
25
|
+
"@openeuropa/bcl-bootstrap": "^1.6.0",
|
|
26
|
+
"@openeuropa/bcl-builder": "^1.6.0",
|
|
27
|
+
"@openeuropa/bcl-twig-templates": "^1.6.0",
|
|
28
28
|
"copyfiles": "2.4.1",
|
|
29
29
|
"cross-env": "7.0.3",
|
|
30
30
|
"flag-icons": "6.9.2",
|
|
@@ -49,5 +49,5 @@
|
|
|
49
49
|
"design-system",
|
|
50
50
|
"twig"
|
|
51
51
|
],
|
|
52
|
-
"gitHead": "
|
|
52
|
+
"gitHead": "f82d4f83aa17cc668a051d1fd26bcbdb0122fddd"
|
|
53
53
|
}
|
|
@@ -1,12 +1,44 @@
|
|
|
1
|
+
.bcl-sidebar:has(> .bcl-inpage-navigation) {
|
|
2
|
+
position: sticky;
|
|
3
|
+
top: 0;
|
|
4
|
+
z-index: 2;
|
|
5
|
+
}
|
|
1
6
|
.bcl-inpage-navigation {
|
|
2
|
-
|
|
3
|
-
top: map-get($spacers, 3); // needed for position-sticky
|
|
7
|
+
top: 0;
|
|
4
8
|
background-color: $gray-100;
|
|
5
9
|
|
|
10
|
+
.dropdown-toggle {
|
|
11
|
+
display: flex;
|
|
12
|
+
justify-content: space-between;
|
|
13
|
+
align-items: center;
|
|
14
|
+
white-space: normal;
|
|
15
|
+
border-bottom: 1px solid $gray-300;
|
|
16
|
+
&:after {
|
|
17
|
+
display: none;
|
|
18
|
+
}
|
|
19
|
+
.bi {
|
|
20
|
+
transition: 0.3s ease;
|
|
21
|
+
}
|
|
22
|
+
&.show {
|
|
23
|
+
.bi {
|
|
24
|
+
transform: rotate(180deg);
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.dropdown-menu {
|
|
30
|
+
position: relative;
|
|
31
|
+
background-color: $gray-100;
|
|
32
|
+
width: 100%;
|
|
33
|
+
top: 100% !important;
|
|
34
|
+
border: none;
|
|
35
|
+
border-radius: 0;
|
|
36
|
+
transform: none !important;
|
|
37
|
+
}
|
|
38
|
+
|
|
6
39
|
.bcl-heading {
|
|
7
40
|
margin-bottom: 0;
|
|
8
41
|
padding: map-get($spacers, "3-5");
|
|
9
|
-
border-bottom: 1px solid $gray-300;
|
|
10
42
|
}
|
|
11
43
|
ul {
|
|
12
44
|
padding: map-get($spacers, "2-5");
|
|
@@ -28,8 +60,37 @@
|
|
|
28
60
|
}
|
|
29
61
|
}
|
|
30
62
|
|
|
31
|
-
@include media-breakpoint-
|
|
63
|
+
@include media-breakpoint-down(sm) {
|
|
64
|
+
.bcl-sidebar:has(> .bcl-inpage-navigation) {
|
|
65
|
+
padding-left: 0;
|
|
66
|
+
padding-right: 0;
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
@include media-breakpoint-down(lg) {
|
|
71
|
+
.bcl-sidebar:has(> .bcl-inpage-navigation) {
|
|
72
|
+
padding-bottom: map-get($spacers, 3);
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
@include media-breakpoint-up(md) {
|
|
32
77
|
.bcl-inpage-navigation {
|
|
33
78
|
display: block;
|
|
79
|
+
top: map-get($spacers, 3);
|
|
80
|
+
.dropdown-toggle {
|
|
81
|
+
cursor: auto;
|
|
82
|
+
&::after {
|
|
83
|
+
display: none;
|
|
84
|
+
}
|
|
85
|
+
.bi {
|
|
86
|
+
display: none;
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
.dropdown-menu {
|
|
90
|
+
position: relative !important;
|
|
91
|
+
background: transparent;
|
|
92
|
+
padding: 0;
|
|
93
|
+
display: block;
|
|
94
|
+
}
|
|
34
95
|
}
|
|
35
96
|
}
|
|
@@ -7,7 +7,9 @@ Parameters:
|
|
|
7
7
|
- title_link: (link object) (default: {})
|
|
8
8
|
- title_attributes (drupal attrs)
|
|
9
9
|
- links: (link[]) (default: [])
|
|
10
|
-
- id (string) (default: bcl-inpage-navigation-random(
|
|
10
|
+
- id (string) (default: bcl-inpage-navigation-random(100))
|
|
11
|
+
- dropdown_id (string) (default: bcl-inpage-navigation-dropdown-random(100))
|
|
12
|
+
- icon_path (string) (default: '')
|
|
11
13
|
- attributes (drupal attrs)
|
|
12
14
|
#}
|
|
13
15
|
|
|
@@ -16,7 +18,9 @@ Parameters:
|
|
|
16
18
|
{% set _title_link = title_link|default({}) %}
|
|
17
19
|
{% set _title_attributes = title_attributes ?: create_attribute() %}
|
|
18
20
|
{% set _links = links|default([]) %}
|
|
19
|
-
{% set _id = id|default('bcl-inpage-navigation-' ~ random(
|
|
21
|
+
{% set _id = id|default('bcl-inpage-navigation-' ~ random(100)) %}
|
|
22
|
+
{% set _icon_path = icon_path|default('') %}
|
|
23
|
+
{% set _dropdown_id = dropdown_id|default('bcl-inpage-navigation-dropdown' ~ random(100)) %}
|
|
20
24
|
|
|
21
25
|
{% if attributes is empty %}
|
|
22
26
|
{% set attributes = create_attribute() %}
|
|
@@ -24,19 +28,36 @@ Parameters:
|
|
|
24
28
|
|
|
25
29
|
{% set attributes = attributes.addClass(['bcl-inpage-navigation', 'position-sticky']).setAttribute('id', _id) %}
|
|
26
30
|
{% set title_attributes = _title_attributes.addClass('mb-0') %}
|
|
31
|
+
{% set _title_content %}
|
|
32
|
+
{{ _title }}
|
|
33
|
+
{%- include '@oe-bcl/bcl-icon/icon.html.twig' with {
|
|
34
|
+
name: 'chevron-down',
|
|
35
|
+
size: 's',
|
|
36
|
+
path: _icon_path,
|
|
37
|
+
} only -%}
|
|
38
|
+
{% endset %}
|
|
27
39
|
|
|
28
40
|
<nav {{ attributes }}>
|
|
41
|
+
{% set trigger_attributes = create_attribute()
|
|
42
|
+
.setAttribute('aria-expanded', 'false')
|
|
43
|
+
.setAttribute('type', 'button')
|
|
44
|
+
.setAttribute('id', _dropdown_id)
|
|
45
|
+
.setAttribute('data-bs-toggle', 'dropdown')
|
|
46
|
+
.addClass(['dropdown-toggle']) %}
|
|
29
47
|
{% include '@oe-bcl/bcl-heading/heading.html.twig' with {
|
|
30
|
-
title:
|
|
48
|
+
title: _title_content,
|
|
31
49
|
title_tag: _title_tag,
|
|
32
50
|
title_link: _title_link,
|
|
33
|
-
attributes: _title_attributes
|
|
34
|
-
|
|
35
|
-
{% include '@oe-bcl/bcl-navigation/navigation.html.twig' with {
|
|
36
|
-
'pills': true,
|
|
37
|
-
'vertical': true,
|
|
38
|
-
'items': _links,
|
|
51
|
+
attributes: _title_attributes
|
|
52
|
+
.merge(trigger_attributes),
|
|
39
53
|
} only %}
|
|
54
|
+
<div class="dropdown-menu" aria-labelledby="{{ _dropdown_id }}">
|
|
55
|
+
{% include '@oe-bcl/bcl-navigation/navigation.html.twig' with {
|
|
56
|
+
'pills': true,
|
|
57
|
+
'vertical': true,
|
|
58
|
+
'items': _links,
|
|
59
|
+
} only %}
|
|
60
|
+
</div>
|
|
40
61
|
</nav>
|
|
41
62
|
|
|
42
63
|
{% endapply %}
|
|
@@ -29,6 +29,7 @@
|
|
|
29
29
|
}
|
|
30
30
|
- icon_path (string) (default: '')
|
|
31
31
|
- attributes (drupal attrs)
|
|
32
|
+
- list_attributes (drupal attrs)
|
|
32
33
|
#}
|
|
33
34
|
|
|
34
35
|
{% set _size = size|default('') %}
|
|
@@ -102,19 +103,23 @@
|
|
|
102
103
|
|
|
103
104
|
{% set _internal_items = _internal_items|merge([_next, _last]) %}
|
|
104
105
|
|
|
105
|
-
{% if
|
|
106
|
-
{% set
|
|
106
|
+
{% if list_attributes is empty %}
|
|
107
|
+
{% set list_attributes = create_attribute() %}
|
|
107
108
|
{% endif %}
|
|
108
109
|
|
|
109
|
-
{% set
|
|
110
|
+
{% set list_attributes = list_attributes.addClass('pagination') %}
|
|
110
111
|
{% if _size is not empty %}
|
|
111
|
-
{% set
|
|
112
|
+
{% set list_attributes = list_attributes.addClass('pagination-' ~ _size) %}
|
|
112
113
|
{% endif %}
|
|
113
114
|
{% if _variant is not empty %}
|
|
114
|
-
{% set
|
|
115
|
+
{% set list_attributes = list_attributes.addClass('pagination--' ~ _variant) %}
|
|
115
116
|
{% endif %}
|
|
116
117
|
{% if _alignment is not empty %}
|
|
117
|
-
{% set
|
|
118
|
+
{% set list_attributes = list_attributes.addClass('justify-content-' ~ _alignment) %}
|
|
119
|
+
{% endif %}
|
|
120
|
+
|
|
121
|
+
{% if attributes is empty %}
|
|
122
|
+
{% set attributes = create_attribute() %}
|
|
118
123
|
{% endif %}
|
|
119
124
|
|
|
120
125
|
{% set attributes = attributes.setAttribute('role', 'navigation') %}
|
|
@@ -127,10 +132,8 @@
|
|
|
127
132
|
{% set attributes = attributes.setAttribute('aria-label', aria_label) %}
|
|
128
133
|
{% endif %}
|
|
129
134
|
|
|
130
|
-
<nav
|
|
131
|
-
{{
|
|
132
|
-
>
|
|
133
|
-
<ul class="{{ _classes|join(' ') }}">
|
|
135
|
+
<nav{{ attributes }}>
|
|
136
|
+
<ul{{ list_attributes }}>
|
|
134
137
|
{% if _internal_items is not empty and _internal_items is iterable %}
|
|
135
138
|
{% for _item in _internal_items %}
|
|
136
139
|
{% if _item is not empty %}
|