Commit db5bf658 authored by Oliver Bartsch's avatar Oliver Bartsch Committed by Benni Mack
Browse files

[BUGFIX] Fix items text color in EXT:viewpage module

The text color of EXT:viewpage module options has got
the necessary contrast again. Furthermore the duplicated
"arrow-down" indicator removed, and the dropdown menu
is adapted for bootstrap 5 markup to fix padding of
dropdown items. Also a proper focus and hover state
is added.

Resolves: #93151
Releases: master
Change-Id: I13feacac9d62a62d6d6de84556dcde0eef198913
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/67240


Tested-by: Benjamin Franzke's avatarBenjamin Franzke <bfr@qbus.de>
Tested-by: default avatarTYPO3com <noreply@typo3.com>
Tested-by: Benni Mack's avatarBenni Mack <benni@typo3.org>
Reviewed-by: Benjamin Franzke's avatarBenjamin Franzke <bfr@qbus.de>
Reviewed-by: Benni Mack's avatarBenni Mack <benni@typo3.org>
parent 48b2b052
......@@ -108,14 +108,26 @@ $viewpage-topbar-height: 40px;
}
.viewpage-topbar-preset {
button {
.dropdown-toggle {
color: $viewpage-item-color;
background-color: transparent;
border: none;
padding-left: 20px;
padding-right: 20px;
span {
vertical-align: middle;
@include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, 0);
&.show {
outline: 0;
}
&:not(.show):hover {
background-color: $dropdown-link-hover-bg;
outline: 0;
}
&:not(.show):not(:hover):focus {
outline: 0;
background: rgba(255, 255, 255, 0.05);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}
}
}
......@@ -128,6 +140,7 @@ $viewpage-topbar-height: 40px;
border: 0;
border-bottom: 1px solid rgba($primary, 0.5);
transition: all 0.5s ease-in-out;
color: $viewpage-item-color;
&:focus,
&:hover {
......
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -11,16 +11,14 @@
</div>
<div class="viewpage-topbar-preset">
<span class="dropdown">
<button class="dropdown-toggle" type="button" id="viewpage-topbar-preset-button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<button type="button" id="viewpage-topbar-preset-button" class="dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="t3js-viewpage-current-label">
{current.label}
</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="viewpage-topbar-preset-button">
<li role="separator" class="divider"></li>
<li>
<a href="#" class="t3js-preset-maximized t3js-change-preset" data-key="maximized" data-label="{f:translate(key: 'maximized')}" data-width data-height>
<a href="#" class="dropdown-item t3js-preset-maximized t3js-change-preset" data-key="maximized" data-label="{f:translate(key: 'maximized')}" data-width data-height>
<span class="viewpage-preset-item">
<span class="viewpage-preset-item-icon">{icons.fullscreen -> f:format.raw()}</span>
<span class="viewpage-preset-item-label">
......@@ -33,7 +31,7 @@
</a>
</li>
<li>
<a href="#" class="t3js-preset-custom t3js-change-preset" data-key="custom" data-label="{f:translate(key: 'custom')}" data-width="{custom.width}" data-height="{custom.height}">
<a href="#" class="dropdown-item t3js-preset-custom t3js-change-preset" data-key="custom" data-label="{f:translate(key: 'custom')}" data-width="{custom.width}" data-height="{custom.height}">
<span class="viewpage-preset-item">
<span class="viewpage-preset-item-icon">{icons.expand -> f:format.raw()}</span>
<span class="viewpage-preset-item-label t3js-preset-custom-label">
......@@ -48,10 +46,10 @@
<f:for each="{presetGroups}" as="presetGroup" iteration="presetGroupIteration">
<f:if condition="{presetGroup}">
<li role="separator" class="divider"></li>
<li><hr class="dropdown-divider"></li>
<f:for each="{presetGroup}" as="preset">
<li>
<a href="#" class="t3js-change-preset" data-key="{preset.key}" data-label="{preset.label}" data-width="{preset.width}" data-height="{preset.height}">
<a href="#" class="dropdown-item t3js-change-preset" data-key="{preset.key}" data-label="{preset.label}" data-width="{preset.width}" data-height="{preset.height}">
<span class="viewpage-preset-item">
<span class="viewpage-preset-item-icon">{icons.{preset.type} -> f:format.raw()}</span>
<span class="viewpage-preset-item-label">{preset.label}</span>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment