Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

🐛 fix(search, input, select): color token & cancel button [DS-3535, DS-3561] #740

Merged
merged 1 commit into from
Nov 6, 2023
Merged

🐛 fix(search, input, select): color token & cancel button [DS-3535, DS-3561] #740

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/component/input/input-base/style/_scheme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@

@mixin _input-scheme($legacy: false) {
#{ns(input)} {
@include color.text(label grey, (legacy:$legacy));
@include color.text(default grey, (legacy:$legacy));
@include color.background(contrast grey, (legacy:$legacy));
@include color.box-shadow(plain grey, (legacy:$legacy), bottom-2-in);

Expand All @@ -30,7 +30,7 @@
@if not $legacy {
@supports selector(::-webkit-calendar-picker-indicator) {
&[type=date] {
@include color.data-uri-svg(text title grey, (legacy: $legacy), $input-calendar-line);
@include color.data-uri-svg(text action-high grey, (legacy: $legacy), $input-calendar-line);

@include disabled.selector((legacy: $legacy), (text: true, box-shadow: bottom-2-in)) {
@include color.data-uri-svg(text disabled grey, (legacy: $legacy), $input-calendar-line);
Expand Down
2 changes: 2 additions & 0 deletions src/component/search/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,3 +5,5 @@

@import '../../core/index';
@import '../button/index';
@import 'style/setting';

13 changes: 7 additions & 6 deletions src/component/search/style/_module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,15 +17,16 @@
border-radius: spacing.space(1v) 0 0;
@include max-height(10v);

/* TODO: intégrer la croix en background pour effacer la search bar
&::-webkit-search-cancel-button {
-webkit-appearance: none;
}
*/

&::placeholder {
font-style: italic;
}

&::-webkit-search-cancel-button {
-webkit-appearance: none;
@include size(4v, 4v);
background-repeat: no-repeat;
background-size: spacing.space(4v) spacing.space(4v);
}
}

@include nest-btn(md, only, search-line) {
Expand Down
10 changes: 4 additions & 6 deletions src/component/search/style/_scheme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,19 +10,17 @@
#{ns(input)} {
@include color.box-shadow(action-high blue-france, (legacy:$legacy), bottom-2-in);

/**
* Modificateur pour le champ validés
*/
&--valid {
@include color.box-shadow(plain success, (legacy:$legacy), bottom-2-in);
}

/**
* Modificateur pour le champ présentant des erreurs
*/
&--error {
@include color.box-shadow(plain error, (legacy:$legacy), bottom-2-in);
}

&::-webkit-search-cancel-button {
@include color.data-uri-svg(text label grey, (legacy: $legacy), $input-search-cancel);
}
}
}
}
6 changes: 6 additions & 0 deletions src/component/search/style/_setting.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
////
/// Input Setting
/// @group input
////

$input-search-cancel: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="$COLOR" d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-11.414L9.172 7.757 7.757 9.172 10.586 12l-2.829 2.828 1.415 1.415L12 13.414l2.828 2.829 1.415-1.415L13.414 12l2.829-2.828-1.415-1.415L12 10.586z"/></svg>';
4 changes: 2 additions & 2 deletions src/component/select/style/_scheme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,11 @@

@mixin _select-scheme($legacy: false) {
#{ns(select)} {
@include color.text(title grey, (legacy:$legacy));
@include color.text(default grey, (legacy:$legacy));
@include color.background(contrast grey, (legacy:$legacy));
@include color.box-shadow(plain grey, (legacy:$legacy), bottom-2-in);

@include color.data-uri-svg(text title grey, (legacy: $legacy), $select-arrow-down-svg);
@include color.data-uri-svg(text label grey, (legacy: $legacy), $select-arrow-down-svg);

#{ns(fieldset--valid)} &,
&-group--valid & {
Expand Down