mirror of
https://github.com/google/material-design-lite.git
synced 2024-09-11 12:25:38 +03:00
Add tech-stop-esque template
This commit is contained in:
Alexander Surma
parent
d2695dae20
commit
9e4503591b
@ -43,10 +43,10 @@
|
||||
</head>
|
||||
<body>
|
||||
<div class="mdl-layout mdl-layout--fixed-drawer">
|
||||
<header class="mdl-layout__header mdl-color--white mdl-color-text--grey-600">
|
||||
<header class="mdl-layout__header mdl-color--white mdl-color--grey-100 mdl-color-text--grey-600">
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
|
||||
<label class="mdl-button mdl-js-button mdl-button--icon" for="search">
|
||||
<span class="mdl-icon--search"></span>
|
||||
<span class="mdl mdl-icon--search"></span>
|
||||
</label>
|
||||
<div class="mdl-textfield__expandable-holder">
|
||||
<input class="mdl-textfield__input" type="text" id="search" />
|
||||
|
||||
115
templates/simple/index.html
Normal file
115
templates/simple/index.html
Normal file
@ -0,0 +1,115 @@
|
||||
<!doctype html>
|
||||
<html lang="">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="description" content="A front-end template that helps you build fast, modern mobile web apps.">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Material Design Lite</title>
|
||||
|
||||
<!-- Add to homescreen for Chrome on Android -->
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<link rel="icon" sizes="192x192" href="images/touch/chrome-touch-icon-192x192.png">
|
||||
|
||||
<!-- Add to homescreen for Safari on iOS -->
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||
<meta name="apple-mobile-web-app-title" content="Material Design Lite">
|
||||
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
|
||||
|
||||
<!-- Tile icon for Win8 (144x144 + tile color) -->
|
||||
<meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
|
||||
<meta name="msapplication-TileColor" content="#3372DF">
|
||||
|
||||
<!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones -->
|
||||
<!--
|
||||
<link rel="canonical" href="http://www.example.com/">
|
||||
-->
|
||||
|
||||
<link href='//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" href="material.min.css">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<style>
|
||||
#view-source {
|
||||
position: fixed;
|
||||
display: block;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
margin-right: 40px;
|
||||
margin-bottom: 40px;
|
||||
z-index: 900;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="mdl-layout mdl-js-layout">
|
||||
<header class="mdl-layout__header mdl-layout__header--scroll mdl-color--grey-100 mdl-color-text--grey-800">
|
||||
<span class="mdl-layout-title">Material Design Lite</span>
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
|
||||
<label class="mdl-button mdl-js-button mdl-button--icon" for="search">
|
||||
<span class="mdl-icon mdl-icon--search"></span>
|
||||
</label>
|
||||
<div class="mdl-textfield__expandable-holder">
|
||||
<input class="mdl-textfield__input" type="text" id="search" />
|
||||
<label class="mdl-textfield__label" for="expando1">Enter your query...</label>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="ribbon mdl-color--primary"></div>
|
||||
<main class="mdl-layout__content">
|
||||
<header>
|
||||
<h1>Simple Layout</h1>
|
||||
<h2>for simple content</h2>
|
||||
</header>
|
||||
<div class="container">
|
||||
<div class="mdl-color--white mdl-shadow--z1 content mdl-color-text--grey-800">
|
||||
<h3>Some text</h3>
|
||||
<p>
|
||||
Cillum dolor esse sit incididunt velit eiusmod magna ad nostrud officia aute dolor dolor. Magna esse ullamco pariatur adipisicing consectetur eu commodo officia. Ex cillum consequat mollit minim elit est deserunt occaecat nisi amet. Quis aliqua nostrud Lorem occaecat sunt. Eiusmod quis amet ullamco aliquip dolore ut incididunt duis adipisicing. Elit consequat nisi eiusmod aute ipsum sunt veniam do est. Occaecat mollit aliquip ut proident consectetur amet ex dolore consectetur aliqua elit.
|
||||
</p>
|
||||
<p>
|
||||
Commodo nisi non consectetur voluptate incididunt mollit duis dolore amet amet tempor exercitation. Qui amet aute ea aute id ad aliquip proident. Irure duis qui labore deserunt enim in quis nisi sint consequat aliqua. Ex proident labore et laborum tempor fugiat sint magna veniam minim. Nulla dolor labore adipisicing in enim mollit laboris fugiat eu. Aliquip minim cillum ullamco voluptate non dolore non ex duis fugiat duis ad. Deserunt cillum ad et nisi amet non voluptate culpa qui do. Labore ullamco et minim proident est laborum mollit ad labore deserunt ut irure dolore. Reprehenderit ad ad irure ut irure qui est eu velit eu excepteur adipisicing culpa. Laborum cupidatat ullamco eu duis anim reprehenderit proident aute ad consectetur eiusmod.
|
||||
</p>
|
||||
<p>
|
||||
Tempor tempor aliqua in commodo cillum Lorem magna dolore proident Lorem. Esse ad consequat est excepteur irure eu irure quis aliqua qui. Do mollit esse veniam excepteur ut veniam anim minim dolore sit commodo consequat duis commodo. Sunt dolor reprehenderit ipsum minim eiusmod eu consectetur anim excepteur eiusmod. Duis excepteur anim dolor sit enim veniam deserunt anim adipisicing Lorem elit. Cillum sunt do consequat elit laboris nisi consectetur.
|
||||
</p>
|
||||
</div>
|
||||
<ul class="sidenav">
|
||||
<li class="active">
|
||||
Sit dolore est est culpa adipisicing aliqua aliquip dolore.
|
||||
</li>
|
||||
<li>
|
||||
Tempor voluptate incididunt occaecat incididunt consequat labore magna cupidatat officia culpa cupidatat ullamco.
|
||||
</li>
|
||||
<li>
|
||||
Ad aute pariatur ipsum culpa in minim sit officia magna officia consequat.
|
||||
</li>
|
||||
<li>
|
||||
Sunt adipisicing anim labore veniam dolore proident aute consectetur dolore.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<footer class="mdl-mini-footer">
|
||||
<div class="mdl-mini-footer--left-section">
|
||||
<div class="mdl-logo">
|
||||
More Information
|
||||
</div>
|
||||
<ul class="mdl-mini-footer--link-list">
|
||||
<li><a href="#">Help</a></li>
|
||||
<li><a href="#">Privacy and Terms</a></li>
|
||||
<li><a href="#">User Agreement</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mdl-mini-footer--right-section">
|
||||
<button class="mdl-mini-footer--social-btn"></button>
|
||||
<button class="mdl-mini-footer--social-btn"></button>
|
||||
<button class="mdl-mini-footer--social-btn"></button>
|
||||
</div>
|
||||
</footer>
|
||||
</main>
|
||||
</div>
|
||||
<a href="https://github.com/google/material-design-lite/blob/master/templates/simple/index.html" target="_blank" id="view-source" class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored mdl-js-ripple-effect mdl-color--accent"><span class="mdl-icon mdl-icon--pageview"/></a>
|
||||
<script src="/material.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
8
templates/simple/material.scss
Normal file
8
templates/simple/material.scss
Normal file
@ -0,0 +1,8 @@
|
||||
@import '../../src/_variables.scss';
|
||||
$color-primary: $palette-red-500;
|
||||
$color-primary-dark: $palette-red-800;
|
||||
$color-accent: $palette-red-A200;
|
||||
$color-primary-contrast: $color-dark-contrast;
|
||||
$color-accent-contrast: $color-dark-contrast;
|
||||
|
||||
@import '../../src/material-design-lite';
|
||||
61
templates/simple/styles.css
Normal file
61
templates/simple/styles.css
Normal file
@ -0,0 +1,61 @@
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
body {
|
||||
font-family: 'Roboto';
|
||||
color: white;
|
||||
}
|
||||
|
||||
.ribbon {
|
||||
width: 100%;
|
||||
height: 40vh;
|
||||
}
|
||||
|
||||
main {
|
||||
margin-top: -40vh;
|
||||
}
|
||||
main > header {
|
||||
padding: 48px;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 48px;
|
||||
width: 768px;
|
||||
margin-right: 48px
|
||||
}
|
||||
|
||||
.sidenav {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
padding-top: 48px;
|
||||
}
|
||||
.sidenav li {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
list-style-type: none;
|
||||
font-size: 1em;
|
||||
border-left: 2px solid transparent;
|
||||
padding: 8px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.sidenav li.active {
|
||||
border-left: 3px solid white;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user