Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-07-29 14:34:37 +04:00
Code Issues Projects Releases Wiki Activity

light sidebar fixes

Browse Source
This commit is contained in:
codecalm
2020-01-11 00:32:53 +01:00
parent ab91ac0f26
commit edad3ac020
4 changed files with 38 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/_includes/forms/form-elements-2.html
+2 -2
View File
@@ -9,12 +9,12 @@
</div>
<div class="mb-3">
<label class="form-label">Your custom URL</label>
<label class="form-label">Input with prepended text</label>
{% include ui/form/input-group.html prepend="https://tabler.io/users/" class="input-group-flat" input-class="pl-0" %}
</div>
<div class="mb-3">
<label class="form-label">Your custom subdomain</label>
<label class="form-label">Input with appended text</label>
{% include ui/form/input-group.html append=".tabler.io" input-class="text-right pr-0" class="input-group-flat" %}
</div>
pages/_includes/layout/sidebar.html
+13 -1
View File
@@ -6,10 +6,22 @@
<div>
<!-- Sidebar menu -->
{% include layout/menu-aside.html %}
<div class="hide-sidebar-folded">
<hr>
<div class="text-muted">
<div class="mb-2">
<strong>160MB</strong> from <strong>2GB</strong> used.
</div>
{% include ui/progress.html percentage=30 size="sm" %}
</div>
</div>
</div>
<div class="mt-auto">
<div class="mt-auto hide-sidebar-folded">
{% include ui/button.html text="Logout" color="primary" icon="log-out" block=true %}
</div>
</div>
</aside>
pages/index.html
+1
View File
@@ -4,6 +4,7 @@ page-title: Dashboard
page-pretitle: Overview
page-title-actions: buttons
menu: home
menu-layout: vertical
---
{% include layout/homepage.html %}
scss/layout/_layout.scss
+22 -6
View File
@@ -9,10 +9,10 @@ $sidenav-breakpoint-show: 'sm';
$sidenav-breakpoint-folded: 'lg';
$sidenav-folded-item-height: 3.5rem;
@mixin sidebar-folded($breakpoint-folded) {
@mixin sidebar-folded($breakpoint-folded, $breakpoint-show: false) {
@if $breakpoint-folded {
@include media-breakpoint-down($breakpoint-folded) {
@include media-breakpoint-between($breakpoint-show, $breakpoint-folded) {
width: $sidenav-width-folded;
.sidebar-brand {
@@ -104,6 +104,10 @@ $sidenav-folded-item-height: 3.5rem;
.sidebar-nav-title {
display: none;
}
.hide-sidebar-folded {
display: none !important
}
}
}
}
@@ -278,7 +282,7 @@ Sidebar
display: flex;
flex-direction: column;
@include sidebar-folded($sidenav-breakpoint-folded);
@include sidebar-folded($sidenav-breakpoint-folded, $sidenav-breakpoint-show);
@include sidebar-show($sidenav-breakpoint-show);
}
@@ -319,7 +323,7 @@ Sidebar
display: flex;
flex-direction: column;
overflow-y: scroll;
@include scrollbar(true);
@include scrollbar;
.sidebar-brand + & {
margin-top: $navbar-height;
@@ -334,6 +338,7 @@ Sidebar menu
padding: 0;
list-style: none;
user-select: none;
color: $text-muted;
ul {
margin: 0;
@@ -360,13 +365,13 @@ Sidebar menu
&:hover {
background-color: rgba(#fff, .02);
text-decoration: none;
color: #ffffff !important;
color: $body-color !important;
cursor: pointer !important;
}
&.active {
opacity: 1;
color: #ffffff;
color: $body-color !important;
box-shadow: inset 3px 0 $primary;
background-color: rgba(#fff, .01);
}
@@ -421,4 +426,15 @@ Sidebar dark
.sidebar-brand {
filter: brightness(0) invert(1);
}
.sidebar-nav-link {
&:hover,
&.active {
color: $white !important;
}
}
.sidebar-content {
@include scrollbar(true);
}
}