Make use of LESS features for more structured CSS

This patch includes two bugfixes:
1. The previous rule with a `p + p` didn't do what it was supposed to
   do. It was adding a margin after the 2nd, 3rd and all following <p>
   elements, but not between the 1st and the 2nd. It should have been
   margin-top instead. The approach in this patch is different and
   avoids the need to repead the 0.5em.
2. The red background color was not applied to the input fields any
   more because OOUI doesn't use <input> elements any more.

Change-Id: Ia57b742e8b3cd29c1f55cd7e918f26f70eebab18
This commit is contained in:
Thiemo Kreuz 2022-08-08 11:46:27 +02:00 committed by WMDE-Fisch
parent f92fed31c7
commit d36356326a
2 changed files with 53 additions and 50 deletions

View file

@ -2,6 +2,6 @@
content: '\00a0';
display: block;
line-height: 1.42857143em; /* Mirroring the button's line-height */
padding-top: 12px; /* Mirroring the button's ( 5px padding + 1px border ) * 2 = 12 */
padding-top: ( 5px + 1px ) * 2; /* Mirroring the button's 5px padding + 1px border */
padding-bottom: 1em; /* Mirroring the .tdg-editscreen-main margin, but as padding to not collapse */
}

View file

@ -11,64 +11,67 @@
}
.tdg-templateDataDialog-panels .oo-ui-messageWidget p {
margin: 0;
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
}
.tdg-templateDataDialog-panels .oo-ui-messageWidget p + p {
margin-bottom: 0.5em;
}
.tdg-editscreen-input-error input,
.tdg-editscreen-input-error.oo-ui-inputWidget input.oo-ui-inputWidget-input {
.tdg-editscreen-input-error .oo-ui-inputWidget-input {
background-color: #ffa3a3;
}
.tdg-templateDataParamWidget {
padding-right: 0.5em;
.oo-ui-iconElement-icon {
opacity: 0.2;
}
/* Hover events sometimes fire while dragging, so limit to highlighted widgets */
&.oo-ui-optionWidget-highlighted .oo-ui-iconElement-icon:hover {
opacity: 0.5;
}
}
.tdg-templateDataParamWidget .oo-ui-iconElement-icon {
opacity: 0.2;
}
.tdg-templateDataParamWidget-param {
&-name,
&-aliases,
&-description {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
/* Hover events sometimes fire while dragging, so limit to highlighted widgets */
.tdg-templateDataParamWidget.oo-ui-optionWidget-highlighted .oo-ui-iconElement-icon:hover {
opacity: 0.5;
}
&-name {
font-weight: bold;
}
.tdg-templateDataParamWidget-param-name,
.tdg-templateDataParamWidget-param-aliases,
.tdg-templateDataParamWidget-param-description {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
&-aliases {
float: right;
font-size: 0.9em;
padding: 1px;
}
.tdg-templateDataParamWidget-param-name {
font-weight: bold;
}
&-description {
color: #666;
}
.tdg-templateDataParamWidget-param-aliases {
float: right;
font-size: 0.9em;
padding: 1px;
}
&-alias {
border-radius: 0.3em;
padding: 0.125em 0.25em;
margin-left: 0.5em;
color: #999;
background-color: #eee;
border: solid 1px #ddd;
.tdg-templateDataParamWidget-param-description {
color: #666;
}
.tdg-templateDataParamWidget-param-alias {
border-radius: 0.3em;
padding: 0.125em 0.25em;
margin-left: 0.5em;
color: #999;
background-color: #eee;
border: solid 1px #ddd;
}
.tdg-templateDataParamWidget-param-alias:first-child {
background-color: #fff;
&:first-child {
background-color: #fff;
}
}
}
.tdg-templateDataParamWidget-paramList-param-description {
@ -79,12 +82,12 @@
.tdg-templateDataParamImportWidget {
display: block;
margin-top: 1em;
}
.tdg-templateDataParamImportWidget > .oo-ui-buttonElement-button {
display: block;
text-align: left;
font-weight: normal;
> .oo-ui-buttonElement-button {
display: block;
text-align: left;
font-weight: normal;
}
}
/* LanguageSearchWidget */