Skip to content

GitLab

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
Hide whitespace changes
Inline Side-by-side
swatchmaker/test/bootswatch.css
View file @ 71617eba
body { section {
padding-top: 80px; margin-top: 60px;
padding-bottom: 20px; padding-top: 100px;
} }
.navbar a > i { /* index */
opacity: 0.5;
.tooltip-inner {
max-width: 500px;
} }
.navbar a:hover > i { .hero-unit h1,
opacity: 1; .hero-unit p {
margin-bottom: 15px;
} }
section { #footer {
margin-top: 100px; 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 { .subhead {
padding-bottom: 0; padding-bottom: 0;
margin-bottom: 9px; margin-bottom: 9px;
...@@ -24,6 +48,12 @@ section { ...@@ -24,6 +48,12 @@ section {
font-size: 54px; font-size: 54px;
} }
.subhead > div:first-child {
min-height: 200px;
}
/* subnav */
.subnav { .subnav {
margin-bottom: 60px; margin-bottom: 60px;
width: 100%; width: 100%;
...@@ -42,11 +72,11 @@ section { ...@@ -42,11 +72,11 @@ section {
-moz-border-radius: 4px; -moz-border-radius: 4px;
border-radius: 4px; border-radius: 4px;
} }
.subnav .nav { .subnav .nav {
margin-bottom: 0; margin-bottom: 0;
} }
.subnav .nav > li > a { .subnav .nav > li > a {
margin: 0; margin: 0;
padding-top: 11px; padding-top: 11px;
...@@ -57,7 +87,7 @@ section { ...@@ -57,7 +87,7 @@ section {
-moz-border-radius: 0; -moz-border-radius: 0;
border-radius: 0; border-radius: 0;
} }
.subnav .nav > .active > a, .subnav .nav > .active > a,
.subnav .nav > .active > a:hover { .subnav .nav > .active > a:hover {
padding-left: 13px; padding-left: 13px;
...@@ -69,12 +99,12 @@ section { ...@@ -69,12 +99,12 @@ section {
-moz-box-shadow: inset 0 3px 5px rgba(0,0,0,.05); -moz-box-shadow: inset 0 3px 5px rgba(0,0,0,.05);
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 .caret,
.subnav .nav > .active > a:hover .caret { .subnav .nav > .active > a:hover .caret {
border-top-color: #777; border-top-color: #777;
} }
.subnav .nav > li:first-child > a, .subnav .nav > li:first-child > a,
.subnav .nav > li:first-child > a:hover { .subnav .nav > li:first-child > a:hover {
border-left: 0; border-left: 0;
...@@ -83,227 +113,19 @@ section { ...@@ -83,227 +113,19 @@ section {
-moz-border-radius: 4px 0 0 4px; -moz-border-radius: 4px 0 0 4px;
border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px;
} }
.subnav .nav > li:last-child > a { .subnav .nav > li:last-child > a {
border-right: 0; border-right: 0;
} }
.subnav .dropdown-menu { .subnav .dropdown-menu {
-webkit-border-radius: 0 0 4px 4px; -webkit-border-radius: 0 0 4px 4px;
-moz-border-radius: 0 0 4px 4px; -moz-border-radius: 0 0 4px 4px;
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) { @media (max-width: 767px) {
body {
padding-top: 0;
}
.subnav { .subnav {
position: static; position: static;
top: auto; top: auto;
...@@ -315,53 +137,32 @@ body .one .bsa_it_p { ...@@ -315,53 +137,32 @@ body .one .bsa_it_p {
-moz-box-shadow: none; -moz-box-shadow: none;
box-shadow: none; box-shadow: none;
} }
.subnav .nav > li { .subnav .nav > li {
float: none; float: none;
} }
.subnav .nav > li > a { .subnav .nav > li > a {
border: 0; border: 0;
} }
.subnav .nav > li + li > a { .subnav .nav > li + li > a {
border-top: 1px solid #e5e5e5; border-top: 1px solid #e5e5e5;
} }
.subnav .nav > li:first-child > a, .subnav .nav > li:first-child > a,
.subnav .nav > li:first-child > a:hover { .subnav .nav > li:first-child > a:hover {
-webkit-border-radius: 4px 4px 0 0; -webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0; -moz-border-radius: 4px 4px 0 0;
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) { @media (min-width: 980px) {
.subnav-fixed { .subnav-fixed {
position: fixed; position: fixed;
top: 41px; top: 40px;
left: 0; left: 0;
right: 0; right: 0;
z-index: 1020; /* 10 less than .navbar-fixed to prevent any overlap */ z-index: 1020; /* 10 less than .navbar-fixed to prevent any overlap */
...@@ -375,11 +176,13 @@ body .one .bsa_it_p { ...@@ -375,11 +176,13 @@ body .one .bsa_it_p {
box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1); box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); /* IE6-9 */ filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); /* IE6-9 */
} }
.subnav-fixed .nav { .subnav-fixed .nav {
width: 938px; width: 938px;
margin: 0 auto; margin: 0 auto;
padding: 0 1px; padding: 0 1px;
} }
.subnav .nav > li:first-child > a, .subnav .nav > li:first-child > a,
.subnav .nav > li:first-child > a:hover { .subnav .nav > li:first-child > a:hover {
-webkit-border-radius: 0; -webkit-border-radius: 0;
...@@ -387,17 +190,9 @@ body .one .bsa_it_p { ...@@ -387,17 +190,9 @@ body .one .bsa_it_p {
border-radius: 0; 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) { @media (min-width: 1210px) {
.subnav-fixed .nav { .subnav-fixed .nav {
width: 1168px; /* 2px less to account for left/right borders being removed when in fixed mode */ width: 1168px; /* 2px less to account for left/right borders being removed when in fixed mode */
} }
......
swatchmaker/test/bootswatch.js 0 → 100644
View file @ 71617eba
// 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
swatchmaker/test/test-full.html
View file @ 71617eba
...@@ -33,15 +33,15 @@ ...@@ -33,15 +33,15 @@
<![endif]--> <![endif]-->
<!-- Le fav and touch icons --> <!-- Le fav and touch icons -->
<link rel="shortcut icon" href="assets/ico/favicon.ico"> <link rel="shortcut icon" href="../bootstrap/docs/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="144x144" href="../bootstrap/docs/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="114x114" href="../bootstrap/docs/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" sizes="72x72" href="../bootstrap/docs/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="apple-touch-icon-precomposed" href="../bootstrap/docs/assets/ico/apple-touch-icon-57-precomposed.png">
</head> </head>
<body data-spy="scroll" data-target=".bs-docs-sidebar"> <body id="top" data-spy="scroll" data-target=".bs-docs-sidebar">
<!-- Navbar <!-- Navbar
================================================== --> ================================================== -->
...@@ -93,35 +93,6 @@ ...@@ -93,35 +93,6 @@
</div> </div>