claritas-web-framework 8.0.2 → 8.0.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/dist/index.css +1 -1
- package/dist/index.html +1 -1
- package/index.html +8 -63
- package/package.json +2 -2
- package/sass/mixins/_container.scss +4 -1
- package/sass/mixins/_grid.scss +4 -5
- package/sass/modules/_list.scss +0 -15
- package/sass/modules/_nav.scss +6 -2
package/dist/index.html
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
<!doctype html><html lang="en"><head><meta charset="UTF-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title>Claritas Web Framework</title><script defer="defer" src="index.js"></script><link href="./index.css" rel="stylesheet"></head><body><button type="button" class="button button--primary">Click me</button><hr/><footer class="background--
|
|
1
|
+
<!doctype html><html lang="en"><head><meta charset="UTF-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title>Claritas Web Framework</title><script defer="defer" src="index.js"></script><link href="./index.css" rel="stylesheet"></head><body><nav class="nav"><ul><li><a class="nav--item" href="/">Hello</a></li></ul></nav><button type="button" class="button button--primary">Click me</button><hr/><footer id="site-footer" class="background--blue-dark color--white padding-y--5"><div class="container"><div class="grid"><div class="col--desktop-6"><div class="grid"><div class="col--12">Logo</div><div class="col--tablet-4"><nav class="nav nav--column" aria-label="Solutions navigation"><span class="nav--title">Solutions</span> <a class="nav--item" href="/">User authentication</a> <a class="nav--item" href="/">User management</a> <a class="nav--item" href="/">Case management</a> <a class="nav--item" href="/">Document management</a> <a class="nav--item" href="/">Messaging integration</a> <a class="nav--item" href="/">Data integration</a> <a class="nav--item" href="/">Reporting</a> <a class="nav--item" href="/">Security & compliance</a></nav></div><div class="col--tablet-4"><nav class="nav nav--column" aria-label="About us navigation"><span class="nav--title">About Us</span> <a class="nav--item" href="/">Accreditation</a> <a class="nav--item" href="/">Sustainability</a> <a class="nav--item" href="/">Our story</a> <a class="nav--item" href="/">Our people</a></nav></div><div class="col--tablet-4"><nav class="nav nav--column" aria-label="Support navigation"><span class="nav--title">Support</span> <a class="nav--item" href="/">Docs</a> <a class="nav--item" href="/">Helpdesk</a></nav></div></div></div></div><hr class="margin-y--5"/><div class="grid"><div class="col--tablet-6"><ul class="list--inline"><li>Made in</li><li><img class="border-radius--medium" src="{{ url('theme://images/flag__uk.svg')|e }}" alt="{{ config.site.title|e }}" width="32" height="18"/></li><li>with</li><li><span class="color--red"><i class="fa-fw fa-solid fa-heart"></i></span></li></ul><p><small>© Claritas Solutions Ltd 2023. All rights reserved. <a href="/">Privacy</a> <a href="/">Terms</a></small></p></div><div class="col--tablet-6"><nav class="nav" aria-label="Social media navigation"><a class="nav--item" href="/">Facebook</a> <a class="nav--item" href="/">X</a> <a class="nav--item" href="/">LinkedIn</a> <a class="nav--item" href="/">YouTube</a></nav></div></div></div></footer></body></html>
|
package/index.html
CHANGED
|
@@ -8,68 +8,13 @@
|
|
|
8
8
|
</head>
|
|
9
9
|
|
|
10
10
|
<body>
|
|
11
|
-
<
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
<
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
<div class="col--tablet-4">
|
|
20
|
-
<nav class="nav nav--column" aria-label="Solutions navigation">
|
|
21
|
-
<span class="nav--title">Solutions</span>
|
|
22
|
-
<a class="nav--item" href="/">User authentication</a>
|
|
23
|
-
<a class="nav--item" href="/">User management</a>
|
|
24
|
-
<a class="nav--item" href="/">Case management</a>
|
|
25
|
-
<a class="nav--item" href="/">Document management</a>
|
|
26
|
-
<a class="nav--item" href="/">Messaging integration</a>
|
|
27
|
-
<a class="nav--item" href="/">Data integration</a>
|
|
28
|
-
<a class="nav--item" href="/">Reporting</a>
|
|
29
|
-
<a class="nav--item" href="/">Security & compliance</a>
|
|
30
|
-
</nav>
|
|
31
|
-
</div>
|
|
32
|
-
<div class="col--tablet-4">
|
|
33
|
-
<nav class="nav nav--column" aria-label="About us navigation">
|
|
34
|
-
<span class="nav--title">About Us</span>
|
|
35
|
-
<a class="nav--item" href="/">Accreditation</a>
|
|
36
|
-
<a class="nav--item" href="/">Sustainability</a>
|
|
37
|
-
<a class="nav--item" href="/">Our story</a>
|
|
38
|
-
<a class="nav--item" href="/">Our people</a>
|
|
39
|
-
</nav>
|
|
40
|
-
</div>
|
|
41
|
-
<div class="col--tablet-4">
|
|
42
|
-
<nav class="nav nav--column" aria-label="Support navigation">
|
|
43
|
-
<span class="nav--title">Support</span>
|
|
44
|
-
<a class="nav--item" href="/">Docs</a>
|
|
45
|
-
<a class="nav--item" href="/">Helpdesk</a>
|
|
46
|
-
</nav>
|
|
47
|
-
</div>
|
|
48
|
-
</div>
|
|
49
|
-
</div>
|
|
50
|
-
</div>
|
|
51
|
-
<hr class="margin-y--5" />
|
|
52
|
-
<div class="grid">
|
|
53
|
-
<div class="col--tablet-6">
|
|
54
|
-
<p>Made in UK with love</p>
|
|
55
|
-
<p>
|
|
56
|
-
<small>
|
|
57
|
-
© Claritas Solutions Ltd 2023. All rights reserved.
|
|
58
|
-
<a href="/">Privacy</a>
|
|
59
|
-
<a href="/">Terms</a>
|
|
60
|
-
</small>
|
|
61
|
-
</p>
|
|
62
|
-
</div>
|
|
63
|
-
<div class="col--tablet-6">
|
|
64
|
-
<nav class="nav" aria-label="Social media navigation">
|
|
65
|
-
<a class="nav--item" href="/">Facebook</a>
|
|
66
|
-
<a class="nav--item" href="/">X</a>
|
|
67
|
-
<a class="nav--item" href="/">LinkedIn</a>
|
|
68
|
-
<a class="nav--item" href="/">YouTube</a>
|
|
69
|
-
</nav>
|
|
70
|
-
</div>
|
|
71
|
-
</div>
|
|
72
|
-
</div>
|
|
73
|
-
</footer>
|
|
11
|
+
<div class="container">
|
|
12
|
+
<dl class="grid--tight">
|
|
13
|
+
<dt class="col--tablet-4">Title</dt>
|
|
14
|
+
<dd class="col--tablet-8">Description</dd>
|
|
15
|
+
<dt class="col--tablet-4">Title</dt>
|
|
16
|
+
<dd class="col--tablet-8">Description</dd>
|
|
17
|
+
</dl>
|
|
18
|
+
</div>
|
|
74
19
|
</body>
|
|
75
20
|
</html>
|
package/package.json
CHANGED
|
@@ -2,11 +2,14 @@
|
|
|
2
2
|
@use "./../mixins/breakpoints" as *;
|
|
3
3
|
|
|
4
4
|
@mixin make-container() {
|
|
5
|
+
--gutter-x: #{$grid-gutter};
|
|
6
|
+
|
|
5
7
|
width: 100%;
|
|
6
8
|
max-width: 100vw;
|
|
7
9
|
margin-left: auto;
|
|
8
10
|
margin-right: auto;
|
|
9
|
-
padding: 0
|
|
11
|
+
padding-left: calc(var(--gutter-x) * 0.5);
|
|
12
|
+
padding-right: calc(var(--gutter-x) * 0.5);
|
|
10
13
|
}
|
|
11
14
|
|
|
12
15
|
@mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $breakpoints) {
|
package/sass/mixins/_grid.scss
CHANGED
|
@@ -12,10 +12,9 @@
|
|
|
12
12
|
|
|
13
13
|
display: flex;
|
|
14
14
|
flex-wrap: wrap;
|
|
15
|
-
|
|
16
|
-
margin-
|
|
17
|
-
margin-
|
|
18
|
-
margin-left: calc(-0.5 * var(--gutter-x)); // stylelint-disable-line function-disallowed-list
|
|
15
|
+
margin-top: calc(-1 * var(--gutter-y));
|
|
16
|
+
margin-right: calc(-0.5 * var(--gutter-x));
|
|
17
|
+
margin-left: calc(-0.5 * var(--gutter-x));
|
|
19
18
|
}
|
|
20
19
|
|
|
21
20
|
@mixin make-col-ready() {
|
|
@@ -76,7 +75,7 @@
|
|
|
76
75
|
// Framework grid generation
|
|
77
76
|
// Used only by Bootstrap to generate the correct number of grid classes given
|
|
78
77
|
// any value of `$grid-columns`.
|
|
79
|
-
@mixin make-grid-columns($columns: $grid-columns, $
|
|
78
|
+
@mixin make-grid-columns($columns: $grid-columns, $breakpoints: $breakpoints) {
|
|
80
79
|
@each $breakpoint in map.keys($breakpoints) {
|
|
81
80
|
$infix: breakpoint-infix($breakpoint, $breakpoints);
|
|
82
81
|
|
package/sass/modules/_list.scss
CHANGED
|
@@ -18,21 +18,6 @@ dl {
|
|
|
18
18
|
margin-bottom: 0;
|
|
19
19
|
}
|
|
20
20
|
|
|
21
|
-
&.grid {
|
|
22
|
-
margin-left: calc($grid-gutter * -0.25) !important;
|
|
23
|
-
margin-right: calc($grid-gutter * -0.25) !important;
|
|
24
|
-
|
|
25
|
-
& > * {
|
|
26
|
-
padding-left: calc($grid-gutter * 0.25) !important;
|
|
27
|
-
padding-right: calc($grid-gutter * 0.25) !important;
|
|
28
|
-
margin-bottom: calc(var(--spacer) * 0.5);
|
|
29
|
-
|
|
30
|
-
&:last-of-type {
|
|
31
|
-
margin-bottom: 0;
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
|
|
36
21
|
& > *:last-child {
|
|
37
22
|
margin-bottom: 0;
|
|
38
23
|
}
|
package/sass/modules/_nav.scss
CHANGED
|
@@ -39,13 +39,17 @@
|
|
|
39
39
|
|
|
40
40
|
@include make-list-unsyled;
|
|
41
41
|
|
|
42
|
+
& ul {
|
|
43
|
+
@include make-list-unsyled;
|
|
44
|
+
|
|
45
|
+
margin: 0;
|
|
46
|
+
}
|
|
47
|
+
|
|
42
48
|
& li {
|
|
43
49
|
margin: 0;
|
|
44
50
|
padding: 0;
|
|
45
51
|
|
|
46
52
|
& ul {
|
|
47
|
-
@include make-list-unsyled;
|
|
48
|
-
|
|
49
53
|
border-left: var(--nav-item-border-width) var(--nav-item-border-style) var(--nav-item-border-color);
|
|
50
54
|
margin: calc(var(--spacer) * 0.75);
|
|
51
55
|
padding-left: calc(var(--spacer) * 0.75);
|