claritas-web-framework 8.4.0 → 8.5.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 (18) hide show
  1. package/dist/index.css +1 -1
  2. package/package.json +1 -1
  3. package/sass/helpers/_screenReader.scss +4 -0
  4. package/sass/modules/_button.scss +1 -1
  5. package/sass/modules/_card.scss +9 -9
  6. package/sass/modules/_details.scss +1 -1
  7. package/sass/modules/_dropdown.scss +1 -1
  8. package/sass/modules/_form.scss +11 -11
  9. package/sass/modules/_list.scss +1 -1
  10. package/sass/modules/_modal.scss +1 -1
  11. package/sass/modules/_nav.scss +9 -22
  12. package/sass/modules/_tabs.scss +4 -4
  13. package/sass/modules/_tile.scss +7 -7
  14. package/sass/modules/form/_checkbox.scss +1 -1
  15. package/sass/modules/form/_file.scss +6 -6
  16. package/sass/modules/form/_formFieldGroup.scss +3 -3
  17. package/sass/modules/form/_radio.scss +1 -1
  18. package/sass/modules/form/_toggle.scss +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "claritas-web-framework",
3
- "version": "8.4.0",
3
+ "version": "8.5.1",
4
4
  "description": "The CSS framework built for Claritas front end.",
5
5
  "main": "index.js",
6
6
  "scripts": {
package/sass/helpers/_screenReader.scss CHANGED
@@ -7,3 +7,7 @@
7
7
  .screen-reader--focusable {
8
8
  @include make-screen-reader(true);
9
9
  }
10
+
11
+ .sr {
12
+ @include make-screen-reader(true);
13
+ }
package/sass/modules/_button.scss CHANGED
@@ -13,7 +13,7 @@
13
13
  --button-hover-border-color: var(--border-color-hover-main);
14
14
  --button-focus-border-color: var(--border-color-hover-main);
15
15
  --button-active-border-color: var(--border-color-hover-main);
16
- --button-disabled-border-color: hsl(from var(--body-color) h s l / #{$color-disabled-alpha});
16
+ --button-disabled-border-color: hsl(from var(--border-color-main) h s l / #{$color-disabled-alpha});
17
17
  --button-background: var(--white);
18
18
  --button-hover-background: var(--white);
19
19
  --button-focus-background: var(--white);
package/sass/modules/_card.scss CHANGED
@@ -42,8 +42,8 @@
42
42
  }
43
43
  }
44
44
 
45
- & .card--header,
46
- & .card--footer {
45
+ & .card__header,
46
+ & .card__footer {
47
47
  display: flex;
48
48
  flex-flow: row wrap;
49
49
  align-items: normal;
@@ -54,26 +54,26 @@
54
54
  }
55
55
  }
56
56
 
57
- & .card--header {
57
+ & .card__header {
58
58
  border-bottom: var(--card-border-width) var(--card-border-style) var(--card-border-color);
59
59
  }
60
60
 
61
- & .card--footer {
61
+ & .card__footer {
62
62
  margin-top: auto;
63
63
  border-top: var(--card-border-width) var(--card-border-style) var(--card-border-color);
64
64
  }
65
65
 
66
- & .card--body {
66
+ & .card__body {
67
67
  flex: 1 1 auto;
68
68
  width: 100%;
69
69
  padding: var(--card-body-padding-y) var(--card-body-padding-x);
70
70
 
71
- & + .card--body {
71
+ & + .card__body {
72
72
  border-top: var(--card-border-width) var(--card-border-style) var(--card-border-color);
73
73
  }
74
74
  }
75
75
 
76
- & .card--image {
76
+ & .card__image {
77
77
  flex: 1 0 100%;
78
78
  overflow: hidden;
79
79
 
@@ -85,7 +85,7 @@
85
85
  }
86
86
 
87
87
  details.card {
88
- & .card--header {
88
+ & .card__header {
89
89
  border-bottom-color: transparent;
90
90
 
91
91
  &:hover {
@@ -94,7 +94,7 @@ details.card {
94
94
  }
95
95
 
96
96
  &[open] {
97
- & .card--header {
97
+ & .card__header {
98
98
  border-bottom-color: var(--card-border-color);
99
99
  }
100
100
  }
package/sass/modules/_details.scss CHANGED
@@ -30,7 +30,7 @@ details {
30
30
  display: none;
31
31
  }
32
32
 
33
- &.card--header {
33
+ &.card__header {
34
34
  padding-left: calc(var(--spacer) * 2) !important;
35
35
 
36
36
  &::before {
package/sass/modules/_dropdown.scss CHANGED
@@ -35,7 +35,7 @@
35
35
  min-width: calc(var(--spacer) * 10);
36
36
  flex-flow: column nowrap;
37
37
 
38
- & .nav--item {
38
+ & .nav__item {
39
39
  text-align: left;
40
40
  justify-content: flex-start;
41
41
  }
package/sass/modules/_form.scss CHANGED
@@ -189,13 +189,13 @@ textarea,
189
189
  output,
190
190
  select,
191
191
  progress,
192
- .form--span,
193
- .input--div,
194
- .input--editor {
192
+ .form__span,
193
+ .input__div,
194
+ .input__editor {
195
195
  @extend %input;
196
196
  }
197
197
 
198
- .form--label {
198
+ .form__label {
199
199
  display: $label-display;
200
200
  padding: $label-padding;
201
201
  margin: $label-margin;
@@ -206,7 +206,7 @@ progress,
206
206
  cursor: pointer;
207
207
  }
208
208
 
209
- .form--control {
209
+ .form__control {
210
210
  box-sizing: border-box;
211
211
  clear: both;
212
212
  position: relative;
@@ -216,29 +216,29 @@ progress,
216
216
  justify-content: flex-start;
217
217
  align-items: stretch;
218
218
 
219
- &.form--control-checkbox,
220
- &.form--control-radio,
221
- &.form--control-toggle {
219
+ &.checkbox,
220
+ &.radio,
221
+ &.toggle {
222
222
  display: flex;
223
223
 
224
224
  &:not(.stacked) {
225
225
  flex-direction: row;
226
226
  align-items: center;
227
227
 
228
- & .form--label {
228
+ & .form__label {
229
229
  padding: 0;
230
230
  }
231
231
  }
232
232
 
233
233
  &.stacked {
234
- & .form--label {
234
+ & .form__label {
235
235
  order: -1;
236
236
  }
237
237
  }
238
238
  }
239
239
  }
240
240
 
241
- .form--span {
241
+ .form__span {
242
242
  --input-background: color-mix(in oklab, var(--body-color), #fff 95%);
243
243
  --input-hover-background: color-mix(in oklab, var(--body-color), #fff 95%);
244
244
  --input-focus-background: color-mix(in oklab, var(--body-color), #fff 95%);
package/sass/modules/_list.scss CHANGED
@@ -59,7 +59,7 @@ dl {
59
59
  margin-bottom: 0;
60
60
  }
61
61
 
62
- & .list--item {
62
+ & .list__item {
63
63
  padding: calc(calc(var(--spacer) * 0.625) - 1px) var(--spacer);
64
64
  }
65
65
 
package/sass/modules/_modal.scss CHANGED
@@ -16,7 +16,7 @@
16
16
  backdrop-filter: blur($modal-background-blur);
17
17
  }
18
18
 
19
- & .modal--content {
19
+ & .modal__body {
20
20
  overflow-y: auto;
21
21
  padding: $grid-gutter;
22
22
  display: flex;
package/sass/modules/_nav.scss CHANGED
@@ -30,9 +30,9 @@
30
30
  }
31
31
  }
32
32
 
33
- & .nav--label,
34
- & .nav--title,
35
- & .nav--item {
33
+ & .nav__label,
34
+ & .nav__title,
35
+ & .nav__item {
36
36
  --nav-item-border-width: 1px;
37
37
  --nav-item-border-style: solid;
38
38
  --nav-item-border-color: transparent;
@@ -68,35 +68,22 @@
68
68
  justify-content: center;
69
69
  vertical-align: middle;
70
70
  flex-shrink: 0;
71
-
72
- // @each $key, $value in $all-colors {
73
- // & .color--#{$key} {
74
- // @include make-color($key);
75
-
76
- // --nav-item-color: var(--color);
77
- // --nav-item-hover-color: var(--color-hover);
78
- // --nav-item-focus-color: var(--color-hover);
79
- // --nav-item-active-color: var(--color-hover);
80
- // --nav-item-disabled-color: var(--color-disbaled);
81
- // --nav-label-hover-color: var(--color-hover);
82
- // }
83
- // }
84
71
  }
85
72
 
86
- & .nav--label {
73
+ & .nav__label {
87
74
  font-size: var(--font-size-small);
88
75
  font-weight: bolder;
89
76
  color: var(--nav-label-hover-color);
90
77
  }
91
78
 
92
- & .nav--title {
79
+ & .nav__title {
93
80
  font-family: $headings-font-family;
94
81
  font-style: $headings-font-style;
95
82
  font-weight: $headings-font-weight;
96
83
  color: $headings-color;
97
84
  }
98
85
 
99
- & .nav--item {
86
+ & .nav__item {
100
87
  text-decoration: none;
101
88
  cursor: pointer;
102
89
  user-select: none;
@@ -138,9 +125,9 @@
138
125
  flex-flow: column nowrap;
139
126
  align-items: stretch;
140
127
 
141
- & .nav--label,
142
- & .nav--title,
143
- & .nav--item {
128
+ & .nav__label,
129
+ & .nav__title,
130
+ & .nav__item {
144
131
  text-align: left;
145
132
  justify-content: flex-start;
146
133
  display: flex;
package/sass/modules/_tabs.scss CHANGED
@@ -23,7 +23,7 @@
23
23
  border-bottom: var(--tabs-border-width) var(--tabs-border-style) var(--tabs-border-color);
24
24
  }
25
25
 
26
- & .nav--item {
26
+ & .nav__item {
27
27
  --nav-item-border-color: var(--tabs-border-color);
28
28
  --nav-item-border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0;
29
29
  --nav-item-background: var(--tabs-background);
@@ -43,7 +43,7 @@
43
43
  }
44
44
  }
45
45
 
46
- & .tabs--content {
46
+ & .tabs__body {
47
47
  border-width: var(--tabs-border-width);
48
48
  border-style: var(--tabs-border-style);
49
49
  border-color: transparent var(--tabs-border-color) var(--tabs-border-color);
@@ -71,7 +71,7 @@
71
71
 
72
72
  &.card {
73
73
  & .nav--tabs {
74
- & .nav--item {
74
+ & .nav__item {
75
75
  --nav-item-border-radius: 0;
76
76
  --nav-item-active-background: color-mix(in oklab, var(--body-color), #fff 95%);
77
77
  --nav-item-border-color: transparent var(--tabs-border-color) transparent transparent;
@@ -84,7 +84,7 @@
84
84
  }
85
85
  }
86
86
 
87
- & .tabs--content {
87
+ & .tabs__body {
88
88
  border: 0 none;
89
89
  padding: var(--spacer);
90
90
  margin: 0;
package/sass/modules/_tile.scss CHANGED
@@ -46,8 +46,8 @@
46
46
  }
47
47
  }
48
48
 
49
- & .tile--header,
50
- & .tile--footer {
49
+ & .tile__header,
50
+ & .tile__footer {
51
51
  display: flex;
52
52
  flex-flow: row wrap;
53
53
  align-items: normal;
@@ -58,26 +58,26 @@
58
58
  }
59
59
  }
60
60
 
61
- & .tile--header {
61
+ & .tile__header {
62
62
  border-bottom: var(--tile-border-width) var(--tile-border-style) var(--tile-border-color);
63
63
  }
64
64
 
65
- & .tile--footer {
65
+ & .tile__footer {
66
66
  margin-top: auto;
67
67
  border-top: var(--tile-border-width) var(--tile-border-style) var(--tile-border-color);
68
68
  }
69
69
 
70
- & .tile--body {
70
+ & .tile__body {
71
71
  flex: 1 1 auto;
72
72
  width: 100%;
73
73
  padding: var(--tile-body-padding-y) var(--tile-body-padding-x);
74
74
 
75
- & + .tile--body {
75
+ & + .tile__body {
76
76
  border-top: var(--tile-border-width) var(--tile-border-style) var(--tile-border-color);
77
77
  }
78
78
  }
79
79
 
80
- & .tile--image {
80
+ & .tile__image {
81
81
  flex: 1 0 100%;
82
82
  overflow: hidden;
83
83
 
package/sass/modules/form/_checkbox.scss CHANGED
@@ -2,7 +2,7 @@
2
2
  @use "./../../variables" as *;
3
3
  @use "./../../mixins/breakpoints" as *;
4
4
 
5
- .form--control-checkbox {
5
+ .form__control.checkbox {
6
6
  & > * {
7
7
  &:not(:last-child) {
8
8
  margin-right: var(--spacer);
package/sass/modules/form/_file.scss CHANGED
@@ -2,7 +2,7 @@
2
2
  @use "./../../variables" as *;
3
3
  @use "./../../functions" as *;
4
4
 
5
- .form--control-fancyfile {
5
+ .form__control.fancyfile {
6
6
  display: flex;
7
7
  flex-direction: column;
8
8
 
@@ -32,14 +32,14 @@
32
32
  }
33
33
 
34
34
  &:empty {
35
- & ~ .form--label {
35
+ & ~ .form__label {
36
36
  border-bottom-right-radius: var(--border-radius-medium);
37
37
  border-bottom-left-radius: var(--border-radius-medium);
38
38
  }
39
39
  }
40
40
  }
41
41
 
42
- & ~ .form--label {
42
+ & ~ .form__label {
43
43
  order: 2;
44
44
  cursor: pointer;
45
45
  width: 100%;
@@ -73,7 +73,7 @@
73
73
  }
74
74
 
75
75
  &:hover {
76
- & ~ .form--label {
76
+ & ~ .form__label {
77
77
  border-color: var(--input-hover-border-color);
78
78
  background-color: var(--gray-2);
79
79
 
@@ -91,7 +91,7 @@
91
91
 
92
92
  @each $key, $value in $theme-colors {
93
93
  &.input--#{$key} {
94
- & ~ .form--label {
94
+ & ~ .form__label {
95
95
  border-color: $value;
96
96
  }
97
97
 
@@ -102,7 +102,7 @@
102
102
  }
103
103
 
104
104
  &:hover {
105
- & ~ .form--label {
105
+ & ~ .form__label {
106
106
  border-color: color.mix(black, $value, 25%);
107
107
  }
108
108
 
package/sass/modules/form/_formFieldGroup.scss CHANGED
@@ -5,7 +5,7 @@
5
5
  justify-content: flex-start;
6
6
  align-items: stretch;
7
7
 
8
- & .form--control {
8
+ & .form__control {
9
9
  display: flex;
10
10
  flex-direction: row;
11
11
 
@@ -19,8 +19,8 @@
19
19
  & output,
20
20
  & select,
21
21
  & progress,
22
- & .form--span,
23
- & .input--div {
22
+ & .form__span,
23
+ & .input__div {
24
24
  --input-border-radius: 0;
25
25
  --button-border-radius: 0;
26
26
  }
package/sass/modules/form/_radio.scss CHANGED
@@ -3,7 +3,7 @@
3
3
  @use "./../../variables" as *;
4
4
  @use "./../../mixins/breakpoints" as *;
5
5
 
6
- .form--control-radio {
6
+ .form__control.radio {
7
7
  & > * {
8
8
  &:not(:last-child) {
9
9
  margin-right: var(--spacer);
package/sass/modules/form/_toggle.scss CHANGED
@@ -2,7 +2,7 @@
2
2
  @use "./../../variables" as *;
3
3
  @use "./../../mixins/breakpoints" as *;
4
4
 
5
- .form--control-toggle {
5
+ .form__control.toggle {
6
6
  & > * {
7
7
  &:not(:last-child) {
8
8
  margin-right: var(--spacer);