novo-elements 13.4.0 → 13.5.0
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/elements/form/Form.scss +16 -4
- package/elements/tip-well/TipWell.scss +22 -3
- package/fesm2022/novo-elements-elements-form.mjs +44 -48
- package/fesm2022/novo-elements-elements-form.mjs.map +1 -1
- package/fesm2022/novo-elements-elements-tip-well.mjs +2 -2
- package/fesm2022/novo-elements-elements-tip-well.mjs.map +1 -1
- package/package.json +2 -2
package/elements/form/Form.scss
CHANGED
|
@@ -831,6 +831,7 @@ $bh2026-not-borderless: '';
|
|
|
831
831
|
// ViewEncapsulation.None: use plain selectors (not :host-context which is Shadow DOM only)
|
|
832
832
|
:root[data-theme='bh2026'] {
|
|
833
833
|
label.novo-control-label {
|
|
834
|
+
&.novo-control-empty,
|
|
834
835
|
&.novo-control-filled,
|
|
835
836
|
&.novo-control-focused,
|
|
836
837
|
&.novo-control-always-active {
|
|
@@ -840,6 +841,12 @@ $bh2026-not-borderless: '';
|
|
|
840
841
|
text-transform: var(--typography-input-label-sm-text-transform);
|
|
841
842
|
color: var(--color-text-body) !important;
|
|
842
843
|
}
|
|
844
|
+
&.novo-control-empty {
|
|
845
|
+
transform: translateY(-100%) !important;
|
|
846
|
+
height: 1.5em !important;
|
|
847
|
+
top: 0 !important;
|
|
848
|
+
bottom: auto !important;
|
|
849
|
+
}
|
|
843
850
|
}
|
|
844
851
|
.novo-form-control-label {
|
|
845
852
|
font-weight: var(--typography-input-label-md-font-weight) !important;
|
|
@@ -926,7 +933,8 @@ $bh2026-not-borderless: '';
|
|
|
926
933
|
|
|
927
934
|
// Error: move negative border to container
|
|
928
935
|
div.novo-control-input#{$bh2026-not-borderless}:has(input.ng-touched.ng-invalid:not(.ng-pristine)),
|
|
929
|
-
div.novo-control-input#{$bh2026-not-borderless}:has(textarea.ng-touched.ng-invalid:not(.ng-pristine):not(.ng-valid))
|
|
936
|
+
div.novo-control-input#{$bh2026-not-borderless}:has(textarea.ng-touched.ng-invalid:not(.ng-pristine):not(.ng-valid)),
|
|
937
|
+
div.novo-control-input#{$bh2026-not-borderless}.control-invalid-touched {
|
|
930
938
|
border-width: var(--field-border-width-negative);
|
|
931
939
|
border-color: var(--field-color-border-negative);
|
|
932
940
|
&:hover {
|
|
@@ -1044,7 +1052,6 @@ $bh2026-not-borderless: '';
|
|
|
1044
1052
|
padding-top: 0;
|
|
1045
1053
|
padding-left: 0;
|
|
1046
1054
|
padding-right: 0;
|
|
1047
|
-
margin-top: var(--spacing-margin);
|
|
1048
1055
|
margin-bottom: 0;
|
|
1049
1056
|
|
|
1050
1057
|
&:not(:has(> novo-fieldset-header)) {
|
|
@@ -1060,8 +1067,9 @@ $bh2026-not-borderless: '';
|
|
|
1060
1067
|
novo-dynamic-form {
|
|
1061
1068
|
max-width: 720px;
|
|
1062
1069
|
width: 100%;
|
|
1063
|
-
margin-left:
|
|
1064
|
-
margin-right:
|
|
1070
|
+
margin-left: var(--spacing-gap-xlg);
|
|
1071
|
+
margin-right: 0;
|
|
1072
|
+
margin-top: var(--spacing-margin);
|
|
1065
1073
|
}
|
|
1066
1074
|
|
|
1067
1075
|
.novo-form-container form {
|
|
@@ -1072,6 +1080,10 @@ $bh2026-not-borderless: '';
|
|
|
1072
1080
|
novo-fieldset {
|
|
1073
1081
|
margin-top: 0;
|
|
1074
1082
|
}
|
|
1083
|
+
|
|
1084
|
+
novo-fieldset + novo-fieldset:has(> .novo-fieldset-container.card-section) {
|
|
1085
|
+
margin-top: var(--spacing-gutter);
|
|
1086
|
+
}
|
|
1075
1087
|
}
|
|
1076
1088
|
|
|
1077
1089
|
.novo-form-row.hidden {
|
|
@@ -29,9 +29,6 @@
|
|
|
29
29
|
white-space: pre-line;
|
|
30
30
|
}
|
|
31
31
|
}
|
|
32
|
-
:root[data-theme='bh2026'] & {
|
|
33
|
-
background-color: var(--background-muted);
|
|
34
|
-
}
|
|
35
32
|
}
|
|
36
33
|
|
|
37
34
|
// Icon variant styling
|
|
@@ -65,3 +62,25 @@
|
|
|
65
62
|
}
|
|
66
63
|
}
|
|
67
64
|
}
|
|
65
|
+
|
|
66
|
+
// bh2026: bordered card, 4px radius, body text; subtle variant gets muted background
|
|
67
|
+
:host-context([data-theme='bh2026']) {
|
|
68
|
+
> div {
|
|
69
|
+
border-radius: 4px;
|
|
70
|
+
border: 1px solid var(--color-border-default);
|
|
71
|
+
color: var(--color-text-body);
|
|
72
|
+
overflow: clip;
|
|
73
|
+
|
|
74
|
+
> div > p {
|
|
75
|
+
line-height: var(--typography-body-default-line-height, 20px);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
> button {
|
|
79
|
+
font-size: var(--typography-button-sm-font-size, 12px);
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
&[data-variant='subtle'] > div {
|
|
84
|
+
background-color: var(--background-muted);
|
|
85
|
+
}
|
|
86
|
+
}
|