Skip to content

B
bootstrap
Commit a0179322 authored by Mark Otto's avatar Mark Otto
Browse files
Options

start breaking down patterns.less into more distinct files, update docs for... 

start breaking down patterns.less into more distinct files, update docs for forms to use correct classes
parent cabf993b
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1035 additions and 831 deletions
bootstrap.css
View file @ a0179322
This diff is collapsed.
bootstrap.min.css
View file @ a0179322
This diff is collapsed.
docs/base-css.html
View file @ a0179322
......@@ -696,22 +696,22 @@
<tbody>
<tr>
<th>Vertical (default)</th>
<td><code>.vertical-form</code> <span class="muted">(not required)</span></td>
<td><code>.form-vertical</code> <span class="muted">(not required)</span></td>
<td>Stacked, left-aligned labels over controls</td>
</tr>
<tr>
<th>Horiztonal</th>
<td><code>.horizontal-form</code></td>
<td><code>.form-horizontal</code></td>
<td>Float left, right-aligned labels on same line as controls</td>
</tr>
<tr>
<th>Inline</th>
<td><code>.inline-form</code></td>
<td><code>.form-inline</code></td>
<td>Left-aligned label and inline-block controls for compact style</td>
</tr>
<tr>
<th>Search</th>
<td><code>.search-form</code></td>
<td><code>.form-search</code></td>
<td>Extra-rounded text input for a typical search aesthetic</td>
</tr>
</tbody>
......
docs/less.html
View file @ a0179322
......@@ -95,15 +95,208 @@
<!-- VARIABLES
================================================== -->
<div class="page-header" id="variables">
<h1>Variables</h1>
<h1>Variables <small>from variables.less</small></h1>
</div>
<div class="row">
<div class="span3">
<h3>Hyperlinks</h3>
</div>
<div class="span9">
<table class="bordered-table striped-table">
<thead>
<tr>
<th>Variable</th>
<th>Value</th>
<th>Usage</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>@linkColor</code></td>
<td>#0069d6</td>
<td>Default link text color</td>
</tr>
<tr>
<td><code>@linkColorHover</code></td>
<td><code>darken(@linkColor, 15)</code></td>
<td>Default link text hover color</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="span3">
<h3>Grayscale colors</h3>
</div>
<div class="span9">
<table class="bordered-table striped-table">
<tbody>
<tr>
<td><code>@black</code></td>
<td>#000</td>
<td>Black</td>
</tr>
<tr>
<td><code>@grayDark</code></td>
<td><code>lighten(@black, 25%)</code></td>
<td>Dark gray</td>
</tr>
<tr>
<td><code>@gray</code></td>
<td><code>lighten(@black, 50%)</code></td>
<td>Medium gray</td>
</tr>
<tr>
<td><code>@grayLight</code></td>
<td><code>lighten(@black, 75%)</code></td>
<td>Light gray</td>
</tr>
<tr>
<td><code>@grayLighter</code></td>
<td><code>lighten(@black, 90%)</code></td>
<td>Lighter gray</td>
</tr>
<tr>
<td><code>@white</code></td>
<td>#fff</td>
<td>White</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="span3">
<h3>Accent colors</h3>
</div>
<div class="span9">
<table class="bordered-table striped-table">
<tbody>
<tr>
<td><code>@blue</code></td>
<td>#049CDB</td>
<td></td>
</tr>
<tr>
<td><code>@green</code></td>
<td>#46a546</td>
<td></td>
</tr>
<tr>
<td><code>@red</code></td>
<td>#9d261d</td>
<td></td>
</tr>
<tr>
<td><code>@yellow</code></td>
<td>#ffc40d</td>
<td></td>
</tr>
<tr>
<td><code>@orange</code></td>
<td>#f89406</td>
<td></td>
</tr>
<tr>
<td><code>@pink</code></td>
<td>#c3325f</td>
<td></td>
</tr>
<tr>
<td><code>@purple</code></td>
<td>#7a43b6</td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="span3">
<h3>Grid system</h3>
</div>
<div class="span9">
<table class="bordered-table striped-table">
<tbody>
<tr>
<td><code>@gridColumns</code></td>
<td>12</td>
<td></td>
</tr>
<tr>
<td><code>@gridColumnWidth</code></td>
<td>60px</td>
<td></td>
</tr>
<tr>
<td><code>@gridGutterWidth</code></td>
<td>20px</td>
<td></td>
</tr>
<tr>
<td><code>@siteWidth</code></td>
<td><code>(@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1))</code></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="span3">
<h3>Typography</h3>
</div>
<div class="span9">
<table class="bordered-table striped-table">
<tbody>
<tr>
<td><code>@baseFontSize</code></td>
<td>13px</td>
<td></td>
</tr>
<tr>
<td><code>@baseFontFamily</code></td>
<td><code>"Helvetica Neue", Helvetica, Arial, sans-serif</code></td>
<td></td>
</tr>
<tr>
<td><code>@baseLineHeight</code></td>
<td>18px</td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="span3">
<h3>Visuals</h3>
</div>
<div class="span9">
<table class="bordered-table striped-table">
<tbody>
<tr>
<td><code>@primaryButtonColor</code></td>
<td><code>@blue</code></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- MIXINS
================================================== -->
<div class="page-header" id="mixins">
<h1>Mixins</h1>
<h1>Mixins <small>from mixins.less</small></h1>
</div>
......
lib/bootstrap.less
View file @ a0179322
......@@ -23,7 +23,17 @@
@import "type.less";
@import "forms.less";
@import "tables.less";
// Temp catchall for what's missing thus far
@import "patterns.less";
@import "tabs-pills.less";
@import "breadcrumbs.less";
@import "pagination.less";
@import "modals.less";
@import "twipsy.less";
@import "popovers.less";
@import "media-grids.less";
// Responsive
@import "responsive.less";
\ No newline at end of file
lib/breadcrumbs.less 0 → 100644
View file @ a0179322
// BREADCRUMBS
// -----------
.breadcrumb {
margin: 0 0 @baseLineHeight;
padding: 7px 14px;
#gradient > .vertical(#ffffff, #f5f5f5);
border: 1px solid #ddd;
.border-radius(3px);
.box-shadow(inset 0 1px 0 @white);
li {
display: inline;
text-shadow: 0 1px 0 @white;
}
.divider {
padding: 0 5px;
color: @grayLight;
}
.active a {
color: @grayDark;
}
}
lib/media-grids.less 0 → 100644
View file @ a0179322
// MEDIA GRIDS
// -----------
.media-grid {
margin-left: -20px;
margin-bottom: 0;
.clearfix();
li {
display: inline;
}
a {
float: left;
padding: 4px;
margin: 0 0 20px 20px;
border: 1px solid #ddd;
.border-radius(4px);
.box-shadow(0 1px 1px rgba(0,0,0,.075));
img {
display: block;
}
&:hover {
border-color: @linkColor;
.box-shadow(0 1px 4px rgba(0,105,214,.25));
}
}
}
lib/mixins.less
View file @ a0179322
......@@ -272,4 +272,41 @@
-khtml-opacity: @opacity / 100;
-moz-opacity: @opacity / 100;
opacity: @opacity / 100;
}
\ No newline at end of file
}
// Popover arrows
// For tipsies and popovers
#popoverArrow {
.above(@arrowWidth: 5px) {
bottom: 0;
left: 50%;
margin-left: -@arrowWidth;
border-left: @arrowWidth solid transparent;
border-right: @arrowWidth solid transparent;
border-top: @arrowWidth solid @black;
}
.left(@arrowWidth: 5px) {
top: 50%;
right: 0;
margin-top: -@arrowWidth;
border-top: @arrowWidth solid transparent;
border-bottom: @arrowWidth solid transparent;
border-left: @arrowWidth solid @black;
}
.below(@arrowWidth: 5px) {
top: 0;
left: 50%;
margin-left: -@arrowWidth;
border-left: @arrowWidth solid transparent;
border-right: @arrowWidth solid transparent;
border-bottom: @arrowWidth solid @black;
}
.right(@arrowWidth: 5px) {
top: 50%;
left: 0;
margin-top: -@arrowWidth;
border-top: @arrowWidth solid transparent;
border-bottom: @arrowWidth solid transparent;
border-right: @arrowWidth solid @black;
}
}
lib/modals.less 0 → 100644
View file @ a0179322
// MODALS
// ------
.modal-backdrop {
background-color: @black;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10000;
// Fade for backdrop
&.fade { opacity: 0; }
}
.modal-backdrop, .modal-backdrop.fade.in {
.opacity(80);
}
.modal {
position: fixed;
top: 50%;
left: 50%;
z-index: 11000;
width: 560px;
margin: -250px 0 0 -250px;
background-color: @white;
border: 1px solid #999;
border: 1px solid rgba(0,0,0,.3);
*border: 1px solid #999; /* IE6-7 */
.border-radius(6px);
.box-shadow(0 3px 7px rgba(0,0,0,0.3));
.background-clip(padding-box);
.close { margin-top: 7px; }
&.fade {
.transition(e('opacity .3s linear, top .3s ease-out'));
top: -25%;
}
&.fade.in { top: 50%; }
}
.modal-header {
border-bottom: 1px solid #eee;
padding: 5px 15px;
}
.modal-body {
padding: 15px;
}
.modal-footer {
background-color: #f5f5f5;
padding: 14px 15px 15px;
border-top: 1px solid #ddd;
.border-radius(0 0 6px 6px);
.box-shadow(inset 0 1px 0 @white);
.clearfix();
margin-bottom: 0;
.btn {
float: right;
margin-left: 5px;
}
}
lib/pagination.less 0 → 100644
View file @ a0179322
// PAGINATION
// ----------
.pagination {
height: @baseLineHeight * 2;
margin: @baseLineHeight 0;
ul {
float: left;
margin: 0;
border: 1px solid #ddd;
border: 1px solid rgba(0,0,0,.15);
.border-radius(3px);
.box-shadow(0 1px 2px rgba(0,0,0,.05));
}
li {
display: inline;
}
a {
float: left;
padding: 0 14px;
line-height: (@baseLineHeight * 2) - 2;
border-right: 1px solid;
border-right-color: #ddd;
border-right-color: rgba(0,0,0,.15);
*border-right-color: #ddd; /* IE6-7 */
text-decoration: none;
}
a:hover,
.active a {
background-color: lighten(@blue, 45%);
}
.disabled a,
.disabled a:hover {
background-color: transparent;
color: @grayLight;
}
.next a {
border: 0;
}
}
lib/patterns.less
View file @ a0179322
......@@ -301,251 +301,8 @@
}
// Tabs and Pills
.tabs,
.pills {
margin: 0 0 20px;
padding: 0;
list-style: none;
.clearfix();
> li {
float: left;
> a {
display: block;
}
}
}
// Tabs
.tabs {
border-color: #ddd;
border-style: solid;
border-width: 0 0 1px;
> li {
position: relative; // For the dropdowns mostly
margin-bottom: -1px;
> a {
padding: 0 15px;
margin-right: 2px;
line-height: @baseLineHeight * 2;
border: 1px solid transparent;
.border-radius(4px 4px 0 0);
&:hover {
text-decoration: none;
background-color: #eee;
border-color: #eee #eee #ddd;
}
}
}
// Active state, and it's :hover to override normal :hover
.active > a,
.active > a:hover {
color: @gray;
background-color: @white;
border: 1px solid #ddd;
border-bottom-color: transparent;
cursor: default;
}
}
.tabbable {
margin-bottom: @baseLineHeight;
// Tabs on top
.tabs {
margin-bottom: 0;
border-bottom: 0;
}
.tab-content {
padding: 19px;
border: 1px solid #ddd;
}
// Tabs on bottom
&.tabs-bottom .tabs > li {
margin-top: -1px;
margin-bottom: 0;
}
&.tabs-bottom .tabs > li > a {
.border-radius(0 0 4px 4px);
&:hover {
border-bottom-color: transparent;
border-top-color: #ddd;
}
}
&.tabs-bottom .tabs > .active > a,
&.tabs-bottom .tabs > .active > a:hover {
border-color: transparent #ddd #ddd #ddd;
}
// Tabs on left and right
&.tabs-left,
&.tabs-right {
.clearfix();
.tabs {
// Give a fixed width to avoid floating .tab-con
width: 100px;
// Unfloat them so they stack
> li {
float: none;
margin-bottom: -1px;
> a {
margin-bottom: 2px;
&:hover {
border-color: transparent;
}
}
}
}
}
// Tabs on left
&.tabs-left {
.tab-content {
margin-left: 100px;
}
.tabs {
float: left;
> li {
margin-right: -1px;
> a {
margin-right: 0;
.border-radius(4px 0 0 4px);
&:hover {
border-right-color: #ddd;
}
}
}
// Active state
.active > a,
.active > a:hover {
border-color: #ddd;
border-right-color: transparent;
}
}
}
// Tabs on right
&.tabs-right {
.tab-content {
margin-right: 100px;
}
.tabs {
float: right;
> li {
margin-left: -1px;
> a {
margin-left: 0;
.border-radius(0 4px 4px 0);
&:hover {
border-left-color: #ddd;
}
}
}
// Active state
.active > a,
.active > a:hover {
border-color: #ddd;
border-left-color: transparent;
}
}
}
}
// Dropdowns in tabs
.tabs {
// first one for backwards compatibility
.menu-dropdown,
.dropdown-menu {
top: 35px;
border-width: 1px;
.border-radius(0 6px 6px 6px);
}
// first one for backwards compatibility
a.menu:after,
.dropdown-toggle:after {
border-top-color: #999;
margin-top: 15px;
margin-left: 5px;
}
// first one for backwards compatibility
li.open.menu .menu,
.open.dropdown .dropdown-toggle {
border-color: #999;
}
// first one for backwards compatibility
li.open a.menu:after,
.dropdown.open .dropdown-toggle:after {
border-top-color: #555;
}
}
// Pills
.pills {
a {
margin: 5px 3px 5px 0;
padding: 0 15px;
line-height: 30px;
text-shadow: 0 1px 1px @white;
.border-radius(15px);
&:hover {
color: @white;
text-decoration: none;
text-shadow: 0 1px 1px rgba(0,0,0,.25);
background-color: @linkColorHover;
}
}
.active a {
color: @white;
text-shadow: 0 1px 1px rgba(0,0,0,.25);
background-color: @linkColor;
}
}
// Stacked pills
.pills-vertical > li {
float: none;
}
// Tabbable areas
.tab-content,
.pill-content {
}
.tab-content > .tab-pane,
.pill-content > .pill-pane {
display: none;
}
.tab-content > .active,
.pill-content > .active {
display: block;
}
// BREADCRUMBS
// -----------
.breadcrumb {
margin: 0 0 @baseLineHeight;
padding: 7px 14px;
#gradient > .vertical(#ffffff, #f5f5f5);
border: 1px solid #ddd;
.border-radius(3px);
.box-shadow(inset 0 1px 0 @white);
li {
display: inline;
text-shadow: 0 1px 0 @white;
}
.divider {
padding: 0 5px;
color: @grayLight;
}
.active a {
color: @grayDark;
}
}
// PAGE HEADERS
......@@ -852,46 +609,6 @@ input[type=submit].btn {
}
// PAGINATION
// ----------
.pagination {
height: @baseLineHeight * 2;
margin: @baseLineHeight 0;
ul {
float: left;
margin: 0;
border: 1px solid #ddd;
border: 1px solid rgba(0,0,0,.15);
.border-radius(3px);
.box-shadow(0 1px 2px rgba(0,0,0,.05));
}
li {
display: inline;
}
a {
float: left;
padding: 0 14px;
line-height: (@baseLineHeight * 2) - 2;
border-right: 1px solid;
border-right-color: #ddd;
border-right-color: rgba(0,0,0,.15);
*border-right-color: #ddd; /* IE6-7 */
text-decoration: none;
}
a:hover,
.active a {
background-color: lighten(@blue, 45%);
}
.disabled a,
.disabled a:hover {
background-color: transparent;
color: @grayLight;
}
.next a {
border: 0;
}
}
// WELLS
......@@ -913,186 +630,12 @@ input[type=submit].btn {
}
// MODALS
// ------
.modal-backdrop {
background-color: @black;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10000;
// Fade for backdrop
&.fade { opacity: 0; }
}
.modal-backdrop, .modal-backdrop.fade.in {
.opacity(80);
}
.modal {
position: fixed;
top: 50%;
left: 50%;
z-index: 11000;
width: 560px;
margin: -250px 0 0 -250px;
background-color: @white;
border: 1px solid #999;
border: 1px solid rgba(0,0,0,.3);
*border: 1px solid #999; /* IE6-7 */
.border-radius(6px);
.box-shadow(0 3px 7px rgba(0,0,0,0.3));
.background-clip(padding-box);
.close { margin-top: 7px; }
&.fade {
.transition(e('opacity .3s linear, top .3s ease-out'));
top: -25%;
}
&.fade.in { top: 50%; }
}
.modal-header {
border-bottom: 1px solid #eee;
padding: 5px 15px;
}
.modal-body {
padding: 15px;
}
.modal-footer {
background-color: #f5f5f5;
padding: 14px 15px 15px;
border-top: 1px solid #ddd;
.border-radius(0 0 6px 6px);
.box-shadow(inset 0 1px 0 @white);
.clearfix();
margin-bottom: 0;
.btn {
float: right;
margin-left: 5px;
}
}
// POPOVER ARROWS
// --------------
#popoverArrow {
.above(@arrowWidth: 5px) {
bottom: 0;
left: 50%;
margin-left: -@arrowWidth;
border-left: @arrowWidth solid transparent;
border-right: @arrowWidth solid transparent;
border-top: @arrowWidth solid @black;
}
.left(@arrowWidth: 5px) {
top: 50%;
right: 0;
margin-top: -@arrowWidth;
border-top: @arrowWidth solid transparent;
border-bottom: @arrowWidth solid transparent;
border-left: @arrowWidth solid @black;
}
.below(@arrowWidth: 5px) {
top: 0;
left: 50%;
margin-left: -@arrowWidth;
border-left: @arrowWidth solid transparent;
border-right: @arrowWidth solid transparent;
border-bottom: @arrowWidth solid @black;
}
.right(@arrowWidth: 5px) {
top: 50%;
left: 0;
margin-top: -@arrowWidth;
border-top: @arrowWidth solid transparent;
border-bottom: @arrowWidth solid transparent;
border-right: @arrowWidth solid @black;
}
}
// TWIPSY
// ------
.twipsy {
display: block;
position: absolute;
visibility: visible;
padding: 5px;
font-size: 11px;
z-index: 1000;
.opacity(80);
&.fade.in {
.opacity(80);
}
&.above .twipsy-arrow { #popoverArrow > .above(); }
&.left .twipsy-arrow { #popoverArrow > .left(); }
&.below .twipsy-arrow { #popoverArrow > .below(); }
&.right .twipsy-arrow { #popoverArrow > .right(); }
}
.twipsy-inner {
padding: 3px 8px;
background-color: @black;
color: white;
text-align: center;
max-width: 200px;
text-decoration: none;
.border-radius(4px);
}
.twipsy-arrow {
position: absolute;
width: 0;
height: 0;
}
// POPOVERS
// --------
.popover {
position: absolute;
top: 0;
left: 0;
z-index: 1000;
padding: 5px;
display: none;
&.above .arrow { #popoverArrow > .above(); }
&.right .arrow { #popoverArrow > .right(); }
&.below .arrow { #popoverArrow > .below(); }
&.left .arrow { #popoverArrow > .left(); }
.arrow {
position: absolute;
width: 0;
height: 0;
}
.inner {
background-color: @black;
background-color: rgba(0,0,0,.8);
padding: 3px;
overflow: hidden;
width: 280px;
.border-radius(6px);
.box-shadow(0 3px 7px rgba(0,0,0,0.3));
}
.title {
background-color: #f5f5f5;
padding: 9px 15px;
line-height: 1;
.border-radius(3px 3px 0 0);
border-bottom:1px solid #eee;
}
.content {
background-color: @white;
padding: 14px;
.border-radius(0 0 3px 3px);
.background-clip(padding-box);
p, ul, ol {
margin-bottom: 0;
}
}
}
// PATTERN ANIMATIONS
......@@ -1125,32 +668,6 @@ input[type=submit].btn {
}
// MEDIA GRIDS
// -----------
.media-grid {
margin-left: -20px;
margin-bottom: 0;
.clearfix();
li {
display: inline;
}
a {
float: left;
padding: 4px;
margin: 0 0 20px 20px;
border: 1px solid #ddd;
.border-radius(4px);
.box-shadow(0 1px 1px rgba(0,0,0,.075));
img {
display: block;
}
&:hover {
border-color: @linkColor;
.box-shadow(0 1px 4px rgba(0,105,214,.25));
}
}
}
// MISC
......
lib/popovers.less 0 → 100644
View file @ a0179322
// POPOVERS
// --------
.popover {
position: absolute;
top: 0;
left: 0;
z-index: 1000;
padding: 5px;
display: none;
&.above .arrow { #popoverArrow > .above(); }
&.right .arrow { #popoverArrow > .right(); }
&.below .arrow { #popoverArrow > .below(); }
&.left .arrow { #popoverArrow > .left(); }
.arrow {
position: absolute;
width: 0;
height: 0;
}
.inner {
background-color: @black;
background-color: rgba(0,0,0,.8);
padding: 3px;
overflow: hidden;
width: 280px;
.border-radius(6px);
.box-shadow(0 3px 7px rgba(0,0,0,0.3));
}
.title {
background-color: #f5f5f5;
padding: 9px 15px;
line-height: 1;
.border-radius(3px 3px 0 0);
border-bottom:1px solid #eee;
}
.content {
background-color: @white;
padding: 14px;
.border-radius(0 0 3px 3px);
.background-clip(padding-box);
p, ul, ol {
margin-bottom: 0;
}
}
}
\ No newline at end of file
lib/tabs-pills.less 0 → 100644
View file @ a0179322
// Tabs and Pills
.tabs,
.pills {
margin: 0 0 20px;
padding: 0;
list-style: none;
.clearfix();
> li {
float: left;
> a {
display: block;
}
}
}
// Tabs
.tabs {
border-color: #ddd;
border-style: solid;
border-width: 0 0 1px;
> li {
position: relative; // For the dropdowns mostly
margin-bottom: -1px;
> a {
padding: 0 15px;
margin-right: 2px;
line-height: @baseLineHeight * 2;
border: 1px solid transparent;
.border-radius(4px 4px 0 0);
&:hover {
text-decoration: none;
background-color: #eee;
border-color: #eee #eee #ddd;
}
}
}
// Active state, and it's :hover to override normal :hover
.active > a,
.active > a:hover {
color: @gray;
background-color: @white;
border: 1px solid #ddd;
border-bottom-color: transparent;
cursor: default;
}
}
.tabbable {
margin-bottom: @baseLineHeight;
// Tabs on top
.tabs {
margin-bottom: 0;
border-bottom: 0;
}
.tab-content {
padding: 19px;
border: 1px solid #ddd;
}
// Tabs on bottom
&.tabs-bottom .tabs > li {
margin-top: -1px;
margin-bottom: 0;
}
&.tabs-bottom .tabs > li > a {
.border-radius(0 0 4px 4px);
&:hover {
border-bottom-color: transparent;
border-top-color: #ddd;
}
}
&.tabs-bottom .tabs > .active > a,
&.tabs-bottom .tabs > .active > a:hover {
border-color: transparent #ddd #ddd #ddd;
}
// Tabs on left and right
&.tabs-left,
&.tabs-right {
.clearfix();
.tabs {
// Give a fixed width to avoid floating .tab-con
width: 100px;
// Unfloat them so they stack
> li {
float: none;
margin-bottom: -1px;
> a {
margin-bottom: 2px;
&:hover {
border-color: transparent;
}
}
}
}
}
// Tabs on left
&.tabs-left {
.tab-content {
margin-left: 100px;
}
.tabs {
float: left;
> li {
margin-right: -1px;
> a {
margin-right: 0;
.border-radius(4px 0 0 4px);
&:hover {
border-right-color: #ddd;
}
}
}
// Active state
.active > a,
.active > a:hover {
border-color: #ddd;
border-right-color: transparent;
}
}
}
// Tabs on right
&.tabs-right {
.tab-content {
margin-right: 100px;
}
.tabs {
float: right;
> li {
margin-left: -1px;
> a {
margin-left: 0;
.border-radius(0 4px 4px 0);
&:hover {
border-left-color: #ddd;
}
}
}
// Active state
.active > a,
.active > a:hover {
border-color: #ddd;
border-left-color: transparent;
}
}
}
}
// Dropdowns in tabs
.tabs {
// first one for backwards compatibility
.menu-dropdown,
.dropdown-menu {
top: 35px;
border-width: 1px;
.border-radius(0 6px 6px 6px);
}
// first one for backwards compatibility
a.menu:after,
.dropdown-toggle:after {
border-top-color: #999;
margin-top: 15px;
margin-left: 5px;
}
// first one for backwards compatibility
li.open.menu .menu,
.open.dropdown .dropdown-toggle {
border-color: #999;
}
// first one for backwards compatibility
li.open a.menu:after,
.dropdown.open .dropdown-toggle:after {
border-top-color: #555;
}
}
// Pills
.pills {
a {
margin: 5px 3px 5px 0;
padding: 0 15px;
line-height: 30px;
text-shadow: 0 1px 1px @white;
.border-radius(15px);
&:hover {
color: @white;
text-decoration: none;
text-shadow: 0 1px 1px rgba(0,0,0,.25);
background-color: @linkColorHover;
}
}
.active a {
color: @white;
text-shadow: 0 1px 1px rgba(0,0,0,.25);
background-color: @linkColor;
}
}
// Stacked pills
.pills-vertical > li {
float: none;
}
// Tabbable areas
.tab-content,
.pill-content {
}
.tab-content > .tab-pane,
.pill-content > .pill-pane {
display: none;
}
.tab-content > .active,
.pill-content > .active {
display: block;
}
lib/twipsy.less 0 → 100644
View file @ a0179322
// TWIPSY
// ------
.twipsy {
display: block;
position: absolute;
visibility: visible;
padding: 5px;
font-size: 11px;
z-index: 1000;
.opacity(80);
&.fade.in {
.opacity(80);
}
&.above .twipsy-arrow { #popoverArrow > .above(); }
&.left .twipsy-arrow { #popoverArrow > .left(); }
&.below .twipsy-arrow { #popoverArrow > .below(); }
&.right .twipsy-arrow { #popoverArrow > .right(); }
}
.twipsy-inner {
padding: 3px 8px;
background-color: @black;
color: white;
text-align: center;
max-width: 200px;
text-decoration: none;
.border-radius(4px);
}
.twipsy-arrow {
position: absolute;
width: 0;
height: 0;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment