google
/
material-design-lite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'master' of https://github.com/google/material-design-lite 

* 'master' of https://github.com/google/material-design-lite:
  Move ripple style initialization to first click.
  More scoping changes to docs
master
Addy Osmani 2015-06-15 14:32:16 +01:00
parent feb1cab7ef 2900abdd45
commit e09a173384
8 changed files with 42 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
docs/_assets/main.css
View File

@ -81,7 +81,7 @@ pre[class*=language-]>code[data-language="markup"]::before {
.docs-layout-header .mdl-textfield label:after {
background-color: rgba(255, 255, 255, 0.12);
}
body.about .docs-layout-header {
.about .docs-layout-header {
background: url('logo.svg'), url('header.jpg');
background-size: auto 30%, cover;
background-repeat: no-repeat, no-repeat;
@ -134,7 +134,7 @@ body:not(.about) .docs-layout-title {
flex-shrink: 0;
padding-left: 16px !important;
}
.docs-navigation span.mdl-icon {
.docs-navigation .mdl-icon {
font-size: 24px;
margin-right: 8px;
}
@ -157,9 +157,6 @@ body:not(.about) .docs-layout-title {
.docs-navigation a:not(.download) {
opacity: 0.65;
}
.docs-navigation a.download > span {
opacity: 0.65;
}
.docs-navigation .mdl-layout-spacer ~ a {
text-transform: none;
}
@ -202,13 +199,11 @@ body:not(.about) .docs-layout-title {
font-weight: 300;
text-transform: uppercase;
}
.docs-layout-content > footer {
height: 120px;
}
.docs-footer {
flex-direction: column;
align-items: stretch;
justify-content: center;
height: 120px;
}
.docs-footer ul {
padding: 0;
@ -331,7 +326,7 @@ body:not(.about) .docs-layout-title {
.template > .template__preview {
height: auto;
}
.docs-layout-content p {
.docs-text-styling p {
font-size: 15px;
margin-bottom: 32px;
@ -339,18 +334,18 @@ body:not(.about) .docs-layout-title {
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
}
.docs-layout-content ol li {
.docs-text-styling ol li {
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
}
.docs-layout-content h1 {
.docs-text-styling h1 {
color: #c2185b;
font-size: 2.5em;
margin: .67em 0;
}
.docs-layout-content h2 {
.docs-text-styling h2 {
padding-top: 48px;
font-size: 24px;
font-weight: 400;
@ -364,7 +359,7 @@ body:not(.about) .docs-layout-title {
margin-bottom: 0;
}
.docs-layout-content a {
.docs-text-styling a {
@extend mdl-color-text--cyan-600;
text-decoration: none;
}
@ -374,8 +369,7 @@ body:not(.about) .docs-layout-title {
font-weight: normal;
}
.docs-layout-title a,
button a {
.docs-layout-title a {
color: inherit;
text-decoration: none;
}

20
docs/_templates/components.html vendored
View File

@ -6,7 +6,7 @@
<link rel="stylesheet" href="{{page.include_prefix}}components/demos.css">
<div class="mdl-components mdl-js-components">
<aside class="mdl-components__nav">
<aside class="mdl-components__nav docs-text-styling">
{% for category in page.categories %}
<a href="#{{ category.name }}-section" class="mdl-components__link mdl-component {{ category.name }}">
<div class="mdl-components__link-image"
@ -28,9 +28,11 @@
{% for category in page.categories -%}
<section id="{{ category.name }}-section" class="mdl-components__page mdl-grid mdl-cell mdl-cell--12-col">
<div class="mdl-cell mdl-cell--12-col">
<div class="mdl-typography--display-3">{{ category.title }}</div>
<p>{{ category.description }}</p>
<br><br>
<span class="docs-text-styling">
<div class="mdl-typography--display-3">{{ category.title }}</div>
<p>{{ category.description }}</p>
<br><br>
</span>
{% for component in category.components %}
{% set demo_css = "../../src/" + component.name + "/demo.css" %}
<style>
@ -40,11 +42,15 @@
<script>
{% include demo_js ignore missing %}
</script>
<h1 class="mdl-components__classname">{{ component.class }}</h1>
<span class="docs-text-styling">
<h1 class="mdl-components__classname">{{ component.class }}</h1>
</span>
{% set demo = "../../src/" + component.name + "/demo.html" %}
{% include demo ignore missing %}
{% set doc = "../../dist/components/" + component.name + "/index.html" %}
{% include doc ignore missing %}
<span class="docs-text-styling">
{% set doc = "../../dist/components/" + component.name + "/index.html" %}
{% include doc ignore missing %}
</span>
{%- endfor %}
</div>
</section>

2
docs/_templates/customize.html vendored
View File

@ -2,8 +2,10 @@
{% block content %}
<span class="docs-text-styling">
<h1>{{page.title}}</h1>
{{content|safe}}
</span>
{% endblock %}

4
docs/_templates/layout.html vendored
View File

@ -83,10 +83,10 @@
{{content|safe}}
{% endblock %}
</div>
<section class="download mdl-color--grey-800">
<section class="docs-text-styling download mdl-color--grey-800">
<a href="#" class="mdl-color-text--grey-50">Download Kit</a>
</section>
<footer class="docs-footer mdl-mini-footer mdl-color--grey-900">
<footer class="docs-text-styling docs-footer mdl-mini-footer mdl-color--grey-900">
<ul>
<button class="mdl-mini-footer--social-btn social-btn social-btn__twitter"></button>
<button class="mdl-mini-footer--social-btn social-btn social-btn__blogger"></button>

4
docs/_templates/page.html vendored
View File

@ -2,10 +2,10 @@
{% block content %}
<span class="docs-text-styling">
<h1>{{page.title}}</h1>
{{content|safe}}
</span>
{% endblock %}

2
docs/_templates/templates.html vendored
View File

@ -1,7 +1,7 @@
{% extends 'layout.html' %}
{% block content %}
{% for template in page.templates %}
<section class="template template--{{ template.name }} mdl-grid mdl-cell mdl-cell--12-col">
<section class="template template--{{ template.name }} docs-text-styling mdl-grid mdl-cell mdl-cell--12-col">
<div class="template__meta mdl-cell mdl-cell--4-col mdl-grid mdl-grid--no-spacing">
<h3 class="template__header mdl-cell mdl-cell--12-col mdl-typography--body-2">{{ template.title }}</h3>
<p class="mdl-cell mdl-cell--12-col">

2
src/footer/demo.html
View File

@ -1,4 +1,4 @@
<div class="demo-preview-block .demo-page--footer">
<div class="demo-preview-block demo-page--footer">
<footer class="mdl-mega-footer">
<div class="mdl-mega-footer--top-section">

22
src/ripple/ripple.js
View File

@ -65,6 +65,16 @@ MaterialRipple.prototype.CssClasses_ = {
MaterialRipple.prototype.downHandler_ = function(event) {
'use strict';
if (!this.rippleElement_.style.width && !this.rippleElement_.style.height) {
var rect = this.element_.getBoundingClientRect();
this.boundHeight = rect.height;
this.boundWidth = rect.width;
this.rippleSize_ = Math.sqrt(rect.width * rect.width +
rect.height * rect.height) * 2 + 2;
this.rippleElement_.style.width = this.rippleSize_ + 'px';
this.rippleElement_.style.height = this.rippleSize_ + 'px';
}
this.rippleElement_.classList.add(this.CssClasses_.IS_VISIBLE);
if (event.type === 'mousedown' && this.ignoringMouseDown_) {
@ -134,14 +144,6 @@ MaterialRipple.prototype.init = function() {
// mouse down after a touch start.
this.ignoringMouseDown_ = false;
if (this.rippleElement_) {
var bound = this.element_.getBoundingClientRect();
this.rippleSize_ = Math.sqrt(bound.width * bound.width +
bound.height * bound.height) * 2 + 2;
this.rippleElement_.style.width = this.rippleSize_ + 'px';
this.rippleElement_.style.height = this.rippleSize_ + 'px';
}
this.boundDownHandler = this.downHandler_.bind(this);
this.element_.addEventListener('mousedown',
this.boundDownHandler);
@ -185,8 +187,8 @@ MaterialRipple.prototype.init = function() {
scale = this.Constant_.FINAL_SCALE;
size = this.rippleSize_ + 'px';
if (recentering) {
offset = 'translate(' + bound.width / 2 + 'px, ' +
bound.height / 2 + 'px)';
offset = 'translate(' + this.boundWidth / 2 + 'px, ' +
this.boundHeight / 2 + 'px)';
}
}