Compare commits

..

No commits in common. "3f69ff8f0df831c85b5b959a85552856fe84fb6c" and "57afcbdffb765ce0b4890551b4196657271477bb" have entirely different histories.

4 changed files with 19 additions and 37 deletions

View File

@ -13,14 +13,14 @@
&--error{
.LP-Message__Icon{
background-color: invert(#fd6861);
background-image: url('icons/error.png');
background-image: url('/icons/error.png');
}
}
&--warning{
.LP-Message__Icon{
background-color:invert(#ffb818);
background-image: url('icons/error.png');
background-image: url('/icons/error.png');
}
}
@ -28,21 +28,21 @@
&--info{
.LP-Message__Icon{
background-color: invert(lightblue);
background-image: url('icons/information.svg');
background-image: url('/icons/information.svg');
}
}
&--success{
.LP-Message__Icon{
background-color: invert(#96c800);
background-image: url('icons/success.svg');
background-image: url('/icons/success.svg');
}
}
&--debug{
.LP-Message__Icon{
background-color: invert(#fb95d0);
background-image: url('icons/debug.png');
background-image: url('/icons/debug.png');
}
}

View File

@ -4,18 +4,6 @@
<meta charset="UTF-8">
<link rel="stylesheet" href="{{ path '/main.css' }}">
<title>Preview</title>
<script>
document.addEventListener("DOMContentLoaded", function(){
Array.from(document.getElementsByClassName('LP-Main__Sidebar')).forEach(function(element){
element.classList.add('LP-Main__Sidebar--hidden')
})
setTimeout(function(){
Array.from(document.getElementsByClassName('LP-Main__Sidebar')).forEach(function(element){
element.classList.remove('LP-Main__Sidebar--hidden')
})
}, 500)
})
</script>
</head>
<body>
{{{ yield }}}

View File

@ -95,20 +95,20 @@ body{
}
@media(max-width: $-viewport-toggle-sidebar){
.LP-Wrapper__Site{
grid-template-columns: 0 1fr;
}
@keyframes slide_out_siedebar{
from{left: -1 * $-sidebar-width;}
to{left: 0;}
}
@keyframes slide_in_siedebar{
from{left: 0;}
to{left: -1 * $-sidebar-width;}
}
.LP-Wrapper__Site{
grid-template-columns: 0 1fr;
}
.LP-Main__Sidebar{
grid-area:unset;
width: $-sidebar-width;
@ -118,10 +118,6 @@ body{
height: 100vh;
top: 60px;
border-right: 1px solid $-light-brown;
&--hidden{
visibility: hidden;
}
}
#toggle_sidebar:checked ~ .LP-Main__Sidebar{
@ -143,7 +139,7 @@ body{
z-index: 20;
height: 60px;
width: 60px;
background-image: url('icons/hamburger_menu.svg');
background-image: url('/icons/hamburger_menu.svg');
background-repeat: no-repeat;
background-clip: content-box;
background-position: center;

View File

@ -53,6 +53,8 @@ body {
margin: 0; } }
@media (max-width: 650px) {
.LP-Wrapper__Site {
grid-template-columns: 0 1fr; }
@keyframes slide_out_siedebar {
from {
left: -250px; }
@ -63,8 +65,6 @@ body {
left: 0; }
to {
left: -250px; } }
.LP-Wrapper__Site {
grid-template-columns: 0 1fr; }
.LP-Main__Sidebar {
grid-area: unset;
width: 250px;
@ -74,8 +74,6 @@ body {
height: 100vh;
top: 60px;
border-right: 1px solid #C09F80; }
.LP-Main__Sidebar--hidden {
visibility: hidden; }
#toggle_sidebar:checked ~ .LP-Main__Sidebar {
animation-name: slide_out_siedebar;
animation-duration: .3s;
@ -89,7 +87,7 @@ body {
z-index: 20;
height: 60px;
width: 60px;
background-image: url("icons/hamburger_menu.svg");
background-image: url("/icons/hamburger_menu.svg");
background-repeat: no-repeat;
background-clip: content-box;
background-position: center;
@ -273,19 +271,19 @@ body {
overflow: hidden; }
.LP-Message--error .LP-Message__Icon {
background-color: #02979e;
background-image: url("icons/error.png"); }
background-image: url("/icons/error.png"); }
.LP-Message--warning .LP-Message__Icon {
background-color: #0047e7;
background-image: url("icons/error.png"); }
background-image: url("/icons/error.png"); }
.LP-Message--info .LP-Message__Icon {
background-color: #522719;
background-image: url("icons/information.svg"); }
background-image: url("/icons/information.svg"); }
.LP-Message--success .LP-Message__Icon {
background-color: #6937ff;
background-image: url("icons/success.svg"); }
background-image: url("/icons/success.svg"); }
.LP-Message--debug .LP-Message__Icon {
background-color: #046a2f;
background-image: url("icons/debug.png"); }
background-image: url("/icons/debug.png"); }
.LP-Message .LP-Message__Icon {
background-size: 40px 40px;
background-repeat: no-repeat;