forked from GNUsocial/gnu-social
[UI] Right panel added
This commit is contained in:
parent
c0b6d8807f
commit
4568578e16
@ -138,3 +138,70 @@ b {
|
||||
fill: currentColor;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
|
||||
/* RIGHT PANEL */
|
||||
#right-panel {
|
||||
order: 4;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
border: solid white;
|
||||
border-width: 0 3px 3px 0;
|
||||
display: inline-block;
|
||||
padding: 0.3em;
|
||||
}
|
||||
.right {
|
||||
transform: rotate(135deg);
|
||||
-webkit-transform: rotate(135deg);
|
||||
}
|
||||
|
||||
.rss {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: var(--nav-size);
|
||||
height: calc(100vh - (3 * var(--unit-size)));
|
||||
position: fixed;
|
||||
background-color: rgba(0, 0, 0, 0.40);
|
||||
margin-top: calc(3 * var(--main-size));
|
||||
}
|
||||
|
||||
.right-panel input[type=checkbox] {
|
||||
transform: scale(3);
|
||||
-ms-transform: scale(3);
|
||||
-webkit-transform: scale(3);
|
||||
padding: 3em;
|
||||
}
|
||||
|
||||
/* untoggled */
|
||||
.rss {
|
||||
right: -100%;
|
||||
top: 0;
|
||||
transition: 0.3s ease;
|
||||
}
|
||||
.arrow label {
|
||||
display: block;
|
||||
cursor: pointer
|
||||
}
|
||||
#toggle-right {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
}
|
||||
#toggle-right:not(:checked)+.arrow {
|
||||
transform: rotate(135deg);
|
||||
transition: 0.3s ease;
|
||||
}
|
||||
|
||||
/* toggled */
|
||||
#toggle-right:checked~.rss {
|
||||
display: flex;
|
||||
right: 0;
|
||||
top: 0;
|
||||
transition: 0.3s ease;
|
||||
}
|
||||
#toggle-right:checked+.arrow {
|
||||
transform: rotate(-45deg);
|
||||
transition: 0.3s ease;
|
||||
}
|
@ -144,7 +144,7 @@ b {
|
||||
}
|
||||
|
||||
#left-panel {
|
||||
order: 2;
|
||||
order: 1;
|
||||
}
|
||||
|
||||
#search {
|
||||
|
@ -140,7 +140,7 @@ b {
|
||||
}
|
||||
|
||||
#left-panel {
|
||||
order: 2;
|
||||
order: 1;
|
||||
}
|
||||
|
||||
#search {
|
||||
|
@ -25,9 +25,6 @@
|
||||
margin-right: var(--unit-size);
|
||||
}
|
||||
.navbar {
|
||||
left: -15em;
|
||||
top: 0;
|
||||
transition: 0.3s ease;
|
||||
left: 0;
|
||||
top: 0;
|
||||
transition: 0.3s ease;
|
||||
|
@ -30,7 +30,7 @@
|
||||
}
|
||||
.navbar {
|
||||
left: -100%;
|
||||
top:0;
|
||||
top: 0;
|
||||
transition: 0.3s ease;
|
||||
}
|
||||
.navbar a {
|
||||
|
@ -66,6 +66,14 @@
|
||||
<svg id='search' class="icon icon-search">
|
||||
<use xlink:href="#icon-search"></use>
|
||||
</svg>
|
||||
<div id="right-panel">
|
||||
<input type="checkbox" id="toggle-right" autofocus>
|
||||
<div class="arrow right">
|
||||
<label for="toggle-right" id='right-panel'></label>
|
||||
</div>
|
||||
<div class='rss'>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock header%}
|
||||
|
Loading…
Reference in New Issue
Block a user