claritas-web-framework 8.0.32 → 8.0.34

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 (7) hide show
  1. package/dist/index.css +1 -1
  2. package/package.json +1 -1
  3. package/sass/_variables.scss +10 -1
  4. package/sass/mixins/_group.scss +1 -0
  5. package/sass/modules/_card.scss +6 -2
  6. package/sass/modules/_tile.scss +42 -12
  7. package/sass/utilities/_display.scss +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "claritas-web-framework",
3
- "version": "8.0.32",
3
+ "version": "8.0.34",
4
4
  "description": "The CSS framework built for Claritas front end.",
5
5
  "main": "index.js",
6
6
  "scripts": {
package/sass/_variables.scss CHANGED
@@ -409,7 +409,16 @@ $close-large-width: calc($spacer * 2) !default;
409
409
  $close-border-radius: $border-radius-round !default;
410
410
 
411
411
  /* ---------------------------------- card ---------------------------------- */
412
- $card-header-footer-padding: calc($input-button-padding-y - 0.5px) $spacer !default;
412
+ $card-header-footer-padding-y: calc($input-button-padding-y - 0.5px) !default;
413
+ $card-header-footer-padding-x: $spacer !default;
414
+ $card-body-padding-y: $spacer !default;
415
+ $card-body-padding-x: $spacer !default;
416
+
417
+ /* ---------------------------------- tile ---------------------------------- */
418
+ $tile-header-footer-padding-y: calc($input-button-padding-y - 0.5px) !default;
419
+ $tile-header-footer-padding-x: $spacer !default;
420
+ $tile-body-padding-y: $spacer !default;
421
+ $tile-body-padding-x: $spacer !default;
413
422
 
414
423
  /* ----------------------------------- nav ---------------------------------- */
415
424
  $nav-item-padding-y: $input-button-padding-y !default;
package/sass/mixins/_group.scss CHANGED
@@ -18,6 +18,7 @@
18
18
  @mixin make-group-column($gap: calc(var(--spacer) * 0.5)) {
19
19
  @include make-group;
20
20
 
21
+ align-items: stretch;
21
22
  flex-direction: column;
22
23
  gap: $gap;
23
24
  }
package/sass/modules/_card.scss CHANGED
@@ -10,6 +10,10 @@
10
10
  --card-border-style: solid;
11
11
  --card-border-color: hsl(var(--border-color-h) var(--border-color-s) var(--border-color-l) / #{$border-opacity});
12
12
  --card-border-radius: var(--border-radius-medium);
13
+ --card-header-footer-padding-y: #{$card-header-footer-padding-y};
14
+ --card-header-footer-padding-x: #{$card-header-footer-padding-x};
15
+ --card-body-padding-y: #{$card-body-padding-y};
16
+ --card-body-padding-x: #{$card-body-padding-x};
13
17
 
14
18
  background-color: var(--card-background);
15
19
  border: var(--card-border-width) var(--card-border-style) var(--card-border-color);
@@ -44,7 +48,7 @@
44
48
  display: flex;
45
49
  flex-flow: row wrap;
46
50
  align-items: normal;
47
- padding: $card-header-footer-padding;
51
+ padding: var(--card-header-footer-padding-y) var(--card-header-footer-padding-x);
48
52
 
49
53
  & > * {
50
54
  margin-bottom: 0;
@@ -63,7 +67,7 @@
63
67
  & .card--body {
64
68
  flex: 1 1 auto;
65
69
  width: 100%;
66
- padding: var(--spacer);
70
+ padding: var(--card-body-padding-y) var(--card-body-padding-x);
67
71
 
68
72
  & + .card--body {
69
73
  border-top: var(--card-border-width) var(--card-border-style) var(--card-border-color);
package/sass/modules/_tile.scss CHANGED
@@ -4,14 +4,29 @@
4
4
  @use "./../mixins/group" as *;
5
5
 
6
6
  .tile {
7
- background-color: var(--white);
7
+ --tile-background: var(--white);
8
+ --tile-hover-background: hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l) / 10%);
9
+ --tile-border-width: 1px;
10
+ --tile-border-left-width: 4px;
11
+ --tile-border-left-color: hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l) / 10%);
12
+ --tile-border-style: solid;
13
+ --tile-border-color: hsl(var(--border-color-h) var(--border-color-s) var(--border-color-l) / #{$border-opacity});
14
+ --tile-border-radius: 0;
15
+ --tile-header-footer-padding-y: #{$tile-header-footer-padding-y};
16
+ --tile-header-footer-padding-x: #{$tile-header-footer-padding-x};
17
+ --tile-body-padding-y: #{$tile-body-padding-y};
18
+ --tile-body-padding-x: #{$tile-body-padding-x};
19
+
20
+ background-color: var(--tile-background);
21
+ border: var(--tile-border-width) var(--tile-border-style) var(--tile-border-color);
22
+ border-left-width: var(--tile-border-left-width);
23
+ border-left-color: var(--border-left-color);
24
+ border-radius: var(--tile-border-radius);
8
25
  display: flex;
9
26
  flex-direction: column;
10
- border: 1px solid hsl(var(--border-color-h) var(--border-color-s) var(--border-color-l) / #{$border-opacity});
11
- border-left-width: 4px;
12
27
  min-width: 0;
13
28
  word-wrap: break-word;
14
- width: 100%;
29
+ flex: 1 1 auto;
15
30
  position: relative;
16
31
 
17
32
  @if $enable-margins {
@@ -20,11 +35,24 @@
20
35
  margin-bottom: 0;
21
36
  }
22
37
 
38
+ & > * {
39
+ &:first-child {
40
+ border-top-left-radius: calc(var(--tile-border-radius) - 1px);
41
+ border-top-right-radius: calc(var(--tile-border-radius) - 1px);
42
+ }
43
+
44
+ &:last-child {
45
+ border-bottom-left-radius: calc(var(--tile-border-radius) - 1px);
46
+ border-bottom-right-radius: calc(var(--tile-border-radius) - 1px);
47
+ }
48
+ }
49
+
23
50
  & .tile--header,
24
51
  & .tile--footer {
25
52
  display: flex;
26
53
  flex-flow: row wrap;
27
- padding: calc(var(--spacer) * 0.5) var(--spacer);
54
+ align-items: normal;
55
+ padding: var(--tile-header-footer-padding-y) var(--tile-header-footer-padding-x);
28
56
 
29
57
  & > * {
30
58
  margin-bottom: 0;
@@ -32,20 +60,22 @@
32
60
  }
33
61
 
34
62
  & .tile--header {
35
- flex: 0 1 auto;
36
- border-bottom: 1px solid hsl(var(--border-color-h) var(--border-color-s) var(--border-color-l) / #{$border-opacity});
63
+ border-bottom: var(--tile-border-width) var(--tile-border-style) var(--tile-border-color);
37
64
  }
38
65
 
39
66
  & .tile--footer {
40
67
  margin-top: auto;
41
- flex: 0 0 auto;
42
- border-top: 1px solid hsl(var(--border-color-h) var(--border-color-s) var(--border-color-l) / #{$border-opacity});
68
+ border-top: var(--tile-border-width) var(--tile-border-style) var(--tile-border-color);
43
69
  }
44
70
 
45
71
  & .tile--body {
46
- flex: 0 0 auto;
72
+ flex: 1 1 auto;
47
73
  width: 100%;
48
- padding: calc(var(--spacer) * 0.5) var(--spacer);
74
+ padding: var(--tile-body-padding-y) var(--tile-body-padding-x);
75
+
76
+ & + .tile--body {
77
+ border-top: var(--tile-border-width) var(--tile-border-style) var(--tile-border-color);
78
+ }
49
79
  }
50
80
 
51
81
  & .tile--image {
@@ -69,6 +99,6 @@
69
99
 
70
100
  @each $key, $value in $all-colors {
71
101
  .tile--#{$key} {
72
- border-left-color: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / 100%);
102
+ --border-left-color: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / 100%);
73
103
  }
74
104
  }
package/sass/utilities/_display.scss CHANGED
@@ -3,7 +3,7 @@
3
3
  @use "./../variables" as *;
4
4
  @use "./../mixins/breakpoints" as *;
5
5
 
6
- $displays: (initial, none, inline, inline-block, block, table-row, table-cell, flex, inline-flex) !default;
6
+ $displays: (initial, none, inline, inline-block, block, table-row, table-cell, flex, inline-flex, grid) !default;
7
7
 
8
8
  @each $breakpoint in map.keys($breakpoints) {
9
9
  @include media-breakpoint-up($breakpoint) {