ソートメニューを常時展開するUserCSS
https://gyazo.com/c39a808353ca8ca842497d71bddeccc5
code:style.css
/* ホーム画面 */
.quick-launch {
.page-list-translation-menu .fas {
vertical-align: top; /*下だけずれるので*/
}
@media(width > 767px) {
.page-sort-menu {
.tool-btn, .dropdown-header {
display: none;
}
.dropdown-menu {
z-index: 0;
position: relative;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-end;
background: transparent;
box-shadow: none;
border: none;
margin: 0;
padding:0 5px;
li>a {
padding: 6px 10px 3px;
&:not(.selected) {
}
&:hover {
background-color: var(--tool-bg, rgba(0, 0, 0, 0.08));
border-radius: 3px;
}
}
}
}
}
}
/* 関連ページ */
.toolbar {
.related-page-list-search {
margin: auto; /*ズレてるので*/
}
@media(width > 1041px){
grid-template-columns: minmax(min-content, 400px) max-content !important;
gap: 1em;
.page-sort-menu {
.tool-btn, .dropdown-header {
display: none;
}
.dropdown-menu {
z-index: 0;
position: relative;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-end;
background: transparent;
box-shadow: none;
border: none;
padding: 0;
top: 0;
li>a {
padding: 3px 10px 3px;
&:not(.selected) {
}
&:hover {
background-color: var(--tool-bg, rgba(0, 0, 0, 0.08));
border-radius: 3px;
}
}
}
}
}
}
同じことを二回も書きたくないyozba.icon
code:共通部分.css
.page-sort-menu {
.tool-btn, .dropdown-header {
display: none;
}
.dropdown-menu {
z-index: 0;
position: relative;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-end;
background: transparent;
box-shadow: none;
border: none;
li>a {
&:not(.selected) {
}
&:hover {
background-color: var(--tool-bg, rgba(0, 0, 0, 0.08));
border-radius: 3px;
}
}
}
}
メディアクエリの条件分けが異なる2つの要素なので共通部分の記述を一つにまとめることができない
.quick-launch @media(width > 767px), .toolbar @media(width > 1041px){...みたいな書き方ができれば良いんだけどもyozba.icon