diff --git a/CHANGELOG.md b/CHANGELOG.md index 34d82ce2..bf219226 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -80,6 +80,8 @@ - Favicon media assets update with new TeskaLabs logo. (INDIGO 230623, [!429](https://github.com/TeskaLabs/asab-webui/pull/429)) +- Add styles for primary dropdown-toggle (INDIGO Sprint 230623, [!428](https://github.com/TeskaLabs/asab-webui/pull/428)) + ### Bugfix - Bug fix for HelpComponent, not display a Helpcomoponent when the user changing the page (INDIGO Sprint 230317, [!401](https://github.com/TeskaLabs/asab-webui/pull/401)) diff --git a/src/styles/components/dropdown.scss b/src/styles/components/dropdown.scss index 4161adb7..cc35bf73 100644 --- a/src/styles/components/dropdown.scss +++ b/src/styles/components/dropdown.scss @@ -8,6 +8,7 @@ --text-dropdown-button: var(--text-color); --text-dropdown-button-color: var(--dark-black); --toggle-text-color: var(--off-white); + --reversed-text-dropdown-color: var(--white); --primary-outline-text: var(--dark-blue); --primary-outline-bg: var(--light-violet); --hover-bg: var(--white); @@ -21,10 +22,12 @@ --text-dropdown-color: var(--btn-txt); --text-dropdown-button-color: var(--light-dream-blue); --toggle-text-color: var(--night-blue); + --reversed-text-dropdown-color: var(--light-black); --primary-outline-text: var(--night-blue); --primary-outline-bg: var(--storm-blue); --hover-bg: var(--dream-blue); --disabled-dropdown-item: var(--feather-gray); + } $dropdown-toggle-bg: var(--bg); @@ -37,6 +40,7 @@ $primary-outline-text: var(--primary-outline-text); $primary-outline-bg: var(--primary-outline-bg); $hover-bg: var(--hover-bg); $disabled-dropdown-item: var(--disabled-dropdown-item); +$reversed-text-dropdown-color: var(--reversed-text-dropdown-color); .dropdown, .dropdown .btn { @@ -205,6 +209,14 @@ $disabled-dropdown-item: var(--disabled-dropdown-item); } } +// Primary style +.btn-primary.dropdown-toggle { + color: $reversed-text-dropdown-color; + & [class^="cil-"] { + color: $reversed-text-dropdown-color; + } +} + // Primary outline style .btn-outline-primary.dropdown-toggle { color: $primary-outline-text;