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-progress">Progress bars</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-tooltips-popovers">Tooltips and popovers</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>
</ul>
</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">
<p class="help-block">Info progress bar color</p>
</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>
<h2 id="variables-pagination">Pagination</h2>
<div class="row">
@ -1228,6 +1238,29 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
<input type="text" placeholder="#f5f5f5">
<p class="help-block">Active background color</p>
</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>
<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">
<p class="help-block">Tooltip arrow color</p>
</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>
<h3>Popover styles</h3>
<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)">
<p class="help-block">Popover outer arrow color</p>
</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>
<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>
<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>
<div class="row">
<div class="col-lg-6">

4
less/pager.less
View file

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

4
less/pagination.less
View file

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

16
less/popovers.less
View file

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

4
less/progress-bars.less
View file

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

2
less/tooltip.less
View file

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

14
less/type.less
View file

@ -27,7 +27,7 @@ small { font-size: 85%; }
cite { font-style: normal; }
// Contextual emphasis
.text-muted { color: @gray-light; }
.text-muted { color: @text-muted; }
.text-primary { color: @brand-primary; }
.text-warning { color: @state-warning-text; }
.text-danger { color: @state-danger-text; }
@ -51,7 +51,7 @@ h1, h2, h3, h4, h5, h6,
small {
font-weight: normal;
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 {
padding-bottom: ((@line-height-computed / 2) - 1);
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
abbr[data-original-title] {
cursor: help;
border-bottom: 1px dotted @gray-light;
border-bottom: 1px dotted @abbr-border-color;
}
abbr.initialism {
font-size: 90%;
@ -171,7 +171,7 @@ abbr.initialism {
blockquote {
padding: (@line-height-computed / 2) @line-height-computed;
margin: 0 0 @line-height-computed;
border-left: 5px solid @gray-lighter;
border-left: 5px solid @blockquote-border-color;
p {
font-size: (@font-size-base * 1.25);
font-weight: 300;
@ -183,7 +183,7 @@ blockquote {
small {
display: block;
line-height: @line-height-base;
color: @gray-light;
color: @blockquote-small-color;
&:before {
content: '\2014 \00A0';// EM DASH, NBSP
}
@ -194,7 +194,7 @@ blockquote {
float: right;
padding-right: 15px;
padding-left: 0;
border-right: 5px solid @gray-lighter;
border-right: 5px solid @blockquote-border-color;
border-left: 0;
p,
small {

25
less/variables.less
View file

@ -272,6 +272,14 @@
@pagination-bg: #fff;
@pagination-border: #ddd;
@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
@ -309,6 +317,8 @@
@tooltip-arrow-width: 5px;
@tooltip-arrow-color: @tooltip-bg;
@tooltip-max-width: 200px;
@popover-bg: #fff;
@popover-arrow-width: 10px;
@popover-arrow-color: #fff;
@ -317,6 +327,11 @@
// Special enhancement for popovers
@popover-arrow-outer-width: (@popover-arrow-width + 1);
@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
@ -374,6 +389,8 @@
@progress-bar-warning-bg: @brand-warning;
@progress-bar-danger-bg: @brand-danger;
@progress-bar-info-bg: @brand-info;
@progress-bar-color: #fff;
@progress-bar-text-shadow: 0 -1px 0 rgba(0,0,0,.25);
// List group
@ -481,6 +498,14 @@
@pre-bg: #f5f5f5;
@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
// -------------------------