mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2025-02-02 12:54:13 +03:00
Refactored drawer and layout classes. #822 changed responsive nature to be declarative based on mdb-drawer-open-* classes, and allow plain mdb-drawer-open to signal the drawer should render open.
This commit is contained in:
Kevin Ross
parent
55f5b2c8af
commit
bf0ce02782
|
|
@ -19,19 +19,30 @@ a, a:hover {
|
|||
color: rgba(255, 255, 255, 0.56);
|
||||
}
|
||||
|
||||
.mdb-layout {
|
||||
.mdb-layout-header {
|
||||
background-color: $grey-100;
|
||||
color: $grey-600;
|
||||
|
||||
.mdb-layout-header {
|
||||
background-color: $grey-100;
|
||||
color: $grey-600;
|
||||
}
|
||||
> .navbar {
|
||||
// .navbar is not flex based by default, so have to vertical align with padding.
|
||||
// If this were my own app, I would flex position items in my navbar and stick .mdb-layout-header on my existing .navbar
|
||||
// instead of wrapping it. But nonetheless, this example shows how this can work with minimal markup to match an MDL design.
|
||||
$header-height: 3.5rem !default; // 56px
|
||||
$line-height: 1.5;
|
||||
|
||||
.mdb-layout-content {
|
||||
padding-top: .5rem;
|
||||
background-color: $grey-100;
|
||||
min-height: $header-height;
|
||||
|
||||
$padding: ($header-height - (1rem * $line-height)) / 2;
|
||||
padding-top: $padding;
|
||||
padding-bottom: $padding;
|
||||
}
|
||||
}
|
||||
|
||||
.mdb-layout-content {
|
||||
padding-top: .5rem;
|
||||
background-color: $grey-100;
|
||||
}
|
||||
|
||||
.mdb-layout-drawer {
|
||||
background-color: $blue-grey-900;
|
||||
color: $blue-grey-50;
|
||||
|
|
|
|||
|
|
@ -7,8 +7,8 @@ group: material-design
|
|||
<!-- Custom styles for this template -->
|
||||
<link href="example.css" rel="stylesheet">
|
||||
|
||||
<div class="mdb-layout-container">
|
||||
<div class="mdb-layout mdb-drawer-fixed-left">
|
||||
<div class="mdb-layout-canvas">
|
||||
<div class="mdb-layout-container mdb-drawer-fixed-left mdb-drawer-open-md">
|
||||
<header class="mdb-layout-header">
|
||||
<!--
|
||||
<div class="collapse" id="navbar-header">
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 5;
|
||||
z-index: 5; // over a header and content
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
|
|
@ -39,41 +39,65 @@
|
|||
}
|
||||
}
|
||||
|
||||
// FIXME: the below needs to happen if it is the right size OR if the drawer is visible. Need to look at collapse or collapseInline to see if it can help us here.
|
||||
//----------------
|
||||
// Sizing and positioning below here
|
||||
//
|
||||
// TODO create a mixin for the below that can generate a named set of styles so that you can use multiple drawer sizes i.e. something like mdb-layout-drawer-100, mdb-drawer-fixed-right-100, etc.
|
||||
|
||||
.mdb-layout-drawer {
|
||||
width: $mdb-layout-drawer-width;
|
||||
}
|
||||
|
||||
// initial position of drawer (closed)
|
||||
.mdb-drawer-fixed-left {
|
||||
|
||||
// Responsive Header
|
||||
> .mdb-layout-header {
|
||||
@include media-breakpoint-up(lg) {
|
||||
width: calc(100% - #{$mdb-layout-drawer-sm});
|
||||
margin-left: $mdb-layout-drawer-sm;
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive Drawer Width
|
||||
> .mdb-layout-drawer {
|
||||
width: $mdb-layout-drawer-sm;
|
||||
transform: translateX(-$mdb-layout-drawer-sm - 10px); // initially way off screen
|
||||
|
||||
//&.is-visible {
|
||||
// transform: translateX(0);
|
||||
// ~ .mdb-layout-content.mdb-layout-content {
|
||||
// overflow: hidden;
|
||||
// }
|
||||
//}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
transform: translateX(0);
|
||||
}
|
||||
transform: translateX(-$mdb-layout-drawer-width - 10px); // initially way off screen
|
||||
}
|
||||
|
||||
// Responsive Content with fixed drawer
|
||||
> .mdb-layout-content {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
margin-left: $mdb-layout-drawer-sm;
|
||||
// Marker class for both triggering the opening of the drawer (i.e. javascript #addClass('.mdb-drawer-open')), as well
|
||||
// as responsive sizes (i.e. mdb-drawer-open-md will open once the browser is wider than 768px).
|
||||
//
|
||||
// To create these, we need iterate over the standard grid breakpoints, but we also need styles for the simpler
|
||||
// `mdb-drawer-open` without a size (for triggered openings). Since the xs size is 0,
|
||||
// instead of using `mdb-drawer-open-xs` (which is mostly meaningless), we can just use `mdb-drawer-open` a.k.a always open.
|
||||
// Therefore, this will generate: mdb-drawer-open, mdb-drawer-open-sm, mdb-drawer-open-md, mdb-drawer-open-lg
|
||||
.mdb-drawer-open {
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
|
||||
$name: "&-#{$breakpoint}";
|
||||
@if $breakpoint == xs {
|
||||
$name: "&";
|
||||
}
|
||||
|
||||
#{unquote($name)} {
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
//
|
||||
&.mdb-drawer-fixed-left {
|
||||
// Responsive Header
|
||||
> .mdb-layout-header {
|
||||
width: calc(100% - #{$mdb-layout-drawer-width});
|
||||
margin-left: $mdb-layout-drawer-width;
|
||||
}
|
||||
|
||||
// Responsive Drawer Width
|
||||
> .mdb-layout-drawer {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
// Responsive Content with fixed drawer
|
||||
> .mdb-layout-content {
|
||||
margin-left: $mdb-layout-drawer-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,30 +1,32 @@
|
|||
// this is a set of flex-based layout containers necessary for components such as the drawer.
|
||||
// This is a set of flex-based layout containers necessary for components such as the drawer.
|
||||
// It allows for flex based positioning such as sticky header and footer inside an mdb-layout, with a
|
||||
// mdb-layout-content that scrolls.
|
||||
|
||||
//WARNING: VERY MUCH A WORK IN PROGRESS!!!!!!!!!!!!!!!!!!!!
|
||||
|
||||
.mdb-layout-container {
|
||||
// First element
|
||||
.mdb-layout-canvas {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
// Main layout class.
|
||||
.mdb-layout {
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
flex-direction: column; // allows for sticky header and footer
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
}
|
||||
|
||||
// Header
|
||||
.mdb-layout-header { // navbar
|
||||
// FIXME: it would be nice to stick this directly on the navbar, but navbars are not flex ready, so this is relegated to be a container at this time.
|
||||
z-index: 3;
|
||||
box-sizing: border-box;
|
||||
// Primary layout container, belongs inside a mdb-layout-canvas.
|
||||
.mdb-layout-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
flex-direction: column; // allows for sticky header and footer
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
}
|
||||
|
||||
// Header layout (fixed top), belongs in a mdb-layout-container
|
||||
.mdb-layout-header {
|
||||
// FIXME: it would be nice to stick this directly on a .navbar, but .navbars are not flex ready, so this is relegated to be a container at this time.
|
||||
z-index: 2; // above content
|
||||
display: flex;
|
||||
width: 100%;
|
||||
max-height: 1000px;
|
||||
|
|
@ -32,35 +34,12 @@
|
|||
flex-wrap: nowrap;
|
||||
flex-shrink: 0;
|
||||
justify-content: flex-start;
|
||||
transition-property: max-height;
|
||||
|
||||
> .navbar { // heights for common scenarios such as a header with a navbar
|
||||
|
||||
// Current navbar is not flex enabled https://github.com/twbs/bootstrap/issues/18875
|
||||
// - with flex a vertical align is a breeze
|
||||
// - with standard layout, we need to use padding instead of height to layout.
|
||||
min-height: $mdb-layout-mobile-header-height;
|
||||
|
||||
// FIXME: hack remove padding once the flex layout works properly
|
||||
$padding: ($mdb-layout-mobile-header-height - (1rem * $line-height)) / 2;
|
||||
padding-top: $padding;
|
||||
padding-bottom: $padding;
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
min-height: $mdb-layout-desktop-header-height;
|
||||
|
||||
// FIXME: hack remove padding once the flex layout works properly
|
||||
$padding: ($mdb-layout-desktop-header-height - (1rem * $line-height)) / 2;
|
||||
padding-top: $padding;
|
||||
padding-bottom: $padding;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Content.
|
||||
// Content layout, belongs in a mdb-layout-container
|
||||
.mdb-layout-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
z-index: 1; // under a header
|
||||
display: inline-block;
|
||||
//-ms-flex: 0 1 auto; // Fix IE10 bug.
|
||||
overflow-x: hidden;
|
||||
|
|
@ -68,3 +47,4 @@
|
|||
flex-grow: 1;
|
||||
-webkit-overflow-scrolling: touch; // TODO: why?
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
@import "mixins/utilities";
|
||||
@import "mixins/animations";
|
||||
@import "mixins/type";
|
||||
@import "mixins/drawer";
|
||||
@import "mixins/shadows";
|
||||
@import "mixins/variations";
|
||||
@import "mixins/forms";
|
||||
|
|
|
|||
|
|
@ -1,5 +1 @@
|
|||
@mixin collapse-open-or-breakpoint-up() {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
// nothing yet, there was something, but it wasn't any good, but we expect to put something here soon!
|
||||
|
|
|
|||
|
|
@ -3,4 +3,4 @@ $mdb-layout-drawer-bg-color: rgba($grey-50, 1) !default;
|
|||
$mdb-layout-drawer-text-color: rgba($grey-800, 1) !default;
|
||||
|
||||
// Sizing
|
||||
$mdb-layout-drawer-sm: 240px !default;
|
||||
$mdb-layout-drawer-width: 240px !default;
|
||||
|
|
|
|||
|
|
@ -1,4 +1 @@
|
|||
// General layout header height.
|
||||
// FIXME: is this really necessary or something to be considered custom?
|
||||
$mdb-layout-mobile-header-height: 3.5rem !default; // 56px
|
||||
$mdb-layout-desktop-header-height: 4rem !default; // 64px
|
||||
// Layout variables - evidently nothing to see here...remove now?
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user