mirror of
https://github.com/tabler/tabler.git
synced 2025-12-21 17:34:25 +04:00
aside feature
This commit is contained in:
@@ -6,7 +6,7 @@
|
||||
</head>
|
||||
<body class="{{ page.body-class }}">
|
||||
|
||||
<div class="page">
|
||||
<div class="page d-flex flex-column justify-content-center">
|
||||
{{ content }}
|
||||
</div>
|
||||
|
||||
|
||||
@@ -6,10 +6,21 @@ layout: base
|
||||
{% include aside.html %}
|
||||
{% endcomment %}
|
||||
|
||||
<div class="flex-fill">
|
||||
<div class="flex-fill d-flex">
|
||||
|
||||
<div class="aside">
|
||||
<div class="aside-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam assumenda blanditiis consectetur culpa, cumque expedita illo in pariatur quibusdam voluptates? Eligendi est ex vero voluptate! In maxime optio perspiciatis repellat!
|
||||
</div>
|
||||
<div class="aside-footer">
|
||||
Aside footer
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-fill d-flex flex-column">
|
||||
{% include header.html %}
|
||||
|
||||
<div class="my-3 my-md-5">
|
||||
<div class="my-3 my-md-5 flex-fill">
|
||||
{% if page.page-title %}
|
||||
<div class="container">
|
||||
<div class="page-header">
|
||||
@@ -20,7 +31,8 @@ layout: base
|
||||
|
||||
{{ content }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include footer-sub.html %}
|
||||
{% include footer.html %}
|
||||
{% include footer-sub.html %}
|
||||
{% include footer.html %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,22 +1,9 @@
|
||||
.aside {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: $aside-width;
|
||||
background: #ffffff;
|
||||
border-left: 1px solid $border-color;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
z-index: 100;
|
||||
visibility: hidden;
|
||||
box-shadow: 0 0 5px 2px rgba(#000, .05);
|
||||
|
||||
body.aside-opened & {
|
||||
@media (min-width: 1600px) {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
width: 16rem;
|
||||
border-right: 1px solid $border-color;
|
||||
}
|
||||
|
||||
.aside-body {
|
||||
|
||||
Reference in New Issue
Block a user