]> git.ipfire.org Git - thirdparty/bootstrap.git/commitdiff
Port over temp responsive styles to bootstrap.less; readd buttons
authorMark Otto <otto@github.com>
Wed, 16 Jan 2013 18:52:33 +0000 (10:52 -0800)
committerMark Otto <otto@github.com>
Wed, 16 Jan 2013 18:52:33 +0000 (10:52 -0800)
docs/assets/css/bootstrap.css
docs/assets/css/docs.css
less/bootstrap.less

index 9912ca6b8f66454b72bcf202663ef2d0b88daa7b..63fb17523f43e16f0cfe4fe823a364bf998035ab 100644 (file)
@@ -716,6 +716,197 @@ pre code {
   float: right;
 }
 
+.btn {
+  display: inline-block;
+  padding: 6px 12px;
+  margin-bottom: 0;
+  font-size: 14px;
+  font-weight: bold;
+  line-height: 20px;
+  text-align: center;
+  vertical-align: middle;
+  cursor: pointer;
+  border: 1px solid #a7a9aa;
+  border-radius: 4px;
+}
+
+.btn:focus {
+  outline: thin dotted #333;
+  outline: 5px auto -webkit-focus-ring-color;
+  outline-offset: -2px;
+}
+
+.btn:hover {
+  color: #fff;
+  text-decoration: none;
+}
+
+.btn:active,
+.btn.active {
+  background-image: none;
+  outline: 0;
+  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+          box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+}
+
+.btn.disabled,
+.btn[disabled],
+fieldset[disabled] .btn {
+  cursor: default;
+  opacity: 0.65;
+  filter: alpha(opacity=65);
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+.btn-large {
+  padding: 11px 19px;
+  font-size: 17.5px;
+  border-radius: 6px;
+}
+
+.btn-small {
+  padding: 2px 10px;
+  font-size: 11.9px;
+  border-radius: 3px;
+}
+
+.btn-mini [class^="icon-"],
+.btn-mini [class*=" icon-"] {
+  margin-top: -1px;
+}
+
+.btn-mini {
+  padding: 0 6px;
+  font-size: 10.5px;
+  border-radius: 3px;
+}
+
+.btn [class^="glyphicon-"]::before {
+  vertical-align: -2px;
+}
+
+.btn-small [class^="glyphicon-"]::before,
+.btn-mini [class^="glyphicon-"]::before {
+  vertical-align: -1px;
+}
+
+.btn-block {
+  display: block;
+  width: 100%;
+  padding-right: 0;
+  padding-left: 0;
+  -webkit-box-sizing: border-box;
+     -moz-box-sizing: border-box;
+          box-sizing: border-box;
+}
+
+.btn-block + .btn-block {
+  margin-top: 5px;
+}
+
+input[type="submit"].btn-block,
+input[type="reset"].btn-block,
+input[type="button"].btn-block {
+  width: 100%;
+}
+
+.btn {
+  color: #fff;
+  background-color: #a7a9aa;
+  border-color: #a7a9aa;
+}
+
+.btn:hover,
+.btn:focus,
+.btn:active {
+  background-color: #9a9c9d;
+  border-color: #8d9091;
+}
+
+.btn-primary {
+  background-color: #428bca;
+  border-color: #428bca;
+}
+
+.btn-primary:hover,
+.btn-primary:focus,
+.btn-primary:active {
+  background-color: #357ebd;
+  border-color: #3071a9;
+}
+
+.btn-warning {
+  background-color: #f0ad4e;
+  border-color: #f0ad4e;
+}
+
+.btn-warning:hover,
+.btn-warning:focus,
+.btn-warning:active {
+  background-color: #eea236;
+  border-color: #ec971f;
+}
+
+.btn-danger {
+  background-color: #d9534f;
+  border-color: #d9534f;
+}
+
+.btn-danger:hover,
+.btn-danger:focus,
+.btn-danger:active {
+  background-color: #d43f3a;
+  border-color: #c9302c;
+}
+
+.btn-success {
+  background-color: #5cb85c;
+  border-color: #5cb85c;
+}
+
+.btn-success:hover,
+.btn-success:focus,
+.btn-success:active {
+  background-color: #4cae4c;
+  border-color: #449d44;
+}
+
+.btn-link,
+.btn-link:active,
+.btn-link[disabled],
+fieldset[disabled] .btn-link {
+  background-color: transparent;
+  background-image: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+.btn-link,
+.btn-link:hover,
+.btn-link:active {
+  border-color: transparent;
+}
+
+.btn-link {
+  font-weight: normal;
+  color: #428bca;
+  cursor: pointer;
+  border-radius: 0;
+}
+
+.btn-link:hover {
+  color: #2a6496;
+  text-decoration: underline;
+  background-color: transparent;
+}
+
+.btn-link[disabled]:hover,
+fieldset[disabled] .btn-link:hover {
+  color: #333333;
+  text-decoration: none;
+}
+
 .fade {
   opacity: 0;
   -webkit-transition: opacity 0.15s linear;
@@ -1595,6 +1786,92 @@ pre code {
 
 */
 
+@media screen and (min-width: 768px) {
+  [class^="span"] {
+    float: left;
+  }
+  .span1 {
+    width: 8.3333333%;
+  }
+  .span2 {
+    width: 16.6666667%;
+  }
+  .span3 {
+    width: 25%;
+  }
+  .span4 {
+    width: 33.3333333%;
+  }
+  .span5 {
+    width: 41.666666667%;
+  }
+  .span6 {
+    width: 50%;
+  }
+  .span7 {
+    width: 58.333333333%;
+  }
+  .span8 {
+    width: 66.666666667%;
+  }
+  .span9 {
+    width: 75%;
+  }
+  .span10 {
+    width: 83.333333333%;
+  }
+  .span11 {
+    width: 91.666666667%;
+  }
+}
+
+@media screen and (min-width: 992px) {
+  {
+    /*  body {
+        font-size: 1.6rem;
+        font-size: 16px;
+      }
+    */
+  
+    /* Required to make the collapsing navbar work on regular desktops */
+  
+  }
+  .container {
+    width: 940px;
+    margin-right: auto;
+    margin-left: auto;
+  }
+  .navbar {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+  .navbar .brand {
+    float: left;
+    padding-top: 11px;
+    padding-bottom: 11px;
+    margin-left: -15px;
+  }
+  .navbar .nav {
+    margin-top: 0;
+    overflow: hidden;
+  }
+  .navbar .nav > li {
+    float: left;
+  }
+  .navbar .nav > li > a {
+    padding-top: 10px;
+    padding-bottom: 10px;
+  }
+  .navbar .btn-navbar {
+    display: none;
+  }
+  .nav-collapse.collapse {
+    float: left;
+    height: auto !important;
+    overflow: visible !important;
+  }
+}
+
 /*
 // Grid system and page structure
 @import "grid.less";
index 98a3bebe60ca920d68a50f8f099d8344f59ad721..ffff81f2128b5bb1d7865cb18a10ab0d63cb146c 100644 (file)
@@ -1,372 +1,5 @@
 
 
-
-/* Page =================================================== */
-/*
-html {
-  background-color: #fff;
-  font-size: 62.5%;
-  -webkit-overflow-scrolling: touch;
-  -webkit-tap-highlight-color: rgba(0,0,0,0);
-  -webkit-text-size-adjust: 100%;
-      -ms-text-size-adjust: 100%;
-}
-body {
-  margin: 0;
-  padding: 0;
-  width: 100%;
-  background-color: transparent;
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-size: 14px;
-  font-size: 1.4rem;
-  line-height: 1.5;
-  color: #3a3a3a;
-}
-p {
-  margin: 0 0 10px;
-}
-.lead {
-  font-size: 18px;
-  font-size: 1.8rem;
-}
-.page-header {
-  margin-top: 30px;
-  margin-bottom: 19px;
-  border-bottom: 1px solid #ddd;
-}
-
-
-img {
-  max-width: 100%;
-}
-*/
-
-/* Typography =================================================== */
-/*
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  margin: 20px 0 10px;
-  color: inherit;
-  font-family: inherit;
-  font-weight: 500;
-  text-rendering: optimizelegibility;
-}
-h1 small,
-h2 small {
-  font-weight: normal;
-  color: #bfbfbf;
-}
-h1 {
-  font-size: 40px;
-  font-size: 4rem;
-  line-height: 1.2;
-}
-h2 {
-  font-size: 30px;
-  font-size: 3rem;
-  line-height: 1.2;
-}
-h3 {
-  font-size: 24px;
-  font-size: 2.4rem;
-  line-height: 1.2;
-}
-h4 {
-  font-size: 18px;
-  font-size: 1.8rem;
-  line-height: 1.25;
-}
-h5 {
-  font-size: 16px;
-  font-size: 1.6rem;
-}
-h6 {
-  font-weight: normal;
-  letter-spacing: 1px;
-  text-transform: uppercase;
-}
-small {
-  font-size: 80%;
-}
-ul,
-ol {
-  margin: 0 0 1em;
-  padding: 0 0 0 28px;
-}
-li ul,
-li ol {
-  margin-bottom: 0;
-}
-
-hr {
-  margin: 20px 0 19px;
-  border: 0;
-  border-top: 1px solid #ddd;
-}
-
-pre, code {
-  color: #c7254e;
-}
-code {
-  padding: 2px 4px;
-  white-space: nowrap;
-  border-radius: 3px;
-  background-color: #f9f2f4;
-}
-
-
-a {
-  color: #428bca;
-  text-decoration: none;
-}
-a:hover {
-  text-decoration: underline;
-}
-*/
-
-
-/*.collapse {
-  position: relative;
-  height: 0;
-  overflow: hidden;
-}
-.collapse.in {
-  height: auto;
-}
-*/
-
-
-/*.nav {
-  margin-bottom: 0;
-  padding-left: 0;
-  overflow: hidden;
-}
-.nav > li {
-  display: block;
-}
-.nav > li > a {
-  position: relative;
-  display: block;
-  padding: 10px 15px;
-}
-.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
-  border: 1px solid #ddd;
-}
-.nav-list > li:first-child > a {
-   border-top-left-radius: 5px;
-  border-top-right-radius: 5px;
-}
-.nav-list > li:last-child > a {
-  margin-bottom: 0;  undo the tuck
-   border-bottom-left-radius: 5px;
-  border-bottom-right-radius: 5px;
-}
-.nav-list > .active > a,
-.nav-list > .active > 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
-}*/
-
-
-
-
-
-/*.navbar {
-  padding: 15px;
-  background-color: #eee;
-  overflow: hidden;
-}
-
-.navbar .brand {
-  display: inline-block;
-  padding: 7px 15px;
-  font-size: 1.8rem;
-  font-size: 18px;
-  font-weight: bold;
-  line-height: 1;
-}
-.navbar .brand:hover {
-  text-decoration: none;
-  background-color: #ddd;
-}*/
-
-/*.navbar .nav {
-  margin-top: 15px;
-}
-.navbar .nav > li > a {
-  line-height: 20px;
-}
-.navbar .nav > li > a:hover {
-  background-color: #ddd;
-}
-.navbar .nav > .active > a {
-  background-color: #ddd;
-}
-*/
-/*.btn-navbar {
-  float: right;
-  padding: 10px 12px;
-  background-color: #ddd;
-  border: 0;
-  border-radius: 4px;
-}
-.btn-navbar .icon-bar {
-  display: block;
-  width: 20px;
-  height: 2px;
-  background-color: #fff;
-  border-radius: 1px;
-}
-.btn-navbar .icon-bar + .icon-bar {
-  margin-top: 3px;
-}*/
-
-
-/*.navbar-inverse {
-  background-color: #222;
-}
-.navbar-inverse .brand {
-  color: #fff;
-}
-.navbar-inverse .brand:hover {
-  background-color: #333;
-}
-.navbar-inverse .nav > li > a {
-  color: #fff;
-}
-.navbar-inverse .nav > li > a:hover {
-  background-color: #333;
-}
-.navbar .nav > .active > a {
-  background-color: #333;
-}
-.navbar-inverse .btn-navbar {
-  background-color: #444;
-}*/
-
-
-
-
-
-
-/*.row {
-  margin-left: -10px;
-  margin-right: -10px;
-  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) {
-  html {
-    -ms-text-size-adjust: none;
-    -webkit-text-size-adjust: none;
-  }
-}*/
-
-
-@media screen and (min-width: 480px) {
-
-}
-@media screen and (min-width: 600px) {
-
-}
-@media screen and (min-width: 768px) {
-
-  h1 {  }
-  h2 {  }
-  h3 {  }
-  h4 {  }
-  h5 {  }
-  h6 {  }
-
-  [class^="span"] {
-    float: left;
-  }
-
-  .span1 { width: 8.3333333%; }
-  .span2 { width: 16.6666667%; }
-  .span3 { width: 25%; }
-  .span4 { width: 33.3333333%; }
-  .span5 { width: 41.666666667%; }
-  .span6 { width: 50%; }
-  .span7 { width: 58.333333333%; }
-  .span8 { width: 66.666666667%; }
-  .span9 { width: 75%; }
-  .span10 { width: 83.333333333%; }
-  .span11 { width: 91.666666667%; }
-
-}
-@media screen and (min-width: 992px) {
-
-/*  body {
-    font-size: 1.6rem;
-    font-size: 16px;
-  }
-*/
-  .container {
-    width: 940px;
-    margin-left: auto;
-    margin-right: auto;
-  }
-
-  .navbar {
-    padding-top: 0;
-    padding-bottom: 0;
-  }
-  .navbar .brand {
-    float: left;
-    padding-top: 11px;
-    padding-bottom: 11px;
-    margin-left: -15px;
-  }
-  .navbar .nav {
-    overflow: hidden; /* clearfix */
-    margin-top: 0; /* undo top margin to make nav extend full height of navbar */
-  }
-  .navbar .nav > li {
-    float: left;
-  }
-  .navbar .nav > li > a {
-    padding-top: 10px;
-    padding-bottom: 10px;
-  }
-
-  /* Required to make the collapsing navbar work on regular desktops */
-  .navbar .btn-navbar {
-    display: none;
-  }
-  .nav-collapse.collapse {
-    float: left;
-    height: auto !important;
-    overflow: visible !important;
-  }
-
-}
-@media screen and (min-width: 1382px) {
-
-}
-
-
 /* Docs =================================================== */
 
 body > .container {
index 8e60e41c009235f0e6c283540d658745fe0cc2f8..207118746fe57aa13e86c9c78128b7b2b1be5913 100644 (file)
@@ -21,6 +21,8 @@
 @import "code.less";
 @import "grid.less";
 
+@import "buttons.less";
+
 // Components: common
 @import "component-animations.less";
 
 @import "navbar.less";
 
 
+// Responsive: Tablets and up
+@media screen and (min-width: 768px) {
+
+  [class^="span"] {
+    float: left;
+  }
+  .span1 { width: 8.3333333%; }
+  .span2 { width: 16.6666667%; }
+  .span3 { width: 25%; }
+  .span4 { width: 33.3333333%; }
+  .span5 { width: 41.666666667%; }
+  .span6 { width: 50%; }
+  .span7 { width: 58.333333333%; }
+  .span8 { width: 66.666666667%; }
+  .span9 { width: 75%; }
+  .span10 { width: 83.333333333%; }
+  .span11 { width: 91.666666667%; }
+
+}
+
+// Responsive: Desktops and up
+@media screen and (min-width: 992px) {
+
+/*  body {
+    font-size: 1.6rem;
+    font-size: 16px;
+  }
+*/
+  .container {
+    width: 940px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .navbar {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+  .navbar .brand {
+    float: left;
+    padding-top: 11px;
+    padding-bottom: 11px;
+    margin-left: -15px;
+  }
+  .navbar .nav {
+    overflow: hidden; /* clearfix */
+    margin-top: 0; /* undo top margin to make nav extend full height of navbar */
+  }
+  .navbar .nav > li {
+    float: left;
+  }
+  .navbar .nav > li > a {
+    padding-top: 10px;
+    padding-bottom: 10px;
+  }
+
+  /* Required to make the collapsing navbar work on regular desktops */
+  .navbar .btn-navbar {
+    display: none;
+  }
+  .nav-collapse.collapse {
+    float: left;
+    height: auto !important;
+    overflow: visible !important;
+  }
+
+}
+
 /*
 // Grid system and page structure
 @import "grid.less";