kotovalexarian-likes-github/twbs--bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2022-11-09 12:25:43 -05:00
Code Releases Activity

move things around :)

Browse source 
Moved pager, pagination, popovers, tooltip, progress bars & type
properties to variables.less
This commit is contained in:
syed 2013-07-26 17:04:15 +05:00
parent 2a51ebf671
commit 1b8ba0d159
9 changed files with 1379 additions and 1259 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
_includes/nav-customize.html
View file

@ -27,9 +27,11 @@
<li><a href="#variables-thumbnails">Thumbnails</a></li> <li><a href="#variables-thumbnails">Thumbnails</a></li>
<li><a href="#variables-progress">Progress bars</a></li> <li><a href="#variables-progress">Progress bars</a></li>
<li><a href="#variables-pagination">Pagination</a></li> <li><a href="#variables-pagination">Pagination</a></li>
<li><a href="#variables-pager">Pager</a></li>
<li><a href="#variables-labels">Labels</a></li> <li><a href="#variables-labels">Labels</a></li>
<li><a href="#variables-tooltips-popovers">Tooltips and popovers</a></li> <li><a href="#variables-tooltips-popovers">Tooltips and popovers</a></li>
<li><a href="#variables-close">Close button</a></li> <li><a href="#variables-close">Close button</a></li>
<li><a href="#variables-type">Type</a></li>
<li><a href="#variables-other">Other</a></li> <li><a href="#variables-other">Other</a></li>
</ul> </ul>
</li> </li>

93
customize.html
View file

@ -1210,6 +1210,16 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
<input type="text" placeholder="@brand-info"> <input type="text" placeholder="@brand-info">
<p class="help-block">Info progress bar color</p> <p class="help-block">Info progress bar color</p>
</div> </div>
<div class="col-lg-4">
<label>@progress-bar-color</label>
<input type="text" placeholder="#fff">
<p class="help-block">Info progress bar text color</p>
</div>
<div class="col-lg-4">
<label>@progress-bar-text-shadow</label>
<input type="text" placeholder="0 -1px 0 rgba(0,0,0,.25)">
<p class="help-block">Info progress bar text shadow</p>
</div>
</div> </div>
<h2 id="variables-pagination">Pagination</h2> <h2 id="variables-pagination">Pagination</h2>
<div class="row"> <div class="row">
@ -1228,6 +1238,29 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
<input type="text" placeholder="#f5f5f5"> <input type="text" placeholder="#f5f5f5">
<p class="help-block">Active background color</p> <p class="help-block">Active background color</p>
</div> </div>
<div class="col-lg-4">
<label>@pagination-active-color</label>
<input type="text" placeholder="@gray-light">
<p class="help-block">Active text color</p>
</div>
<div class="col-lg-4">
<label>@pagination-disabled-color</label>
<input type="text" placeholder="@gray-light">
<p class="help-block">Disabled text color</p>
</div>
</div>
<h2 id="variables-pager">Pager</h2>
<div class="row">
<div class="col-lg-4">
<label>@pager-border-radius</label>
<input type="text" placeholder="15px">
<p class="help-block">Pager border radius</p>
</div>
<div class="col-lg-4">
<label>@pager-disabled-color</label>
<input type="text" placeholder="@gray-light">
<p class="help-block">Pager disabled state color</p>
</div>
</div> </div>
<h2 id="variables-labels">Labels</h2> <h2 id="variables-labels">Labels</h2>
@ -1268,6 +1301,11 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
<input type="text" placeholder="@tooltip-bg"> <input type="text" placeholder="@tooltip-bg">
<p class="help-block">Tooltip arrow color</p> <p class="help-block">Tooltip arrow color</p>
</div> </div>
<div class="col-lg-6">
<label>@tooltip-max-width</label>
<input type="text" placeholder="200px">
<p class="help-block">Tooltip max width</p>
</div>
</div> </div>
<h3>Popover styles</h3> <h3>Popover styles</h3>
<div class="row"> <div class="row">
@ -1299,6 +1337,28 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
<input type="text" placeholder="rgba(0,0,0,.25)"> <input type="text" placeholder="rgba(0,0,0,.25)">
<p class="help-block">Popover outer arrow color</p> <p class="help-block">Popover outer arrow color</p>
</div> </div>
<div class="col-lg-6">
<label>@popover-arrow-outer-fallback-color</label>
<input type="text" placeholder="#999">
<p class="help-block">Popover outer arrow fallback color</p>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<label>@popover-max-width</label>
<input type="text" placeholder="276px">
<p class="help-block">Popover maximum width</p>
</div>
<div class="col-lg-6">
<label>@popover-border-color</label>
<input type="text" placeholder="rgba(0,0,0,.2)">
<p class="help-block">Popover border color</p>
</div>
<div class="col-lg-6">
<label>@popover-fallback-border-color</label>
<input type="text" placeholder="#ccc">
<p class="help-block">Popover fallback border color</p>
</div>
</div> </div>
<h2 id="variables-close">Close button</h2> <h2 id="variables-close">Close button</h2>
@ -1307,6 +1367,39 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
<label>@close-text-shadow</label> <label>@close-text-shadow</label>
<input type="text" placeholder="0 1px 0 #fff"> <input type="text" placeholder="0 1px 0 #fff">
<h2 id="variables-type">Type</h2>
<div class="row">
<div class="col-lg-6">
<label>@text-muted</label>
<input type="text" placeholder="@gray-light">
<p class="help-block">Text muted color</p>
</div>
<div class="col-lg-6">
<label>@abbr-border-color</label>
<input type="text" placeholder="@gray-light">
<p class="help-block">Abbreviations and acronyms border color</p>
</div>
<div class="col-lg-6">
<label>@headings-small-color</label>
<input type="text" placeholder="@gray-light">
<p class="help-block">Headings small color</p>
</div>
<div class="col-lg-6">
<label>@blockquote-small-color</label>
<input type="text" placeholder="@gray-light">
<p class="help-block">Blockquote small color</p>
</div>
<div class="col-lg-6">
<label>@blockquote-border-color</label>
<input type="text" placeholder="@gray-lighter">
<p class="help-block">Blockquote border color</p>
</div>
<div class="col-lg-6">
<label>@page-header-border-color</label>
<input type="text" placeholder="@gray-lighter">
<p class="help-block">Pag header border color</p>
</div>
</div>
<h2 id="variables-other">Other</h2> <h2 id="variables-other">Other</h2>
<div class="row"> <div class="row">
<div class="col-lg-6"> <div class="col-lg-6">

4
less/pager.less
View file

@ -17,7 +17,7 @@
padding: 5px 14px; padding: 5px 14px;
background-color: @pagination-bg; background-color: @pagination-bg;
border: 1px solid @pagination-border; border: 1px solid @pagination-border;
border-radius: 15px; border-radius: @pager-border-radius;
} }
> a:hover, > a:hover,
@ -46,7 +46,7 @@
> a:hover, > a:hover,
> a:focus, > a:focus,
> span { > span {
color: @gray-light; color: @pager-disabled-color;
background-color: @pagination-bg; background-color: @pagination-bg;
cursor: not-allowed; cursor: not-allowed;
} }

4
less/pagination.less
View file

@ -42,7 +42,7 @@
} }
> .active > a, > .active > a,
> .active > span { > .active > span {
color: @gray-light; color: @pagination-active-color;
cursor: default; cursor: default;
} }
@ -51,7 +51,7 @@
> a, > a,
> a:hover, > a:hover,
> a:focus { > a:focus {
color: @gray-light; color: @pagination-disabled-color;
background-color: @pagination-bg; background-color: @pagination-bg;
cursor: not-allowed; cursor: not-allowed;
} }

16
less/popovers.less
View file

@ -9,16 +9,16 @@
left: 0; left: 0;
z-index: @zindex-popover; z-index: @zindex-popover;
display: none; display: none;
max-width: 276px; max-width: @popover-max-width;
padding: 1px; padding: 1px;
text-align: left; // Reset given new insertion method text-align: left; // Reset given new insertion method
background-color: @popover-bg; background-color: @popover-bg;
-webkit-bg-clip: padding-box; -webkit-bg-clip: padding-box;
-moz-bg-clip: padding; -moz-bg-clip: padding;
background-clip: padding-box; background-clip: padding-box;
border: 1px solid #ccc; border: 1px solid @popover-fallback-border-color;
border: 1px solid rgba(0,0,0,.2); border: 1px solid @popover-border-color;
border-radius: 6px; border-radius: @border-radius-large;
.box-shadow(0 5px 10px rgba(0,0,0,.2)); .box-shadow(0 5px 10px rgba(0,0,0,.2));
// Overrides for proper insertion // Overrides for proper insertion
@ -74,7 +74,7 @@
left: 50%; left: 50%;
margin-left: -@popover-arrow-outer-width; margin-left: -@popover-arrow-outer-width;
border-bottom-width: 0; border-bottom-width: 0;
border-top-color: #999; // IE8 fallback border-top-color: @popover-arrow-outer-fallback-color; // IE8 fallback
border-top-color: @popover-arrow-outer-color; border-top-color: @popover-arrow-outer-color;
bottom: -@popover-arrow-outer-width; bottom: -@popover-arrow-outer-width;
&:after { &:after {
@ -90,7 +90,7 @@
left: -@popover-arrow-outer-width; left: -@popover-arrow-outer-width;
margin-top: -@popover-arrow-outer-width; margin-top: -@popover-arrow-outer-width;
border-left-width: 0; border-left-width: 0;
border-right-color: #999; // IE8 fallback border-right-color: @popover-arrow-outer-fallback-color; // IE8 fallback
border-right-color: @popover-arrow-outer-color; border-right-color: @popover-arrow-outer-color;
&:after { &:after {
content: " "; content: " ";
@ -104,7 +104,7 @@
left: 50%; left: 50%;
margin-left: -@popover-arrow-outer-width; margin-left: -@popover-arrow-outer-width;
border-top-width: 0; border-top-width: 0;
border-bottom-color: #999; // IE8 fallback border-bottom-color: @popover-arrow-outer-fallback-color; // IE8 fallback
border-bottom-color: @popover-arrow-outer-color; border-bottom-color: @popover-arrow-outer-color;
top: -@popover-arrow-outer-width; top: -@popover-arrow-outer-width;
&:after { &:after {
@ -121,7 +121,7 @@
right: -@popover-arrow-outer-width; right: -@popover-arrow-outer-width;
margin-top: -@popover-arrow-outer-width; margin-top: -@popover-arrow-outer-width;
border-right-width: 0; border-right-width: 0;
border-left-color: #999; // IE8 fallback border-left-color: @popover-arrow-outer-fallback-color; // IE8 fallback
border-left-color: @popover-arrow-outer-color; border-left-color: @popover-arrow-outer-color;
&:after { &:after {
content: " "; content: " ";

4
less/progress-bars.less
View file

@ -57,9 +57,9 @@
width: 0%; width: 0%;
height: 100%; height: 100%;
font-size: @font-size-small; font-size: @font-size-small;
color: #fff; color: @progress-bar-color;
text-align: center; text-align: center;
text-shadow: 0 -1px 0 rgba(0,0,0,.25); text-shadow: @progress-bar-text-shadow;
background-color: @progress-bar-bg; background-color: @progress-bar-bg;
.box-shadow(inset 0 -1px 0 rgba(0,0,0,.15)); .box-shadow(inset 0 -1px 0 rgba(0,0,0,.15));
.transition(width .6s ease); .transition(width .6s ease);

2
less/tooltip.less
View file

@ -22,7 +22,7 @@
// Wrapper for the tooltip content // Wrapper for the tooltip content
.tooltip-inner { .tooltip-inner {
max-width: 200px; max-width: @tooltip-max-width;
padding: 3px 8px; padding: 3px 8px;
color: @tooltip-color; color: @tooltip-color;
text-align: center; text-align: center;

14
less/type.less
View file

@ -27,7 +27,7 @@ small { font-size: 85%; }
cite { font-style: normal; } cite { font-style: normal; }
// Contextual emphasis // Contextual emphasis
.text-muted { color: @gray-light; } .text-muted { color: @text-muted; }
.text-primary { color: @brand-primary; } .text-primary { color: @brand-primary; }
.text-warning { color: @state-warning-text; } .text-warning { color: @state-warning-text; }
.text-danger { color: @state-danger-text; } .text-danger { color: @state-danger-text; }
@ -51,7 +51,7 @@ h1, h2, h3, h4, h5, h6,
small { small {
font-weight: normal; font-weight: normal;
line-height: 1; line-height: 1;
color: @gray-light; color: @headings-small-color;
} }
} }
@ -87,7 +87,7 @@ h4 small, .h4 small { font-size: @font-size-base; }
.page-header { .page-header {
padding-bottom: ((@line-height-computed / 2) - 1); padding-bottom: ((@line-height-computed / 2) - 1);
margin: (@line-height-computed * 2) 0 @line-height-computed; margin: (@line-height-computed * 2) 0 @line-height-computed;
border-bottom: 1px solid @gray-lighter; border-bottom: 1px solid @page-header-border-color;
} }
@ -160,7 +160,7 @@ abbr[title],
// Added data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257 // Added data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257
abbr[data-original-title] { abbr[data-original-title] {
cursor: help; cursor: help;
border-bottom: 1px dotted @gray-light; border-bottom: 1px dotted @abbr-border-color;
} }
abbr.initialism { abbr.initialism {
font-size: 90%; font-size: 90%;
@ -171,7 +171,7 @@ abbr.initialism {
blockquote { blockquote {
padding: (@line-height-computed / 2) @line-height-computed; padding: (@line-height-computed / 2) @line-height-computed;
margin: 0 0 @line-height-computed; margin: 0 0 @line-height-computed;
border-left: 5px solid @gray-lighter; border-left: 5px solid @blockquote-border-color;
p { p {
font-size: (@font-size-base * 1.25); font-size: (@font-size-base * 1.25);
font-weight: 300; font-weight: 300;
@ -183,7 +183,7 @@ blockquote {
small { small {
display: block; display: block;
line-height: @line-height-base; line-height: @line-height-base;
color: @gray-light; color: @blockquote-small-color;
&:before { &:before {
content: '\2014 \00A0';// EM DASH, NBSP content: '\2014 \00A0';// EM DASH, NBSP
} }
@ -194,7 +194,7 @@ blockquote {
float: right; float: right;
padding-right: 15px; padding-right: 15px;
padding-left: 0; padding-left: 0;
border-right: 5px solid @gray-lighter; border-right: 5px solid @blockquote-border-color;
border-left: 0; border-left: 0;
p, p,
small { small {

25
less/variables.less
View file

@ -272,6 +272,14 @@
@pagination-bg: #fff; @pagination-bg: #fff;
@pagination-border: #ddd; @pagination-border: #ddd;
@pagination-active-bg: #f5f5f5; @pagination-active-bg: #f5f5f5;
@pagination-active-color: @gray-light;
@pagination-disabled-color: @gray-light;
// Pager
// -------------------------
@pager-border-radius: 15px;
@pager-disabled-color: @gray-light;
// Jumbotron // Jumbotron
@ -309,6 +317,8 @@
@tooltip-arrow-width: 5px; @tooltip-arrow-width: 5px;
@tooltip-arrow-color: @tooltip-bg; @tooltip-arrow-color: @tooltip-bg;
@tooltip-max-width: 200px;
@popover-bg: #fff; @popover-bg: #fff;
@popover-arrow-width: 10px; @popover-arrow-width: 10px;
@popover-arrow-color: #fff; @popover-arrow-color: #fff;
@ -317,6 +327,11 @@
// Special enhancement for popovers // Special enhancement for popovers
@popover-arrow-outer-width: (@popover-arrow-width + 1); @popover-arrow-outer-width: (@popover-arrow-width + 1);
@popover-arrow-outer-color: rgba(0,0,0,.25); @popover-arrow-outer-color: rgba(0,0,0,.25);
@popover-arrow-outer-fallback-color: #999;
@popover-max-width: 276px;
@popover-border-color: rgba(0,0,0,.2)
@popover-fallback-border-color: #ccc;
// Labels // Labels
@ -374,6 +389,8 @@
@progress-bar-warning-bg: @brand-warning; @progress-bar-warning-bg: @brand-warning;
@progress-bar-danger-bg: @brand-danger; @progress-bar-danger-bg: @brand-danger;
@progress-bar-info-bg: @brand-info; @progress-bar-info-bg: @brand-info;
@progress-bar-color: #fff;
@progress-bar-text-shadow: 0 -1px 0 rgba(0,0,0,.25);
// List group // List group
@ -481,6 +498,14 @@
@pre-bg: #f5f5f5; @pre-bg: #f5f5f5;
@pre-border-color: #ccc; @pre-border-color: #ccc;
// Type
// ------------------------
@text-muted: @gray-light;
@abbr-border-color: @gray-light;
@headings-small-color: @gray-light;
@blockquote-small-color: @gray-light;
@blockquote-border-color: @gray-lighter;
@page-header-border-color: @gray-lighter;
// Miscellaneous // Miscellaneous
// ------------------------- // -------------------------