open.source/stylus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

use css borders for split button triangle

Browse Source
This commit is contained in:
tophf 2022-01-22 12:06:29 +03:00
parent ce9e74e2a0
commit b4b135826c
4 changed files with 18 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
edit/edit.css
View File

@ -267,7 +267,7 @@ input:invalid {
} }
#actions .buttons > * { #actions .buttons > * {
margin: 0 .2rem .5rem 0; margin: 0 .25rem .5rem 0;
} }
#options:not([open]) + #lint h2 { #options:not([open]) + #lint h2 {

20
global.css
View File

@ -313,13 +313,25 @@ body.resizing-v > * {
} }
.split-btn-pedal { .split-btn-pedal {
margin-left: -1px !important; margin-left: -1px !important;
padding-left: .2em !important; padding-left: .25em !important;
padding-right: .2em !important; padding-right: .25em !important;
min-width: 0 !important; min-width: 0 !important;
} }
.split-btn-pedal::after { .split-btn-pedal::after {
content: '\25BC'; /* down triangle */ --side: 4px;
font-size: 90%; content: '';
border: var(--side) solid transparent;
display: inline-block;
}
.split-btn-pedal:not(.up)::after {
border-top: calc(var(--side) * 1.3) solid currentColor;
vertical-align: bottom;
}
.split-btn-pedal.up::after {
border-bottom: calc(var(--side) * 1.3) solid currentColor;
vertical-align: top;
position: relative;
top: 1px;
} }
.split-btn-pedal.active { .split-btn-pedal.active {
box-shadow: inset 0 0 100px rgba(0, 0, 0, .2); box-shadow: inset 0 0 100px rgba(0, 0, 0, .2);

2
popup.html
View File

@ -222,7 +222,7 @@
<div class="split-btn"> <div class="split-btn">
<button id="popup-manage-button" i18n-text="openManage" <button id="popup-manage-button" i18n-text="openManage"
data-href="manage.html" i18n-title="popupManageTooltip"></button data-href="manage.html" i18n-title="popupManageTooltip"></button
><button class="split-btn-pedal" i18n-menu-site="popupManageSiteStyles"></button> ><button class="split-btn-pedal up" i18n-menu-site="popupManageSiteStyles"></button>
</div> </div>
<button id="popup-options-button" i18n-text="openOptions"></button> <button id="popup-options-button" i18n-text="openOptions"></button>
<button id="popup-wiki-button" <button id="popup-wiki-button"

3
popup/popup.css
View File

@ -686,9 +686,6 @@ body.blocked .actions > .main-controls {
flex: 1 1 auto; flex: 1 1 auto;
min-width: 2em; min-width: 2em;
} }
#popup-manage-button + .split-btn-pedal::after {
content: '\25B2'; /* up triangle */
}
#popup-manage-button ~ .split-btn-menu { #popup-manage-button ~ .split-btn-menu {
bottom: 0; bottom: 0;
transform: translateY(-20px); /* global button style: 13(font) * 1.2(line) + 4(pad) + 2(border) */ transform: translateY(-20px); /* global button style: 13(font) * 1.2(line) + 4(pad) + 2(border) */