swedbank-pay-design-guide-jekyll-theme 1.8.1 → 1.9.4

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 CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 0a1983ca9e2e623d45572e71e44d145376ad1ea114526c130de81ddcbc58546d
4
- data.tar.gz: c6403598ba456a0008c4e1d2545379faf4df3ad7c602c340efcf56b58d722d74
3
+ metadata.gz: f92dcd253d65caf6bcc5ac6663cf8fef62eda89950bc5a0279d6d6893c436ad7
4
+ data.tar.gz: 76218fadaf01fde1ec62db738d8b7a02f382121dc3864a367e992a6eb31a81a1
5
5
  SHA512:
6
- metadata.gz: d43cbc52a6b2015129e380a6dea2b4435eb6819be17af50094ce1cfe694d172759f7bc4b6371822854480c20b1a5559ed347970a1e77a7f616b6dfd1c6196f03
7
- data.tar.gz: d8caa50f52475c619eefc3f96ae3e0985bf71dfde786e68f5b16031c5173cdb1fe5f8833a7bdb82bbee09b77b6bd535308bddf55f756acfaafb8f2507fae3a21
6
+ metadata.gz: 12d0597e1ed06b31f81ef396347e6ba3cfbffeb6b7fd3a997092def427e12d154a044d41bc9c6763ba69a19ff2a3340e87e2ee93c0a7ef32c78736b950288761
7
+ data.tar.gz: 4521b44c5016625b6af1fb6b4eb1e4cc41f067224a11fb72b1696690ef76b1a25223ff2bc805c2fae189e68cc12fbcc9872e48103637fc432c74e937bb6f7f4f
@@ -5,13 +5,13 @@
5
5
 
6
6
  <nav class="iterator d-flex">
7
7
  {% if prev_href != blank and prev_href != empty and prev_href != nil %}
8
- <a class="mr-auto btn btn-guiding" role="button" rel="prev" href="{{ prev_href }}">
8
+ <a class="mr-auto btn btn-primary" role="button" rel="prev" href="{{ prev_href }}">
9
9
  {{ prev_title }}
10
10
  </a>
11
11
  {% endif %}
12
12
 
13
13
  {% if next_href != blank and next_href != empty and next_href != nil %}
14
- <a class="ml-auto btn btn-executive" role="button" rel="next" href="{{ next_href }}">
14
+ <a class="ml-auto btn btn-primary" role="button" rel="next" href="{{ next_href }}">
15
15
  {{ next_title }}
16
16
  </a>
17
17
  {% endif %}
@@ -0,0 +1,32 @@
1
+ {% assign lead_title = page.lead_title %}
2
+ {% assign main_title = page.main_title | default: page.title %}
3
+ {% assign description = page.description %}
4
+ {% assign estimated_read = page.estimated_read %}
5
+ {% capture max_width_class %}
6
+ {% if page.card_overview %}
7
+ max-width-card-overview
8
+ {% else %}
9
+ max-width
10
+ {% endif %}
11
+ {% endcapture %}
12
+
13
+ <div class="title-header">
14
+ <div class="title-header-container {{ max_width_class | strip }}">
15
+ {% if lead_title != nil %}
16
+ <h4>{{ lead_title }}</h4>
17
+ {% endif %}
18
+
19
+ <h1>{{ main_title }}</h1>
20
+
21
+ {% if estimated_read %}
22
+ <div class="title-header-estimated-read">
23
+ <i class="material-icons">schedule</i>
24
+ {{ estimated_read }} min read
25
+ </div>
26
+ {% endif %}
27
+
28
+ {% if description %}
29
+ <p>{{ description | markdownify }}</p>
30
+ {% endif %}
31
+ </div>
32
+ </div>
@@ -3,7 +3,7 @@
3
3
  {%- assign image = page.opengraph.image | default: site.opengraph.image -%}
4
4
  {%- assign github_branch = site.github.branch | default : "develop" -%}
5
5
  {%- assign design_guide_base_url = site.design_guide.base_url | default: 'https://design.swedbankpay.com' -%}
6
- {%- assign design_guide_version = site.design_guide.version | default: '4.7.0' -%}
6
+ {%- assign design_guide_version = site.design_guide.version | default: '4.8.1' -%}
7
7
  {%- assign design_guide_url = design_guide_base_url | append: '/v/' | append: design_guide_version -%}
8
8
  {%- if page.sidebar.navigation == nil -%}
9
9
  {%- unless page.name contains "index" -%}
@@ -66,12 +66,21 @@
66
66
  <nav class="sidebar-nav">
67
67
  <a href="/" class="sidebar-header">
68
68
  <img src="{{ design_guide_url }}/img/swedbankpay-logo-v.svg"
69
- alt="Swedbank Pay vertical logo" />
69
+ alt="Swedbank Pay vertical logo" class="logotype-vertical logotype-lg"/>
70
70
  <div class="sidebar-header-text">
71
71
  <span>{</span>developer portal<span>}</span>
72
72
  </div>
73
73
  </a>
74
-
74
+ <div class="search-container mx-2 my-4 px-3 py-2 d-flex ">
75
+ <input type="text" id="search-input" class="search-input w-100 "
76
+ placeholder="Search in documentation"
77
+ onfocus="this.placeholder=''"
78
+ onblur="this.placeholder='Search in documentation'">
79
+
80
+ <label for="search-input" class="mb-0">
81
+ <i class="material-icons m-0" aria-hidden="true">search</i>
82
+ </label>
83
+ </div>
75
84
  <ul id="dx-sidebar-main-nav-ul" class="main-nav-ul">
76
85
  </ul>
77
86
  </nav>
@@ -80,30 +89,7 @@
80
89
 
81
90
  <main class="doc-view col-xxl-10 col-lg-9">
82
91
  {% if page.layout != 'front-page' %}
83
- {% assign title_lead = title | split: '–' | first %}
84
- {% assign title_main = title | split: '–' | last %}
85
- {% assign description = page.description %}
86
- {% assign estimated_read = page.estimated_read %}
87
- <div class="title-header">
88
- <div class="title-header-container
89
- {% if page.card_overview %} max-width-card-overview
90
- {% else %} max-width
91
- {% endif %}">
92
- {% if title_lead != title_main %}
93
- <h4>{{ title_lead }}</h4>
94
- {% endif %}
95
- <h1>{{ title_main }}</h1>
96
- {% if estimated_read %}
97
- <div class="title-header-estimated-read">
98
- <i class="material-icons">schedule</i>
99
- {{ estimated_read }} min read
100
- </div>
101
- {% endif %}
102
- {% if description %}
103
- <p>{{ description | markdownify }}</p>
104
- {% endif %}
105
- </div>
106
- </div>
92
+ {% include title-header.html %}
107
93
  {% endif %}
108
94
  <div class="doc-container{% if page.layout == 'front-page' %} no-padding
109
95
  {% elsif page.card_overview %} normal-padding max-width-card-overview
@@ -116,12 +102,7 @@
116
102
  </main>
117
103
  </div>
118
104
  </div>
119
-
120
- <footer class="page-footer">
121
- <p class="page-footer-rights">© Swedbank Pay</p>
122
- </footer>
123
105
  </div>
124
-
125
106
  <script src="{{ design_guide_url }}/scripts/dg.js"></script>
126
107
  <script src="{{ '/assets/js/swedbank-pay-design-guide-theme.js' | relative_url }}"></script>
127
108
  {%- if site.google_analytics.tracking_id %}
@@ -9,20 +9,20 @@ layout: default
9
9
  {% assign front_page_start_heading = page.front_page.start_heading | default: "Start your integration" %}
10
10
 
11
11
  <div class="front-page">
12
- <div class="front-page-container">
13
- <div class="front-page-top">
14
- <div class="front-page-hero">
15
- <h3>{{ front_page_hero }}</h3>
16
- <div class="front-page-hero-name">
17
- {<span>{{ front_page_title }}</span>}
18
- </div>
19
- <p>{{ front_page_ingress }}</p>
20
- </div>
21
- <div class="front-page-intro-cards">
22
- <h2 id="front-page-start" class="heading-line heading-line-white">{{ front_page_start_heading }}</h2>
23
- {% contentblock start %}
12
+ <div class="front-page-top">
13
+ <div class="front-page-hero">
14
+ <h3>{{ front_page_hero }}</h3>
15
+ <div class="front-page-hero-name">
16
+ {<span>{{ front_page_title }}</span>}
24
17
  </div>
18
+ <p>{{ front_page_ingress }}</p>
19
+ </div>
20
+ <div class="front-page-intro-cards">
21
+ <h2 id="front-page-start" class="heading-line heading-line-white">{{ front_page_start_heading }}</h2>
22
+ {% contentblock start %}
25
23
  </div>
24
+ </div>
25
+ <div class="front-page-container">
26
26
  {% if show_merchants_bar == true %}
27
27
  <div class="front-page-merchants">
28
28
  <h6>Trusted by</h6>
@@ -52,27 +52,30 @@ layout: default
52
52
  </div>
53
53
  </div>
54
54
  {% endif %}
55
- <a href="https://ecom.externalintegration.payex.com/pspdemoshop" class="front-page-demoshop">
55
+ <div class="front-page-demoshop">
56
56
  <span class="front-page-demoshop-text">
57
- <span class="h2">Try our Demoshop<span>.</span></span>
57
+ <span class="h2">Try our Demoshop</span>
58
58
  <span class="demoshop-text-description">
59
- Unsure about how it all works? See how our checkout and payment methods are used
59
+ See how our checkout and payment methods are used
60
60
  in practice!
61
61
  </span>
62
62
  </span>
63
63
  <span class="front-page-demoshop-link">
64
- <span class="h3">Go to the demoshop</span>
65
- <i class="material-icons">arrow_forward</i>
64
+ <a href="https://ecom.externalintegration.payex.com/pspdemoshop" class="text-decoration-none">
65
+ <span class="h3 mr-2">Go to the demoshop
66
+ <i class="material-icons ml-2">arrow_forward</i>
67
+ </span>
68
+ </a>
66
69
  <span class="demoshop-link-img">
67
- <img class="demoshop-link-img-mobile d-md-none d-lg-flex d-xl-none d-xxl-flex"
70
+ <img class="demoshop-link-img-mobile d-none d-md-flex"
68
71
  src="/assets/img/demoshop-mobile.svg" alt="demoshop-mobile" />
69
- <img class="demoshop-link-img-mobile d-none d-md-none d-lg-flex d-xl-none"
72
+ <img class="demoshop-link-img-mobile d-none d-xl-flex d-xxl-none"
70
73
  src="/assets/img/demoshop-mobile2.svg" alt="demoshop-mobile2" />
71
- <img class="demoshop-link-img-web d-none d-sm-none d-md-flex d-lg-none d-xl-flex"
74
+ <img class="demoshop-link-img-web d-none d-xxl-flex"
72
75
  src="/assets/img/demoshop-web.svg" alt="demoshop-web" />
73
76
  </span>
74
77
  </span>
75
- </a>
78
+ </div>
76
79
 
77
80
  <div class="front-page-container">
78
81
  <div class="front-page-cards-sdk">
@@ -1,2 +1,3 @@
1
1
  # frozen_string_literal: false
2
- require_relative '../lib/sidebar.rb'
2
+
3
+ require_relative '../lib/sidebar'
@@ -0,0 +1,5 @@
1
+ $breakpoint-sm: 576px;
2
+ $breakpoint-md: 768px;
3
+ $breakpoint-lg: 992px;
4
+ $breakpoint-xl: 1200px;
5
+ $breakpoint-xxl: 1600px;
@@ -59,6 +59,7 @@
59
59
  display: flex;
60
60
  flex-direction: column;
61
61
  margin-bottom: 1.25rem;
62
+ font-size: 1rem;
62
63
 
63
64
  .h4 {
64
65
  margin-top: 0;
@@ -1,8 +1,9 @@
1
1
  @import 'colors.scss';
2
2
  @import 'fonts.scss';
3
+ @import 'breakpoints.scss';
3
4
 
4
5
  $front-page-padding: 0 4rem;
5
- $front-page-max-width: 1280px;
6
+ $front-page-max-width: 1312px;
6
7
 
7
8
  @mixin row-cards {
8
9
  >[class*='col-'] {
@@ -49,77 +50,87 @@ $front-page-max-width: 1280px;
49
50
  }
50
51
 
51
52
  .front-page {
53
+ margin: 3rem 2rem 0;
52
54
  position: relative;
53
55
  display: flex;
54
56
  flex-direction: column;
55
57
  align-items: center;
58
+
59
+ .front-page-top {
60
+ position: relative;
61
+ padding: 4rem 4rem 2rem;
62
+ width: 100%;
63
+ margin-bottom: 3rem;
64
+ max-width: 1432px;
65
+ background-color: $dark-brown;
66
+ z-index: 0;
67
+ border-radius: 1rem;
68
+ min-height: 33rem;
56
69
 
57
- .front-page-container {
58
- max-width: $front-page-max-width;
59
- margin: $front-page-padding;
60
-
61
- .front-page-top {
62
- padding-top: 4rem;
63
- width: 100%;
70
+ .front-page-hero {
71
+ position: relative;
72
+ max-width: 38rem;
64
73
  margin-bottom: 3rem;
74
+ z-index: 1;
65
75
 
66
- &:before {
67
- content: "";
68
- display: block;
69
- position: absolute;
70
- top: 0;
71
- left: 0;
72
- background-color: $dark-brown;
73
- width: 100%;
74
- height: 34rem;
75
- z-index: 0;
76
+ h3 {
77
+ color: $yellow;
78
+ font-family: $headline;
79
+ margin-bottom: 0;
76
80
  }
77
81
 
78
- .front-page-hero {
79
- position: relative;
80
- max-width: 35rem;
81
- margin-bottom: 3.5rem;
82
- z-index: 1;
82
+ p {
83
+ color: $white;
84
+ font-size: 1.125rem;
85
+ }
83
86
 
84
- h3 {
85
- color: $yellow;
86
- font-family: $headline;
87
- margin-bottom: 0;
88
- }
87
+ .front-page-hero-name {
88
+ font-family: $mono;
89
+ font-weight: bold;
90
+ font-size: 2rem;
91
+ color: $yellow;
92
+ margin-bottom: 1rem;
89
93
 
90
- p {
94
+ span {
91
95
  color: $white;
92
- font-size: 1.125rem;
93
96
  }
97
+ }
98
+
99
+ }
94
100
 
95
- .front-page-hero-name {
96
- font-family: $mono;
97
- font-weight: bold;
98
- font-size: 2rem;
99
- color: $yellow;
100
- margin-bottom: 1rem;
101
+ .front-page-intro-cards {
102
+ h2 {
103
+ color: $white;
101
104
 
102
- span {
103
- color: $white;
104
- }
105
+ .header-anchor {
106
+ display: none;
105
107
  }
108
+ }
106
109
 
110
+ .row {
111
+ @include row-cards();
107
112
  }
113
+ }
108
114
 
115
+ @media screen and (min-width: $breakpoint-xxl) {
116
+ margin-bottom: 10rem;
117
+
109
118
  .front-page-intro-cards {
110
- h2 {
111
- color: $white;
112
-
113
- .header-anchor {
114
- display: none;
115
- }
116
- }
117
-
118
- .row {
119
- @include row-cards();
120
- }
119
+ position: absolute;
120
+ left: 0;
121
+ width: 100%;
122
+ padding: 0 4rem;
121
123
  }
122
124
  }
125
+ }
126
+ .front-page-container {
127
+ max-width: $front-page-max-width;
128
+ margin: $front-page-padding;
129
+ position: relative;
130
+
131
+ @media screen and (max-width: $breakpoint-md) {
132
+ margin: 0;
133
+ }
123
134
 
124
135
  .front-page-merchants {
125
136
  margin-bottom: 3.75rem;
@@ -221,19 +232,7 @@ $front-page-max-width: 1280px;
221
232
  height: 22.5rem;
222
233
  background-color: $dark-brown;
223
234
  text-decoration: none;
224
-
225
- &:hover,
226
- &:focus {
227
- .front-page-demoshop-link {
228
- background-color: $white;
229
- color: $brown;
230
-
231
- .h3 {
232
- color: $brown;
233
- }
234
-
235
- }
236
- }
235
+ border-radius: 1rem;
237
236
 
238
237
  &:after {
239
238
  display: none;
@@ -249,17 +248,29 @@ $front-page-max-width: 1280px;
249
248
 
250
249
  .h2 {
251
250
  color: $white;
252
-
253
- span {
254
- color: $yellow;
255
- }
256
251
  }
257
252
 
258
253
  .demoshop-text-description {
259
254
  color: $white;
260
- width: 45%;
261
- height: 4.5rem;
255
+ width: 40%;
256
+ min-height: 4.5rem;
257
+ font-size: 1rem;
258
+
262
259
  }
260
+
261
+ }
262
+
263
+ @media screen and (max-width: $breakpoint-md) {
264
+ padding-top: 3rem;
265
+ height: 18rem;
266
+
267
+ .front-page-demoshop-text {
268
+ .demoshop-text-description {
269
+ width: 100%;
270
+ min-height: 2.25rem;
271
+ }
272
+ }
273
+
263
274
  }
264
275
 
265
276
  .front-page-demoshop-link {
@@ -274,6 +285,21 @@ $front-page-max-width: 1280px;
274
285
  box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.15);
275
286
  max-width: $front-page-max-width;
276
287
  width: 100%;
288
+ cursor: pointer;
289
+
290
+ a::after{
291
+ content: '';
292
+ }
293
+
294
+ &:hover,
295
+ &:focus {
296
+ background-color: $white;
297
+ color: $brown;
298
+
299
+ .h3 {
300
+ color: $brown;
301
+ }
302
+ }
277
303
 
278
304
  .demoshop-link-img {
279
305
  display: flex;
@@ -281,6 +307,7 @@ $front-page-max-width: 1280px;
281
307
  position: absolute;
282
308
  bottom: -1rem;
283
309
  right: 3%;
310
+ pointer-events: none;
284
311
 
285
312
  .demoshop-link-img-web {
286
313
  width: 26.5rem;
@@ -297,8 +324,6 @@ $front-page-max-width: 1280px;
297
324
  }
298
325
  }
299
326
 
300
-
301
-
302
327
  .h3 {
303
328
  color: $white;
304
329
  padding-right: 1rem;
@@ -306,6 +331,18 @@ $front-page-max-width: 1280px;
306
331
  margin: 0;
307
332
  }
308
333
  }
334
+
335
+ @media screen and (min-width: $breakpoint-xxl) {
336
+ .front-page-demoshop-text {
337
+ margin-bottom: 1rem;
338
+ }
339
+
340
+ .front-page-demoshop-link {
341
+ .demoshop-link-img {
342
+ bottom: -2rem;
343
+ }
344
+ }
345
+ }
309
346
  }
310
347
 
311
348