claritas-web-framework 8.0.21 → 8.0.23
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 +18 -3
- package/package.json +4 -4
- package/sass/_variables.scss +20 -20
- package/sass/modules/_button.scss +2 -2
- package/sass/modules/_card.scss +2 -4
- package/sass/modules/_form.scss +2 -2
- package/sass/modules/_table.scss +1 -1
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><div class="
|
|
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 id="navbar">Currencies (€) <button id="app-update" class="app-update"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="white"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"/></svg></button></nav><main id="main"><div class="card"><div class="card--header">Header</div><div class="card--body">Body</div><div class="card--footer">Footer</div></div></main></body></html>
|
package/index.html
CHANGED
|
@@ -8,8 +8,23 @@
|
|
|
8
8
|
</head>
|
|
9
9
|
|
|
10
10
|
<body>
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
11
|
+
<!-- app shell HTML -->
|
|
12
|
+
<nav id="navbar">
|
|
13
|
+
Currencies (€)
|
|
14
|
+
<button id="app-update" class="app-update">
|
|
15
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="white">
|
|
16
|
+
<path fill="none" d="M0 0h24v24H0V0z" />
|
|
17
|
+
<path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z" />
|
|
18
|
+
</svg>
|
|
19
|
+
</button>
|
|
20
|
+
</nav>
|
|
21
|
+
|
|
22
|
+
<main id="main">
|
|
23
|
+
<div class="card">
|
|
24
|
+
<div class="card--header">Header</div>
|
|
25
|
+
<div class="card--body">Body</div>
|
|
26
|
+
<div class="card--footer">Footer</div>
|
|
27
|
+
</div>
|
|
28
|
+
</main>
|
|
14
29
|
</body>
|
|
15
30
|
</html>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "claritas-web-framework",
|
|
3
|
-
"version": "8.0.
|
|
3
|
+
"version": "8.0.23",
|
|
4
4
|
"description": "The CSS framework built for Claritas front end.",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"scripts": {
|
|
@@ -21,10 +21,10 @@
|
|
|
21
21
|
"find-unused-sass-variables": "^5.0.0",
|
|
22
22
|
"html-webpack-plugin": "^5.5.3",
|
|
23
23
|
"mini-css-extract-plugin": "^2.7.6",
|
|
24
|
-
"prettier": "^3.0.
|
|
25
|
-
"sass": "^1.
|
|
24
|
+
"prettier": "^3.0.2",
|
|
25
|
+
"sass": "^1.66.1",
|
|
26
26
|
"sass-loader": "^13.3.2",
|
|
27
|
-
"stylelint": "^15.10.
|
|
27
|
+
"stylelint": "^15.10.3",
|
|
28
28
|
"stylelint-config-standard": "^34.0.0",
|
|
29
29
|
"stylelint-config-standard-scss": "^10.0.0",
|
|
30
30
|
"stylelint-scss": "^5.1.0",
|
package/sass/_variables.scss
CHANGED
|
@@ -240,8 +240,8 @@ $border-radii: (
|
|
|
240
240
|
/* ---------------------------------- table --------------------------------- */
|
|
241
241
|
$table-cell-padding-y: calc(($spacer * 0.625) - 0.5px) !default;
|
|
242
242
|
$table-cell-padding-x: calc($spacer * 0.5) !default;
|
|
243
|
-
$table-cell-padding-y
|
|
244
|
-
$table-cell-padding-x
|
|
243
|
+
$table-small-cell-padding-y: calc(($spacer * 0.25) - 1px) !default;
|
|
244
|
+
$table-small-cell-padding-x: calc($spacer * 0.5) !default;
|
|
245
245
|
$table-cell-border-style: solid !default;
|
|
246
246
|
$table-cell-border-width: 1px !default;
|
|
247
247
|
$table-cell-valign: top !default;
|
|
@@ -322,45 +322,45 @@ $label-color: $body-color !default;
|
|
|
322
322
|
|
|
323
323
|
// inputs buttons
|
|
324
324
|
$input-button-font-size: $font-size-base !default;
|
|
325
|
-
$input-button-font-size
|
|
326
|
-
$input-button-font-size
|
|
325
|
+
$input-button-large-font-size: $font-size-4 !default;
|
|
326
|
+
$input-button-small-font-size: $font-size-small !default;
|
|
327
327
|
$input-button-font-family: $font-family-sans-serif !default;
|
|
328
328
|
$input-button-line-height: $line-height-base !default;
|
|
329
329
|
$input-button-padding-y: calc($spacer * 0.375) !default;
|
|
330
330
|
$input-button-padding-x: calc($spacer * 0.75) !default;
|
|
331
|
-
$input-button-padding-y
|
|
332
|
-
$input-button-padding-x
|
|
333
|
-
$input-button-padding-y
|
|
334
|
-
$input-button-padding-x
|
|
331
|
+
$input-button-large-padding-y: calc($spacer * 0.5) !default;
|
|
332
|
+
$input-button-large-padding-x: calc($spacer * 1.25) !default;
|
|
333
|
+
$input-button-small-padding-y: calc($spacer * 0.25) !default;
|
|
334
|
+
$input-button-small-padding-x: calc($spacer * 0.5) !default;
|
|
335
335
|
|
|
336
336
|
// Input
|
|
337
337
|
$input-font-family: $input-button-font-family !default;
|
|
338
338
|
$input-font-weight: $font-weight-normal !default;
|
|
339
339
|
$input-font-size: $input-button-font-size !default;
|
|
340
|
-
$input-font-size
|
|
341
|
-
$input-font-size
|
|
340
|
+
$input-large-font-size: $input-button-large-font-size !default;
|
|
341
|
+
$input-small-font-size: $input-button-small-font-size !default;
|
|
342
342
|
$input-line-height: $input-button-line-height !default;
|
|
343
343
|
$input-padding-y: $input-button-padding-y !default;
|
|
344
344
|
$input-padding-x: $input-button-padding-x !default;
|
|
345
|
-
$input-small-padding-y: $input-button-padding-y
|
|
346
|
-
$input-small-padding-x: $input-button-padding-x
|
|
347
|
-
$input-large-padding-y: $input-button-padding-y
|
|
348
|
-
$input-large-padding-x: $input-button-padding-x
|
|
345
|
+
$input-small-padding-y: $input-button-small-padding-y !default;
|
|
346
|
+
$input-small-padding-x: $input-button-small-padding-x !default;
|
|
347
|
+
$input-large-padding-y: $input-button-large-padding-y !default;
|
|
348
|
+
$input-large-padding-x: $input-button-large-padding-x !default;
|
|
349
349
|
$input-white-space: nowrap !default;
|
|
350
350
|
|
|
351
351
|
// Button
|
|
352
352
|
$button-font-family: $input-button-font-family !default;
|
|
353
353
|
$button-font-weight: $font-weight-normal !default;
|
|
354
354
|
$button-font-size: $input-button-font-size !default;
|
|
355
|
-
$button-font-size
|
|
356
|
-
$button-font-size
|
|
355
|
+
$button-large-font-size: $input-button-large-font-size !default;
|
|
356
|
+
$button-small-font-size: $input-button-small-font-size !default;
|
|
357
357
|
$button-line-height: $input-button-line-height !default;
|
|
358
358
|
$button-padding-y: $input-button-padding-y !default;
|
|
359
359
|
$button-padding-x: $input-button-padding-x !default;
|
|
360
|
-
$button-large-padding-y: $input-button-padding-y
|
|
361
|
-
$button-large-padding-x: $input-button-padding-x
|
|
362
|
-
$button-small-padding-y: $input-button-padding-y
|
|
363
|
-
$button-small-padding-x: $input-button-padding-x
|
|
360
|
+
$button-large-padding-y: $input-button-large-padding-y !default;
|
|
361
|
+
$button-large-padding-x: $input-button-large-padding-x !default;
|
|
362
|
+
$button-small-padding-y: $input-button-small-padding-y !default;
|
|
363
|
+
$button-small-padding-x: $input-button-small-padding-x !default;
|
|
364
364
|
$button-white-space: nowrap !default;
|
|
365
365
|
|
|
366
366
|
$button-color-flip-threshold: 60% !default;
|
|
@@ -94,14 +94,14 @@
|
|
|
94
94
|
&.button--large {
|
|
95
95
|
padding: var(--button-large-padding-y) var(--button-large-padding-x);
|
|
96
96
|
|
|
97
|
-
@include rfs($button-font-size
|
|
97
|
+
@include rfs($button-large-font-size, --button-font-size);
|
|
98
98
|
@include font-size(var(--button-font-size));
|
|
99
99
|
}
|
|
100
100
|
|
|
101
101
|
&.button--small {
|
|
102
102
|
padding: var(--button-small-padding-y) var(--button-small-padding-x);
|
|
103
103
|
|
|
104
|
-
@include rfs($button-font-size
|
|
104
|
+
@include rfs($button-small-font-size, --button-font-size);
|
|
105
105
|
@include font-size(var(--button-font-size));
|
|
106
106
|
}
|
|
107
107
|
|
package/sass/modules/_card.scss
CHANGED
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
flex-direction: column;
|
|
18
18
|
min-width: 0;
|
|
19
19
|
word-wrap: break-word;
|
|
20
|
-
|
|
20
|
+
flex: 1 1 auto;
|
|
21
21
|
position: relative;
|
|
22
22
|
|
|
23
23
|
@if $enable-margins {
|
|
@@ -51,18 +51,16 @@
|
|
|
51
51
|
}
|
|
52
52
|
|
|
53
53
|
& .card--header {
|
|
54
|
-
flex: 0 1 auto;
|
|
55
54
|
border-bottom: var(--card-border-width) var(--card-border-style) var(--card-border-color);
|
|
56
55
|
}
|
|
57
56
|
|
|
58
57
|
& .card--footer {
|
|
59
58
|
margin-top: auto;
|
|
60
|
-
flex: 0 0 auto;
|
|
61
59
|
border-top: var(--card-border-width) var(--card-border-style) var(--card-border-color);
|
|
62
60
|
}
|
|
63
61
|
|
|
64
62
|
& .card--body {
|
|
65
|
-
flex:
|
|
63
|
+
flex: 1 1 auto;
|
|
66
64
|
width: 100%;
|
|
67
65
|
padding: var(--spacer);
|
|
68
66
|
|
package/sass/modules/_form.scss
CHANGED
|
@@ -155,7 +155,7 @@
|
|
|
155
155
|
&.input--small {
|
|
156
156
|
padding: var(--input-small-padding-y) var(--input-small-padding-x);
|
|
157
157
|
|
|
158
|
-
@include rfs($input-font-size
|
|
158
|
+
@include rfs($input-small-font-size, --input-font-size);
|
|
159
159
|
@include font-size(var(--input-font-size));
|
|
160
160
|
|
|
161
161
|
&:not(.input--rounded) {
|
|
@@ -166,7 +166,7 @@
|
|
|
166
166
|
&.input--large {
|
|
167
167
|
padding: var(--input-large-padding-y) var(--input-large-padding-x);
|
|
168
168
|
|
|
169
|
-
@include rfs($input-font-size
|
|
169
|
+
@include rfs($input-large-font-size, --input-font-size);
|
|
170
170
|
@include font-size(var(--input-font-size));
|
|
171
171
|
|
|
172
172
|
&:not(.input--rounded) {
|