[MediaWiki-commits] [Gerrit] Rework styling of tool buttons on the NavbarHorizontal - change (mediawiki...chameleon)
Foxtrott has uploaded a new change for review.
https://gerrit.wikimedia.org/r/227875
Change subject: Rework styling of tool buttons on the NavbarHorizontal
..
Rework styling of tool buttons on the NavbarHorizontal
Change-Id: I4687048f2aa80c81d9a1e0dadb1e52faa0e2ad7f
---
M docs/release-notes.md
M resources/styles/Components/NavbarHorizontal.less
M src/Components/NavbarHorizontal.php
3 files changed, 46 insertions(+), 24 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/skins/chameleon
refs/changes/75/227875/1
diff --git a/docs/release-notes.md b/docs/release-notes.md
index f92f725..14f1e58 100644
--- a/docs/release-notes.md
+++ b/docs/release-notes.md
@@ -4,6 +4,8 @@
Released on (tbd)
+This release may break customized styles for the NavbarHorizontal component.
+
Changes:
* Restructured the Page Tools on Navbars: The 'Edit' action and the Page Tools'
menu button got icons and were offset from the rest of the menus.
@@ -12,6 +14,10 @@
* 'Edit' link links to the proper Semantic Forms action if the
[SF extension](https://www.mediawiki.org/wiki/Extension:Semantic_Forms) is
present and `$sfgRenameEditTabs` is set
+* Improve styleability of tool buttons in NavbarHorizontal (wrap the button
+ label in a span) and rework rework styling of the buttons
+* Add ChameleonNavbarHorizontalPersonalToolsLinkText hook
+* Add ChameleonNavbarHorizontalNewTalkLinkText hook
* New less style variables @toolbar-height, @toolbar-padding-vertical,
@toolbar-padding-horizontal
diff --git a/resources/styles/Components/NavbarHorizontal.less
b/resources/styles/Components/NavbarHorizontal.less
index ea1dede..42c3486 100644
--- a/resources/styles/Components/NavbarHorizontal.less
+++ b/resources/styles/Components/NavbarHorizontal.less
@@ -99,12 +99,13 @@
border-right: none;
li:first-child a {
- border-radius: 0 @navbar-border-radius 0 0;
+ border-top-right-radius: @navbar-border-radius;
}
li:last-child a {
- border-radius: 0 0 @navbar-border-radius 0;
+ border-bottom-right-radius:
@navbar-border-radius;
}
+
}
}
}
@@ -163,34 +164,38 @@
float: none;
height: @navbar-height/2;
+ min-width: 2 * @navbar-height/3;
text-align: center;
+
+ border-color: @navbar-default-border;
+ border-bottom: 1px solid @navbar-default-border;
:last-child {
border: none;
}
- span, a {
- line-height: @line-height-computed/2;
- }
-
-
-
a, a:hover, a:focus {
- height: @navbar-height/2;
- padding: @navbar-padding-vertical/2
@navbar-padding-vertical/2;
-
- border-color: @navbar-default-border;
- border-bottom: 1px solid @navbar-default-border;
+ height: 100%;
+ padding: 0;
overflow: hidden;
- img {
+* {
+ padding: @navbar-padding-vertical/2
@navbar-padding-vertical/2;
+ display: inline-block;
+ line-height: @line-height-computed/2;
+ }
+
+img {
top: 50%;
left: 50%;
position: absolute;
- margin-right: -@navbar-padding-vertical;
.translate(-50%; -50%);
+
+ padding: 0;
+ min-height: 101%;
+ min-width: 101%;
:hover, :focus {
opacity: .7;
@@ -199,13 +204,14 @@
}
:first-child:last-child {
- span, a {
- line-height: @line-height-computed;
- }
+
+ height: @navbar-height;
a, a:hover, a:focus {
- height: @navbar-height;
- padding:
[MediaWiki-commits] [Gerrit] Rework styling of tool buttons on the NavbarHorizontal - change (mediawiki...chameleon)
Foxtrott has submitted this change and it was merged.
Change subject: Rework styling of tool buttons on the NavbarHorizontal
..
Rework styling of tool buttons on the NavbarHorizontal
Change-Id: I4687048f2aa80c81d9a1e0dadb1e52faa0e2ad7f
---
M docs/release-notes.md
M resources/styles/Components/NavbarHorizontal.less
M src/Components/NavbarHorizontal.php
3 files changed, 46 insertions(+), 24 deletions(-)
Approvals:
Foxtrott: Verified; Looks good to me, approved
diff --git a/docs/release-notes.md b/docs/release-notes.md
index f92f725..06a5164 100644
--- a/docs/release-notes.md
+++ b/docs/release-notes.md
@@ -4,6 +4,8 @@
Released on (tbd)
+This release may break customized styles for the NavbarHorizontal component.
+
Changes:
* Restructured the Page Tools on Navbars: The 'Edit' action and the Page Tools'
menu button got icons and were offset from the rest of the menus.
@@ -12,6 +14,10 @@
* 'Edit' link links to the proper Semantic Forms action if the
[SF extension](https://www.mediawiki.org/wiki/Extension:Semantic_Forms) is
present and `$sfgRenameEditTabs` is set
+* Improve styleability of tool buttons in NavbarHorizontal (wrap the button
+ label in a span) and rework rework styling of the buttons
+* Add ChameleonNavbarHorizontalPersonalToolsLinkText hook
+* Add ChameleonNavbarHorizontalNewTalkLinkText hook
* New less style variables @toolbar-height, @toolbar-padding-vertical,
@toolbar-padding-horizontal
diff --git a/resources/styles/Components/NavbarHorizontal.less
b/resources/styles/Components/NavbarHorizontal.less
index ea1dede..42c3486 100644
--- a/resources/styles/Components/NavbarHorizontal.less
+++ b/resources/styles/Components/NavbarHorizontal.less
@@ -99,12 +99,13 @@
border-right: none;
li:first-child a {
- border-radius: 0 @navbar-border-radius 0 0;
+ border-top-right-radius: @navbar-border-radius;
}
li:last-child a {
- border-radius: 0 0 @navbar-border-radius 0;
+ border-bottom-right-radius:
@navbar-border-radius;
}
+
}
}
}
@@ -163,34 +164,38 @@
float: none;
height: @navbar-height/2;
+ min-width: 2 * @navbar-height/3;
text-align: center;
+
+ border-color: @navbar-default-border;
+ border-bottom: 1px solid @navbar-default-border;
:last-child {
border: none;
}
- span, a {
- line-height: @line-height-computed/2;
- }
-
-
-
a, a:hover, a:focus {
- height: @navbar-height/2;
- padding: @navbar-padding-vertical/2
@navbar-padding-vertical/2;
-
- border-color: @navbar-default-border;
- border-bottom: 1px solid @navbar-default-border;
+ height: 100%;
+ padding: 0;
overflow: hidden;
- img {
+* {
+ padding: @navbar-padding-vertical/2
@navbar-padding-vertical/2;
+ display: inline-block;
+ line-height: @line-height-computed/2;
+ }
+
+img {
top: 50%;
left: 50%;
position: absolute;
- margin-right: -@navbar-padding-vertical;
.translate(-50%; -50%);
+
+ padding: 0;
+ min-height: 101%;
+ min-width: 101%;
:hover, :focus {
opacity: .7;
@@ -199,13 +204,14 @@
}
:first-child:last-child {
- span, a {
- line-height: @line-height-computed;
- }
+
+ height: @navbar-height;
a, a:hover, a:focus {
- height: @navbar-height;
- padding: @navbar-padding-vertical
@navbar-padding-vertical/2;
+
