Use Codex styles for buttons in language overlay (attempt 2)

* Replace all instances of mw-ui markup with Codex markup
* Use codex-search-styles
* Where codex-search-styles is not installed (e.g. 1.39)
register an alias which points to @wikimedia/codex as that is
available.

Bug: T340255
Bug: T340257
Change-Id: I4f3ddfb68ea6c033ee7a49729187f4ddbc8abe5c
This commit is contained in:
Jdlrobson
2023-12-08 22:03:21 +00:00
committed by Abijeet
parent 4456b68b5c
commit 6f9ffac1c3
14 changed files with 89 additions and 50 deletions

View File

@@ -2,16 +2,21 @@
@import '../../lib/codex-design-tokens/theme-wikimedia-ui-legacy.less';
@import 'mediawiki.mixins';
.uls-display-settings-tab-switcher {
text-align: center;
}
.uls-button-group {
display: inline-block;
position: relative;
padding: 0;
// The 1px are needed to handle overflow in .cdx-button-group in 1.39
padding: 1px 0 0 1px;
left: -20px;
z-index: 1;
}
.uls-display-settings-tab-switcher {
text-align: center;
/** cdx-button-group adds a z-index of 0; increase specificity to override that */
.uls-button-group {
z-index: 1;
}
}
.uls-sub-panel {

View File

@@ -96,8 +96,8 @@
}
}
.uls-input-settings-inputmethods-list .mw-ui-radio {
display: block;
.uls-input-settings .cdx-radio {
position: relative;
}
.uls-ime-notification-bubble .link {

View File

@@ -36,8 +36,9 @@
&.uls-language-settings-button {
background: transparent url( ../images/cog.svg ) no-repeat center;
margin-left: auto;
min-width: unset;
border: 0;
min-height: 20px;
min-width: 20px;
}
}
}

View File

@@ -130,14 +130,20 @@
margin-left: 15px;
}
// This can be removed when 1.39 support is dropped.
.uls-input-settings-inputmethods-list .cdx-radio__label,
.checkbox.cdx-checkbox__label {
padding-left: ~'calc(1.25em + 8px)';
}
.uls-ui-languages p,
.checkbox {
color: @color-subtle;
font-size: 10pt;
}
/* mediawiki.ui does not have a pressed state style. */
#languagesettings-panels .mw-ui-pressed {
/* @todo: Amend to use Codex when 1.39 support is no longer needed. */
#languagesettings-panels .uls-cdx-button-pressed {
background-color: @background-color-progressive--active;
color: @color-inverted;
border-color: @border-color-progressive--active;