Commit 71617eba authored by Thomas Park's avatar Thomas Park
Browse files

swatchmaker: update styles, fix modal and popover, add smoothscroll, fix path to icos

parent cc16c83d
body {
padding-top: 80px;
padding-bottom: 20px;
section {
margin-top: 60px;
padding-top: 100px;
}
.navbar a > i {
opacity: 0.5;
/* index */
.tooltip-inner {
max-width: 500px;
}
.navbar a:hover > i {
opacity: 1;
.hero-unit h1,
.hero-unit p {
margin-bottom: 15px;
}
section {
margin-top: 100px;
#footer {
margin-bottom: 20px;
}
#footer .links a {
margin-right: 10px;
}
@media (max-width: 767px) {
section {
padding-top: 20px;
}
}
@media (max-width: 979px) and (min-width: 768px) {
section {
padding-top: 20px;
}
}
/* preview */
.subhead {
padding-bottom: 0;
margin-bottom: 9px;
......@@ -24,6 +48,12 @@ section {
font-size: 54px;
}
.subhead > div:first-child {
min-height: 200px;
}
/* subnav */
.subnav {
margin-bottom: 60px;
width: 100%;
......@@ -42,11 +72,11 @@ section {
-moz-border-radius: 4px;
border-radius: 4px;
}
.subnav .nav {
margin-bottom: 0;
}
.subnav .nav > li > a {
margin: 0;
padding-top: 11px;
......@@ -57,7 +87,7 @@ section {
-moz-border-radius: 0;
border-radius: 0;
}
.subnav .nav > .active > a,
.subnav .nav > .active > a:hover {
padding-left: 13px;
......@@ -69,12 +99,12 @@ section {
-moz-box-shadow: inset 0 3px 5px rgba(0,0,0,.05);
box-shadow: inset 0 3px 5px rgba(0,0,0,.05);
}
.subnav .nav > .active > a .caret,
.subnav .nav > .active > a:hover .caret {
border-top-color: #777;
}
.subnav .nav > li:first-child > a,
.subnav .nav > li:first-child > a:hover {
border-left: 0;
......@@ -83,227 +113,19 @@ section {
-moz-border-radius: 4px 0 0 4px;
border-radius: 4px 0 0 4px;
}
.subnav .nav > li:last-child > a {
border-right: 0;
}
.subnav .dropdown-menu {
-webkit-border-radius: 0 0 4px 4px;
-moz-border-radius: 0 0 4px 4px;
border-radius: 0 0 4px 4px;
}
.tooltip-inner {
max-width: 500px;
}
.hero-unit {
margin-bottom: 10px;
text-align: center;
}
.hero-unit h1,
.hero-unit p {
margin-bottom: 15px;
}
#social {
display: inline-block;
margin-top: 45px;
text-align: center;
}
#gh-star {
margin-right: 10px;
}
.twitter-follow-button {
width: 60px !important;
}
.twitter-share-button {
margin-right: 15px;
}
.rss-button {
width: 40px;
height: 14px;
font-size: 11px;
line-height: 14px;
font-weight: bold;
margin: 0 0 10px;
padding: 2px 5px 2px 4px;
}
.icon-rss {
background: url(../img/rss-icons.png) no-repeat 0 0;
opacity: .65;
width: 16px;
}
#ticker {
margin-bottom: 40px;
}
.about {
margin-top: 20px;
}
.about > div {
margin-bottom: 20px;
}
.about h3 {
margin: 0 0 5px 35px;
}
.about img {
float: left;
margin-top: 5px;
opacity: 0.7;
}
#gallery {
margin: 45px 0 30px 0;
padding-right: 20px;
text-align: center;
}
.thumbnail {
margin-bottom: 20px;
background-color: rgba(0, 0, 0, 0.05);
}
.thumbnail img {
width: 100%;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
}
.thumbnail .caption {
color: inherit !important;
}
.thumbnail h3 {
margin-bottom: 0;
}
.thumbnail .btn-toolbar {
margin-top: 15px;
text-align: right;
}
.links {
margin-bottom: 20px;
}
.links > a {
margin-right: 10px;
}
div.one .bsa_it_ad {
padding: 25px 25px 15px 25px;
}
div.one .bsa_it_p {
display: none;
}
.bsa {
float: right;
max-width: 400px;
padding: 0;
}
body .one .bsa_it_ad {
margin-bottom: -10px;
background: none;
border: none;
font-family: inherit;
color: inherit;
}
body .one .bsa_it_ad .bsa_it_t,
body .one .bsa_it_ad .bsa_it_d {
color: inherit;
font-size: inherit;
}
body .one .bsa_it_p {
display: none;
}
.links {
margin-bottom: 20px;
}
.links > a {
margin-right: 10px;
}
@media (max-width: 480px) {
.hero-unit {
padding: 20px 20px 0;
margin: 0 0 20px;
}
.hero-unit h1 {
font-size: 36px;
}
.hero-unit iframe {
margin-right: 0 !important;
}
#social {
margin-top: 0px;
margin-bottom: 20px;
}
#social > span {
display: block;
}
.about {
margin-top: 0;
}
.about h3 {
margin-top: 20px;
}
.about p {
margin-bottom: 0;
}
.modal {
position: fixed !important;
top: 25% !important;
}
}
/* Landscape phone to portrait tablet */
@media (min-width: 481px) and (max-width: 767px) {
.hero-unit {
margin-top: 0;
padding: 30px;
}
.about {
margin-top: 0;
}
}
@media (max-width: 767px) {
body {
padding-top: 0;
}
.subnav {
position: static;
top: auto;
......@@ -315,53 +137,32 @@ body .one .bsa_it_p {
-moz-box-shadow: none;
box-shadow: none;
}
.subnav .nav > li {
float: none;
}
.subnav .nav > li > a {
border: 0;
}
.subnav .nav > li + li > a {
border-top: 1px solid #e5e5e5;
}
.subnav .nav > li:first-child > a,
.subnav .nav > li:first-child > a:hover {
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
}
.bsa {
float: none;
}
}
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
.hero-unit {
margin-top: 0;
}
.thumbnail p {
font-size: 12px;
}
.thumbnail .btn {
padding: 8px 12px;
font-size: 12px;
}
}
/* Fixed subnav on scroll, but only for 980px and up (sorry IE!) */
@media (min-width: 980px) {
.subnav-fixed {
position: fixed;
top: 41px;
top: 40px;
left: 0;
right: 0;
z-index: 1020; /* 10 less than .navbar-fixed to prevent any overlap */
......@@ -375,11 +176,13 @@ body .one .bsa_it_p {
box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); /* IE6-9 */
}
.subnav-fixed .nav {
width: 938px;
margin: 0 auto;
padding: 0 1px;
}
.subnav .nav > li:first-child > a,
.subnav .nav > li:first-child > a:hover {
-webkit-border-radius: 0;
......@@ -387,17 +190,9 @@ body .one .bsa_it_p {
border-radius: 0;
}
}
@media (min-width: 768px) and (max-width: 979px) {
/* Remove any padding from the body */
body {
padding-top: 0;
}
}
@media (min-width: 1210px) {
.subnav-fixed .nav {
width: 1168px; /* 2px less to account for left/right borders being removed when in fixed mode */
}
......
// tooltips
$('a[rel=tooltip]').tooltip({
'placement': 'bottom'
});
// smooth scroll
$(document).ready(function() {
function filterPath(string) {
return string
.replace(/^\//,'')
.replace(/(index|default).[a-zA-Z]{3,4}$/,'')
.replace(/\/$/,'');
}
var locationPath = filterPath(location.pathname);
var scrollElem = scrollableElement('html', 'body');
$('a[href^=#]').each(function() {
var thisPath = filterPath(this.pathname) || locationPath;
if ( locationPath == thisPath
&& (location.hostname == this.hostname || !this.hostname)
&& this.hash.replace(/#/,'') ) {
var $target = $(this.hash), target = this.hash;
if (target) {
var targetOffset = $target.offset().top;
$(this).click(function(event) {
event.preventDefault();
$(scrollElem).animate({scrollTop: targetOffset}, 400, function() {
location.hash = target;
});
});
}
}
});
// use the first element that is "scrollable"
function scrollableElement(els) {
for (var i = 0, argLength = arguments.length; i <argLength; i++) {
var el = arguments[i],
$scrollElement = $(el);
if ($scrollElement.scrollTop()> 0) {
return el;
} else {
$scrollElement.scrollTop(1);
var isScrollable = $scrollElement.scrollTop()> 0;
$scrollElement.scrollTop(0);
if (isScrollable) {
return el;
}
}
}
return [];
}
});
// subnav
(function ($) {
$(function(){
// fix sub nav on scroll
var $win = $(window),
$body = $('body'),
$nav = $('.subnav'),
navHeight = $('.navbar').first().height(),
subnavHeight = $('.subnav').first().height(),
subnavTop = $('.subnav').length && $('.subnav').offset().top - navHeight,
marginTop = parseInt($body.css('margin-top'), 10);
isFixed = 0;
processScroll();
$win.on('scroll', processScroll);
function processScroll() {
var i, scrollTop = $win.scrollTop();
if (scrollTop >= subnavTop && !isFixed) {
isFixed = 1;
$nav.addClass('subnav-fixed');
$body.css('margin-top', marginTop + subnavHeight + 'px');
} else if (scrollTop <= subnavTop && isFixed) {
isFixed = 0;
$nav.removeClass('subnav-fixed');
$body.css('margin-top', marginTop + 'px');
}
}
});
})(window.jQuery);
\ No newline at end of file
......@@ -33,15 +33,15 @@
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="assets/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="../bootstrap/docs/assets/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../bootstrap/docs/assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../bootstrap/docs/assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../bootstrap/docs/assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="../bootstrap/docs/assets/ico/apple-touch-icon-57-precomposed.png">
</head>
<body data-spy="scroll" data-target=".bs-docs-sidebar">
<body id="top" data-spy="scroll" data-target=".bs-docs-sidebar">
<!-- Navbar
================================================== -->
......@@ -93,35 +93,6 @@
</div>
<!-- Modal
================================================== -->
<div class="modal fade" id="myModal">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<form>
<legend>Legend</legend>
<label>Label name</label>
<input type="text" placeholder="Type something">
<span class="help-block">Example block-level help text here.</span>
<label class="checkbox">
<input type="checkbox"> Check me out
</label>
<button type="submit" class="btn">Submit</button>
</form>
<p>One fine body in paragraph tags…</p>
And without p tags
</div>
<div class="modal-footer">
<a href="#" class="btn">Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</div>
<!-- Subhead
================================================== -->
<div class="container" id="overview">
......@@ -2410,7 +2381,7 @@
</div>
<div class="bs-docs-example" style="padding-bottom: 24px;">
<a href="#" class="btn btn-large btn-danger" rel="popover" data-content="And here's some amazing content. It's very engaging. right?" data-original-title="A Title">Click to toggle popover</a>
<a href="#" id="myPopover" class="btn btn-large btn-danger" rel="popover" data-content="And here's some amazing content. It's very engaging. right?" data-original-title="A Title">Click to toggle popover</a>
</div>
</section>
......@@ -2428,7 +2399,7 @@
================================================== -->
<footer class="footer">
<div class="container">
<p class="pull-right"><a href="#">Back to top</a></p>
<p class="pull-right"><a href="#top">Back to top</a></p>
<p>Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
<p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
<p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
......@@ -2441,6 +2412,33 @@
</footer>
<!-- Modal
================================================== -->
<div class="modal hide fade" id="myModal">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<form>
<legend>Legend</legend>
<label>Label name</label>
<input type="text" placeholder="Type something">
<span class="help-block">Example block-level help text here.</span>
<label class="checkbox">
<input type="checkbox"> Check me out
</label>
<button type="submit" class="btn">Submit</button>
</form>
<p>One fine body in paragraph tags…</p>
And without p tags
</div>
<div class="modal-footer">
<a href="#" class="btn">Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>