swedbank-pay-design-guide-jekyll-theme 1.14.0 → 1.17.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.
- checksums.yaml +4 -4
- data/_includes/alert.html +3 -17
- data/_includes/card-extended.html +12 -46
- data/_includes/card-table.html +112 -0
- data/_includes/github.html +1 -1
- data/_includes/tabs.html +12 -2
- data/_layouts/default.html +10 -14
- data/_layouts/front-page.html +10 -5
- data/_sass/card.scss +29 -0
- data/_sass/front-page.scss +34 -12
- data/_sass/heading.scss +6 -0
- data/_sass/sidebar.scss +21 -95
- data/_sass/swedbank-pay-design-guide-theme.scss +10 -5
- data/_sass/tabs.scss +11 -0
- data/_sass/title-header.scss +19 -1
- data/lib/gem_version.rb +1 -1
- data/lib/sidebar_html_builder.rb +36 -18
- data/lib/sidebar_page.rb +3 -2
- metadata +10 -8
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 216bd16da1e18a58dfe126c5db52cb37c7e244d12a9dd4b70580a3137fa992d1
|
|
4
|
+
data.tar.gz: 7cd79606950e7907a8414d50d245036a1b2f52ae37325bd6db146a3958825c70
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: efb0eab9682e771974c7cc04e4c8a85811939f88760e8b0773696567e752bb9daa069144df787423af5cec97e47db9687946a8941bb95557a3207404f53efbfc
|
|
7
|
+
data.tar.gz: 76bc0e7ca8006e0a4db4bb7c019a2804706f33cb7b7e73e232960a19b70a6f9d1fa13e7259df93c7611fdd6af4f89fdd7895e9ba7a97a060bb2e25abd500af58
|
data/_includes/alert.html
CHANGED
|
@@ -5,28 +5,14 @@
|
|
|
5
5
|
{% assign body = include.body | markdownify | remove: '<p>' | remove: '</p>' | strip %}
|
|
6
6
|
|
|
7
7
|
<div
|
|
8
|
-
class="alert {
|
|
9
|
-
{% if header != blank and header != empty and header != nil %}
|
|
10
|
-
<header class="alert-header">
|
|
11
|
-
{% if icon != blank and icon != empty and icon != nil %}
|
|
12
|
-
<i class="material-icons alert-icon">{{ icon }}</i>
|
|
13
|
-
{% endif %}
|
|
14
|
-
|
|
15
|
-
{% if header != blank and header != empty and header != nil %}
|
|
16
|
-
<h3>{{ header }}</h3>
|
|
17
|
-
{% endif %}
|
|
18
|
-
</header>
|
|
19
|
-
{% else %}
|
|
8
|
+
class="alert {{ type_class }}">
|
|
20
9
|
{% if icon != blank and icon != empty and icon != nil %}
|
|
21
|
-
<i class="material-icons alert-icon">{{ icon }}</i>
|
|
22
|
-
{% endif %}
|
|
10
|
+
<i class="material-icons alert-icon mr-3">{{ icon }}</i>
|
|
23
11
|
{% endif %}
|
|
24
12
|
|
|
25
13
|
{% if body != blank and body != empty and body != nil %}
|
|
26
14
|
{% if header != blank and header != empty and header != nil %}
|
|
27
|
-
|
|
28
|
-
<p>{{ body }}</p>
|
|
29
|
-
</div>
|
|
15
|
+
<p><b>{{ header }}:</b> {{ body }}</p>
|
|
30
16
|
{% else %}
|
|
31
17
|
<p>{{ body }}</p>
|
|
32
18
|
{% endif %}
|
|
@@ -11,7 +11,7 @@ to(required): Url to the page to be directed to on click
|
|
|
11
11
|
type: sdk | module - Empty type result in default card styling
|
|
12
12
|
{%- endcomment -%}
|
|
13
13
|
|
|
14
|
-
{% assign title_type = include.title_type | default: '
|
|
14
|
+
{% assign title_type = include.title_type | default: 'h2', %}
|
|
15
15
|
{% assign icon_content = include.icon_content %}
|
|
16
16
|
{% assign icon_outlined = include.icon_outlined | default: false %}
|
|
17
17
|
{% assign icon_svg = include.icon_svg | default: false %}
|
|
@@ -19,6 +19,8 @@ type: sdk | module - Empty type result in default card styling
|
|
|
19
19
|
{% assign text = include.text %}
|
|
20
20
|
{% assign to = include.to %}
|
|
21
21
|
{% assign disabled = include.disabled %}
|
|
22
|
+
{% assign margin_right = include.margin_right | default false %}
|
|
23
|
+
|
|
22
24
|
|
|
23
25
|
{% unless icon_svg %}
|
|
24
26
|
{% if icon_content contains '/' or icon_content contains '.svg' %}
|
|
@@ -29,7 +31,7 @@ type: sdk | module - Empty type result in default card styling
|
|
|
29
31
|
{% assign card_class = 'cards cards-wide' | strip %}
|
|
30
32
|
|
|
31
33
|
<div class="{{ card_class }}">
|
|
32
|
-
{%
|
|
34
|
+
{% unless no_icon %}
|
|
33
35
|
<span class="cards-icon">
|
|
34
36
|
{% if icon_svg %}
|
|
35
37
|
{% include {{ icon_content }} %}
|
|
@@ -37,55 +39,19 @@ type: sdk | module - Empty type result in default card styling
|
|
|
37
39
|
<i class="material-icons{% if icon_outlined %}-outlined{% endif %}">
|
|
38
40
|
{{ icon_content }}
|
|
39
41
|
</i>
|
|
40
|
-
|
|
42
|
+
{% endif %}
|
|
41
43
|
</span>
|
|
42
|
-
{%
|
|
44
|
+
{% endunless %}
|
|
43
45
|
{% if include.container_content %}
|
|
44
46
|
<div>
|
|
45
47
|
{% endif %}
|
|
46
|
-
|
|
47
|
-
|
|
48
|
+
<span class="cards-content">
|
|
49
|
+
<span class="{{ title_type }}">{{ include.title }}</span>
|
|
50
|
+
{% if margin_right %}
|
|
51
|
+
<span class="text-box-extended">{{ text | markdownify }}</span>
|
|
52
|
+
{% else %}
|
|
48
53
|
<span>{{ text | markdownify }}</span>
|
|
49
|
-
|
|
50
|
-
<thead>
|
|
51
|
-
<tr>
|
|
52
|
-
{% for header in include.header %}
|
|
53
|
-
<th> {% if header.badge_type %}
|
|
54
|
-
<span class="badge badge-{{header.badge_type}}">{{header.table_header}}</span>
|
|
55
|
-
{% else %}
|
|
56
|
-
{{ header.table_header }}
|
|
57
|
-
{% endif %}
|
|
58
|
-
</th>
|
|
59
|
-
{% endfor %}
|
|
60
|
-
</tr>
|
|
61
|
-
</thead>
|
|
62
|
-
<tbody>
|
|
63
|
-
{% for table_content in include.table_content %}
|
|
64
|
-
<tr>
|
|
65
|
-
|
|
66
|
-
<th scope="row">
|
|
67
|
-
<i class="material-icons{% if icon_outlined %}-outlined{% endif %}">
|
|
68
|
-
{{table_content.icon}}
|
|
69
|
-
</i> {{table_content.label}}
|
|
70
|
-
<td>
|
|
71
|
-
{% if table_content.swedbankPay %}
|
|
72
|
-
<i class="material-icons{% if icon_outlined %}-outlined{% endif %}">
|
|
73
|
-
check_circle_outline
|
|
74
|
-
</i>
|
|
75
|
-
{% endif %}
|
|
76
|
-
</td>
|
|
77
|
-
<td>
|
|
78
|
-
{% if table_content.merchantSide %}
|
|
79
|
-
<i class="material-icons{% if icon_outlined %}-outlined{% endif %}">
|
|
80
|
-
check_circle_outline
|
|
81
|
-
</i>
|
|
82
|
-
{% endif %}
|
|
83
|
-
</td>
|
|
84
|
-
</th>
|
|
85
|
-
</tr>
|
|
86
|
-
{% endfor %}
|
|
87
|
-
</tbody>
|
|
88
|
-
</table>
|
|
54
|
+
{% endif %}
|
|
89
55
|
</span>
|
|
90
56
|
{% unless disabled %}
|
|
91
57
|
<a class="btn btn-{{include.button_type}} {{include.button_alignment}}" href="{{to}}" type="button">{{ include.button_content }}<i class="material-icons ml-2"> arrow_forward</i></a>
|
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
{%- comment -%}
|
|
2
|
+
|
|
3
|
+
**About this card
|
|
4
|
+
This card offers the table component from Design Guide
|
|
5
|
+
|
|
6
|
+
**Parameters
|
|
7
|
+
title(required): Title of the card
|
|
8
|
+
title_type: Determines size of the title
|
|
9
|
+
icon_content: Used to generate content of cards-icon
|
|
10
|
+
icon_outlined: Make icon_content outlined if icon_content is material-icon
|
|
11
|
+
icon_svg: Handles value of icon_content as a reference to a svg-file
|
|
12
|
+
no_icon: Hides cards-icon
|
|
13
|
+
text: Text content of the card
|
|
14
|
+
to(required): Url to the page to be directed to on click
|
|
15
|
+
type: sdk | module - Empty type result in default card styling
|
|
16
|
+
{%- endcomment -%}
|
|
17
|
+
|
|
18
|
+
{% assign title_type = include.title_type | default: 'h2', %}
|
|
19
|
+
{% assign icon_content = include.icon_content %}
|
|
20
|
+
{% assign icon_outlined = include.icon_outlined | default: false %}
|
|
21
|
+
{% assign icon_svg = include.icon_svg | default: false %}
|
|
22
|
+
{% assign no_icon = include.no_icon | default: false %}
|
|
23
|
+
{% assign text = include.text %}
|
|
24
|
+
{% assign to = include.to %}
|
|
25
|
+
{% assign disabled = include.disabled %}
|
|
26
|
+
{% assign margin_right = include.margin_right | default false %}
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
{% unless icon_svg %}
|
|
30
|
+
{% if icon_content contains '/' or icon_content contains '.svg' %}
|
|
31
|
+
{% assign icon_svg = true %}
|
|
32
|
+
{% endif %}
|
|
33
|
+
{% endunless %}
|
|
34
|
+
|
|
35
|
+
{% assign card_class = 'cards cards-wide' | strip %}
|
|
36
|
+
|
|
37
|
+
<div class="{{ card_class }}">
|
|
38
|
+
{% unless no_icon %}
|
|
39
|
+
<span class="cards-icon">
|
|
40
|
+
{% if icon_svg %}
|
|
41
|
+
{% include {{ icon_content }} %}
|
|
42
|
+
{% else %}
|
|
43
|
+
<i class="material-icons{% if icon_outlined %}-outlined{% endif %}">
|
|
44
|
+
{{ icon_content }}
|
|
45
|
+
</i>
|
|
46
|
+
{% endif %}
|
|
47
|
+
</span>
|
|
48
|
+
{% endunless %}
|
|
49
|
+
{% if include.container_content %}
|
|
50
|
+
<div>
|
|
51
|
+
{% endif %}
|
|
52
|
+
<span class="cards-content">
|
|
53
|
+
<span class="{{ title_type }}">{{ include.title }}</span>
|
|
54
|
+
{% if margin_right %}
|
|
55
|
+
<span class="text-box">{{ text | markdownify }}</span>
|
|
56
|
+
{% else %}
|
|
57
|
+
<span>{{ text | markdownify }}</span>
|
|
58
|
+
{% endif %}
|
|
59
|
+
<div class="d-flex">
|
|
60
|
+
<table class="table table-plain">
|
|
61
|
+
<thead>
|
|
62
|
+
<tr>
|
|
63
|
+
{% for header in include.header %}
|
|
64
|
+
<th> {% if header.badge_type %}
|
|
65
|
+
<span class="badge badge-{{header.badge_type}}">{{header.table_header}}</span>
|
|
66
|
+
{% else %}
|
|
67
|
+
{{ header.table_header }}
|
|
68
|
+
{% endif %}
|
|
69
|
+
</th>
|
|
70
|
+
{% endfor %}
|
|
71
|
+
</tr>
|
|
72
|
+
</thead>
|
|
73
|
+
<tbody>
|
|
74
|
+
{% for table_content in include.table_content %}
|
|
75
|
+
<tr>
|
|
76
|
+
|
|
77
|
+
<th scope="row">
|
|
78
|
+
<i class="material-icons{% if icon_outlined %}-outlined{% endif %}">
|
|
79
|
+
{{table_content.icon}}
|
|
80
|
+
</i> {{table_content.label}}
|
|
81
|
+
<td>
|
|
82
|
+
{% if table_content.swedbankPay %}
|
|
83
|
+
<i class="material-icons{% if icon_outlined %}-outlined{% endif %}">
|
|
84
|
+
check_circle_outline
|
|
85
|
+
</i>
|
|
86
|
+
{% endif %}
|
|
87
|
+
</td>
|
|
88
|
+
<td>
|
|
89
|
+
{% if table_content.merchantSide %}
|
|
90
|
+
<i class="material-icons{% if icon_outlined %}-outlined{% endif %}">
|
|
91
|
+
check_circle_outline
|
|
92
|
+
</i>
|
|
93
|
+
{% endif %}
|
|
94
|
+
</td>
|
|
95
|
+
</th>
|
|
96
|
+
</tr>
|
|
97
|
+
{% endfor %}
|
|
98
|
+
</tbody>
|
|
99
|
+
</table>
|
|
100
|
+
{% unless disabled %}
|
|
101
|
+
<a class="btn btn-{{include.button_type}} {{include.button_alignment}}" href="{{to}}" type="button">{{ include.button_content }}<i class="material-icons ml-2"> arrow_forward</i></a>
|
|
102
|
+
{% endunless %}
|
|
103
|
+
</div>
|
|
104
|
+
</span>
|
|
105
|
+
{% if include.container_content %}
|
|
106
|
+
</div>
|
|
107
|
+
<div class="container-right">
|
|
108
|
+
{{ include.container_content | markdownify }}
|
|
109
|
+
</div>
|
|
110
|
+
{% endif %}
|
|
111
|
+
</div>
|
|
112
|
+
|
data/_includes/github.html
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{% assign github_branch = site.github.branch | default : "develop" %}
|
|
2
2
|
|
|
3
3
|
<a href="{{ site.github.repository_url }}/tree/{{ github_branch }}/{{ page.path }}"
|
|
4
|
-
|
|
4
|
+
id="github" target="_blank"
|
|
5
5
|
rel="noopener noreferrer" title="Edit '{{ page.title }}' on GitHub">
|
|
6
6
|
<svg aria-labelledby="simpleicons-github-icon" role="img" width="40" viewBox="0 0 24 24"
|
|
7
7
|
xmlns="http://www.w3.org/2000/svg">
|
data/_includes/tabs.html
CHANGED
|
@@ -11,10 +11,20 @@
|
|
|
11
11
|
|
|
12
12
|
<section>
|
|
13
13
|
<div id="tab1">
|
|
14
|
-
|
|
14
|
+
<div class="tab-intro">
|
|
15
|
+
{{ include.tab1_intro | markdownify}}
|
|
16
|
+
</div>
|
|
17
|
+
<div class="tab1-content">
|
|
18
|
+
{{ include.tab1_content | markdownify}}
|
|
19
|
+
</div>
|
|
15
20
|
</div>
|
|
16
21
|
<div id="tab2" class="d-none">
|
|
17
|
-
|
|
22
|
+
<div class="tab-intro">
|
|
23
|
+
{{ include.tab2_intro | markdownify}}
|
|
24
|
+
</div>
|
|
25
|
+
<div>
|
|
26
|
+
{{ include.tab2_content | markdownify}}
|
|
27
|
+
</div>
|
|
18
28
|
</div>
|
|
19
29
|
</section>
|
|
20
30
|
|
data/_layouts/default.html
CHANGED
|
@@ -60,17 +60,15 @@
|
|
|
60
60
|
<div id="designguide">
|
|
61
61
|
<div class="documentation">
|
|
62
62
|
<div class="row">
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
63
|
+
<div id="dg-sidebar" class="sidebar dg-sidebar has-secondary-nav">
|
|
64
|
+
<nav class="sidebar-main-nav">
|
|
65
|
+
<div class="sidebar-logo">
|
|
66
|
+
<a href="/" class="sidebar-header">
|
|
67
|
+
<img src="{{ design_guide_url }}/designguide/assets/swedbankpay-logo-v.svg"
|
|
68
68
|
alt="Swedbank Pay vertical logo" class="logotype-vertical logotype-lg"/>
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
</a>
|
|
73
|
-
{% if site.search.enabled == true %}
|
|
69
|
+
</a>
|
|
70
|
+
</div>
|
|
71
|
+
<!-- {% if site.search.enabled == true %}
|
|
74
72
|
<form class="search-container mx-2 my-4 px-3 py-2 d-flex"
|
|
75
73
|
method="get" action="{{ site.search.url | relative_url }}">
|
|
76
74
|
<input name="q" type="text" id="tipue_search_input"
|
|
@@ -84,14 +82,12 @@
|
|
|
84
82
|
<i class="material-icons m-0" aria-hidden="true">search</i>
|
|
85
83
|
</button>
|
|
86
84
|
</form>
|
|
87
|
-
{% endif %}
|
|
85
|
+
{% endif %} -->
|
|
88
86
|
<ul id="dx-sidebar-main-nav-ul" class="main-nav-ul">
|
|
89
87
|
</ul>
|
|
90
88
|
</nav>
|
|
91
89
|
</div>
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
<main class="doc-view col-xxl-10 col-lg-9">
|
|
90
|
+
<main class="doc-view">
|
|
95
91
|
{% if page.layout != 'front-page' %}
|
|
96
92
|
{% include title-header.html %}
|
|
97
93
|
{% endif %}
|
data/_layouts/front-page.html
CHANGED
|
@@ -7,22 +7,27 @@ layout: default
|
|
|
7
7
|
{% assign front_page_hero1 = page.front_page.hero1 | default: "Welcome to the" %}
|
|
8
8
|
{% assign front_page_hero2 = page.front_page.hero2 | default: "Swedbank Pay" %}
|
|
9
9
|
{% assign front_page_ingress = page.front_page.ingress | default: "Our developer portal gives you the full tool box for integrating our payment instruments and getting started with easy, flexible and safe payments on your e-commerce website." %}
|
|
10
|
-
{% assign front_page_start_heading = page.front_page.start_heading | default: "
|
|
10
|
+
{% assign front_page_start_heading = page.front_page.start_heading | default: "Let's get you started with easy, flexible and safe payments on you e-commerce website!" %}
|
|
11
11
|
|
|
12
12
|
<div class="front-page">
|
|
13
|
+
{% include github.html %}
|
|
13
14
|
<div class="front-page-top">
|
|
14
15
|
<div class="front-page-hero">
|
|
15
|
-
<h3>{{ front_page_hero1 }}
|
|
16
|
-
|
|
16
|
+
<h3>{{ front_page_hero1 }}
|
|
17
|
+
<span class="d-block">
|
|
18
|
+
<span class="front-page-hero-jumbo">{{ front_page_hero2 }}</span>
|
|
19
|
+
<span class="front-page-hero-name"> {</span>
|
|
20
|
+
<span class="front-page-hero-lean">{{ front_page_title }}</span>
|
|
21
|
+
<span class="front-page-hero-name">}</span>
|
|
22
|
+
</span>
|
|
17
23
|
</h3>
|
|
18
24
|
<p>{{ front_page_ingress }}</p>
|
|
19
25
|
</div>
|
|
20
26
|
<div class="front-page-intro-cards">
|
|
21
|
-
<h2 id="front-page-start" class="heading-line">{{ front_page_start_heading }}</h2>
|
|
27
|
+
<h2 id="front-page-start" class="heading-line heading-line-indent">{{ front_page_start_heading }}</h2>
|
|
22
28
|
{% contentblock start %}
|
|
23
29
|
</div>
|
|
24
30
|
|
|
25
|
-
{% include github.html %}
|
|
26
31
|
</div>
|
|
27
32
|
|
|
28
33
|
|
data/_sass/card.scss
CHANGED
|
@@ -1,7 +1,23 @@
|
|
|
1
1
|
@import 'colors.scss';
|
|
2
2
|
|
|
3
3
|
.cards {
|
|
4
|
+
cursor: default;
|
|
5
|
+
|
|
6
|
+
&.cards-wide {
|
|
7
|
+
margin-top: 4rem;
|
|
8
|
+
|
|
9
|
+
.btn {
|
|
10
|
+
margin-bottom: 2rem;
|
|
11
|
+
margin-top: 5rem;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.text-box-extended {
|
|
15
|
+
margin-right: 4.875rem;
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
|
|
4
19
|
.table {
|
|
20
|
+
|
|
5
21
|
&.table-plain {
|
|
6
22
|
thead {
|
|
7
23
|
tr {
|
|
@@ -11,6 +27,18 @@
|
|
|
11
27
|
|
|
12
28
|
th:not(:first-child) {
|
|
13
29
|
text-align: center;
|
|
30
|
+
padding: 0 0.5rem;
|
|
31
|
+
|
|
32
|
+
.badge {
|
|
33
|
+
&.badge-default {
|
|
34
|
+
background-color: #fbdd91;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
&.badge-inactive {
|
|
38
|
+
background-color: #d4c4bc;
|
|
39
|
+
color: $brown;
|
|
40
|
+
}
|
|
41
|
+
}
|
|
14
42
|
}
|
|
15
43
|
}
|
|
16
44
|
}
|
|
@@ -245,3 +273,4 @@
|
|
|
245
273
|
display: flex;
|
|
246
274
|
}
|
|
247
275
|
}
|
|
276
|
+
|
data/_sass/front-page.scss
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
@import 'breakpoints.scss';
|
|
4
4
|
|
|
5
5
|
$front-page-padding: 0 4rem;
|
|
6
|
-
$front-page-max-width:
|
|
6
|
+
$front-page-max-width: $breakpoint-lg;
|
|
7
7
|
|
|
8
8
|
@mixin row-cards {
|
|
9
9
|
>[class*='col-'] {
|
|
@@ -55,31 +55,40 @@ $front-page-max-width: 1312px;
|
|
|
55
55
|
display: flex;
|
|
56
56
|
flex-direction: column;
|
|
57
57
|
align-items: center;
|
|
58
|
+
|
|
59
|
+
#github {
|
|
60
|
+
top: 2.5rem;
|
|
61
|
+
path {
|
|
62
|
+
fill: $black;
|
|
63
|
+
}
|
|
64
|
+
}
|
|
58
65
|
|
|
59
66
|
.front-page-top {
|
|
60
67
|
position: relative;
|
|
61
|
-
|
|
62
|
-
width:
|
|
63
|
-
max-width: 1432px;
|
|
68
|
+
margin: 0 4rem;
|
|
69
|
+
max-width: $front-page-max-width;
|
|
64
70
|
background-color: none;
|
|
65
71
|
z-index: 0;
|
|
66
72
|
border-radius: 1rem;
|
|
67
73
|
|
|
68
74
|
.front-page-hero {
|
|
69
75
|
position: relative;
|
|
70
|
-
|
|
71
|
-
margin-bottom: 3rem;
|
|
76
|
+
margin-bottom: 1.5rem;
|
|
72
77
|
z-index: 1;
|
|
78
|
+
padding: 1.5rem;
|
|
73
79
|
|
|
74
80
|
h3 {
|
|
75
|
-
color: $
|
|
81
|
+
color: $brown;
|
|
76
82
|
font-family: $headline;
|
|
77
83
|
margin-bottom: 2rem;
|
|
78
84
|
font-size: 2.5rem;
|
|
85
|
+
line-height: 3.5rem;
|
|
86
|
+
|
|
87
|
+
|
|
79
88
|
}
|
|
80
89
|
|
|
81
90
|
p {
|
|
82
|
-
color: $
|
|
91
|
+
color: $brown;
|
|
83
92
|
font-size: 1.125rem;
|
|
84
93
|
}
|
|
85
94
|
|
|
@@ -90,7 +99,7 @@ $front-page-max-width: 1312px;
|
|
|
90
99
|
.front-page-hero-name {
|
|
91
100
|
font-family: $mono;
|
|
92
101
|
font-weight: bold;
|
|
93
|
-
font-size:
|
|
102
|
+
font-size: 2.5rem;
|
|
94
103
|
color: $yellow;
|
|
95
104
|
margin-bottom: 1rem;
|
|
96
105
|
|
|
@@ -100,11 +109,25 @@ $front-page-max-width: 1312px;
|
|
|
100
109
|
}
|
|
101
110
|
}
|
|
102
111
|
|
|
112
|
+
.front-page-hero-jumbo {
|
|
113
|
+
color: $brown;
|
|
114
|
+
font-family: $headline;
|
|
115
|
+
margin-bottom: 2rem;
|
|
116
|
+
font-size: 3.5rem;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.front-page-hero-lean {
|
|
120
|
+
font-family: $mono;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
|
|
103
124
|
}
|
|
104
125
|
|
|
105
126
|
.front-page-intro-cards {
|
|
106
127
|
h2 {
|
|
107
|
-
color: $
|
|
128
|
+
color: $brown;
|
|
129
|
+
padding: 1.5rem;
|
|
130
|
+
padding-bottom: 0;
|
|
108
131
|
|
|
109
132
|
.header-anchor {
|
|
110
133
|
display: none;
|
|
@@ -117,13 +140,12 @@ $front-page-max-width: 1312px;
|
|
|
117
140
|
}
|
|
118
141
|
|
|
119
142
|
@media screen and (min-width: $breakpoint-xxl) {
|
|
120
|
-
margin-bottom:
|
|
143
|
+
margin-bottom: 8rem;
|
|
121
144
|
|
|
122
145
|
.front-page-intro-cards {
|
|
123
146
|
position: absolute;
|
|
124
147
|
left: 0;
|
|
125
148
|
width: 100%;
|
|
126
|
-
padding: 0 4rem;
|
|
127
149
|
}
|
|
128
150
|
}
|
|
129
151
|
}
|
data/_sass/heading.scss
CHANGED
data/_sass/sidebar.scss
CHANGED
|
@@ -1,104 +1,30 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
.
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
text-decoration: none;
|
|
11
|
-
color: #512b2b;
|
|
12
|
-
|
|
13
|
-
img {
|
|
14
|
-
margin-top: 1.5rem;
|
|
15
|
-
margin-bottom: 1.25rem;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
span {
|
|
19
|
-
color: #fdc129;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
.sidebar-header-text {
|
|
23
|
-
margin-top: -0.5rem;
|
|
24
|
-
font-size: 1.125rem;
|
|
25
|
-
line-height: 1.5rem;
|
|
26
|
-
color: $black;
|
|
27
|
-
font-family: "Akkurat Mono", monospace;
|
|
28
|
-
white-space: nowrap;
|
|
29
|
-
}
|
|
1
|
+
#dg-sidebar {
|
|
2
|
+
&.sidebar {
|
|
3
|
+
.nav-ul {
|
|
4
|
+
list-style: none;
|
|
5
|
+
overflow: hidden;
|
|
6
|
+
padding: 0;
|
|
7
|
+
top: auto;
|
|
8
|
+
position: relative;
|
|
9
|
+
transition: none;
|
|
30
10
|
}
|
|
11
|
+
}
|
|
31
12
|
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
outline: -webkit-focus-ring-color auto 0.5px;
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
.search-input {
|
|
41
|
-
color: $medium-brown;
|
|
42
|
-
font-size: 0.875rem;
|
|
43
|
-
border: none;
|
|
44
|
-
padding: 0.375rem;
|
|
45
|
-
|
|
46
|
-
&:focus {
|
|
47
|
-
color: $brown;
|
|
48
|
-
outline: none
|
|
49
|
-
}
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
i {
|
|
53
|
-
display: block;
|
|
54
|
-
color: $brown;
|
|
55
|
-
|
|
56
|
-
&:hover {
|
|
57
|
-
color: $turquoise-link;
|
|
13
|
+
.main-nav-ul {
|
|
14
|
+
a {
|
|
15
|
+
&.disabled {
|
|
16
|
+
~nav {
|
|
17
|
+
display: none;
|
|
58
18
|
}
|
|
59
19
|
}
|
|
60
|
-
|
|
61
|
-
button {
|
|
62
|
-
background-color: $white;
|
|
63
|
-
border: none;
|
|
64
|
-
cursor: pointer;
|
|
65
|
-
}
|
|
66
|
-
|
|
67
20
|
}
|
|
68
21
|
|
|
69
|
-
.
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
a {
|
|
76
|
-
color: #257886;
|
|
77
|
-
font-weight: 700;
|
|
78
|
-
}
|
|
79
|
-
}
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
.nav-subgroup-heading {
|
|
83
|
-
padding: 0;
|
|
84
|
-
|
|
85
|
-
i {
|
|
86
|
-
padding: 0.5rem 0;
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
a {
|
|
90
|
-
color: #512b2b;
|
|
91
|
-
padding: .5rem;
|
|
92
|
-
font-size: 1rem;
|
|
93
|
-
line-height: 1.5rem;
|
|
94
|
-
text-decoration: none;
|
|
95
|
-
width: 100%;
|
|
96
|
-
|
|
97
|
-
&:hover,
|
|
98
|
-
&:focus {
|
|
99
|
-
color: #257886;
|
|
100
|
-
}
|
|
101
|
-
}
|
|
22
|
+
.leaf {
|
|
23
|
+
&.active {
|
|
24
|
+
> a {
|
|
25
|
+
&:hover {
|
|
26
|
+
&:after {
|
|
27
|
+
content: none;
|
|
102
28
|
}
|
|
103
29
|
}
|
|
104
30
|
}
|
|
@@ -11,6 +11,7 @@
|
|
|
11
11
|
@import 'paragraph-highlight.scss';
|
|
12
12
|
@import 'sidebar.scss';
|
|
13
13
|
@import 'title-header.scss';
|
|
14
|
+
@import 'tabs.scss';
|
|
14
15
|
|
|
15
16
|
$bg: #f5f2f0;
|
|
16
17
|
$darkened-bg: darken($bg, 10%);
|
|
@@ -93,7 +94,7 @@ body {
|
|
|
93
94
|
}
|
|
94
95
|
|
|
95
96
|
.iterator {
|
|
96
|
-
margin:
|
|
97
|
+
margin: 2rem 0;
|
|
97
98
|
}
|
|
98
99
|
|
|
99
100
|
.iterator a.btn {
|
|
@@ -133,6 +134,10 @@ body {
|
|
|
133
134
|
|
|
134
135
|
.doc-container {
|
|
135
136
|
max-width: 100%;
|
|
137
|
+
|
|
138
|
+
h2 {
|
|
139
|
+
font-size: 1.75rem
|
|
140
|
+
}
|
|
136
141
|
}
|
|
137
142
|
code[data-processed='true'].language-mermaid {
|
|
138
143
|
background: none;
|
|
@@ -192,7 +197,7 @@ body {
|
|
|
192
197
|
}
|
|
193
198
|
|
|
194
199
|
.normal-padding {
|
|
195
|
-
padding:
|
|
200
|
+
padding: 1rem 1rem 5rem;
|
|
196
201
|
}
|
|
197
202
|
|
|
198
203
|
.max-width {
|
|
@@ -305,7 +310,7 @@ body {
|
|
|
305
310
|
text-align: center;
|
|
306
311
|
}
|
|
307
312
|
|
|
308
|
-
|
|
313
|
+
#github {
|
|
309
314
|
opacity: .5;
|
|
310
315
|
position: absolute;
|
|
311
316
|
right: 4rem;
|
|
@@ -313,11 +318,11 @@ body {
|
|
|
313
318
|
transition: opacity .3s;
|
|
314
319
|
}
|
|
315
320
|
|
|
316
|
-
a
|
|
321
|
+
a#github:after {
|
|
317
322
|
display: none;
|
|
318
323
|
}
|
|
319
324
|
|
|
320
|
-
a
|
|
325
|
+
a#github:hover {
|
|
321
326
|
opacity: 1;
|
|
322
327
|
}
|
|
323
328
|
}
|
data/_sass/tabs.scss
ADDED
data/_sass/title-header.scss
CHANGED
|
@@ -49,18 +49,34 @@
|
|
|
49
49
|
display: flex;
|
|
50
50
|
justify-content: center;
|
|
51
51
|
|
|
52
|
+
#github {
|
|
53
|
+
path {
|
|
54
|
+
fill: $black;
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
|
|
52
58
|
.title-header-container {
|
|
53
59
|
width: 100%;
|
|
54
60
|
padding: 3rem 1rem;
|
|
61
|
+
padding-bottom: 0;
|
|
55
62
|
|
|
56
63
|
h1,
|
|
57
64
|
h4,
|
|
58
65
|
p {
|
|
59
|
-
color: $
|
|
66
|
+
color: $brown;
|
|
67
|
+
|
|
68
|
+
strong {
|
|
69
|
+
font-size: 1.25rem;
|
|
70
|
+
}
|
|
60
71
|
}
|
|
61
72
|
|
|
62
73
|
h1 {
|
|
63
74
|
margin-top: 0;
|
|
75
|
+
color: $brown;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
h4 {
|
|
79
|
+
margin-bottom: 1rem;
|
|
64
80
|
}
|
|
65
81
|
|
|
66
82
|
p {
|
|
@@ -83,6 +99,8 @@
|
|
|
83
99
|
content: url(../img/external-url-dark-bg.svg);
|
|
84
100
|
}
|
|
85
101
|
}
|
|
102
|
+
|
|
103
|
+
|
|
86
104
|
}
|
|
87
105
|
|
|
88
106
|
|
data/lib/gem_version.rb
CHANGED
data/lib/sidebar_html_builder.rb
CHANGED
|
@@ -47,26 +47,36 @@ module SwedbankPay
|
|
|
47
47
|
level = is_leaf ? -1 : page.level
|
|
48
48
|
title_markup = title_markup(page, level, is_leaf)
|
|
49
49
|
item_class = item_class(page, current_page, level, is_leaf)
|
|
50
|
-
|
|
51
|
-
|
|
50
|
+
level.zero? &&
|
|
51
|
+
page.doc.xpath('//*[@id="dg-sidebar"]').first.set_attribute('class', 'sidebar dg-sidebar')
|
|
52
52
|
"<li class=\"#{item_class}\">
|
|
53
|
-
<div class=\"#{group_heading_class}\">
|
|
54
|
-
<i class=\"material-icons\">arrow_right</i>
|
|
55
53
|
#{title_markup}
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
54
|
+
#{item_class === 'main-nav-li' || item_class === 'main-nav-li active' ? "<nav class=\"sidebar-secondary-nav\">
|
|
55
|
+
<header class=\"secondary-nav-header\">#{page.title.section || page.title}</header>
|
|
56
|
+
#{sub_items_markup}
|
|
57
|
+
</nav>" : sub_items_markup}
|
|
58
|
+
</li>"
|
|
59
59
|
end
|
|
60
60
|
|
|
61
61
|
def item_class(page, current_page, level, is_leaf)
|
|
62
62
|
active = page.active?(current_page, is_leaf: is_leaf)
|
|
63
63
|
item_class = group_class(level)
|
|
64
|
+
if item_class != 'main-nav-li'
|
|
65
|
+
item_class += page.children.empty? ? ' group' : ' leaf'
|
|
66
|
+
end
|
|
67
|
+
|
|
64
68
|
item_class += ' active' if active
|
|
65
69
|
item_class
|
|
66
70
|
end
|
|
67
71
|
|
|
68
72
|
def group_class(level)
|
|
69
|
-
level.zero?
|
|
73
|
+
if level.zero?
|
|
74
|
+
'main-nav-li'
|
|
75
|
+
elsif level == 1
|
|
76
|
+
'secondary-nav-li'
|
|
77
|
+
else
|
|
78
|
+
''
|
|
79
|
+
end
|
|
70
80
|
end
|
|
71
81
|
|
|
72
82
|
def group_heading_class(level)
|
|
@@ -76,29 +86,37 @@ module SwedbankPay
|
|
|
76
86
|
|
|
77
87
|
def title_markup(page, level, is_leaf)
|
|
78
88
|
lead_title = lead_title(page)
|
|
79
|
-
return "<
|
|
89
|
+
return "<a>
|
|
90
|
+
<i class=\"material-icons-outlined\" aria-hidden=\"true\">#{page.icon}</i>
|
|
91
|
+
#{lead_title}
|
|
92
|
+
</a>" if level.zero? && lead_title != 'Home'
|
|
80
93
|
|
|
81
94
|
main_title = main_title(page, is_leaf)
|
|
82
|
-
|
|
83
|
-
"<a href=\"#{page.path}\">#{main_title}</a>"
|
|
95
|
+
home = main_title == 'Home' ? 'disabled' : ''
|
|
96
|
+
"<a class=\"#{home}\" href=\"#{page.path}\"><i class=\"material-icons-outlined\" aria-hidden=\"true\">#{page.icon}</i>#{main_title}</a>"
|
|
84
97
|
end
|
|
85
98
|
|
|
86
99
|
def sub_items_markup(page, current_page)
|
|
87
100
|
headers_markup = headers_markup(page, current_page)
|
|
88
101
|
child_markup = build_markup(page.children, current_page)
|
|
89
|
-
|
|
90
102
|
return '' if headers_markup.empty? && child_markup.empty?
|
|
91
103
|
|
|
92
|
-
"<ul class=\"nav-ul\">
|
|
93
|
-
|
|
94
|
-
|
|
104
|
+
"<ul class=\"#{page.level.zero? ? 'secondary-nav-ul' : ''}\">
|
|
105
|
+
#{if page.level.positive? && page.children?
|
|
106
|
+
"<a href=\"#\" class=\"previous-nav\">
|
|
107
|
+
<i class=\"material-icons\" aria-hidden=\"true\">arrow_back_ios</i>
|
|
108
|
+
<span>Back to #{page.parent.title}</span>
|
|
109
|
+
</a>
|
|
110
|
+
<header>#{page.title.section || page.title}</header>"
|
|
111
|
+
end}
|
|
112
|
+
#{headers_markup}
|
|
113
|
+
#{child_markup}
|
|
95
114
|
</ul>"
|
|
96
115
|
end
|
|
97
116
|
|
|
98
117
|
def headers_markup(page, current_page)
|
|
99
118
|
# If there's no page headers, only return a leaf item for the page itself.
|
|
100
|
-
|
|
101
|
-
return leaf_markup(page.path, main_title, page.level) unless page.headers?
|
|
119
|
+
return '' unless page.headers?
|
|
102
120
|
|
|
103
121
|
# If there's no children, only return the headers as leaf node items.
|
|
104
122
|
return page.headers.map { |h| header_markup(page, h) }.join unless page.children?
|
|
@@ -117,7 +135,7 @@ module SwedbankPay
|
|
|
117
135
|
end
|
|
118
136
|
|
|
119
137
|
def leaf_markup(href, title, level = 0)
|
|
120
|
-
leaf_class = level.positive? ? '
|
|
138
|
+
leaf_class = level.positive? ? 'leaf' : 'nav-leaf'
|
|
121
139
|
"<li class=\"#{leaf_class}\"><a href=\"#{href}\">#{title}</a></li>"
|
|
122
140
|
end
|
|
123
141
|
|
data/lib/sidebar_page.rb
CHANGED
|
@@ -13,7 +13,7 @@ module SwedbankPay
|
|
|
13
13
|
class SidebarPage
|
|
14
14
|
FIXNUM_MAX = ((2**((0.size * 8) - 2)) - 1)
|
|
15
15
|
|
|
16
|
-
attr_reader :path, :title, :level, :order, :children, :name, :filename, :doc
|
|
16
|
+
attr_reader :path, :title, :level, :order, :children, :name, :filename, :doc, :section, :icon
|
|
17
17
|
attr_accessor :headers, :sidebar_container, :number, :parent
|
|
18
18
|
|
|
19
19
|
def initialize(jekyll_page)
|
|
@@ -26,10 +26,11 @@ module SwedbankPay
|
|
|
26
26
|
@path = sidebar_path.to_s
|
|
27
27
|
@parent = sidebar_path.parent
|
|
28
28
|
@level = sidebar_path.level
|
|
29
|
-
@name = sidebar_path.name
|
|
30
29
|
@hide_from_sidebar = jekyll_page['hide_from_sidebar'].nil? ? false : jekyll_page['hide_from_sidebar']
|
|
31
30
|
@title = SidebarPageTitle.parse(jekyll_page, self)
|
|
32
31
|
@order = menu_order(jekyll_page)
|
|
32
|
+
@section = jekyll_page['section']
|
|
33
|
+
@icon = jekyll_page['sidebar_icon']
|
|
33
34
|
@children = SidebarPageCollection.new(self)
|
|
34
35
|
@card_overview = jekyll_page['card_overview'].nil? ? false : jekyll_page['card_overview']
|
|
35
36
|
@anchor_headings = jekyll_page['anchor_headings'].nil? ? true : jekyll_page['anchor_headings']
|
metadata
CHANGED
|
@@ -1,35 +1,35 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: swedbank-pay-design-guide-jekyll-theme
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 1.
|
|
4
|
+
version: 1.17.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Swedbank Pay
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date:
|
|
11
|
+
date: 2022-06-28 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: faraday
|
|
15
15
|
requirement: !ruby/object:Gem::Requirement
|
|
16
16
|
requirements:
|
|
17
|
-
- - "~>"
|
|
18
|
-
- !ruby/object:Gem::Version
|
|
19
|
-
version: '1'
|
|
20
17
|
- - ">="
|
|
21
18
|
- !ruby/object:Gem::Version
|
|
22
19
|
version: 1.0.1
|
|
20
|
+
- - "<"
|
|
21
|
+
- !ruby/object:Gem::Version
|
|
22
|
+
version: '3'
|
|
23
23
|
type: :runtime
|
|
24
24
|
prerelease: false
|
|
25
25
|
version_requirements: !ruby/object:Gem::Requirement
|
|
26
26
|
requirements:
|
|
27
|
-
- - "~>"
|
|
28
|
-
- !ruby/object:Gem::Version
|
|
29
|
-
version: '1'
|
|
30
27
|
- - ">="
|
|
31
28
|
- !ruby/object:Gem::Version
|
|
32
29
|
version: 1.0.1
|
|
30
|
+
- - "<"
|
|
31
|
+
- !ruby/object:Gem::Version
|
|
32
|
+
version: '3'
|
|
33
33
|
- !ruby/object:Gem::Dependency
|
|
34
34
|
name: html-proofer
|
|
35
35
|
requirement: !ruby/object:Gem::Requirement
|
|
@@ -247,6 +247,7 @@ files:
|
|
|
247
247
|
- _includes/card-horizontal-list.html
|
|
248
248
|
- _includes/card-list.html
|
|
249
249
|
- _includes/card-overview.html
|
|
250
|
+
- _includes/card-table.html
|
|
250
251
|
- _includes/card.html
|
|
251
252
|
- _includes/doc-container.html
|
|
252
253
|
- _includes/github.html
|
|
@@ -290,6 +291,7 @@ files:
|
|
|
290
291
|
- _sass/paragraph-highlight.scss
|
|
291
292
|
- _sass/sidebar.scss
|
|
292
293
|
- _sass/swedbank-pay-design-guide-theme.scss
|
|
294
|
+
- _sass/tabs.scss
|
|
293
295
|
- _sass/title-header.scss
|
|
294
296
|
- _sass/variables.scss
|
|
295
297
|
- assets/css/pygments-autumn.css
|