Skip to content

T
tabler

知鸟1号 / tabler
与 Fork 源项目一致

从无法访问的项目Fork

通知 1
Star 0
Fork 0
T
tabler

体验新版 GitCode，发现更多精彩内容 >>

未验证 提交 309fdd55 编写于 作者: P Paweł Kuna 提交者： GitHub
浏览文件
操作

Sidebar refactoring (#373) 

Sidebar refactoring
上级 fc2e0fde 536cf5ed
隐藏空白更改
内联 并排
Showing with 394 addition and 469 deletion
build/postcss.config.js
浏览文件 @ 309fdd55
...@@ -17,7 +17,8 @@ module.exports = ctx => ({ ...@@ -17,7 +17,8 @@ module.exports = ctx => ({
}, },
plugins: { plugins: {
autoprefixer: { autoprefixer: {
cascade: false cascade: false,
grid: "autoplace"
} }
} }
}); });
js/tabler.js
浏览文件 @ 309fdd55
...@@ -108,8 +108,8 @@ const tabler = { ...@@ -108,8 +108,8 @@ const tabler = {
$(document).ready(function() { $(document).ready(function() {
const $body = $('body'); const $body = $('body');
$body.on('click', '[data-toggle="sidebar"]', function(e) { $body.on('click', '[data-toggle="menubar"]', function(e) {
$body.toggleClass('sidebar-opened'); $body.toggleClass('menu-visible');
e.preventDefault(); e.preventDefault();
return false; return false;
......
pages/_includes/layout/menu.html
浏览文件 @ 309fdd55
{% removeemptylines %} {% removeemptylines %}
{% assign side = false %} {% assign side = false %}
<ul class="navbar-nav{% if include.class %} {{ include.class }}{% endif %}"> <ul class="navbar-nav flex-wrap{% if include.class %} {{ include.class }}{% endif %}">
{% assign current-page = page.menu | default: layout.menu | split: '.' %} {% assign current-page = page.menu | default: layout.menu | split: '.' %}
{% for level-1 in site.data.menu %} {% for level-1 in site.data.menu %}
......
pages/_includes/layout/sidenav.html
浏览文件 @ 309fdd55
{% assign menu = page.menu | default: layout.menu %} {% assign menu = page.menu | default: layout.menu %}
<aside class="navbar navbar-side {% if include.dark %}navbar-dark bg-dark text-white{% else %}navbar-light{% endif %}{% if include.fixed %} navbar-fixed{% endif %}{% if include.right %} navbar-right{% endif %}{% if include.folded %} navbar-folded{% endif %} js-sidebar" id="sidebar"> <aside class="layout-menubar {% if include.class %} {{ include.class }}{% endif %} {% if include.dark %}sidenav-dark bg-dark text-white{% else %}sidenav-light{% endif %}{% if include.fixed %} sidenav-fixed{% endif %}{% if include.right %} sidenav-right{% endif %}{% if include.folded %} sidenav-folded{% endif %} js-sidebar" id="sidebar">
{% unless include.empty %} <div class="container">
{% include layout/sidenav-content.html menu=menu dark=include.dark %} {% include layout/sidenav-content.html menu=menu dark=include.dark %}
{% endunless %} </div>
</aside> </aside>
pages/_includes/layout/topmenu.html
浏览文件 @ 309fdd55
<div class="d-none d-lg-block navbar {% if include.dark %}navbar-dark{% else %}navbar-light{% endif %} navbar-expand-lg"> <div class="layout-area-menu navbar {% if include.dark %}navbar-dark{% else %}navbar-light{% endif %}">
<div class="container"> <div class="container">
{% include layout/menu.html top=true %} {% include layout/menu.html top=true %}
</div> </div>
</div> </div>
<div class="layout-area-menu-backdrop" data-toggle="menubar"></div>
pages/_includes/layout/topnav.html
浏览文件 @ 309fdd55
<header class="navbar navbar-expand-lg {% if include.dark %}navbar-dark bg-dark text-white{% else %}navbar-light{% endif %}{% if include.sticky %} navbar-sticky{% endif %}"> <header class="layout-area-topnav navbar navbar-expand-lg {% if include.dark %}navbar-dark bg-dark text-white{% else %}navbar-light{% endif %}{% if include.sticky %} navbar-sticky{% endif %}">
<div class="container{% if include.fluid %} container-fluid{% endif %}"> <div class="container{% if include.fluid %} container-fluid{% endif %}">
{% include parts/navbar.html logo=true search=true user-menu=1 person=1 dark=include.dark notifications=true %} {% include parts/navbar.html logo=true search=true user-menu=1 person=1 dark=include.dark notifications=true %}
</div> </div>
......
pages/_layouts/base.html
浏览文件 @ 309fdd55
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<html lang="en" {% if page.rtl %} dir="rtl" {% endif %}> <html lang="en" {% if page.rtl %} dir="rtl" {% endif %}>
<head> <head>
<meta charset="utf-8"/> <meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/> <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<meta http-equiv="Content-Language" content="en"/> <meta http-equiv="Content-Language" content="en"/>
...@@ -32,8 +32,7 @@ ...@@ -32,8 +32,7 @@
<style>body { display: none; }</style> <style>body { display: none; }</style>
</head> </head>
<body <body class="antialiased {% if page.dark-theme %} theme-dark{% endif %}{% if layout.body-class %} {{ layout.body-class }}{% endif %}{% if page.body-class %} {{ page.body-class }}{% endif %}">
class="antialiased {% if page.dark-theme %} theme-dark{% endif %}{% if layout.body-class %} {{ layout.body-class }}{% endif %}{% if page.body-class %} {{ page.body-class }}{% endif %}">
{{ content}} {{ content}}
......
pages/_layouts/default.html
浏览文件 @ 309fdd55
...@@ -2,16 +2,12 @@ ...@@ -2,16 +2,12 @@
layout: base layout: base
--- ---
<div class="layout d-flex flex-row vh-100"> <div class="layout{% if page.site-layout %} {{ page.site-layout }}{% endif %}">
{% if page.nav-side %}
{% include layout/sidenav.html dark=page.nav-dark folded=page.nav-folded fixed=page.nav-fixed right=page.nav-right %}
{% endif %}
<div class="layout-main d-flex flex-column flex-fill max-w-full"> {% include layout/topnav.html dark=page.header-dark sticky=page.header-sticky %}
{% unless page.nav-side %} {% include layout/topmenu.html %}
{% include layout/topnav.html dark=page.header-dark sticky=page.header-sticky %}
{% include layout/topmenu.html %} <div class="layout-area-main">
{% endunless %}
<main class="container{% if page.container-size %} container-{{ page.container-size }}{% endif %}{% if page.fluid %}-fluid{% endif %} my-4 flex-fill"> <main class="container{% if page.container-size %} container-{{ page.container-size }}{% endif %}{% if page.fluid %}-fluid{% endif %} my-4 flex-fill">
{% include layout/page-title.html %} {% include layout/page-title.html %}
......
pages/layout-navbar-dark.html
浏览文件 @ 309fdd55
--- ---
title: Sidebar white title: Sidebar white
menu: layout.sidebar-white menu: layout.sidebar-white
nav-side: true sidenav: true
nav-dark: true nav-dark: true
page-title: Dashboard page-title: Dashboard
menu: layouts menu: layouts
......
pages/layout-navbar-folded.html
浏览文件 @ 309fdd55
--- ---
title: Folded sidebar title: Folded sidebar
menu: layout.sidebar-folded menu: layout.sidebar-folded
nav-side: true sidenav: true
nav-folded: true nav-folded: true
nav-dark: true nav-dark: true
page-title: Dashboard page-title: Dashboard
......
pages/layout-navbar-left.html
浏览文件 @ 309fdd55
--- ---
title: Sidebar left title: Sidebar left
menu: layout.sidebar-left menu: layout.sidebar-left
nav-side: true sidenav: true
page-title: Dashboard page-title: Dashboard
menu: layouts menu: layouts
--- ---
......
pages/layout-navbar-right.html
浏览文件 @ 309fdd55
--- ---
title: Sidebar right title: Sidebar right
menu: layout.sidebar-right menu: layout.sidebar-right
nav-side: true sidenav: true
nav-right: true nav-right: true
page-title: Dashboard page-title: Dashboard
menu: layouts menu: layouts
......
pages/layout-test.html 0 → 100644
浏览文件 @ 309fdd55
---
title: Layout test
sidenav: true
sidenav-dark: true
site-layout: layout-collapsed-sm
---
<div class="card" id="card-test">
<div class="card-body">
<a href="#" class="btn btn-secondary btn-block" data-toggle="menubar">sidebar</a>
<div id="card-body"></div>
<div>
<h1>Well, she turned me into a newt.</h1>
<p>We want a shrubbery!! Burn her anyway! You don't vote for kings. Where'd you get the coconuts?</p>
<p>And this isn't my nose. This is a false one. But you are dressed as one… Oh, ow! I don't want to talk to you no more, you empty-headed animal food trough water! <strong> I fart in your general direction!</strong> <em> Your mother was a hamster and your father smelt of elderberries!</em> Now leave before I am forced to taunt you a second time!</p>
<h2>Burn her!</h2>
<p>We shall say 'Ni' again to you, if you do not appease us. The swallow may fly south with the sun, and the house martin or the plover may seek warmer climes in winter, yet these are not strangers to our land.</p>
<ol>
<li>Oh, ow!</li><li>Be quiet!</li><li>Well, we did do the nose.</li>
</ol>
<h3>What a strange person.</h3>
<p>Well, she turned me into a newt. And the hat. She's a witch! Well, how'd you become king, then? She looks like one. Look, my liege!</p>
<ul>
<li>We found them.</li><li>Well, how'd you become king, then?</li><li>Did you dress her up like this?</li>
</ul>
<p>It's only a model. I'm not a witch. Who's that then? Did you dress her up like this? Look, my liege!</p>
<p>Well, she turned me into a newt. The Lady of the Lake, her arm clad in the purest shimmering samite, held aloft Excalibur from the bosom of the water, signifying by divine providence that I, Arthur, was to carry Excalibur. That is why I am your king.</p>
<p>Oh, ow! Look, my liege! Burn her! You can't expect to wield supreme power just 'cause some watery tart threw a sword at you! Well, Mercia's a temperate zone!</p>
<p>Well, how'd you become king, then? How do you know she is a witch? We shall say 'Ni' again to you, if you do not appease us. You can't expect to wield supreme power just 'cause some watery tart threw a sword at you!</p>
<p>Look, my liege! I dunno. Must be a king. A newt? What do you mean? Oh, ow! He hasn't got shit all over him.</p>
<p>Now, look here, my good man. She looks like one. And this isn't my nose. This is a false one. Bring her forward!</p>
<p>You can't expect to wield supreme power just 'cause some watery tart threw a sword at you! Camelot! Well, how'd you become king, then? Why?</p>
<p>And the hat. She's a witch! It's only a model. Well, how'd you become king, then? Well, I didn't vote for you. Why?</p>
<p>Ni! Ni! Ni! Ni! Ni! Ni! Ni! Ni! Camelot! We shall say 'Ni' again to you, if you do not appease us. Oh! Come and see the violence inherent in the system! Help, help, I'm being repressed!</p>
<p>Why do you think that she is a witch? Knights of Ni, we are but simple travelers who seek the enchanter who lives beyond these woods. Where'd you get the coconuts? …Are you suggesting that coconuts migrate?</p>
<p>Well, what do you want? Did you dress her up like this? Knights of Ni, we are but simple travelers who seek the enchanter who lives beyond these woods. On second thoughts, let's not go there. It is a silly place.</p>
</div>
</div>
</div>
{% capture_global scripts %}
<script>
$(document).ready(function () {
var $test_el = $('#card-test'),
$test_body_el = $('#card-body'),
test_width = function () {
$test_body_el.text($test_el.width());
};
test_width();
$(window).on('resize', function () {
test_width();
});
});
</script>
{% endcapture_global %}
scss/_variables.scss
浏览文件 @ 309fdd55
...@@ -175,7 +175,6 @@ $sizes-percentage: ( ...@@ -175,7 +175,6 @@ $sizes-percentage: (
) !default; ) !default;
$loader-size: 2.5rem !default;
$generate-social-colors: true !default; $generate-social-colors: true !default;
$generate-color-hues: true !default; $generate-color-hues: true !default;
...@@ -183,16 +182,6 @@ $generate-colors: true !default; ...@@ -183,16 +182,6 @@ $generate-colors: true !default;
$enable-gradients: false !default; $enable-gradients: false !default;
$grid-gutter-width: 24px !default;
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1280px
) !default;
$container-max-widths: ( $container-max-widths: (
sm: 540px, sm: 540px,
md: 720px, md: 720px,
...@@ -257,6 +246,19 @@ $dropdown-padding-y: .5rem !default; ...@@ -257,6 +246,19 @@ $dropdown-padding-y: .5rem !default;
$dropdown-link-hover-bg: $hover-bg !default; $dropdown-link-hover-bg: $hover-bg !default;
$dropdown-link-hover-color: inherit !default; $dropdown-link-hover-color: inherit !default;
//grid
$grid-gutter-width: 1.5rem !default;
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1280px
) !default;
//loader
$loader-size: 2.5rem !default;
//navbar //navbar
$navbar-bg: $white !default; $navbar-bg: $white !default;
$navbar-border-color: $border-color !default; $navbar-border-color: $border-color !default;
...@@ -278,7 +280,7 @@ $pagination-disabled-color: rgba($text-muted, .5) !default; ...@@ -278,7 +280,7 @@ $pagination-disabled-color: rgba($text-muted, .5) !default;
$sidenav-width: 16rem !default; $sidenav-width: 16rem !default;
$sidenav-folded-width: 4rem !default; $sidenav-folded-width: 4rem !default;
$sidenav-bg: $white !default; $sidenav-bg: $white !default;
$sidenav-border-color: $border-color !default; $sidenav-border-color: $border-color-alpha !default;
$sidenav-dark-bg: $dark !default; $sidenav-dark-bg: $dark !default;
$sidenav-link-padding-x: .75rem !default; $sidenav-link-padding-x: .75rem !default;
......
scss/layout/_core.scss
浏览文件 @ 309fdd55
...@@ -5,7 +5,7 @@ html { ...@@ -5,7 +5,7 @@ html {
} }
body { body {
height: 100%; min-height: 100%;
overflow-y: scroll; overflow-y: scroll;
letter-spacing: $body-letter-spacing; letter-spacing: $body-letter-spacing;
touch-action: manipulation; touch-action: manipulation;
......
scss/layout/_layout.scss 0 → 100644
浏览文件 @ 309fdd55
/**
Layout
*/
@mixin menu-side {
align-items: flex-start;
}
@mixin menu-collapsed {
.layout-area-menu {
position: fixed;
left: -($sidenav-width);
top: 0;
bottom: 0;
background: $dark;
color: $white;
width: $sidenav-width;
z-index: $zindex-fixed;
transition: .3s left;
@include menu-side;
}
.layout-area-menu-backdrop {
display: block;
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 100vw;
background: rgba($dark, .1);
z-index: $zindex-fixed - 1;
visibility: hidden;
opacity: 0;
}
@at-root body.menu-visible & {
.layout-area-menu {
left: 0;
}
.layout-area-menu-backdrop {
opacity: 1;
visibility: visible;
}
}
}
.layout {
position: relative;
display: grid;
grid-template:
"head" auto
"menu" auto
"main" auto /
auto;
}
.layout-collapsed {
@each $breakpoint in map-keys($grid-breakpoints) {
$infix: breakpoint-infix($breakpoint);
@if $infix != '' {
@include media-breakpoint-down($breakpoint) {
&#{$infix} {
@include menu-collapsed;
}
}
} @else {
@include menu-collapsed;
}
}
}
.layout-sidebar {
@each $breakpoint in map-keys($grid-breakpoints) {
$infix: breakpoint-infix($breakpoint);
@include media-breakpoint-up($breakpoint) {
&#{$infix} {
grid-template:
"menu head" auto
"menu main" auto /
auto 1fr;
.layout-area-menu {
width: $sidenav-width;
}
}
&-folded#{$infix} {
grid-template:
"menu head" auto
"menu main" auto /
auto 1fr;
.layout-area-menu {
width: $sidenav-folded-width;
}
}
}
}
}
.layout-area-topnav {
grid-area: head;
}
.layout-area-menu {
grid-area: menu;
}
.layout-area-menu-backdrop {
display: none;
}
.layout-area-main {
grid-area: main;
}
scss/layout/_navbar.scss
浏览文件 @ 309fdd55
...@@ -11,17 +11,16 @@ Navbar logo ...@@ -11,17 +11,16 @@ Navbar logo
height: 2rem; height: 2rem;
} }
//.nav-link {
// &.active {
// color: $primary;
// }
//}
//
.navbar-nav { .navbar-nav {
flex-direction: row; flex-direction: row;
margin-right: -($navbar-padding-x); margin-right: -($navbar-padding-x);
margin-left: -($navbar-padding-x); margin-left: -($navbar-padding-x);
.nav-link {
padding-left: $navbar-nav-link-padding-x;
padding-right: $navbar-nav-link-padding-x;
}
.nav-item.active .nav-link { .nav-item.active .nav-link {
position: relative; position: relative;
...@@ -29,427 +28,12 @@ Navbar logo ...@@ -29,427 +28,12 @@ Navbar logo
content: ''; content: '';
position: absolute; position: absolute;
bottom: calc(-#{$navbar-padding-y} - 1px); bottom: subtract(-$navbar-padding-y, 1px);
right: $navbar-nav-link-padding-x; right: $navbar-nav-link-padding-x;
left: $navbar-nav-link-padding-x; left: $navbar-nav-link-padding-x;
border-bottom: 1px solid $primary; border-bottom: 1px solid $primary;
} }
} }
//
// .nav-link {
// display: flex;
// color: $text-muted;
// transition: .3s color;
//
// &:hover {
// color: $body-color;
// }
// }
//
// .nav-item {
// position: relative;
// }
//
// .navbar-nav {
// padding-right: .5rem;
// padding-left: .5rem;
// }
}
//.navbar:not(.navbar-side) .navbar-subnav {
// position: absolute;
// top: 100%;
// left: 0;
// z-index: $zindex-tooltip;
// width: 12rem;
// padding: .25rem;
// font-size: $h5-font-size;
// background: #fff;
// border: 1px solid $border-color;
// border-radius: 3px;
// box-shadow: 0 .5rem 1rem rgba(18, 18, 18, .15);
//
// .nav {
// flex-direction: column;
// }
//}
//
///**
//Navbar brand
// */
//.navbar-brand {
// display: flex;
// align-items: center;
// justify-content: center;
// padding: 0;
// margin: 0;
//
// @at-root a#{&} {
// transition: .3s opacity;
//
// &:hover {
// opacity: .8;
// }
// }
//}
//
//.navbar-brand-logo {
// height: 2rem;
//}
//
///**
//Navbar toggler
// */
//.navbar-toggler {
// padding: 0;
// border: 0;
//}
//
$navbar-side-padding-x: 1rem;
$navbar-side-padding-y: 1rem;
$navbar-active-color: $primary;
/*
Sidebar
*/
.navbar-side {
flex-direction: column;
flex-wrap: nowrap;
align-items: inherit;
justify-content: start;
width: $sidenav-width;
min-width: $sidenav-width;
margin: 0;
overflow: auto;
pointer-events: inherit;
user-select: none;
background: $sidenav-bg;
padding: $navbar-side-padding-y $navbar-side-padding-x;
box-shadow: 1px 0 $sidenav-border-color;
.navbar-brand {
text-align: center;
padding: 0;
margin: 0 0 1.5rem;
display: block;
}
.navbar-nav {
flex-direction: column;
margin-left: -$navbar-side-padding-y;
margin-right: -$navbar-side-padding-y;
.nav-link {
padding: .5rem $navbar-side-padding-y;
}
.nav-item.active .nav-link {
box-shadow: inset 2px 0 $navbar-active-color;
background: rgba($navbar-active-color, .04);
&:after {
content: none;
}
}
}
.nav-icon {
width: 1.5rem;
}
/*
Right navbar
*/
&.navbar-right {
order: 9;
box-shadow: -1px 0 $sidenav-border-color;
}
/*
Folded navbar
*/
&.navbar-folded {
width: $sidenav-folded-width;
min-width: $sidenav-folded-width;
.navbar-heading {
display: none;
}
.nav-text {
display: none;
}
.nav-icon {
margin: .25rem 0;
width: 100%;
font-size: 1.125rem;
.icon {
margin: 0 auto;
stroke-width: 1.5;
}
}
}
.navbar-heading {
@include subheader;
margin: 0 0 .5rem;
}
.nav-link {
}
// .nav {
// flex-direction: column;
// }
//
// .nav-link {
// display: flex;
// align-items: center;
// height: 2.5rem;
// padding: 0 $navbar-padding-x;
// color: $text-muted;
// box-shadow: inset 2px 0 0 0 transparent;
// transition: .3s background, .3s box-shadow;
//
// &[aria-expanded="true"],
// &:hover {
// background: rgba($link-color, .04);
// border-color: $primary;
// box-shadow: inset 2px 0 0 0 $primary;
// }
//
// > .icon {
// width: 2rem;
// }
//
// &[data-toggle="collapse"] {
// &::after {
// display: block;
// margin-left: auto;
// font-family: $font-icons !important;
// content: "";
// transition: transform .3s;
// }
//
// &[aria-expanded="true"]::after {
// transform: rotate(-180deg);
// }
// }
// }
//
// &:not(.navbar-folded) {
// &[data-toggle="collapse"][aria-expanded="true"] {
// background: none;
// box-shadow: none;
// }
// }
//
// &:not(.hide-navbar-folded) {
// //.nav-item .nav-item .nav-link {
// // padding-left: 2.5rem;
// //}
// //
// //.nav-item .nav-item .nav-item .nav-link {
// // padding-left: 3.5rem;
// //}
// //
// //.nav-item .nav-item .nav-item .nav-item .nav-link {
// // padding-left: 4.5rem;
// //}
// }
//
// .navbar-brand {
// height: 2.5rem;
// text-align: center;
// }
//
//
// .navbar-nav {
// flex-direction: column;
// }
} }
///*
//Fixed navbar
// */
//.navbar-fixed {
// position: fixed;
// top: 0;
// bottom: 0;
// z-index: $zindex-sticky;
//
// &.navbar-side {
// top: 0;
// bottom: 0;
// left: 0;
//
// &.navbar-right {
// right: 0;
// left: auto;
// }
// }
//}
//
//.navbar-side {
// display: none;
//
// @include media-breakpoint-up(xl) {
// display: flex;
//
// &.navbar-fixed {
// & ~ .layout-main {
// margin-left: $sidenav-width;
// }
//
// &.navbar-right ~ .layout-main {
// margin-right: $sidenav-width;
// margin-left: 0;
// }
// }
// }
//
// &.navbar-folded {
// display: flex;
//
// &.navbar-fixed {
// @include media-breakpoint-up(lg) {
//
// & ~ .layout-main {
// margin-left: $sidenav-folded-width;
// }
//
// &.navbar-right ~ .layout-main {
// margin-right: $sidenav-folded-width;
// margin-left: 0;
// }
// }
// }
// }
//}
///*
//Dark navbar
// */
//.navbar-dark {
// color: #fff;
// background-color: $sidenav-dark-bg;
//
// .navbar-brand {
// filter: brightness(0) invert(1);
// }
//
// .navbar-divider {
// border-color: rgba(#fff, .2);
// }
//
// .nav-link {
// color: inherit;
// }
//}
//
///**
//Sticky navbar
// */
//.navbar-sticky {
// position: sticky;
// top: 0;
// z-index: 100;
//
// &.navbar-side {
// left: 0;
// }
//}
/**
Folded navbar
*/
//.navbar-folded {
// width: $sidenav-folded-width;
// min-width: $sidenav-folded-width;
//
// .navbar-brand {
// width: 2.5rem;
// }
//
// .navbar-heading {
// display: none;
// }
//
// .nav-text {
// display: none;
// }
//
// .nav-link {
// justify-content: center;
// padding-top: 0;
// padding-bottom: 0;
//
// &[data-toggle="collapse"]::after {
// content: none;
// }
// }
//
// .nav-icon {
// justify-content: center;
// opacity: 1;
// }
//
// .navbar-subnav {
// position: absolute;
// top: 0;
// left: 100%;
// background: #fff;
//
// .nav-text {
// display: block;
// }
//
// .nav-link {
// color: $body-color;
// }
// }
//}
//
//.nav-icon {
// display: flex;
// flex-shrink: 0;
// align-items: center;
// width: 1.5rem;
// font-size: px2rem(15px);
// border-radius: 100%;
// opacity: .8;
//
// .icon {
// font-size: inherit;
// }
//}
//.nav-text {
// display: flex;
// align-items: center;
// width: 100%;
//}
/**
Utils
*/
.hide-navbar-folded {
@at-root .navbar-side.navbar-folded & {
display: none;
}
}
.hide-navbar-expanded {
@at-root .navbar-side:not(.navbar-folded) & {
display: none;
}
}
scss/layout/_sidenav.scss 0 → 100644
浏览文件 @ 309fdd55
$sidenav-padding-x: 1rem;
$sidenav-padding-y: 1rem;
$sidenav-active-color: $primary;
$breakpoints: $grid-breakpoints;
@mixin sidenav-overlay {
display: none;
body.show-sidenav & {
display: block;
position: fixed;
z-index: $zindex-fixed - 1;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgba($dark, .1);
}
}
@mixin sidenav-base {
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: $zindex-fixed;
opacity: 0;
transform: translateX(-100%);
transition: .3s opacity, .3s transform;
will-change: transform;
width: $sidenav-width;
min-width: $sidenav-width;
&.sidenav-right {
left: auto;
right: 0;
transform: translateX(100%);
}
body.show-sidenav & {
@include sidenav-visible-common;
}
}
@mixin sidenav-visible-common {
transform: translateX(0) !important;
opacity: 1;
}
@mixin sidenav-expanded {
@include sidenav-visible-common;
width: $sidenav-width;
min-width: $sidenav-width;
&:not(.sidenav-right) ~ .layout-main {
//padding-left: $sidenav-width;
}
&.sidenav-right ~ .layout-main {
//padding-right: $sidenav-width;
}
& ~ .sidenav-overlay {
display: none !important;
}
}
@mixin sidenav-folded {
@include sidenav-visible-common;
width: $sidenav-folded-width;
min-width: $sidenav-folded-width;
&:not(.sidenav-right) ~ .layout-main {
//padding-left: $sidenav-folded-width;
}
&.sidenav-right ~ .layout-main {
//padding-right: $sidenav-folded-width;
}
& ~ .sidenav-overlay {
display: none !important;
}
}
/*
Sidebar
*/
.sidenav {
@include sidenav-base;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-items: inherit;
justify-content: flex-start;
margin: 0;
overflow: auto;
pointer-events: inherit;
user-select: none;
background: $sidenav-bg;
padding: $sidenav-padding-y $sidenav-padding-x;
padding: 0; //todo: remove
box-shadow: 1px 0 $sidenav-border-color;
/*
Right navbar
*/
&.sidenav-right {
order: 9;
box-shadow: -1px 0 $sidenav-border-color;
}
}
.sidenav-overlay {
@include sidenav-overlay;
}
/*
Folded navbar
*/
.sidenav-folded {
@each $breakpoint in map-keys($breakpoints) {
$infix: breakpoint-infix($breakpoint, $breakpoints);
@include media-breakpoint-up($breakpoint, $breakpoints) {
&#{$infix} {
@include sidenav-folded;
}
}
}
}
.sidenav-expanded {
@each $breakpoint in map-keys($breakpoints) {
$infix: breakpoint-infix($breakpoint, $breakpoints);
@include media-breakpoint-up($breakpoint, $breakpoints) {
&#{$infix} {
@include sidenav-expanded;
}
}
}
}
/**
Utils
*/
.hide-sidenav-folded {
.sidenav.sidenav-folded & {
display: none;
}
}
.hide-sidenav-expanded {
.sidenav:not(.sidenav-folded) & {
display: none;
}
}
scss/tabler.scss
浏览文件 @ 309fdd55
...@@ -11,7 +11,9 @@ ...@@ -11,7 +11,9 @@
@import "fonts/webfonts"; @import "fonts/webfonts";
@import "layout/core"; @import "layout/core";
@import "layout/layout";
@import "layout/navbar"; @import "layout/navbar";
@import "layout/sidenav";
@import "layout/page"; @import "layout/page";
@import "ui/alerts"; @import "ui/alerts";
......
scss/ui/_lists.scss
浏览文件 @ 309fdd55
...@@ -56,7 +56,7 @@ ...@@ -56,7 +56,7 @@
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
left: calc(7.5rem + 2px); left: add(7.5rem, 2px);
z-index: 1; z-index: 1;
display: block; display: block;
width: 4px; width: 4px;
......
scss/ui/_steps.scss
浏览文件 @ 309fdd55
...@@ -2,10 +2,10 @@ ...@@ -2,10 +2,10 @@
@mixin step-size($border-width, $dot-size: 1rem) { @mixin step-size($border-width, $dot-size: 1rem) {
.step-item { .step-item {
padding-top: calc(#{$dot-size} + 4px); padding-top: add($dot-size, 4px);
&::after { &::after {
top: calc(#{$dot-size / 2} + 2px); top: add($dot-size / 2, 2px);
height: $border-width; height: $border-width;
} }
......
scss/vendor/_jqvmap.scss
浏览文件 @ 309fdd55
.jqvmap-zoomin, .jqvmap-zoomin,
.jqvmap-zoomout { .jqvmap-zoomout {
@extend .btn;
@extend .btn-sm;
@extend .btn-secondary;
height: auto; height: auto;
width: auto; width: auto;
left: .5rem; left: .5rem;
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或