Merge pull request #262 from google/view-source-btn

Use normal button instead of FAB for "View Source"
master
Addy Osmani 2015-04-30 15:15:53 +01:00
commit 3f588faaf6
9 changed files with 20 additions and 23 deletions

View File

@ -94,7 +94,7 @@
</div>
</footer>
</div>
<a href="https://github.com/google/material-design-lite/blob/master/templates/article/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>
<a href="https://github.com/google/material-design-lite/blob/master/templates/article/index.html" target="_blank" id="view-source" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-color--accent mdl-color-text--accent-contrast">View Source</a> <script src="/material.min.js"></script>
<script src="/material.min.js"></script>
</body>
</html>

View File

@ -124,6 +124,7 @@
</div>
<nav>
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon"><span class="mdl-icon mdl-icon--thumb-up"></span></button>
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon"><span class="mdl-icon mdl-icon--thumb-down"></span></button>
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon"><span class="mdl-icon mdl-icon--replay"></span></button>
</nav>
</div>
@ -140,7 +141,7 @@
</main>
<div class="mdl-layout__obfuscator"></div>
</div>
<a href="https://github.com/google/material-design-lite/blob/master/templates/blog/entry.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>
<a href="https://github.com/google/material-design-lite/blob/master/templates/blog/entry.html" target="_blank" id="view-source" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-color--accent mdl-color-text--accent-contrast">View Source</a> <script src="/material.min.js"></script>
<script src="/material.min.js"></script>
</body>
</html>

View File

@ -158,7 +158,7 @@
</main>
<div class="mdl-layout__obfuscator"></div>
</div>
<a href="https://github.com/google/material-design-lite/blob/master/templates/blog/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>
<a href="https://github.com/google/material-design-lite/blob/master/templates/blog/index.html" target="_blank" id="view-source" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-color--accent mdl-color-text--accent-contrast">View Source</a> <script src="/material.min.js"></script>
<script src="/material.min.js"></script>
</body>
</html>

View File

@ -168,7 +168,7 @@
</g>
</defs>
</svg>
<a href="https://github.com/google/material-design-lite/blob/master/templates/dashboard/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>
<a href="https://github.com/google/material-design-lite/blob/master/templates/dashboard/index.html" target="_blank" id="view-source" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-color--accent mdl-color-text--accent-contrast">View Source</a> <script src="/material.min.js"></script>
<script src="/material.min.js"></script>
</body>
</html>

View File

@ -142,7 +142,7 @@
</footer>
</main>
</div>
<a href="https://github.com/google/material-design-lite/blob/master/templates/general/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>
<a href="https://github.com/google/material-design-lite/blob/master/templates/general/index.html" target="_blank" id="view-source" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-color--accent mdl-color-text--accent-contrast">View Source</a> <script src="/material.min.js"></script>
<script src="/material.min.js"></script>
</body>
</html>

View File

@ -29,6 +29,17 @@
<link href='//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;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 class="mdl-color--primary-dark mdl-base">
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
@ -120,10 +131,7 @@
</footer>
</main>
</div>
<a href="https://github.com/google/material-design-lite/blob/master/templates/product/index.html" target="_blank" id="view-source" class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-color--accent mdl-color-text--primary">
<span class="mdl-icon mdl-icon--search"/>
</a>
<script src="/material.min.js"></script>
<a href="https://github.com/google/material-design-lite/blob/master/templates/product/index.html" target="_blank" id="view-source" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-color--accent mdl-color-text--accent-contrast">View Source</a> <script src="/material.min.js"></script>
<script>
(function() {
'use strict';

View File

@ -4,6 +4,6 @@ $color-primary: $palette-grey-800;
$color-primary-dark: $palette-grey-900;
$color-accent: $palette-yellow-A200;
$color-primary-contrast: $color-dark-contrast;
$color-accent-contrast: $color-dark-contrast;
$color-accent-contrast: $color-light-contrast;
@import '../../src/material-design-lite';

View File

@ -132,15 +132,6 @@ header.mdl-layout__header #title {
background-size: cover;
}
#view-source {
position: fixed;
display: block;
right: 0;
top: 0;
z-index: 900;
margin: 40px;
}
#about {
text-align: left;
}
@ -164,9 +155,6 @@ header.mdl-layout__header #title {
.mdl-layout__header .mdl-navigation__link {
line-height: 52px;
}
#view-source {
margin: 10px;
}
}
@media (max-width: 600px) {

View File

@ -263,7 +263,7 @@
</footer>
</main>
</div>
<a href="https://github.com/google/material-design-lite/blob/master/templates/general/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>
<a href="https://github.com/google/material-design-lite/blob/master/templates/text-only/index.html" target="_blank" id="view-source" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-color--accent mdl-color-text--accent-contrast">View Source</a>
<script src="/material.min.js"></script>
</body>
</html>