claritas-web-framework 6.0.0-alpha-21 → 6.0.0-alpha-24

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 (21) hide show
  1. package/dist/index.css +1 -1
  2. package/package.json +6 -6
  3. package/scss/_reboot.scss +1 -1
  4. package/scss/_variables.scss +2 -0
  5. package/scss/helpers/_link.scss +1 -1
  6. package/scss/mixins/_button.scss +1 -1
  7. package/scss/mixins/_caret.scss +2 -2
  8. package/scss/mixins/_close.scss +2 -2
  9. package/scss/modules/_card.scss +2 -2
  10. package/scss/modules/_details.scss +5 -5
  11. package/scss/modules/_dialog.scss +1 -1
  12. package/scss/modules/_list.scss +1 -1
  13. package/scss/modules/_loader.scss +1 -1
  14. package/scss/modules/_nav.scss +3 -2
  15. package/scss/modules/_tabs.scss +3 -3
  16. package/scss/modules/_tooltip.scss +8 -8
  17. package/scss/modules/form/_checkbox.scss +1 -1
  18. package/scss/modules/form/_progress.scss +2 -2
  19. package/scss/modules/form/_radio.scss +1 -1
  20. package/scss/modules/form/_range.scss +1 -1
  21. package/scss/modules/form/_text.scss +1 -1
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "claritas-web-framework",
3
- "version": "6.0.0-alpha-21",
4
- "updated": "23/08/2022",
3
+ "version": "6.0.0-alpha-24",
4
+ "updated": "01/09/2022",
5
5
  "description": "The CSS framework built for Claritas front end.",
6
6
  "main": "index.js",
7
7
  "scripts": {
@@ -20,7 +20,7 @@
20
20
  "@babel/eslint-plugin": "^7.18.10",
21
21
  "css-loader": "^6.7.1",
22
22
  "cssnano": "^5.1.13",
23
- "eslint": "^8.22.0",
23
+ "eslint": "^8.23.0",
24
24
  "eslint-config-prettier": "^8.5.0",
25
25
  "eslint-plugin-prettier": "^4.2.1",
26
26
  "find-unused-sass-variables": "^4.0.4",
@@ -28,16 +28,16 @@
28
28
  "mini-css-extract-plugin": "^2.6.1",
29
29
  "postcss": "^8.4.16",
30
30
  "postcss-advanced-variables": "^3.0.1",
31
- "postcss-import": "^14.1.0",
31
+ "postcss-import": "^15.0.0",
32
32
  "postcss-inline-svg": "^5.0.0",
33
33
  "postcss-loader": "^7.0.1",
34
34
  "postcss-preset-env": "^7.8.0",
35
35
  "postcss-scss": "^4.0.4",
36
36
  "prettier": "^2.7.1",
37
- "sass": "^1.54.5",
37
+ "sass": "^1.54.8",
38
38
  "sass-loader": "^13.0.2",
39
39
  "webpack": "^5.74.0",
40
40
  "webpack-cli": "^4.10.0",
41
- "webpack-dev-server": "^4.10.0"
41
+ "webpack-dev-server": "^4.10.1"
42
42
  }
43
43
  }
package/scss/_reboot.scss CHANGED
@@ -50,7 +50,7 @@ body {
50
50
  text-align: var(--body-text-align);
51
51
  background-color: var(--body-background); // 2
52
52
  -webkit-text-size-adjust: 100%; // 3
53
- -webkit-tap-highlight-color: rgba($black, 0); // 4
53
+ -webkit-tap-highlight-color: transparent; // 4
54
54
  }
55
55
  // scss-docs-end reboot-body-rules
56
56
 
package/scss/_variables.scss CHANGED
@@ -608,6 +608,7 @@ $button-border-radius-large: $input-button-border-radius-large !default;
608
608
  $button-border-radius-small: $input-button-border-radius-small !default;
609
609
 
610
610
  $button-background-color: $input-button-background-color !default;
611
+ $button-outline-background-color: $input-button-background-color !default;
611
612
 
612
613
  $button-padding-y: $input-button-padding-y !default;
613
614
  $button-padding-x: $input-button-padding-x !default;
@@ -644,6 +645,7 @@ $card-border-style: $border-style !default;
644
645
  $card-border-color: rgba($border-color-main, $border-opacity) !default;
645
646
  $card-border-radius: $border-radius-medium !default;
646
647
  $card-background-color: $white !default;
648
+ $card-header-footer-padding: calc(($spacer * 0.375) - 1px) $spacer !default;
647
649
 
648
650
  // Tag
649
651
  $tag-background: $light !default;
package/scss/helpers/_link.scss CHANGED
@@ -9,7 +9,7 @@
9
9
  z-index: 1;
10
10
  pointer-events: auto;
11
11
  content: "";
12
- background-color: rgba($black, 0);
12
+ background-color: transparent;
13
13
  }
14
14
 
15
15
  &::before {
package/scss/mixins/_button.scss CHANGED
@@ -73,7 +73,7 @@
73
73
  ) {
74
74
  color: $color;
75
75
  border-color: $color;
76
- background-color: transparent;
76
+ background-color: $button-outline-background-color;
77
77
 
78
78
  &:hover {
79
79
  color: $color-hover;
package/scss/mixins/_caret.scss CHANGED
@@ -7,8 +7,8 @@
7
7
  top: calc(50% - calc($spacer * 0.125));
8
8
  width: 0;
9
9
  height: 0;
10
- border-left: calc($spacer * 0.25) solid rgba($black, 0);
11
- border-right: calc($spacer * 0.25) solid rgba($black, 0);
10
+ border-left: calc($spacer * 0.25) solid transparent;
11
+ border-right: calc($spacer * 0.25) solid transparent;
12
12
  pointer-events: none;
13
13
  }
14
14
  }
package/scss/mixins/_close.scss CHANGED
@@ -3,7 +3,7 @@
3
3
 
4
4
  padding: calc($spacer * 0.575);
5
5
  border-radius: $border-radius-round;
6
- border-color: rgba($black, 0);
6
+ border-color: transparent;
7
7
  position: relative;
8
8
  vertical-align: text-bottom;
9
9
  background-color: rgba($black, 0.2);
@@ -11,7 +11,7 @@
11
11
  &.active,
12
12
  &:active,
13
13
  &:hover {
14
- border-color: rgba($black, 0);
14
+ border-color: transparent;
15
15
  box-shadow: none;
16
16
  }
17
17
 
package/scss/modules/_card.scss CHANGED
@@ -7,7 +7,7 @@
7
7
  flex-direction: row;
8
8
  flex-wrap: wrap;
9
9
  align-items: normal;
10
- padding: calc($spacer * 0.5) $spacer;
10
+ padding: $card-header-footer-padding;
11
11
 
12
12
  & > * {
13
13
  margin-bottom: 0;
@@ -52,7 +52,7 @@
52
52
 
53
53
  details.card {
54
54
  & .card--header {
55
- border-bottom-color: rgba($black, 0);
55
+ border-bottom-color: transparent;
56
56
 
57
57
  &:hover {
58
58
  background-color: rgba($black, 0.05);
package/scss/modules/_details.scss CHANGED
@@ -25,15 +25,15 @@ details {
25
25
  top: calc(50% - 0.125em);
26
26
  width: 0;
27
27
  height: 0;
28
- border-left: 0.25em solid rgba($black, 0);
29
- border-right: 0.25em solid rgba($black, 0);
28
+ border-left: 0.25em solid transparent;
29
+ border-right: 0.25em solid transparent;
30
30
  border-top: 0.25em solid $primary;
31
31
  border-bottom: 0 none;
32
32
  pointer-events: none;
33
33
  }
34
34
 
35
35
  &::marker {
36
- color: rgba($black, 0);
36
+ color: transparent;
37
37
  display: none;
38
38
  }
39
39
 
@@ -55,8 +55,8 @@ details {
55
55
 
56
56
  & summary {
57
57
  &::before {
58
- border-left: 0.25em solid rgba($black, 0);
59
- border-right: 0.25em solid rgba($black, 0);
58
+ border-left: 0.25em solid transparent;
59
+ border-right: 0.25em solid transparent;
60
60
  border-bottom: 0.25em solid $primary;
61
61
  border-top: 0 none;
62
62
  }
package/scss/modules/_dialog.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  .dialog {
2
2
  padding: $spacer;
3
- background-color: rgba($black, 0);
3
+ background-color: transparent;
4
4
  border: 0 none;
5
5
  max-width: 100%;
6
6
  max-height: 100%;
package/scss/modules/_list.scss CHANGED
@@ -38,7 +38,7 @@ dl {
38
38
 
39
39
  & > li {
40
40
  border: 1px solid rgba($border-color-main, $border-opacity);
41
- border-bottom-color: rgba($black, 0);
41
+ border-bottom-color: transparent;
42
42
  padding: calc(($spacer * 0.625) - 1px) $spacer;
43
43
  position: relative;
44
44
 
package/scss/modules/_loader.scss CHANGED
@@ -15,7 +15,7 @@
15
15
  border: 2px solid $body-color;
16
16
  border-radius: $border-radius-round;
17
17
  animation: ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
18
- border-color: $body-color rgba($black, 0) rgba($black, 0) rgba($black, 0);
18
+ border-color: $body-color transparent transparent transparent;
19
19
 
20
20
  &:nth-child(1) {
21
21
  animation-delay: -0.45s;
package/scss/modules/_nav.scss CHANGED
@@ -59,14 +59,15 @@
59
59
  & > li > a,
60
60
  & > li > button {
61
61
  display: block;
62
+ border: 1px solid transparent;
62
63
  border-radius: 0;
63
64
  text-align: left;
64
- padding: calc($spacer * 0.5) calc($spacer * 0.75);
65
+ padding: $button-padding-y $button-padding-x;
65
66
  cursor: pointer;
66
67
  color: $body-color;
67
68
  white-space: nowrap;
68
69
  position: relative;
69
- background-color: rgba($black, 0);
70
+ background-color: transparent;
70
71
 
71
72
  &:disabled {
72
73
  color: rgba($body-color, 0.5);
package/scss/modules/_tabs.scss CHANGED
@@ -18,7 +18,7 @@
18
18
 
19
19
  & > * {
20
20
  border: 1px solid rgba($border-color-main, $border-opacity);
21
- border-bottom-color: rgba($black, 0);
21
+ border-bottom-color: transparent;
22
22
  border-radius: $border-radius-medium $border-radius-medium 0 0;
23
23
  margin-bottom: -1px;
24
24
 
@@ -30,7 +30,7 @@
30
30
  &.active {
31
31
  background-color: $white;
32
32
  border-color: rgba($black, 0.17);
33
- border-bottom-color: rgba($black, 0);
33
+ border-bottom-color: transparent;
34
34
  }
35
35
  }
36
36
  }
@@ -39,7 +39,7 @@
39
39
  @include make-card();
40
40
 
41
41
  border-radius: 0 0 $card-border-radius $card-border-radius;
42
- border-top-color: rgba($black, 0);
42
+ border-top-color: transparent;
43
43
  display: none !important;
44
44
  padding: $spacer;
45
45
 
package/scss/modules/_tooltip.scss CHANGED
@@ -21,9 +21,9 @@
21
21
  &::before {
22
22
  content: "";
23
23
  border-top: 6px solid rgba($black, 0.75);
24
- border-right: 6px solid rgba($black, 0);
24
+ border-right: 6px solid transparent;
25
25
  border-bottom: 0 none;
26
- border-left: 6px solid rgba($black, 0);
26
+ border-left: 6px solid transparent;
27
27
  top: -6px;
28
28
  right: auto;
29
29
  bottom: auto;
@@ -53,9 +53,9 @@
53
53
 
54
54
  &[data-placement="left"] {
55
55
  &::before {
56
- border-top: 6px solid rgba($black, 0);
56
+ border-top: 6px solid transparent;
57
57
  border-right: 0 none;
58
- border-bottom: 6px solid rgba($black, 0);
58
+ border-bottom: 6px solid transparent;
59
59
  border-left: 6px solid rgba($black, 0.75);
60
60
  top: 50%;
61
61
  right: auto;
@@ -75,9 +75,9 @@
75
75
 
76
76
  &[data-placement="right"] {
77
77
  &::before {
78
- border-top: 6px solid rgba($black, 0);
78
+ border-top: 6px solid transparent;
79
79
  border-right: 6px solid rgba($black, 0.75);
80
- border-bottom: 6px solid rgba($black, 0);
80
+ border-bottom: 6px solid transparent;
81
81
  border-left: 0 none;
82
82
  top: 50%;
83
83
  right: -6px;
@@ -98,9 +98,9 @@
98
98
  &[data-placement="bottom"] {
99
99
  &::before {
100
100
  border-top: 0 none;
101
- border-right: 6px solid rgba($black, 0);
101
+ border-right: 6px solid transparent;
102
102
  border-bottom: 6px solid rgba($black, 0.75);
103
- border-left: 6px solid rgba($black, 0);
103
+ border-left: 6px solid transparent;
104
104
  top: auto;
105
105
  right: auto;
106
106
  bottom: -6px;
package/scss/modules/form/_checkbox.scss CHANGED
@@ -59,7 +59,7 @@ input[type="checkbox"] {
59
59
  width: 0;
60
60
  left: 0.25em;
61
61
  right: auto;
62
- border: 0.5em solid rgba($black, 0);
62
+ border: 0.5em solid transparent;
63
63
  border-radius: $border-radius-round;
64
64
  background: $input-border-color;
65
65
  transition: transform 0.2s;
package/scss/modules/form/_progress.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  progress {
2
- background-color: rgba($black, 0);
2
+ background-color: transparent;
3
3
  appearance: none;
4
4
  border-radius: $border-radius-round;
5
5
  height: $spacer;
@@ -44,7 +44,7 @@ progress {
44
44
  &.input--#{$key} {
45
45
  color: shade-color($value, 75%);
46
46
  border-color: $gray-3;
47
- background-color: rgba($black, 0);
47
+ background-color: transparent;
48
48
 
49
49
  &::-webkit-progress-bar {
50
50
  background-color: rgba($value, 0.07);
package/scss/modules/form/_radio.scss CHANGED
@@ -28,7 +28,7 @@ input[type="radio"] {
28
28
 
29
29
  &:checked {
30
30
  &::before {
31
- border: 5px solid rgba($black, 0);
31
+ border: 5px solid transparent;
32
32
  border-radius: $border-radius-round;
33
33
  background: $primary;
34
34
  }
package/scss/modules/form/_range.scss CHANGED
@@ -29,7 +29,7 @@
29
29
  input[type="range"] {
30
30
  appearance: none;
31
31
  margin: calc($spacer * 0.5) 0;
32
- border-color: rgba($black, 0);
32
+ border-color: transparent;
33
33
  box-shadow: none;
34
34
  padding-left: 0;
35
35
  padding-right: 0;
package/scss/modules/form/_text.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  .input--text {
2
- border-color: rgba($black, 0);
2
+ border-color: transparent;
3
3
  box-shadow: none;
4
4
  border-radius: 0;
5
5
  padding-left: 0;