swedbank-pay-design-guide-jekyll-theme 1.15.0 → 1.16.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/_includes/alert.html +2 -16
- data/_includes/card-extended.html +10 -50
- data/_includes/card-table.html +112 -0
- data/_includes/github.html +1 -1
- data/_layouts/front-page.html +1 -1
- data/_sass/card.scss +8 -3
- data/_sass/front-page.scss +10 -2
- data/_sass/swedbank-pay-design-guide-theme.scss +3 -3
- data/_sass/title-header.scss +8 -0
- data/lib/gem_version.rb +1 -1
- metadata +3 -2
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
10
|
<i class="material-icons alert-icon mr-3">{{ icon }}</i>
|
|
22
11
|
{% endif %}
|
|
23
|
-
{% 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 %}
|
|
@@ -31,7 +31,7 @@ type: sdk | module - Empty type result in default card styling
|
|
|
31
31
|
{% assign card_class = 'cards cards-wide' | strip %}
|
|
32
32
|
|
|
33
33
|
<div class="{{ card_class }}">
|
|
34
|
-
{%
|
|
34
|
+
{% unless no_icon %}
|
|
35
35
|
<span class="cards-icon">
|
|
36
36
|
{% if icon_svg %}
|
|
37
37
|
{% include {{ icon_content }} %}
|
|
@@ -39,59 +39,19 @@ type: sdk | module - Empty type result in default card styling
|
|
|
39
39
|
<i class="material-icons{% if icon_outlined %}-outlined{% endif %}">
|
|
40
40
|
{{ icon_content }}
|
|
41
41
|
</i>
|
|
42
|
-
|
|
42
|
+
{% endif %}
|
|
43
43
|
</span>
|
|
44
|
-
{%
|
|
44
|
+
{% endunless %}
|
|
45
45
|
{% if include.container_content %}
|
|
46
46
|
<div>
|
|
47
47
|
{% endif %}
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
<table class="table table-plain">
|
|
56
|
-
<thead>
|
|
57
|
-
<tr>
|
|
58
|
-
{% for header in include.header %}
|
|
59
|
-
<th> {% if header.badge_type %}
|
|
60
|
-
<span class="badge badge-{{header.badge_type}}">{{header.table_header}}</span>
|
|
61
|
-
{% else %}
|
|
62
|
-
{{ header.table_header }}
|
|
63
|
-
{% endif %}
|
|
64
|
-
</th>
|
|
65
|
-
{% endfor %}
|
|
66
|
-
</tr>
|
|
67
|
-
</thead>
|
|
68
|
-
<tbody>
|
|
69
|
-
{% for table_content in include.table_content %}
|
|
70
|
-
<tr>
|
|
71
|
-
|
|
72
|
-
<th scope="row">
|
|
73
|
-
<i class="material-icons{% if icon_outlined %}-outlined{% endif %}">
|
|
74
|
-
{{table_content.icon}}
|
|
75
|
-
</i> {{table_content.label}}
|
|
76
|
-
<td>
|
|
77
|
-
{% if table_content.swedbankPay %}
|
|
78
|
-
<i class="material-icons{% if icon_outlined %}-outlined{% endif %}">
|
|
79
|
-
check_circle_outline
|
|
80
|
-
</i>
|
|
81
|
-
{% endif %}
|
|
82
|
-
</td>
|
|
83
|
-
<td>
|
|
84
|
-
{% if table_content.merchantSide %}
|
|
85
|
-
<i class="material-icons{% if icon_outlined %}-outlined{% endif %}">
|
|
86
|
-
check_circle_outline
|
|
87
|
-
</i>
|
|
88
|
-
{% endif %}
|
|
89
|
-
</td>
|
|
90
|
-
</th>
|
|
91
|
-
</tr>
|
|
92
|
-
{% endfor %}
|
|
93
|
-
</tbody>
|
|
94
|
-
</table>
|
|
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 %}
|
|
53
|
+
<span>{{ text | markdownify }}</span>
|
|
54
|
+
{% endif %}
|
|
95
55
|
</span>
|
|
96
56
|
{% unless disabled %}
|
|
97
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/_layouts/front-page.html
CHANGED
|
@@ -10,6 +10,7 @@ layout: default
|
|
|
10
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
16
|
<h3>{{ front_page_hero1 }}
|
|
@@ -27,7 +28,6 @@ layout: default
|
|
|
27
28
|
{% contentblock start %}
|
|
28
29
|
</div>
|
|
29
30
|
|
|
30
|
-
{% include github.html %}
|
|
31
31
|
</div>
|
|
32
32
|
|
|
33
33
|
|
data/_sass/card.scss
CHANGED
|
@@ -1,17 +1,21 @@
|
|
|
1
1
|
@import 'colors.scss';
|
|
2
2
|
|
|
3
3
|
.cards {
|
|
4
|
-
|
|
5
|
-
margin-right: 4.875rem;
|
|
6
|
-
}
|
|
4
|
+
cursor: default;
|
|
7
5
|
|
|
8
6
|
&.cards-wide {
|
|
9
7
|
margin-top: 4rem;
|
|
10
8
|
|
|
11
9
|
.btn {
|
|
12
10
|
margin-bottom: 2rem;
|
|
11
|
+
margin-top: 5rem;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.text-box-extended {
|
|
15
|
+
margin-right: 4.875rem;
|
|
13
16
|
}
|
|
14
17
|
}
|
|
18
|
+
|
|
15
19
|
.table {
|
|
16
20
|
|
|
17
21
|
&.table-plain {
|
|
@@ -23,6 +27,7 @@
|
|
|
23
27
|
|
|
24
28
|
th:not(:first-child) {
|
|
25
29
|
text-align: center;
|
|
30
|
+
padding: 0 0.5rem;
|
|
26
31
|
|
|
27
32
|
.badge {
|
|
28
33
|
&.badge-default {
|
data/_sass/front-page.scss
CHANGED
|
@@ -55,6 +55,13 @@ $front-page-max-width: $breakpoint-lg;
|
|
|
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;
|
|
@@ -81,7 +88,7 @@ $front-page-max-width: $breakpoint-lg;
|
|
|
81
88
|
}
|
|
82
89
|
|
|
83
90
|
p {
|
|
84
|
-
color: $
|
|
91
|
+
color: $brown;
|
|
85
92
|
font-size: 1.125rem;
|
|
86
93
|
}
|
|
87
94
|
|
|
@@ -118,8 +125,9 @@ $front-page-max-width: $breakpoint-lg;
|
|
|
118
125
|
|
|
119
126
|
.front-page-intro-cards {
|
|
120
127
|
h2 {
|
|
121
|
-
color: $
|
|
128
|
+
color: $brown;
|
|
122
129
|
padding: 1.5rem;
|
|
130
|
+
padding-bottom: 0;
|
|
123
131
|
|
|
124
132
|
.header-anchor {
|
|
125
133
|
display: none;
|
|
@@ -310,7 +310,7 @@ body {
|
|
|
310
310
|
text-align: center;
|
|
311
311
|
}
|
|
312
312
|
|
|
313
|
-
|
|
313
|
+
#github {
|
|
314
314
|
opacity: .5;
|
|
315
315
|
position: absolute;
|
|
316
316
|
right: 4rem;
|
|
@@ -318,11 +318,11 @@ body {
|
|
|
318
318
|
transition: opacity .3s;
|
|
319
319
|
}
|
|
320
320
|
|
|
321
|
-
a
|
|
321
|
+
a#github:after {
|
|
322
322
|
display: none;
|
|
323
323
|
}
|
|
324
324
|
|
|
325
|
-
a
|
|
325
|
+
a#github:hover {
|
|
326
326
|
opacity: 1;
|
|
327
327
|
}
|
|
328
328
|
}
|
data/_sass/title-header.scss
CHANGED
|
@@ -49,6 +49,12 @@
|
|
|
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;
|
|
@@ -93,6 +99,8 @@
|
|
|
93
99
|
content: url(../img/external-url-dark-bg.svg);
|
|
94
100
|
}
|
|
95
101
|
}
|
|
102
|
+
|
|
103
|
+
|
|
96
104
|
}
|
|
97
105
|
|
|
98
106
|
|
data/lib/gem_version.rb
CHANGED
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
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: 2022-
|
|
11
|
+
date: 2022-02-16 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: faraday
|
|
@@ -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
|