release/0.2
HerrHase 3 years ago
parent d97f62772a
commit 9bdebb699c

@ -598,6 +598,90 @@
<div class="progress__inner" style="width: 20%;"></div> <div class="progress__inner" style="width: 20%;"></div>
</div> </div>
<!-- sidebar -->
<h2 class="m-top-5">
Sidebar
</h2>
<div class="content">
<code>&#x3C;div class=&#x22;progress&#x22;&#x3E;
&#x3C;div class=&#x22;progress__inner&#x22; style=&#x22;width: 20%;&#x22;&#x3E;&#x3C;/div&#x3E;
&#x3C;/div&#x3E;
</code>
</div>
<button class="button" onclick="openSidebar()">
Click me!
</button>
<script type="text/javascript">
function openSidebar() {
document.querySelector('.sidebar').classList.add('sidebar--open')
}
function closeSidebar() {
document.querySelector('.sidebar').classList.remove('sidebar--open')
}
</script>
<div class="sidebar">
<div class="sidebar__inner">
<div class="sidebar__body">
</div>
<div class="sidebar__footer">
<button type="button" class="button m-bottom-0" onclick="closeSidebar()">
Close
</button>
</div>
</div>
</div>
<!-- sidebar -->
<h2 class="m-top-5">
Sidebar + Bar
</h2>
<div class="content">
<code>&#x3C;div class=&#x22;progress&#x22;&#x3E;
&#x3C;div class=&#x22;progress__inner&#x22; style=&#x22;width: 20%;&#x22;&#x3E;&#x3C;/div&#x3E;
&#x3C;/div&#x3E;
</code>
</div>
<button class="button" onclick="openSidebarBar()">
Click me!
</button>
<script type="text/javascript">
function openSidebarBar() {
document.querySelector('#sidebar-bar').classList.add('sidebar--open')
}
function closeSidebarBar() {
document.querySelector('#sidebar-bar').classList.remove('sidebar--open')
}
</script>
<div id="sidebar-bar" class="sidebar">
<div class="sidebar__inner">
<div class="bar">
<div class="bar__main">
Sidebar
</div>
<div class="bar__end">
<button class="button button--transparent" type="button" onclick="closeSidebarBar()">
<svg class="icon fill-text-contrast" aria-hidden="true">
<use xlink:href="/symbol-defs.svg#icon-close"></use>
</svg>
</button>
</div>
</div>
<div class="sidebar__body">
</div>
<div class="sidebar__footer">
<button type="button" class="button m-bottom-0" onclick="closeSidebarBar()">
Close
</button>
</div>
</div>
</div>
<!-- table --> <!-- table -->
<h2 class="m-top-5"> <h2 class="m-top-5">
Table Table

File diff suppressed because one or more lines are too long

@ -1 +1,13 @@
(self.webpackChunk_tentakelfabrik_plain_ui=self.webpackChunk_tentakelfabrik_plain_ui||[]).push([[355],{256:()=>{}}]); (self["webpackChunk_tentakelfabrik_plain_ui"] = self["webpackChunk_tentakelfabrik_plain_ui"] || []).push([["spritemap"],{
/***/ "?4e0c":
/*!******************************!*\
!*** spritemap-dummy-module ***!
\******************************/
/***/ (() => {
/***/ })
}]);

@ -0,0 +1,85 @@
/**
* <div class="sidebar">
* <div class="sidebar__inner">
* <div class="sidebar__body">
* </div>
* <div class="sidebar__footer">
* </div>
* </div>
* </div>
*
* @author Björn Hase, Tentakelfabrik
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://gitea.com/tentakelfabrik/plain-ui
*
*/
.sidebar {
position: fixed;
z-index: 9;
top: 0;
left: 0;
width: 100%;
height: 100%;
max-width: 95%;
visibility: hidden;
transition: visibility 0s linear 0.5s;
// adding overlay with transition for open / close
&:before {
@include overlay($z-index: 9);
transition: background-color 0.5s;
}
// extends from panel
&__body {
@extend .panel__body;
}
// extends from panel
&__inner {
@extend .panel;
position: relative;
height: 100%;
z-index: 10;
transition: transform 0.2s;
transform: translateX(-100%);
}
&__footer {
position: fixed;
left: 0;
bottom: 0;
display: flex;
justify-content: space-between;
background: var(--background);
width: 100%;
padding: 1rem;
}
// open sidebar and slide in display
&--open {
visibility: visible;
transition: visibility 0s linear 0s;
.sidebar__inner {
transform: translateX(0);
}
&:before {
background: var(--background-alpha);
}
}
@include media-md() {
max-width: 33%;
}
}

@ -25,6 +25,7 @@
'components/bar', 'components/bar',
'components/modal', 'components/modal',
'components/loading', 'components/loading',
'components/sidebar',
'layouts/masonry', 'layouts/masonry',
'layouts/slider', 'layouts/slider',

Loading…
Cancel
Save