Skip to content

Commit 68fc744

Browse files
artembelikartembelik
authored
fix(form-field,experimental): selectors nesting (#DS-3787) (#802)
1 parent 5cdee07 commit 68fc744

4 files changed

Lines changed: 76 additions & 79 deletions

File tree

‎packages/components-experimental/form-field/_form-field-theme.scss‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -72,12 +72,12 @@
7272
.kbq-hint___EXPERIMENTAL {
7373
color: var(--kbq-form-field-hint-text);
7474
}
75-
}
7675

77-
.kbq-form-field__prefix,
78-
.kbq-form-field__suffix {
79-
.kbq-icon.kbq-empty {
80-
color: var(--kbq-icon-contrast-fade);
76+
.kbq-form-field__prefix,
77+
.kbq-form-field__suffix {
78+
.kbq-icon.kbq-empty {
79+
color: var(--kbq-icon-contrast-fade);
80+
}
8181
}
8282
}
8383
}

‎packages/components/form-field/_form-field-theme.scss‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -82,28 +82,28 @@
8282
-webkit-text-fill-color: var(--kbq-form-field-states-disabled-text);
8383
}
8484
}
85-
}
8685

87-
.kbq-form-field__prefix,
88-
.kbq-form-field__suffix {
89-
.kbq-icon.kbq-empty {
90-
color: var(--kbq-icon-contrast-fade);
86+
.kbq-form-field__prefix,
87+
.kbq-form-field__suffix {
88+
.kbq-icon.kbq-empty {
89+
color: var(--kbq-icon-contrast-fade);
90+
}
9191
}
92-
}
9392

94-
.kbq-form-field__hint {
95-
& > .kbq-hint:not(.kbq-password-hint, .kbq-contrast-fade, .kbq-success, .kbq-warning, .kbq-error) {
96-
color: var(--kbq-form-field-hint-text);
93+
.kbq-form-field__hint {
94+
& > .kbq-hint:not(.kbq-password-hint, .kbq-contrast-fade, .kbq-success, .kbq-warning, .kbq-error) {
95+
color: var(--kbq-form-field-hint-text);
96+
}
9797
}
9898
}
9999
}
100100

101101
@mixin kbq-form-field-typography() {
102102
.kbq-form-field {
103103
@include kbq-typography-level-to-styles-css-variables(typography, text-normal);
104-
}
105104

106-
.kbq-form-field__hint > .kbq-hint:not(.kbq-password-hint) .kbq-hint__text {
107-
@include kbq-typography-level-to-styles-css-variables(typography, text-compact);
105+
.kbq-form-field__hint > .kbq-hint:not(.kbq-password-hint) .kbq-hint__text {
106+
@include kbq-typography-level-to-styles-css-variables(typography, text-compact);
107+
}
108108
}
109109
}

‎packages/components/form-field/form-field.scss‎

Lines changed: 58 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,11 @@
1313

1414
.kbq-form-field__container {
1515
box-sizing: border-box;
16+
position: relative;
17+
border-width: var(--kbq-form-field-size-border-width);
18+
border-style: solid;
19+
border-color: transparent;
20+
border-radius: var(--kbq-form-field-size-border-radius);
1621
}
1722

1823
.kbq-form-field:not(.kbq-form-field-type-textarea) {
@@ -61,82 +66,74 @@
6166
& + .kbq-password-hint {
6267
margin-top: var(--kbq-size-m);
6368
}
64-
}
65-
66-
.kbq-form-field__container {
67-
position: relative;
68-
border-width: var(--kbq-form-field-size-border-width);
69-
border-style: solid;
70-
border-color: transparent;
71-
border-radius: var(--kbq-form-field-size-border-radius);
72-
}
7369

74-
.kbq-form-field__prefix,
75-
.kbq-form-field__suffix {
76-
position: absolute;
77-
top: 0;
78-
bottom: 0;
70+
.kbq-form-field__prefix,
71+
.kbq-form-field__suffix {
72+
position: absolute;
73+
top: 0;
74+
bottom: 0;
7975

80-
display: flex;
81-
flex-direction: row;
82-
justify-content: center;
83-
align-items: center;
84-
}
85-
86-
.kbq-form-field__prefix {
87-
left: 0;
88-
padding-left: var(--kbq-size-m);
89-
padding-right: var(--kbq-size-s);
90-
}
76+
display: flex;
77+
flex-direction: row;
78+
justify-content: center;
79+
align-items: center;
80+
}
9181

92-
.kbq-form-field__suffix {
93-
right: 0;
94-
padding-right: var(--kbq-size-m);
95-
padding-left: var(--kbq-size-s);
96-
}
82+
.kbq-form-field__prefix {
83+
left: 0;
84+
padding-left: var(--kbq-size-m);
85+
padding-right: var(--kbq-size-s);
86+
}
9787

98-
.kbq-form-field__cleaner,
99-
.kbq-password-toggle,
100-
.kbq-stepper {
101-
position: absolute;
88+
.kbq-form-field__suffix {
89+
right: 0;
90+
padding-right: var(--kbq-size-m);
91+
padding-left: var(--kbq-size-s);
92+
}
10293

103-
top: 0;
104-
bottom: 0;
105-
right: 0;
106-
}
94+
.kbq-form-field__cleaner,
95+
.kbq-password-toggle,
96+
.kbq-stepper {
97+
position: absolute;
10798

108-
.kbq-stepper {
109-
display: flex;
110-
flex-direction: column;
111-
justify-content: center;
112-
align-items: center;
99+
top: 0;
100+
bottom: 0;
101+
right: 0;
102+
}
113103

114-
width: var(--kbq-form-field-size-icon-button-size);
104+
.kbq-stepper {
105+
display: flex;
106+
flex-direction: column;
107+
justify-content: center;
108+
align-items: center;
115109

116-
.kbq-stepper-step-up,
117-
.kbq-stepper-step-down {
118-
cursor: pointer;
119110
width: var(--kbq-form-field-size-icon-button-size);
120-
text-align: center;
121-
}
122111

123-
.kbq-stepper-step-up {
124-
transform: scaleY(-1);
112+
.kbq-stepper-step-up,
113+
.kbq-stepper-step-down {
114+
cursor: pointer;
115+
width: var(--kbq-form-field-size-icon-button-size);
116+
text-align: center;
117+
}
118+
119+
.kbq-stepper-step-up {
120+
transform: scaleY(-1);
121+
}
125122
}
126-
}
127123

128-
.kbq-form-field__hint {
129-
display: flex;
130-
flex-direction: column;
131-
margin-top: var(--kbq-form-field-hint-size-margin-top);
124+
.kbq-form-field__hint {
125+
display: flex;
126+
flex-direction: column;
127+
margin-top: var(--kbq-form-field-hint-size-margin-top);
132128

133-
& .kbq-password-hint:first-child {
134-
margin-top: var(--kbq-size-s);
129+
& .kbq-password-hint:first-child {
130+
margin-top: var(--kbq-size-s);
131+
}
135132
}
136-
}
137133

138-
.kbq-password-hint {
139-
margin-top: var(--kbq-form-field-hint-size-gap);
134+
.kbq-password-hint {
135+
margin-top: var(--kbq-form-field-hint-size-gap);
136+
}
140137
}
141138

142139
@include kbq-form-field-theme();

‎packages/docs-examples/components/form-field/form-field-password-overview/form-field-password-overview-example.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import { KbqInputModule } from '@koobiq/components/input';
1515
],
1616
template: `
1717
<kbq-form-field>
18-
<input [formControl]="formControl" [maxLength]="20" placeholder="Password" kbqInputPassword />
18+
<input [formControl]="formControl" placeholder="Password" kbqInputPassword />
1919
2020
<kbq-password-toggle />
2121

0 commit comments

Comments
 (0)