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

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.
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-22",
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
 
@@ -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 {
@@ -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
  }
@@ -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
 
@@ -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);
@@ -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
  }
@@ -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%;
@@ -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
 
@@ -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;
@@ -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);
@@ -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
 
@@ -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;
@@ -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;
@@ -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);
@@ -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
  }
@@ -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;
@@ -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;