Fix: dropdown menu triangle in mobile view (#4169)

* central triangle styles moved to template.css

* Update template.rtl.css

* fix: triangle in config menu in mobile view

* improve dark theme in mobile view
This commit is contained in:
maTh
2022-01-24 09:24:20 +01:00
committed by GitHub
parent 7ab4f89f54
commit 9012db0155
23 changed files with 73 additions and 197 deletions

View File

@@ -304,18 +304,7 @@ a.btn {
}
.dropdown-menu::after {
background: #fff;
display: none;
width: 10px;
height: 10px;
border-top: 1px solid #ddd;
border-left: 1px solid #ddd;
content: "";
position: absolute;
top: -6px;
right: 13px;
z-index: -10;
transform: rotate(45deg);
border-color: #ddd;
}
.dropdown-header {

View File

@@ -304,18 +304,7 @@ a.btn {
}
.dropdown-menu::after {
background: #fff;
display: none;
width: 10px;
height: 10px;
border-top: 1px solid #ddd;
border-right: 1px solid #ddd;
content: "";
position: absolute;
top: -6px;
left: 13px;
z-index: -10;
transform: rotate(-45deg);
border-color: #ddd;
}
.dropdown-header {

View File

@@ -30,18 +30,8 @@
text-align: left;
&::after {
background: $grey-lighter;
width: 10px;
height: 10px;
content: "";
position: absolute;
top: -4px;
right: 18px;
bottom: -14px;
z-index: -10;
transform: rotate(45deg);
// border-top: 1px solid #95a5a6;
// border-left: 1px solid #95a5a6;
border: none;
right: 17px;
}
.dropdown-header {

View File

@@ -234,16 +234,8 @@ form th {
text-align: left;
}
.dropdown-menu::after {
background: #fcfaf8;
width: 10px;
height: 10px;
content: "";
position: absolute;
top: -4px;
right: 18px;
bottom: -14px;
z-index: -10;
transform: rotate(45deg);
border: none;
right: 17px;
}
.dropdown-menu .dropdown-header {
margin: 1.75rem 0 0.5rem 2rem;

View File

@@ -234,16 +234,8 @@ form th {
text-align: right;
}
.dropdown-menu::after {
background: #fcfaf8;
width: 10px;
height: 10px;
content: "";
position: absolute;
top: -4px;
left: 18px;
bottom: -14px;
z-index: -10;
transform: rotate(-45deg);
border: none;
left: 17px;
}
.dropdown-menu .dropdown-header {
margin: 1.75rem 2rem 0.5rem 0;

View File

@@ -340,17 +340,7 @@ a.btn {
}
.dropdown-menu::after {
background: #1a1a1a;
width: 10px;
height: 10px;
border-top: 1px solid #888;
border-left: 1px solid #888;
content: "";
position: absolute;
top: -6px;
right: 13px;
z-index: -10;
transform: rotate(45deg);
border-color: #888;
}
.dropdown-header {
@@ -1176,6 +1166,7 @@ a.btn {
background-color: #1a1a1a;
border-top: 1px solid #888;
border-left: 1px solid #888;
right: 12px;
}
.day .name {

View File

@@ -340,17 +340,7 @@ a.btn {
}
.dropdown-menu::after {
background: #1a1a1a;
width: 10px;
height: 10px;
border-top: 1px solid #888;
border-right: 1px solid #888;
content: "";
position: absolute;
top: -6px;
left: 13px;
z-index: -10;
transform: rotate(-45deg);
border-color: #888;
}
.dropdown-header {
@@ -1176,6 +1166,7 @@ a.btn {
background-color: #1a1a1a;
border-top: 1px solid #888;
border-right: 1px solid #888;
left: 12px;
}
.day .name {

View File

@@ -340,17 +340,8 @@ a.btn {
}
.dropdown-menu::after {
background: #fff;
width: 10px;
height: 10px;
border-top: 1px solid #95a5a6;
border-left: 1px solid #95a5a6;
content: "";
position: absolute;
top: -6px;
right: 13px;
z-index: -10;
transform: rotate(45deg);
border-color: #95a5a6;
right: 12px;
}
.dropdown-header {

View File

@@ -340,17 +340,8 @@ a.btn {
}
.dropdown-menu::after {
background: #fff;
width: 10px;
height: 10px;
border-top: 1px solid #95a5a6;
border-right: 1px solid #95a5a6;
content: "";
position: absolute;
top: -6px;
left: 13px;
z-index: -10;
transform: rotate(-45deg);
border-color: #95a5a6;
left: 12px;
}
.dropdown-header {

View File

@@ -30,18 +30,8 @@
text-align: left;
&::after {
background: $grey-lighter;
width: 10px;
height: 10px;
content: "";
position: absolute;
top: -4px;
border: none;
right: 18px;
bottom: -14px;
z-index: -10;
transform: rotate(45deg);
// border-top: 1px solid #95a5a6;
// border-left: 1px solid #95a5a6;
}
.dropdown-header {

View File

@@ -234,16 +234,8 @@ form th {
text-align: left;
}
.dropdown-menu::after {
background: #f9fafb;
width: 10px;
height: 10px;
content: "";
position: absolute;
top: -4px;
border: none;
right: 18px;
bottom: -14px;
z-index: -10;
transform: rotate(45deg);
}
.dropdown-menu .dropdown-header {
margin: 1.75rem 0 0.5rem 2rem;

View File

@@ -234,16 +234,8 @@ form th {
text-align: right;
}
.dropdown-menu::after {
background: #f9fafb;
width: 10px;
height: 10px;
content: "";
position: absolute;
top: -4px;
border: none;
left: 18px;
bottom: -14px;
z-index: -10;
transform: rotate(-45deg);
}
.dropdown-menu .dropdown-header {
margin: 1.75rem 2rem 0.5rem 0;

View File

@@ -359,18 +359,7 @@ a.btn {
}
.dropdown-menu::after {
background: #fff;
width: 10px;
height: 10px;
border-top: 1px solid #ddd;
/* @noflip */
border-left: 1px solid #ddd;
content: "";
position: absolute;
top: -6px;
right: 13px;
z-index: -10;
transform: rotate(45deg);
border-color: #ddd;
}
.dropdown-header {

View File

@@ -359,18 +359,7 @@ a.btn {
}
.dropdown-menu::after {
background: #fff;
width: 10px;
height: 10px;
border-top: 1px solid #ddd;
/* @noflip */
border-right: 1px solid #ddd;
content: "";
position: absolute;
top: -6px;
left: 13px;
z-index: -10;
transform: rotate(-45deg);
border-color: #ddd;
}
.dropdown-header {

View File

@@ -327,17 +327,8 @@ a.btn {
}
.dropdown-menu::after {
background: #fff;
width: 10px;
height: 10px;
border-top: 1px solid #aaa;
border-left: 1px solid #aaa;
content: "";
position: absolute;
top: -6px;
right: 13px;
z-index: -10;
transform: rotate(45deg);
border-color: #aaa;
right: 8px;
}
.dropdown-header {

View File

@@ -327,17 +327,8 @@ a.btn {
}
.dropdown-menu::after {
background: #fff;
width: 10px;
height: 10px;
border-top: 1px solid #aaa;
border-right: 1px solid #aaa;
content: "";
position: absolute;
top: -6px;
left: 13px;
z-index: -10;
transform: rotate(-45deg);
border-color: #aaa;
left: 8px;
}
.dropdown-header {

View File

@@ -373,17 +373,7 @@ a.btn {
}
.dropdown-menu::after {
background: #222;
width: 10px;
height: 10px;
border-top: 1px solid #171717;
border-left: 1px solid #171717;
content: "";
position: absolute;
top: -6px;
right: 13px;
z-index: -10;
transform: rotate(45deg);
border-color: #171717;
}
.configure .dropdown-header {

View File

@@ -373,17 +373,7 @@ a.btn {
}
.dropdown-menu::after {
background: #222;
width: 10px;
height: 10px;
border-top: 1px solid #171717;
border-right: 1px solid #171717;
content: "";
position: absolute;
top: -6px;
left: 13px;
z-index: -10;
transform: rotate(-45deg);
border-color: #171717;
}
.configure .dropdown-header {

View File

@@ -296,6 +296,9 @@ form th {
.dropdown-menu .dropdown-header {
cursor: default;
}
.dropdown-menu::after {
content: none;
}
.dropdown-menu > .item {
padding: 0;
margin-left: 10px;

View File

@@ -296,6 +296,9 @@ form th {
.dropdown-menu .dropdown-header {
cursor: default;
}
.dropdown-menu::after {
content: none;
}
.dropdown-menu > .item {
padding: 0;
margin-right: 10px;

View File

@@ -376,6 +376,10 @@ form {
cursor: default;
}
&::after {
content: none;
}
> {
.item {

View File

@@ -336,6 +336,20 @@ a.btn {
right: 0;
}
.dropdown-menu::after {
background-color: inherit;
width: 10px;
height: 10px;
border-width: 1px 0 0 1px;
border-style: solid;
content: "";
position: absolute;
top: -6px;
right: 13px;
z-index: -10;
transform: rotate(45deg);
}
.dropdown-menu-scrollable {
max-height: min(75vh, 50em);
overflow-x: hidden;
@@ -1451,6 +1465,10 @@ input:checked + .slide-container .properties {
box-shadow: -3px 0 3px #aaa;
}
.configure .dropdown-target:target ~ .dropdown-toggle::after {
content: none;
}
.dropdown-target:target ~ .dropdown-menu {
display: table-cell;
z-index: 1000;

View File

@@ -336,6 +336,20 @@ a.btn {
left: 0;
}
.dropdown-menu::after {
background-color: inherit;
width: 10px;
height: 10px;
border-width: 1px 1px 0 0;
border-style: solid;
content: "";
position: absolute;
top: -6px;
left: 13px;
z-index: -10;
transform: rotate(-45deg);
}
.dropdown-menu-scrollable {
max-height: min(75vh, 50em);
overflow-x: hidden;
@@ -1451,6 +1465,10 @@ input:checked + .slide-container .properties {
box-shadow: 3px 0 3px #aaa;
}
.configure .dropdown-target:target ~ .dropdown-toggle::after {
content: none;
}
.dropdown-target:target ~ .dropdown-menu {
display: table-cell;
z-index: 1000;