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> </div>
</footer> </footer>
</div> </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> <script src="/material.min.js"></script>
</body> </body>
</html> </html>

View File

@ -124,6 +124,7 @@
</div> </div>
<nav> <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-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> <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon"><span class="mdl-icon mdl-icon--replay"></span></button>
</nav> </nav>
</div> </div>
@ -140,7 +141,7 @@
</main> </main>
<div class="mdl-layout__obfuscator"></div> <div class="mdl-layout__obfuscator"></div>
</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> <script src="/material.min.js"></script>
</body> </body>
</html> </html>

View File

@ -158,7 +158,7 @@
</main> </main>
<div class="mdl-layout__obfuscator"></div> <div class="mdl-layout__obfuscator"></div>
</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> <script src="/material.min.js"></script>
</body> </body>
</html> </html>

View File

@ -168,7 +168,7 @@
</g> </g>
</defs> </defs>
</svg> </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> <script src="/material.min.js"></script>
</body> </body>
</html> </html>

View File

@ -142,7 +142,7 @@
</footer> </footer>
</main> </main>
</div> </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> <script src="/material.min.js"></script>
</body> </body>
</html> </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 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="material.min.css">
<link rel="stylesheet" href="styles.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> </head>
<body class="mdl-color--primary-dark mdl-base"> <body class="mdl-color--primary-dark mdl-base">
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header"> <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
@ -120,10 +131,7 @@
</footer> </footer>
</main> </main>
</div> </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"> <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>
<span class="mdl-icon mdl-icon--search"/>
</a>
<script src="/material.min.js"></script>
<script> <script>
(function() { (function() {
'use strict'; 'use strict';

View File

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

View File

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

View File

@ -263,7 +263,7 @@
</footer> </footer>
</main> </main>
</div> </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> <script src="/material.min.js"></script>
</body> </body>
</html> </html>