update docs to remove old stuff, update to all new classes; no more backwards compatibility
This commit is contained in:
Mark Otto
parent
732ff9ed1c
commit
ec8619a980
|
|
@ -6,7 +6,7 @@
|
|||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Designed and built with all the love in the world @twitter by @mdo and @fat.
|
||||
* Date: Fri Sep 16 14:07:03 PDT 2011
|
||||
* Date: Sat Sep 17 17:21:25 PDT 2011
|
||||
*/
|
||||
/* Reset.less
|
||||
* Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
|
||||
|
|
@ -1238,16 +1238,13 @@ table .headerSortUp.purple, table .headerSortDown.purple {
|
|||
color: #bfbfbf;
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
.topbar h3 a:hover, .topbar .brand a:hover, .topbar ul .active > a {
|
||||
.topbar .brand a:hover, .topbar ul .active > a {
|
||||
background-color: #333;
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
}
|
||||
.topbar h3 {
|
||||
position: relative;
|
||||
}
|
||||
.topbar h3 a, .topbar .brand {
|
||||
.topbar .brand {
|
||||
float: left;
|
||||
display: block;
|
||||
padding: 8px 20px 12px;
|
||||
|
|
@ -1322,7 +1319,7 @@ table .headerSortUp.purple, table .headerSortDown.purple {
|
|||
-moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
|
||||
box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
.topbar-inner, .topbar .fill {
|
||||
.topbar-inner {
|
||||
background-color: #222;
|
||||
background-color: #222222;
|
||||
background-repeat: repeat-x;
|
||||
|
|
@ -1338,92 +1335,59 @@ table .headerSortUp.purple, table .headerSortDown.purple {
|
|||
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.topbar div > ul, .nav {
|
||||
.nav {
|
||||
display: block;
|
||||
float: left;
|
||||
margin: 0 10px 0 0;
|
||||
position: relative;
|
||||
left: 0;
|
||||
}
|
||||
.topbar div > ul > li, .nav > li {
|
||||
.nav > li {
|
||||
display: block;
|
||||
float: left;
|
||||
}
|
||||
.topbar div > ul a, .nav a {
|
||||
.nav a {
|
||||
display: block;
|
||||
float: none;
|
||||
padding: 10px 10px 11px;
|
||||
line-height: 19px;
|
||||
text-decoration: none;
|
||||
}
|
||||
.topbar div > ul a:hover, .nav a:hover {
|
||||
.nav a:hover {
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
}
|
||||
.topbar div > ul .active > a, .nav .active > a {
|
||||
.nav .active > a {
|
||||
background-color: #222;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.topbar div > ul.secondary-nav, .nav.secondary-nav {
|
||||
.nav.secondary-nav {
|
||||
float: right;
|
||||
margin-left: 10px;
|
||||
margin-right: 0;
|
||||
}
|
||||
.topbar div > ul.secondary-nav .menu-dropdown,
|
||||
.nav.secondary-nav .menu-dropdown,
|
||||
.topbar div > ul.secondary-nav .dropdown-menu,
|
||||
.nav.secondary-nav .dropdown-menu {
|
||||
right: 0;
|
||||
border: 0;
|
||||
}
|
||||
.topbar div > ul a.menu:hover,
|
||||
.nav a.menu:hover,
|
||||
.topbar div > ul li.open .menu,
|
||||
.nav li.open .menu,
|
||||
.topbar div > ul .dropdown-toggle:hover,
|
||||
.nav .dropdown-toggle:hover,
|
||||
.topbar div > ul .dropdown.open .dropdown-toggle,
|
||||
.nav .dropdown.open .dropdown-toggle {
|
||||
.nav .dropdown-toggle:hover, .nav .dropdown.open .dropdown-toggle {
|
||||
background: #444;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
.topbar div > ul .menu-dropdown,
|
||||
.nav .menu-dropdown,
|
||||
.topbar div > ul .dropdown-menu,
|
||||
.nav .dropdown-menu {
|
||||
background-color: #333;
|
||||
}
|
||||
.topbar div > ul .menu-dropdown a.menu,
|
||||
.nav .menu-dropdown a.menu,
|
||||
.topbar div > ul .dropdown-menu a.menu,
|
||||
.nav .dropdown-menu a.menu,
|
||||
.topbar div > ul .menu-dropdown .dropdown-toggle,
|
||||
.nav .menu-dropdown .dropdown-toggle,
|
||||
.topbar div > ul .dropdown-menu .dropdown-toggle,
|
||||
.nav .dropdown-menu .dropdown-toggle {
|
||||
color: #ffffff;
|
||||
}
|
||||
.topbar div > ul .menu-dropdown a.menu.open,
|
||||
.nav .menu-dropdown a.menu.open,
|
||||
.topbar div > ul .dropdown-menu a.menu.open,
|
||||
.nav .dropdown-menu a.menu.open,
|
||||
.topbar div > ul .menu-dropdown .dropdown-toggle.open,
|
||||
.nav .menu-dropdown .dropdown-toggle.open,
|
||||
.topbar div > ul .dropdown-menu .dropdown-toggle.open,
|
||||
.nav .dropdown-menu .dropdown-toggle.open {
|
||||
background: #444;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
.topbar div > ul .menu-dropdown li a,
|
||||
.nav .menu-dropdown li a,
|
||||
.topbar div > ul .dropdown-menu li a,
|
||||
.nav .dropdown-menu li a {
|
||||
color: #999;
|
||||
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.topbar div > ul .menu-dropdown li a:hover,
|
||||
.nav .menu-dropdown li a:hover,
|
||||
.topbar div > ul .dropdown-menu li a:hover,
|
||||
.nav .dropdown-menu li a:hover {
|
||||
background-color: #191919;
|
||||
background-repeat: repeat-x;
|
||||
|
|
@ -1437,26 +1401,20 @@ table .headerSortUp.purple, table .headerSortDown.purple {
|
|||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#191919', GradientType=0);
|
||||
color: #ffffff;
|
||||
}
|
||||
.topbar div > ul .menu-dropdown .active a,
|
||||
.nav .menu-dropdown .active a,
|
||||
.topbar div > ul .dropdown-menu .active a,
|
||||
.nav .dropdown-menu .active a {
|
||||
color: #ffffff;
|
||||
}
|
||||
.topbar div > ul .menu-dropdown .divider,
|
||||
.nav .menu-dropdown .divider,
|
||||
.topbar div > ul .dropdown-menu .divider,
|
||||
.nav .dropdown-menu .divider {
|
||||
background-color: #222;
|
||||
border-color: #444;
|
||||
}
|
||||
.topbar ul .menu-dropdown li a, .topbar ul .dropdown-menu li a {
|
||||
.topbar ul .dropdown-menu li a {
|
||||
padding: 4px 15px;
|
||||
}
|
||||
li.menu, .dropdown {
|
||||
.dropdown {
|
||||
position: relative;
|
||||
}
|
||||
a.menu:after, .dropdown-toggle:after {
|
||||
.dropdown-toggle:after {
|
||||
width: 0;
|
||||
height: 0;
|
||||
display: inline-block;
|
||||
|
|
@ -1473,7 +1431,7 @@ a.menu:after, .dropdown-toggle:after {
|
|||
-moz-opacity: 0.5;
|
||||
opacity: 0.5;
|
||||
}
|
||||
.menu-dropdown, .dropdown-menu {
|
||||
.dropdown-menu {
|
||||
background-color: #ffffff;
|
||||
float: left;
|
||||
display: none;
|
||||
|
|
@ -1501,12 +1459,12 @@ a.menu:after, .dropdown-toggle:after {
|
|||
-moz-background-clip: padding-box;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
.menu-dropdown li, .dropdown-menu li {
|
||||
.dropdown-menu li {
|
||||
float: none;
|
||||
display: block;
|
||||
background-color: none;
|
||||
}
|
||||
.menu-dropdown .divider, .dropdown-menu .divider {
|
||||
.dropdown-menu .divider {
|
||||
height: 1px;
|
||||
margin: 5px 0;
|
||||
overflow: hidden;
|
||||
|
|
@ -1539,17 +1497,11 @@ a.menu:after, .dropdown-toggle:after {
|
|||
-moz-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025);
|
||||
box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025);
|
||||
}
|
||||
.open .menu,
|
||||
.dropdown.open .menu,
|
||||
.open .dropdown-toggle,
|
||||
.dropdown.open .dropdown-toggle {
|
||||
color: #ffffff;
|
||||
background: #ccc;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.open .menu-dropdown,
|
||||
.dropdown.open .menu-dropdown,
|
||||
.open .dropdown-menu,
|
||||
.dropdown.open .dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -1606,22 +1558,22 @@ a.menu:after, .dropdown-toggle:after {
|
|||
border: 1px solid #ddd;
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
.tabs .menu-dropdown, .tabs .dropdown-menu {
|
||||
.tabs .dropdown-menu {
|
||||
top: 35px;
|
||||
border-width: 1px;
|
||||
-webkit-border-radius: 0 6px 6px 6px;
|
||||
-moz-border-radius: 0 6px 6px 6px;
|
||||
border-radius: 0 6px 6px 6px;
|
||||
}
|
||||
.tabs a.menu:after, .tabs .dropdown-toggle:after {
|
||||
.tabs .dropdown-toggle:after {
|
||||
border-top-color: #999;
|
||||
margin-top: 15px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.tabs li.open.menu .menu, .tabs .open.dropdown .dropdown-toggle {
|
||||
.tabs .open.dropdown .dropdown-toggle {
|
||||
border-color: #999;
|
||||
}
|
||||
.tabs li.open a.menu:after, .tabs .dropdown.open .dropdown-toggle:after {
|
||||
.tabs .dropdown.open .dropdown-toggle:after {
|
||||
border-top-color: #555;
|
||||
}
|
||||
.tab-content {
|
||||
|
|
|
|||
|
|
@ -209,9 +209,8 @@ table .headerSortUp.orange,table .headerSortDown.orange{background-color:#fee9cc
|
|||
table .purple{color:#7a43b6;border-bottom-color:#7a43b6;}
|
||||
table .headerSortUp.purple,table .headerSortDown.purple{background-color:#e2d5f0;}
|
||||
.topbar{height:40px;position:fixed;top:0;left:0;right:0;z-index:10000;overflow:visible;}.topbar a{color:#bfbfbf;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);}
|
||||
.topbar h3 a:hover,.topbar .brand a:hover,.topbar ul .active>a{background-color:#333;background-color:rgba(255, 255, 255, 0.05);color:#ffffff;text-decoration:none;}
|
||||
.topbar h3{position:relative;}
|
||||
.topbar h3 a,.topbar .brand{float:left;display:block;padding:8px 20px 12px;margin-left:-20px;color:#ffffff;font-size:20px;font-weight:200;line-height:1;}
|
||||
.topbar .brand a:hover,.topbar ul .active>a{background-color:#333;background-color:rgba(255, 255, 255, 0.05);color:#ffffff;text-decoration:none;}
|
||||
.topbar .brand{float:left;display:block;padding:8px 20px 12px;margin-left:-20px;color:#ffffff;font-size:20px;font-weight:200;line-height:1;}
|
||||
.topbar p{margin:0;line-height:40px;}.topbar p a:hover{background-color:transparent;color:#ffffff;}
|
||||
.topbar form{float:left;margin:5px 0 0 0;position:relative;filter:alpha(opacity=100);-khtml-opacity:1;-moz-opacity:1;opacity:1;}
|
||||
.topbar form.pull-right{float:right;}
|
||||
|
|
@ -219,33 +218,33 @@ table .headerSortUp.purple,table .headerSortDown.purple{background-color:#e2d5f0
|
|||
.topbar input::-webkit-input-placeholder{color:#e6e6e6;}
|
||||
.topbar input:hover{background-color:#bfbfbf;background-color:rgba(255, 255, 255, 0.5);color:#ffffff;}
|
||||
.topbar input:focus,.topbar input.focused{outline:0;background-color:#ffffff;color:#404040;text-shadow:0 1px 0 #ffffff;border:0;padding:5px 10px;-webkit-box-shadow:0 0 3px rgba(0, 0, 0, 0.15);-moz-box-shadow:0 0 3px rgba(0, 0, 0, 0.15);box-shadow:0 0 3px rgba(0, 0, 0, 0.15);}
|
||||
.topbar-inner,.topbar .fill{background-color:#222;background-color:#222222;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#333333), to(#222222));background-image:-moz-linear-gradient(top, #333333, #222222);background-image:-ms-linear-gradient(top, #333333, #222222);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #222222));background-image:-webkit-linear-gradient(top, #333333, #222222);background-image:-o-linear-gradient(top, #333333, #222222);background-image:linear-gradient(top, #333333, #222222);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);box-shadow:0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);}
|
||||
.topbar div>ul,.nav{display:block;float:left;margin:0 10px 0 0;position:relative;left:0;}.topbar div>ul>li,.nav>li{display:block;float:left;}
|
||||
.topbar div>ul a,.nav a{display:block;float:none;padding:10px 10px 11px;line-height:19px;text-decoration:none;}.topbar div>ul a:hover,.nav a:hover{color:#ffffff;text-decoration:none;}
|
||||
.topbar div>ul .active>a,.nav .active>a{background-color:#222;background-color:rgba(0, 0, 0, 0.5);}
|
||||
.topbar div>ul.secondary-nav,.nav.secondary-nav{float:right;margin-left:10px;margin-right:0;}.topbar div>ul.secondary-nav .menu-dropdown,.nav.secondary-nav .menu-dropdown,.topbar div>ul.secondary-nav .dropdown-menu,.nav.secondary-nav .dropdown-menu{right:0;border:0;}
|
||||
.topbar div>ul a.menu:hover,.nav a.menu:hover,.topbar div>ul li.open .menu,.nav li.open .menu,.topbar div>ul .dropdown-toggle:hover,.nav .dropdown-toggle:hover,.topbar div>ul .dropdown.open .dropdown-toggle,.nav .dropdown.open .dropdown-toggle{background:#444;background:rgba(255, 255, 255, 0.05);}
|
||||
.topbar div>ul .menu-dropdown,.nav .menu-dropdown,.topbar div>ul .dropdown-menu,.nav .dropdown-menu{background-color:#333;}.topbar div>ul .menu-dropdown a.menu,.nav .menu-dropdown a.menu,.topbar div>ul .dropdown-menu a.menu,.nav .dropdown-menu a.menu,.topbar div>ul .menu-dropdown .dropdown-toggle,.nav .menu-dropdown .dropdown-toggle,.topbar div>ul .dropdown-menu .dropdown-toggle,.nav .dropdown-menu .dropdown-toggle{color:#ffffff;}.topbar div>ul .menu-dropdown a.menu.open,.nav .menu-dropdown a.menu.open,.topbar div>ul .dropdown-menu a.menu.open,.nav .dropdown-menu a.menu.open,.topbar div>ul .menu-dropdown .dropdown-toggle.open,.nav .menu-dropdown .dropdown-toggle.open,.topbar div>ul .dropdown-menu .dropdown-toggle.open,.nav .dropdown-menu .dropdown-toggle.open{background:#444;background:rgba(255, 255, 255, 0.05);}
|
||||
.topbar div>ul .menu-dropdown li a,.nav .menu-dropdown li a,.topbar div>ul .dropdown-menu li a,.nav .dropdown-menu li a{color:#999;text-shadow:0 1px 0 rgba(0, 0, 0, 0.5);}.topbar div>ul .menu-dropdown li a:hover,.nav .menu-dropdown li a:hover,.topbar div>ul .dropdown-menu li a:hover,.nav .dropdown-menu li a:hover{background-color:#191919;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#292929), to(#191919));background-image:-moz-linear-gradient(top, #292929, #191919);background-image:-ms-linear-gradient(top, #292929, #191919);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #292929), color-stop(100%, #191919));background-image:-webkit-linear-gradient(top, #292929, #191919);background-image:-o-linear-gradient(top, #292929, #191919);background-image:linear-gradient(top, #292929, #191919);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#191919', GradientType=0);color:#ffffff;}
|
||||
.topbar div>ul .menu-dropdown .active a,.nav .menu-dropdown .active a,.topbar div>ul .dropdown-menu .active a,.nav .dropdown-menu .active a{color:#ffffff;}
|
||||
.topbar div>ul .menu-dropdown .divider,.nav .menu-dropdown .divider,.topbar div>ul .dropdown-menu .divider,.nav .dropdown-menu .divider{background-color:#222;border-color:#444;}
|
||||
.topbar ul .menu-dropdown li a,.topbar ul .dropdown-menu li a{padding:4px 15px;}
|
||||
li.menu,.dropdown{position:relative;}
|
||||
a.menu:after,.dropdown-toggle:after{width:0;height:0;display:inline-block;content:"↓";text-indent:-99999px;vertical-align:top;margin-top:8px;margin-left:4px;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=50);-khtml-opacity:0.5;-moz-opacity:0.5;opacity:0.5;}
|
||||
.menu-dropdown,.dropdown-menu{background-color:#ffffff;float:left;display:none;position:absolute;top:40px;z-index:900;min-width:160px;max-width:220px;_width:160px;margin-left:0;margin-right:0;padding:6px 0;zoom:1;border-color:#999;border-color:rgba(0, 0, 0, 0.2);border-style:solid;border-width:0 1px 1px;-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;-webkit-box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);-moz-box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.menu-dropdown li,.dropdown-menu li{float:none;display:block;background-color:none;}
|
||||
.menu-dropdown .divider,.dropdown-menu .divider{height:1px;margin:5px 0;overflow:hidden;background-color:#eee;border-bottom:1px solid #ffffff;}
|
||||
.topbar-inner{background-color:#222;background-color:#222222;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#333333), to(#222222));background-image:-moz-linear-gradient(top, #333333, #222222);background-image:-ms-linear-gradient(top, #333333, #222222);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #222222));background-image:-webkit-linear-gradient(top, #333333, #222222);background-image:-o-linear-gradient(top, #333333, #222222);background-image:linear-gradient(top, #333333, #222222);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);box-shadow:0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);}
|
||||
.nav{display:block;float:left;margin:0 10px 0 0;position:relative;left:0;}.nav>li{display:block;float:left;}
|
||||
.nav a{display:block;float:none;padding:10px 10px 11px;line-height:19px;text-decoration:none;}.nav a:hover{color:#ffffff;text-decoration:none;}
|
||||
.nav .active>a{background-color:#222;background-color:rgba(0, 0, 0, 0.5);}
|
||||
.nav.secondary-nav{float:right;margin-left:10px;margin-right:0;}.nav.secondary-nav .dropdown-menu{right:0;border:0;}
|
||||
.nav .dropdown-toggle:hover,.nav .dropdown.open .dropdown-toggle{background:#444;background:rgba(255, 255, 255, 0.05);}
|
||||
.nav .dropdown-menu{background-color:#333;}.nav .dropdown-menu .dropdown-toggle{color:#ffffff;}.nav .dropdown-menu .dropdown-toggle.open{background:#444;background:rgba(255, 255, 255, 0.05);}
|
||||
.nav .dropdown-menu li a{color:#999;text-shadow:0 1px 0 rgba(0, 0, 0, 0.5);}.nav .dropdown-menu li a:hover{background-color:#191919;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#292929), to(#191919));background-image:-moz-linear-gradient(top, #292929, #191919);background-image:-ms-linear-gradient(top, #292929, #191919);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #292929), color-stop(100%, #191919));background-image:-webkit-linear-gradient(top, #292929, #191919);background-image:-o-linear-gradient(top, #292929, #191919);background-image:linear-gradient(top, #292929, #191919);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#191919', GradientType=0);color:#ffffff;}
|
||||
.nav .dropdown-menu .active a{color:#ffffff;}
|
||||
.nav .dropdown-menu .divider{background-color:#222;border-color:#444;}
|
||||
.topbar ul .dropdown-menu li a{padding:4px 15px;}
|
||||
.dropdown{position:relative;}
|
||||
.dropdown-toggle:after{width:0;height:0;display:inline-block;content:"↓";text-indent:-99999px;vertical-align:top;margin-top:8px;margin-left:4px;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=50);-khtml-opacity:0.5;-moz-opacity:0.5;opacity:0.5;}
|
||||
.dropdown-menu{background-color:#ffffff;float:left;display:none;position:absolute;top:40px;z-index:900;min-width:160px;max-width:220px;_width:160px;margin-left:0;margin-right:0;padding:6px 0;zoom:1;border-color:#999;border-color:rgba(0, 0, 0, 0.2);border-style:solid;border-width:0 1px 1px;-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;-webkit-box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);-moz-box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.dropdown-menu li{float:none;display:block;background-color:none;}
|
||||
.dropdown-menu .divider{height:1px;margin:5px 0;overflow:hidden;background-color:#eee;border-bottom:1px solid #ffffff;}
|
||||
.topbar .dropdown-menu a,.dropdown-menu a{display:block;padding:4px 15px;clear:both;font-weight:normal;line-height:18px;color:#808080;text-shadow:0 1px 0 #ffffff;}.topbar .dropdown-menu a:hover,.dropdown-menu a:hover{background-color:#dddddd;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#eeeeee), to(#dddddd));background-image:-moz-linear-gradient(top, #eeeeee, #dddddd);background-image:-ms-linear-gradient(top, #eeeeee, #dddddd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #dddddd));background-image:-webkit-linear-gradient(top, #eeeeee, #dddddd);background-image:-o-linear-gradient(top, #eeeeee, #dddddd);background-image:linear-gradient(top, #eeeeee, #dddddd);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#dddddd', GradientType=0);color:#404040;text-decoration:none;-webkit-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.025),inset 0 -1px rgba(0, 0, 0, 0.025);-moz-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.025),inset 0 -1px rgba(0, 0, 0, 0.025);box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.025),inset 0 -1px rgba(0, 0, 0, 0.025);}
|
||||
.open .menu,.dropdown.open .menu,.open .dropdown-toggle,.dropdown.open .dropdown-toggle{color:#ffffff;background:#ccc;background:rgba(0, 0, 0, 0.3);}
|
||||
.open .menu-dropdown,.dropdown.open .menu-dropdown,.open .dropdown-menu,.dropdown.open .dropdown-menu{display:block;}
|
||||
.dropdown.open .dropdown-toggle{color:#ffffff;background:#ccc;background:rgba(0, 0, 0, 0.3);}
|
||||
.dropdown.open .dropdown-menu{display:block;}
|
||||
.tabs,.pills{margin:0 0 20px;padding:0;list-style:none;zoom:1;}.tabs:before,.pills:before,.tabs:after,.pills:after{display:table;content:"";zoom:1;*display:inline;}
|
||||
.tabs:after,.pills:after{clear:both;}
|
||||
.tabs>li,.pills>li{float:left;}.tabs>li>a,.pills>li>a{display:block;}
|
||||
.tabs{float:left;width:100%;border-bottom:1px solid #ddd;}.tabs>li{position:relative;top:1px;}.tabs>li>a{padding:0 15px;margin-right:2px;line-height:36px;border:1px solid transparent;-webkit-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0;}.tabs>li>a:hover{text-decoration:none;background-color:#eee;border-color:#eee #eee #ddd;}
|
||||
.tabs>li.active>a{color:#808080;background-color:#ffffff;border:1px solid #ddd;border-bottom-color:transparent;}
|
||||
.tabs .menu-dropdown,.tabs .dropdown-menu{top:35px;border-width:1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;}
|
||||
.tabs a.menu:after,.tabs .dropdown-toggle:after{border-top-color:#999;margin-top:15px;margin-left:5px;}
|
||||
.tabs li.open.menu .menu,.tabs .open.dropdown .dropdown-toggle{border-color:#999;}
|
||||
.tabs li.open a.menu:after,.tabs .dropdown.open .dropdown-toggle:after{border-top-color:#555;}
|
||||
.tabs .dropdown-menu{top:35px;border-width:1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;}
|
||||
.tabs .dropdown-toggle:after{border-top-color:#999;margin-top:15px;margin-left:5px;}
|
||||
.tabs .open.dropdown .dropdown-toggle{border-color:#999;}
|
||||
.tabs .dropdown.open .dropdown-toggle:after{border-top-color:#555;}
|
||||
.tab-content{clear:both;}
|
||||
.pills a{margin:5px 3px 5px 0;padding:0 15px;text-shadow:0 1px 1px #ffffff;line-height:30px;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;}.pills a:hover{background:#00438a;color:#ffffff;text-decoration:none;text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);}
|
||||
.pills .active a{background:#0069d6;color:#ffffff;text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);}
|
||||
|
|
|
|||
236
docs/index.html
236
docs/index.html
|
|
@ -6,7 +6,7 @@
|
|||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
|
||||
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
|
||||
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
|
||||
<!--[if lt IE 9]>
|
||||
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<![endif]-->
|
||||
|
|
@ -37,22 +37,42 @@
|
|||
|
||||
<!-- Topbar
|
||||
================================================== -->
|
||||
<div class="topbar" data-scrollspy="scrollspy" >
|
||||
<div class="topbar" data-scrollspy="scrollspy">
|
||||
<div class="topbar-inner">
|
||||
<div class="container">
|
||||
<a class="brand" href="#">Bootstrap</a>
|
||||
<ul class="nav">
|
||||
<li class="active"><a href="#overview">Overview</a></li>
|
||||
<li><a href="#about">About</a></li>
|
||||
<li><a href="#grid-system">Grid</a></li>
|
||||
<li><a href="#layouts">Layouts</a></li>
|
||||
<li><a href="#typography">Type</a></li>
|
||||
<li><a href="#media">Media</a></li>
|
||||
<li><a href="#tables">Tables</a></li>
|
||||
<li><a href="#forms">Forms</a></li>
|
||||
<li><a href="#navigation">Navigation</a></li>
|
||||
<li><a href="#alerts">Alerts</a></li>
|
||||
<li><a href="#popovers">Popovers</a></li>
|
||||
|
||||
<li class="dropdown" data-dropdown="dropdown">
|
||||
<a href="#" class="dropdown-toggle">Scaffolding</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#grid-system">Grid</a></li>
|
||||
<li><a href="#layouts">Layouts</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li class="dropdown" data-dropdown="dropdown">
|
||||
<a href="#" class="dropdown-toggle">CSS</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#typography">Type</a></li>
|
||||
<li><a href="#tables">Tables</a></li>
|
||||
<li><a href="#forms">Forms</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li class="dropdown" data-dropdown="dropdown">
|
||||
<a href="#" class="dropdown-toggle">Patterns</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#media">Media</a></li>
|
||||
<li><a href="#navigation">Navigation</a></li>
|
||||
<li><a href="#alerts">Alerts</a></li>
|
||||
<li><a href="#popovers">Popovers</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
|
||||
<li><a href="#javascript">Javascript</a></li>
|
||||
<li><a href="#less">Less</a></li>
|
||||
</ul>
|
||||
|
|
@ -718,102 +738,6 @@
|
|||
|
||||
|
||||
|
||||
<!-- Media
|
||||
================================================== -->
|
||||
<section id="media">
|
||||
<div class="page-header">
|
||||
<h1>Media <small>Displaying images and videos</small></h1>
|
||||
</div>
|
||||
<!-- Table structure -->
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<h2>Media grid</h2>
|
||||
<p>Display thumbnails of varying sizes on pages with a low HTML footprint and minimal styles.</p>
|
||||
</div>
|
||||
<div class="span12">
|
||||
<h3>Example thumbnails</h3>
|
||||
<p>Thumbnails in the <code>.media-grid</code> can be any size, but they work best when mapped directly to the built-in Bootstrap grid system. Image widths like 90, 210, and 330 combine with a few pixels of padding to equal the <code>.span2</code>, <code>.span4</code>, and <code>.span6</code> column sizes.</p>
|
||||
<h4>Large</h4>
|
||||
<ul class="media-grid">
|
||||
<li>
|
||||
<a href="#">
|
||||
<img class="thumbnail" src="http://placehold.it/330x230" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<img class="thumbnail" src="http://placehold.it/330x230" alt="">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<h4>Medium</h4>
|
||||
<ul class="media-grid">
|
||||
<li>
|
||||
<a href="#">
|
||||
<img class="thumbnail" src="http://placehold.it/210x150" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<img class="thumbnail" src="http://placehold.it/210x150" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<img class="thumbnail" src="http://placehold.it/210x150" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<img class="thumbnail" src="http://placehold.it/210x150" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<img class="thumbnail" src="http://placehold.it/210x150" alt="">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<h4>Small</h4>
|
||||
<ul class="media-grid">
|
||||
<li>
|
||||
<a href="#">
|
||||
<img class="thumbnail" src="http://placehold.it/90x90" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<img class="thumbnail" src="http://placehold.it/90x90" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<img class="thumbnail" src="http://placehold.it/90x90" alt="">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<h4>Coding them</h4>
|
||||
<p>Media grids are easy to use and rather simple on the markup side. Their dimensions are purely based on the size of the images included.</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<ul class="media-grid">
|
||||
<li>
|
||||
<a href="#">
|
||||
<img class="thumbnail" src="http://placehold.it/330x230" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<img class="thumbnail" src="http://placehold.it/330x230" alt="">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</pre>
|
||||
</div>
|
||||
</div><!-- /row -->
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<!-- Tables
|
||||
================================================== -->
|
||||
<section id="tables">
|
||||
|
|
@ -1295,6 +1219,102 @@
|
|||
|
||||
|
||||
|
||||
<!-- Media
|
||||
================================================== -->
|
||||
<section id="media">
|
||||
<div class="page-header">
|
||||
<h1>Media <small>Displaying images and videos</small></h1>
|
||||
</div>
|
||||
<!-- Table structure -->
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<h2>Media grid</h2>
|
||||
<p>Display thumbnails of varying sizes on pages with a low HTML footprint and minimal styles.</p>
|
||||
</div>
|
||||
<div class="span12">
|
||||
<h3>Example thumbnails</h3>
|
||||
<p>Thumbnails in the <code>.media-grid</code> can be any size, but they work best when mapped directly to the built-in Bootstrap grid system. Image widths like 90, 210, and 330 combine with a few pixels of padding to equal the <code>.span2</code>, <code>.span4</code>, and <code>.span6</code> column sizes.</p>
|
||||
<h4>Large</h4>
|
||||
<ul class="media-grid">
|
||||
<li>
|
||||
<a href="#">
|
||||
<img class="thumbnail" src="http://placehold.it/330x230" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<img class="thumbnail" src="http://placehold.it/330x230" alt="">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<h4>Medium</h4>
|
||||
<ul class="media-grid">
|
||||
<li>
|
||||
<a href="#">
|
||||
<img class="thumbnail" src="http://placehold.it/210x150" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<img class="thumbnail" src="http://placehold.it/210x150" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<img class="thumbnail" src="http://placehold.it/210x150" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<img class="thumbnail" src="http://placehold.it/210x150" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<img class="thumbnail" src="http://placehold.it/210x150" alt="">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<h4>Small</h4>
|
||||
<ul class="media-grid">
|
||||
<li>
|
||||
<a href="#">
|
||||
<img class="thumbnail" src="http://placehold.it/90x90" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<img class="thumbnail" src="http://placehold.it/90x90" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<img class="thumbnail" src="http://placehold.it/90x90" alt="">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<h4>Coding them</h4>
|
||||
<p>Media grids are easy to use and rather simple on the markup side. Their dimensions are purely based on the size of the images included.</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<ul class="media-grid">
|
||||
<li>
|
||||
<a href="#">
|
||||
<img class="thumbnail" src="http://placehold.it/330x230" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<img class="thumbnail" src="http://placehold.it/330x230" alt="">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</pre>
|
||||
</div>
|
||||
</div><!-- /row -->
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<!-- Navigation
|
||||
================================================== -->
|
||||
<section id="navigation">
|
||||
|
|
@ -1306,7 +1326,7 @@
|
|||
<div class="topbar" data-dropdown="dropdown" >
|
||||
<div class="topbar-inner">
|
||||
<div class="container">
|
||||
<h3><a href="#">Project Name</a></h3>
|
||||
<a class="brand" href="#">Project Name</a>
|
||||
<ul class="nav">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
|
|
|
|||
|
|
@ -39,11 +39,11 @@
|
|||
|
||||
<!-- Topbar
|
||||
================================================== -->
|
||||
<div class="topbar" data-scrollspy="scrollspy" >
|
||||
<div class="fill">
|
||||
<div class="topbar" data-scrollspy="scrollspy">
|
||||
<div class="topbar-inner">
|
||||
<div class="container">
|
||||
<h3><a href="#">Bootstrap JS</a></h3>
|
||||
<ul>
|
||||
<a class="brand" href="#">Bootstrap JS</a>
|
||||
<ul class="nav">
|
||||
<li><a href="#overview">Overview</a></li>
|
||||
<li><a href="#modal">Modals</a></li>
|
||||
<li><a href="#dropdown">Dropdown</a></li>
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
|
||||
(function( $ ){
|
||||
|
||||
var d = 'a.menu, .dropdown-toggle'
|
||||
var d = '.dropdown-toggle'
|
||||
|
||||
function clearMenus() {
|
||||
$(d).parent('li').removeClass('open')
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
|
||||
$(function () {
|
||||
$('html').bind("click", clearMenus)
|
||||
$('body').dropdown( '[data-dropdown] a.menu, [data-dropdown] .dropdown-toggle' )
|
||||
$('body').dropdown( '[data-dropdown] .dropdown-toggle' )
|
||||
})
|
||||
|
||||
/* DROPDOWN PLUGIN DEFINITION
|
||||
|
|
|
|||
|
|
@ -23,8 +23,6 @@
|
|||
}
|
||||
|
||||
// Hover and active states
|
||||
// h3 for backwards compatibility
|
||||
h3 a:hover,
|
||||
.brand a:hover,
|
||||
ul .active > a {
|
||||
background-color: #333;
|
||||
|
|
@ -33,12 +31,7 @@
|
|||
text-decoration: none;
|
||||
}
|
||||
|
||||
// Website name
|
||||
// h3 left for backwards compatibility
|
||||
h3 {
|
||||
position: relative;
|
||||
}
|
||||
h3 a,
|
||||
// Website or project name
|
||||
.brand {
|
||||
float: left;
|
||||
display: block;
|
||||
|
|
@ -112,9 +105,7 @@
|
|||
}
|
||||
|
||||
// gradient is applied to it's own element because overflow visible is not honored by ie when filter is present
|
||||
// For backwards compatibility, include .topbar .fill
|
||||
.topbar-inner,
|
||||
.topbar .fill {
|
||||
.topbar-inner {
|
||||
background-color: #222;
|
||||
#gradient > .vertical(#333, #222);
|
||||
@shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
|
||||
|
|
@ -127,8 +118,6 @@
|
|||
|
||||
// Topbar Nav
|
||||
// ul.nav for all topbar based navigation to avoid inheritance issues and over-specificity
|
||||
// For backwards compatibility, leave in .topbar div > ul
|
||||
.topbar div > ul,
|
||||
.nav {
|
||||
display: block;
|
||||
float: left;
|
||||
|
|
@ -160,28 +149,19 @@
|
|||
float: right;
|
||||
margin-left: 10px;
|
||||
margin-right: 0;
|
||||
// backwards compatibility
|
||||
.menu-dropdown,
|
||||
.dropdown-menu {
|
||||
right: 0;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
// Dropdowns within the .nav
|
||||
// a.menu:hover and li.open .menu for backwards compatibility
|
||||
a.menu:hover,
|
||||
li.open .menu,
|
||||
.dropdown-toggle:hover,
|
||||
.dropdown.open .dropdown-toggle {
|
||||
background: #444;
|
||||
background: rgba(255,255,255,.05);
|
||||
}
|
||||
// .menu-dropdown for backwards compatibility
|
||||
.menu-dropdown,
|
||||
.dropdown-menu {
|
||||
background-color: #333;
|
||||
// a.menu for backwards compatibility
|
||||
a.menu,
|
||||
.dropdown-toggle {
|
||||
color: @white;
|
||||
&.open {
|
||||
|
|
@ -207,22 +187,16 @@
|
|||
}
|
||||
}
|
||||
|
||||
// For backwards compatibility with new dropdowns, redeclare dropdown link padding
|
||||
.topbar ul .menu-dropdown li a,
|
||||
.topbar ul .dropdown-menu li a {
|
||||
padding: 4px 15px;
|
||||
}
|
||||
|
||||
// Dropdown Menus
|
||||
// Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns
|
||||
// li.menu for backwards compatibility
|
||||
li.menu,
|
||||
.dropdown {
|
||||
position: relative;
|
||||
}
|
||||
// The link that is clicked to toggle the dropdown
|
||||
// a.menu for backwards compatibility
|
||||
a.menu:after,
|
||||
.dropdown-toggle:after {
|
||||
width: 0;
|
||||
height: 0;
|
||||
|
|
@ -238,8 +212,6 @@ a.menu:after,
|
|||
.opacity(50);
|
||||
}
|
||||
// The dropdown menu (ul)
|
||||
// .menu-dropdown for backwards compatibility
|
||||
.menu-dropdown,
|
||||
.dropdown-menu {
|
||||
background-color: @white;
|
||||
float: left;
|
||||
|
|
@ -300,18 +272,12 @@ a.menu:after,
|
|||
}
|
||||
|
||||
// Open state for the dropdown
|
||||
// .open for backwards compatibility
|
||||
.open,
|
||||
.dropdown.open {
|
||||
// .menu for backwards compatibility
|
||||
.menu,
|
||||
.dropdown-toggle {
|
||||
color: @white;
|
||||
background: #ccc;
|
||||
background: rgba(0,0,0,.3);
|
||||
}
|
||||
// .menu-dropdown for backwards compatibility
|
||||
.menu-dropdown,
|
||||
.dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -360,27 +326,19 @@ a.menu:after,
|
|||
border-bottom-color: transparent;
|
||||
}
|
||||
}
|
||||
// first one for backwards compatibility
|
||||
.menu-dropdown,
|
||||
.dropdown-menu {
|
||||
top: 35px;
|
||||
border-width: 1px;
|
||||
.border-radius(0 6px 6px 6px);
|
||||
}
|
||||
// first one for backwards compatibility
|
||||
a.menu:after,
|
||||
.dropdown-toggle:after {
|
||||
border-top-color: #999;
|
||||
margin-top: 15px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
// first one for backwards compatibility
|
||||
li.open.menu .menu,
|
||||
.open.dropdown .dropdown-toggle {
|
||||
border-color: #999;
|
||||
}
|
||||
// first one for backwards compatibility
|
||||
li.open a.menu:after,
|
||||
.dropdown.open .dropdown-toggle:after {
|
||||
border-top-color: #555;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue