@bravura/ui 2.5.3 → 2.6.0

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 (5) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/package.json +1 -1
  3. package/theme/_bui-card.scss +65 -0
  4. package/theme/_ui-theme.scss +4 -0
  5. package/theme/scrollbar.scss +32 -30
package/CHANGELOG.md CHANGED
@@ -1,5 +1,15 @@
1
1
  # Change history
2
2
 
3
+ ## 2.6.0 (2022-10-13)
4
+
5
+ * Pull request #4: feat(card): add card styles from the bravura design kit ([5b51eeb](https://scm.bravurasolutions.net/projects/DIGI/repos/ui-components/commits/5b51eeb)), closes [#4](https://scm.bravurasolutions.net/projects/DIGI/repos/ui-components/issues/4)
6
+ * Pull request #5: fix(card): fix card styles ([517a9e9](https://scm.bravurasolutions.net/projects/DIGI/repos/ui-components/commits/517a9e9))
7
+ * docs(card): add more stories for card ([4fbf448](https://scm.bravurasolutions.net/projects/DIGI/repos/ui-components/commits/4fbf448))
8
+ * docs(card): improve stories ([3f338e6](https://scm.bravurasolutions.net/projects/DIGI/repos/ui-components/commits/3f338e6))
9
+ * fix(card): fix card styles ([58095a5](https://scm.bravurasolutions.net/projects/DIGI/repos/ui-components/commits/58095a5))
10
+ * feat(card): add card styles from the bravura design kit ([3678573](https://scm.bravurasolutions.net/projects/DIGI/repos/ui-components/commits/3678573))
11
+ * feat(card): add card styles from the bravura design kit ([281cdb9](https://scm.bravurasolutions.net/projects/DIGI/repos/ui-components/commits/281cdb9))
12
+
3
13
  ## <small>2.5.3 (2022-09-26)</small>
4
14
 
5
15
  * fix(clip-note): fix panel closing animation ([b55addd](https://scm.bravurasolutions.net/projects/DIGI/repos/ui-components/commits/b55addd))
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@bravura/ui",
3
3
  "description": "Bravura UI Components for Angular applications",
4
- "version": "2.5.3",
4
+ "version": "2.6.0",
5
5
  "keywords": [
6
6
  "Angular",
7
7
  "Angular Material",
package/theme/_bui-card.scss ADDED
@@ -0,0 +1,65 @@
1
+ @use 'sass:map';
2
+
3
+ @mixin bui-card($color-config) {
4
+ $bui-card-header-text-color: var(--bui-card-header-text-color, #19315b);
5
+ $bui-card-header-background-color: var(--bui-card-header-background-color, #fafafa);
6
+
7
+ @if map.get($color-config, 'is-dark') {
8
+ $bui-card-header-text-color: var(--bui-card-header-text-color-dark-theme, white);
9
+ $bui-card-header-background-color: var(--bui-card-header-background-color-dark-theme, inherit);
10
+ }
11
+
12
+ .bui-card-flat.mat-card,
13
+ .bui-card-shaded.mat-card {
14
+ border-radius: 4px;
15
+ display: flex;
16
+ flex-direction: column;
17
+
18
+ .mat-card-header {
19
+ margin: -16px -16px 0 -16px;
20
+ padding: 16px;
21
+
22
+ .mat-card-title {
23
+ font-size: 16px;
24
+ color: $bui-card-header-text-color;
25
+ margin-bottom: 0;
26
+ }
27
+
28
+ .mat-card-title + .mat-card-subtitle {
29
+ margin-top: 0;
30
+ margin-bottom: 0;
31
+ }
32
+
33
+ .mat-card-header-text {
34
+ margin: 0;
35
+ }
36
+ }
37
+
38
+ .mat-card-content {
39
+ flex: 1;
40
+ }
41
+
42
+ .mat-card-avatar + .mat-card-header-text {
43
+ margin: 0 16px;
44
+ }
45
+
46
+ .mat-card-header + .mat-card-content {
47
+ padding-top: 16px;
48
+ }
49
+ }
50
+
51
+ .bui-card-flat.mat-card {
52
+ box-shadow: none;
53
+ border: 1px solid #e0e0e0;
54
+
55
+ .mat-card-header {
56
+ border-bottom: 1px solid #e0e0e0;
57
+ }
58
+ }
59
+
60
+ .bui-card-shaded.mat-card {
61
+ .mat-card-header {
62
+ background: $bui-card-header-background-color;
63
+ }
64
+ }
65
+ }
package/theme/_ui-theme.scss CHANGED
@@ -1,5 +1,7 @@
1
1
  @use 'sass:map';
2
2
  @use '@angular/material' as mat;
3
+ @use './scrollbar.scss' as scrollbar;
4
+ @use './bui-card' as card;
3
5
 
4
6
  $default-border-color-transition: border-color 100ms cubic-bezier(0.55, 0, 0.55, 0.2);
5
7
  $mat-foreground-extract: (
@@ -37,6 +39,7 @@ $mat-background-extract: (
37
39
 
38
40
  $color-config: mat.get-color-config($theme);
39
41
  @if $color-config != null {
42
+ @include card.bui-card($color-config);
40
43
  @each $p in (primary, accent, warn) {
41
44
  $primary-palette: map.get($color-config, $p);
42
45
  $c: mat.get-color-from-palette($primary-palette, text);
@@ -85,6 +88,7 @@ $mat-background-extract: (
85
88
 
86
89
  @mixin theme($theme, $border-color-transition: $default-border-color-transition) {
87
90
  @include apply-colors($theme, $border-color-transition);
91
+ @include scrollbar.bui-scrollbar;
88
92
 
89
93
  .mat-icon {
90
94
  &.fas,
package/theme/scrollbar.scss CHANGED
@@ -1,38 +1,40 @@
1
- $bui-scrollbar-width: var(--bui-scrollbar-width, 8px);
2
- $bui-scrollbar-background: var(--bui-scrollbar-background, rgba(128, 128, 128, 0.02));
3
- $bui-scrollbar-thumb-color: var(--bui-scrollbar-thumb-color, rgba(128, 128, 128, 0.4));
4
- $bui-scrollbar-thumb-hover: var(--bui-scrollbar-thumb-hover, rgba(128, 128, 128, 0.6));
5
- $bui-scrollbar-thumb-active: var(--bui-scrollbar-thumb-active, rgba(128, 128, 128, 0.8));
1
+ @mixin bui-scrollbar {
2
+ $bui-scrollbar-width: var(--bui-scrollbar-width, 8px);
3
+ $bui-scrollbar-background: var(--bui-scrollbar-background, rgba(128, 128, 128, 0.02));
4
+ $bui-scrollbar-thumb-color: var(--bui-scrollbar-thumb-color, rgba(128, 128, 128, 0.4));
5
+ $bui-scrollbar-thumb-hover: var(--bui-scrollbar-thumb-hover, rgba(128, 128, 128, 0.6));
6
+ $bui-scrollbar-thumb-active: var(--bui-scrollbar-thumb-active, rgba(128, 128, 128, 0.8));
6
7
 
7
- .bui-styled-scrollbar {
8
- scrollbar-width: thin;
8
+ .bui-styled-scrollbar {
9
+ scrollbar-width: thin;
9
10
 
10
- &::-webkit-scrollbar-track {
11
- -webkit-box-shadow: inset 0 0 6px rgba(128, 128, 128, 0.2);
12
- background-color: $bui-scrollbar-background;
13
- border-radius: $bui-scrollbar-width;
14
- }
15
-
16
- &::-webkit-scrollbar {
17
- width: $bui-scrollbar-width;
18
- background-color: $bui-scrollbar-background;
19
- }
11
+ &::-webkit-scrollbar-track {
12
+ -webkit-box-shadow: inset 0 0 6px rgba(128, 128, 128, 0.2);
13
+ background-color: $bui-scrollbar-background;
14
+ border-radius: $bui-scrollbar-width;
15
+ }
20
16
 
21
- &::-webkit-scrollbar-thumb {
22
- background-color: $bui-scrollbar-thumb-color;
23
- border-radius: $bui-scrollbar-width;
24
- &:hover {
25
- background-color: $bui-scrollbar-thumb-hover;
17
+ &::-webkit-scrollbar {
18
+ width: $bui-scrollbar-width;
19
+ background-color: $bui-scrollbar-background;
26
20
  }
27
- &:active {
28
- background-color: $bui-scrollbar-thumb-active;
21
+
22
+ &::-webkit-scrollbar-thumb {
23
+ background-color: $bui-scrollbar-thumb-color;
24
+ border-radius: $bui-scrollbar-width;
25
+ &:hover {
26
+ background-color: $bui-scrollbar-thumb-hover;
27
+ }
28
+ &:active {
29
+ background-color: $bui-scrollbar-thumb-active;
30
+ }
29
31
  }
30
- }
31
32
 
32
- &.ng-scrollbar {
33
- --scrollbar-hover-size: #{$bui-scrollbar-width};
34
- --scrollbar-thumb-color: #{$bui-scrollbar-thumb-color};
35
- --scrollbar-thumb-hover-color: #{$bui-scrollbar-thumb-hover};
36
- --scrollbar-border-radius: #{$bui-scrollbar-width};
33
+ &.ng-scrollbar {
34
+ --scrollbar-hover-size: #{$bui-scrollbar-width};
35
+ --scrollbar-thumb-color: #{$bui-scrollbar-thumb-color};
36
+ --scrollbar-thumb-hover-color: #{$bui-scrollbar-thumb-hover};
37
+ --scrollbar-border-radius: #{$bui-scrollbar-width};
38
+ }
37
39
  }
38
40
  }