@flusys/ng-layout 1.1.1-beta → 1.2.0-rc.1

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.
Files changed (20) hide show
  1. package/README.md +51 -607
  2. package/assets/layout/_core.scss +19 -0
  3. package/assets/layout/_footer.scss +18 -1
  4. package/assets/layout/_forms.scss +12 -32
  5. package/assets/layout/_menu.scss +5 -5
  6. package/assets/layout/_responsive.scss +18 -0
  7. package/assets/layout/_rtl.scss +482 -0
  8. package/assets/layout/_topbar.scss +177 -124
  9. package/assets/layout/_topbar_nav.scss +345 -0
  10. package/assets/layout/_typography.scss +25 -30
  11. package/assets/layout/_utils.scss +12 -16
  12. package/assets/layout/layout.scss +3 -1
  13. package/assets/layout/variables/_common.scss +17 -17
  14. package/assets/layout/variables/_dark.scss +3 -3
  15. package/assets/layout/variables/_light.scss +3 -3
  16. package/assets/style.scss +3 -3
  17. package/fesm2022/flusys-ng-layout.mjs +1784 -1344
  18. package/fesm2022/flusys-ng-layout.mjs.map +1 -1
  19. package/package.json +10 -11
  20. package/types/flusys-ng-layout.d.ts +229 -256
package/assets/layout/_typography.scss CHANGED
@@ -4,65 +4,60 @@ h3,
4
4
  h4,
5
5
  h5,
6
6
  h6 {
7
- margin: 1.5rem 0 1rem 0;
8
- font-family: inherit;
9
- font-weight: 700;
10
- line-height: 1.5;
11
- color: var(--text-color);
7
+ font-family: inherit;
8
+ font-weight: 700;
9
+ line-height: 1.5;
10
+ color: var(--text-color);
12
11
 
13
- &:first-child {
14
- margin-top: 0;
15
- }
12
+ &:first-child {
13
+ margin-top: 0;
14
+ }
16
15
  }
17
16
 
18
17
  h1 {
19
- font-size: 2.5rem;
18
+ font-size: 2.5rem;
20
19
  }
21
20
 
22
21
  h2 {
23
- font-size: 2rem;
22
+ font-size: 2rem;
24
23
  }
25
24
 
26
25
  h3 {
27
- font-size: 1.75rem;
26
+ font-size: 1.75rem;
28
27
  }
29
28
 
30
29
  h4 {
31
- font-size: 1.5rem;
30
+ font-size: 1.5rem;
32
31
  }
33
32
 
34
33
  h5 {
35
- font-size: 1.25rem;
34
+ font-size: 1.25rem;
36
35
  }
37
36
 
38
37
  h6 {
39
- font-size: 1rem;
38
+ font-size: 1rem;
40
39
  }
41
40
 
42
41
  mark {
43
- background: #fff8e1;
44
- padding: 0.25rem 0.4rem;
45
- border-radius: var(--content-border-radius);
46
- font-family: monospace;
42
+ background: #fff8e1;
43
+ padding: 0.25rem 0.4rem;
44
+ border-radius: var(--content-border-radius);
45
+ font-family: monospace;
47
46
  }
48
47
 
49
48
  blockquote {
50
- margin: 1rem 0;
51
- padding: 0 2rem;
52
- border-left: 4px solid #90a4ae;
49
+ margin: 1rem 0;
50
+ padding: 0 2rem;
51
+ border-left: 4px solid #90a4ae;
53
52
  }
54
53
 
55
54
  hr {
56
- border-top: solid var(--surface-border);
57
- border-width: 1px 0 0 0;
58
- margin: 1rem 0;
55
+ border-top: solid var(--surface-border);
56
+ border-width: 1px 0 0 0;
57
+ margin: 1rem 0;
59
58
  }
60
59
 
61
60
  p {
62
- margin: 0 0 1rem 0;
63
- line-height: 1.5;
64
-
65
- &:last-child {
66
- margin-bottom: 0;
67
- }
61
+ margin: 0 0 1rem 0;
62
+ line-height: 1.5;
68
63
  }
package/assets/layout/_utils.scss CHANGED
@@ -1,25 +1,21 @@
1
1
  /* Utils */
2
2
  .clearfix:after {
3
- content: ' ';
4
- display: block;
5
- clear: both;
3
+ content: " ";
4
+ display: block;
5
+ clear: both;
6
6
  }
7
7
 
8
8
  .card {
9
- background: var(--surface-card);
10
- padding: 2rem;
11
- margin-bottom: 2rem;
12
- border-radius: var(--content-border-radius);
13
-
14
- &:last-child {
15
- margin-bottom: 0;
16
- }
9
+ background: var(--surface-card);
10
+ padding: 2rem;
11
+ margin-bottom: 2rem;
12
+ border-radius: var(--content-border-radius);
17
13
  }
18
14
 
19
15
  .p-toast {
20
- &.p-toast-top-right,
21
- &.p-toast-top-left,
22
- &.p-toast-top-center {
23
- top: 100px;
24
- }
16
+ &.p-toast-top-right,
17
+ &.p-toast-top-left,
18
+ &.p-toast-top-center {
19
+ top: 100px;
20
+ }
25
21
  }
package/assets/layout/layout.scss CHANGED
@@ -5,10 +5,12 @@
5
5
  @use './_preloading';
6
6
  @use './_core';
7
7
  @use './_main';
8
- @use './_topbar';
8
+ @use "./topbar_nav";
9
+ @use "./topbar";
9
10
  @use './_menu';
10
11
  @use './_footer';
11
12
  @use './_forms';
12
13
  @use './_responsive';
13
14
  @use './_utils';
14
15
  @use './_typography';
16
+ @use './_rtl';
package/assets/layout/variables/_common.scss CHANGED
@@ -1,20 +1,20 @@
1
1
  :root {
2
- --primary-color: var(--p-primary-color);
3
- --primary-contrast-color: var(--p-primary-contrast-color);
4
- --text-color: var(--p-text-color);
5
- --text-color-secondary: var(--p-text-muted-color);
6
- --surface-border: var(--p-content-border-color);
7
- --surface-card: var(--p-content-background);
8
- --surface-hover: var(--p-content-hover-background);
9
- --surface-overlay: var(--p-overlay-popover-background);
10
- --transition-duration: var(--p-transition-duration);
11
- --maskbg: var(--p-mask-background);
12
- --content-border-radius: var(--p-content-border-radius);
2
+ --primary-color: var(--f-primary-color);
3
+ --primary-contrast-color: var(--f-primary-contrast-color);
4
+ --text-color: var(--f-text-color);
5
+ --text-color-secondary: var(--f-text-muted-color);
6
+ --surface-border: var(--f-content-border-color);
7
+ --surface-card: var(--f-content-background);
8
+ --surface-hover: var(--f-content-hover-background);
9
+ --surface-overlay: var(--f-overlay-popover-background);
10
+ --transition-duration: var(--f-transition-duration);
11
+ --maskbg: var(--f-mask-background);
12
+ --content-border-radius: var(--f-content-border-radius);
13
13
  --layout-section-transition-duration: 0.2s;
14
- --element-transition-duration: var(--p-transition-duration);
15
- --focus-ring-width: var(--p-focus-ring-width);
16
- --focus-ring-style: var(--p-focus-ring-style);
17
- --focus-ring-color: var(--p-focus-ring-color);
18
- --focus-ring-offset: var(--p-focus-ring-offset);
19
- --focus-ring-shadow: var(--p-focus-ring-shadow);
14
+ --element-transition-duration: var(--f-transition-duration);
15
+ --focus-ring-width: var(--f-focus-ring-width);
16
+ --focus-ring-style: var(--f-focus-ring-style);
17
+ --focus-ring-color: var(--f-focus-ring-color);
18
+ --focus-ring-offset: var(--f-focus-ring-offset);
19
+ --focus-ring-shadow: var(--f-focus-ring-shadow);
20
20
  }
package/assets/layout/variables/_dark.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  :root[class*='app-dark'] {
2
- --surface-ground: var(--p-surface-950);
3
- --code-background: var(--p-surface-800);
4
- --code-color: var(--p-surface-100);
2
+ --surface-ground: var(--f-surface-950);
3
+ --code-background: var(--f-surface-800);
4
+ --code-color: var(--f-surface-100);
5
5
  }
package/assets/layout/variables/_light.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  :root {
2
- --surface-ground: var(--p-surface-100);
3
- --code-background: var(--p-surface-900);
4
- --code-color: var(--p-surface-200);
2
+ --surface-ground: var(--f-surface-100);
3
+ --code-background: var(--f-surface-900);
4
+ --code-color: var(--f-surface-200);
5
5
  }
package/assets/style.scss CHANGED
@@ -3,8 +3,8 @@
3
3
 
4
4
  .edit-mode-element-css {
5
5
  opacity: 1 !important;
6
- color: var(--p-inputtext-color) !important;
7
- background: var(--p-inputtext-background) !important;
6
+ color: var(--f-form-field-color) !important;
7
+ background: var(--f-form-field-background) !important;
8
8
  }
9
9
 
10
10
  .edit-icon-color {
@@ -35,5 +35,5 @@ li {
35
35
  }
36
36
 
37
37
  .primary-border-color {
38
- border: 1px solid var(--p-primary-color) !important;
38
+ border: 1px solid var(--f-primary-color) !important;
39
39
  }