claritas-web-framework 6.0.0-beta-15 → 6.0.0-beta-16

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 (10) hide show
  1. package/package.json +1 -1
  2. package/scss/_variables.scss +11 -0
  3. package/scss/modules/_details.scss +2 -2
  4. package/scss/modules/_tabs.scss +1 -1
  5. package/scss/modules/_tag.scss +1 -1
  6. package/scss/modules/form/_checkbox.scss +4 -4
  7. package/scss/modules/form/_progress.scss +2 -2
  8. package/scss/modules/form/_radio.scss +3 -3
  9. package/scss/modules/form/_range.scss +1 -1
  10. package/scss/modules/form/_toggle.scss +4 -4
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "claritas-web-framework",
3
- "version": "6.0.0-beta-15",
3
+ "version": "6.0.0-beta-16",
4
4
  "updated": "13/10/2022",
5
5
  "description": "The CSS framework built for Claritas front end.",
6
6
  "main": "index.js",
package/scss/_variables.scss CHANGED
@@ -571,6 +571,8 @@ $input-button-padding-x-small: calc($spacer * 0.5) !default;
571
571
  $input-button-focus-box-shadow: 0 0 0 calc($spacer * 0.25) $input-button-border-color !default;
572
572
  $input-button-disabled-opacity: 0.65 !default;
573
573
 
574
+ $input-button-detail-color: $primary !default;
575
+
574
576
  // Input
575
577
  $input-border-width: $input-button-border-width !default;
576
578
  $input-border-style: $input-button-border-style !default;
@@ -596,6 +598,8 @@ $input-focus-box-shadow: $input-button-focus-box-shadow !default;
596
598
 
597
599
  $input-size: calc(($font-size-base * $line-height-base + ($input-padding-y * 2)) + 2px) !default;
598
600
 
601
+ $input-detail-color: $input-button-detail-color !default;
602
+
599
603
  // Button
600
604
  $button-border-width: $input-button-border-width !default;
601
605
  $button-border-style: $input-button-border-style !default;
@@ -660,6 +664,7 @@ $card-body-padding: $spacer !default;
660
664
  // Tag
661
665
  $tag-background: $light !default;
662
666
  $tag-border-color: rgba($border-color-main, $border-opacity) !default;
667
+ $tag-border-radius: $border-radius-default default;
663
668
  $tag-color: $body-color !default;
664
669
  $tag-bg-scale: 0% !default;
665
670
  $tag-color-scale: 80% !default;
@@ -697,3 +702,9 @@ $breadcrumb-color: $medium !default;
697
702
  $breadcrumb-link-color: $medium !default;
698
703
  $breadcrumb-link-color-hover: shade-color($breadcrumb-link-color, $link-shade-percentage) !default;
699
704
  $breadcrumb-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 512'><path fill='#{$breadcrumb-color}' d='M89.45 87.5l143.1 152c4.375 4.625 6.562 10.56 6.562 16.5c0 5.937-2.188 11.87-6.562 16.5l-143.1 152C80.33 434.1 65.14 434.5 55.52 425.4c-9.688-9.125-10.03-24.38-.9375-33.94l128.4-135.5l-128.4-135.5C45.49 110.9 45.83 95.75 55.52 86.56C65.14 77.47 80.33 77.87 89.45 87.5z'/></svg>") !default;
705
+
706
+ // Details
707
+ $details-caret-color: $primary !default;
708
+
709
+ // Tabs
710
+ $tabs-active-color: $primary !default;
package/scss/modules/_details.scss CHANGED
@@ -27,7 +27,7 @@ details {
27
27
  height: 0;
28
28
  border-left: 0.25em solid transparent;
29
29
  border-right: 0.25em solid transparent;
30
- border-top: 0.25em solid $primary;
30
+ border-top: 0.25em solid $details-caret-color;
31
31
  border-bottom: 0 none;
32
32
  pointer-events: none;
33
33
  }
@@ -57,7 +57,7 @@ details {
57
57
  &::before {
58
58
  border-left: 0.25em solid transparent;
59
59
  border-right: 0.25em solid transparent;
60
- border-bottom: 0.25em solid $primary;
60
+ border-bottom: 0.25em solid $details-caret-color;
61
61
  border-top: 0 none;
62
62
  }
63
63
  }
package/scss/modules/_tabs.scss CHANGED
@@ -90,7 +90,7 @@
90
90
  bottom: 0;
91
91
  right: -1px;
92
92
  height: 2px;
93
- background-color: $primary;
93
+ background-color: $tabs-active-color;
94
94
  position: absolute;
95
95
  display: none;
96
96
  }
package/scss/modules/_tag.scss CHANGED
@@ -3,7 +3,7 @@
3
3
  color: $tag-color;
4
4
  background-color: $tag-background;
5
5
  padding: calc(($spacer * 0.25) - 1px) calc(($spacer * 0.5) - 1px);
6
- border-radius: $border-radius-default;
6
+ border-radius: $tag-border-radius;
7
7
  align-items: center;
8
8
  display: inline-flex;
9
9
  vertical-align: top;
package/scss/modules/form/_checkbox.scss CHANGED
@@ -26,8 +26,8 @@ input[type="checkbox"] {
26
26
  }
27
27
 
28
28
  &:checked {
29
- background-color: $primary;
30
- border-color: $primary;
29
+ background-color: $input-detail-color;
30
+ border-color: $input-detail-color;
31
31
 
32
32
  &::before {
33
33
  border-right: 2px solid $white;
@@ -40,8 +40,8 @@ input[type="checkbox"] {
40
40
  &:disabled,
41
41
  &.disabled,
42
42
  &[aria-disabled="true"] {
43
- background-color: rgba($primary, 0.4);
44
- border-color: rgba($primary, 0.8);
43
+ background-color: rgba($input-detail-color, 0.4);
44
+ border-color: rgba($input-detail-color, 0.8);
45
45
  }
46
46
  }
47
47
 
package/scss/modules/form/_progress.scss CHANGED
@@ -26,7 +26,7 @@ progress {
26
26
  }
27
27
 
28
28
  &::-webkit-progress-value {
29
- background-color: $primary;
29
+ background-color: $input-detail-color;
30
30
  border-radius: $border-radius-round;
31
31
  }
32
32
 
@@ -35,7 +35,7 @@ progress {
35
35
  }
36
36
 
37
37
  &::-moz-progress-value {
38
- background-color: $primary;
38
+ background-color: $input-detail-color;
39
39
  border-radius: $border-radius-round;
40
40
  }
41
41
 
package/scss/modules/form/_radio.scss CHANGED
@@ -30,7 +30,7 @@ input[type="radio"] {
30
30
  &::before {
31
31
  border: 8px solid $input-background-color;
32
32
  border-radius: $border-radius-round;
33
- background: $primary;
33
+ background: $input-detail-color;
34
34
 
35
35
  @include media-breakpoint-up("desktop") {
36
36
  border-width: 5px;
@@ -41,10 +41,10 @@ input[type="radio"] {
41
41
  &.disabled,
42
42
  &[aria-disabled="true"] {
43
43
  background-color: $white;
44
- border-color: rgba($primary, 0.4);
44
+ border-color: rgba($input-detail-color, 0.4);
45
45
 
46
46
  &::before {
47
- background: rgba($primary, 0.4);
47
+ background: rgba($input-detail-color, 0.4);
48
48
  }
49
49
  }
50
50
  }
package/scss/modules/form/_range.scss CHANGED
@@ -6,7 +6,7 @@
6
6
  cursor: pointer;
7
7
  }
8
8
 
9
- @mixin make-thumb($focus: false, $disabled: false, $color: $primary) {
9
+ @mixin make-thumb($focus: false, $disabled: false, $color: $input-detail-color) {
10
10
  margin-top: calc($spacer * -0.25);
11
11
  width: $spacer;
12
12
  height: $spacer;
package/scss/modules/form/_toggle.scss CHANGED
@@ -33,23 +33,23 @@ input[type="checkbox"] {
33
33
  }
34
34
 
35
35
  &:checked {
36
- background: $primary;
36
+ background: $input-detail-color;
37
37
 
38
38
  &::before {
39
39
  background: $white;
40
40
  left: 50%;
41
41
  right: 0;
42
- border-color: $primary;
42
+ border-color: $input-detail-color;
43
43
  }
44
44
 
45
45
  &:disabled,
46
46
  &.disabled,
47
47
  &[aria-disabled="true"] {
48
48
  background-color: $white;
49
- border-color: rgba($primary, 0.4);
49
+ border-color: rgba($input-detail-color, 0.4);
50
50
 
51
51
  &::before {
52
- background: rgba($primary, 0.4);
52
+ background: rgba($input-detail-color, 0.4);
53
53
  }
54
54
  }
55
55
  }