mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-12-11 23:46:22 +00:00
68239ae344
Changes: - mw-ui-button to cdx-button - mw-ui-quiet to cdx-button--weight-quiet - mw-ui-icon-element to cdx-button--icon-only - mw-ui-icon to vector-icon - mw-ui-icon-flush-right/left to vector-button-flush-right/left - Removes $isSmallIcon param in Hooks.php 85 Visual Changes - ~36 changes from minor pixel changes from the new button classes in the main menu, language button - 22 from standardizing the padding of the TOC in page title - ~10 changes from addition of .cdx-button to the TOC toggle buttons PERFORMANCE: This will result in an overall increase of 2.7kb of render blocking CSS, 1kb will be reclaimed when I6c1ed1523df8cc9e2f2ca09506f12a595b8b013d is merged. Co-author: Bernard Wang <bwang@wikimedia.org> Bug: T336526 Change-Id: Ibd558238a41a0d3edb981e441638f9564f43d226
83 lines
2.7 KiB
Plaintext
83 lines
2.7 KiB
Plaintext
@import '../../common/variables.less';
|
|
@import 'mediawiki.mixins.less';
|
|
@import 'mediawiki.skin.variables.less';
|
|
|
|
.cdx-button:not( .cdx-button--icon-only ) .vector-icon {
|
|
// Add spacing between icon and text
|
|
margin-right: @spacing-35;
|
|
}
|
|
|
|
.cdx-button {
|
|
// Needed to horizontaly center icon buttons (floating TOC button, watchstar button)
|
|
// Can be seen on small viewports due to the fact that we arent using `.cdx-button--size-large`
|
|
justify-content: center;
|
|
}
|
|
|
|
.cdx-button.cdx-button--icon-only {
|
|
// Increase padding on small viewports
|
|
// FIXME: Replace with Codex solution i.e. `.cdx-button--size-large`
|
|
@media ( max-width: @max-width-tablet ) {
|
|
@min-size-interactive-touch: 44px;
|
|
min-width: @min-size-interactive-touch;
|
|
min-height: @min-size-interactive-touch;
|
|
}
|
|
|
|
// Hide text in icon only buttons
|
|
span + span {
|
|
.mixin-screen-reader-text();
|
|
}
|
|
}
|
|
|
|
.vector-button-flush-left {
|
|
@media ( min-width: @min-width-desktop ) {
|
|
.cdx-mixin-button-layout-flush( 'start', true );
|
|
}
|
|
|
|
@media ( max-width: @max-width-tablet ) {
|
|
.cdx-mixin-button-layout-flush( 'start', true, 'large' );
|
|
}
|
|
}
|
|
|
|
.vector-button-flush-right {
|
|
@media ( min-width: @min-width-desktop ) {
|
|
.cdx-mixin-button-layout-flush( 'end', true );
|
|
}
|
|
|
|
@media ( max-width: @max-width-tablet ) {
|
|
.cdx-mixin-button-layout-flush( 'end', true, 'large' );
|
|
}
|
|
}
|
|
|
|
// Handle button styles in checkbox hack, copied from Codex
|
|
// FIXME: Remove these styles when Codex supports the checkbox hack in T333394
|
|
input:hover + .vector-menu-heading.cdx-button:not( .cdx-button--action-progressive ) {
|
|
background-color: @background-color-button-quiet--hover;
|
|
}
|
|
|
|
input:active + .vector-menu-heading.cdx-button:not( .cdx-button--action-progressive ) {
|
|
background-color: @background-color-button-quiet--active;
|
|
color: @color-emphasized;
|
|
border-color: @border-color-interactive;
|
|
}
|
|
|
|
input:focus:not( :active ) + .vector-menu-heading.cdx-button:not( .cdx-button--action-progressive ) {
|
|
border-color: @border-color-progressive--focus;
|
|
box-shadow: @box-shadow-inset-small @box-shadow-color-progressive--focus;
|
|
}
|
|
|
|
input:hover + .vector-menu-heading.cdx-button.cdx-button--action-progressive {
|
|
background-color: @background-color-progressive-subtle;
|
|
color: @color-progressive--hover;
|
|
}
|
|
|
|
input:active + .vector-menu-heading.cdx-button.cdx-button--action-progressive {
|
|
background-color: @background-color-progressive--active;
|
|
color: @color-inverted;
|
|
border-color: @border-color-progressive--active;
|
|
}
|
|
|
|
input:focus:not( :active ) + .vector-menu-heading.cdx-button.cdx-button--action-progressive {
|
|
border-color: @border-color-progressive--focus;
|
|
box-shadow: @box-shadow-inset-small @box-shadow-color-progressive--focus @box-shadow-inset-medium @box-shadow-color-inverted;
|
|
}
|