swedbank-pay-design-guide-jekyll-theme 1.13.0 → 1.16.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 +40 -13
- data/_layouts/default.html +1 -1
- data/_layouts/front-page.html +11 -26
- data/_sass/card.scss +49 -1
- data/_sass/front-page.scss +34 -12
- data/_sass/heading.scss +6 -0
- 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
- metadata +12 -10
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 7d8e950e6c0a65361656afb452a7830d9e3e4fcb656859802e68ae4ba94d95c3
|
|
4
|
+
data.tar.gz: b0d60a81f3a8183a6159118bcb01cb19b6f591e4993da99dc1a1b66ed065c81d
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 58f79e9da80e44d92b46cf05b252f1949664110654488375b1065ea4d7c4e5c8e8e6a48a22574384018599d7a2243473d186ba39ca79af9bb6f38c1a9a9836a7
|
|
7
|
+
data.tar.gz: 0260b42d62168844d5aa4b4e51ec0feefa83867671bc93ff123409110e0eb6f2549fe324b89b4ef29be60f89367bd182a5497e13b00d40d5aec87569a338c4a8
|
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
|
@@ -1,18 +1,45 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
<div id="tabs-showcase-example" class="tabs">
|
|
1
|
+
<div class="tabs" id="tabs-showcase-example">
|
|
6
2
|
<ul>
|
|
7
|
-
<li class="
|
|
8
|
-
<a
|
|
3
|
+
<li class="full-checkout">
|
|
4
|
+
<a id="full-checkout">Full Checkout</a>
|
|
9
5
|
</li>
|
|
10
|
-
<li>
|
|
11
|
-
<a
|
|
12
|
-
</li>
|
|
13
|
-
<li>
|
|
14
|
-
<a href="#">Unselected</a>
|
|
6
|
+
<li class="payments-only">
|
|
7
|
+
<a id="payments-only">Payments Only</a>
|
|
15
8
|
</li>
|
|
16
9
|
</ul>
|
|
17
10
|
</div>
|
|
18
|
-
|
|
11
|
+
|
|
12
|
+
<section>
|
|
13
|
+
<div id="tab1">
|
|
14
|
+
<div class="tab-intro">
|
|
15
|
+
{{ include.tab1_intro | markdownify}}
|
|
16
|
+
</div>
|
|
17
|
+
<div class="tab1-content">
|
|
18
|
+
{{ include.tab1_content | markdownify}}
|
|
19
|
+
</div>
|
|
20
|
+
</div>
|
|
21
|
+
<div id="tab2" class="d-none">
|
|
22
|
+
<div class="tab-intro">
|
|
23
|
+
{{ include.tab2_intro | markdownify}}
|
|
24
|
+
</div>
|
|
25
|
+
<div>
|
|
26
|
+
{{ include.tab2_content | markdownify}}
|
|
27
|
+
</div>
|
|
28
|
+
</div>
|
|
29
|
+
</section>
|
|
30
|
+
|
|
31
|
+
<script>
|
|
32
|
+
$( "#full-checkout" ).click(function() {
|
|
33
|
+
$( "#tab2" ).addClass( "d-none" )
|
|
34
|
+
$( "#tab1" ).removeClass( "d-none" )
|
|
35
|
+
$( ".full-checkout" ).addClass( "active" )
|
|
36
|
+
$( ".payments-only" ).removeClass( "active" )
|
|
37
|
+
|
|
38
|
+
});
|
|
39
|
+
$( "#payments-only" ).click(function() {
|
|
40
|
+
$( "#tab2" ).removeClass( "d-none" )
|
|
41
|
+
$( "#tab1" ).addClass( "d-none" )
|
|
42
|
+
$( ".full-checkout" ).removeClass( "active" )
|
|
43
|
+
$( ".payments-only" ).addClass( "active" )
|
|
44
|
+
});
|
|
45
|
+
</script>
|
data/_layouts/default.html
CHANGED
|
@@ -100,7 +100,7 @@
|
|
|
100
100
|
</div>
|
|
101
101
|
</div>
|
|
102
102
|
</div>
|
|
103
|
-
<script src="{{ design_guide_url }}/scripts/dg.js"></script>
|
|
103
|
+
<script src="{{ design_guide_url }}/scripts/dg.js" global="true" autoload="true"></script>
|
|
104
104
|
<script src="{{ '/assets/js/swedbank-pay-design-guide-theme.js' | relative_url }}"></script>
|
|
105
105
|
{%- if site.google_analytics.tracking_id %}
|
|
106
106
|
{% include google_analytics.html %}
|
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
|
|
|
@@ -58,27 +63,7 @@ layout: default
|
|
|
58
63
|
{% endif %}
|
|
59
64
|
|
|
60
65
|
<div class="front-page-container">
|
|
61
|
-
|
|
62
|
-
title='Get to know Checkout v3'
|
|
63
|
-
no_icon=true
|
|
64
|
-
button_content='Get started'
|
|
65
|
-
text='All businesses have their own unique needs. Which is why we have made it possible for you to adapt to a variety of those needs, using only one integration. To help you get started we have made five implementation options to choose among. In that way you can utilize your checkin in just a few configurations, or switch into any other of our stand alone payment methods - if that suits you better. Intrigued yet? Let’s find out more!'
|
|
66
|
-
button_type='primary'
|
|
67
|
-
button_alignment='align-self-end'
|
|
68
|
-
%}
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
{% include card-extended.html
|
|
72
|
-
title='Want to try it yourself?'
|
|
73
|
-
no_icon=true
|
|
74
|
-
button_content='Visit our Demoshop'
|
|
75
|
-
text='Experience what it would be like to pay as a costumer of yours in our demoshop.'
|
|
76
|
-
button_type='primary'
|
|
77
|
-
button_alignment='align-self-start'
|
|
78
|
-
card_container=true
|
|
79
|
-
container_content=''
|
|
80
|
-
to='https://ecom.externalintegration.payex.com/pspdemoshop'
|
|
81
|
-
%}
|
|
66
|
+
{% contentblock intro_cards%}
|
|
82
67
|
|
|
83
68
|
<div class="front-page-cards-sdk">
|
|
84
69
|
{% contentblock sdks %}
|
data/_sass/card.scss
CHANGED
|
@@ -1,17 +1,64 @@
|
|
|
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 {
|
|
22
|
+
thead {
|
|
23
|
+
tr {
|
|
24
|
+
th:first-child {
|
|
25
|
+
padding-left: 0;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
th:not(:first-child) {
|
|
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
|
+
}
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
}
|
|
6
45
|
tbody {
|
|
7
46
|
tr {
|
|
47
|
+
background-color: transparent;
|
|
8
48
|
td {
|
|
9
|
-
|
|
49
|
+
text-align: center;
|
|
10
50
|
border: none;
|
|
11
51
|
}
|
|
12
52
|
|
|
13
53
|
th {
|
|
54
|
+
padding-left: 0;
|
|
55
|
+
display: flex;
|
|
56
|
+
align-items: end;
|
|
14
57
|
border: none;
|
|
58
|
+
|
|
59
|
+
i {
|
|
60
|
+
margin-right: 0.5rem;
|
|
61
|
+
}
|
|
15
62
|
}
|
|
16
63
|
}
|
|
17
64
|
}
|
|
@@ -226,3 +273,4 @@
|
|
|
226
273
|
display: flex;
|
|
227
274
|
}
|
|
228
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
|
@@ -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
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.16.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-02-16 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
|
|
@@ -147,7 +147,7 @@ dependencies:
|
|
|
147
147
|
version: '1'
|
|
148
148
|
- - ">="
|
|
149
149
|
- !ruby/object:Gem::Version
|
|
150
|
-
version:
|
|
150
|
+
version: 1.3.2
|
|
151
151
|
type: :runtime
|
|
152
152
|
prerelease: false
|
|
153
153
|
version_requirements: !ruby/object:Gem::Requirement
|
|
@@ -157,7 +157,7 @@ dependencies:
|
|
|
157
157
|
version: '1'
|
|
158
158
|
- - ">="
|
|
159
159
|
- !ruby/object:Gem::Version
|
|
160
|
-
version:
|
|
160
|
+
version: 1.3.2
|
|
161
161
|
- !ruby/object:Gem::Dependency
|
|
162
162
|
name: nokogiri
|
|
163
163
|
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
|