From 233e050adfc171685fd2c2f6ad760a8556aa0eb2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andreas=20Cederstro=CC=88m?= Date: Fri, 26 Oct 2012 09:47:55 +0200 Subject: [PATCH 1/3] Adding .inline for ul and ol --- docs/assets/css/bootstrap.css | 87 +++++++++++++++++--------- docs/base-css.html | 15 +++++ docs/templates/pages/base-css.mustache | 15 +++++ less/type.less | 15 +++++ 4 files changed, 104 insertions(+), 28 deletions(-) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 2b8dfb944f..725d0f680a 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -747,6 +747,37 @@ ol.unstyled { list-style: none; } +ul.inline, +ol.inline { + *zoom: 1; +} + +ul.inline:before, +ol.inline:before, +ul.inline:after, +ol.inline:after { + display: table; + line-height: 0; + content: ""; +} + +ul.inline:after, +ol.inline:after { + clear: both; +} + +ul.inline > li, +ol.inline > li { + float: left; + margin-right: 14px; + margin-left: 12px; +} + +ul.unstyled.inline > li, +ol.unstyled.inline > li { + padding-left: 0; +} + dl { margin-bottom: 20px; } @@ -2830,7 +2861,7 @@ table th[class*="span"], background-image: -o-linear-gradient(top, #0088cc, #0077b3); background-image: linear-gradient(to bottom, #0088cc, #0077b3); background-repeat: repeat-x; - filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0); } .dropdown-menu .active > a, @@ -2845,7 +2876,7 @@ table th[class*="span"], background-image: linear-gradient(to bottom, #0088cc, #0077b3); background-repeat: repeat-x; outline: 0; - filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0); } .dropdown-menu .disabled > a, @@ -3073,8 +3104,8 @@ button.close { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; - filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0); - filter: progid:dximagetransform.microsoft.gradient(enabled=false); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0); + filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); *zoom: 1; -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); @@ -3224,8 +3255,8 @@ input[type="button"].btn-block { background-repeat: repeat-x; border-color: #0044cc #0044cc #002a80; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); - filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0044cc', GradientType=0); - filter: progid:dximagetransform.microsoft.gradient(enabled=false); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0044cc', GradientType=0); + filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); } .btn-primary:hover, @@ -3256,8 +3287,8 @@ input[type="button"].btn-block { background-repeat: repeat-x; border-color: #f89406 #f89406 #ad6704; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); - filter: progid:dximagetransform.microsoft.gradient(startColorstr='#fffbb450', endColorstr='#fff89406', GradientType=0); - filter: progid:dximagetransform.microsoft.gradient(enabled=false); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffbb450', endColorstr='#fff89406', GradientType=0); + filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); } .btn-warning:hover, @@ -3288,8 +3319,8 @@ input[type="button"].btn-block { background-repeat: repeat-x; border-color: #bd362f #bd362f #802420; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); - filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffee5f5b', endColorstr='#ffbd362f', GradientType=0); - filter: progid:dximagetransform.microsoft.gradient(enabled=false); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffee5f5b', endColorstr='#ffbd362f', GradientType=0); + filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); } .btn-danger:hover, @@ -3320,8 +3351,8 @@ input[type="button"].btn-block { background-repeat: repeat-x; border-color: #51a351 #51a351 #387038; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); - filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff62c462', endColorstr='#ff51a351', GradientType=0); - filter: progid:dximagetransform.microsoft.gradient(enabled=false); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff62c462', endColorstr='#ff51a351', GradientType=0); + filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); } .btn-success:hover, @@ -3352,8 +3383,8 @@ input[type="button"].btn-block { background-repeat: repeat-x; border-color: #2f96b4 #2f96b4 #1f6377; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); - filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff2f96b4', GradientType=0); - filter: progid:dximagetransform.microsoft.gradient(enabled=false); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff2f96b4', GradientType=0); + filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); } .btn-info:hover, @@ -3384,8 +3415,8 @@ input[type="button"].btn-block { background-repeat: repeat-x; border-color: #222222 #222222 #000000; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); - filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff444444', endColorstr='#ff222222', GradientType=0); - filter: progid:dximagetransform.microsoft.gradient(enabled=false); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff444444', endColorstr='#ff222222', GradientType=0); + filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); } .btn-inverse:hover, @@ -4188,7 +4219,7 @@ input[type="submit"].btn.btn-mini { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; - filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff2f2f2', GradientType=0); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff2f2f2', GradientType=0); *zoom: 1; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065); -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065); @@ -4457,8 +4488,8 @@ input[type="submit"].btn.btn-mini { background-repeat: repeat-x; border-color: #e5e5e5 #e5e5e5 #bfbfbf; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); - filter: progid:dximagetransform.microsoft.gradient(startColorstr='#fff2f2f2', endColorstr='#ffe5e5e5', GradientType=0); - filter: progid:dximagetransform.microsoft.gradient(enabled=false); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2f2f2', endColorstr='#ffe5e5e5', GradientType=0); + filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075); @@ -4595,7 +4626,7 @@ input[type="submit"].btn.btn-mini { background-image: linear-gradient(to bottom, #222222, #111111); background-repeat: repeat-x; border-color: #252525; - filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff222222', endColorstr='#ff111111', GradientType=0); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff222222', endColorstr='#ff111111', GradientType=0); } .navbar-inverse .brand, @@ -4705,8 +4736,8 @@ input[type="submit"].btn.btn-mini { background-repeat: repeat-x; border-color: #040404 #040404 #000000; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); - filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff151515', endColorstr='#ff040404', GradientType=0); - filter: progid:dximagetransform.microsoft.gradient(enabled=false); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff151515', endColorstr='#ff040404', GradientType=0); + filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); } .navbar-inverse .btn-navbar:hover, @@ -5544,7 +5575,7 @@ a.badge:hover { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; - filter: progid:dximagetransform.microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#fff9f9f9', GradientType=0); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#fff9f9f9', GradientType=0); -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); @@ -5565,7 +5596,7 @@ a.badge:hover { background-image: -o-linear-gradient(top, #149bdf, #0480be); background-image: linear-gradient(to bottom, #149bdf, #0480be); background-repeat: repeat-x; - filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff149bdf', endColorstr='#ff0480be', GradientType=0); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff149bdf', endColorstr='#ff0480be', GradientType=0); -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); @@ -5614,7 +5645,7 @@ a.badge:hover { background-image: -o-linear-gradient(top, #ee5f5b, #c43c35); background-image: linear-gradient(to bottom, #ee5f5b, #c43c35); background-repeat: repeat-x; - filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffee5f5b', endColorstr='#ffc43c35', GradientType=0); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffee5f5b', endColorstr='#ffc43c35', GradientType=0); } .progress-danger.progress-striped .bar, @@ -5636,7 +5667,7 @@ a.badge:hover { background-image: -o-linear-gradient(top, #62c462, #57a957); background-image: linear-gradient(to bottom, #62c462, #57a957); background-repeat: repeat-x; - filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff62c462', endColorstr='#ff57a957', GradientType=0); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff62c462', endColorstr='#ff57a957', GradientType=0); } .progress-success.progress-striped .bar, @@ -5658,7 +5689,7 @@ a.badge:hover { background-image: -o-linear-gradient(top, #5bc0de, #339bb9); background-image: linear-gradient(to bottom, #5bc0de, #339bb9); background-repeat: repeat-x; - filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff339bb9', GradientType=0); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff339bb9', GradientType=0); } .progress-info.progress-striped .bar, @@ -5680,7 +5711,7 @@ a.badge:hover { background-image: -o-linear-gradient(top, #fbb450, #f89406); background-image: linear-gradient(to bottom, #fbb450, #f89406); background-repeat: repeat-x; - filter: progid:dximagetransform.microsoft.gradient(startColorstr='#fffbb450', endColorstr='#fff89406', GradientType=0); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffbb450', endColorstr='#fff89406', GradientType=0); } .progress-warning.progress-striped .bar, diff --git a/docs/base-css.html b/docs/base-css.html index 10a7dc62eb..a045ec87e8 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -374,6 +374,21 @@ <ul class="unstyled"> <li>...</li> </ul> + + +

Inline

+

A list of floated left items. Can be combined with with .unstyled

+
+ +
+
+<ul class="unstyled inline">
+  <li>...</li>
+</ul>

Description

diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index e0a0280687..b80ce39663 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -311,6 +311,21 @@ <ul class="unstyled"> <li>...</li> </ul> + + +

{{_i}}Inline{{/i}}

+

{{_i}}A list of floated left items. Can be combined with with .unstyled{{/i}}

+
+ +
+
+<ul class="unstyled inline">
+  <li>...</li>
+</ul>

{{_i}}Description{{/i}}

diff --git a/less/type.less b/less/type.less index 3b428e79de..883c476a82 100644 --- a/less/type.less +++ b/less/type.less @@ -117,6 +117,21 @@ ol.unstyled { margin-left: 0; list-style: none; } +ul.inline, +ol.inline { + .clearfix(); +} +ul.inline > li, +ol.inline > li { + float: left; + margin-right: 14px; + margin-left: 12px; +} +// Reset left padding for unstyled +ul.unstyled.inline > li, +ol.unstyled.inline > li { + padding-left: 0; +} // Description Lists dl { From e4866c4b3c50c1d1bef5c639c13a2210416b0157 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 4 Nov 2012 12:27:18 -0800 Subject: [PATCH 2/3] clarify unstyled lists docs --- docs/base-css.html | 2 +- docs/templates/pages/base-css.mustache | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/base-css.html b/docs/base-css.html index 443400463d..b8d3930eb9 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -350,7 +350,7 @@

Unstyled

-

A list of items with no list-style or additional left padding.

+

Remove default the list-style and left padding on list items (immediate children only).

  • Lorem ipsum dolor sit amet
    • diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index 52ab7c50b8..3439ce1c31 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -287,7 +287,7 @@

    {{_i}}Unstyled{{/i}}

    -

    {{_i}}A list of items with no list-style or additional left padding.{{/i}}

    +

    {{_i}}Remove default the list-style and left padding on list items (immediate children only).{{/i}}

    • Lorem ipsum dolor sit amet
      • From 28da31218fc5dc39ece625705c37b8c86d494801 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 4 Nov 2012 12:36:37 -0800 Subject: [PATCH 3/3] Refine new inline list option --- docs/assets/css/bootstrap.css | 27 ++++---------------------- docs/base-css.html | 12 ++++++------ docs/templates/pages/base-css.mustache | 12 ++++++------ less/type.less | 22 ++++++++++----------- 4 files changed, 26 insertions(+), 47 deletions(-) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 35cfe82407..b2675f6403 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -816,33 +816,14 @@ ol.unstyled { ul.inline, ol.inline { - *zoom: 1; -} - -ul.inline:before, -ol.inline:before, -ul.inline:after, -ol.inline:after { - display: table; - line-height: 0; - content: ""; -} - -ul.inline:after, -ol.inline:after { - clear: both; + list-style: none; } ul.inline > li, ol.inline > li { - float: left; - margin-right: 14px; - margin-left: 12px; -} - -ul.unstyled.inline > li, -ol.unstyled.inline > li { - padding-left: 0; + display: inline-block; + padding-right: 5px; + padding-left: 5px; } dl { diff --git a/docs/base-css.html b/docs/base-css.html index 8cc571210c..dd34401d54 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -377,16 +377,16 @@

      Inline

      -

      A list of floated left items. Can be combined with with .unstyled

      +

      Place all list items on a single line with inline-block and some light padding.

      -
        -
      •    Stop signal
        • -
      •    Prepare for signal
        • -
      •    Go!
        • +
          +
        • Lorem ipsum
          • +
        • Phasellus iaculis
          • +
        • Nulla volutpat
      -<ul class="unstyled inline">
+<ul class="inline">
   <li>...</li>
 </ul>
      diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index 38201f6834..6fc646e8c8 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -314,16 +314,16 @@

      {{_i}}Inline{{/i}}

      -

      {{_i}}A list of floated left items. Can be combined with with .unstyled{{/i}}

      +

      {{_i}}Place all list items on a single line with inline-block and some light padding.{{/i}}

      -
        -
      •    Stop signal
        • -
      •    Prepare for signal
        • -
      •    Go!
        • +
          +
        • Lorem ipsum
          • +
        • Phasellus iaculis
          • +
        • Nulla volutpat
      -<ul class="unstyled inline">
+<ul class="inline">
   <li>...</li>
 </ul>
      diff --git a/less/type.less b/less/type.less index d23ecc917f..0d5b9c37ee 100644 --- a/less/type.less +++ b/less/type.less @@ -106,25 +106,23 @@ ol ul { li { line-height: @baseLineHeight; } + +// Remove default list styles ul.unstyled, ol.unstyled { margin-left: 0; list-style: none; } + +// Single-line list items ul.inline, ol.inline { - .clearfix(); -} -ul.inline > li, -ol.inline > li { - float: left; - margin-right: 14px; - margin-left: 12px; -} -// Reset left padding for unstyled -ul.unstyled.inline > li, -ol.unstyled.inline > li { - padding-left: 0; + list-style: none; + & > li { + display: inline-block; + padding-left: 5px; + padding-right: 5px; + } } // Description Lists