swedbank-pay-design-guide-jekyll-theme 2.1.12 → 2.1.13

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 9bd37c2233ead03ea2c171bf9795fa104a554ece5d15e9dc718183daf0a19d72
4
- data.tar.gz: c6f6dc25aa0ef2263681bb40bc5f491f41b94fe0eefc4ed6d01491b2e2e3ecab
3
+ metadata.gz: e00256044e2bcfb1e8557ee85d12c91b34509582663d04b3d7b7ee2df6ffa4af
4
+ data.tar.gz: 248fa8d33d8557814c5ecc2a8eb2153657113f7046721ad5299bc5a06bcc0fe5
5
5
  SHA512:
6
- metadata.gz: afb463bf995d91cab9e6377226005a8bfe30467a59e5ace1b4841674f1caf5011f8ae497258977d1d4ee7ff3446cecd4c327b48de8f87f332cbce11b2628f264
7
- data.tar.gz: f2b5fdcc985f13da39798ec5aaf04aadd6ec2ac52abacb7af718d640512535b6f89ad7f65cd8bfc93d323ce0cb307fb26c617f04e3d61dfd73737aca64b1c398
6
+ metadata.gz: 41fdd35711d08ef1f2297239172ef6749d18a7dc47ef8e4854e2601768891b497d9a96a360eeef2ba0de50e76047152114f809deba6fdf38ce29cdc9c8c5f581
7
+ data.tar.gz: ef20a84c1e13111e323712a4025bd40c325e9ae514044f453d075780b50a0c90c583d61bb78f0ea17c75937f90461e242eff361e1913ca3b96035e0da75156df
data/README.md CHANGED
@@ -32,9 +32,9 @@ theme-gem, please edit the regexp in `swedbankpay.gemspec` accordingly.
32
32
 
33
33
  1. [Clone this repository][clone].
34
34
  2. [Install Docker Personal][docker]. Select default settings when prompted.
35
- 3. Open a console window at the root of the repository and run `docker-compose up`. This will create a docker container.
36
- 4. Open Docker Desktop and start the container if not already running.
37
- 10. Open `http://localhost:4000` in a browser.
35
+ 3. Open a console window at the root of the repository and run `docker-compose up`.
36
+ This will create a docker container and spin it up with everything that's specified in the repository gemfile.
37
+ 4. Open `http://localhost:4000` in a browser.
38
38
 
39
39
 
40
40
  ### Manual install
@@ -49,10 +49,10 @@ theme-gem, please edit the regexp in `swedbankpay.gemspec` accordingly.
49
49
  6. Verify that Git is installed by running `git status` in VSC terminal.
50
50
  If Git is not properly installed, you will see an error message like the one below. Just [download Git][git] and install.
51
51
  ![Alt text](image.png)
52
- 5. Once Ruby ,Bundler, and Graphviz, is in place, type `bundle install` inside the root
52
+ 7. Once Ruby ,Bundler, and Graphviz, is in place, type `bundle install` inside the root
53
53
  folder of this repository.
54
- 6. Run `bundle exec jekyll serve` to start the website.
55
- 7. Open in a browser.
54
+ 8. Run `bundle exec jekyll serve` to start the website.
55
+ 9. Open in a browser.
56
56
 
57
57
 
58
58
  ### Visual Studio Code plugins
@@ -1,11 +1,11 @@
1
1
  {% assign content = include.content | markdownify%}
2
2
 
3
- <div class="accordion accordion-table mb-4">
4
- <button type="button" class="accordion-header pt-0" aria-expanded="false" aria-controls="exp-1">
3
+ <div class="accordion">
4
+ <button type="button" class="accordion-header" aria-expanded="false" aria-controls="exp-1">
5
5
  <span class="mr-3 show">Show fields</span>
6
6
  <span class="mr-3 hide">Hide fields</span>
7
7
  </button>
8
- <div class="accordion-body p-0" id="exp-1">
8
+ <div class="accordion-body" id="exp-1">
9
9
  {{ content }}
10
10
  </div>
11
- </div>
11
+ </div>
data/_includes/card.html CHANGED
@@ -23,46 +23,51 @@ type: sdk | module - Empty type result in default card styling
23
23
  {% assign disabled = include.disabled %}
24
24
 
25
25
  {% if include.type %}
26
- {% assign type = include.type %}
27
- {% assign type_class = 'dx-card-' | append: type %}
26
+ {% assign type = include.type %}
27
+ {% assign type_class = 'dx-card-' | append: type %}
28
28
  {% else %}
29
- {% assign type_class = '' %}
29
+ {% assign type_class = '' %}
30
30
  {% endif %}
31
31
 
32
32
  {% unless icon_svg %}
33
- {% if icon_content contains '/' or icon_content contains '.svg' %}
34
- {% assign icon_svg = true %}
35
- {% endif %}
33
+ {% if icon_content contains '/' or icon_content contains '.svg' %}
34
+ {% assign icon_svg = true %}
35
+ {% endif %}
36
36
  {% endunless %}
37
37
 
38
- {% assign card_class = 'dx-card ' | append: type_class | strip %}
38
+ {% assign card_class = 'cards cards-primary ' | append: type_class | strip %}
39
39
  {% if horizontal %}
40
- {% assign card_class = card_class | append: ' dx-card-horizontal' | strip %}
40
+ {% assign card_class = card_class | append: ' dx-card-horizontal' | strip %}
41
41
  {% endif %}
42
42
 
43
43
  {% if disabled %}
44
- {% assign card_class = card_class | append: ' dx-card-disabled' | strip %}
45
- {% assign card_tag = 'span' %}
44
+ {% assign card_class = card_class | append: ' dx-card-disabled' | strip %}
45
+ {% assign card_tag = 'span' %}
46
46
  {% else %}
47
- {% assign card_tag = 'a' %}
48
- {% capture card_attributes %}href="{{ to }}"{% endcapture %}
47
+ {% assign card_tag = 'a' %}
48
+ {% capture card_attributes %}href="{{ to }}"{% endcapture %}
49
49
  {% endif %}
50
50
 
51
51
  <{{ card_tag }} {{ card_attributes }} class="{{ card_class }}">
52
- <span class="dx-card-icon{% if no_icon %} d-none{% endif %}">
53
- {% if icon_svg %}
54
- {% include {{ icon_content }} %}
55
- {% else %}
56
- <i class="material-icons{% if icon_outlined %}-outlined{% endif %}">
57
- {{ icon_content }}
58
- </i>
59
- {% endif %}
60
- </span>
61
- <span class="dx-card-content">
62
- <span class="{{ title_type }}">{{ include.title }}</span>
52
+ {% if icon_svg %}
53
+ <div class="cards-icon">
54
+ {% include {{ icon_content }} %}
55
+ </div>
56
+ {% endif %}
57
+
58
+ {% unless icon_svg %}
59
+ {% if icon_content %}
60
+ <div class="cards-icon">
61
+ <i class="material-icons material-icons-outlined" aria-hidden="true">{{ icon_content }}</i>
62
+ </div>
63
+ {% endif %}
64
+ {% endunless %}
65
+
66
+ <div class="cards-content">
67
+ <span class="h4">{{ include.title }}</span>
63
68
  <span>{{ text | markdownify }}</span>
64
- </span>
69
+ </div>
65
70
  {% unless disabled %}
66
- <i class="material-icons">arrow_forward</i>
71
+ <i class="material-icons">arrow_forward</i>
67
72
  {% endunless %}
68
73
  </{{ card_tag }}>
@@ -22,16 +22,8 @@
22
22
 
23
23
  <h1>{{ main_title }}</h1>
24
24
 
25
- {% assign estimated_read = page.content | read_time | plus: 0 %}
26
- {% if estimated_read > 0 %}
27
- <div class="title-header-estimated-read">
28
- <i class="material-icons">schedule</i>
29
- {{ estimated_read }} min read
30
- </div>
31
- {% endif %}
32
-
33
25
  {% if description %}
34
- <p>{{ description | markdownify }}</p>
26
+ <p>{{ description }}</p>
35
27
  {% endif %}
36
28
  </div>
37
29
 
@@ -1,92 +1,21 @@
1
1
  @import 'colors.scss';
2
2
 
3
- .accordion {
4
- align-items: center;
5
-
6
- &.accordion-table {
7
- border: none;
8
-
3
+ .accordion-header{
9
4
  .show {
10
5
  display: block;
11
- width: 52rem;
12
6
  }
13
7
 
14
8
  .hide {
15
9
  display: none;
16
10
  }
17
11
 
18
- &.accordion-open {
19
- border: none;
20
-
12
+ &[aria-expanded="true"] {
21
13
  .show {
22
14
  display: none;
23
15
  }
24
16
 
25
17
  .hide {
26
18
  display: block;
27
- width: 70vw;
28
- max-width: 100%;
29
- padding-left: 1rem;
30
- }
31
- }
32
-
33
- .accordion-header {
34
- align-items: center;
35
- background-color: $apricot;
36
- border: 1px solid rgba(153, 153, 153, 0.5);
37
- border-radius: 2px;
38
- max-width: 80rem;
39
- line-height: 2rem;
40
- padding: unset;
41
-
42
- &:before {
43
- position: absolute;
44
- top: 50%;
45
- margin-right: 0.5rem;
46
- bottom: 50%;
47
- transition: .3s;
48
- color: $brown;
49
- }
50
-
51
- span {
52
- font-weight: normal;
53
- }
54
- &:hover {
55
- span {
56
- font-weight: bold;
57
- }
58
- }
59
- }
60
-
61
- .accordion-body {
62
- @media (min-width: 1250px) {
63
- width: 70vw;
64
- max-width: 80rem;
65
- }
66
- }
67
-
68
- table {
69
- border: 1px solid rgba(153, 153, 153, 0.5);
70
- border-radius: 0.25rem;
71
-
72
- th {
73
- font-size: 0.875rem;
74
- }
75
-
76
- tbody {
77
- font-size: 0.875rem;
78
-
79
- tr:nth-child(odd) {
80
- background-color: #F9F8F6;
81
- }
82
-
83
- tr {
84
- &:hover {
85
- background-color: $apricot;
86
- transition: .5s;
87
- }
88
- }
89
19
  }
90
20
  }
91
- }
92
21
  }
data/_sass/card.scss CHANGED
@@ -1,276 +1,6 @@
1
- @import 'colors.scss';
2
-
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
-
19
- .table {
20
-
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
- }
45
- tbody {
46
- tr {
47
- background-color: transparent;
48
- td {
49
- text-align: center;
50
- border: none;
51
- }
52
-
53
- th {
54
- padding-left: 0;
55
- display: flex;
56
- align-items: end;
57
- border: none;
58
-
59
- i {
60
- margin-right: 0.5rem;
61
- }
62
- }
63
- }
64
- }
65
- }
66
- }
67
-
68
- .container-right {
69
- float: right;
70
- }
71
- }
72
-
73
- .dx-card {
74
- display: flex;
75
- flex-grow: 1;
76
- flex-direction: column;
77
- position: relative;
78
- padding: 2.25rem 1.5rem 1.5rem;
79
- margin: 2rem 0 1rem;
80
- border-radius: 4px;
81
- box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.1);
82
- color: $brown;
83
- text-decoration: none;
84
- background-color: $white;
85
-
86
- &:hover,
87
- &:focus {
88
- box-shadow: 1px 2px 20px rgba(0, 0, 0, 0.15);
89
- color: $brown;
90
-
91
- &:after {
92
- position: absolute;
93
- bottom: 0;
94
- left: 0;
95
- content: "";
96
- width: 100%;
97
- border-bottom-left-radius: 4px;
98
- border-bottom-right-radius: 4px;
99
- border-bottom: 4px solid $yellow;
100
- }
101
- }
102
-
103
- >i {
104
- color: $brown;
105
- margin-top: auto;
106
- }
107
-
108
-
109
- .dx-card-icon {
110
- display: flex;
111
- position: absolute;
112
- top: -1.25rem;
113
- left: 2rem;
114
- width: 2.5rem;
115
- height: 2.5rem;
116
- border-radius: 4px;
117
- align-items: center;
118
- justify-content: center;
119
- color: $brown;
120
- background-color: $yellow;
121
-
122
- svg {
123
- fill: $brown;
124
- max-width: 24px;
125
- }
126
- }
127
-
128
- .dx-card-content {
129
- display: flex;
130
- flex-direction: column;
131
- margin-bottom: 1.25rem;
132
- font-size: 1rem;
133
-
134
- .h4 {
135
- margin-top: 0;
136
- }
137
- }
138
-
139
- &.dx-card-horizontal {
140
- flex-direction: row;
141
- justify-content: space-between;
142
- align-items: center;
143
- padding-top: 1.5rem;
144
- margin-top: 2.25rem;
145
-
146
- >i {
147
- margin-top: initial;
148
- }
149
-
150
- .dx-card-icon {
151
- font-family: "Akkurat Mono", monospace;
152
- height: 2rem;
153
- top: -1rem;
154
- }
155
-
156
- .dx-card-content {
157
- margin-bottom: 0;
158
- margin-top: 0.75rem;
159
-
160
- .h3 {
161
- margin-top: 0;
162
- margin-bottom: 0.25rem;
163
- }
164
- }
165
- }
166
-
167
- &.dx-card-sdk {
168
- &:hover,
169
- &:focus {
170
- &:after {
171
- border-bottom: 4px solid $turquoise;
172
- }
173
- }
174
-
175
- >i {
176
- color: $turquoise;
177
- }
178
-
179
- .dx-card-icon {
180
- color: $white;
181
- background-color: $turquoise;
182
-
183
- svg {
184
- fill: $white;
185
- }
186
- }
187
-
188
- &.dx-card-disabled {
189
- &, .h1, .h2, .h3, .h4, h5, .h6 {
190
- color: $soft-turquoise;
191
- }
192
-
193
- .dx-card-icon {
194
- background-color: $soft-turquoise;
195
- }
196
- }
197
- }
198
-
199
- &.dx-card-module {
200
- &:hover,
201
- &:focus {
202
- &:after {
203
- border-bottom: 4px solid $card-pink;
204
- }
205
- }
206
-
207
- >i {
208
- color: $card-pink;
209
- }
210
-
211
- .dx-card-icon {
212
- color: $white;
213
- background-color: $card-pink;
214
-
215
- svg {
216
- fill: $white;
217
- }
218
- }
219
-
220
- &.dx-card-disabled {
221
- &, .h1, .h2, .h3, .h4, h5, .h6 {
222
- color: $soft-card-pink;
223
- }
224
-
225
- .dx-card-icon {
226
- background-color: $soft-card-pink;
227
- }
228
- }
229
- }
230
-
231
- &.dx-card-disabled {
232
- &, .h1, .h2, .h3, .h4, h5, .h6 {
233
- color: $soft-brown;
234
- }
235
-
236
- &:hover,
237
- &:focus {
238
- box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.1);
239
-
240
- &:after {
241
- border-bottom: none;
242
- }
243
- }
244
-
245
- .dx-card-icon {
246
- background-color: $soft-yellow;
247
- }
248
- }
249
- }
250
-
251
-
252
- .card-horizontal-list {
253
- margin-top: 3.25rem;
254
-
255
- .dx-card {
256
- &:not(:last-child) {
257
- &:before {
258
- content: "";
259
- position: absolute;
260
- height: 16px;
261
- bottom: -18px;
262
- left: 3.125rem;
263
- border-left: 2px dotted $brown;
264
- }
265
- }
266
- }
267
- }
268
-
269
- .card-list {
270
- margin-top: 1.5rem;
271
-
272
- >[class*='col-'] {
273
- display: flex;
1
+ .cards-icon {
2
+ svg {
3
+ fill: $brown;
4
+ max-width: 24px;
274
5
  }
275
6
  }
276
-
data/_sass/colors.scss CHANGED
@@ -10,7 +10,7 @@ $brand-success-light: #f2f7eb;
10
10
  $turquoise: #31a3ae;
11
11
  $soft-turquoise: #98d0d6;
12
12
  $turquoise-link: #257886;
13
- $brown: #512b2b;
13
+ $brown: #2f2424;
14
14
  $dark-brown: #493c3b;
15
15
  $medium-brown: #72605e;
16
16
  $soft-brown: #a38b80;
@@ -1,7 +1,7 @@
1
1
  .highlight .hll { background-color: #ffffcc }
2
2
  .highlight { background: #ffffff; }
3
3
  .highlight .c { color: #aaaaaa; font-style: italic } /* Comment */
4
- .highlight .err { color: #FFAAAA; } /* Error */
4
+ .highlight .err { color: #E7F8D2; } /* Error */
5
5
  .highlight .k { color: #0000aa } /* Keyword */
6
6
  .highlight .ch { color: #aaaaaa; font-style: italic } /* Comment.Hashbang */
7
7
  .highlight .cm { color: #aaaaaa; font-style: italic } /* Comment.Multiline */
data/lib/gem_version.rb CHANGED
@@ -4,7 +4,7 @@ module Gem
4
4
  # Gem Specification
5
5
  class Specification
6
6
  def self.gem_version
7
- '2.1.12'
7
+ '2.1.13'
8
8
  end
9
9
  end
10
10
  end
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: 2.1.12
4
+ version: 2.1.13
5
5
  platform: ruby
6
6
  authors:
7
7
  - Swedbank Pay
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2024-01-23 00:00:00.000000000 Z
11
+ date: 2024-01-24 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: faraday