wickes-css2 2.98.0-develop.3 → 2.98.0-develop.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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "wickes-css2",
3
- "version": "2.98.0-develop.3",
3
+ "version": "2.98.0-develop.4",
4
4
  "description": "CSS and JS and page templates in use by Wickes",
5
5
  "main": "index.js",
6
6
  "scripts": {
@@ -1,27 +1,24 @@
1
- <div class="legal-info container">
2
- <div class="row">
3
- <div class="col-lg-3"></div>
4
- <div class="col-lg-9">
5
- <p>
6
- Terms and conditions Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
7
- incididunt ut labore et dolore
8
- magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
9
- commodo
10
- consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
11
- pariatur.
12
- Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
13
- laborum.
14
- </p>
15
- <p>
16
- Terms and conditions Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
17
- incididunt ut labore et dolore
18
- magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
19
- commodo
20
- consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
21
- pariatur.
22
- Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
23
- laborum.
24
- </p>
1
+ <div class="container">
2
+ <div class="row">
3
+ <div class="col-12">
4
+ <div class="legal-info">
5
+ <h3 class="legal-info__toggle" data-toggle="collapse" data-target="#collapseInfo" aria-expanded="false" aria-controls="collapseInfo">
6
+ {{#if customTitle}}
7
+ {{customTitle}}
8
+ {{else}}
9
+ Frequently Asked Questions
10
+ {{/if}}
11
+ <span class="icon-wrap"></span>
12
+ </h3>
13
+
14
+ <div class="collapse" id="collapseInfo">
15
+ <div class="collapse-wrap">
16
+ <div class="container">
17
+ {{{page_category-landing.legal-info}}}
18
+ </div>
19
+ </div>
25
20
  </div>
21
+ </div>
26
22
  </div>
27
- </div>
23
+ </div>
24
+ </div>
@@ -217,6 +217,7 @@
217
217
  }
218
218
  ]
219
219
  }
220
- ]
220
+ ],
221
+ "legal-info": "<p>Our selection of toilets is crafted to suit a wide range of <a href=\"https://www.wickes.co.uk/bathroom/suites\">bathroom suites</a>, from compact cloakrooms to spacious bathrooms. With our large selection, you’ll easily find a solution for both modern and traditional spaces. Each toilet is built for efficiency and easy maintenance, helping you achieve a stylish, functional bathroom with a range of finishes and shapes.</p>\n<h3>FAQs</h3>\n<h4>What are the different types of toilets?</h4>\n<p>Different toilet types include close-coupled, back-to-wall, rimless, wall-hung, and <a href=\"https://www.wickes.co.uk/Products/Bathrooms/Toilets+Accessories/Low+High-Level-Toilets/c/1000359\">high and low-level toilets</a>. Each has unique installation and style benefits, suitable for various bathroom sizes and styles.</p>\n<h4>What toilets suit a modern bathroom?</h4>\n<p>Rimless, wall-hung and <a href=\"https://www.wickes.co.uk/Products/Bathrooms/Toilets+Accessories/Back-to-Wall-Toilets/c/1000282\">back-to-wall toilets</a> fit well in modern bathrooms. Their sleek designs and efficient features offer a clean, contemporary look.</p>\n<h4>What toilets look best in a traditional bathroom?</h4>\n<p>High-level and low-level toilets are popular in traditional designs, adding elegance and classic style with vintage-inspired cisterns and details.</p>"
221
222
  }
222
223
  }
@@ -1,3 +1,64 @@
1
+ @import '../helpers/helpers';
2
+
1
3
  .legal-info {
2
4
  margin-top: 40px;
5
+ border: 1px solid $gray;
6
+ border-radius: 4px;
7
+ padding: 16px;
8
+ position: relative;
9
+ font-size: 1rem;
10
+ font-weight: 400;
11
+ line-height: 1.5rem;
12
+
13
+ &__toggle {
14
+ margin-bottom: 0;
15
+ font-size: 1.125rem;
16
+ font-weight: 500;
17
+ line-height: 1.5rem;
18
+ display: flex;
19
+ align-items: center;
20
+ justify-content: space-between;
21
+
22
+ .icon-wrap {
23
+ cursor: pointer;
24
+ display: flex;
25
+ align-items: center;
26
+ justify-content: center;
27
+
28
+ &:after {
29
+ content: '+';
30
+ color: $blue;
31
+ font-size: 1.575rem;
32
+ }
33
+ }
34
+
35
+ &[aria-expanded='true'] {
36
+ .icon-wrap {
37
+ &:after {
38
+ content: '-';
39
+ font-size: 2.95rem;
40
+ }
41
+ }
42
+ }
43
+ }
44
+
45
+ .collapse-wrap {
46
+ margin-top: 16px;
47
+ }
48
+
49
+ .container {
50
+ padding: 0;
51
+ }
52
+ }
53
+
54
+ @include media-breakpoint-up(sm) {
55
+ .legal-info {
56
+ padding: 24px;
57
+ }
58
+ }
59
+
60
+ @include media-breakpoint-up(md) {
61
+ .legal-info {
62
+ padding: 24px 40px;
63
+ }
3
64
  }