mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-11-23 01:57:06 +03:00
#822 initial drawer implementation. #823 wip card implementation. #805 initial dashboard example implementation. More work to be done, but this is a reasonably working checkpoint.
This commit is contained in:
Kevin Ross
parent
542cbf5718
commit
d3fbacf4fd
|
|
@ -1,117 +0,0 @@
|
|||
---
|
||||
---
|
||||
|
||||
body {
|
||||
/* Show it's not fixed to the top */
|
||||
min-height: 75rem;
|
||||
padding-top: 6rem;
|
||||
}
|
||||
|
||||
//
|
||||
///*
|
||||
// * Base structure
|
||||
// */
|
||||
//
|
||||
///* Move down content because we have a fixed navbar that is 50px tall */
|
||||
//body {
|
||||
// padding-top: 50px;
|
||||
//}
|
||||
//
|
||||
//
|
||||
///*
|
||||
// * Global add-ons
|
||||
// */
|
||||
//
|
||||
//.sub-header {
|
||||
// padding-bottom: 10px;
|
||||
// border-bottom: 1px solid #eee;
|
||||
//}
|
||||
//
|
||||
///*
|
||||
// * Top navigation
|
||||
// * Hide default border to remove 1px line.
|
||||
// */
|
||||
//.navbar-fixed-top {
|
||||
// border: 0;
|
||||
//}
|
||||
//
|
||||
///*
|
||||
// * Sidebar
|
||||
// */
|
||||
//
|
||||
///* Hide for mobile, show later */
|
||||
//.sidebar {
|
||||
// display: none;
|
||||
//}
|
||||
//@media (min-width: 768px) {
|
||||
// .sidebar {
|
||||
// position: fixed;
|
||||
// top: 51px;
|
||||
// bottom: 0;
|
||||
// left: 0;
|
||||
// z-index: 1000;
|
||||
// display: block;
|
||||
// padding: 20px;
|
||||
// overflow-x: hidden;
|
||||
// overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
|
||||
// background-color: #f5f5f5;
|
||||
// border-right: 1px solid #eee;
|
||||
// }
|
||||
//}
|
||||
//
|
||||
///* Sidebar navigation */
|
||||
//.nav-sidebar {
|
||||
// margin-right: -21px; /* 20px padding + 1px border */
|
||||
// margin-bottom: 20px;
|
||||
// margin-left: -20px;
|
||||
//}
|
||||
//.nav-sidebar > li > a {
|
||||
// padding-right: 20px;
|
||||
// padding-left: 20px;
|
||||
//}
|
||||
//.nav-sidebar > .active > a {
|
||||
// &,
|
||||
// &:hover,
|
||||
// &:focus {
|
||||
// color: #fff;
|
||||
// background-color: #428bca;
|
||||
// }
|
||||
//}
|
||||
//
|
||||
//
|
||||
///*
|
||||
// * Main content
|
||||
// */
|
||||
//
|
||||
//.main {
|
||||
// padding: 20px;
|
||||
//}
|
||||
//@media (min-width: 768px) {
|
||||
// .main {
|
||||
// padding-right: 40px;
|
||||
// padding-left: 40px;
|
||||
// }
|
||||
//}
|
||||
//.main .page-header {
|
||||
// margin-top: 0;
|
||||
//}
|
||||
//
|
||||
//
|
||||
///*
|
||||
// * Placeholder dashboard ideas
|
||||
// */
|
||||
//
|
||||
//.placeholders {
|
||||
// margin-bottom: 30px;
|
||||
// text-align: center;
|
||||
//}
|
||||
//.placeholders h4 {
|
||||
// margin-bottom: 0;
|
||||
//}
|
||||
//.placeholder {
|
||||
// margin-bottom: 20px;
|
||||
//}
|
||||
//.placeholder img {
|
||||
// display: inline-block;
|
||||
// border-radius: 50%;
|
||||
//}
|
||||
214
docs/examples/dashboard/example.scss
Normal file
214
docs/examples/dashboard/example.scss
Normal file
|
|
@ -0,0 +1,214 @@
|
|||
---
|
||||
---
|
||||
|
||||
//---
|
||||
//---
|
||||
|
||||
$teal-300: #4db6ac !default;
|
||||
$grey-100: #f5f5f5 !default;
|
||||
$grey-600: #757575 !default;
|
||||
$blue-grey-800: #37474f !default;
|
||||
$blue-grey-400: #78909c !default;
|
||||
$blue-grey-900: #263238 !default;
|
||||
$blue-grey-50: #eceff1 !default;
|
||||
$deep-purple-500: #673ab7 !default;
|
||||
|
||||
a, a:hover {
|
||||
color: rgba(255, 255, 255, 0.56);
|
||||
}
|
||||
|
||||
.mdb-layout {
|
||||
|
||||
.mdb-layout-header {
|
||||
background-color: $grey-100;
|
||||
color: $grey-600;
|
||||
}
|
||||
|
||||
.mdb-layout-content {
|
||||
padding-top: .5rem;
|
||||
background-color: $grey-100;
|
||||
}
|
||||
}
|
||||
|
||||
.mdb-layout-drawer {
|
||||
background-color: $blue-grey-900;
|
||||
color: $blue-grey-50;
|
||||
font-size: .875rem;
|
||||
|
||||
> header {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
padding: 16px;
|
||||
height: 151px;
|
||||
|
||||
.avatar {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 24px;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.account {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
|
||||
.dropdown {
|
||||
margin-left: auto;
|
||||
.dropdown-menu {
|
||||
font-size: .875rem;
|
||||
|
||||
.dropdown-item {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mdl-navigation {
|
||||
flex-grow: 1;
|
||||
background-color: $blue-grey-800;
|
||||
z-index: -2;
|
||||
|
||||
.mdb-list-group-item {
|
||||
padding-left: 2.5rem;
|
||||
padding-right: 2.5rem;
|
||||
font-size: .8125rem;
|
||||
font-weight: 500;
|
||||
color: rgba(255, 255, 255, 0.56);
|
||||
|
||||
&:hover {
|
||||
background-color: #00BCD4;
|
||||
color: #37474F;
|
||||
}
|
||||
|
||||
.material-icons {
|
||||
color: $blue-grey-400;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.demo-chart {
|
||||
&:nth-child(1) {
|
||||
color: #ACEC00;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
color: #00BBD6;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
color: #BA65C9;
|
||||
}
|
||||
|
||||
&:nth-child(4) {
|
||||
color: #EF3C79;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-graphs {
|
||||
padding: 16px 32px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
|
||||
.demo-graph {
|
||||
&:nth-child(1) {
|
||||
color: #00b9d8;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
color: #d9006e;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* TODO: Find a proper solution to have the graphs
|
||||
* not float around outside their container in IE10/11.
|
||||
* Using a browserhacks.com solution for now.
|
||||
*/
|
||||
:-ms-input-placeholder,
|
||||
:root .demo-graphs {
|
||||
min-height: 664px;
|
||||
}
|
||||
|
||||
:-ms-input-placeholder,
|
||||
:root .demo-graph {
|
||||
max-height: 300px;
|
||||
}
|
||||
|
||||
/* TODO end */
|
||||
|
||||
.demo-cards {
|
||||
|
||||
.card {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.card-text {
|
||||
color: $grey-600
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.demo-updates {
|
||||
.card-header {
|
||||
border: 0; // we are using color as a separator instead of a bottom border, this allows image to meet the bottom edge
|
||||
min-height: 200px;
|
||||
background-color: $teal-300;
|
||||
background-image: url('images/dog.png');
|
||||
background-position: 90% 100%;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
.card-title {
|
||||
// position the title down towards the bottom header with respect to the bg image
|
||||
margin-bottom: 0;
|
||||
padding-top: 8.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
color: #00BCD4;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-options {
|
||||
|
||||
&,
|
||||
.card-footer {
|
||||
background-color: $deep-purple-500;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
.material-icons {
|
||||
margin-left: auto;
|
||||
color: rgba(255, 255, 255, 0.89);
|
||||
}
|
||||
}
|
||||
|
||||
.btn,
|
||||
.checkbox label {
|
||||
color: $blue-grey-50;
|
||||
}
|
||||
|
||||
.checkbox .check {
|
||||
border-color: $blue-grey-50;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
BIN
docs/examples/dashboard/images/android-desktop.png
Normal file
BIN
docs/examples/dashboard/images/android-desktop.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.1 KiB |
BIN
docs/examples/dashboard/images/dog.png
Normal file
BIN
docs/examples/dashboard/images/dog.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.5 KiB |
BIN
docs/examples/dashboard/images/favicon.png
Normal file
BIN
docs/examples/dashboard/images/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 905 B |
BIN
docs/examples/dashboard/images/ios-desktop.png
Normal file
BIN
docs/examples/dashboard/images/ios-desktop.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
docs/examples/dashboard/images/user.jpg
Normal file
BIN
docs/examples/dashboard/images/user.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.8 KiB |
|
|
@ -5,45 +5,270 @@ group: material-design
|
|||
---
|
||||
|
||||
<!-- Custom styles for this template -->
|
||||
<link href="dashboard.css" rel="stylesheet">
|
||||
<link href="example.css" rel="stylesheet">
|
||||
|
||||
<div class="mdb-layout-container">
|
||||
<div class="mdb-layout mdb-layout-fixed-drawer">
|
||||
<header class="mdb-layout-header">
|
||||
<!--
|
||||
<div class="collapse" id="navbar-header">
|
||||
<div class="container-fluid bg-inverse p-a-1">
|
||||
<h3>Collapsed content</h3>
|
||||
<p>Toggleable via the navbar brand.</p>
|
||||
</div>
|
||||
</div>
|
||||
-->
|
||||
<div class="navbar navbar-light bg-faded navbar-static-top">
|
||||
<!--
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-header">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<i class="material-icons">menu</i>
|
||||
</button>
|
||||
-->
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="nav-item">
|
||||
Home
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="nav navbar-nav pull-xs-right">
|
||||
<li class="nav-item">
|
||||
<div class="mdb-form-group mdb-collapse-inline pull-xs-right">
|
||||
<button class="btn mdb-btn-icon" for="search" data-toggle="collapse" data-target="#collapse-search" aria-expanded="false" aria-controls="collapse-search">
|
||||
<i class="material-icons">search</i>
|
||||
</button>
|
||||
<span id="collapse-search" class="collapse">
|
||||
<input class="form-control" type="text" id="search" placeholder="Enter your query...">
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<div class="dropdown">
|
||||
<button class="btn mdb-btn-icon btn-secondary dropdown-toggle" type="button" id="nav-extras-menu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="material-icons">more_vert</i>
|
||||
</button>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="nav-extras-menu">
|
||||
<button class="dropdown-item" type="button">About</button>
|
||||
<button class="dropdown-item" type="button">Contact</button>
|
||||
<button class="dropdown-item" type="button">Legal information</button>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="pos-f-t">
|
||||
<!--div class="collapse" id="navbar-header">
|
||||
<div class="container-fluid bg-inverse p-a-1">
|
||||
<h3>Collapsed content</h3>
|
||||
<p>Toggleable via the navbar brand.</p>
|
||||
<div class="mdb-layout-drawer">
|
||||
<header>
|
||||
<img src="images/user.jpg" class="avatar">
|
||||
<div class="account">
|
||||
<span>hello@example.com</span>
|
||||
<div class="dropdown">
|
||||
<button class="btn mdb-btn-icon dropdown-toggle" type="button" id="nav-account-menu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="material-icons">arrow_drop_down</i>
|
||||
</button>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="nav-account-menu">
|
||||
<a class="dropdown-item">hello@example.com</a>
|
||||
<a class="dropdown-item">info@example.com</a>
|
||||
<a class="dropdown-item"><i class="material-icons">add</i>Add account...</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<ul class="mdl-navigation list-group">
|
||||
<a class="mdb-list-group-item">
|
||||
<i class="material-icons" role="presentation">home</i>Home
|
||||
</a>
|
||||
<a class="mdb-list-group-item">
|
||||
<i class="material-icons" role="presentation">inbox</i>Inbox
|
||||
</a>
|
||||
<a class="mdb-list-group-item">
|
||||
<i class="material-icons" role="presentation">delete</i>Trash
|
||||
</a>
|
||||
<a class="mdb-list-group-item">
|
||||
<i class="material-icons" role="presentation">report</i>Spam
|
||||
</a>
|
||||
<a class="mdb-list-group-item">
|
||||
<i class="material-icons" role="presentation">forum</i>Forums
|
||||
</a>
|
||||
<a class="mdb-list-group-item">
|
||||
<i class="material-icons" role="presentation">flag</i>Updates
|
||||
</a>
|
||||
<a class="mdb-list-group-item">
|
||||
<i class="material-icons" role="presentation">local_offer</i>Promos
|
||||
</a>
|
||||
<a class="mdb-list-group-item">
|
||||
<i class="material-icons" role="presentation">shopping_cart</i>Purchases
|
||||
</a>
|
||||
<a class="mdb-list-group-item">
|
||||
<i class="material-icons" role="presentation">people</i>Social
|
||||
</a>
|
||||
|
||||
<div class="mdb-layout-spacer"></div>
|
||||
|
||||
<a class="mdb-list-group-item">
|
||||
<i class="material-icons" role="presentation">help_outline</i><span class="visuallyhidden">Help</span>
|
||||
</a>
|
||||
</ul>
|
||||
</div>
|
||||
</div-->
|
||||
<div class="navbar navbar-light bg-faded navbar-static-top">
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-header">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<i class="material-icons">menu</i>
|
||||
</button>
|
||||
|
||||
<ul class="nav navbar-nav pull-xs-right">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="#">
|
||||
<i class="material-icons">search</i>
|
||||
</a>
|
||||
<!--form class="form-inline pull-xs-right">
|
||||
<input class="form-control" type="text" placeholder="Search">
|
||||
<button class="btn btn-outline-success" type="submit">Search</button>
|
||||
</form-->
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">
|
||||
<i class="material-icons">more_vert</i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="jumbotron">
|
||||
<h1>Navbar example</h1>
|
||||
<p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser's viewport.</p>
|
||||
<a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs »</a>
|
||||
<main class="mdb-layout-content">
|
||||
<div class="container">
|
||||
<div class="alert alert-info" role="alert">
|
||||
This is an implementation of
|
||||
<a href="http://www.getmdl.io/templates/dashboard/index.html">Material Design Lite's dashboard template</a>. It provides a simple way to compare approaches with source code. Original design and assets credited to the MDL team.
|
||||
<small>(see license)</small>
|
||||
.
|
||||
</div>
|
||||
|
||||
<!-- round charts -->
|
||||
<div class="card card-block">
|
||||
<div class="row">
|
||||
<svg fill="currentColor" width="200px" height="200px" viewBox="0 0 1 1" class="demo-chart mdl-cell col-xs-12 col-sm-6 col-md-3">
|
||||
<use xlink:href="#piechart" mask="url(#piemask)"/>
|
||||
<text x="0.5" y="0.5" font-family="Roboto" font-size="0.3" fill="#888" text-anchor="middle" dy="0.1">82
|
||||
<tspan font-size="0.2" dy="-0.07">%</tspan>
|
||||
</text>
|
||||
</svg>
|
||||
<svg fill="currentColor" width="200px" height="200px" viewBox="0 0 1 1" class="demo-chart mdl-cell col-xs-12 col-sm-6 col-md-3">
|
||||
<use xlink:href="#piechart" mask="url(#piemask)"/>
|
||||
<text x="0.5" y="0.5" font-family="Roboto" font-size="0.3" fill="#888" text-anchor="middle" dy="0.1">82
|
||||
<tspan dy="-0.07" font-size="0.2">%</tspan>
|
||||
</text>
|
||||
</svg>
|
||||
<svg fill="currentColor" width="200px" height="200px" viewBox="0 0 1 1" class="demo-chart mdl-cell col-xs-12 col-sm-6 col-md-3">
|
||||
<use xlink:href="#piechart" mask="url(#piemask)"/>
|
||||
<text x="0.5" y="0.5" font-family="Roboto" font-size="0.3" fill="#888" text-anchor="middle" dy="0.1">82
|
||||
<tspan dy="-0.07" font-size="0.2">%</tspan>
|
||||
</text>
|
||||
</svg>
|
||||
<svg fill="currentColor" width="200px" height="200px" viewBox="0 0 1 1" class="demo-chart mdl-cell col-xs-12 col-sm-6 col-md-3">
|
||||
<use xlink:href="#piechart" mask="url(#piemask)"/>
|
||||
<text x="0.5" y="0.5" font-family="Roboto" font-size="0.3" fill="#888" text-anchor="middle" dy="0.1">82
|
||||
<tspan dy="-0.07" font-size="0.2">%</tspan>
|
||||
</text>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-8">
|
||||
<!-- line charts-->
|
||||
<div class="card card-block">
|
||||
<div class="demo-graphs">
|
||||
<svg fill="currentColor" viewBox="0 0 500 250" class="demo-graph">
|
||||
<use xlink:href="#chart"/>
|
||||
</svg>
|
||||
<svg fill="currentColor" viewBox="0 0 500 250" class="demo-graph">
|
||||
<use xlink:href="#chart"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4 demo-cards">
|
||||
|
||||
<!-- Updates card using header bg image -->
|
||||
<div class="demo-updates card">
|
||||
<div class="card-header">
|
||||
<h2 class="card-title">Updates</h2>
|
||||
</div>
|
||||
|
||||
<div class="card-block">
|
||||
<p class="card-text">Non dolore elit adipisicing ea reprehenderit consectetur culpa.</p>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<a href="#" class="btn">Read More</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="demo-options card">
|
||||
<div class="card-block">
|
||||
<p class="card-title">View options</p>
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" id="chkbox1">
|
||||
Click per object
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" id="chkbox2">
|
||||
Views per object
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" id="chkbox3">
|
||||
Objects selected
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" id="chkbox4">
|
||||
Objects viewed
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<a href="#" class="btn">Change location</a>
|
||||
<i class="material-icons">location_on</i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" style="position: fixed; left: -1000px; height: -1000px;">
|
||||
<defs>
|
||||
<mask id="piemask" maskContentUnits="objectBoundingBox">
|
||||
<circle cx="0.5" cy="0.5" r="0.49" fill="white"/>
|
||||
<circle cx="0.5" cy="0.5" r="0.40" fill="black"/>
|
||||
</mask>
|
||||
<g id="piechart">
|
||||
<circle cx="0.5" cy="0.5" r="0.5"/>
|
||||
<path d="M 0.5 0.5 0.5 0 A 0.5 0.5 0 0 1 0.95 0.28 z" stroke="none" fill="rgba(255, 255, 255, 0.75)"/>
|
||||
</g>
|
||||
</defs>
|
||||
</svg>
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 250" style="position: fixed; left: -1000px; height: -1000px;">
|
||||
<defs>
|
||||
<g id="chart">
|
||||
<g id="Gridlines">
|
||||
<line fill="#888888" stroke="#888888" stroke-miterlimit="10" x1="0" y1="27.3" x2="468.3" y2="27.3"/>
|
||||
<line fill="#888888" stroke="#888888" stroke-miterlimit="10" x1="0" y1="66.7" x2="468.3" y2="66.7"/>
|
||||
<line fill="#888888" stroke="#888888" stroke-miterlimit="10" x1="0" y1="105.3" x2="468.3" y2="105.3"/>
|
||||
<line fill="#888888" stroke="#888888" stroke-miterlimit="10" x1="0" y1="144.7" x2="468.3" y2="144.7"/>
|
||||
<line fill="#888888" stroke="#888888" stroke-miterlimit="10" x1="0" y1="184.3" x2="468.3" y2="184.3"/>
|
||||
</g>
|
||||
<g id="Numbers">
|
||||
<text transform="matrix(1 0 0 1 485 29.3333)" fill="#888888" font-family="'Roboto'" font-size="9">500</text>
|
||||
<text transform="matrix(1 0 0 1 485 69)" fill="#888888" font-family="'Roboto'" font-size="9">400</text>
|
||||
<text transform="matrix(1 0 0 1 485 109.3333)" fill="#888888" font-family="'Roboto'" font-size="9">300</text>
|
||||
<text transform="matrix(1 0 0 1 485 149)" fill="#888888" font-family="'Roboto'" font-size="9">200</text>
|
||||
<text transform="matrix(1 0 0 1 485 188.3333)" fill="#888888" font-family="'Roboto'" font-size="9">100</text>
|
||||
<text transform="matrix(1 0 0 1 0 249.0003)" fill="#888888" font-family="'Roboto'" font-size="9">1</text>
|
||||
<text transform="matrix(1 0 0 1 78 249.0003)" fill="#888888" font-family="'Roboto'" font-size="9">2</text>
|
||||
<text transform="matrix(1 0 0 1 154.6667 249.0003)" fill="#888888" font-family="'Roboto'" font-size="9">3</text>
|
||||
<text transform="matrix(1 0 0 1 232.1667 249.0003)" fill="#888888" font-family="'Roboto'" font-size="9">4</text>
|
||||
<text transform="matrix(1 0 0 1 309 249.0003)" fill="#888888" font-family="'Roboto'" font-size="9">5</text>
|
||||
<text transform="matrix(1 0 0 1 386.6667 249.0003)" fill="#888888" font-family="'Roboto'" font-size="9">6</text>
|
||||
<text transform="matrix(1 0 0 1 464.3333 249.0003)" fill="#888888" font-family="'Roboto'" font-size="9">7</text>
|
||||
</g>
|
||||
<g id="Layer_5">
|
||||
<polygon opacity="0.36" stroke-miterlimit="10" points="0,223.3 48,138.5 154.7,169 211,88.5
|
||||
294.5,80.5 380,165.2 437,75.5 469.5,223.3 ">
|
||||
</g>
|
||||
<g id="Layer_4">
|
||||
<polygon stroke-miterlimit="10" points="469.3,222.7 1,222.7 48.7,166.7 155.7,188.3 212,132.7
|
||||
296.7,128 380.7,184.3 436.7,125 ">
|
||||
</g>
|
||||
</g>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,117 +0,0 @@
|
|||
---
|
||||
---
|
||||
|
||||
body {
|
||||
/* Show it's not fixed to the top */
|
||||
min-height: 75rem;
|
||||
padding-top: 6rem;
|
||||
}
|
||||
|
||||
//
|
||||
///*
|
||||
// * Base structure
|
||||
// */
|
||||
//
|
||||
///* Move down content because we have a fixed navbar that is 50px tall */
|
||||
//body {
|
||||
// padding-top: 50px;
|
||||
//}
|
||||
//
|
||||
//
|
||||
///*
|
||||
// * Global add-ons
|
||||
// */
|
||||
//
|
||||
//.sub-header {
|
||||
// padding-bottom: 10px;
|
||||
// border-bottom: 1px solid #eee;
|
||||
//}
|
||||
//
|
||||
///*
|
||||
// * Top navigation
|
||||
// * Hide default border to remove 1px line.
|
||||
// */
|
||||
//.navbar-fixed-top {
|
||||
// border: 0;
|
||||
//}
|
||||
//
|
||||
///*
|
||||
// * Sidebar
|
||||
// */
|
||||
//
|
||||
///* Hide for mobile, show later */
|
||||
//.sidebar {
|
||||
// display: none;
|
||||
//}
|
||||
//@media (min-width: 768px) {
|
||||
// .sidebar {
|
||||
// position: fixed;
|
||||
// top: 51px;
|
||||
// bottom: 0;
|
||||
// left: 0;
|
||||
// z-index: 1000;
|
||||
// display: block;
|
||||
// padding: 20px;
|
||||
// overflow-x: hidden;
|
||||
// overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
|
||||
// background-color: #f5f5f5;
|
||||
// border-right: 1px solid #eee;
|
||||
// }
|
||||
//}
|
||||
//
|
||||
///* Sidebar navigation */
|
||||
//.nav-sidebar {
|
||||
// margin-right: -21px; /* 20px padding + 1px border */
|
||||
// margin-bottom: 20px;
|
||||
// margin-left: -20px;
|
||||
//}
|
||||
//.nav-sidebar > li > a {
|
||||
// padding-right: 20px;
|
||||
// padding-left: 20px;
|
||||
//}
|
||||
//.nav-sidebar > .active > a {
|
||||
// &,
|
||||
// &:hover,
|
||||
// &:focus {
|
||||
// color: #fff;
|
||||
// background-color: #428bca;
|
||||
// }
|
||||
//}
|
||||
//
|
||||
//
|
||||
///*
|
||||
// * Main content
|
||||
// */
|
||||
//
|
||||
//.main {
|
||||
// padding: 20px;
|
||||
//}
|
||||
//@media (min-width: 768px) {
|
||||
// .main {
|
||||
// padding-right: 40px;
|
||||
// padding-left: 40px;
|
||||
// }
|
||||
//}
|
||||
//.main .page-header {
|
||||
// margin-top: 0;
|
||||
//}
|
||||
//
|
||||
//
|
||||
///*
|
||||
// * Placeholder dashboard ideas
|
||||
// */
|
||||
//
|
||||
//.placeholders {
|
||||
// margin-bottom: 30px;
|
||||
// text-align: center;
|
||||
//}
|
||||
//.placeholders h4 {
|
||||
// margin-bottom: 0;
|
||||
//}
|
||||
//.placeholder {
|
||||
// margin-bottom: 20px;
|
||||
//}
|
||||
//.placeholder img {
|
||||
// display: inline-block;
|
||||
// border-radius: 50%;
|
||||
//}
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
---
|
||||
layout: example
|
||||
title: Drawer Template
|
||||
group: material-design
|
||||
---
|
||||
|
||||
<!-- Custom styles for this template -->
|
||||
<link href="drawer.css" rel="stylesheet">
|
||||
|
||||
<div class="pos-f-t">
|
||||
<!--div class="collapse" id="navbar-header">
|
||||
<div class="container-fluid bg-inverse p-a-1">
|
||||
<h3>Collapsed content</h3>
|
||||
<p>Toggleable via the navbar brand.</p>
|
||||
</div>
|
||||
</div-->
|
||||
<div class="navbar navbar-light bg-faded navbar-static-top">
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-header">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<i class="material-icons">menu</i>
|
||||
</button>
|
||||
|
||||
<ul class="nav navbar-nav pull-xs-right">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="#">
|
||||
<i class="material-icons">search</i>
|
||||
</a>
|
||||
<!--form class="form-inline pull-xs-right">
|
||||
<input class="form-control" type="text" placeholder="Search">
|
||||
<button class="btn btn-outline-success" type="submit">Search</button>
|
||||
</form-->
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">
|
||||
<i class="material-icons">more_vert</i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="jumbotron">
|
||||
<h1>Navbar example</h1>
|
||||
<p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser's viewport.</p>
|
||||
<a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs »</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -4,6 +4,77 @@ title: Test
|
|||
group: material-design
|
||||
---
|
||||
|
||||
|
||||
{% example html %}
|
||||
|
||||
<h2>Normal navbar</h2>
|
||||
<nav class="navbar navbar-light bg-faded">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Features</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Pricing</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">About</a>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="form-inline pull-xs-right">
|
||||
<input class="form-control" type="text" placeholder="Search">
|
||||
<button class="btn btn-success-outline" type="submit">Search</button>
|
||||
</form>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<h2>Flex navbar</h2>
|
||||
With flex enabled on a navbar (and with compiled flex-enabled css), the nav elements do not inline.
|
||||
|
||||
<style>
|
||||
.flexyflexflex {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
flex-shrink: 0;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.flexyflexflex form {
|
||||
margin-left: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
<nav class="navbar navbar-light bg-faded flexyflexflex">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Features</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Pricing</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">About</a>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="form-inline">
|
||||
<input class="form-control" type="text" placeholder="Search">
|
||||
<button class="btn btn-success-outline" type="submit">Search</button>
|
||||
</form>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{% endexample %}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,58 @@
|
|||
//https://www.google.com/design/spec/components/cards.html#cards-content-blocks
|
||||
// Card resting elevation: 2dp
|
||||
.card {
|
||||
@include shadow-8dp();
|
||||
border: 0;
|
||||
|
||||
// Cards have a default elevation of 2dp.
|
||||
@include shadow-2dp();
|
||||
@extend %std-font;
|
||||
|
||||
// spec: see "Avatar, Title, and Subtitle area"
|
||||
// Height: 72dp
|
||||
// Padding: 16dp
|
||||
// Top and bottom padding: 16dp
|
||||
.card-header {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.card-block {
|
||||
padding: 1.5rem 1rem 1rem;
|
||||
//@extend %std-font;
|
||||
}
|
||||
|
||||
// Primary title/text
|
||||
// - Title: 24sp or 14sp
|
||||
// - Subtitle: 14sp
|
||||
|
||||
// non-h* card-titles will be 14sp
|
||||
//&.card-title {
|
||||
// @extend %std-font;
|
||||
//}
|
||||
|
||||
// any h* will signal the larger size should render as 24sp
|
||||
@include headings() {
|
||||
&.card-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
|
||||
.mdb-card-actions, // needed? if you have actions in the middle of the card (see spec), it may be necessary
|
||||
.card-footer { // assume footer is the set of actions?
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
&.mdb-card-raised {
|
||||
// Card raised elevation: 8dp
|
||||
@include shadow-8dp();
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
// On desktop, cards can have a resting elevation of 0dp and gain an elevation of 8dp on hover.
|
||||
&.mdb-card-flat {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -23,6 +23,7 @@
|
|||
@import "cards";
|
||||
@import "modal";
|
||||
@import "menu";
|
||||
@import "drawer";
|
||||
@import "themes";
|
||||
|
||||
@import "ripples";
|
||||
|
|
|
|||
156
scss/_drawer.scss
Normal file
156
scss/_drawer.scss
Normal file
|
|
@ -0,0 +1,156 @@
|
|||
// .mdb-layout-fixed-drawer is a marker that both header and content respond to.
|
||||
|
||||
|
||||
//WARNING: VERY MUCH A WORK IN PROGRESS!!!!!!!!!!!!!!!!!!!!
|
||||
|
||||
.mdb-layout-container {
|
||||
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;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
max-height: 1000px;
|
||||
flex-direction: column;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Drawer.
|
||||
.mdb-layout-drawer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 5;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
overflow: visible;
|
||||
overflow-y: auto;
|
||||
color: $mdb-layout-text-color;
|
||||
background: $mdb-layout-drawer-bg-color;
|
||||
|
||||
// Transform offscreen.
|
||||
transition: transform;
|
||||
will-change: transform;
|
||||
transform-style: preserve-3d;
|
||||
|
||||
@include shadow-2dp();
|
||||
@include material-animation-default();
|
||||
|
||||
> * {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.mdl-navigation {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
padding-top: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Content.
|
||||
.mdb-layout-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: inline-block;
|
||||
//-ms-flex: 0 1 auto; // Fix IE10 bug.
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
flex-grow: 1;
|
||||
-webkit-overflow-scrolling: touch; // TODO: why?
|
||||
}
|
||||
|
||||
|
||||
// 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.
|
||||
|
||||
// Responsive Header with fixed drawer
|
||||
.mdb-layout-header {
|
||||
@include media-breakpoint-up(lg) {
|
||||
.mdb-layout-fixed-drawer > & {
|
||||
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) {
|
||||
.mdb-layout-fixed-drawer > & {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive Content with fixed drawer
|
||||
.mdb-layout-content {
|
||||
|
||||
.mdb-layout-fixed-drawer > & {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
.mdb-layout-fixed-drawer > & {
|
||||
margin-left: $mdb-layout-drawer-sm;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -67,12 +67,14 @@
|
|||
min-height: $mdb-menu-item-min-height;
|
||||
|
||||
flex-flow: row wrap;
|
||||
align-items: center;
|
||||
|
||||
padding-top: $mdb-menu-item-padding-top;
|
||||
padding-right: $mdb-menu-item-padding-right;
|
||||
padding-bottom: $mdb-menu-item-padding-bottom;
|
||||
padding-left: $mdb-menu-item-padding-left;
|
||||
|
||||
|
||||
// FIXME: multi-line menu word wrapping doesn't work - see the maximum width example in menus.md
|
||||
overflow: hidden;
|
||||
line-height: $mdb-menu-line-height;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
@import "mixins/utilities";
|
||||
@import "mixins/animations";
|
||||
@import "mixins/type";
|
||||
@import "mixins/shadows";
|
||||
@import "mixins/variations";
|
||||
@import "mixins/forms";
|
||||
|
|
|
|||
11
scss/mixins/_type.scss
Normal file
11
scss/mixins/_type.scss
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
@mixin headings() {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// 14sp font
|
||||
%std-font {
|
||||
font-size: .875rem;
|
||||
font-weight: normal;
|
||||
}
|
||||
11
scss/variables/_drawer.scss
Normal file
11
scss/variables/_drawer.scss
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
// Drawer
|
||||
$mdb-layout-drawer-bg-color: rgba($grey-50, 1) !default;
|
||||
$mdb-layout-text-color: rgba($grey-800, 1) !default;
|
||||
|
||||
// Sizing
|
||||
$mdb-layout-drawer-sm: 240px !default;
|
||||
|
||||
// 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
|
||||
|
|
@ -3,10 +3,10 @@
|
|||
//$card-spacer-y: .75rem !default;
|
||||
//$card-border-width: 1px !default;
|
||||
//$card-border-radius: $border-radius !default;
|
||||
//$card-border-color: #e5e5e5 !default;
|
||||
$card-border-color: $gray-lighter !default; // #e5e5e5
|
||||
//$card-border-radius-inner: $card-border-radius !default;
|
||||
//$card-cap-bg: #f5f5f5 !default;
|
||||
//$card-bg: #fff !default;
|
||||
$card-bg: #fff !default;
|
||||
$card-cap-bg: $card-bg !default; // #f5f5f5
|
||||
//
|
||||
//$card-link-hover-color: #fff !default;
|
||||
//
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user