Remove unnecessary skins.minerva.base.styles

* truncated-text is only used in MainMenu, last modified bar,
 a few special pages
Making this a mixin and limiting it to mobile.startup skinStyles
and mobile.special.styles thus makes sense
* cloaked-element is only ever added by Skin.js in mobile.startup
* position-fixed is only ever added by Skin.js

Change-Id: Iaf7061e9dda87eb25c963f8a281175af08f358e5
This commit is contained in:
jdlrobson 2018-07-05 15:51:27 -07:00 committed by Jdlrobson
parent b70046f2a0
commit a3efca1582
7 changed files with 33 additions and 45 deletions

View File

@ -9,3 +9,10 @@
margin-top: 0.5em;
line-height: 1.4;
}
.truncated-text() {
white-space: nowrap;
overflow: hidden;
-webkit-text-overflow: ellipsis;
text-overflow: ellipsis;
}

View File

@ -2,32 +2,6 @@
@import '../../minerva.less/minerva.variables';
@import '../../minerva.less/minerva.mixins';
// Reusable components
//
// Styleguide 6.
// Cloaked element
//
// Use this for elements that are clickable but not visible
// Examples: A file input who's parent is styled with an icon
// A shield that covers the entire screen and is made more opaque
// under a different circumstance
//
// Markup:
// <div style="width:50px; height:50px; border:1px solid red;">
// <input type="file" class="cloaked-element">
// </div>
//
// Styleguide 6.1.
.cloaked-element {
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.view-border-box *,
.view-border-box {
.box-sizing( border-box );
@ -61,18 +35,6 @@ textarea {
display: inherit;
}
/* stylelint-enable no-descending-specificity */
.position-fixed {
// use !important to override more specific rules (e.g. in Overlay.less)
position: fixed !important;
}
.touch-events {
:focus {
outline: 0;
}
}
// currently used to hide talk button
.hidden {
display: none !important;

View File

@ -238,13 +238,6 @@ input.search {
}
}
.truncated-text {
white-space: nowrap;
overflow: hidden;
-webkit-text-overflow: ellipsis;
text-overflow: ellipsis;
}
// This is here rather than in mainmenu.less because we want to load these rules for non-js users too
// Transparent shield hidden by default
.transparent-shield,

View File

@ -1,4 +1,5 @@
@import '../../minerva.less/minerva.variables';
@import '../../minerva.less/minerva.mixins';
@import 'mediawiki.mixins.animation';
@animationDuration: 0.3s;
@ -15,6 +16,11 @@
}
}
// Used by last modified and Main Menu items
.truncated-text {
.truncated-text();
}
@-webkit-keyframes fadeInImage {
from {
opacity: 0;

View File

@ -108,6 +108,7 @@
"skinStyles/mobile.languages.structured/LanguageOverlay.less"
],
"mobile.startup": [
"skinStyles/mobile.startup/skin.less",
"skinStyles/mobile.startup/toast.less",
"skinStyles/mobile.startup/Overlay.less"
],

View File

@ -1,4 +1,5 @@
@import '../../minerva.less/minerva.variables';
@import '../../minerva.less/minerva.mixins';
// FIXME [mediawiki ui] These rules should not be needed in the mobile context
.mw-ui-button-group {
@ -48,6 +49,7 @@
// Used by MobileSpecialPageFeed.php in MobileFrontend
.truncated-text {
.truncated-text();
// FIXME: this works only in WebKit
&.multi-line {

View File

@ -0,0 +1,17 @@
.cloaked-element {
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.position-fixed {
// use !important to override more specific rules (e.g. in Overlay.less)
position: fixed !important;
}
.touch-events {
:focus {
outline: 0;
}
}