@angelscmf/front 1.0.4 → 1.0.6
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 +10 -4
- package/sass/AngelsDesign.scss +4 -0
- package/sass/_AngelsHTMLElements.scss +122 -0
- package/sass/_AngelsPageLayout.scss +85 -0
- package/sass/_AngelsTheme.scss +59 -0
- package/sass/_AngelsVariables.scss +32 -0
- package/scss/AngelsMain.scss +0 -6
- package/scss/_AngelsTheme.scss +0 -4
package/package.json
CHANGED
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@angelscmf/front",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.6",
|
|
4
4
|
"description": "",
|
|
5
5
|
"license": "ISC",
|
|
6
6
|
"author": "",
|
|
7
|
-
"type": "
|
|
7
|
+
"type": "module",
|
|
8
8
|
"main": "./dist/index.js",
|
|
9
9
|
"module": "./dist/index.mjs",
|
|
10
10
|
"types": "./dist/index.d.ts",
|
|
11
|
-
"style": "
|
|
11
|
+
"style": "sass/AngelsDesign.scss",
|
|
12
12
|
"files": [
|
|
13
13
|
"dist",
|
|
14
|
-
"
|
|
14
|
+
"sass"
|
|
15
15
|
],
|
|
16
16
|
"scripts": {
|
|
17
17
|
"build": "tsup",
|
|
@@ -19,7 +19,13 @@
|
|
|
19
19
|
"test": "echo \"Error: no test specified\" && exit 1"
|
|
20
20
|
},
|
|
21
21
|
"devDependencies": {
|
|
22
|
+
"browser-sync": "^3.0.4",
|
|
22
23
|
"glob": "^11.0.1",
|
|
24
|
+
"gulp": "^5.0.1",
|
|
25
|
+
"gulp-livereload": "^4.0.2",
|
|
26
|
+
"gulp-sass": "^6.0.1",
|
|
27
|
+
"gulp-sourcemaps": "^3.0.0",
|
|
28
|
+
"sass": "^1.89.2",
|
|
23
29
|
"ts-node": "^10.9.2",
|
|
24
30
|
"tsup": "^8.4.0",
|
|
25
31
|
"typescript": "^5.8.3"
|
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Angels' CMF HTML Elements styles.
|
|
3
|
+
*
|
|
4
|
+
* @version 2025-07-31
|
|
5
|
+
* * Adds `a` styles.
|
|
6
|
+
* * Adds `button` styles.
|
|
7
|
+
* * Adds `h1.a-h1` styles.
|
|
8
|
+
* * Adds `h2.a-h2` styles.
|
|
9
|
+
* * Adds `h3.a-h3` styles.
|
|
10
|
+
* * Adds `h4.a-h4` styles.
|
|
11
|
+
* * Adds `h5.a-h5` styles.
|
|
12
|
+
* * Adds `h6.a-h6` styles.
|
|
13
|
+
* * Adds `input` styles.
|
|
14
|
+
* * Adds `p` styles.
|
|
15
|
+
* * Adds `table.a-table` styles.
|
|
16
|
+
* * Adds `table.a-table td` styles.
|
|
17
|
+
* * Adds `textarea` styles.
|
|
18
|
+
*/
|
|
19
|
+
|
|
20
|
+
* {
|
|
21
|
+
box-sizing: border-box;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
a {
|
|
25
|
+
color: var(--a-link-color);
|
|
26
|
+
|
|
27
|
+
&:focus {
|
|
28
|
+
box-shadow: var(--a-focus-box-shadow);
|
|
29
|
+
outline-color: var(--a-focus-outline-color);
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
button {
|
|
34
|
+
background: var(--a-button-background);
|
|
35
|
+
border-radius: var(--a-border-radius);
|
|
36
|
+
border-color: var(--a-button-border-color);
|
|
37
|
+
border-style: var(--a-button-border-style);
|
|
38
|
+
border-width: var(--a-button-border-width);
|
|
39
|
+
color: var(--a-button-color);
|
|
40
|
+
min-height: var(--a-button-min-height);
|
|
41
|
+
padding-left: calc(var(--a-button-padding-left) - var(--a-button-border-width));
|
|
42
|
+
padding-right: calc(var(--a-button-padding-right) - var(--a-button-border-width));
|
|
43
|
+
padding-top: calc(var(--a-button-padding-top) - var(--a-button-border-width));
|
|
44
|
+
padding-bottom: calc(var(--a-button-padding-bottom) - var(--a-button-border-width));
|
|
45
|
+
transition: all 0.3s ease;
|
|
46
|
+
|
|
47
|
+
&:enabled {
|
|
48
|
+
cursor: pointer;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
&[type=submit] {
|
|
52
|
+
background: var(--a-submit-background);
|
|
53
|
+
border-width: var(--a-submit-border-width, --a-button-border-width);
|
|
54
|
+
color: var(--a-submit-color);
|
|
55
|
+
|
|
56
|
+
&:hover {
|
|
57
|
+
background: var(--a-submit-hover-background);
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
h1.a-h1 {
|
|
63
|
+
color: var(--a-header-color);
|
|
64
|
+
font-size: var(--a-header1-size);
|
|
65
|
+
margin: 0 0 12px 0;
|
|
66
|
+
padding: 0;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
h2.a-h2 {
|
|
70
|
+
color: var(--a-header-color);
|
|
71
|
+
font-size: var(--a-header2-size);
|
|
72
|
+
font-weight: normal;
|
|
73
|
+
letter-spacing: 2px;
|
|
74
|
+
margin: 0 0 12px 0;
|
|
75
|
+
padding: 0;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
h3.a-h3 {
|
|
79
|
+
color: var(--a-header-color);
|
|
80
|
+
font-size: var(--a-header3-size);
|
|
81
|
+
font-weight: normal;
|
|
82
|
+
letter-spacing: 2px;
|
|
83
|
+
margin: 0 0 8px 0;
|
|
84
|
+
padding: 0;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
h4.a-h4 {
|
|
88
|
+
font-size: var(--a-header4-size);
|
|
89
|
+
margin: 0 0 8px 0;
|
|
90
|
+
padding: 0;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
h5.a-h5 {
|
|
94
|
+
font-size: var(--a-header5-size);
|
|
95
|
+
margin: 0 0 4px 0;
|
|
96
|
+
padding: 0;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
h6.a-h6 {
|
|
100
|
+
font-size: var(--a-header6-size);
|
|
101
|
+
margin: 0 0 4px 0;
|
|
102
|
+
padding: 0;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
input {
|
|
106
|
+
border-radius: var(--a-border-radius);
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
p {
|
|
110
|
+
text-align: justify;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
table.a-table {
|
|
114
|
+
|
|
115
|
+
td {
|
|
116
|
+
padding: .1em .5em;
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
textarea {
|
|
121
|
+
border-radius: var(--a-border-radius);
|
|
122
|
+
}
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Angels' CMF Page Layout styles.
|
|
3
|
+
*
|
|
4
|
+
* @example HTML-markup
|
|
5
|
+
* <a-page>
|
|
6
|
+
* <a-page-header>A Page Header</a-page-header>
|
|
7
|
+
* <a-page-body>A Page Body</a-page-body>
|
|
8
|
+
* <a-page-footer>A Page Footer</a-page-footer>
|
|
9
|
+
* </a-page>
|
|
10
|
+
*
|
|
11
|
+
* @version 2025-08-02
|
|
12
|
+
* * Updates styles to use custom tags <a-page>, <a-page-header>, <a-page-body>, <a-page-footer>.
|
|
13
|
+
*/
|
|
14
|
+
|
|
15
|
+
@use "AngelsVariables";
|
|
16
|
+
|
|
17
|
+
html {
|
|
18
|
+
min-height: 100vh;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
body {
|
|
22
|
+
min-height: 100vh;
|
|
23
|
+
min-width: AngelsVariables.$a-mobile-min-width;
|
|
24
|
+
margin: 0;
|
|
25
|
+
|
|
26
|
+
border: 1px solid red;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
:root {
|
|
30
|
+
--a-page-background-color: #{AngelsVariables.$a-main-background-color};
|
|
31
|
+
--a-page-gap: 0;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
a-page {
|
|
35
|
+
background-color: var(--a-page-background-color);
|
|
36
|
+
display: flex;
|
|
37
|
+
flex-direction: column;
|
|
38
|
+
font-family: var(--a-font-size);
|
|
39
|
+
font-size: var(--a-font-size);
|
|
40
|
+
gap: var(--a-page-gap);
|
|
41
|
+
min-height: 100vh;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
:root {
|
|
45
|
+
--a-page-header-background-color: #{AngelsVariables.$a-second-background-color};
|
|
46
|
+
--a-page-header-text-color: #{AngelsVariables.$a-second-text-color};
|
|
47
|
+
--a-page-header-padding: 1em;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
a-page-header {
|
|
51
|
+
background-color: var(--a-page-header-background-color);
|
|
52
|
+
color: var(--a-page-header-text-color);
|
|
53
|
+
display: flex;
|
|
54
|
+
padding: var(--a-page-header-padding);
|
|
55
|
+
|
|
56
|
+
&:empty {
|
|
57
|
+
display: none;
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
a-page-body {
|
|
62
|
+
display: flex;
|
|
63
|
+
flex-grow: 1;
|
|
64
|
+
gap: 1em;
|
|
65
|
+
padding: 1em;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
:root {
|
|
69
|
+
--a-page-footer-background-color: #{AngelsVariables.$a-second-background-color};
|
|
70
|
+
--a-page-footer-text-color: #{AngelsVariables.$a-second-text-color};
|
|
71
|
+
--a-page-footer-padding: 1rem;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
a-page-footer {
|
|
75
|
+
background-color: var(--a-page-footer-background-color);
|
|
76
|
+
color: var(--a-page-footer-text-color);
|
|
77
|
+
display: flex;
|
|
78
|
+
font-family: monospace;
|
|
79
|
+
font-size: .8em;
|
|
80
|
+
padding: var(--a-page-footer-padding);
|
|
81
|
+
|
|
82
|
+
&:empty {
|
|
83
|
+
display: none;
|
|
84
|
+
}
|
|
85
|
+
}
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Angels' CMF Theme Custom Variables
|
|
3
|
+
*
|
|
4
|
+
* @version 2025-05-18
|
|
5
|
+
* * --a-header1-size based on Angels_ThemeVariables.$a-font-size
|
|
6
|
+
* * --a-header2-size based on Angels_ThemeVariables.$a-font-size
|
|
7
|
+
* * --a-header3-size based on Angels_ThemeVariables.$a-font-size
|
|
8
|
+
* * --a-header4-size based on Angels_ThemeVariables.$a-font-size
|
|
9
|
+
* * --a-header5-size based on Angels_ThemeVariables.$a-font-size
|
|
10
|
+
* * --a-header6-size based on Angels_ThemeVariables.$a-font-size
|
|
11
|
+
*/
|
|
12
|
+
|
|
13
|
+
@use "AngelsVariables";
|
|
14
|
+
|
|
15
|
+
:root {
|
|
16
|
+
--a-backgorund-color: #{AngelsVariables.$a-main-background-color};
|
|
17
|
+
/* --a-border-radius: 4px = 1em/4 = 16px/4 */
|
|
18
|
+
--a-border-radius: 4px;
|
|
19
|
+
--a-font-family: Verdana, Arial, Helvetica, sans-serif;
|
|
20
|
+
--a-font-size: 16px;
|
|
21
|
+
--a-header-color: orangered;
|
|
22
|
+
--a-header1-size: #{AngelsVariables.$a-font-size + 6};
|
|
23
|
+
--a-header2-size: #{AngelsVariables.$a-font-size + 5};
|
|
24
|
+
--a-header3-size: #{AngelsVariables.$a-font-size + 4};
|
|
25
|
+
--a-header4-size: #{AngelsVariables.$a-font-size + 3};
|
|
26
|
+
--a-header5-size: #{AngelsVariables.$a-font-size + 2};
|
|
27
|
+
--a-header6-size: #{AngelsVariables.$a-font-size + 1};
|
|
28
|
+
--a-line-height: 1.5;
|
|
29
|
+
--a-note-color: palevioletred;
|
|
30
|
+
--a-text-color: #4B2E2E;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
:root {
|
|
34
|
+
--a-focus-box-shadow: 0 0 10px #551c74;
|
|
35
|
+
--a-focus-outline-color: #8f54b0;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
:root {
|
|
39
|
+
--a-button-background: #fff;
|
|
40
|
+
--a-button-color: #8F54B0;
|
|
41
|
+
--a-button-min-height: 2em;
|
|
42
|
+
--a-button-padding-left: 1em;
|
|
43
|
+
--a-button-padding-right: 1em;
|
|
44
|
+
--a-button-padding-top: .5em;
|
|
45
|
+
--a-button-padding-bottom: .5em;
|
|
46
|
+
--a-button-border-color: #8F54B0;
|
|
47
|
+
--a-button-border-style: solid;
|
|
48
|
+
--a-button-border-width: 2px;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
:root {
|
|
52
|
+
--a-link-color: #551c74;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
:root {
|
|
56
|
+
--a-submit-background: #8F54B0;
|
|
57
|
+
--a-submit-border-color: #551C74;
|
|
58
|
+
--a-submit-color: #fff;
|
|
59
|
+
}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Angels' CMF SASS Variables
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* Colour variables
|
|
7
|
+
*/
|
|
8
|
+
|
|
9
|
+
$a-main-background-color: #FFF4E6;
|
|
10
|
+
$a-second-background-color: #ffe9cd;
|
|
11
|
+
$a-second-text-color: #02172c;
|
|
12
|
+
|
|
13
|
+
/**
|
|
14
|
+
* Font variables
|
|
15
|
+
*/
|
|
16
|
+
|
|
17
|
+
$a-font-size: 16px;
|
|
18
|
+
|
|
19
|
+
/**
|
|
20
|
+
* Grid variables.
|
|
21
|
+
*/
|
|
22
|
+
$a-mobile-min-width: 300px;
|
|
23
|
+
$a-mobile-max-width: 413.98px;
|
|
24
|
+
$a-tablet-min-width: 414px;
|
|
25
|
+
$a-tablet-max-width: 767.98px;
|
|
26
|
+
$a-laptop-min-width: 768px;
|
|
27
|
+
$a-laptop-max-width: 1023.98px;
|
|
28
|
+
$a-desktop-min-width: 1024px;
|
|
29
|
+
$a-desktop-max-width: 1366.98px;
|
|
30
|
+
$a-large-min-width: 1367px;
|
|
31
|
+
$a-large-max-width: 1919.98px;
|
|
32
|
+
$a-extra-min-width: 1920px;
|
package/scss/AngelsMain.scss
DELETED
package/scss/_AngelsTheme.scss
DELETED