Changeset 90741 in spip-zone


Ignore:
Timestamp:
Jul 6, 2015, 8:26:59 AM (4 years ago)
Author:
cedric@…
Message:

BS 3.3.5 dans la place, work in progress
le plugin passe en v3 dev
On s'occupera de la couche de compat BSv2 dans un second temps

Location:
_plugins_/bootstrap/trunk
Files:
60 added
25 deleted
31 edited

Legend:

Unmodified
Added
Removed
  • _plugins_/bootstrap/trunk/bootstrap/css/alerts.less

    r69198 r90741  
    88
    99.alert {
    10   padding: 8px 35px 8px 14px;
    11   margin-bottom: @baseLineHeight;
    12   text-shadow: 0 1px 0 rgba(255,255,255,.5);
    13   background-color: @warningBackground;
    14   border: 1px solid @warningBorder;
    15   .border-radius(@baseBorderRadius);
    16 }
    17 .alert,
    18 .alert h4 {
    19   // Specified for the h4 to prevent conflicts of changing @headingsColor
    20   color: @warningText;
    21 }
    22 .alert h4 {
    23   margin: 0;
     10  padding: @alert-padding;
     11  margin-bottom: @line-height-computed;
     12  border: 1px solid transparent;
     13  border-radius: @alert-border-radius;
     14
     15  // Headings for larger alerts
     16  h4 {
     17    margin-top: 0;
     18    // Specified for the h4 to prevent conflicts of changing @headings-color
     19    color: inherit;
     20  }
     21
     22  // Provide class for links that match alerts
     23  .alert-link {
     24    font-weight: @alert-link-font-weight;
     25  }
     26
     27  // Improve alignment and spacing of inner content
     28  > p,
     29  > ul {
     30    margin-bottom: 0;
     31  }
     32
     33  > p + p {
     34    margin-top: 5px;
     35  }
    2436}
    2537
    26 // Adjust close link position
    27 .alert .close {
    28   position: relative;
    29   top: -2px;
    30   right: -21px;
    31   line-height: @baseLineHeight;
     38// Dismissible alerts
     39//
     40// Expand the right padding and account for the close button's positioning.
     41
     42.alert-dismissable, // The misspelled .alert-dismissable was deprecated in 3.2.0.
     43.alert-dismissible {
     44  padding-right: (@alert-padding + 20);
     45
     46  // Adjust close link position
     47  .close {
     48    position: relative;
     49    top: -2px;
     50    right: -21px;
     51    color: inherit;
     52  }
    3253}
    3354
    34 
    3555// Alternate styles
    36 // -------------------------
     56//
     57// Generate contextual modifier classes for colorizing the alert.
    3758
    3859.alert-success {
    39   background-color: @successBackground;
    40   border-color: @successBorder;
    41   color: @successText;
    42 }
    43 .alert-success h4 {
    44   color: @successText;
    45 }
    46 .alert-danger,
    47 .alert-error {
    48   background-color: @errorBackground;
    49   border-color: @errorBorder;
    50   color: @errorText;
    51 }
    52 .alert-danger h4,
    53 .alert-error h4 {
    54   color: @errorText;
    55 }
    56 .alert-info {
    57   background-color: @infoBackground;
    58   border-color: @infoBorder;
    59   color: @infoText;
    60 }
    61 .alert-info h4 {
    62   color: @infoText;
     60  .alert-variant(@alert-success-bg; @alert-success-border; @alert-success-text);
    6361}
    6462
     63.alert-info {
     64  .alert-variant(@alert-info-bg; @alert-info-border; @alert-info-text);
     65}
    6566
    66 // Block alerts
    67 // -------------------------
     67.alert-warning {
     68  .alert-variant(@alert-warning-bg; @alert-warning-border; @alert-warning-text);
     69}
    6870
    69 .alert-block {
    70   padding-top: 14px;
    71   padding-bottom: 14px;
     71.alert-danger {
     72  .alert-variant(@alert-danger-bg; @alert-danger-border; @alert-danger-text);
    7273}
    73 .alert-block > p,
    74 .alert-block > ul {
    75   margin-bottom: 0;
    76 }
    77 .alert-block p + p {
    78   margin-top: 5px;
    79 }
  • _plugins_/bootstrap/trunk/bootstrap/css/bootstrap.less

    r87503 r90741  
    11/*!
    2  * Bootstrap v2.3.2
    3  *
    4  * Copyright 2013 Twitter, Inc
    5  * Licensed under the Apache License v2.0
    6  * http://www.apache.org/licenses/LICENSE-2.0
    7  *
    8  * Designed and built with all the love in the world by @mdo and @fat.
     2 * Bootstrap v3.3.5 (http://getbootstrap.com)
     3 * Copyright 2011-2015 Twitter, Inc.
     4 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
    95 */
    106
    117// Core variables and mixins
    12 @import "css/variables.less"; // Modify this for custom colors, font-sizes, etc
    13 @import "css/mixins.less";
     8@import "variables.less";
     9@import "mixins.less";
    1410
    15 // CSS Reset
    16 @import "css/reset.less";
     11// Reset and dependencies
     12@import "normalize.less";
     13@import "print.less";
     14@import "glyphicons.less";
    1715
    18 // Grid system and page structure
    19 @import "css/scaffolding.less";
    20 @import "css/grid.less";
    21 @import "css/layouts.less";
     16// Core CSS
     17@import "scaffolding.less";
     18@import "type.less";
     19@import "code.less";
     20@import "grid.less";
     21@import "tables.less";
     22@import "forms.less";
     23@import "buttons.less";
    2224
    23 // Base CSS
    24 @import "css/type.less";
    25 @import "css/code.less";
    26 @import "css/forms.less";
    27 @import "css/tables.less";
     25// Components
     26@import "component-animations.less";
     27@import "dropdowns.less";
     28@import "button-groups.less";
     29@import "input-groups.less";
     30@import "navs.less";
     31@import "navbar.less";
     32@import "breadcrumbs.less";
     33@import "pagination.less";
     34@import "pager.less";
     35@import "labels.less";
     36@import "badges.less";
     37@import "jumbotron.less";
     38@import "thumbnails.less";
     39@import "alerts.less";
     40@import "progress-bars.less";
     41@import "media.less";
     42@import "list-group.less";
     43@import "panels.less";
     44@import "responsive-embed.less";
     45@import "wells.less";
     46@import "close.less";
    2847
    29 // Components: common
    30 @import "css/sprites.less";
    31 @import "css/dropdowns.less";
    32 @import "css/wells.less";
    33 @import "css/component-animations.less";
    34 @import "css/close.less";
    35 
    36 // Components: Buttons & Alerts
    37 @import "css/buttons.less";
    38 @import "css/button-groups.less";
    39 @import "css/alerts.less"; // Note: alerts share common CSS with buttons and thus have styles in buttons.less
    40 
    41 // Components: Nav
    42 @import "css/navs.less";
    43 @import "css/navbar.less";
    44 @import "css/breadcrumbs.less";
    45 @import "css/pagination.less";
    46 @import "css/pager.less";
    47 
    48 // Components: Popovers
    49 @import "css/modals.less";
    50 @import "css/tooltip.less";
    51 @import "css/popovers.less";
    52 
    53 // Components: Misc
    54 @import "css/thumbnails.less";
    55 @import "css/media.less";
    56 @import "css/labels-badges.less";
    57 @import "css/progress-bars.less";
    58 @import "css/accordion.less";
    59 @import "css/carousel.less";
    60 @import "css/hero-unit.less";
     48// Components w/ JavaScript
     49@import "modals.less";
     50@import "tooltip.less";
     51@import "popovers.less";
     52@import "carousel.less";
    6153
    6254// Utility classes
    63 @import "css/utilities.less"; // Has to be last to override when necessary
    64 
    65 // BootStrap Theming : 2 possible names, Has to be last-last to override when necessary
    66 @import "css/bootswatch.less";
    67 @import "css/boot-theme.less";
     55@import "utilities.less";
     56@import "responsive-utilities.less";
  • _plugins_/bootstrap/trunk/bootstrap/css/breadcrumbs.less

    r69198 r90741  
    55
    66.breadcrumb {
    7   padding: 8px 15px;
    8   margin: 0 0 @baseLineHeight;
     7  padding: @breadcrumb-padding-vertical @breadcrumb-padding-horizontal;
     8  margin-bottom: @line-height-computed;
    99  list-style: none;
    10   background-color: #f5f5f5;
    11   .border-radius(@baseBorderRadius);
     10  background-color: @breadcrumb-bg;
     11  border-radius: @border-radius-base;
     12
    1213  > li {
    1314    display: inline-block;
    14     .ie7-inline-block();
    15     text-shadow: 0 1px 0 @white;
    16     > .divider {
     15
     16    + li:before {
     17      content: "@{breadcrumb-separator}\00a0"; // Unicode space added since inline-block means non-collapsing white-space
    1718      padding: 0 5px;
    18       color: #ccc;
     19      color: @breadcrumb-color;
    1920    }
    2021  }
     22
    2123  > .active {
    22     color: @grayLight;
     24    color: @breadcrumb-active-color;
    2325  }
    2426}
  • _plugins_/bootstrap/trunk/bootstrap/css/button-groups.less

    r70593 r90741  
    33// --------------------------------------------------
    44
    5 
    65// Make the div behave like a button
    7 .btn-group {
     6.btn-group,
     7.btn-group-vertical {
    88  position: relative;
    99  display: inline-block;
    10   .ie7-inline-block();
    11   font-size: 0; // remove as part 1 of font-size inline-block hack
    1210  vertical-align: middle; // match .btn alignment given font-size hack above
    13   white-space: nowrap; // prevent buttons from wrapping when in tight spaces (e.g., the table on the tests page)
    14   .ie7-restore-left-whitespace();
    15 }
    16 
    17 // Space out series of button groups
    18 .btn-group + .btn-group {
    19   margin-left: 5px;
     11  > .btn {
     12    position: relative;
     13    float: left;
     14    // Bring the "active" button to the front
     15    &:hover,
     16    &:focus,
     17    &:active,
     18    &.active {
     19      z-index: 2;
     20    }
     21  }
     22}
     23
     24// Prevent double borders when buttons are next to each other
     25.btn-group {
     26  .btn + .btn,
     27  .btn + .btn-group,
     28  .btn-group + .btn,
     29  .btn-group + .btn-group {
     30    margin-left: -1px;
     31  }
    2032}
    2133
    2234// Optional: Group multiple button groups together for a toolbar
    2335.btn-toolbar {
    24   font-size: 0; // Hack to remove whitespace that results from using inline-block
    25   margin-top: @baseLineHeight / 2;
    26   margin-bottom: @baseLineHeight / 2;
    27   > .btn + .btn,
    28   > .btn-group + .btn,
    29   > .btn + .btn-group {
     36  margin-left: -5px; // Offset the first child's margin
     37  &:extend(.clearfix all);
     38
     39  .btn,
     40  .btn-group,
     41  .input-group {
     42    float: left;
     43  }
     44  > .btn,
     45  > .btn-group,
     46  > .input-group {
    3047    margin-left: 5px;
    3148  }
    3249}
    3350
    34 // Float them, remove border radius, then re-add to first and last elements
    35 .btn-group > .btn {
    36   position: relative;
    37   .border-radius(0);
    38 }
    39 .btn-group > .btn + .btn {
    40   margin-left: -1px;
    41 }
    42 .btn-group > .btn,
    43 .btn-group > .dropdown-menu,
    44 .btn-group > .popover {
    45   font-size: @baseFontSize; // redeclare as part 2 of font-size inline-block hack
    46 }
    47 
    48 // Reset fonts for other sizes
    49 .btn-group > .btn-mini {
    50   font-size: @fontSizeMini;
    51 }
    52 .btn-group > .btn-small {
    53   font-size: @fontSizeSmall;
    54 }
    55 .btn-group > .btn-large {
    56   font-size: @fontSizeLarge;
     51.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
     52  border-radius: 0;
    5753}
    5854
     
    6056.btn-group > .btn:first-child {
    6157  margin-left: 0;
    62   .border-top-left-radius(@baseBorderRadius);
    63   .border-bottom-left-radius(@baseBorderRadius);
     58  &:not(:last-child):not(.dropdown-toggle) {
     59    .border-right-radius(0);
     60  }
    6461}
    6562// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
    66 .btn-group > .btn:last-child,
    67 .btn-group > .dropdown-toggle {
    68   .border-top-right-radius(@baseBorderRadius);
    69   .border-bottom-right-radius(@baseBorderRadius);
    70 }
    71 // Reset corners for large buttons
    72 .btn-group > .btn.large:first-child {
    73   margin-left: 0;
    74   .border-top-left-radius(@borderRadiusLarge);
    75   .border-bottom-left-radius(@borderRadiusLarge);
    76 }
    77 .btn-group > .btn.large:last-child,
    78 .btn-group > .large.dropdown-toggle {
    79   .border-top-right-radius(@borderRadiusLarge);
    80   .border-bottom-right-radius(@borderRadiusLarge);
    81 }
    82 
    83 // On hover/focus/active, bring the proper btn to front
    84 .btn-group > .btn:hover,
    85 .btn-group > .btn:focus,
    86 .btn-group > .btn:active,
    87 .btn-group > .btn.active {
    88   z-index: 2;
     63.btn-group > .btn:last-child:not(:first-child),
     64.btn-group > .dropdown-toggle:not(:first-child) {
     65  .border-left-radius(0);
     66}
     67
     68// Custom edits for including btn-groups within btn-groups (useful for including dropdown buttons within a btn-group)
     69.btn-group > .btn-group {
     70  float: left;
     71}
     72.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
     73  border-radius: 0;
     74}
     75.btn-group > .btn-group:first-child:not(:last-child) {
     76  > .btn:last-child,
     77  > .dropdown-toggle {
     78    .border-right-radius(0);
     79  }
     80}
     81.btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child {
     82  .border-left-radius(0);
    8983}
    9084
     
    9690
    9791
     92// Sizing
     93//
     94// Remix the default button sizing classes into new ones for easier manipulation.
     95
     96.btn-group-xs > .btn { &:extend(.btn-xs); }
     97.btn-group-sm > .btn { &:extend(.btn-sm); }
     98.btn-group-lg > .btn { &:extend(.btn-lg); }
     99
    98100
    99101// Split button dropdowns
     
    104106  padding-left: 8px;
    105107  padding-right: 8px;
    106   .box-shadow(~"inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
    107   *padding-top: 5px;
    108   *padding-bottom: 5px;
    109 }
    110 .btn-group > .btn-mini + .dropdown-toggle {
    111   padding-left: 5px;
    112   padding-right: 5px;
    113   *padding-top: 2px;
    114   *padding-bottom: 2px;
    115 }
    116 .btn-group > .btn-small + .dropdown-toggle {
    117   *padding-top: 5px;
    118   *padding-bottom: 4px;
    119 }
    120 .btn-group > .btn-large + .dropdown-toggle {
     108}
     109.btn-group > .btn-lg + .dropdown-toggle {
    121110  padding-left: 12px;
    122111  padding-right: 12px;
    123   *padding-top: 7px;
    124   *padding-bottom: 7px;
    125 }
    126 
    127 .btn-group.open {
    128 
    129   // The clickable button for toggling the menu
    130   // Remove the gradient and set the same inset shadow as the :active state
    131   .dropdown-toggle {
    132     background-image: none;
    133     .box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)");
    134   }
    135 
    136   // Keep the hover's background when dropdown is open
    137   .btn.dropdown-toggle {
    138     background-color: @btnBackgroundHighlight;
    139   }
    140   .btn-primary.dropdown-toggle {
    141     background-color: @btnPrimaryBackgroundHighlight;
    142   }
    143   .btn-warning.dropdown-toggle {
    144     background-color: @btnWarningBackgroundHighlight;
    145   }
    146   .btn-danger.dropdown-toggle {
    147     background-color: @btnDangerBackgroundHighlight;
    148   }
    149   .btn-success.dropdown-toggle {
    150     background-color: @btnSuccessBackgroundHighlight;
    151   }
    152   .btn-info.dropdown-toggle {
    153     background-color: @btnInfoBackgroundHighlight;
    154   }
    155   .btn-inverse.dropdown-toggle {
    156     background-color: @btnInverseBackgroundHighlight;
     112}
     113
     114// The clickable button for toggling the menu
     115// Remove the gradient and set the same inset shadow as the :active state
     116.btn-group.open .dropdown-toggle {
     117  .box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
     118
     119  // Show no shadow for `.btn-link` since it has no other button styles.
     120  &.btn-link {
     121    .box-shadow(none);
    157122  }
    158123}
     
    161126// Reposition the caret
    162127.btn .caret {
    163   margin-top: 8px;
    164128  margin-left: 0;
    165129}
    166130// Carets in other button sizes
    167 .btn-large .caret {
    168   margin-top: 6px;
    169 }
    170 .btn-large .caret {
    171   border-left-width:  5px;
    172   border-right-width: 5px;
    173   border-top-width:   5px;
    174 }
    175 .btn-mini .caret,
    176 .btn-small .caret {
    177   margin-top: 8px;
     131.btn-lg .caret {
     132  border-width: @caret-width-large @caret-width-large 0;
     133  border-bottom-width: 0;
    178134}
    179135// Upside down carets for .dropup
    180 .dropup .btn-large .caret {
    181   border-bottom-width: 5px;
    182 }
    183 
    184 
    185 
    186 // Account for other colors
    187 .btn-primary,
    188 .btn-warning,
    189 .btn-danger,
    190 .btn-info,
    191 .btn-success,
    192 .btn-inverse {
    193   .caret {
    194     border-top-color: @white;
    195     border-bottom-color: @white;
    196   }
    197 }
    198 
     136.dropup .btn-lg .caret {
     137  border-width: 0 @caret-width-large @caret-width-large;
     138}
    199139
    200140
     
    203143
    204144.btn-group-vertical {
    205   display: inline-block; // makes buttons only take up the width they need
    206   .ie7-inline-block();
    207 }
     145  > .btn,
     146  > .btn-group,
     147  > .btn-group > .btn {
     148    display: block;
     149    float: none;
     150    width: 100%;
     151    max-width: 100%;
     152  }
     153
     154  // Clear floats so dropdown menus can be properly placed
     155  > .btn-group {
     156    &:extend(.clearfix all);
     157    > .btn {
     158      float: none;
     159    }
     160  }
     161
     162  > .btn + .btn,
     163  > .btn + .btn-group,
     164  > .btn-group + .btn,
     165  > .btn-group + .btn-group {
     166    margin-top: -1px;
     167    margin-left: 0;
     168  }
     169}
     170
    208171.btn-group-vertical > .btn {
    209   display: block;
    210   float: none;
    211   max-width: 100%;
    212   .border-radius(0);
    213 }
    214 .btn-group-vertical > .btn + .btn {
    215   margin-left: 0;
    216   margin-top: -1px;
    217 }
    218 .btn-group-vertical > .btn:first-child {
    219   .border-radius(@baseBorderRadius @baseBorderRadius 0 0);
    220 }
    221 .btn-group-vertical > .btn:last-child {
    222   .border-radius(0 0 @baseBorderRadius @baseBorderRadius);
    223 }
    224 .btn-group-vertical > .btn-large:first-child {
    225   .border-radius(@borderRadiusLarge @borderRadiusLarge 0 0);
    226 }
    227 .btn-group-vertical > .btn-large:last-child {
    228   .border-radius(0 0 @borderRadiusLarge @borderRadiusLarge);
    229 }
     172  &:not(:first-child):not(:last-child) {
     173    border-radius: 0;
     174  }
     175  &:first-child:not(:last-child) {
     176    border-top-right-radius: @btn-border-radius-base;
     177    .border-bottom-radius(0);
     178  }
     179  &:last-child:not(:first-child) {
     180    border-bottom-left-radius: @btn-border-radius-base;
     181    .border-top-radius(0);
     182  }
     183}
     184.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
     185  border-radius: 0;
     186}
     187.btn-group-vertical > .btn-group:first-child:not(:last-child) {
     188  > .btn:last-child,
     189  > .dropdown-toggle {
     190    .border-bottom-radius(0);
     191  }
     192}
     193.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child {
     194  .border-top-radius(0);
     195}
     196
     197
     198// Justified button groups
     199// ----------------------
     200
     201.btn-group-justified {
     202  display: table;
     203  width: 100%;
     204  table-layout: fixed;
     205  border-collapse: separate;
     206  > .btn,
     207  > .btn-group {
     208    float: none;
     209    display: table-cell;
     210    width: 1%;
     211  }
     212  > .btn-group .btn {
     213    width: 100%;
     214  }
     215
     216  > .btn-group .dropdown-menu {
     217    left: auto;
     218  }
     219}
     220
     221
     222// Checkbox and radio options
     223//
     224// In order to support the browser's form validation feedback, powered by the
     225// `required` attribute, we have to "hide" the inputs via `clip`. We cannot use
     226// `display: none;` or `visibility: hidden;` as that also hides the popover.
     227// Simply visually hiding the inputs via `opacity` would leave them clickable in
     228// certain cases which is prevented by using `clip` and `pointer-events`.
     229// This way, we ensure a DOM element is visible to position the popover from.
     230//
     231// See https://github.com/twbs/bootstrap/pull/12794 and
     232// https://github.com/twbs/bootstrap/pull/14559 for more information.
     233
     234[data-toggle="buttons"] {
     235  > .btn,
     236  > .btn-group > .btn {
     237    input[type="radio"],
     238    input[type="checkbox"] {
     239      position: absolute;
     240      clip: rect(0,0,0,0);
     241      pointer-events: none;
     242    }
     243  }
     244}
  • _plugins_/bootstrap/trunk/bootstrap/css/buttons.less

    r70593 r90741  
    77// --------------------------------------------------
    88
    9 // Core
    109.btn {
    1110  display: inline-block;
    12   .ie7-inline-block();
    13   padding: 4px 12px;
    1411  margin-bottom: 0; // For input.btn
    15   font-size: @baseFontSize;
    16   line-height: @baseLineHeight;
     12  font-weight: @btn-font-weight;
    1713  text-align: center;
    1814  vertical-align: middle;
     15  touch-action: manipulation;
    1916  cursor: pointer;
    20   .buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark, 0 1px 1px rgba(255,255,255,.75));
    21   border: 1px solid @btnBorder;
    22   *border: 0; // Remove the border to prevent IE7's black border on input:focus
    23   border-bottom-color: darken(@btnBorder, 10%);
    24   .border-radius(@baseBorderRadius);
    25   .ie7-restore-left-whitespace(); // Give IE7 some love
    26   .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
     17  background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
     18  border: 1px solid transparent;
     19  white-space: nowrap;
     20  .button-size(@padding-base-vertical; @padding-base-horizontal; @font-size-base; @line-height-base; @btn-border-radius-base);
     21  .user-select(none);
    2722
    28   // Hover/focus state
    29   &:hover,
    30   &:focus {
    31     color: @grayDark;
    32     text-decoration: none;
    33     background-position: 0 -15px;
    34 
    35     // transition is only when going to hover/focus, otherwise the background
    36     // behind the gradient (there for IE<=9 fallback) gets mismatched
    37     .transition(background-position .1s linear);
     23  &,
     24  &:active,
     25  &.active {
     26    &:focus,
     27    &.focus {
     28      .tab-focus();
     29    }
    3830  }
    3931
    40   // Focus state for keyboard and accessibility
    41   &:focus {
    42     .tab-focus();
     32  &:hover,
     33  &:focus,
     34  &.focus {
     35    color: @btn-default-color;
     36    text-decoration: none;
    4337  }
    4438
    45   // Active state
    46   &.active,
    47   &:active {
     39  &:active,
     40  &.active {
     41    outline: 0;
    4842    background-image: none;
    49     outline: 0;
    50     .box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)");
     43    .box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
    5144  }
    5245
    53   // Disabled state
    5446  &.disabled,
    55   &[disabled] {
    56     cursor: default;
    57     background-image: none;
    58     .opacity(65);
     47  &[disabled],
     48  fieldset[disabled] & {
     49    cursor: @cursor-disabled;
     50    .opacity(.65);
    5951    .box-shadow(none);
    6052  }
    6153
     54  a& {
     55    &.disabled,
     56    fieldset[disabled] & {
     57      pointer-events: none; // Future-proof disabling of clicks on `<a>` elements
     58    }
     59  }
    6260}
    6361
     62
     63// Alternate buttons
     64// --------------------------------------------------
     65
     66.btn-default {
     67  .button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);
     68}
     69.btn-primary {
     70  .button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border);
     71}
     72// Success appears as green
     73.btn-success {
     74  .button-variant(@btn-success-color; @btn-success-bg; @btn-success-border);
     75}
     76// Info appears as blue-green
     77.btn-info {
     78  .button-variant(@btn-info-color; @btn-info-bg; @btn-info-border);
     79}
     80// Warning appears as orange
     81.btn-warning {
     82  .button-variant(@btn-warning-color; @btn-warning-bg; @btn-warning-border);
     83}
     84// Danger and error appear as red
     85.btn-danger {
     86  .button-variant(@btn-danger-color; @btn-danger-bg; @btn-danger-border);
     87}
     88
     89
     90// Link buttons
     91// -------------------------
     92
     93// Make a button look and behave like a link
     94.btn-link {
     95  color: @link-color;
     96  font-weight: normal;
     97  border-radius: 0;
     98
     99  &,
     100  &:active,
     101  &.active,
     102  &[disabled],
     103  fieldset[disabled] & {
     104    background-color: transparent;
     105    .box-shadow(none);
     106  }
     107  &,
     108  &:hover,
     109  &:focus,
     110  &:active {
     111    border-color: transparent;
     112  }
     113  &:hover,
     114  &:focus {
     115    color: @link-hover-color;
     116    text-decoration: @link-hover-decoration;
     117    background-color: transparent;
     118  }
     119  &[disabled],
     120  fieldset[disabled] & {
     121    &:hover,
     122    &:focus {
     123      color: @btn-link-disabled-color;
     124      text-decoration: none;
     125    }
     126  }
     127}
    64128
    65129
     
    67131// --------------------------------------------------
    68132
    69 // Large
    70 .btn-large {
    71   padding: @paddingLarge;
    72   font-size: @fontSizeLarge;
    73   .border-radius(@borderRadiusLarge);
     133.btn-lg {
     134  // line-height: ensure even-numbered height of button next to large input
     135  .button-size(@padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @btn-border-radius-large);
    74136}
    75 .btn-large [class^="icon-"],
    76 .btn-large [class*=" icon-"] {
    77   margin-top: 4px;
     137.btn-sm {
     138  // line-height: ensure proper height of button next to small input
     139  .button-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @btn-border-radius-small);
    78140}
    79 
    80 // Small
    81 .btn-small {
    82   padding: @paddingSmall;
    83   font-size: @fontSizeSmall;
    84   .border-radius(@borderRadiusSmall);
    85 }
    86 .btn-small [class^="icon-"],
    87 .btn-small [class*=" icon-"] {
    88   margin-top: 0;
    89 }
    90 .btn-mini [class^="icon-"],
    91 .btn-mini [class*=" icon-"] {
    92   margin-top: -1px;
    93 }
    94 
    95 // Mini
    96 .btn-mini {
    97   padding: @paddingMini;
    98   font-size: @fontSizeMini;
    99   .border-radius(@borderRadiusSmall);
     141.btn-xs {
     142  .button-size(@padding-xs-vertical; @padding-xs-horizontal; @font-size-small; @line-height-small; @btn-border-radius-small);
    100143}
    101144
    102145
    103146// Block button
    104 // -------------------------
     147// --------------------------------------------------
    105148
    106149.btn-block {
    107150  display: block;
    108151  width: 100%;
    109   padding-left: 0;
    110   padding-right: 0;
    111   .box-sizing(border-box);
    112152}
    113153
     
    125165  }
    126166}
    127 
    128 
    129 
    130 // Alternate buttons
    131 // --------------------------------------------------
    132 
    133 // Provide *some* extra contrast for those who can get it
    134 .btn-primary.active,
    135 .btn-warning.active,
    136 .btn-danger.active,
    137 .btn-success.active,
    138 .btn-info.active,
    139 .btn-inverse.active {
    140   color: rgba(255,255,255,.75);
    141 }
    142 
    143 // Set the backgrounds
    144 // -------------------------
    145 .btn-primary {
    146   .buttonBackground(@btnPrimaryBackground, @btnPrimaryBackgroundHighlight);
    147 }
    148 // Warning appears are orange
    149 .btn-warning {
    150   .buttonBackground(@btnWarningBackground, @btnWarningBackgroundHighlight);
    151 }
    152 // Danger and error appear as red
    153 .btn-danger {
    154   .buttonBackground(@btnDangerBackground, @btnDangerBackgroundHighlight);
    155 }
    156 // Success appears as green
    157 .btn-success {
    158   .buttonBackground(@btnSuccessBackground, @btnSuccessBackgroundHighlight);
    159 }
    160 // Info appears as a neutral blue
    161 .btn-info {
    162   .buttonBackground(@btnInfoBackground, @btnInfoBackgroundHighlight);
    163 }
    164 // Inverse appears as dark gray
    165 .btn-inverse {
    166   .buttonBackground(@btnInverseBackground, @btnInverseBackgroundHighlight);
    167 }
    168 
    169 
    170 // Cross-browser Jank
    171 // --------------------------------------------------
    172 
    173 button.btn,
    174 input[type="submit"].btn {
    175 
    176   // Firefox 3.6 only I believe
    177   &::-moz-focus-inner {
    178     padding: 0;
    179     border: 0;
    180   }
    181 
    182   // IE7 has some default padding on button controls
    183   *padding-top: 3px;
    184   *padding-bottom: 3px;
    185 
    186   &.btn-large {
    187     *padding-top: 7px;
    188     *padding-bottom: 7px;
    189   }
    190   &.btn-small {
    191     *padding-top: 3px;
    192     *padding-bottom: 3px;
    193   }
    194   &.btn-mini {
    195     *padding-top: 1px;
    196     *padding-bottom: 1px;
    197   }
    198 }
    199 
    200 
    201 // Link buttons
    202 // --------------------------------------------------
    203 
    204 // Make a button look and behave like a link
    205 .btn-link,
    206 .btn-link:active,
    207 .btn-link[disabled] {
    208   background-color: transparent;
    209   background-image: none;
    210   .box-shadow(none);
    211 }
    212 .btn-link {
    213   border-color: transparent;
    214   cursor: pointer;
    215   color: @linkColor;
    216   .border-radius(0);
    217 }
    218 .btn-link:hover,
    219 .btn-link:focus {
    220   color: @linkColorHover;
    221   text-decoration: underline;
    222   background-color: transparent;
    223 }
    224 .btn-link[disabled]:hover,
    225 .btn-link[disabled]:focus {
    226   color: @grayDark;
    227   text-decoration: none;
    228 }
  • _plugins_/bootstrap/trunk/bootstrap/css/carousel.less

    r70593 r90741  
    44
    55
     6// Wrapper for the slide container and indicators
    67.carousel {
    78  position: relative;
    8   margin-bottom: @baseLineHeight;
    9   line-height: 1;
    109}
    1110
    1211.carousel-inner {
     12  position: relative;
    1313  overflow: hidden;
    1414  width: 100%;
    15   position: relative;
    16 }
    17 
    18 .carousel-inner {
    1915
    2016  > .item {
     
    2622    > img,
    2723    > a > img {
    28       display: block;
     24      &:extend(.img-responsive);
    2925      line-height: 1;
     26    }
     27
     28    // WebKit CSS3 transforms for supported devices
     29    @media all and (transform-3d), (-webkit-transform-3d) {
     30      .transition-transform(~'0.6s ease-in-out');
     31      .backface-visibility(~'hidden');
     32      .perspective(1000px);
     33
     34      &.next,
     35      &.active.right {
     36        .translate3d(100%, 0, 0);
     37        left: 0;
     38      }
     39      &.prev,
     40      &.active.left {
     41        .translate3d(-100%, 0, 0);
     42        left: 0;
     43      }
     44      &.next.left,
     45      &.prev.right,
     46      &.active {
     47        .translate3d(0, 0, 0);
     48        left: 0;
     49      }
    3050    }
    3151  }
     
    3353  > .active,
    3454  > .next,
    35   > .prev { display: block; }
     55  > .prev {
     56    display: block;
     57  }
    3658
    3759  > .active {
     
    7193.carousel-control {
    7294  position: absolute;
    73   top: 40%;
    74   left: 15px;
    75   width: 40px;
    76   height: 40px;
    77   margin-top: -20px;
    78   font-size: 60px;
    79   font-weight: 100;
    80   line-height: 30px;
    81   color: @white;
     95  top: 0;
     96  left: 0;
     97  bottom: 0;
     98  width: @carousel-control-width;
     99  .opacity(@carousel-control-opacity);
     100  font-size: @carousel-control-font-size;
     101  color: @carousel-control-color;
    82102  text-align: center;
    83   background: @grayDarker;
    84   border: 3px solid @white;
    85   .border-radius(23px);
    86   .opacity(50);
    87 
    88   // we can't have this transition here
    89   // because webkit cancels the carousel
    90   // animation if you trip this while
    91   // in the middle of another animation
    92   // ;_;
    93   // .transition(opacity .2s linear);
    94 
    95   // Reposition the right one
     103  text-shadow: @carousel-text-shadow;
     104  // We can't have this transition here because WebKit cancels the carousel
     105  // animation if you trip this while in the middle of another animation.
     106
     107  // Set gradients for backgrounds
     108  &.left {
     109    #gradient > .horizontal(@start-color: rgba(0,0,0,.5); @end-color: rgba(0,0,0,.0001));
     110  }
    96111  &.right {
    97112    left: auto;
    98     right: 15px;
     113    right: 0;
     114    #gradient > .horizontal(@start-color: rgba(0,0,0,.0001); @end-color: rgba(0,0,0,.5));
    99115  }
    100116
     
    102118  &:hover,
    103119  &:focus {
    104     color: @white;
     120    outline: 0;
     121    color: @carousel-control-color;
    105122    text-decoration: none;
    106     .opacity(90);
    107   }
    108 }
    109 
    110 // Carousel indicator pips
    111 // -----------------------------
     123    .opacity(.9);
     124  }
     125
     126  // Toggles
     127  .icon-prev,
     128  .icon-next,
     129  .glyphicon-chevron-left,
     130  .glyphicon-chevron-right {
     131    position: absolute;
     132    top: 50%;
     133    margin-top: -10px;
     134    z-index: 5;
     135    display: inline-block;
     136  }
     137  .icon-prev,
     138  .glyphicon-chevron-left {
     139    left: 50%;
     140    margin-left: -10px;
     141  }
     142  .icon-next,
     143  .glyphicon-chevron-right {
     144    right: 50%;
     145    margin-right: -10px;
     146  }
     147  .icon-prev,
     148  .icon-next {
     149    width:  20px;
     150    height: 20px;
     151    line-height: 1;
     152    font-family: serif;
     153  }
     154
     155
     156  .icon-prev {
     157    &:before {
     158      content: '\2039';// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039)
     159    }
     160  }
     161  .icon-next {
     162    &:before {
     163      content: '\203a';// SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A)
     164    }
     165  }
     166}
     167
     168// Optional indicator pips
     169//
     170// Add an unordered list with the following class and add a list item for each
     171// slide your carousel holds.
     172
    112173.carousel-indicators {
    113174  position: absolute;
    114   top: 15px;
    115   right: 15px;
    116   z-index: 5;
    117   margin: 0;
     175  bottom: 10px;
     176  left: 50%;
     177  z-index: 15;
     178  width: 60%;
     179  margin-left: -30%;
     180  padding-left: 0;
    118181  list-style: none;
     182  text-align: center;
    119183
    120184  li {
    121     display: block;
    122     float: left;
    123     width: 10px;
     185    display: inline-block;
     186    width:  10px;
    124187    height: 10px;
    125     margin-left: 5px;
     188    margin: 1px;
    126189    text-indent: -999px;
    127     background-color: #ccc;
    128     background-color: rgba(255,255,255,.25);
    129     border-radius: 5px;
     190    border: 1px solid @carousel-indicator-border-color;
     191    border-radius: 10px;
     192    cursor: pointer;
     193
     194    // IE8-9 hack for event handling
     195    //
     196    // Internet Explorer 8-9 does not support clicks on elements without a set
     197    // `background-color`. We cannot use `filter` since that's not viewed as a
     198    // background color by the browser. Thus, a hack is needed.
     199    // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Internet_Explorer
     200    //
     201    // For IE8, we set solid black as it doesn't support `rgba()`. For IE9, we
     202    // set alpha transparency for the best results possible.
     203    background-color: #000 \9; // IE8
     204    background-color: rgba(0,0,0,0); // IE9
    130205  }
    131206  .active {
    132     background-color: #fff;
    133   }
    134 }
    135 
    136 // Caption for text below images
     207    margin: 0;
     208    width:  12px;
     209    height: 12px;
     210    background-color: @carousel-indicator-active-bg;
     211  }
     212}
     213
     214// Optional captions
    137215// -----------------------------
    138 
     216// Hidden by default for smaller viewports
    139217.carousel-caption {
    140218  position: absolute;
    141   left: 0;
    142   right: 0;
    143   bottom: 0;
    144   padding: 15px;
    145   background: @grayDark;
    146   background: rgba(0,0,0,.75);
    147 }
    148 .carousel-caption h4,
    149 .carousel-caption p {
    150   color: @white;
    151   line-height: @baseLineHeight;
    152 }
    153 .carousel-caption h4 {
    154   margin: 0 0 5px;
    155 }
    156 .carousel-caption p {
    157   margin-bottom: 0;
    158 }
     219  left: 15%;
     220  right: 15%;
     221  bottom: 20px;
     222  z-index: 10;
     223  padding-top: 20px;
     224  padding-bottom: 20px;
     225  color: @carousel-caption-color;
     226  text-align: center;
     227  text-shadow: @carousel-text-shadow;
     228  & .btn {
     229    text-shadow: none; // No shadow for button elements in carousel-caption
     230  }
     231}
     232
     233
     234// Scale up controls for tablets and up
     235@media screen and (min-width: @screen-sm-min) {
     236
     237  // Scale up the controls a smidge
     238  .carousel-control {
     239    .glyphicon-chevron-left,
     240    .glyphicon-chevron-right,
     241    .icon-prev,
     242    .icon-next {
     243      width: 30px;
     244      height: 30px;
     245      margin-top: -15px;
     246      font-size: 30px;
     247    }
     248    .glyphicon-chevron-left,
     249    .icon-prev {
     250      margin-left: -15px;
     251    }
     252    .glyphicon-chevron-right,
     253    .icon-next {
     254      margin-right: -15px;
     255    }
     256  }
     257
     258  // Show and left align the captions
     259  .carousel-caption {
     260    left: 20%;
     261    right: 20%;
     262    padding-bottom: 30px;
     263  }
     264
     265  // Move up the indicators
     266  .carousel-indicators {
     267    bottom: 20px;
     268  }
     269}
  • _plugins_/bootstrap/trunk/bootstrap/css/close.less

    r70593 r90741  
    66.close {
    77  float: right;
    8   font-size: 20px;
    9   font-weight: bold;
    10   line-height: @baseLineHeight;
    11   color: @black;
    12   text-shadow: 0 1px 0 rgba(255,255,255,1);
    13   .opacity(20);
     8  font-size: (@font-size-base * 1.5);
     9  font-weight: @close-font-weight;
     10  line-height: 1;
     11  color: @close-color;
     12  text-shadow: @close-text-shadow;
     13  .opacity(.2);
     14
    1415  &:hover,
    1516  &:focus {
    16     color: @black;
     17    color: @close-color;
    1718    text-decoration: none;
    1819    cursor: pointer;
    19     .opacity(40);
     20    .opacity(.5);
     21  }
     22
     23  // Additional properties for button version
     24  // iOS requires the button element instead of an anchor tag.
     25  // If you want the anchor version, it requires `href="#"`.
     26  // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
     27  button& {
     28    padding: 0;
     29    cursor: pointer;
     30    background: transparent;
     31    border: 0;
     32    -webkit-appearance: none;
    2033  }
    2134}
    22 
    23 // Additional properties for button version
    24 // iOS requires the button element instead of an anchor tag.
    25 // If you want the anchor version, it requires `href="#"`.
    26 button.close {
    27   padding: 0;
    28   cursor: pointer;
    29   background: transparent;
    30   border: 0;
    31   -webkit-appearance: none;
    32 }
  • _plugins_/bootstrap/trunk/bootstrap/css/code.less

    r69198 r90741  
    11//
    2 // Code (inline and blocK)
     2// Code (inline and block)
    33// --------------------------------------------------
    44
     
    66// Inline and block code styles
    77code,
    8 pre {
    9   padding: 0 3px 2px;
    10   #font > #family > .monospace;
    11   font-size: @baseFontSize - 2;
    12   color: @grayDark;
    13   .border-radius(3px);
     8kbd,
     9pre,
     10samp {
     11  font-family: @font-family-monospace;
    1412}
    1513
     
    1715code {
    1816  padding: 2px 4px;
    19   color: #d14;
    20   background-color: #f7f7f9;
    21   border: 1px solid #e1e1e8;
    22   white-space: nowrap;
     17  font-size: 90%;
     18  color: @code-color;
     19  background-color: @code-bg;
     20  border-radius: @border-radius-base;
     21}
     22
     23// User input typically entered via keyboard
     24kbd {
     25  padding: 2px 4px;
     26  font-size: 90%;
     27  color: @kbd-color;
     28  background-color: @kbd-bg;
     29  border-radius: @border-radius-small;
     30  box-shadow: inset 0 -1px 0 rgba(0,0,0,.25);
     31
     32  kbd {
     33    padding: 0;
     34    font-size: 100%;
     35    font-weight: bold;
     36    box-shadow: none;
     37  }
    2338}
    2439
     
    2641pre {
    2742  display: block;
    28   padding: (@baseLineHeight - 1) / 2;
    29   margin: 0 0 @baseLineHeight / 2;
    30   font-size: @baseFontSize - 1; // 14px to 13px
    31   line-height: @baseLineHeight;
     43  padding: ((@line-height-computed - 1) / 2);
     44  margin: 0 0 (@line-height-computed / 2);
     45  font-size: (@font-size-base - 1); // 14px to 13px
     46  line-height: @line-height-base;
    3247  word-break: break-all;
    3348  word-wrap: break-word;
    34   white-space: pre;
    35   white-space: pre-wrap;
    36   background-color: #f5f5f5;
    37   border: 1px solid #ccc; // fallback for IE7-8
    38   border: 1px solid rgba(0,0,0,.15);
    39   .border-radius(@baseBorderRadius);
    40 
    41   // Make prettyprint styles more spaced out for readability
    42   &.prettyprint {
    43     margin-bottom: @baseLineHeight;
    44   }
     49  color: @pre-color;
     50  background-color: @pre-bg;
     51  border: 1px solid @pre-border-color;
     52  border-radius: @border-radius-base;
    4553
    4654  // Account for some code outputs that place code tags in pre tags
    4755  code {
    4856    padding: 0;
     57    font-size: inherit;
    4958    color: inherit;
    50     white-space: pre;
    5159    white-space: pre-wrap;
    5260    background-color: transparent;
    53     border: 0;
     61    border-radius: 0;
    5462  }
    5563}
     
    5765// Enable scrollable blocks of code
    5866.pre-scrollable {
    59   max-height: 340px;
     67  max-height: @pre-scrollable-max-height;
    6068  overflow-y: scroll;
    6169}
  • _plugins_/bootstrap/trunk/bootstrap/css/component-animations.less

    r66262 r90741  
    33// --------------------------------------------------
    44
     5// Heads up!
     6//
     7// We don't use the `.opacity()` mixin here since it causes a bug with text
     8// fields in IE7-8. Source: https://github.com/twbs/bootstrap/pull/3552.
    59
    610.fade {
     
    1317
    1418.collapse {
     19  display: none;
     20
     21  &.in      { display: block; }
     22  tr&.in    { display: table-row; }
     23  tbody&.in { display: table-row-group; }
     24}
     25
     26.collapsing {
    1527  position: relative;
    1628  height: 0;
    1729  overflow: hidden;
    18   .transition(height .35s ease);
    19   &.in {
    20     height: auto;
    21   }
     30  .transition-property(~"height, visibility");
     31  .transition-duration(.35s);
     32  .transition-timing-function(ease);
    2233}
  • _plugins_/bootstrap/trunk/bootstrap/css/dropdowns.less

    r87503 r90741  
    44
    55
    6 // Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns
    7 .dropup,
    8 .dropdown {
    9   position: relative;
    10 }
    11 .dropdown-toggle {
    12   // The caret makes the toggle a bit too tall in IE7
    13   *margin-bottom: -3px;
    14 }
    15 .dropdown-toggle:active,
    16 .open .dropdown-toggle {
    17   outline: 0;
    18 }
    19 
    206// Dropdown arrow/caret
    21 // --------------------
    227.caret {
    238  display: inline-block;
    249  width: 0;
    2510  height: 0;
    26   vertical-align: top;
    27   border-top:   4px solid @black;
    28   border-right: 4px solid transparent;
    29   border-left:  4px solid transparent;
    30   content: "";
    31 }
    32 
    33 // Place the caret
    34 .dropdown .caret {
    35   margin-top: 8px;
    3611  margin-left: 2px;
     12  vertical-align: middle;
     13  border-top:   @caret-width-base dashed;
     14  border-top:   @caret-width-base solid ~"\9"; // IE8
     15  border-right: @caret-width-base solid transparent;
     16  border-left:  @caret-width-base solid transparent;
     17}
     18
     19// The dropdown wrapper (div)
     20.dropup,
     21.dropdown {
     22  position: relative;
     23}
     24
     25// Prevent the focus on the dropdown toggle when closing dropdowns
     26.dropdown-toggle:focus {
     27  outline: 0;
    3728}
    3829
    3930// The dropdown menu (ul)
    40 // ----------------------
    4131.dropdown-menu {
    4232  position: absolute;
    4333  top: 100%;
    4434  left: 0;
    45   z-index: @zindexDropdown;
     35  z-index: @zindex-dropdown;
    4636  display: none; // none by default, but block on "open" of the menu
    4737  float: left;
     
    5040  margin: 2px 0 0; // override default ul
    5141  list-style: none;
    52   background-color: @dropdownBackground;
    53   border: 1px solid #ccc; // Fallback for IE7-8
    54   border: 1px solid @dropdownBorder;
    55   *border-right-width: 2px;
    56   *border-bottom-width: 2px;
    57   .border-radius(6px);
    58   .box-shadow(0 5px 10px rgba(0,0,0,.2));
    59   -webkit-background-clip: padding-box;
    60      -moz-background-clip: padding;
    61           background-clip: padding-box;
     42  font-size: @font-size-base;
     43  text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
     44  background-color: @dropdown-bg;
     45  border: 1px solid @dropdown-fallback-border; // IE8 fallback
     46  border: 1px solid @dropdown-border;
     47  border-radius: @border-radius-base;
     48  .box-shadow(0 6px 12px rgba(0,0,0,.175));
     49  background-clip: padding-box;
    6250
    6351  // Aligns the dropdown menu to right
     52  //
     53  // Deprecated as of 3.1.0 in favor of `.dropdown-menu-[dir]`
    6454  &.pull-right {
    6555    right: 0;
     
    6959  // Dividers (basically an hr) within the dropdown
    7060  .divider {
    71     .nav-divider(@dropdownDividerTop, @dropdownDividerBottom);
     61    .nav-divider(@dropdown-divider-bg);
    7262  }
    7363
     
    7868    clear: both;
    7969    font-weight: normal;
    80     line-height: @baseLineHeight;
    81     color: @dropdownLinkColor;
    82     white-space: nowrap;
     70    line-height: @line-height-base;
     71    color: @dropdown-link-color;
     72    white-space: nowrap; // prevent links from randomly breaking onto new lines
    8373  }
    8474}
    8575
    8676// Hover/Focus state
    87 // -----------
    88 .dropdown-menu > li > a:hover,
    89 .dropdown-menu > li > a:focus,
    90 .dropdown-submenu:hover > a,
    91 .dropdown-submenu:focus > a {
    92   text-decoration: none;
    93   color: @dropdownLinkColorHover;
    94   #gradient > .vertical(@dropdownLinkBackgroundHover, darken(@dropdownLinkBackgroundHover, 5%));
     77.dropdown-menu > li > a {
     78  &:hover,
     79  &:focus {
     80    text-decoration: none;
     81    color: @dropdown-link-hover-color;
     82    background-color: @dropdown-link-hover-bg;
     83  }
    9584}
    9685
    9786// Active state
    98 // ------------
    99 .dropdown-menu > .active > a,
    100 .dropdown-menu > .active > a:hover,
    101 .dropdown-menu > .active > a:focus {
    102   color: @dropdownLinkColorActive;
    103   text-decoration: none;
    104   outline: 0;
    105   #gradient > .vertical(@dropdownLinkBackgroundActive, darken(@dropdownLinkBackgroundActive, 5%));
     87.dropdown-menu > .active > a {
     88  &,
     89  &:hover,
     90  &:focus {
     91    color: @dropdown-link-active-color;
     92    text-decoration: none;
     93    outline: 0;
     94    background-color: @dropdown-link-active-bg;
     95  }
    10696}
    10797
    10898// Disabled state
    109 // --------------
     99//
    110100// Gray out text and ensure the hover/focus state remains gray
    111 .dropdown-menu > .disabled > a,
    112 .dropdown-menu > .disabled > a:hover,
    113 .dropdown-menu > .disabled > a:focus {
    114   color: @grayLight;
    115 }
    116 // Nuke hover/focus effects
    117 .dropdown-menu > .disabled > a:hover,
    118 .dropdown-menu > .disabled > a:focus {
    119   text-decoration: none;
    120   background-color: transparent;
    121   background-image: none; // Remove CSS gradient
    122   .reset-filter();
    123   cursor: default;
     101
     102.dropdown-menu > .disabled > a {
     103  &,
     104  &:hover,
     105  &:focus {
     106    color: @dropdown-link-disabled-color;
     107  }
     108
     109  // Nuke hover/focus effects
     110  &:hover,
     111  &:focus {
     112    text-decoration: none;
     113    background-color: transparent;
     114    background-image: none; // Remove CSS gradient
     115    .reset-filter();
     116    cursor: @cursor-disabled;
     117  }
    124118}
    125119
    126120// Open state for the dropdown
    127 // ---------------------------
    128121.open {
    129   // IE7's z-index only goes to the nearest positioned ancestor, which would
    130   // make the menu appear below buttons that appeared later on the page
    131   *z-index: @zindexDropdown;
    132 
    133   & > .dropdown-menu {
     122  // Show the menu
     123  > .dropdown-menu {
    134124    display: block;
    135125  }
     126
     127  // Remove the outline when :focus is triggered
     128  > a {
     129    outline: 0;
     130  }
     131}
     132
     133// Menu positioning
     134//
     135// Add extra class to `.dropdown-menu` to flip the alignment of the dropdown
     136// menu with the parent.
     137.dropdown-menu-right {
     138  left: auto; // Reset the default from `.dropdown-menu`
     139  right: 0;
     140}
     141// With v3, we enabled auto-flipping if you have a dropdown within a right
     142// aligned nav component. To enable the undoing of that, we provide an override
     143// to restore the default dropdown menu alignment.
     144//
     145// This is only for left-aligning a dropdown menu within a `.navbar-right` or
     146// `.pull-right` nav component.
     147.dropdown-menu-left {
     148  left: 0;
     149  right: auto;
     150}
     151
     152// Dropdown section headers
     153.dropdown-header {
     154  display: block;
     155  padding: 3px 20px;
     156  font-size: @font-size-small;
     157  line-height: @line-height-base;
     158  color: @dropdown-header-color;
     159  white-space: nowrap; // as with > li > a
    136160}
    137161
    138162// Backdrop to catch body clicks on mobile, etc.
    139 // ---------------------------
    140163.dropdown-backdrop {
    141164  position: fixed;
     
    144167  bottom: 0;
    145168  top: 0;
    146   z-index: @zindexDropdown - 10;
     169  z-index: (@zindex-dropdown - 10);
    147170}
    148171
    149172// Right aligned dropdowns
    150 // ---------------------------
    151173.pull-right > .dropdown-menu {
    152174  right: 0;
     
    155177
    156178// Allow for dropdowns to go bottom up (aka, dropup-menu)
    157 // ------------------------------------------------------
     179//
    158180// Just add .dropup after the standard .dropdown class and you're set, bro.
    159181// TODO: abstract this so that the navbar fixed styles are not placed here?
     182
    160183.dropup,
    161184.navbar-fixed-bottom .dropdown {
     
    163186  .caret {
    164187    border-top: 0;
    165     border-bottom: 4px solid @black;
     188    border-bottom: @caret-width-base dashed;
     189    border-bottom: @caret-width-base solid ~"\9"; // IE8
    166190    content: "";
    167191  }
     
    170194    top: auto;
    171195    bottom: 100%;
    172     margin-bottom: 1px;
    173   }
    174 }
    175 
    176 // Sub menus
    177 // ---------------------------
    178 .dropdown-submenu {
    179   position: relative;
    180 }
    181 // Default dropdowns
    182 .dropdown-submenu > .dropdown-menu {
    183   top: 0;
    184   left: 100%;
    185   margin-top: -6px;
    186   margin-left: -1px;
    187   .border-radius(0 6px 6px 6px);
    188 }
    189 .dropdown-submenu:hover > .dropdown-menu {
    190   display: block;
    191 }
    192 
    193 // Dropups
    194 .dropup .dropdown-submenu > .dropdown-menu {
    195   top: auto;
    196   bottom: 0;
    197   margin-top: 0;
    198   margin-bottom: -2px;
    199   .border-radius(5px 5px 5px 0);
    200 }
    201 
    202 // Caret to indicate there is a submenu
    203 .dropdown-submenu > a:after {
    204   display: block;
    205   content: " ";
    206   float: right;
    207   width: 0;
    208   height: 0;
    209   border-color: transparent;
    210   border-style: solid;
    211   border-width: 5px 0 5px 5px;
    212   border-left-color: darken(@dropdownBackground, 20%);
    213   margin-top: 5px;
    214   margin-right: -10px;
    215 }
    216 .dropdown-submenu:hover > a:after {
    217   border-left-color: @dropdownLinkColorHover;
    218 }
    219 
    220 // Left aligned submenus
    221 .dropdown-submenu.pull-left {
    222   // Undo the float
    223   // Yes, this is awkward since .pull-left adds a float, but it sticks to our conventions elsewhere.
    224   float: none;
    225 
    226   // Positioning the submenu
    227   > .dropdown-menu {
    228     left: -100%;
    229     margin-left: 10px;
    230     .border-radius(6px 0 6px 6px);
    231   }
    232 }
    233 
    234 // Tweak nav headers
    235 // -----------------
    236 // Increase padding from 15px to 20px on sides
    237 .dropdown .dropdown-menu .nav-header {
    238   padding-left: 20px;
    239   padding-right: 20px;
    240 }
    241 
    242 // Typeahead
    243 // ---------
    244 .typeahead {
    245   z-index: 1051;
    246   margin-top: 2px; // give it some space to breathe
    247   .border-radius(@baseBorderRadius);
    248 }
     196    margin-bottom: 2px;
     197  }
     198}
     199
     200
     201// Component alignment
     202//
     203// Reiterate per navbar.less and the modified component alignment there.
     204
     205@media (min-width: @grid-float-breakpoint) {
     206  .navbar-right {
     207    .dropdown-menu {
     208      .dropdown-menu-right();
     209    }
     210    // Necessary for overrides of the default right aligned menu.
     211    // Will remove come v4 in all likelihood.
     212    .dropdown-menu-left {
     213      .dropdown-menu-left();
     214    }
     215  }
     216}
  • _plugins_/bootstrap/trunk/bootstrap/css/forms.less

    r70593 r90741  
    44
    55
    6 // GENERAL STYLES
    7 // --------------
    8 
    9 // Make all forms have space below them
    10 form {
    11   margin: 0 0 @baseLineHeight;
    12 }
     6// Normalize non-controls
     7//
     8// Restyle and baseline non-control form elements.
    139
    1410fieldset {
     
    1612  margin: 0;
    1713  border: 0;
    18 }
    19 
    20 // Groups of fields with labels on top (legends)
     14  // Chrome and Firefox set a `min-width: min-content;` on fieldsets,
     15  // so we reset that to ensure it behaves more like a standard block element.
     16  // See https://github.com/twbs/bootstrap/issues/12359.
     17  min-width: 0;
     18}
     19
    2120legend {
    2221  display: block;
    2322  width: 100%;
    2423  padding: 0;
    25   margin-bottom: @baseLineHeight;
    26   font-size: @baseFontSize * 1.5;
    27   line-height: @baseLineHeight * 2;
    28   color: @grayDark;
     24  margin-bottom: @line-height-computed;
     25  font-size: (@font-size-base * 1.5);
     26  line-height: inherit;
     27  color: @legend-color;
    2928  border: 0;
    30   border-bottom: 1px solid #e5e5e5;
    31 
    32   // Small
    33   small {
    34     font-size: @baseLineHeight * .75;
    35     color: @grayLight;
    36   }
    37 }
    38 
    39 // Set font for forms
    40 label,
    41 input,
    42 button,
    43 select,
    44 textarea {
    45   #font > .shorthand(@baseFontSize,normal,@baseLineHeight); // Set size, weight, line-height here
    46 }
    47 input,
    48 button,
    49 select,
    50 textarea {
    51   font-family: @baseFontFamily; // And only set font-family here for those that need it (note the missing label element)
    52 }
    53 
    54 // Identify controls by their labels
     29  border-bottom: 1px solid @legend-border-color;
     30}
     31
    5532label {
    56   display: block;
     33  display: inline-block;
     34  max-width: 100%; // Force IE8 to wrap long content (see https://github.com/twbs/bootstrap/issues/13141)
    5735  margin-bottom: 5px;
    58 }
    59 
    60 // Form controls
    61 // -------------------------
    62 
    63 // Shared size and type resets
    64 select,
    65 textarea,
    66 input[type="text"],
    67 input[type="password"],
    68 input[type="datetime"],
    69 input[type="datetime-local"],
    70 input[type="date"],
    71 input[type="month"],
    72 input[type="time"],
    73 input[type="week"],
    74 input[type="number"],
    75 input[type="email"],
    76 input[type="url"],
    77 input[type="search"],
    78 input[type="tel"],
    79 input[type="color"],
    80 .uneditable-input {
    81   display: inline-block;
    82   height: @baseLineHeight;
    83   padding: 4px 6px;
    84   margin-bottom: @baseLineHeight / 2;
    85   font-size: @baseFontSize;
    86   line-height: @baseLineHeight;
    87   color: @gray;
    88   .border-radius(@inputBorderRadius);
    89   vertical-align: middle;
    90 }
    91 
    92 // Reset appearance properties for textual inputs and textarea
    93 // Declare width for legacy (can't be on input[type=*] selectors or it's too specific)
    94 input,
    95 textarea,
    96 .uneditable-input {
    97   width: 206px; // plus 12px padding and 2px border
    98 }
    99 // Reset height since textareas have rows
    100 textarea {
    101   height: auto;
    102 }
    103 // Everything else
    104 textarea,
    105 input[type="text"],
    106 input[type="password"],
    107 input[type="datetime"],
    108 input[type="datetime-local"],
    109 input[type="date"],
    110 input[type="month"],
    111 input[type="time"],
    112 input[type="week"],
    113 input[type="number"],
    114 input[type="email"],
    115 input[type="url"],
    116 input[type="search"],
    117 input[type="tel"],
    118 input[type="color"],
    119 .uneditable-input {
    120   background-color: @inputBackground;
    121   border: 1px solid @inputBorder;
    122   .box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
    123   .transition(~"border linear .2s, box-shadow linear .2s");
    124 
    125   // Focus state
    126   &:focus {
    127     border-color: rgba(82,168,236,.8);
    128     outline: 0;
    129     outline: thin dotted \9; /* IE6-9 */
    130     .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)");
    131   }
     36  font-weight: bold;
     37}
     38
     39
     40// Normalize form controls
     41//
     42// While most of our form styles require extra classes, some basic normalization
     43// is required to ensure optimum display with or without those classes to better
     44// address browser inconsistencies.
     45
     46// Override content-box in Normalize (* isn't specific enough)
     47input[type="search"] {
     48  .box-sizing(border-box);
    13249}
    13350
     
    13653input[type="checkbox"] {
    13754  margin: 4px 0 0;
    138   *margin-top: 0; /* IE7 */
    139   margin-top: 1px \9; /* IE8-9 */
     55  margin-top: 1px \9; // IE8-9
    14056  line-height: normal;
    14157}
    14258
    143 // Reset width of input images, buttons, radios, checkboxes
    144 input[type="file"],
    145 input[type="image"],
    146 input[type="submit"],
    147 input[type="reset"],
    148 input[type="button"],
    149 input[type="radio"],
    150 input[type="checkbox"] {
    151   width: auto; // Override of generic input selector
    152 }
    153 
    154 // Set the height of select and file controls to match text inputs
    155 select,
    15659input[type="file"] {
    157   height: @inputHeight; /* In IE7, the height of the select element cannot be changed by height, only font-size */
    158   *margin-top: 4px; /* For IE7, add top margin to align select with labels */
    159   line-height: @inputHeight;
    160 }
    161 
    162 // Make select elements obey height by applying a border
    163 select {
    164   width: 220px; // default input width + 10px of padding that doesn't get applied
    165   border: 1px solid @inputBorder;
    166   background-color: @inputBackground; // Chrome on Linux and Mobile Safari need background-color
     60  display: block;
     61}
     62
     63// Make range inputs behave like textual form controls
     64input[type="range"] {
     65  display: block;
     66  width: 100%;
    16767}
    16868
     
    17373}
    17474
    175 // Focus for select, file, radio, and checkbox
    176 select:focus,
     75// Focus for file, radio, and checkbox
    17776input[type="file"]:focus,
    17877input[type="radio"]:focus,
     
    18180}
    18281
    183 
    184 // Uneditable inputs
    185 // -------------------------
    186 
    187 // Make uneditable inputs look inactive
    188 .uneditable-input,
    189 .uneditable-textarea {
    190   color: @grayLight;
    191   background-color: darken(@inputBackground, 1%);
    192   border-color: @inputBorder;
    193   .box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
    194   cursor: not-allowed;
    195 }
    196 
    197 // For text that needs to appear as an input but should not be an input
    198 .uneditable-input {
    199   overflow: hidden; // prevent text from wrapping, but still cut it off like an input does
    200   white-space: nowrap;
    201 }
    202 
    203 // Make uneditable textareas behave like a textarea
    204 .uneditable-textarea {
    205   width: auto;
    206   height: auto;
    207 }
    208 
    209 
    210 // Placeholder
    211 // -------------------------
    212 
    213 // Placeholder text gets special styles because when browsers invalidate entire lines if it doesn't understand a selector
    214 input,
    215 textarea {
     82// Adjust output element
     83output {
     84  display: block;
     85  padding-top: (@padding-base-vertical + 1);
     86  font-size: @font-size-base;
     87  line-height: @line-height-base;
     88  color: @input-color;
     89}
     90
     91
     92// Common form controls
     93//
     94// Shared size and type resets for form controls. Apply `.form-control` to any
     95// of the following form controls:
     96//
     97// select
     98// textarea
     99// input[type="text"]
     100// input[type="password"]
     101// input[type="datetime"]
     102// input[type="datetime-local"]
     103// input[type="date"]
     104// input[type="month"]
     105// input[type="time"]
     106// input[type="week"]
     107// input[type="number"]
     108// input[type="email"]
     109// input[type="url"]
     110// input[type="search"]
     111// input[type="tel"]
     112// input[type="color"]
     113
     114.form-control {
     115  display: block;
     116  width: 100%;
     117  height: @input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
     118  padding: @padding-base-vertical @padding-base-horizontal;
     119  font-size: @font-size-base;
     120  line-height: @line-height-base;
     121  color: @input-color;
     122  background-color: @input-bg;
     123  background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
     124  border: 1px solid @input-border;
     125  border-radius: @input-border-radius; // Note: This has no effect on <select>s in some browsers, due to the limited stylability of <select>s in CSS.
     126  .box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
     127  .transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s");
     128
     129  // Customize the `:focus` state to imitate native WebKit styles.
     130  .form-control-focus();
     131
     132  // Placeholder
    216133  .placeholder();
    217 }
    218 
    219 
    220 // CHECKBOXES & RADIOS
    221 // -------------------
    222 
    223 // Indent the labels to position radios/checkboxes as hanging
     134
     135  // Disabled and read-only inputs
     136  //
     137  // HTML5 says that controls under a fieldset > legend:first-child won't be
     138  // disabled if the fieldset is disabled. Due to implementation difficulty, we
     139  // don't honor that edge case; we style them as disabled anyway.
     140  &[disabled],
     141  &[readonly],
     142  fieldset[disabled] & {
     143    background-color: @input-bg-disabled;
     144    opacity: 1; // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655
     145  }
     146
     147  &[disabled],
     148  fieldset[disabled] & {
     149    cursor: @cursor-disabled;
     150  }
     151
     152  // Reset height for `textarea`s
     153  textarea& {
     154    height: auto;
     155  }
     156}
     157
     158
     159// Search inputs in iOS
     160//
     161// This overrides the extra rounded corners on search inputs in iOS so that our
     162// `.form-control` class can properly style them. Note that this cannot simply
     163// be added to `.form-control` as it's not specific enough. For details, see
     164// https://github.com/twbs/bootstrap/issues/11586.
     165
     166input[type="search"] {
     167  -webkit-appearance: none;
     168}
     169
     170
     171// Special styles for iOS temporal inputs
     172//
     173// In Mobile Safari, setting `display: block` on temporal inputs causes the
     174// text within the input to become vertically misaligned. As a workaround, we
     175// set a pixel line-height that matches the given height of the input, but only
     176// for Safari. See https://bugs.webkit.org/show_bug.cgi?id=139848
     177//
     178// Note that as of 8.3, iOS doesn't support `datetime` or `week`.
     179
     180@media screen and (-webkit-min-device-pixel-ratio: 0) {
     181  input[type="date"],
     182  input[type="time"],
     183  input[type="datetime-local"],
     184  input[type="month"] {
     185    &.form-control {
     186      line-height: @input-height-base;
     187    }
     188
     189    &.input-sm,
     190    .input-group-sm & {
     191      line-height: @input-height-small;
     192    }
     193
     194    &.input-lg,
     195    .input-group-lg & {
     196      line-height: @input-height-large;
     197    }
     198  }
     199}
     200
     201
     202// Form groups
     203//
     204// Designed to help with the organization and spacing of vertical forms. For
     205// horizontal forms, use the predefined grid classes.
     206
     207.form-group {
     208  margin-bottom: @form-group-margin-bottom;
     209}
     210
     211
     212// Checkboxes and radios
     213//
     214// Indent the labels to position radios/checkboxes as hanging controls.
     215
    224216.radio,
    225217.checkbox {
    226   min-height: @baseLineHeight; // clear the floating input if there is no label text
     218  position: relative;
     219  display: block;
     220  margin-top: 10px;
     221  margin-bottom: 10px;
     222
     223  label {
     224    min-height: @line-height-computed; // Ensure the input doesn't jump when there is no text
     225    padding-left: 20px;
     226    margin-bottom: 0;
     227    font-weight: normal;
     228    cursor: pointer;
     229  }
     230}
     231.radio input[type="radio"],
     232.radio-inline input[type="radio"],
     233.checkbox input[type="checkbox"],
     234.checkbox-inline input[type="checkbox"] {
     235  position: absolute;
     236  margin-left: -20px;
     237  margin-top: 4px \9;
     238}
     239
     240.radio + .radio,
     241.checkbox + .checkbox {
     242  margin-top: -5px; // Move up sibling radios or checkboxes for tighter spacing
     243}
     244
     245// Radios and checkboxes on same line
     246.radio-inline,
     247.checkbox-inline {
     248  position: relative;
     249  display: inline-block;
    227250  padding-left: 20px;
    228 }
    229 .radio input[type="radio"],
    230 .checkbox input[type="checkbox"] {
    231   float: left;
    232   margin-left: -20px;
    233 }
    234 
    235 // Move the options list down to align with labels
    236 .controls > .radio:first-child,
    237 .controls > .checkbox:first-child {
    238   padding-top: 5px; // has to be padding because margin collaspes
    239 }
    240 
    241 // Radios and checkboxes on same line
    242 // TODO v3: Convert .inline to .control-inline
    243 .radio.inline,
    244 .checkbox.inline {
    245   display: inline-block;
    246   padding-top: 5px;
    247251  margin-bottom: 0;
    248252  vertical-align: middle;
    249 }
    250 .radio.inline + .radio.inline,
    251 .checkbox.inline + .checkbox.inline {
     253  font-weight: normal;
     254  cursor: pointer;
     255}
     256.radio-inline + .radio-inline,
     257.checkbox-inline + .checkbox-inline {
     258  margin-top: 0;
    252259  margin-left: 10px; // space out consecutive inline controls
    253260}
    254261
    255 
    256 
    257 // INPUT SIZES
    258 // -----------
    259 
    260 // General classes for quick sizes
    261 .input-mini       { width: 60px; }
    262 .input-small      { width: 90px; }
    263 .input-medium     { width: 150px; }
    264 .input-large      { width: 210px; }
    265 .input-xlarge     { width: 270px; }
    266 .input-xxlarge    { width: 530px; }
    267 
    268 // Grid style input sizes
    269 input[class*="span"],
    270 select[class*="span"],
    271 textarea[class*="span"],
    272 .uneditable-input[class*="span"],
    273 // Redeclare since the fluid row class is more specific
    274 .row-fluid input[class*="span"],
    275 .row-fluid select[class*="span"],
    276 .row-fluid textarea[class*="span"],
    277 .row-fluid .uneditable-input[class*="span"] {
    278   float: none;
    279   margin-left: 0;
    280 }
    281 // Ensure input-prepend/append never wraps
    282 .input-append input[class*="span"],
    283 .input-append .uneditable-input[class*="span"],
    284 .input-prepend input[class*="span"],
    285 .input-prepend .uneditable-input[class*="span"],
    286 .row-fluid input[class*="span"],
    287 .row-fluid select[class*="span"],
    288 .row-fluid textarea[class*="span"],
    289 .row-fluid .uneditable-input[class*="span"],
    290 .row-fluid .input-prepend [class*="span"],
    291 .row-fluid .input-append [class*="span"] {
    292   display: inline-block;
    293 }
    294 
    295 
    296 
    297 // GRID SIZING FOR INPUTS
    298 // ----------------------
    299 
    300 // Grid sizes
    301 #grid > .input(@gridColumnWidth, @gridGutterWidth);
    302 
    303 // Control row for multiple inputs per line
    304 .controls-row {
    305   .clearfix(); // Clear the float from controls
    306 }
    307 
    308 // Float to collapse white-space for proper grid alignment
    309 .controls-row [class*="span"],
    310 // Redeclare the fluid grid collapse since we undo the float for inputs
    311 .row-fluid .controls-row [class*="span"] {
    312   float: left;
    313 }
    314 // Explicity set top padding on all checkboxes/radios, not just first-child
    315 .controls-row .checkbox[class*="span"],
    316 .controls-row .radio[class*="span"] {
    317   padding-top: 5px;
    318 }
    319 
    320 
    321 
    322 
    323 // DISABLED STATE
    324 // --------------
    325 
    326 // Disabled and read-only inputs
    327 input[disabled],
    328 select[disabled],
    329 textarea[disabled],
    330 input[readonly],
    331 select[readonly],
    332 textarea[readonly] {
    333   cursor: not-allowed;
    334   background-color: @inputDisabledBackground;
    335 }
    336 // Explicitly reset the colors here
    337 input[type="radio"][disabled],
    338 input[type="checkbox"][disabled],
    339 input[type="radio"][readonly],
    340 input[type="checkbox"][readonly] {
    341   background-color: transparent;
    342 }
    343 
    344 
    345 
    346 
    347 // FORM FIELD FEEDBACK STATES
    348 // --------------------------
    349 
    350 // Warning
    351 .control-group.warning {
    352   .formFieldState(@warningText, @warningText, @warningBackground);
    353 }
    354 // Error
    355 .control-group.error {
    356   .formFieldState(@errorText, @errorText, @errorBackground);
    357 }
    358 // Success
    359 .control-group.success {
    360   .formFieldState(@successText, @successText, @successBackground);
    361 }
    362 // Success
    363 .control-group.info {
    364   .formFieldState(@infoText, @infoText, @infoBackground);
    365 }
    366 
    367 // HTML5 invalid states
    368 // Shares styles with the .control-group.error above
    369 input:focus:invalid,
    370 textarea:focus:invalid,
    371 select:focus:invalid {
    372   color: #b94a48;
    373   border-color: #ee5f5b;
    374   &:focus {
    375     border-color: darken(#ee5f5b, 10%);
    376     @shadow: 0 0 6px lighten(#ee5f5b, 20%);
    377     .box-shadow(@shadow);
    378   }
    379 }
    380 
    381 
    382 
    383 // FORM ACTIONS
    384 // ------------
    385 
    386 .form-actions {
    387   padding: (@baseLineHeight - 1) 20px @baseLineHeight;
    388   margin-top: @baseLineHeight;
    389   margin-bottom: @baseLineHeight;
    390   background-color: @formActionsBackground;
    391   border-top: 1px solid #e5e5e5;
    392   .clearfix(); // Adding clearfix to allow for .pull-right button containers
    393 }
    394 
    395 
    396 
    397 // HELP TEXT
    398 // ---------
    399 
    400 .help-block,
    401 .help-inline {
    402   color: lighten(@textColor, 15%); // lighten the text some for contrast
    403 }
     262// Apply same disabled cursor tweak as for inputs
     263// Some special care is needed because <label>s don't inherit their parent's `cursor`.
     264//
     265// Note: Neither radios nor checkboxes can be readonly.
     266input[type="radio"],
     267input[type="checkbox"] {
     268  &[disabled],
     269  &.disabled,
     270  fieldset[disabled] & {
     271    cursor: @cursor-disabled;
     272  }
     273}
     274// These classes are used directly on <label>s
     275.radio-inline,
     276.checkbox-inline {
     277  &.disabled,
     278  fieldset[disabled] & {
     279    cursor: @cursor-disabled;
     280  }
     281}
     282// These classes are used on elements with <label> descendants
     283.radio,
     284.checkbox {
     285  &.disabled,
     286  fieldset[disabled] & {
     287    label {
     288      cursor: @cursor-disabled;
     289    }
     290  }
     291}
     292
     293
     294// Static form control text
     295//
     296// Apply class to a `p` element to make any string of text align with labels in
     297// a horizontal form layout.
     298
     299.form-control-static {
     300  // Size it appropriately next to real form controls
     301  padding-top: (@padding-base-vertical + 1);
     302  padding-bottom: (@padding-base-vertical + 1);
     303  // Remove default margin from `p`
     304  margin-bottom: 0;
     305  min-height: (@line-height-computed + @font-size-base);
     306
     307  &.input-lg,
     308  &.input-sm {
     309    padding-left: 0;
     310    padding-right: 0;
     311  }
     312}
     313
     314
     315// Form control sizing
     316//
     317// Build on `.form-control` with modifier classes to decrease or increase the
     318// height and font-size of form controls.
     319//
     320// The `.form-group-* form-control` variations are sadly duplicated to avoid the
     321// issue documented in https://github.com/twbs/bootstrap/issues/15074.
     322
     323.input-sm {
     324  .input-size(@input-height-small; @padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @input-border-radius-small);
     325}
     326.form-group-sm {
     327  .form-control {
     328    height: @input-height-small;
     329    padding: @padding-small-vertical @padding-small-horizontal;
     330    font-size: @font-size-small;
     331    line-height: @line-height-small;
     332    border-radius: @input-border-radius-small;
     333  }
     334  select.form-control {
     335    height: @input-height-small;
     336    line-height: @input-height-small;
     337  }
     338  textarea.form-control,
     339  select[multiple].form-control {
     340    height: auto;
     341  }
     342  .form-control-static {
     343    height: @input-height-small;
     344    min-height: (@line-height-computed + @font-size-small);
     345    padding: (@padding-small-vertical + 1) @padding-small-horizontal;
     346    font-size: @font-size-small;
     347    line-height: @line-height-small;
     348  }
     349}
     350
     351.input-lg {
     352  .input-size(@input-height-large; @padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @input-border-radius-large);
     353}
     354.form-group-lg {
     355  .form-control {
     356    height: @input-height-large;
     357    padding: @padding-large-vertical @padding-large-horizontal;
     358    font-size: @font-size-large;
     359    line-height: @line-height-large;
     360    border-radius: @input-border-radius-large;
     361  }
     362  select.form-control {
     363    height: @input-height-large;
     364    line-height: @input-height-large;
     365  }
     366  textarea.form-control,
     367  select[multiple].form-control {
     368    height: auto;
     369  }
     370  .form-control-static {
     371    height: @input-height-large;
     372    min-height: (@line-height-computed + @font-size-large);
     373    padding: (@padding-large-vertical + 1) @padding-large-horizontal;
     374    font-size: @font-size-large;
     375    line-height: @line-height-large;
     376  }
     377}
     378
     379
     380// Form control feedback states
     381//
     382// Apply contextual and semantic states to individual form controls.
     383
     384.has-feedback {
     385  // Enable absolute positioning
     386  position: relative;
     387
     388  // Ensure icons don't overlap text
     389  .form-control {
     390    padding-right: (@input-height-base * 1.25);
     391  }
     392}
     393// Feedback icon (requires .glyphicon classes)
     394.form-control-feedback {
     395  position: absolute;
     396  top: 0;
     397  right: 0;
     398  z-index: 2; // Ensure icon is above input groups
     399  display: block;
     400  width: @input-height-base;
     401  height: @input-height-base;
     402  line-height: @input-height-base;
     403  text-align: center;
     404  pointer-events: none;
     405}
     406.input-lg + .form-control-feedback,
     407.input-group-lg + .form-control-feedback,
     408.form-group-lg .form-control + .form-control-feedback {
     409  width: @input-height-large;
     410  height: @input-height-large;
     411  line-height: @input-height-large;
     412}
     413.input-sm + .form-control-feedback,
     414.input-group-sm + .form-control-feedback,
     415.form-group-sm .form-control + .form-control-feedback {
     416  width: @input-height-small;
     417  height: @input-height-small;
     418  line-height: @input-height-small;
     419}
     420
     421// Feedback states
     422.has-success {
     423  .form-control-validation(@state-success-text; @state-success-text; @state-success-bg);
     424}
     425.has-warning {
     426  .form-control-validation(@state-warning-text; @state-warning-text; @state-warning-bg);
     427}
     428.has-error {
     429  .form-control-validation(@state-danger-text; @state-danger-text; @state-danger-bg);
     430}
     431
     432// Reposition feedback icon if input has visible label above
     433.has-feedback label {
     434
     435  & ~ .form-control-feedback {
     436     top: (@line-height-computed + 5); // Height of the `label` and its margin
     437  }
     438  &.sr-only ~ .form-control-feedback {
     439     top: 0;
     440  }
     441}
     442
     443
     444// Help text
     445//
     446// Apply to any element you wish to create light text for placement immediately
     447// below a form control. Use for general help, formatting, or instructional text.
    404448
    405449.help-block {
    406450  display: block; // account for any element using help-block
    407   margin-bottom: @baseLineHeight / 2;
    408 }
    409 
    410 .help-inline {
    411   display: inline-block;
    412   .ie7-inline-block();
    413   vertical-align: middle;
    414   padding-left: 5px;
    415 }
    416 
    417 
    418 
    419 // INPUT GROUPS
    420 // ------------
    421 
    422 // Allow us to put symbols and text within the input field for a cleaner look
    423 .input-append,
    424 .input-prepend {
    425   display: inline-block;
    426   margin-bottom: @baseLineHeight / 2;
    427   vertical-align: middle;
    428   font-size: 0; // white space collapse hack
    429   white-space: nowrap; // Prevent span and input from separating
    430 
    431   // Reset the white space collapse hack
    432   input,
    433   select,
    434   .uneditable-input,
    435   .dropdown-menu,
    436   .popover {
    437     font-size: @baseFontSize;
    438   }
    439 
    440   input,
    441   select,
    442   .uneditable-input {
    443     position: relative; // placed here by default so that on :focus we can place the input above the .add-on for full border and box-shadow goodness
    444     margin-bottom: 0; // prevent bottom margin from screwing up alignment in stacked forms
    445     *margin-left: 0;
    446     vertical-align: top;
    447     .border-radius(0 @inputBorderRadius @inputBorderRadius 0);
    448     // Make input on top when focused so blue border and shadow always show
    449     &:focus {
    450       z-index: 2;
    451     }
    452   }
    453   .add-on {
    454     display: inline-block;
    455     width: auto;
    456     height: @baseLineHeight;
    457     min-width: 16px;
    458     padding: 4px 5px;
    459     font-size: @baseFontSize;
    460     font-weight: normal;
    461     line-height: @baseLineHeight;
    462     text-align: center;
    463     text-shadow: 0 1px 0 @white;
    464     background-color: @grayLighter;
    465     border: 1px solid #ccc;
    466   }
    467   .add-on,
    468   .btn,
    469   .btn-group > .dropdown-toggle {
    470     vertical-align: top;
    471     .border-radius(0);
    472   }
    473   .active {
    474     background-color: lighten(@green, 30);
    475     border-color: @green;
    476   }
    477 }
    478 
    479 .input-prepend {
    480   .add-on,
    481   .btn {
    482     margin-right: -1px;
    483   }
    484   .add-on:first-child,
    485   .btn:first-child {
    486     // FYI, `.btn:first-child` accounts for a button group that's prepended
    487     .border-radius(@inputBorderRadius 0 0 @inputBorderRadius);
    488   }
    489 }
    490 
    491 .input-append {
    492   input,
    493   select,
    494   .uneditable-input {
    495     .border-radius(@inputBorderRadius 0 0 @inputBorderRadius);
    496     + .btn-group .btn:last-child {
    497       .border-radius(0 @inputBorderRadius @inputBorderRadius 0);
    498     }
    499   }
    500   .add-on,
    501   .btn,
    502   .btn-group {
    503     margin-left: -1px;
    504   }
    505   .add-on:last-child,
    506   .btn:last-child,
    507   .btn-group:last-child > .dropdown-toggle {
    508     .border-radius(0 @inputBorderRadius @inputBorderRadius 0);
    509   }
    510 }
    511 
    512 // Remove all border-radius for inputs with both prepend and append
    513 .input-prepend.input-append {
    514   input,
    515   select,
    516   .uneditable-input {
    517     .border-radius(0);
    518     + .btn-group .btn {
    519       .border-radius(0 @inputBorderRadius @inputBorderRadius 0);
    520     }
    521   }
    522   .add-on:first-child,
    523   .btn:first-child {
    524     margin-right: -1px;
    525     .border-radius(@inputBorderRadius 0 0 @inputBorderRadius);
    526   }
    527   .add-on:last-child,
    528   .btn:last-child {
    529     margin-left: -1px;
    530     .border-radius(0 @inputBorderRadius @inputBorderRadius 0);
    531   }
    532   .btn-group:first-child {
    533     margin-left: 0;
    534   }
    535 }
    536 
    537 
    538 
    539 
    540 // SEARCH FORM
    541 // -----------
    542 
    543 input.search-query {
    544   padding-right: 14px;
    545   padding-right: 4px \9;
    546   padding-left: 14px;
    547   padding-left: 4px \9; /* IE7-8 doesn't have border-radius, so don't indent the padding */
    548   margin-bottom: 0; // Remove the default margin on all inputs
    549   .border-radius(15px);
    550 }
    551 
    552 /* Allow for input prepend/append in search forms */
    553 .form-search .input-append .search-query,
    554 .form-search .input-prepend .search-query {
    555   .border-radius(0); // Override due to specificity
    556 }
    557 .form-search .input-append .search-query {
    558   .border-radius(14px 0 0 14px);
    559 }
    560 .form-search .input-append .btn {
    561   .border-radius(0 14px 14px 0);
    562 }
    563 .form-search .input-prepend .search-query {
    564   .border-radius(0 14px 14px 0);
    565 }
    566 .form-search .input-prepend .btn {
    567   .border-radius(14px 0 0 14px);
    568 }
    569 
    570 
    571 
    572 
    573 // HORIZONTAL & VERTICAL FORMS
    574 // ---------------------------
    575 
    576 // Common properties
    577 // -----------------
    578 
    579 .form-search,
    580 .form-inline,
     451  margin-top: 5px;
     452  margin-bottom: 10px;
     453  color: lighten(@text-color, 25%); // lighten the text some for contrast
     454}
     455
     456
     457// Inline forms
     458//
     459// Make forms appear inline(-block) by adding the `.form-inline` class. Inline
     460// forms begin stacked on extra small (mobile) devices and then go inline when
     461// viewports reach <768px.
     462//
     463// Requires wrapping inputs and labels with `.form-group` for proper display of
     464// default HTML form controls and our custom form controls (e.g., input groups).
     465//
     466// Heads up! This is mixin-ed into `.navbar-form` in navbars.less.
     467
     468.form-inline {
     469
     470  // Kick in the inline
     471  @media (min-width: @screen-sm-min) {
     472    // Inline-block all the things for "inline"
     473    .form-group {
     474      display: inline-block;
     475      margin-bottom: 0;
     476      vertical-align: middle;
     477    }
     478
     479    // In navbar-form, allow folks to *not* use `.form-group`
     480    .form-control {
     481      display: inline-block;
     482      width: auto; // Prevent labels from stacking above inputs in `.form-group`
     483      vertical-align: middle;
     484    }
     485
     486    // Make static controls behave like regular ones
     487    .form-control-static {
     488      display: inline-block;
     489    }
     490
     491    .input-group {
     492      display: inline-table;
     493      vertical-align: middle;
     494
     495      .input-group-addon,
     496      .input-group-btn,
     497      .form-control {
     498        width: auto;
     499      }
     500    }
     501
     502    // Input groups need that 100% width though
     503    .input-group > .form-control {
     504      width: 100%;
     505    }
     506
     507    .control-label {
     508      margin-bottom: 0;
     509      vertical-align: middle;
     510    }
     511
     512    // Remove default margin on radios/checkboxes that were used for stacking, and
     513    // then undo the floating of radios and checkboxes to match.
     514    .radio,
     515    .checkbox {
     516      display: inline-block;
     517      margin-top: 0;
     518      margin-bottom: 0;
     519      vertical-align: middle;
     520
     521      label {
     522        padding-left: 0;
     523      }
     524    }
     525    .radio input[type="radio"],
     526    .checkbox input[type="checkbox"] {
     527      position: relative;
     528      margin-left: 0;
     529    }
     530
     531    // Re-override the feedback icon.
     532    .has-feedback .form-control-feedback {
     533      top: 0;
     534    }
     535  }
     536}
     537
     538
     539// Horizontal forms
     540//
     541// Horizontal forms are built on grid classes and allow you to create forms with
     542// labels on the left and inputs on the right.
     543
    581544.form-horizontal {
    582   input,
    583   textarea,
    584   select,
    585   .help-inline,
    586   .uneditable-input,
    587   .input-prepend,
    588   .input-append {
    589     display: inline-block;
    590     .ie7-inline-block();
     545
     546  // Consistent vertical alignment of radios and checkboxes
     547  //
     548  // Labels also get some reset styles, but that is scoped to a media query below.
     549  .radio,
     550  .checkbox,
     551  .radio-inline,
     552  .checkbox-inline {
     553    margin-top: 0;
    591554    margin-bottom: 0;
    592     vertical-align: middle;
    593   }
    594   // Re-hide hidden elements due to specifity
    595   .hide {
    596     display: none;
    597   }
    598 }
    599 .form-search label,
    600 .form-inline label,
    601 .form-search .btn-group,
    602 .form-inline .btn-group {
    603   display: inline-block;
    604 }
    605 // Remove margin for input-prepend/-append
    606 .form-search .input-append,
    607 .form-inline .input-append,
    608 .form-search .input-prepend,
    609 .form-inline .input-prepend {
    610   margin-bottom: 0;
    611 }
    612 // Inline checkbox/radio labels (remove padding on left)
    613 .form-search .radio,
    614 .form-search .checkbox,
    615 .form-inline .radio,
    616 .form-inline .checkbox {
    617   padding-left: 0;
    618   margin-bottom: 0;
    619   vertical-align: middle;
    620 }
    621 // Remove float and margin, set to inline-block
    622 .form-search .radio input[type="radio"],
    623 .form-search .checkbox input[type="checkbox"],
    624 .form-inline .radio input[type="radio"],
    625 .form-inline .checkbox input[type="checkbox"] {
    626   float: left;
    627   margin-right: 3px;
    628   margin-left: 0;
    629 }
    630 
    631 
    632 // Margin to space out fieldsets
    633 .control-group {
    634   margin-bottom: @baseLineHeight / 2;
    635 }
    636 
    637 // Legend collapses margin, so next element is responsible for spacing
    638 legend + .control-group {
    639   margin-top: @baseLineHeight;
    640   -webkit-margin-top-collapse: separate;
    641 }
    642 
    643 // Horizontal-specific styles
    644 // --------------------------
    645 
    646 .form-horizontal {
    647   // Increase spacing between groups
    648   .control-group {
    649     margin-bottom: @baseLineHeight;
    650     .clearfix();
    651   }
    652   // Float the labels left
    653   .control-label {
    654     float: left;
    655     width: @horizontalComponentOffset - 20;
    656     padding-top: 5px;
    657     text-align: right;
    658   }
    659   // Move over all input controls and content
    660   .controls {
    661     // Super jank IE7 fix to ensure the inputs in .input-append and input-prepend
    662     // don't inherit the margin of the parent, in this case .controls
    663     *display: inline-block;
    664     *padding-left: 20px;
    665     margin-left: @horizontalComponentOffset;
    666     *margin-left: 0;
    667     &:first-child {
    668       *padding-left: @horizontalComponentOffset;
    669     }
    670   }
    671   // Remove bottom margin on block level help text since that's accounted for on .control-group
    672   .help-block {
    673     margin-bottom: 0;
    674   }
    675   // And apply it only to .help-block instances that follow a form control
    676   input,
    677   select,
    678   textarea,
    679   .uneditable-input,
    680   .input-prepend,
    681   .input-append {
    682     + .help-block {
    683       margin-top: @baseLineHeight / 2;
    684     }
    685   }
    686   // Move over buttons in .form-actions to align with .controls
    687   .form-actions {
    688     padding-left: @horizontalComponentOffset;
    689   }
    690 }
     555    padding-top: (@padding-base-vertical + 1); // Default padding plus a border
     556  }
     557  // Account for padding we're adding to ensure the alignment and of help text
     558  // and other content below items
     559  .radio,
     560  .checkbox {
     561    min-height: (@line-height-computed + (@padding-base-vertical + 1));
     562  }
     563
     564  // Make form groups behave like rows
     565  .form-group {
     566    .make-row();
     567  }
     568
     569  // Reset spacing and right align labels, but scope to media queries so that
     570  // labels on narrow viewports stack the same as a default form example.
     571  @media (min-width: @screen-sm-min) {
     572    .control-label {
     573      text-align: right;
     574      margin-bottom: 0;
     575      padding-top: (@padding-base-vertical + 1); // Default padding plus a border
     576    }
     577  }
     578
     579  // Validation states
     580  //
     581  // Reposition the icon because it's now within a grid column and columns have
     582  // `position: relative;` on them. Also accounts for the grid gutter padding.
     583  .has-feedback .form-control-feedback {
     584    right: floor((@grid-gutter-width / 2));
     585  }
     586
     587  // Form group sizes
     588  //
     589  // Quick utility class for applying `.input-lg` and `.input-sm` styles to the
     590  // inputs and labels within a `.form-group`.
     591  .form-group-lg {
     592    @media (min-width: @screen-sm-min) {
     593      .control-label {
     594        padding-top: ((@padding-large-vertical * @line-height-large) + 1);
     595        font-size: @font-size-large;
     596      }
     597    }
     598  }
     599  .form-group-sm {
     600    @media (min-width: @screen-sm-min) {
     601      .control-label {
     602        padding-top: (@padding-small-vertical + 1);
     603        font-size: @font-size-small;
     604      }
     605    }
     606  }
     607}
  • _plugins_/bootstrap/trunk/bootstrap/css/grid.less

    r66262 r90741  
    44
    55
    6 // Fixed (940px)
    7 #grid > .core(@gridColumnWidth, @gridGutterWidth);
     6// Container widths
     7//
     8// Set the container width, and override it for fixed navbars in media queries.
    89
    9 // Fluid (940px)
    10 #grid > .fluid(@fluidGridColumnWidth, @fluidGridGutterWidth);
     10.container {
     11  .container-fixed();
    1112
    12 // Reset utility classes due to specificity
    13 [class*="span"].hide,
    14 .row-fluid [class*="span"].hide {
    15   display: none;
     13  @media (min-width: @screen-sm-min) {
     14    width: @container-sm;
     15  }
     16  @media (min-width: @screen-md-min) {
     17    width: @container-md;
     18  }
     19  @media (min-width: @screen-lg-min) {
     20    width: @container-lg;
     21  }
    1622}
    1723
    18 [class*="span"].pull-right,
    19 .row-fluid [class*="span"].pull-right {
    20   float: right;
     24
     25// Fluid container
     26//
     27// Utilizes the mixin meant for fixed width containers, but without any defined
     28// width for fluid, full width layouts.
     29
     30.container-fluid {
     31  .container-fixed();
    2132}
     33
     34
     35// Row
     36//
     37// Rows contain and clear the floats of your columns.
     38
     39.row {
     40  .make-row();
     41}
     42
     43
     44// Columns
     45//
     46// Common styles for small and large grid columns
     47
     48.make-grid-columns();
     49
     50
     51// Extra small grid
     52//
     53// Columns, offsets, pushes, and pulls for extra small devices like
     54// smartphones.
     55
     56.make-grid(xs);
     57
     58
     59// Small grid
     60//
     61// Columns, offsets, pushes, and pulls for the small device range, from phones
     62// to tablets.
     63
     64@media (min-width: @screen-sm-min) {
     65  .make-grid(sm);
     66}
     67
     68
     69// Medium grid
     70//
     71// Columns, offsets, pushes, and pulls for the desktop device range.
     72
     73@media (min-width: @screen-md-min) {
     74  .make-grid(md);
     75}
     76
     77
     78// Large grid
     79//
     80// Columns, offsets, pushes, and pulls for the large desktop device range.
     81
     82@media (min-width: @screen-lg-min) {
     83  .make-grid(lg);
     84}
  • _plugins_/bootstrap/trunk/bootstrap/css/media.less

    r70593 r90741  
    1 // Media objects
    2 // Source: http://stubbornella.org/content/?p=497
    3 // --------------------------------------------------
     1.media {
     2  // Proper spacing between instances of .media
     3  margin-top: 15px;
    44
     5  &:first-child {
     6    margin-top: 0;
     7  }
     8}
    59
    6 // Common styles
    7 // -------------------------
    8 
    9 // Clear the floats
    1010.media,
    1111.media-body {
     12  zoom: 1;
    1213  overflow: hidden;
    13   *overflow: visible;
    14   zoom: 1;
    1514}
    1615
    17 // Proper spacing between instances of .media
    18 .media,
    19 .media .media {
    20   margin-top: 15px;
    21 }
    22 .media:first-child {
    23   margin-top: 0;
     16.media-body {
     17  width: 10000px;
    2418}
    2519
    26 // For images and videos, set to block
    2720.media-object {
    2821  display: block;
     22
     23  // Fix collapse in webkit from max-width: 100% and display: table-cell.
     24  &.img-thumbnail {
     25    max-width: none;
     26  }
     27}
     28
     29.media-right,
     30.media > .pull-right {
     31  padding-left: 10px;
     32}
     33
     34.media-left,
     35.media > .pull-left {
     36  padding-right: 10px;
     37}
     38
     39.media-left,
     40.media-right,
     41.media-body {
     42  display: table-cell;
     43  vertical-align: top;
     44}
     45
     46.media-middle {
     47  vertical-align: middle;
     48}
     49
     50.media-bottom {
     51  vertical-align: bottom;
    2952}
    3053
    3154// Reset margins on headings for tighter default spacing
    3255.media-heading {
    33   margin: 0 0 5px;
     56  margin-top: 0;
     57  margin-bottom: 5px;
    3458}
    3559
    36 
    37 // Media image alignment
    38 // -------------------------
    39 
    40 .media > .pull-left {
    41   margin-right: 10px;
    42 }
    43 .media > .pull-right {
    44   margin-left: 10px;
    45 }
    46 
    47 
    4860// Media list variation
    49 // -------------------------
    50 
     61//
    5162// Undo default ul/ol styles
    5263.media-list {
    53   margin-left: 0;
     64  padding-left: 0;
    5465  list-style: none;
    5566}
  • _plugins_/bootstrap/trunk/bootstrap/css/mixins.less

    r87503 r90741  
    1 //
    21// Mixins
    32// --------------------------------------------------
    43
     4// Utilities
     5@import "mixins/hide-text.less";
     6@import "mixins/opacity.less";
     7@import "mixins/image.less";
     8@import "mixins/labels.less";
     9@import "mixins/reset-filter.less";
     10@import "mixins/resize.less";
     11@import "mixins/responsive-visibility.less";
     12@import "mixins/size.less";
     13@import "mixins/tab-focus.less";
     14@import "mixins/reset-text.less";
     15@import "mixins/text-emphasis.less";
     16@import "mixins/text-overflow.less";
     17@import "mixins/vendor-prefixes.less";
    518
    6 // UTILITY MIXINS
    7 // --------------------------------------------------
     19// Components
     20@import "mixins/alerts.less";
     21@import "mixins/buttons.less";
     22@import "mixins/panels.less";
     23@import "mixins/pagination.less";
     24@import "mixins/list-group.less";
     25@import "mixins/nav-divider.less";
     26@import "mixins/forms.less";
     27@import "mixins/progress-bar.less";
     28@import "mixins/table-row.less";
    829
    9 // Clearfix
    10 // --------
    11 // For clearing floats like a boss h5bp.com/q
    12 .clearfix {
    13   *zoom: 1;
    14   &:before,
    15   &:after {
    16     display: table;
    17     content: "";
    18     // Fixes Opera/contenteditable bug:
    19     // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
    20     line-height: 0;
    21   }
    22   &:after {
    23     clear: both;
    24   }
    25 }
     30// Skins
     31@import "mixins/background-variant.less";
     32@import "mixins/border-radius.less";
     33@import "mixins/gradients.less";
    2634
    27 // Webkit-style focus
    28 // ------------------
    29 .tab-focus() {
    30   // Default
    31   outline: thin dotted #333;
    32   // Webkit
    33   outline: 5px auto -webkit-focus-ring-color;
    34   outline-offset: -2px;
    35 }
    36 
    37 // Center-align a block level element
    38 // ----------------------------------
    39 .center-block() {
    40   display: block;
    41   margin-left: auto;
    42   margin-right: auto;
    43 }
    44 
    45 // IE7 inline-block
    46 // ----------------
    47 .ie7-inline-block() {
    48   *display: inline; /* IE7 inline-block hack */
    49   *zoom: 1;
    50 }
    51 
    52 // IE7 likes to collapse whitespace on either side of the inline-block elements.
    53 // Ems because we're attempting to match the width of a space character. Left
    54 // version is for form buttons, which typically come after other elements, and
    55 // right version is for icons, which come before. Applying both is ok, but it will
    56 // mean that space between those elements will be .6em (~2 space characters) in IE7,
    57 // instead of the 1 space in other browsers.
    58 .ie7-restore-left-whitespace() {
    59   *margin-left: .3em;
    60 
    61   &:first-child {
    62     *margin-left: 0;
    63   }
    64 }
    65 
    66 .ie7-restore-right-whitespace() {
    67   *margin-right: .3em;
    68 }
    69 
    70 // Sizing shortcuts
    71 // -------------------------
    72 .size(@height, @width) {
    73   width: @width;
    74   height: @height;
    75 }
    76 .square(@size) {
    77   .size(@size, @size);
    78 }
    79 
    80 // Placeholder text
    81 // -------------------------
    82 .placeholder(@color: @placeholderText) {
    83   &:-moz-placeholder {
    84     color: @color;
    85   }
    86   &:-ms-input-placeholder {
    87     color: @color;
    88   }
    89   &::-webkit-input-placeholder {
    90     color: @color;
    91   }
    92 }
    93 
    94 // Text overflow
    95 // -------------------------
    96 // Requires inline-block or block for proper styling
    97 .text-overflow() {
    98   overflow: hidden;
    99   text-overflow: ellipsis;
    100   white-space: nowrap;
    101 }
    102 
    103 // CSS image replacement
    104 // -------------------------
    105 // Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
    106 .hide-text {
    107   font: 0/0 a;
    108   color: transparent;
    109   text-shadow: none;
    110   background-color: transparent;
    111   border: 0;
    112 }
    113 
    114 
    115 // FONTS
    116 // --------------------------------------------------
    117 
    118 #font {
    119   #family {
    120     .serif() {
    121       font-family: @serifFontFamily;
    122     }
    123     .sans-serif() {
    124       font-family: @sansFontFamily;
    125     }
    126     .monospace() {
    127       font-family: @monoFontFamily;
    128     }
    129   }
    130   .shorthand(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
    131     font-size: @size;
    132     font-weight: @weight;
    133     line-height: @lineHeight;
    134   }
    135   .serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
    136     #font > #family > .serif;
    137     #font > .shorthand(@size, @weight, @lineHeight);
    138   }
    139   .sans-serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
    140     #font > #family > .sans-serif;
    141     #font > .shorthand(@size, @weight, @lineHeight);
    142   }
    143   .monospace(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
    144     #font > #family > .monospace;
    145     #font > .shorthand(@size, @weight, @lineHeight);
    146   }
    147 }
    148 
    149 
    150 // FORMS
    151 // --------------------------------------------------
    152 
    153 // Block level inputs
    154 .input-block-level {
    155   display: block;
    156   width: 100%;
    157   min-height: @inputHeight; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
    158   .box-sizing(border-box); // Makes inputs behave like true block-level elements
    159 }
    160 
    161 
    162 
    163 // Mixin for form field states
    164 .formFieldState(@textColor: #555, @borderColor: #ccc, @backgroundColor: #f5f5f5) {
    165   // Set the text color
    166   .control-label,
    167   .help-block,
    168   .help-inline {
    169     color: @textColor;
    170   }
    171   // Style inputs accordingly
    172   .checkbox,
    173   .radio,
    174   input,
    175   select,
    176   textarea {
    177     color: @textColor;
    178   }
    179   input,
    180   select,
    181   textarea {
    182     border-color: @borderColor;
    183     .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
    184     &:focus {
    185       border-color: darken(@borderColor, 10%);
    186       @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@borderColor, 20%);
    187       .box-shadow(@shadow);
    188     }
    189   }
    190   // Give a small background color for input-prepend/-append
    191   .input-prepend .add-on,
    192   .input-append .add-on {
    193     color: @textColor;
    194     background-color: @backgroundColor;
    195     border-color: @textColor;
    196   }
    197 }
    198 
    199 
    200 
    201 // CSS3 PROPERTIES
    202 // --------------------------------------------------
    203 
    204 // Border Radius
    205 .border-radius(@radius) {
    206   -webkit-border-radius: @radius;
    207      -moz-border-radius: @radius;
    208           border-radius: @radius;
    209 }
    210 
    211 // Single Corner Border Radius
    212 .border-top-left-radius(@radius) {
    213   -webkit-border-top-left-radius: @radius;
    214       -moz-border-radius-topleft: @radius;
    215           border-top-left-radius: @radius;
    216 }
    217 .border-top-right-radius(@radius) {
    218   -webkit-border-top-right-radius: @radius;
    219       -moz-border-radius-topright: @radius;
    220           border-top-right-radius: @radius;
    221 }
    222 .border-bottom-right-radius(@radius) {
    223   -webkit-border-bottom-right-radius: @radius;
    224       -moz-border-radius-bottomright: @radius;
    225           border-bottom-right-radius: @radius;
    226 }
    227 .border-bottom-left-radius(@radius) {
    228   -webkit-border-bottom-left-radius: @radius;
    229       -moz-border-radius-bottomleft: @radius;
    230           border-bottom-left-radius: @radius;
    231 }
    232 
    233 // Single Side Border Radius
    234 .border-top-radius(@radius) {
    235   .border-top-right-radius(@radius);
    236   .border-top-left-radius(@radius);
    237 }
    238 .border-right-radius(@radius) {
    239   .border-top-right-radius(@radius);
    240   .border-bottom-right-radius(@radius);
    241 }
    242 .border-bottom-radius(@radius) {
    243   .border-bottom-right-radius(@radius);
    244   .border-bottom-left-radius(@radius);
    245 }
    246 .border-left-radius(@radius) {
    247   .border-top-left-radius(@radius);
    248   .border-bottom-left-radius(@radius);
    249 }
    250 
    251 // Drop shadows
    252 .box-shadow(@shadow) {
    253   -webkit-box-shadow: @shadow;
    254      -moz-box-shadow: @shadow;
    255           box-shadow: @shadow;
    256 }
    257 
    258 // Transitions
    259 .transition(@transition) {
    260   -webkit-transition: @transition;
    261      -moz-transition: @transition;
    262        -o-transition: @transition;
    263           transition: @transition;
    264 }
    265 .transition-delay(@transition-delay) {
    266   -webkit-transition-delay: @transition-delay;
    267      -moz-transition-delay: @transition-delay;
    268        -o-transition-delay: @transition-delay;
    269           transition-delay: @transition-delay;
    270 }
    271 .transition-duration(@transition-duration) {
    272   -webkit-transition-duration: @transition-duration;
    273      -moz-transition-duration: @transition-duration;
    274        -o-transition-duration: @transition-duration;
    275           transition-duration: @transition-duration;
    276 }
    277 
    278 // Transformations
    279 .rotate(@degrees) {
    280   -webkit-transform: rotate(@degrees);
    281      -moz-transform: rotate(@degrees);
    282       -ms-transform: rotate(@degrees);
    283        -o-transform: rotate(@degrees);
    284           transform: rotate(@degrees);
    285 }
    286 .scale(@ratio) {
    287   -webkit-transform: scale(@ratio);
    288      -moz-transform: scale(@ratio);
    289       -ms-transform: scale(@ratio);
    290        -o-transform: scale(@ratio);
    291           transform: scale(@ratio);
    292 }
    293 .translate(@x, @y) {
    294   -webkit-transform: translate(@x, @y);
    295      -moz-transform: translate(@x, @y);
    296       -ms-transform: translate(@x, @y);
    297        -o-transform: translate(@x, @y);
    298           transform: translate(@x, @y);
    299 }
    300 .skew(@x, @y) {
    301   -webkit-transform: skew(@x, @y);
    302      -moz-transform: skew(@x, @y);
    303       -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885
    304        -o-transform: skew(@x, @y);
    305           transform: skew(@x, @y);
    306   -webkit-backface-visibility: hidden; // See https://github.com/twbs/bootstrap/issues/5319
    307 }
    308 .translate3d(@x, @y, @z) {
    309   -webkit-transform: translate3d(@x, @y, @z);
    310      -moz-transform: translate3d(@x, @y, @z);
    311        -o-transform: translate3d(@x, @y, @z);
    312           transform: translate3d(@x, @y, @z);
    313 }
    314 
    315 // Backface visibility
    316 // Prevent browsers from flickering when using CSS 3D transforms.
    317 // Default value is `visible`, but can be changed to `hidden
    318 // See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples
    319 .backface-visibility(@visibility){
    320         -webkit-backface-visibility: @visibility;
    321            -moz-backface-visibility: @visibility;
    322                 backface-visibility: @visibility;
    323 }
    324 
    325 // Background clipping
    326 // Heads up: FF 3.6 and under need "padding" instead of "padding-box"
    327 .background-clip(@clip) {
    328   -webkit-background-clip: @clip;
    329      -moz-background-clip: @clip;
    330           background-clip: @clip;
    331 }
    332 
    333 // Background sizing
    334 .background-size(@size) {
    335   -webkit-background-size: @size;
    336      -moz-background-size: @size;
    337        -o-background-size: @size;
    338           background-size: @size;
    339 }
    340 
    341 
    342 // Box sizing
    343 .box-sizing(@boxmodel) {
    344   -webkit-box-sizing: @boxmodel;
    345      -moz-box-sizing: @boxmodel;
    346           box-sizing: @boxmodel;
    347 }
    348 
    349 // User select
    350 // For selecting text on the page
    351 .user-select(@select) {
    352   -webkit-user-select: @select;
    353      -moz-user-select: @select;
    354       -ms-user-select: @select;
    355        -o-user-select: @select;
    356           user-select: @select;
    357 }
    358 
    359 // Resize anything
    360 .resizable(@direction) {
    361   resize: @direction; // Options: horizontal, vertical, both
    362   overflow: auto; // Safari fix
    363 }
    364 
    365 // CSS3 Content Columns
    366 .content-columns(@columnCount, @columnGap: @gridGutterWidth) {
    367   -webkit-column-count: @columnCount;
    368      -moz-column-count: @columnCount;
    369           column-count: @columnCount;
    370   -webkit-column-gap: @columnGap;
    371      -moz-column-gap: @columnGap;
    372           column-gap: @columnGap;
    373 }
    374 
    375 // Optional hyphenation
    376 .hyphens(@mode: auto) {
    377   word-wrap: break-word;
    378   -webkit-hyphens: @mode;
    379      -moz-hyphens: @mode;
    380       -ms-hyphens: @mode;
    381        -o-hyphens: @mode;
    382           hyphens: @mode;
    383 }
    384 
    385 // Opacity
    386 .opacity(@opacity) {
    387   opacity: @opacity / 100;
    388   filter: ~"alpha(opacity=@{opacity})";
    389 }
    390 
    391 
    392 
    393 // BACKGROUNDS
    394 // --------------------------------------------------
    395 
    396 // Add an alphatransparency value to any background or border color (via Elyse Holladay)
    397 #translucent {
    398   .background(@color: @white, @alpha: 1) {
    399     background-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
    400   }
    401   .border(@color: @white, @alpha: 1) {
    402     border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
    403     .background-clip(padding-box);
    404   }
    405 }
    406 
    407 // Gradient Bar Colors for buttons and alerts
    408 .gradientBar(@primaryColor, @secondaryColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
    409   color: @textColor;
    410   text-shadow: @textShadow;
    411   #gradient > .vertical(@primaryColor, @secondaryColor);
    412   border-color: @secondaryColor @secondaryColor darken(@secondaryColor, 15%);
    413   border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
    414 }
    415 
    416 // Gradients
    417 #gradient {
    418   .horizontal(@startColor: #555, @endColor: #333) {
    419     background-color: @endColor;
    420     background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+
    421     background-image: -webkit-gradient(linear, 0 0, 100% 0, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
    422     background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
    423     background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
    424     background-image: linear-gradient(to right, @startColor, @endColor); // Standard, IE10
    425     background-repeat: repeat-x;
    426     filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@startColor),argb(@endColor))); // IE9 and down
    427   }
    428   .vertical(@startColor: #555, @endColor: #333) {
    429     background-color: mix(@startColor, @endColor, 60%);
    430     background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
    431     background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
    432     background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
    433     background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
    434     background-image: linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10
    435     background-repeat: repeat-x;
    436     filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down
    437   }
    438   .directional(@startColor: #555, @endColor: #333, @deg: 45deg) {
    439     background-color: @endColor;
    440     background-repeat: repeat-x;
    441     background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+
    442     background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+
    443     background-image: -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10
    444     background-image: linear-gradient(@deg, @startColor, @endColor); // Standard, IE10
    445   }
    446   .horizontal-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
    447     background-color: mix(@midColor, @endColor, 80%);
    448     background-image: -webkit-gradient(left, linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
    449     background-image: -webkit-linear-gradient(left, @startColor, @midColor @colorStop, @endColor);
    450     background-image: -moz-linear-gradient(left, @startColor, @midColor @colorStop, @endColor);
    451     background-image: -o-linear-gradient(left, @startColor, @midColor @colorStop, @endColor);
    452     background-image: linear-gradient(to right, @startColor, @midColor @colorStop, @endColor);
    453     background-repeat: no-repeat;
    454     filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down, gets no color-stop at all for proper fallback
    455   }
    456 
    457   .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
    458     background-color: mix(@midColor, @endColor, 80%);
    459     background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
    460     background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor);
    461     background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop, @endColor);
    462     background-image: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor);
    463     background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor);
    464     background-repeat: no-repeat;
    465     filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down, gets no color-stop at all for proper fallback
    466   }
    467   .radial(@innerColor: #555, @outerColor: #333) {
    468     background-color: @outerColor;
    469     background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@innerColor), to(@outerColor));
    470     background-image: -webkit-radial-gradient(circle, @innerColor, @outerColor);
    471     background-image: -moz-radial-gradient(circle, @innerColor, @outerColor);
    472     background-image: -o-radial-gradient(circle, @innerColor, @outerColor);
    473     background-repeat: no-repeat;
    474   }
    475   .striped(@color: #555, @angle: 45deg) {
    476     background-color: @color;
    477     background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent));
    478     background-image: -webkit-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
    479     background-image: -moz-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
    480     background-image: -o-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
    481     background-image: linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
    482   }
    483 }
    484 // Reset filters for IE
    485 .reset-filter() {
    486   filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
    487 }
    488 
    489 
    490 
    491 // COMPONENT MIXINS
    492 // --------------------------------------------------
    493 
    494 // Horizontal dividers
    495 // -------------------------
    496 // Dividers (basically an hr) within dropdowns and nav lists
    497 .nav-divider(@top: #e5e5e5, @bottom: @white) {
    498   // IE7 needs a set width since we gave a height. Restricting just
    499   // to IE7 to keep the 1px left/right space in other browsers.
    500   // It is unclear where IE is getting the extra space that we need
    501   // to negative-margin away, but so it goes.
    502   *width: 100%;
    503   height: 1px;
    504   margin: ((@baseLineHeight / 2) - 1) 1px; // 8px 1px
    505   *margin: -5px 0 5px;
    506   overflow: hidden;
    507   background-color: @top;
    508   border-bottom: 1px solid @bottom;
    509 }
    510 
    511 // Button backgrounds
    512 // ------------------
    513 .buttonBackground(@startColor, @endColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
    514   // gradientBar will set the background to a pleasing blend of these, to support IE<=9
    515   .gradientBar(@startColor, @endColor, @textColor, @textShadow);
    516   *background-color: @endColor; /* Darken IE7 buttons by default so they stand out more given they won't have borders */
    517   .reset-filter();
    518 
    519   // in these cases the gradient won't cover the background, so we override
    520   &:hover, &:focus, &:active, &.active, &.disabled, &[disabled] {
    521     color: @textColor;
    522     background-color: @endColor;
    523     *background-color: darken(@endColor, 5%);
    524   }
    525 
    526   // IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves
    527   &:active,
    528   &.active {
    529     background-color: darken(@endColor, 10%) e("\9");
    530   }
    531 }
    532 
    533 // Navbar vertical align
    534 // -------------------------
    535 // Vertically center elements in the navbar.
    536 // Example: an element has a height of 30px, so write out `.navbarVerticalAlign(30px);` to calculate the appropriate top margin.
    537 .navbarVerticalAlign(@elementHeight) {
    538   margin-top: (@navbarHeight - @elementHeight) / 2;
    539 }
    540 
    541 
    542 
    543 // Grid System
    544 // -----------
    545 
    546 // Centered container element
    547 .container-fixed() {
    548   margin-right: auto;
    549   margin-left: auto;
    550   .clearfix();
    551 }
    552 
    553 // Table columns
    554 .tableColumns(@columnSpan: 1) {
    555   float: none; // undo default grid column styles
    556   width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 16; // 16 is total padding on left and right of table cells
    557   margin-left: 0; // undo default grid column styles
    558 }
    559 
    560 // Make a Grid
    561 // Use .makeRow and .makeColumn to assign semantic layouts grid system behavior
    562 .makeRow() {
    563   margin-left: @gridGutterWidth * -1;
    564   .clearfix();
    565 }
    566 .makeColumn(@columns: 1, @offset: 0) {
    567   float: left;
    568   margin-left: (@gridColumnWidth * @offset) + (@gridGutterWidth * (@offset - 1)) + (@gridGutterWidth * 2);
    569   width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
    570 }
    571 
    572 // The Grid
    573 #grid {
    574 
    575   .core (@gridColumnWidth, @gridGutterWidth) {
    576 
    577     .spanX (@index) when (@index > 0) {
    578       .span@{index} { .span(@index); }
    579       .spanX(@index - 1);
    580     }
    581     .spanX (0) {}
    582 
    583     .offsetX (@index) when (@index > 0) {
    584       .offset@{index} { .offset(@index); }
    585       .offsetX(@index - 1);
    586     }
    587     .offsetX (0) {}
    588 
    589     .offset (@columns) {
    590       margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns + 1));
    591     }
    592 
    593     .span (@columns) {
    594       width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
    595     }
    596 
    597     .row {
    598       margin-left: @gridGutterWidth * -1;
    599       .clearfix();
    600     }
    601 
    602     [class*="span"] {
    603       float: left;
    604       min-height: 1px; // prevent collapsing columns
    605       margin-left: @gridGutterWidth;
    606     }
    607 
    608     // Set the container width, and override it for fixed navbars in media queries
    609     .container,
    610     .navbar-static-top .container,
    611     .navbar-fixed-top .container,
    612     .navbar-fixed-bottom .container { .span(@gridColumns); }
    613 
    614     // generate .spanX and .offsetX
    615     .spanX (@gridColumns);
    616     .offsetX (@gridColumns);
    617 
    618   }
    619 
    620   .fluid (@fluidGridColumnWidth, @fluidGridGutterWidth) {
    621 
    622     .spanX (@index) when (@index > 0) {
    623       .span@{index} { .span(@index); }
    624       .spanX(@index - 1);
    625     }
    626     .spanX (0) {}
    627 
    628     .offsetX (@index) when (@index > 0) {
    629       .offset@{index} { .offset(@index); }
    630       .offset@{index}:first-child { .offsetFirstChild(@index); }
    631       .offsetX(@index - 1);
    632     }
    633     .offsetX (0) {}
    634 
    635     .offset (@columns) {
    636       margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + (@fluidGridGutterWidth*2);
    637           *margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + (@fluidGridGutterWidth*2) - (.5 / @gridRowWidth * 100 * 1%);
    638     }
    639 
    640     .offsetFirstChild (@columns) {
    641       margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + (@fluidGridGutterWidth);
    642       *margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%);
    643     }
    644 
    645     .span (@columns) {
    646       width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
    647       *width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%);
    648     }
    649 
    650     .row-fluid {
    651       width: 100%;
    652       .clearfix();
    653       [class*="span"] {
    654         .input-block-level();
    655         float: left;
    656         margin-left: @fluidGridGutterWidth;
    657         *margin-left: @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%);
    658       }
    659       [class*="span"]:first-child {
    660         margin-left: 0;
    661       }
    662       /* Fix CM : avoid last block falling when round computation are false by one pixel at the end */
    663       [class*="span"]:last-child {
    664         margin-left: 0;
    665         float:right;
    666       }
    667 
    668       // Space grid-sized controls properly if multiple per line
    669       .controls-row [class*="span"] + [class*="span"] {
    670         margin-left: @fluidGridGutterWidth;
    671       }
    672 
    673       // generate .spanX and .offsetX
    674       .spanX (@gridColumns);
    675       .offsetX (@gridColumns);
    676     }
    677 
    678   }
    679 
    680   .input(@gridColumnWidth, @gridGutterWidth) {
    681 
    682     .spanX (@index) when (@index > 0) {
    683       input.span@{index}, textarea.span@{index}, .uneditable-input.span@{index} { .span(@index); }
    684       .spanX(@index - 1);
    685     }
    686     .spanX (0) {}
    687 
    688     .span(@columns) {
    689       width: ((@gridColumnWidth) * @columns) + (@gridGutterWidth * (@columns - 1)) - 14;
    690     }
    691 
    692     input,
    693     textarea,
    694     .uneditable-input {
    695       margin-left: 0; // override margin-left from core grid system
    696     }
    697 
    698     // Space grid-sized controls properly if multiple per line
    699     .controls-row [class*="span"] + [class*="span"] {
    700       margin-left: @gridGutterWidth;
    701     }
    702 
    703     // generate .spanX
    704     .spanX (@gridColumns);
    705 
    706   }
    707 }
     35// Layout
     36@import "mixins/clearfix.less";
     37@import "mixins/center-block.less";
     38@import "mixins/nav-vertical-align.less";
     39@import "mixins/grid-framework.less";
     40@import "mixins/grid.less";
  • _plugins_/bootstrap/trunk/bootstrap/css/modals.less

    r69198 r90741  
    33// --------------------------------------------------
    44
    5 // Background
     5// .modal-open      - body class for killing the scroll
     6// .modal           - container to scroll within
     7// .modal-dialog    - positioning shell for the actual modal
     8// .modal-content   - actual modal w/ bg and corners and shit
     9
     10// Kill the scroll on the body
     11.modal-open {
     12  overflow: hidden;
     13}
     14
     15// Container that the modal scrolls within
     16.modal {
     17  display: none;
     18  overflow: hidden;
     19  position: fixed;
     20  top: 0;
     21  right: 0;
     22  bottom: 0;
     23  left: 0;
     24  z-index: @zindex-modal;
     25  -webkit-overflow-scrolling: touch;
     26
     27  // Prevent Chrome on Windows from adding a focus outline. For details, see
     28  // https://github.com/twbs/bootstrap/pull/10951.
     29  outline: 0;
     30
     31  // When fading in the modal, animate it to slide down
     32  &.fade .modal-dialog {
     33    .translate(0, -25%);
     34    .transition-transform(~"0.3s ease-out");
     35  }
     36  &.in .modal-dialog { .translate(0, 0) }
     37}
     38.modal-open .modal {
     39  overflow-x: hidden;
     40  overflow-y: auto;
     41}
     42
     43// Shell div to position the modal with bottom padding
     44.modal-dialog {
     45  position: relative;
     46  width: auto;
     47  margin: 10px;
     48}
     49
     50// Actual modal
     51.modal-content {
     52  position: relative;
     53  background-color: @modal-content-bg;
     54  border: 1px solid @modal-content-fallback-border-color; //old browsers fallback (ie8 etc)
     55  border: 1px solid @modal-content-border-color;
     56  border-radius: @border-radius-large;
     57  .box-shadow(0 3px 9px rgba(0,0,0,.5));
     58  background-clip: padding-box;
     59  // Remove focus outline from opened modal
     60  outline: 0;
     61}
     62
     63// Modal background
    664.modal-backdrop {
    765  position: fixed;
     
    1068  bottom: 0;
    1169  left: 0;
    12   z-index: @zindexModalBackdrop;
    13   background-color: @black;
     70  z-index: @zindex-modal-background;
     71  background-color: @modal-backdrop-bg;
    1472  // Fade for backdrop
    15   &.fade { opacity: 0; }
     73  &.fade { .opacity(0); }
     74  &.in { .opacity(@modal-backdrop-opacity); }
    1675}
    1776
    18 .modal-backdrop,
    19 .modal-backdrop.fade.in {
    20   .opacity(80);
     77// Modal header
     78// Top section of the modal w/ title and dismiss
     79.modal-header {
     80  padding: @modal-title-padding;
     81  border-bottom: 1px solid @modal-header-border-color;
     82  min-height: (@modal-title-padding + @modal-title-line-height);
     83}
     84// Close icon
     85.modal-header .close {
     86  margin-top: -2px;
    2187}
    2288
    23 // Base modal
    24 .modal {
    25   position: fixed;
    26   top: 10%;
    27   left: 50%;
    28   z-index: @zindexModal;
    29   width: 560px;
    30   margin-left: -280px;
    31   background-color: @white;
    32   border: 1px solid #999;
    33   border: 1px solid rgba(0,0,0,.3);
    34   *border: 1px solid #999; /* IE6-7 */
    35   .border-radius(6px);
    36   .box-shadow(0 3px 7px rgba(0,0,0,0.3));
    37   .background-clip(padding-box);
    38   // Remove focus outline from opened modal
    39   outline: none;
    40 
    41   &.fade {
    42     .transition(e('opacity .3s linear, top .3s ease-out'));
    43     top: -25%;
    44   }
    45   &.fade.in { top: 10%; }
    46 }
    47 .modal-header {
    48   padding: 9px 15px;
    49   border-bottom: 1px solid #eee;
    50   // Close icon
    51   .close { margin-top: 2px; }
    52   // Heading
    53   h3 {
    54     margin: 0;
    55     line-height: 30px;
    56   }
     89// Title text within header
     90.modal-title {
     91  margin: 0;
     92  line-height: @modal-title-line-height;
    5793}
    5894
    59 // Body (where all modal content resides)
     95// Modal body
     96// Where all modal content resides (sibling of .modal-header and .modal-footer)
    6097.modal-body {
    6198  position: relative;
    62   overflow-y: auto;
    63   max-height: 400px;
    64   padding: 15px;
    65 }
    66 // Remove bottom margin if need be
    67 .modal-form {
    68   margin-bottom: 0;
     99  padding: @modal-inner-padding;
    69100}
    70101
    71102// Footer (for actions)
    72103.modal-footer {
    73   padding: 14px 15px 15px;
    74   margin-bottom: 0;
     104  padding: @modal-inner-padding;
    75105  text-align: right; // right align buttons
    76   background-color: #f5f5f5;
    77   border-top: 1px solid #ddd;
    78   .border-radius(0 0 6px 6px);
    79   .box-shadow(inset 0 1px 0 @white);
    80   .clearfix(); // clear it in case folks use .pull-* classes on buttons
     106  border-top: 1px solid @modal-footer-border-color;
     107  &:extend(.clearfix all); // clear it in case folks use .pull-* classes on buttons
    81108
    82109  // Properly space out buttons
     
    94121  }
    95122}
     123
     124// Measure scrollbar width for padding body during modal show/hide
     125.modal-scrollbar-measure {
     126  position: absolute;
     127  top: -9999px;
     128  width: 50px;
     129  height: 50px;
     130  overflow: scroll;
     131}
     132
     133// Scale up the modal
     134@media (min-width: @screen-sm-min) {
     135  // Automatically set modal's width for larger viewports
     136  .modal-dialog {
     137    width: @modal-md;
     138    margin: 30px auto;
     139  }
     140  .modal-content {
     141    .box-shadow(0 5px 15px rgba(0,0,0,.5));
     142  }
     143
     144  // Modal sizes
     145  .modal-sm { width: @modal-sm; }
     146}
     147
     148@media (min-width: @screen-md-min) {
     149  .modal-lg { width: @modal-lg; }
     150}
  • _plugins_/bootstrap/trunk/bootstrap/css/navbar.less

    r70593 r90741  
    11//
    2 // Navbars (Redux)
     2// Navbars
    33// --------------------------------------------------
    44
    55
    6 // COMMON STYLES
    7 // -------------
    8 
    9 // Base class and wrapper
     6// Wrapper and base class
     7//
     8// Provide a static navbar from which we expand to create full-width, fixed, and
     9// other navbar variations.
     10
    1011.navbar {
    11   overflow: visible;
    12   margin-bottom: @baseLineHeight;
    13 
    14   // Fix for IE7's bad z-indexing so dropdowns don't appear below content that follows the navbar
    15   *position: relative;
    16   *z-index: 2;
    17 }
    18 
    19 // Inner for background effects
    20 // Gradient is applied to its own element because overflow visible is not honored by IE when filter is present
    21 .navbar-inner {
    22   min-height: @navbarHeight;
    23   padding-left:  20px;
    24   padding-right: 20px;
    25   #gradient > .vertical(@navbarBackgroundHighlight, @navbarBackground);
    26   border: 1px solid @navbarBorder;
    27   .border-radius(@baseBorderRadius);
    28   .box-shadow(0 1px 4px rgba(0,0,0,.065));
     12  position: relative;
     13  min-height: @navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode)
     14  margin-bottom: @navbar-margin-bottom;
     15  border: 1px solid transparent;
    2916
    3017  // Prevent floats from breaking the navbar
    31   .clearfix();
    32 }
    33 
    34 // Set width to auto for default container
    35 // We then reset it for fixed navbars in the #gridSystem mixin
    36 .navbar .container {
    37   width: auto;
    38 }
    39 
    40 // Override the default collapsed state
    41 .nav-collapse.collapse {
    42   height: auto;
    43   overflow: visible;
    44 }
    45 
    46 
    47 // Brand: website or project name
    48 // -------------------------
    49 .navbar .brand {
    50   float: left;
    51   display: block;
    52   // Vertically center the text given @navbarHeight
    53   padding: ((@navbarHeight - @baseLineHeight) / 2) 20px ((@navbarHeight - @baseLineHeight) / 2);
    54   margin-left: -20px; // negative indent to left-align the text down the page
    55   font-size: 20px;
    56   font-weight: 200;
    57   color: @navbarBrandColor;
    58   text-shadow: 0 1px 0 @navbarBackgroundHighlight;
    59   &:hover,
    60   &:focus {
    61     text-decoration: none;
    62   }
    63 }
    64 
    65 // Plain text in topbar
    66 // -------------------------
    67 .navbar-text {
    68   margin-bottom: 0;
    69   line-height: @navbarHeight;
    70   color: @navbarText;
    71 }
    72 
    73 // Janky solution for now to account for links outside the .nav
    74 // -------------------------
    75 .navbar-link {
    76   color: @navbarLinkColor;
    77   &:hover,
    78   &:focus {
    79     color: @navbarLinkColorHover;
    80   }
    81 }
    82 
    83 // Dividers in navbar
    84 // -------------------------
    85 .navbar .divider-vertical {
    86   height: @navbarHeight;
    87   margin: 0 9px;
    88   border-left: 1px solid @navbarBackground;
    89   border-right: 1px solid @navbarBackgroundHighlight;
    90 }
    91 
    92 // Buttons in navbar
    93 // -------------------------
    94 .navbar .btn,
    95 .navbar .btn-group {
    96   .navbarVerticalAlign(30px); // Vertically center in navbar
    97 }
    98 .navbar .btn-group .btn,
    99 .navbar .input-prepend .btn,
    100 .navbar .input-append .btn,
    101 .navbar .input-prepend .btn-group,
    102 .navbar .input-append .btn-group {
    103   margin-top: 0; // then undo the margin here so we don't accidentally double it
    104 }
    105 
    106 // Navbar forms
    107 // -------------------------
    108 .navbar-form {
    109   margin-bottom: 0; // remove default bottom margin
    110   .clearfix();
    111   input,
    112   select,
    113   .radio,
    114   .checkbox {
    115     .navbarVerticalAlign(30px); // Vertically center in navbar
    116   }
    117   input,
    118   select,
    119   .btn {
    120     display: inline-block;
    121     margin-bottom: 0;
    122   }
    123   input[type="image"],
    124   input[type="checkbox"],
    125   input[type="radio"] {
    126     margin-top: 3px;
    127   }
    128   .input-append,
    129   .input-prepend {
    130     margin-top: 5px;
    131     white-space: nowrap; // preven two  items from separating within a .navbar-form that has .pull-left
    132     input {
    133       margin-top: 0; // remove the margin on top since it's on the parent
    134     }
    135   }
    136 }
    137 
    138 // Navbar search
    139 // -------------------------
    140 .navbar-search {
    141   position: relative;
    142   float: left;
    143   .navbarVerticalAlign(30px); // Vertically center in navbar
    144   margin-bottom: 0;
    145   .search-query {
    146     margin-bottom: 0;
    147     padding: 4px 14px;
    148     #font > .sans-serif(13px, normal, 1);
    149     .border-radius(15px); // redeclare because of specificity of the type attribute
    150   }
    151 }
    152 
    153 
    154 
    155 // Static navbar
    156 // -------------------------
    157 
     18  &:extend(.clearfix all);
     19
     20  @media (min-width: @grid-float-breakpoint) {
     21    border-radius: @navbar-border-radius;
     22  }
     23}
     24
     25
     26// Navbar heading
     27//
     28// Groups `.navbar-brand` and `.navbar-toggle` into a single component for easy
     29// styling of responsive aspects.
     30
     31.navbar-header {
     32  &:extend(.clearfix all);
     33
     34  @media (min-width: @grid-float-breakpoint) {
     35    float: left;
     36  }
     37}
     38
     39
     40// Navbar collapse (body)
     41//
     42// Group your navbar content into this for easy collapsing and expanding across
     43// various device sizes. By default, this content is collapsed when <768px, but
     44// will expand past that for a horizontal display.
     45//
     46// To start (on mobile devices) the navbar links, forms, and buttons are stacked
     47// vertically and include a `max-height` to overflow in case you have too much
     48// content for the user's viewport.
     49
     50.navbar-collapse {
     51  overflow-x: visible;
     52  padding-right: @navbar-padding-horizontal;
     53  padding-left:  @navbar-padding-horizontal;
     54  border-top: 1px solid transparent;
     55  box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
     56  &:extend(.clearfix all);
     57  -webkit-overflow-scrolling: touch;
     58
     59  &.in {
     60    overflow-y: auto;
     61  }
     62
     63  @media (min-width: @grid-float-breakpoint) {
     64    width: auto;
     65    border-top: 0;
     66    box-shadow: none;
     67
     68    &.collapse {
     69      display: block !important;
     70      height: auto !important;
     71      padding-bottom: 0; // Override default setting
     72      overflow: visible !important;
     73    }
     74
     75    &.in {
     76      overflow-y: visible;
     77    }
     78
     79    // Undo the collapse side padding for navbars with containers to ensure
     80    // alignment of right-aligned contents.
     81    .navbar-fixed-top &,
     82    .navbar-static-top &,
     83    .navbar-fixed-bottom & {
     84      padding-left: 0;
     85      padding-right: 0;
     86    }
     87  }
     88}
     89
     90.navbar-fixed-top,
     91.navbar-fixed-bottom {
     92  .navbar-collapse {
     93    max-height: @navbar-collapse-max-height;
     94
     95    @media (max-device-width: @screen-xs-min) and (orientation: landscape) {
     96      max-height: 200px;
     97    }
     98  }
     99}
     100
     101
     102// Both navbar header and collapse
     103//
     104// When a container is present, change the behavior of the header and collapse.
     105
     106.container,
     107.container-fluid {
     108  > .navbar-header,
     109  > .navbar-collapse {
     110    margin-right: -@navbar-padding-horizontal;
     111    margin-left:  -@navbar-padding-horizontal;
     112
     113    @media (min-width: @grid-float-breakpoint) {
     114      margin-right: 0;
     115      margin-left:  0;
     116    }
     117  }
     118}
     119
     120
     121//
     122// Navbar alignment options
     123//
     124// Display the navbar across the entirety of the page or fixed it to the top or
     125// bottom of the page.
     126
     127// Static top (unfixed, but 100% wide) navbar
    158128.navbar-static-top {
    159   position: static;
    160   margin-bottom: 0; // remove 18px margin for default navbar
    161   .navbar-inner {
    162     .border-radius(0);
    163   }
    164 }
    165 
    166 
    167 
    168 // Fixed navbar
    169 // -------------------------
    170 
    171 // Shared (top/bottom) styles
     129  z-index: @zindex-navbar;
     130  border-width: 0 0 1px;
     131
     132  @media (min-width: @grid-float-breakpoint) {
     133    border-radius: 0;
     134  }
     135}
     136
     137// Fix the top/bottom navbars when screen real estate supports it
    172138.navbar-fixed-top,
    173139.navbar-fixed-bottom {
     
    175141  right: 0;
    176142  left: 0;
    177   z-index: @zindexFixedNavbar;
    178   margin-bottom: 0; // remove 18px margin for default navbar
    179 }
    180 .navbar-fixed-top .navbar-inner,
    181 .navbar-static-top .navbar-inner {
    182   border-width: 0 0 1px;
    183 }
    184 .navbar-fixed-bottom .navbar-inner {
    185   border-width: 1px 0 0;
    186 }
    187 .navbar-fixed-top .navbar-inner,
    188 .navbar-fixed-bottom .navbar-inner {
    189   padding-left:  0;
    190   padding-right: 0;
    191   .border-radius(0);
    192 }
    193 
    194 // Reset container width
    195 // Required here as we reset the width earlier on and the grid mixins don't override early enough
    196 .navbar-static-top .container,
    197 .navbar-fixed-top .container,
    198 .navbar-fixed-bottom .container {
    199   #grid > .core > .span(@gridColumns);
    200 }
    201 
    202 // Fixed to top
     143  z-index: @zindex-navbar-fixed;
     144
     145  // Undo the rounded corners
     146  @media (min-width: @grid-float-breakpoint) {
     147    border-radius: 0;
     148  }
     149}
    203150.navbar-fixed-top {
    204151  top: 0;
    205 }
    206 .navbar-fixed-top,
    207 .navbar-static-top {
    208   .navbar-inner {
    209     .box-shadow(~"0 1px 10px rgba(0,0,0,.1)");
    210   }
    211 }
    212 
    213 // Fixed to bottom
     152  border-width: 0 0 1px;
     153}
    214154.navbar-fixed-bottom {
    215155  bottom: 0;
    216   .navbar-inner {
    217     .box-shadow(~"0 -1px 10px rgba(0,0,0,.1)");
    218   }
    219 }
    220 
    221 
    222 
    223 // NAVIGATION
    224 // ----------
    225 
    226 .navbar .nav {
     156  margin-bottom: 0; // override .navbar defaults
     157  border-width: 1px 0 0;
     158}
     159
     160
     161// Brand/project name
     162
     163.navbar-brand {
     164  float: left;
     165  padding: @navbar-padding-vertical @navbar-padding-horizontal;
     166  font-size: @font-size-large;
     167  line-height: @line-height-computed;
     168  height: @navbar-height;
     169
     170  &:hover,
     171  &:focus {
     172    text-decoration: none;
     173  }
     174
     175  > img {
     176    display: block;
     177  }
     178
     179  @media (min-width: @grid-float-breakpoint) {
     180    .navbar > .container &,
     181    .navbar > .container-fluid & {
     182      margin-left: -@navbar-padding-horizontal;
     183    }
     184  }
     185}
     186
     187
     188// Navbar toggle
     189//
     190// Custom button for toggling the `.navbar-collapse`, powered by the collapse
     191// JavaScript plugin.
     192
     193.navbar-toggle {
    227194  position: relative;
    228   left: 0;
    229   display: block;
    230   float: left;
    231   margin: 0 10px 0 0;
    232 }
    233 .navbar .nav.pull-right {
    234   float: right; // redeclare due to specificity
    235   margin-right: 0; // remove margin on float right nav
    236 }
    237 .navbar .nav > li {
    238   float: left;
    239 }
    240 
    241 // Links
    242 .navbar .nav > li > a {
    243   float: none;
    244   // Vertically center the text given @navbarHeight
    245   padding: ((@navbarHeight - @baseLineHeight) / 2) 15px ((@navbarHeight - @baseLineHeight) / 2);
    246   color: @navbarLinkColor;
    247   text-decoration: none;
    248   text-shadow: 0 1px 0 @navbarBackgroundHighlight;
    249 }
    250 .navbar .nav .dropdown-toggle .caret {
    251   margin-top: 8px;
    252 }
    253 
    254 // Hover/focus
    255 .navbar .nav > li > a:focus,
    256 .navbar .nav > li > a:hover {
    257   background-color: @navbarLinkBackgroundHover; // "transparent" is default to differentiate :hover/:focus from .active
    258   color: @navbarLinkColorHover;
    259   text-decoration: none;
    260 }
    261 
    262 // Active nav items
    263 .navbar .nav > .active > a,
    264 .navbar .nav > .active > a:hover,
    265 .navbar .nav > .active > a:focus {
    266   color: @navbarLinkColorActive;
    267   text-decoration: none;
    268   background-color: @navbarLinkBackgroundActive;
    269   .box-shadow(inset 0 3px 8px rgba(0,0,0,.125));
    270 }
    271 
    272 // Navbar button for toggling navbar items in responsive layouts
    273 // These definitions need to come after '.navbar .btn'
    274 .navbar .btn-navbar {
    275   display: none;
    276195  float: right;
    277   padding: 7px 10px;
    278   margin-left: 5px;
    279   margin-right: 5px;
    280   .buttonBackground(darken(@navbarBackgroundHighlight, 5%), darken(@navbarBackground, 5%));
    281   .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075)");
    282 }
    283 .navbar .btn-navbar .icon-bar {
    284   display: block;
    285   width: 18px;
    286   height: 2px;
    287   background-color: #f5f5f5;
    288   .border-radius(1px);
    289   .box-shadow(0 1px 0 rgba(0,0,0,.25));
    290 }
    291 .btn-navbar .icon-bar + .icon-bar {
    292   margin-top: 3px;
    293 }
    294 
     196  margin-right: @navbar-padding-horizontal;
     197  padding: 9px 10px;
     198  .navbar-vertical-align(34px);
     199  background-color: transparent;
     200  background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
     201  border: 1px solid transparent;
     202  border-radius: @border-radius-base;
     203
     204  // We remove the `outline` here, but later compensate by attaching `:hover`
     205  // styles to `:focus`.
     206  &:focus {
     207    outline: 0;
     208  }
     209
     210  // Bars
     211  .icon-bar {
     212    display: block;
     213    width: 22px;
     214    height: 2px;
     215    border-radius: 1px;
     216  }
     217  .icon-bar + .icon-bar {
     218    margin-top: 4px;
     219  }
     220
     221  @media (min-width: @grid-float-breakpoint) {
     222    display: none;
     223  }
     224}
     225
     226
     227// Navbar nav links
     228//
     229// Builds on top of the `.nav` components with its own modifier class to make
     230// the nav the full height of the horizontal nav (above 768px).
     231
     232.navbar-nav {
     233  margin: (@navbar-padding-vertical / 2) -@navbar-padding-horizontal;
     234
     235  > li > a {
     236    padding-top:    10px;
     237    padding-bottom: 10px;
     238    line-height: @line-height-computed;
     239  }
     240
     241  @media (max-width: @grid-float-breakpoint-max) {
     242    // Dropdowns get custom display when collapsed
     243    .open .dropdown-menu {
     244      position: static;
     245      float: none;
     246      width: auto;
     247      margin-top: 0;
     248      background-color: transparent;
     249      border: 0;
     250      box-shadow: none;
     251      > li > a,
     252      .dropdown-header {
     253        padding: 5px 15px 5px 25px;
     254      }
     255      > li > a {
     256        line-height: @line-height-computed;
     257        &:hover,
     258        &:focus {
     259          background-image: none;
     260        }
     261      }
     262    }
     263  }
     264
     265  // Uncollapse the nav
     266  @media (min-width: @grid-float-breakpoint) {
     267    float: left;
     268    margin: 0;
     269
     270    > li {
     271      float: left;
     272      > a {
     273        padding-top:    @navbar-padding-vertical;
     274        padding-bottom: @navbar-padding-vertical;
     275      }
     276    }
     277  }
     278}
     279
     280
     281// Navbar form
     282//
     283// Extension of the `.form-inline` with some extra flavor for optimum display in
     284// our navbars.
     285
     286.navbar-form {
     287  margin-left: -@navbar-padding-horizontal;
     288  margin-right: -@navbar-padding-horizontal;
     289  padding: 10px @navbar-padding-horizontal;
     290  border-top: 1px solid transparent;
     291  border-bottom: 1px solid transparent;
     292  @shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1);
     293  .box-shadow(@shadow);
     294
     295  // Mixin behavior for optimum display
     296  .form-inline();
     297
     298  .form-group {
     299    @media (max-width: @grid-float-breakpoint-max) {
     300      margin-bottom: 5px;
     301
     302      &:last-child {
     303        margin-bottom: 0;
     304      }
     305    }
     306  }
     307
     308  // Vertically center in expanded, horizontal navbar
     309  .navbar-vertical-align(@input-height-base);
     310
     311  // Undo 100% width for pull classes
     312  @media (min-width: @grid-float-breakpoint) {
     313    width: auto;
     314    border: 0;
     315    margin-left: 0;
     316    margin-right: 0;
     317    padding-top: 0;
     318    padding-bottom: 0;
     319    .box-shadow(none);
     320  }
     321}
    295322
    296323
    297324// Dropdown menus
    298 // --------------
    299325
    300326// Menu position and menu carets
    301 .navbar .nav > li > .dropdown-menu {
    302   &:before {
    303     content: '';
    304     display: inline-block;
    305     border-left:   7px solid transparent;
    306     border-right:  7px solid transparent;
    307     border-bottom: 7px solid #ccc;
    308     border-bottom-color: @dropdownBorder;
    309     position: absolute;
    310     top: -7px;
    311     left: 9px;
    312   }
    313   &:after {
    314     content: '';
    315     display: inline-block;
    316     border-left:   6px solid transparent;
    317     border-right:  6px solid transparent;
    318     border-bottom: 6px solid @dropdownBackground;
    319     position: absolute;
    320     top: -6px;
    321     left: 10px;
    322   }
     327.navbar-nav > li > .dropdown-menu {
     328  margin-top: 0;
     329  .border-top-radius(0);
    323330}
    324331// Menu position and menu caret support for dropups via extra dropup class
    325 .navbar-fixed-bottom .nav > li > .dropdown-menu {
    326   &:before {
    327     border-top: 7px solid #ccc;
    328     border-top-color: @dropdownBorder;
    329     border-bottom: 0;
    330     bottom: -7px;
    331     top: auto;
    332   }
    333   &:after {
    334     border-top: 6px solid @dropdownBackground;
    335     border-bottom: 0;
    336     bottom: -6px;
    337     top: auto;
    338   }
    339 }
    340 
    341 // Caret should match text color on hover/focus
    342 .navbar .nav li.dropdown > a:hover .caret,
    343 .navbar .nav li.dropdown > a:focus .caret {
    344   border-top-color: @navbarLinkColorHover;
    345   border-bottom-color: @navbarLinkColorHover;
    346 }
    347 
    348 // Remove background color from open dropdown
    349 .navbar .nav li.dropdown.open > .dropdown-toggle,
    350 .navbar .nav li.dropdown.active > .dropdown-toggle,
    351 .navbar .nav li.dropdown.open.active > .dropdown-toggle {
    352   background-color: @navbarLinkBackgroundActive;
    353   color: @navbarLinkColorActive;
    354 }
    355 .navbar .nav li.dropdown > .dropdown-toggle .caret {
    356   border-top-color: @navbarLinkColor;
    357   border-bottom-color: @navbarLinkColor;
    358 }
    359 .navbar .nav li.dropdown.open > .dropdown-toggle .caret,
    360 .navbar .nav li.dropdown.active > .dropdown-toggle .caret,
    361 .navbar .nav li.dropdown.open.active > .dropdown-toggle .caret {
    362   border-top-color: @navbarLinkColorActive;
    363   border-bottom-color: @navbarLinkColorActive;
    364 }
    365 
    366 // Right aligned menus need alt position
    367 .navbar .pull-right > li > .dropdown-menu,
    368 .navbar .nav > li > .dropdown-menu.pull-right {
    369   left: auto;
    370   right: 0;
    371   &:before {
    372     left: auto;
    373     right: 12px;
    374   }
    375   &:after {
    376     left: auto;
    377     right: 13px;
    378   }
    379   .dropdown-menu {
    380     left: auto;
    381     right: 100%;
    382     margin-left: 0;
    383     margin-right: -1px;
    384     .border-radius(6px 0 6px 6px);
    385   }
    386 }
    387 
    388 
    389 // Inverted navbar
    390 // -------------------------
    391 
    392 .navbar-inverse {
    393 
    394   .navbar-inner {
    395     #gradient > .vertical(@navbarInverseBackgroundHighlight, @navbarInverseBackground);
    396     border-color: @navbarInverseBorder;
    397   }
    398 
    399   .brand,
    400   .nav > li > a {
    401     color: @navbarInverseLinkColor;
    402     text-shadow: 0 -1px 0 rgba(0,0,0,.25);
     332.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
     333  margin-bottom: 0;
     334  .border-top-radius(@navbar-border-radius);
     335  .border-bottom-radius(0);
     336}
     337
     338
     339// Buttons in navbars
     340//
     341// Vertically center a button within a navbar (when *not* in a form).
     342
     343.navbar-btn {
     344  .navbar-vertical-align(@input-height-base);
     345
     346  &.btn-sm {
     347    .navbar-vertical-align(@input-height-small);
     348  }
     349  &.btn-xs {
     350    .navbar-vertical-align(22);
     351  }
     352}
     353
     354
     355// Text in navbars
     356//
     357// Add a class to make any element properly align itself vertically within the navbars.
     358
     359.navbar-text {
     360  .navbar-vertical-align(@line-height-computed);
     361
     362  @media (min-width: @grid-float-breakpoint) {
     363    float: left;
     364    margin-left: @navbar-padding-horizontal;
     365    margin-right: @navbar-padding-horizontal;
     366  }
     367}
     368
     369
     370// Component alignment
     371//
     372// Repurpose the pull utilities as their own navbar utilities to avoid specificity
     373// issues with parents and chaining. Only do this when the navbar is uncollapsed
     374// though so that navbar contents properly stack and align in mobile.
     375//
     376// Declared after the navbar components to ensure more specificity on the margins.
     377
     378@media (min-width: @grid-float-breakpoint) {
     379  .navbar-left  { .pull-left(); }
     380  .navbar-right {
     381    .pull-right();
     382    margin-right: -@navbar-padding-horizontal;
     383
     384    ~ .navbar-right {
     385      margin-right: 0;
     386    }
     387  }
     388}
     389
     390
     391// Alternate navbars
     392// --------------------------------------------------
     393
     394// Default navbar
     395.navbar-default {
     396  background-color: @navbar-default-bg;
     397  border-color: @navbar-default-border;
     398
     399  .navbar-brand {
     400    color: @navbar-default-brand-color;
    403401    &:hover,
    404402    &:focus {
    405       color: @navbarInverseLinkColorHover;
    406     }
    407   }
    408 
    409   .brand {
    410     color: @navbarInverseBrandColor;
     403      color: @navbar-default-brand-hover-color;
     404      background-color: @navbar-default-brand-hover-bg;
     405    }
    411406  }
    412407
    413408  .navbar-text {
    414     color: @navbarInverseText;
    415   }
    416 
    417   .nav > li > a:focus,
    418   .nav > li > a:hover {
    419     background-color: @navbarInverseLinkBackgroundHover;
    420     color: @navbarInverseLinkColorHover;
    421   }
    422 
    423   .nav .active > a,
    424   .nav .active > a:hover,
    425   .nav .active > a:focus {
    426     color: @navbarInverseLinkColorActive;
    427     background-color: @navbarInverseLinkBackgroundActive;
    428   }
    429 
    430   // Inline text links
    431   .navbar-link {
    432     color: @navbarInverseLinkColor;
     409    color: @navbar-default-color;
     410  }
     411
     412  .navbar-nav {
     413    > li > a {
     414      color: @navbar-default-link-color;
     415
     416      &:hover,
     417      &:focus {
     418        color: @navbar-default-link-hover-color;
     419        background-color: @navbar-default-link-hover-bg;
     420      }
     421    }
     422    > .active > a {
     423      &,
     424      &:hover,
     425      &:focus {
     426        color: @navbar-default-link-active-color;
     427        background-color: @navbar-default-link-active-bg;
     428      }
     429    }
     430    > .disabled > a {
     431      &,
     432      &:hover,
     433      &:focus {
     434        color: @navbar-default-link-disabled-color;
     435        background-color: @navbar-default-link-disabled-bg;
     436      }
     437    }
     438  }
     439
     440  .navbar-toggle {
     441    border-color: @navbar-default-toggle-border-color;
    433442    &:hover,
    434443    &:focus {
    435       color: @navbarInverseLinkColorHover;
    436     }
    437   }
    438 
    439   // Dividers in navbar
    440   .divider-vertical {
    441     border-left-color: @navbarInverseBackground;
    442     border-right-color: @navbarInverseBackgroundHighlight;
     444      background-color: @navbar-default-toggle-hover-bg;
     445    }
     446    .icon-bar {
     447      background-color: @navbar-default-toggle-icon-bar-bg;
     448    }
     449  }
     450
     451  .navbar-collapse,
     452  .navbar-form {
     453    border-color: @navbar-default-border;
     454  }
     455
     456  // Dropdown menu items
     457  .navbar-nav {
     458    // Remove background color from open dropdown
     459    > .open > a {
     460      &,
     461      &:hover,
     462      &:focus {
     463        background-color: @navbar-default-link-active-bg;
     464        color: @navbar-default-link-active-color;
     465      }
     466    }
     467
     468    @media (max-width: @grid-float-breakpoint-max) {
     469      // Dropdowns get custom display when collapsed
     470      .open .dropdown-menu {
     471        > li > a {
     472          color: @navbar-default-link-color;
     473          &:hover,
     474          &:focus {
     475            color: @navbar-default-link-hover-color;
     476            background-color: @navbar-default-link-hover-bg;
     477          }
     478        }
     479        > .active > a {
     480          &,
     481          &:hover,
     482          &:focus {
     483            color: @navbar-default-link-active-color;
     484            background-color: @navbar-default-link-active-bg;
     485          }
     486        }
     487        > .disabled > a {
     488          &,
     489          &:hover,
     490          &:focus {
     491            color: @navbar-default-link-disabled-color;
     492            background-color: @navbar-default-link-disabled-bg;
     493          }
     494        }
     495      }
     496    }
     497  }
     498
     499
     500  // Links in navbars
     501  //
     502  // Add a class to ensure links outside the navbar nav are colored correctly.
     503
     504  .navbar-link {
     505    color: @navbar-default-link-color;
     506    &:hover {
     507      color: @navbar-default-link-hover-color;
     508    }
     509  }
     510
     511  .btn-link {
     512    color: @navbar-default-link-color;
     513    &:hover,
     514    &:focus {
     515      color: @navbar-default-link-hover-color;
     516    }
     517    &[disabled],
     518    fieldset[disabled] & {
     519      &:hover,
     520      &:focus {
     521        color: @navbar-default-link-disabled-color;
     522      }
     523    }
     524  }
     525}
     526
     527// Inverse navbar
     528
     529.navbar-inverse {
     530  background-color: @navbar-inverse-bg;
     531  border-color: @navbar-inverse-border;
     532
     533  .navbar-brand {
     534    color: @navbar-inverse-brand-color;
     535    &:hover,
     536    &:focus {
     537      color: @navbar-inverse-brand-hover-color;
     538      background-color: @navbar-inverse-brand-hover-bg;
     539    }
     540  }
     541
     542  .navbar-text {
     543    color: @navbar-inverse-color;
     544  }
     545
     546  .navbar-nav {
     547    > li > a {
     548      color: @navbar-inverse-link-color;
     549
     550      &:hover,
     551      &:focus {
     552        color: @navbar-inverse-link-hover-color;
     553        background-color: @navbar-inverse-link-hover-bg;
     554      }
     555    }
     556    > .active > a {
     557      &,
     558      &:hover,
     559      &:focus {
     560        color: @navbar-inverse-link-active-color;
     561        background-color: @navbar-inverse-link-active-bg;
     562      }
     563    }
     564    > .disabled > a {
     565      &,
     566      &:hover,
     567      &:focus {
     568        color: @navbar-inverse-link-disabled-color;
     569        background-color: @navbar-inverse-link-disabled-bg;
     570      }
     571    }
     572  }
     573
     574  // Darken the responsive nav toggle
     575  .navbar-toggle {
     576    border-color: @navbar-inverse-toggle-border-color;
     577    &:hover,
     578    &:focus {
     579      background-color: @navbar-inverse-toggle-hover-bg;
     580    }
     581    .icon-bar {
     582      background-color: @navbar-inverse-toggle-icon-bar-bg;
     583    }
     584  }
     585
     586  .navbar-collapse,
     587  .navbar-form {
     588    border-color: darken(@navbar-inverse-bg, 7%);
    443589  }
    444590
    445591  // Dropdowns
    446   .nav li.dropdown.open > .dropdown-toggle,
    447   .nav li.dropdown.active > .dropdown-toggle,
    448   .nav li.dropdown.open.active > .dropdown-toggle {
    449     background-color: @navbarInverseLinkBackgroundActive;
    450     color: @navbarInverseLinkColorActive;
    451   }
    452   .nav li.dropdown > a:hover .caret,
    453   .nav li.dropdown > a:focus .caret {
    454     border-top-color: @navbarInverseLinkColorActive;
    455     border-bottom-color: @navbarInverseLinkColorActive;
    456   }
    457   .nav li.dropdown > .dropdown-toggle .caret {
    458     border-top-color: @navbarInverseLinkColor;
    459     border-bottom-color: @navbarInverseLinkColor;
    460   }
    461   .nav li.dropdown.open > .dropdown-toggle .caret,
    462   .nav li.dropdown.active > .dropdown-toggle .caret,
    463   .nav li.dropdown.open.active > .dropdown-toggle .caret {
    464     border-top-color: @navbarInverseLinkColorActive;
    465     border-bottom-color: @navbarInverseLinkColorActive;
    466   }
    467 
    468   // Navbar search
    469   .navbar-search {
    470     .search-query {
    471       color: @white;
    472       background-color: @navbarInverseSearchBackground;
    473       border-color: @navbarInverseSearchBorder;
    474       .box-shadow(~"inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15)");
    475       .transition(none);
    476       .placeholder(@navbarInverseSearchPlaceholderColor);
    477 
    478       // Focus states (we use .focused since IE7-8 and down doesn't support :focus)
    479       &:focus,
    480       &.focused {
    481         padding: 5px 15px;
    482         color: @grayDark;
    483         text-shadow: 0 1px 0 @white;
    484         background-color: @navbarInverseSearchBackgroundFocus;
    485         border: 0;
    486         .box-shadow(0 0 3px rgba(0,0,0,.15));
    487         outline: 0;
    488       }
    489     }
    490   }
    491 
    492   // Navbar collapse button
    493   .btn-navbar {
    494     .buttonBackground(darken(@navbarInverseBackgroundHighlight, 5%), darken(@navbarInverseBackground, 5%));
    495   }
    496 
    497 }
     592  .navbar-nav {
     593    > .open > a {
     594      &,
     595      &:hover,
     596      &:focus {
     597        background-color: @navbar-inverse-link-active-bg;
     598        color: @navbar-inverse-link-active-color;
     599      }
     600    }
     601
     602    @media (max-width: @grid-float-breakpoint-max) {
     603      // Dropdowns get custom display
     604      .open .dropdown-menu {
     605        > .dropdown-header {
     606          border-color: @navbar-inverse-border;
     607        }
     608        .divider {
     609          background-color: @navbar-inverse-border;
     610        }
     611        > li > a {
     612          color: @navbar-inverse-link-color;
     613          &:hover,
     614          &:focus {
     615            color: @navbar-inverse-link-hover-color;
     616            background-color: @navbar-inverse-link-hover-bg;
     617          }
     618        }
     619        > .active > a {
     620          &,
     621          &:hover,
     622          &:focus {
     623            color: @navbar-inverse-link-active-color;
     624            background-color: @navbar-inverse-link-active-bg;
     625          }
     626        }
     627        > .disabled > a {
     628          &,
     629          &:hover,
     630          &:focus {
     631            color: @navbar-inverse-link-disabled-color;
     632            background-color: @navbar-inverse-link-disabled-bg;
     633          }
     634        }
     635      }
     636    }
     637  }
     638
     639  .navbar-link {
     640    color: @navbar-inverse-link-color;
     641    &:hover {
     642      color: @navbar-inverse-link-hover-color;
     643    }
     644  }
     645
     646  .btn-link {
     647    color: @navbar-inverse-link-color;
     648    &:hover,
     649    &:focus {
     650      color: @navbar-inverse-link-hover-color;
     651    }
     652    &[disabled],
     653    fieldset[disabled] & {
     654      &:hover,
     655      &:focus {
     656        color: @navbar-inverse-link-disabled-color;
     657      }
     658    }
     659  }
     660}
  • _plugins_/bootstrap/trunk/bootstrap/css/navs.less

    r70593 r90741  
    44
    55
    6 // BASE CLASS
    7 // ----------
     6// Base class
     7// --------------------------------------------------
    88
    99.nav {
    10   margin-left: 0;
    11   margin-bottom: @baseLineHeight;
     10  margin-bottom: 0;
     11  padding-left: 0; // Override default ul/ol
    1212  list-style: none;
    13 }
    14 
    15 // Make links block level
    16 .nav > li > a {
    17   display: block;
    18 }
    19 .nav > li > a:hover,
    20 .nav > li > a:focus {
    21   text-decoration: none;
    22   background-color: @grayLighter;
    23 }
    24 
    25 // Prevent IE8 from misplacing imgs
    26 // See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989
    27 .nav > li > a > img {
    28   max-width: none;
    29 }
    30 
    31 // Redeclare pull classes because of specifity
    32 .nav > .pull-right {
    33   float: right;
    34 }
    35 
    36 // Nav headers (for dropdowns and lists)
    37 .nav-header {
    38   display: block;
    39   padding: 3px 15px;
    40   font-size: 11px;
    41   font-weight: bold;
    42   line-height: @baseLineHeight;
    43   color: @grayLight;
    44   text-shadow: 0 1px 0 rgba(255,255,255,.5);
    45   text-transform: uppercase;
    46 }
    47 // Space them out when they follow another list item (link)
    48 .nav li + .nav-header {
    49   margin-top: 9px;
    50 }
    51 
    52 
    53 
    54 // NAV LIST
    55 // --------
    56 
    57 .nav-list {
    58   padding-left: 15px;
    59   padding-right: 15px;
    60   margin-bottom: 0;
    61 }
    62 .nav-list > li > a,
    63 .nav-list .nav-header {
    64   margin-left:  -15px;
    65   margin-right: -15px;
    66   text-shadow: 0 1px 0 rgba(255,255,255,.5);
    67 }
    68 .nav-list > li > a {
    69   padding: 3px 15px;
    70 }
    71 .nav-list > .active > a,
    72 .nav-list > .active > a:hover,
    73 .nav-list > .active > a:focus {
    74   color: @white;
    75   text-shadow: 0 -1px 0 rgba(0,0,0,.2);
    76   background-color: @linkColor;
    77 }
    78 .nav-list [class^="icon-"],
    79 .nav-list [class*=" icon-"] {
    80   margin-right: 2px;
    81 }
    82 // Dividers (basically an hr) within the dropdown
    83 .nav-list .divider {
    84   .nav-divider();
    85 }
    86 
    87 
    88 
    89 // TABS AND PILLS
    90 // -------------
    91 
    92 // Common styles
    93 .nav-tabs,
    94 .nav-pills {
    95   .clearfix();
    96 }
    97 .nav-tabs > li,
    98 .nav-pills > li {
    99   float: left;
    100 }
    101 .nav-tabs > li > a,
    102 .nav-pills > li > a {
    103   padding-right: 12px;
    104   padding-left: 12px;
    105   margin-right: 2px;
    106   line-height: 14px; // keeps the overall height an even number
    107 }
    108 
    109 // TABS
    110 // ----
     13  &:extend(.clearfix all);
     14
     15  > li {
     16    position: relative;
     17    display: block;
     18
     19    > a {
     20      position: relative;
     21      display: block;
     22      padding: @nav-link-padding;
     23      &:hover,
     24      &:focus {
     25        text-decoration: none;
     26        background-color: @nav-link-hover-bg;
     27      }
     28    }
     29
     30    // Disabled state sets text to gray and nukes hover/tab effects
     31    &.disabled > a {
     32      color: @nav-disabled-link-color;
     33
     34      &:hover,
     35      &:focus {
     36        color: @nav-disabled-link-hover-color;
     37        text-decoration: none;
     38        background-color: transparent;
     39        cursor: @cursor-disabled;
     40      }
     41    }
     42  }
     43
     44  // Open dropdowns
     45  .open > a {
     46    &,
     47    &:hover,
     48    &:focus {
     49      background-color: @nav-link-hover-bg;
     50      border-color: @link-color;
     51    }
     52  }
     53
     54  // Nav dividers (deprecated with v3.0.1)
     55  //
     56  // This should have been removed in v3 with the dropping of `.nav-list`, but
     57  // we missed it. We don't currently support this anywhere, but in the interest
     58  // of maintaining backward compatibility in case you use it, it's deprecated.
     59  .nav-divider {
     60    .nav-divider();
     61  }
     62
     63  // Prevent IE8 from misplacing imgs
     64  //
     65  // See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989
     66  > li > a > img {
     67    max-width: none;
     68  }
     69}
     70
     71
     72// Tabs
     73// -------------------------
    11174
    11275// Give the tabs something to sit on
    11376.nav-tabs {
    114   border-bottom: 1px solid #ddd;
    115 }
    116 // Make the list-items overlay the bottom border
    117 .nav-tabs > li {
    118   margin-bottom: -1px;
    119 }
    120 // Actual tabs (as links)
    121 .nav-tabs > li > a {
    122   padding-top: 8px;
    123   padding-bottom: 8px;
    124   line-height: @baseLineHeight;
    125   border: 1px solid transparent;
    126   .border-radius(4px 4px 0 0);
    127   &:hover,
    128   &:focus {
    129     border-color: @grayLighter @grayLighter #ddd;
    130   }
    131 }
    132 // Active state, and it's :hover/:focus to override normal :hover/:focus
    133 .nav-tabs > .active > a,
    134 .nav-tabs > .active > a:hover,
    135 .nav-tabs > .active > a:focus {
    136   color: @gray;
    137   background-color: @bodyBackground;
    138   border: 1px solid #ddd;
    139   border-bottom-color: transparent;
    140   cursor: default;
    141 }
    142 
    143 
    144 // PILLS
    145 // -----
    146 
    147 // Links rendered as pills
    148 .nav-pills > li > a {
    149   padding-top: 8px;
    150   padding-bottom: 8px;
    151   margin-top: 2px;
    152   margin-bottom: 2px;
    153   .border-radius(5px);
    154 }
    155 
    156 // Active state
    157 .nav-pills > .active > a,
    158 .nav-pills > .active > a:hover,
    159 .nav-pills > .active > a:focus {
    160   color: @white;
    161   background-color: @linkColor;
    162 }
    163 
    164 
    165 
    166 // STACKED NAV
    167 // -----------
    168 
    169 // Stacked tabs and pills
    170 .nav-stacked > li {
    171   float: none;
    172 }
    173 .nav-stacked > li > a {
    174   margin-right: 0; // no need for the gap between nav items
    175 }
    176 
    177 // Tabs
    178 .nav-tabs.nav-stacked {
     77  border-bottom: 1px solid @nav-tabs-border-color;
     78  > li {
     79    float: left;
     80    // Make the list-items overlay the bottom border
     81    margin-bottom: -1px;
     82
     83    // Actual tabs (as links)
     84    > a {
     85      margin-right: 2px;
     86      line-height: @line-height-base;
     87      border: 1px solid transparent;
     88      border-radius: @border-radius-base @border-radius-base 0 0;
     89      &:hover {
     90        border-color: @nav-tabs-link-hover-border-color @nav-tabs-link-hover-border-color @nav-tabs-border-color;
     91      }
     92    }
     93
     94    // Active state, and its :hover to override normal :hover
     95    &.active > a {
     96      &,
     97      &:hover,
     98      &:focus {
     99        color: @nav-tabs-active-link-hover-color;
     100        background-color: @nav-tabs-active-link-hover-bg;
     101        border: 1px solid @nav-tabs-active-link-hover-border-color;
     102        border-bottom-color: transparent;
     103        cursor: default;
     104      }
     105    }
     106  }
     107  // pulling this in mainly for less shorthand
     108  &.nav-justified {
     109    .nav-justified();
     110    .nav-tabs-justified();
     111  }
     112}
     113
     114
     115// Pills
     116// -------------------------
     117.nav-pills {
     118  > li {
     119    float: left;
     120
     121    // Links rendered as pills
     122    > a {
     123      border-radius: @nav-pills-border-radius;
     124    }
     125    + li {
     126      margin-left: 2px;
     127    }
     128
     129    // Active state
     130    &.active > a {
     131      &,
     132      &:hover,
     133      &:focus {
     134        color: @nav-pills-active-link-hover-color;
     135        background-color: @nav-pills-active-link-hover-bg;
     136      }
     137    }
     138  }
     139}
     140
     141
     142// Stacked pills
     143.nav-stacked {
     144  > li {
     145    float: none;
     146    + li {
     147      margin-top: 2px;
     148      margin-left: 0; // no need for this gap between nav items
     149    }
     150  }
     151}
     152
     153
     154// Nav variations
     155// --------------------------------------------------
     156
     157// Justified nav links
     158// -------------------------
     159
     160.nav-justified {
     161  width: 100%;
     162
     163  > li {
     164    float: none;
     165    > a {
     166      text-align: center;
     167      margin-bottom: 5px;
     168    }
     169  }
     170
     171  > .dropdown .dropdown-menu {
     172    top: auto;
     173    left: auto;
     174  }
     175
     176  @media (min-width: @screen-sm-min) {
     177    > li {
     178      display: table-cell;
     179      width: 1%;
     180      > a {
     181        margin-bottom: 0;
     182      }
     183    }
     184  }
     185}
     186
     187// Move borders to anchors instead of bottom of list
     188//
     189// Mixin for adding on top the shared `.nav-justified` styles for our tabs
     190.nav-tabs-justified {
    179191  border-bottom: 0;
    180 }
    181 .nav-tabs.nav-stacked > li > a {
    182   border: 1px solid #ddd;
    183   .border-radius(0);
    184 }
    185 .nav-tabs.nav-stacked > li:first-child > a {
    186   .border-top-radius(4px);
    187 }
    188 .nav-tabs.nav-stacked > li:last-child > a {
    189   .border-bottom-radius(4px);
    190 }
    191 .nav-tabs.nav-stacked > li > a:hover,
    192 .nav-tabs.nav-stacked > li > a:focus {
    193   border-color: #ddd;
    194   z-index: 2;
    195 }
    196 
    197 // Pills
    198 .nav-pills.nav-stacked > li > a {
    199   margin-bottom: 3px;
    200 }
    201 .nav-pills.nav-stacked > li:last-child > a {
    202   margin-bottom: 1px; // decrease margin to match sizing of stacked tabs
    203 }
    204 
    205 
    206 
    207 // DROPDOWNS
    208 // ---------
    209 
     192
     193  > li > a {
     194    // Override margin from .nav-tabs
     195    margin-right: 0;
     196    border-radius: @border-radius-base;
     197  }
     198
     199  > .active > a,
     200  > .active > a:hover,
     201  > .active > a:focus {
     202    border: 1px solid @nav-tabs-justified-link-border-color;
     203  }
     204
     205  @media (min-width: @screen-sm-min) {
     206    > li > a {
     207      border-bottom: 1px solid @nav-tabs-justified-link-border-color;
     208      border-radius: @border-radius-base @border-radius-base 0 0;
     209    }
     210    > .active > a,
     211    > .active > a:hover,
     212    > .active > a:focus {
     213      border-bottom-color: @nav-tabs-justified-active-link-border-color;
     214    }
     215  }
     216}
     217
     218
     219// Tabbable tabs
     220// -------------------------
     221
     222// Hide tabbable panes to start, show them when `.active`
     223.tab-content {
     224  > .tab-pane {
     225    display: none;
     226  }
     227  > .active {
     228    display: block;
     229  }
     230}
     231
     232
     233// Dropdowns
     234// -------------------------
     235
     236// Specific dropdowns
    210237.nav-tabs .dropdown-menu {
    211   .border-radius(0 0 6px 6px); // remove the top rounded corners here since there is a hard edge above the menu
    212 }
    213 .nav-pills .dropdown-menu {
    214   .border-radius(6px); // make rounded corners match the pills
    215 }
    216 
    217 // Default dropdown links
    218 // -------------------------
    219 // Make carets use linkColor to start
    220 .nav .dropdown-toggle .caret {
    221   border-top-color: @linkColor;
    222   border-bottom-color: @linkColor;
    223   margin-top: 6px;
    224 }
    225 .nav .dropdown-toggle:hover .caret,
    226 .nav .dropdown-toggle:focus .caret {
    227   border-top-color: @linkColorHover;
    228   border-bottom-color: @linkColorHover;
    229 }
    230 /* move down carets for tabs */
    231 .nav-tabs .dropdown-toggle .caret {
    232   margin-top: 8px;
    233 }
    234 
    235 // Active dropdown links
    236 // -------------------------
    237 .nav .active .dropdown-toggle .caret {
    238   border-top-color: #fff;
    239   border-bottom-color: #fff;
    240 }
    241 .nav-tabs .active .dropdown-toggle .caret {
    242   border-top-color: @gray;
    243   border-bottom-color: @gray;
    244 }
    245 
    246 // Active:hover/:focus dropdown links
    247 // -------------------------
    248 .nav > .dropdown.active > a:hover,
    249 .nav > .dropdown.active > a:focus {
    250   cursor: pointer;
    251 }
    252 
    253 // Open dropdowns
    254 // -------------------------
    255 .nav-tabs .open .dropdown-toggle,
    256 .nav-pills .open .dropdown-toggle,
    257 .nav > li.dropdown.open.active > a:hover,
    258 .nav > li.dropdown.open.active > a:focus {
    259   color: @white;
    260   background-color: @grayLight;
    261   border-color: @grayLight;
    262 }
    263 .nav li.dropdown.open .caret,
    264 .nav li.dropdown.open.active .caret,
    265 .nav li.dropdown.open a:hover .caret,
    266 .nav li.dropdown.open a:focus .caret {
    267   border-top-color: @white;
    268   border-bottom-color: @white;
    269   .opacity(100);
    270 }
    271 
    272 // Dropdowns in stacked tabs
    273 .tabs-stacked .open > a:hover,
    274 .tabs-stacked .open > a:focus {
    275   border-color: @grayLight;
    276 }
    277 
    278 
    279 
    280 // TABBABLE
    281 // --------
    282 
    283 
    284 // COMMON STYLES
    285 // -------------
    286 
    287 // Clear any floats
    288 .tabbable {
    289   .clearfix();
    290 }
    291 .tab-content {
    292   overflow: auto; // prevent content from running below tabs
    293 }
    294 
    295 // Remove border on bottom, left, right
    296 .tabs-below > .nav-tabs,
    297 .tabs-right > .nav-tabs,
    298 .tabs-left > .nav-tabs {
    299   border-bottom: 0;
    300 }
    301 
    302 // Show/hide tabbable areas
    303 .tab-content > .tab-pane,
    304 .pill-content > .pill-pane {
    305   display: none;
    306 }
    307 .tab-content > .active,
    308 .pill-content > .active {
    309   display: block;
    310 }
    311 
    312 
    313 // BOTTOM
    314 // ------
    315 
    316 .tabs-below > .nav-tabs {
    317   border-top: 1px solid #ddd;
    318 }
    319 .tabs-below > .nav-tabs > li {
     238  // make dropdown border overlap tab border
    320239  margin-top: -1px;
    321   margin-bottom: 0;
    322 }
    323 .tabs-below > .nav-tabs > li > a {
    324   .border-radius(0 0 4px 4px);
    325   &:hover,
    326   &:focus {
    327     border-bottom-color: transparent;
    328     border-top-color: #ddd;
    329   }
    330 }
    331 .tabs-below > .nav-tabs > .active > a,
    332 .tabs-below > .nav-tabs > .active > a:hover,
    333 .tabs-below > .nav-tabs > .active > a:focus {
    334   border-color: transparent #ddd #ddd #ddd;
    335 }
    336 
    337 // LEFT & RIGHT
    338 // ------------
    339 
    340 // Common styles
    341 .tabs-left > .nav-tabs > li,
    342 .tabs-right > .nav-tabs > li {
    343   float: none;
    344 }
    345 .tabs-left > .nav-tabs > li > a,
    346 .tabs-right > .nav-tabs > li > a {
    347   min-width: 74px;
    348   margin-right: 0;
    349   margin-bottom: 3px;
    350 }
    351 
    352 // Tabs on the left
    353 .tabs-left > .nav-tabs {
    354   float: left;
    355   margin-right: 19px;
    356   border-right: 1px solid #ddd;
    357 }
    358 .tabs-left > .nav-tabs > li > a {
    359   margin-right: -1px;
    360   .border-radius(4px 0 0 4px);
    361 }
    362 .tabs-left > .nav-tabs > li > a:hover,
    363 .tabs-left > .nav-tabs > li > a:focus {
    364   border-color: @grayLighter #ddd @grayLighter @grayLighter;
    365 }
    366 .tabs-left > .nav-tabs .active > a,
    367 .tabs-left > .nav-tabs .active > a:hover,
    368 .tabs-left > .nav-tabs .active > a:focus {
    369   border-color: #ddd transparent #ddd #ddd;
    370   *border-right-color: @white;
    371 }
    372 
    373 // Tabs on the right
    374 .tabs-right > .nav-tabs {
    375   float: right;
    376   margin-left: 19px;
    377   border-left: 1px solid #ddd;
    378 }
    379 .tabs-right > .nav-tabs > li > a {
    380   margin-left: -1px;
    381   .border-radius(0 4px 4px 0);
    382 }
    383 .tabs-right > .nav-tabs > li > a:hover,
    384 .tabs-right > .nav-tabs > li > a:focus {
    385   border-color: @grayLighter @grayLighter @grayLighter #ddd;
    386 }
    387 .tabs-right > .nav-tabs .active > a,
    388 .tabs-right > .nav-tabs .active > a:hover,
    389 .tabs-right > .nav-tabs .active > a:focus {
    390   border-color: #ddd #ddd #ddd transparent;
    391   *border-left-color: @white;
    392 }
    393 
    394 
    395 
    396 // DISABLED STATES
    397 // ---------------
    398 
    399 // Gray out text
    400 .nav > .disabled > a {
    401   color: @grayLight;
    402 }
    403 // Nuke hover/focus effects
    404 .nav > .disabled > a:hover,
    405 .nav > .disabled > a:focus {
    406   text-decoration: none;
    407   background-color: transparent;
    408   cursor: default;
    409 }
     240  // Remove the top rounded corners here since there is a hard edge above the menu
     241  .border-top-radius(0);
     242}
  • _plugins_/bootstrap/trunk/bootstrap/css/pager.less

    r70593 r90741  
    55
    66.pager {
    7   margin: @baseLineHeight 0;
     7  padding-left: 0;
     8  margin: @line-height-computed 0;
    89  list-style: none;
    910  text-align: center;
    10   .clearfix();
     11  &:extend(.clearfix all);
     12  li {
     13    display: inline;
     14    > a,
     15    > span {
     16      display: inline-block;
     17      padding: 5px 14px;
     18      background-color: @pager-bg;
     19      border: 1px solid @pager-border;
     20      border-radius: @pager-border-radius;
     21    }
     22
     23    > a:hover,
     24    > a:focus {
     25      text-decoration: none;
     26      background-color: @pager-hover-bg;
     27    }
     28  }
     29
     30  .next {
     31    > a,
     32    > span {
     33      float: right;
     34    }
     35  }
     36
     37  .previous {
     38    > a,
     39    > span {
     40      float: left;
     41    }
     42  }
     43
     44  .disabled {
     45    > a,
     46    > a:hover,
     47    > a:focus,
     48    > span {
     49      color: @pager-disabled-color;
     50      background-color: @pager-bg;
     51      cursor: @cursor-disabled;
     52    }
     53  }
    1154}
    12 .pager li {
    13   display: inline;
    14 }
    15 .pager li > a,
    16 .pager li > span {
    17   display: inline-block;
    18   padding: 5px 14px;
    19   background-color: #fff;
    20   border: 1px solid #ddd;
    21   .border-radius(15px);
    22 }
    23 .pager li > a:hover,
    24 .pager li > a:focus {
    25   text-decoration: none;
    26   background-color: #f5f5f5;
    27 }
    28 .pager .next > a,
    29 .pager .next > span {
    30   float: right;
    31 }
    32 .pager .previous > a,
    33 .pager .previous > span {
    34   float: left;
    35 }
    36 .pager .disabled > a,
    37 .pager .disabled > a:hover,
    38 .pager .disabled > a:focus,
    39 .pager .disabled > span {
    40   color: @grayLight;
    41   background-color: #fff;
    42   cursor: default;
    43 }
  • _plugins_/bootstrap/trunk/bootstrap/css/pagination.less

    r70593 r90741  
    22// Pagination (multiple pages)
    33// --------------------------------------------------
     4.pagination {
     5  display: inline-block;
     6  padding-left: 0;
     7  margin: @line-height-computed 0;
     8  border-radius: @border-radius-base;
    49
    5 // Space out pagination from surrounding content
    6 .pagination {
    7   margin: @baseLineHeight 0;
     10  > li {
     11    display: inline; // Remove list-style and block-level defaults
     12    > a,
     13    > span {
     14      position: relative;
     15      float: left; // Collapse white-space
     16      padding: @padding-base-vertical @padding-base-horizontal;
     17      line-height: @line-height-base;
     18      text-decoration: none;
     19      color: @pagination-color;
     20      background-color: @pagination-bg;
     21      border: 1px solid @pagination-border;
     22      margin-left: -1px;
     23    }
     24    &:first-child {
     25      > a,
     26      > span {
     27        margin-left: 0;
     28        .border-left-radius(@border-radius-base);
     29      }
     30    }
     31    &:last-child {
     32      > a,
     33      > span {
     34        .border-right-radius(@border-radius-base);
     35      }
     36    }
     37  }
     38
     39  > li > a,
     40  > li > span {
     41    &:hover,
     42    &:focus {
     43      z-index: 3;
     44      color: @pagination-hover-color;
     45      background-color: @pagination-hover-bg;
     46      border-color: @pagination-hover-border;
     47    }
     48  }
     49
     50  > .active > a,
     51  > .active > span {
     52    &,
     53    &:hover,
     54    &:focus {
     55      z-index: 2;
     56      color: @pagination-active-color;
     57      background-color: @pagination-active-bg;
     58      border-color: @pagination-active-border;
     59      cursor: default;
     60    }
     61  }
     62
     63  > .disabled {
     64    > span,
     65    > span:hover,
     66    > span:focus,
     67    > a,
     68    > a:hover,
     69    > a:focus {
     70      color: @pagination-disabled-color;
     71      background-color: @pagination-disabled-bg;
     72      border-color: @pagination-disabled-border;
     73      cursor: @cursor-disabled;
     74    }
     75  }
    876}
    9 
    10 .pagination ul {
    11   // Allow for text-based alignment
    12   display: inline-block;
    13   .ie7-inline-block();
    14   // Reset default ul styles
    15   margin-left: 0;
    16   margin-bottom: 0;
    17   // Visuals
    18   .border-radius(@baseBorderRadius);
    19   .box-shadow(0 1px 2px rgba(0,0,0,.05));
    20 }
    21 .pagination ul > li {
    22   display: inline; // Remove list-style and block-level defaults
    23 }
    24 .pagination ul > li > a,
    25 .pagination ul > li > span {
    26   float: left; // Collapse white-space
    27   padding: 4px 12px;
    28   line-height: @baseLineHeight;
    29   text-decoration: none;
    30   background-color: @paginationBackground;
    31   border: 1px solid @paginationBorder;
    32   border-left-width: 0;
    33 }
    34 .pagination ul > li > a:hover,
    35 .pagination ul > li > a:focus,
    36 .pagination ul > .active > a,
    37 .pagination ul > .active > span {
    38   background-color: @paginationActiveBackground;
    39 }
    40 .pagination ul > .active > a,
    41 .pagination ul > .active > span {
    42   color: @grayLight;
    43   cursor: default;
    44 }
    45 .pagination ul > .disabled > span,
    46 .pagination ul > .disabled > a,
    47 .pagination ul > .disabled > a:hover,
    48 .pagination ul > .disabled > a:focus {
    49   color: @grayLight;
    50   background-color: transparent;
    51   cursor: default;
    52 }
    53 .pagination ul > li:first-child > a,
    54 .pagination ul > li:first-child > span {
    55   border-left-width: 1px;
    56   .border-left-radius(@baseBorderRadius);
    57 }
    58 .pagination ul > li:last-child > a,
    59 .pagination ul > li:last-child > span {
    60   .border-right-radius(@baseBorderRadius);
    61 }
    62 
    63 
    64 // Alignment
    65 // --------------------------------------------------
    66 
    67 .pagination-centered {
    68   text-align: center;
    69 }
    70 .pagination-right {
    71   text-align: right;
    72 }
    73 
    7477
    7578// Sizing
     
    7780
    7881// Large
    79 .pagination-large {
    80   ul > li > a,
    81   ul > li > span {
    82     padding: @paddingLarge;
    83     font-size: @fontSizeLarge;
    84   }
    85   ul > li:first-child > a,
    86   ul > li:first-child > span {
    87     .border-left-radius(@borderRadiusLarge);
    88   }
    89   ul > li:last-child > a,
    90   ul > li:last-child > span {
    91     .border-right-radius(@borderRadiusLarge);
    92   }
    93 }
    94 
    95 // Small and mini
    96 .pagination-mini,
    97 .pagination-small {
    98   ul > li:first-child > a,
    99   ul > li:first-child > span {
    100     .border-left-radius(@borderRadiusSmall);
    101   }
    102   ul > li:last-child > a,
    103   ul > li:last-child > span {
    104     .border-right-radius(@borderRadiusSmall);
    105   }
     82.pagination-lg {
     83  .pagination-size(@padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large);
    10684}
    10785
    10886// Small
    109 .pagination-small {
    110   ul > li > a,
    111   ul > li > span {
    112     padding: @paddingSmall;
    113     font-size: @fontSizeSmall;
    114   }
     87.pagination-sm {
     88  .pagination-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small);
    11589}
    116 // Mini
    117 .pagination-mini {
    118   ul > li > a,
    119   ul > li > span {
    120     padding: @paddingMini;
    121     font-size: @fontSizeMini;
    122   }
    123 }
  • _plugins_/bootstrap/trunk/bootstrap/css/popovers.less

    r70593 r90741  
    88  top: 0;
    99  left: 0;
    10   z-index: @zindexPopover;
     10  z-index: @zindex-popover;
    1111  display: none;
    12   max-width: 276px;
     12  max-width: @popover-max-width;
    1313  padding: 1px;
    14   text-align: left; // Reset given new insertion method
    15   background-color: @popoverBackground;
    16   -webkit-background-clip: padding-box;
    17      -moz-background-clip: padding;
    18           background-clip: padding-box;
    19   border: 1px solid #ccc;
    20   border: 1px solid rgba(0,0,0,.2);
    21   .border-radius(6px);
     14  // Our parent element can be arbitrary since popovers are by default inserted as a sibling of their target element.
     15  // So reset our font and text properties to avoid inheriting weird values.
     16  .reset-text();
     17  font-size: @font-size-base;
     18
     19  background-color: @popover-bg;
     20  background-clip: padding-box;
     21  border: 1px solid @popover-fallback-border-color;
     22  border: 1px solid @popover-border-color;
     23  border-radius: @border-radius-large;
    2224  .box-shadow(0 5px 10px rgba(0,0,0,.2));
    2325
    24   // Overrides for proper insertion
    25   white-space: normal;
    26 
    2726  // Offset the popover to account for the popover arrow
    28   &.top     { margin-top: -10px; }
    29   &.right   { margin-left: 10px; }
    30   &.bottom  { margin-top: 10px; }
    31   &.left    { margin-left: -10px; }
     27  &.top     { margin-top: -@popover-arrow-width; }
     28  &.right   { margin-left: @popover-arrow-width; }
     29  &.bottom  { margin-top: @popover-arrow-width; }
     30  &.left    { margin-left: -@popover-arrow-width; }
    3231}
    3332
     
    3534  margin: 0; // reset heading margin
    3635  padding: 8px 14px;
    37   font-size: 14px;
    38   font-weight: normal;
    39   line-height: 18px;
    40   background-color: @popoverTitleBackground;
    41   border-bottom: 1px solid darken(@popoverTitleBackground, 5%);
    42   .border-radius(5px 5px 0 0);
    43 
    44   &:empty {
    45     display: none;
    46   }
     36  font-size: @font-size-base;
     37  background-color: @popover-title-bg;
     38  border-bottom: 1px solid darken(@popover-title-bg, 5%);
     39  border-radius: (@border-radius-large - 1) (@border-radius-large - 1) 0 0;
    4740}
    4841
     
    5548// .arrow is outer, .arrow:after is inner
    5649
    57 .popover .arrow,
    58 .popover .arrow:after {
    59   position: absolute;
    60   display: block;
    61   width: 0;
    62   height: 0;
    63   border-color: transparent;
    64   border-style: solid;
     50.popover > .arrow {
     51  &,
     52  &:after {
     53    position: absolute;
     54    display: block;
     55    width: 0;
     56    height: 0;
     57    border-color: transparent;
     58    border-style: solid;
     59  }
    6560}
    66 .popover .arrow {
    67   border-width: @popoverArrowOuterWidth;
     61.popover > .arrow {
     62  border-width: @popover-arrow-outer-width;
    6863}
    69 .popover .arrow:after {
    70   border-width: @popoverArrowWidth;
     64.popover > .arrow:after {
     65  border-width: @popover-arrow-width;
    7166  content: "";
    7267}
    7368
    7469.popover {
    75   &.top .arrow {
     70  &.top > .arrow {
    7671    left: 50%;
    77     margin-left: -@popoverArrowOuterWidth;
     72    margin-left: -@popover-arrow-outer-width;
    7873    border-bottom-width: 0;
    79     border-top-color: #999; // IE8 fallback
    80     border-top-color: @popoverArrowOuterColor;
    81     bottom: -@popoverArrowOuterWidth;
     74    border-top-color: @popover-arrow-outer-fallback-color; // IE8 fallback
     75    border-top-color: @popover-arrow-outer-color;
     76    bottom: -@popover-arrow-outer-width;
    8277    &:after {
     78      content: " ";
    8379      bottom: 1px;
    84       margin-left: -@popoverArrowWidth;
     80      margin-left: -@popover-arrow-width;
    8581      border-bottom-width: 0;
    86       border-top-color: @popoverArrowColor;
     82      border-top-color: @popover-arrow-color;
    8783    }
    8884  }
    89   &.right .arrow {
     85  &.right > .arrow {
    9086    top: 50%;
    91     left: -@popoverArrowOuterWidth;
    92     margin-top: -@popoverArrowOuterWidth;
     87    left: -@popover-arrow-outer-width;
     88    margin-top: -@popover-arrow-outer-width;
    9389    border-left-width: 0;
    94     border-right-color: #999; // IE8 fallback
    95     border-right-color: @popoverArrowOuterColor;
     90    border-right-color: @popover-arrow-outer-fallback-color; // IE8 fallback
     91    border-right-color: @popover-arrow-outer-color;
    9692    &:after {
     93      content: " ";
    9794      left: 1px;
    98       bottom: -@popoverArrowWidth;
     95      bottom: -@popover-arrow-width;
    9996      border-left-width: 0;
    100       border-right-color: @popoverArrowColor;
     97      border-right-color: @popover-arrow-color;
    10198    }
    10299  }
    103   &.bottom .arrow {
     100  &.bottom > .arrow {
    104101    left: 50%;
    105     margin-left: -@popoverArrowOuterWidth;
     102    margin-left: -@popover-arrow-outer-width;
    106103    border-top-width: 0;
    107     border-bottom-color: #999; // IE8 fallback
    108     border-bottom-color: @popoverArrowOuterColor;
    109     top: -@popoverArrowOuterWidth;
     104    border-bottom-color: @popover-arrow-outer-fallback-color; // IE8 fallback
     105    border-bottom-color: @popover-arrow-outer-color;
     106    top: -@popover-arrow-outer-width;
    110107    &:after {
     108      content: " ";
    111109      top: 1px;
    112       margin-left: -@popoverArrowWidth;
     110      margin-left: -@popover-arrow-width;
    113111      border-top-width: 0;
    114       border-bottom-color: @popoverArrowColor;
     112      border-bottom-color: @popover-arrow-color;
    115113    }
    116114  }
    117115
    118   &.left .arrow {
     116  &.left > .arrow {
    119117    top: 50%;
    120     right: -@popoverArrowOuterWidth;
    121     margin-top: -@popoverArrowOuterWidth;
     118    right: -@popover-arrow-outer-width;
     119    margin-top: -@popover-arrow-outer-width;
    122120    border-right-width: 0;
    123     border-left-color: #999; // IE8 fallback
    124     border-left-color: @popoverArrowOuterColor;
     121    border-left-color: @popover-arrow-outer-fallback-color; // IE8 fallback
     122    border-left-color: @popover-arrow-outer-color;
    125123    &:after {
     124      content: " ";
    126125      right: 1px;
    127126      border-right-width: 0;
    128       border-left-color: @popoverArrowColor;
    129       bottom: -@popoverArrowWidth;
     127      border-left-color: @popover-arrow-color;
     128      bottom: -@popover-arrow-width;
    130129    }
    131130  }
    132 
    133131}
  • _plugins_/bootstrap/trunk/bootstrap/css/progress-bars.less

    r69198 r90741  
    44
    55
    6 // ANIMATIONS
    7 // ----------
     6// Bar animations
     7// -------------------------
    88
    9 // Webkit
     9// WebKit
    1010@-webkit-keyframes progress-bar-stripes {
    1111  from  { background-position: 40px 0; }
     
    1313}
    1414
    15 // Firefox
    16 @-moz-keyframes progress-bar-stripes {
    17   from  { background-position: 40px 0; }
    18   to    { background-position: 0 0; }
    19 }
    20 
    21 // IE9
    22 @-ms-keyframes progress-bar-stripes {
    23   from  { background-position: 40px 0; }
    24   to    { background-position: 0 0; }
    25 }
    26 
    27 // Opera
    28 @-o-keyframes progress-bar-stripes {
    29   from  { background-position: 0 0; }
    30   to    { background-position: 40px 0; }
    31 }
    32 
    33 // Spec
     15// Spec and IE10+
    3416@keyframes progress-bar-stripes {
    3517  from  { background-position: 40px 0; }
     
    3820
    3921
    40 
    41 // THE BARS
    42 // --------
     22// Bar itself
     23// -------------------------
    4324
    4425// Outer container
    4526.progress {
    4627  overflow: hidden;
    47   height: @baseLineHeight;
    48   margin-bottom: @baseLineHeight;
    49   #gradient > .vertical(#f5f5f5, #f9f9f9);
     28  height: @line-height-computed;
     29  margin-bottom: @line-height-computed;
     30  background-color: @progress-bg;
     31  border-radius: @progress-border-radius;
    5032  .box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
    51   .border-radius(@baseBorderRadius);
    5233}
    5334
    5435// Bar of progress
    55 .progress .bar {
     36.progress-bar {
     37  float: left;
    5638  width: 0%;
    5739  height: 100%;
    58   color: @white;
    59   float: left;
    60   font-size: 12px;
     40  font-size: @font-size-small;
     41  line-height: @line-height-computed;
     42  color: @progress-bar-color;
    6143  text-align: center;
    62   text-shadow: 0 -1px 0 rgba(0,0,0,.25);
    63   #gradient > .vertical(#149bdf, #0480be);
     44  background-color: @progress-bar-bg;
    6445  .box-shadow(inset 0 -1px 0 rgba(0,0,0,.15));
    65   .box-sizing(border-box);
    6646  .transition(width .6s ease);
    67 }
    68 .progress .bar + .bar {
    69   .box-shadow(~"inset 1px 0 0 rgba(0,0,0,.15), inset 0 -1px 0 rgba(0,0,0,.15)");
    7047}
    7148
    7249// Striped bars
    73 .progress-striped .bar {
    74   #gradient > .striped(#149bdf);
    75   .background-size(40px 40px);
     50//
     51// `.progress-striped .progress-bar` is deprecated as of v3.2.0 in favor of the
     52// `.progress-bar-striped` class, which you just add to an existing
     53// `.progress-bar`.
     54.progress-striped .progress-bar,
     55.progress-bar-striped {
     56  #gradient > .striped();
     57  background-size: 40px 40px;
    7658}
    7759
    7860// Call animation for the active one
    79 .progress.active .bar {
    80   -webkit-animation: progress-bar-stripes 2s linear infinite;
    81      -moz-animation: progress-bar-stripes 2s linear infinite;
    82       -ms-animation: progress-bar-stripes 2s linear infinite;
    83        -o-animation: progress-bar-stripes 2s linear infinite;
    84           animation: progress-bar-stripes 2s linear infinite;
     61//
     62// `.progress.active .progress-bar` is deprecated as of v3.2.0 in favor of the
     63// `.progress-bar.active` approach.
     64.progress.active .progress-bar,
     65.progress-bar.active {
     66  .animation(progress-bar-stripes 2s linear infinite);
    8567}
    8668
    8769
     70// Variations
     71// -------------------------
    8872
    89 // COLORS
    90 // ------
    91 
    92 // Danger (red)
    93 .progress-danger .bar, .progress .bar-danger {
    94   #gradient > .vertical(#ee5f5b, #c43c35);
    95 }
    96 .progress-danger.progress-striped .bar, .progress-striped .bar-danger {
    97   #gradient > .striped(#ee5f5b);
     73.progress-bar-success {
     74  .progress-bar-variant(@progress-bar-success-bg);
    9875}
    9976
    100 // Success (green)
    101 .progress-success .bar, .progress .bar-success {
    102   #gradient > .vertical(#62c462, #57a957);
    103 }
    104 .progress-success.progress-striped .bar, .progress-striped .bar-success {
    105   #gradient > .striped(#62c462);
     77.progress-bar-info {
     78  .progress-bar-variant(@progress-bar-info-bg);
    10679}
    10780
    108 // Info (teal)
    109 .progress-info .bar, .progress .bar-info {
    110   #gradient > .vertical(#5bc0de, #339bb9);
    111 }
    112 .progress-info.progress-striped .bar, .progress-striped .bar-info {
    113   #gradient > .striped(#5bc0de);
     81.progress-bar-warning {
     82  .progress-bar-variant(@progress-bar-warning-bg);
    11483}
    11584
    116 // Warning (orange)
    117 .progress-warning .bar, .progress .bar-warning {
    118   #gradient > .vertical(lighten(@orange, 15%), @orange);
     85.progress-bar-danger {
     86  .progress-bar-variant(@progress-bar-danger-bg);
    11987}
    120 .progress-warning.progress-striped .bar, .progress-striped .bar-warning {
    121   #gradient > .striped(lighten(@orange, 15%));
    122 }
  • _plugins_/bootstrap/trunk/bootstrap/css/responsive-utilities.less