kotovalexarian-likes-github
/
twbs--bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Releases Activity

mobile-first navs, navbar, grids, and type

This commit is contained in:
Mark Otto 2013-01-15 17:55:14 -08:00
parent 094767fbfe
commit 85db846b65
12 changed files with 1623 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1394
docs/assets/css/bootstrap.css vendored
View File

File diff suppressed because it is too large Load Diff

65
docs/assets/css/docs.css
View File

@ -2,6 +2,7 @@
/* Page =================================================== */
/*
html {
background-color: #fff;
font-size: 62.5%;
@ -38,9 +39,10 @@ p {
img {
max-width: 100%;
}
*/
/* Typography =================================================== */
/*
h1,
h2,
h3,
@ -92,7 +94,7 @@ small {
}
ul,
ol {
margin: 0 0 .5em;
margin: 0 0 1em;
padding: 0 0 0 28px;
}
li ul,
@ -124,10 +126,10 @@ a {
a:hover {
text-decoration: underline;
}
*/
.collapse {
/*.collapse {
position: relative;
height: 0;
overflow: hidden;
@ -135,13 +137,13 @@ a:hover {
.collapse.in {
height: auto;
}
*/
.nav {
/*.nav {
margin-bottom: 0;
padding-left: 0; /* override default ul/ol */
overflow: hidden; /* clearfix */
padding-left: 0;
overflow: hidden;
}
.nav > li {
display: block;
@ -154,11 +156,11 @@ a:hover {
.nav > li > a:hover {
text-decoration: none;
background-color: #f5f5f5;
}
}*/
.nav-list > li > a {
margin-bottom: -1px; /* tuck up the following item to make 1px border */
/*.nav-list > li > a {
margin-bottom: -1px; // tuck up the following item to make 1px border
border: 1px solid #ddd;
}
.nav-list > li:first-child > a {
@ -166,7 +168,7 @@ a:hover {
border-top-right-radius: 5px;
}
.nav-list > li:last-child > a {
margin-bottom: 0; /* undo the tuck */
margin-bottom: 0; undo the tuck
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
@ -175,17 +177,17 @@ a:hover {
color: #fff;
background-color: #428bca;
border-color: #428bca;
z-index: 2; /* Bring active item forward so border sits on top of next element */
}
z-index: 2; // Bring active item forward so border sits on top of next element
}*/
.navbar {
/*.navbar {
padding: 15px;
background-color: #eee;
overflow: hidden; /* clearfix */
overflow: hidden;
}
.navbar .brand {
@ -199,10 +201,10 @@ a:hover {
.navbar .brand:hover {
text-decoration: none;
background-color: #ddd;
}
}*/
.navbar .nav {
margin-top: 15px; /* space out from .navbar .brand and .btn-navbar */
/*.navbar .nav {
margin-top: 15px;
}
.navbar .nav > li > a {
line-height: 20px;
@ -213,8 +215,8 @@ a:hover {
.navbar .nav > .active > a {
background-color: #ddd;
}
.btn-navbar {
*/
/*.btn-navbar {
float: right;
padding: 10px 12px;
background-color: #ddd;
@ -230,10 +232,10 @@ a:hover {
}
.btn-navbar .icon-bar + .icon-bar {
margin-top: 3px;
}
}*/
.navbar-inverse {
/*.navbar-inverse {
background-color: #222;
}
.navbar-inverse .brand {
@ -253,33 +255,33 @@ a:hover {
}
.navbar-inverse .btn-navbar {
background-color: #444;
}
}*/
.row {
/*.row {
margin-left: -10px;
margin-right: -10px;
overflow: hidden; /* clearfix */
overflow: hidden;
}
[class^="span"] {
padding-left: 10px;
padding-right: 10px;
-webkit-box-sizing: border-box;
}
}*/
/* Disable iOS/WinMobile font size changes */
@media screen and (max-device-width: 480px) {
/*@media screen and (max-device-width: 480px) {
html {
-ms-text-size-adjust: none;
-webkit-text-size-adjust: none;
}
}
}*/
@media screen and (min-width: 480px) {
@ -399,6 +401,11 @@ body > .container {
padding: 14px;
margin-bottom: -1px;
}
.bs-docs-example p:last-child,
.bs-docs-example ul:last-child,
.bs-docs-example ol:last-child {
margin-bottom: 0;
}
.bs-docs-example + .prettyprint {
margin-top: 0;
}

14
less/bootstrap.less vendored
View File

@ -15,12 +15,22 @@
// Reset
@import "normalize.less";
// Core CSS
@import "scaffolding.less";
@import "type.less";
@import "code.less";
@import "grid.less";
// Components: common
@import "component-animations.less";
// Components: Nav
@import "navs.less";
@import "navbar.less";
/*
// Grid system and page structure
@import "scaffolding.less";
@import "grid.less";
// Base CSS

6
less/code.less
View File

@ -16,9 +16,9 @@ pre {
// Inline code
code {
padding: 2px 4px;
color: #d14;
background-color: #f7f7f9;
border: 1px solid #e1e1e8;
font-size: 90%;
color: #c7254e;
background-color: #f9f2f4;
white-space: nowrap;
}

12
less/component-animations.less
View File

@ -11,7 +11,7 @@
}
}
.collapse {
/*.collapse {
position: relative;
height: 0;
overflow: hidden;
@ -19,4 +19,14 @@
&.in {
height: auto;
}
}*/
.collapse {
position: relative;
height: 0;
overflow: hidden;
.transition(height .35s ease);
}
.collapse.in {
height: auto;
}

17
less/grid.less
View File

@ -9,8 +9,23 @@
max-width: 940px;
}
// Mobile-first defaults
.row {
margin-left: -10px;
margin-right: -10px;
.clear_float();
}
[class^="span"] {
padding-left: 10px;
padding-right: 10px;
// Proper box-model (padding doesn't add to width)
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
// Fixed (940px)
#grid > .core(@grid-column-width, @grid-gutter-width, @grid-row-width);
// #grid > .core(@grid-column-width, @grid-gutter-width, @grid-row-width);
// Reset utility classes due to specificity
[class*="span"].pull-right {

2
less/mixins.less
View File

@ -425,7 +425,7 @@
.container-fixed() {
margin-right: auto;
margin-left: auto;
.clearfix();
.clear_float();
}
// Make a Grid

89
less/navbar.less
View File

@ -1,7 +1,92 @@
//
// Navbars (Redux)
// Navbars
// --------------------------------------------------
// Wrapper and base class
.navbar {
padding: 15px;
background-color: #eee;
.clear_float();
}
// Brand/project name
.navbar .brand {
display: inline-block;
padding: 7px 15px;
font-size: 18px;
font-weight: bold;
line-height: 1;
&:hover {
text-decoration: none;
background-color: #ddd;
}
}
// Responsive navbar button
.btn-navbar {
float: right;
padding: 10px 12px;
background-color: #ddd;
border: 0;
border-radius: 4px;
// Bars
.icon-bar {
display: block;
width: 20px;
height: 2px;
background-color: #fff;
border-radius: 1px;
}
.icon-bar + .icon-bar {
margin-top: 3px;
}
}
// Nav links
.navbar {
.nav {
margin-top: 15px; // space out from .navbar .brand and .btn-navbar
}
.nav > li > a {
line-height: 20px;
}
.nav > li > a:hover {
background-color: #ddd;
}
.nav > .active > a {
background-color: #ddd;
}
}
// Inverse navbar
.navbar-inverse {
background-color: #222;
.brand {
color: #fff;
&:hover {
background-color: #333;
}
}
.nav > li > a {
color: #fff;
}
.nav > li > a:hover {
background-color: #333;
}
.nav > .active > a {
background-color: #333;
}
.btn-navbar {
background-color: #444;
}
}
/*
// COMMON STYLES
// -------------
@ -446,3 +531,5 @@
}
}
*/

42
less/navs.less
View File

@ -8,22 +8,52 @@
.nav {
margin-left: 0;
margin-bottom: @line-height-base;
margin-bottom: 0;
padding-left: 0; // Override default ul/ol
list-style: none;
.clearfix();
.clear_float();
}
.nav > li {
float: left;
display: block;
}
.nav > li > a {
position: relative;
display: block;
padding: 8px 12px;
padding: 10px 15px;
}
.nav > li > a:hover {
text-decoration: none;
background-color: @grayLighter;
}
// Lists
// -------------------------
.nav-list > li > a {
margin-bottom: -1px; // pull up the following link for a 1px border between
border: 1px solid #e5e5e5;
}
.nav-list > li:first-child > a {
border-top-left-radius: @border-radius-base;
border-top-right-radius: @border-radius-base;
}
.nav-list > li:last-child > a {
border-radius: 0 0 6px 6px;
border-bottom-left-radius: @border-radius-base;
border-bottom-right-radius: @border-radius-base;
}
.nav-list > .active > a,
.nav-list > .active > a:hover {
z-index: 2; // Bring active item forward so border sits on top of next element
color: #fff;
background-color: @link-color;
border-color: @link-color;
}
/*
// Prevent IE8 from misplacing imgs
// See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989
.nav > li > a > img {
@ -55,9 +85,10 @@
.nav .divider {
.nav-divider();
}
*/
/*
// Tabs
// -------------------------
@ -269,3 +300,4 @@
background-color: transparent;
cursor: default;
}
*/

21
less/scaffolding.less
View File

@ -6,9 +6,30 @@
// Body reset
// -------------------------
html {
font-size: 62.5%;
// Touch the Mobile Magic™
-webkit-overflow-scrolling: touch;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
// Disable iOS/WinMobile font size changes
@media screen and (max-device-width: 480px) {
html {
-ms-text-size-adjust: none;
-webkit-text-size-adjust: none;
}
}
body {
margin: 0;
color: @text-color;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
font-size: 1.4rem;
line-height: 1.5;
background-color: @body-background;
}

7
less/type.less
View File

@ -93,9 +93,10 @@ h4 small { font-size: @font-size-base; }
// --------------------------------------------------
// Unordered and Ordered lists
ul, ol {
ul,
ol {
padding: 0;
margin: 0 0 @line-height-base / 2 25px;
margin: 0 0 (@line-height-base / 2) 25px;
}
ul ul,
ul ol,
@ -138,7 +139,7 @@ dd {
}
// Horizontal layout (like forms)
.dl-horizontal {
.clearfix(); // Ensure dl clears floats if empty dd elements present
.clear_float(); // Ensure dl clears floats if empty dd elements present
dt {
float: left;
width: @component-offset-horizontal - 20;

2
less/variables.less
View File

@ -46,7 +46,7 @@
@line-height-base: 20px;
@headings-font-family: inherit; // empty to use BS default, @font-family-base
@headings-font-weight: bold; // instead of browser default, bold
@headings-font-weight: 500;
// Component sizing