mirrors/zotero
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Make macOS control normalization into a mixin (#4464)

Browse source 
And include in stylesheets that have been updated.

Have to make sure not to include this mixin in the global scope in
stylesheets that are themselves imported elsewhere (i.e., filename
begins with an underscore).
This commit is contained in:
Abe Jellinek 2024-07-30 10:17:40 -04:00 • committed by Dan Stillman
parent c7757131a6
commit 74b86a7033
6 changed files with 50 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
scss/abstracts/_mixins.scss
View file

@ -227,6 +227,48 @@
}
}
}
// Normalize margins/paddings for form controls on macOS
@mixin macOS-normalize-controls {
:is(button, toolbarbutton) .button-text {
@media (-moz-platform: macos) {
margin-block: 1px 0;
margin-inline: 3px;
}
}
radiogroup {
@media (-moz-platform: macos) {
margin: 0;
column-gap: 8px;
}
}
radio, checkbox {
@media (-moz-platform: macos) {
margin: 0;
gap: 6px;
}
}
radio :is(.radio-check, .radio-check[checked], .radio-icon, .radio-label),
checkbox :is(.checkbox-check, .checkbox-check[checked], .checkbox-icon, .checkbox-label) {
@media (-moz-platform: macos) {
margin: 0;
// Can't break these out into separate rules because of specificity:
&:is(.radio-check, .checkbox-check) {
margin-inline-start: -2px;
}
&:is(.checkbox-label) {
margin-top: -1px;
}
}
}
}
/*
This mixin replaces the default focus-rings - those are platform-specific, do not show up on some
components (e.g. toolbarbutton) and sometimes are too wide (e.g. around textfield on macOS).

2
scss/components/_advancedSearch.scss
View file

@ -1,4 +1,6 @@
#zotero-advanced-search-dialog {
@include macOS-normalize-controls;
min-height: 500px;
min-width: 700px;

2
scss/components/_banners.scss
View file

@ -1,4 +1,6 @@
#post-upgrade-banner, #retracted-items-banner, #sync-reminder-banner {
@include macOS-normalize-controls;
display: flex;
justify-content: center;
text-align: center;

40
scss/components/_button.scss
View file

@ -38,43 +38,3 @@ button {
margin: 0 -2px -1px;
}
}
// Default margins/paddings for button elements on macOS:
:is(button, toolbarbutton) .button-text {
@media (-moz-platform: macos) {
margin-block: 1px 0;
margin-inline: 3px;
}
}
radiogroup {
@media (-moz-platform: macos) {
margin: 0;
column-gap: 8px;
}
}
radio, checkbox {
@media (-moz-platform: macos) {
margin: 0;
gap: 6px;
}
}
radio :is(.radio-check, .radio-check[checked], .radio-icon, .radio-label),
checkbox :is(.checkbox-check, .checkbox-check[checked], .checkbox-icon, .checkbox-label) {
@media (-moz-platform: macos) {
margin: 0;
// Can't break these out into separate rules because of specificity:
&:is(.radio-check, .checkbox-check) {
margin-inline-start: -2px;
}
&:is(.checkbox-label) {
margin-top: -1px;
}
}
}

2
scss/components/_locateManager.scss
View file

@ -1,4 +1,6 @@
#zotero-locate-manager-prefs {
@include macOS-normalize-controls;
#button-bar, #button-bar > hbox {
display: flex;
gap: 6px;

2
scss/preferences.scss
View file

@ -43,6 +43,8 @@
@import "preferences/cite";
@import "preferences/advanced";
@include macOS-normalize-controls;
#zotero-prefs {
min-width: 800px;
min-height: 600px;