feat(core): apply box-sizing: border-box by default

This commit is contained in:
alistair3149 2023-03-01 16:08:07 -05:00
parent 0b7c72ca5e
commit 68313123e9
No known key found for this signature in database
9 changed files with 17 additions and 15 deletions

View file

@ -144,12 +144,6 @@
margin-left: auto;
}
.resource-loader-icon-link-small() {
display: block;
width: @icon-size;
height: @icon-size;
}
.resource-loader-icon() {
position: absolute;
width: inherit;

View file

@ -3,7 +3,6 @@
.citizen-pref {
&__button {
box-sizing: content-box;
padding: 0;
border: 0;
appearance: none;

View file

@ -6,6 +6,7 @@
overflow: auto;
width: 100%;
max-height: ~'calc( var( --header-card-maxheight ) - var( --height-search-bar ) )';
box-sizing: content-box; // Magic to align with search input
margin: 0 0 0 -1px; // Reset <ol> styles, fix alignment
border-bottom-left-radius: var( --border-radius--medium );
border-bottom-right-radius: var( --border-radius--medium );

View file

@ -2,6 +2,7 @@
* Framework
*/
html {
box-sizing: border-box;
// Not ideal but it works
scroll-padding-top: 6rem;
}
@ -16,6 +17,13 @@ body {
color: var( --color-base );
}
// Apply border-box universally unless overwritten
*,
*::before,
*::after {
box-sizing: inherit;
}
:focus {
outline-color: var( --color-primary );
}

View file

@ -3,6 +3,7 @@
&Icon {
display: flex;
box-sizing: content-box; // Magic
align-items: center;
justify-content: center;

View file

@ -110,7 +110,7 @@
// Sticky header styles
.citizen-body-header--sticky {
.citizen-toc__top.citizen-toc__link {
height: 1.05rem; // ( 1rem text + 1rem padding ) * line height / 2
height: 2rem; // 1rem text + 1rem padding
padding-top: var( --space-xs );
padding-bottom: var( --space-xs );
opacity: 1;

View file

@ -22,7 +22,6 @@
// Fallback text button if extensions register those
a {
padding: var( --space-xxs );
border-radius: var( --border-radius--small );
font-size: 0.875rem;
@ -37,7 +36,8 @@
}
.citizen-editsection-icon {
.resource-loader-icon-link-small;
width: 1.875rem;
height: 1.875rem;
opacity: var( --opacity-icon-base );
text-indent: -9999px; // Hide text
transition: @transition-opacity;
@ -45,7 +45,7 @@
&::before {
.resource-loader-icon;
display: block;
background-size: contain;
background-size: 1.125rem;
}
&:hover {

View file

@ -14,7 +14,6 @@
top: 0;
width: var( --header-button-size );
height: var( --header-button-size );
box-sizing: content-box;
border-radius: var( --border-radius--small );
margin: 0;
background-position: center;

View file

@ -15,8 +15,6 @@
> .oo-ui-popupWidget-popup {
> .oo-ui-popupWidget {
&-head {
box-sizing: content-box; // fix overflow
padding-top: 8px; // align with other menus
border-bottom-color: var( --border-color-base );
> .oo-ui-iconWidget {
@ -24,7 +22,9 @@
}
> .oo-ui-labelElement-label {
color: var( --color-base--emphasized );
padding-top: 0.15em; // compensate font size changes
font-size: 1rem;
font-weight: var( --font-weight-semibold );
}
}