Home | History | Annotate | Download | only in bootstrap
      1 
      2 //
      3 // Load core variables and mixins
      4 // --------------------------------------------------
      5 
      6 @import "variables.less";
      7 @import "mixins.less";
      8 
      9 
     10 //
     11 // Buttons
     12 // --------------------------------------------------
     13 
     14 // Common styles
     15 .btn-default,
     16 .btn-primary,
     17 .btn-success,
     18 .btn-info,
     19 .btn-warning,
     20 .btn-danger {
     21   text-shadow: 0 -1px 0 rgba(0,0,0,.2);
     22   @shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075);
     23   .box-shadow(@shadow);
     24 
     25   // Reset the shadow
     26   &:active,
     27   &.active {
     28     .box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
     29   }
     30 
     31   .badge {
     32     text-shadow: none;
     33   }
     34 }
     35 
     36 // Mixin for generating new styles
     37 .btn-styles(@btn-color: #555) {
     38   #gradient > .vertical(@start-color: @btn-color; @end-color: darken(@btn-color, 12%));
     39   .reset-filter(); // Disable gradients for IE9 because filter bleeds through rounded corners; see https://github.com/twbs/bootstrap/issues/10620
     40   background-repeat: repeat-x;
     41   border-color: darken(@btn-color, 14%);
     42 
     43   &:hover,
     44   &:focus  {
     45     background-color: darken(@btn-color, 12%);
     46     background-position: 0 -15px;
     47   }
     48 
     49   &:active,
     50   &.active {
     51     background-color: darken(@btn-color, 12%);
     52     border-color: darken(@btn-color, 14%);
     53   }
     54 
     55   &.disabled,
     56   &:disabled,
     57   &[disabled] {
     58     background-color: darken(@btn-color, 12%);
     59     background-image: none;
     60   }
     61 }
     62 
     63 // Common styles
     64 .btn {
     65   // Remove the gradient for the pressed/active state
     66   &:active,
     67   &.active {
     68     background-image: none;
     69   }
     70 }
     71 
     72 // Apply the mixin to the buttons
     73 .btn-default { .btn-styles(@btn-default-bg); text-shadow: 0 1px 0 #fff; border-color: #ccc; }
     74 .btn-primary { .btn-styles(@btn-primary-bg); }
     75 .btn-success { .btn-styles(@btn-success-bg); }
     76 .btn-info    { .btn-styles(@btn-info-bg); }
     77 .btn-warning { .btn-styles(@btn-warning-bg); }
     78 .btn-danger  { .btn-styles(@btn-danger-bg); }
     79 
     80 
     81 //
     82 // Images
     83 // --------------------------------------------------
     84 
     85 .thumbnail,
     86 .img-thumbnail {
     87   .box-shadow(0 1px 2px rgba(0,0,0,.075));
     88 }
     89 
     90 
     91 //
     92 // Dropdowns
     93 // --------------------------------------------------
     94 
     95 .dropdown-menu > li > a:hover,
     96 .dropdown-menu > li > a:focus {
     97   #gradient > .vertical(@start-color: @dropdown-link-hover-bg; @end-color: darken(@dropdown-link-hover-bg, 5%));
     98   background-color: darken(@dropdown-link-hover-bg, 5%);
     99 }
    100 .dropdown-menu > .active > a,
    101 .dropdown-menu > .active > a:hover,
    102 .dropdown-menu > .active > a:focus {
    103   #gradient > .vertical(@start-color: @dropdown-link-active-bg; @end-color: darken(@dropdown-link-active-bg, 5%));
    104   background-color: darken(@dropdown-link-active-bg, 5%);
    105 }
    106 
    107 
    108 //
    109 // Navbar
    110 // --------------------------------------------------
    111 
    112 // Default navbar
    113 .navbar-default {
    114   #gradient > .vertical(@start-color: lighten(@navbar-default-bg, 10%); @end-color: @navbar-default-bg);
    115   .reset-filter(); // Remove gradient in IE<10 to fix bug where dropdowns don't get triggered
    116   border-radius: @navbar-border-radius;
    117   @shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 5px rgba(0,0,0,.075);
    118   .box-shadow(@shadow);
    119 
    120   .navbar-nav > .open > a,
    121   .navbar-nav > .active > a {
    122     #gradient > .vertical(@start-color: darken(@navbar-default-link-active-bg, 5%); @end-color: darken(@navbar-default-link-active-bg, 2%));
    123     .box-shadow(inset 0 3px 9px rgba(0,0,0,.075));
    124   }
    125 }
    126 .navbar-brand,
    127 .navbar-nav > li > a {
    128   text-shadow: 0 1px 0 rgba(255,255,255,.25);
    129 }
    130 
    131 // Inverted navbar
    132 .navbar-inverse {
    133   #gradient > .vertical(@start-color: lighten(@navbar-inverse-bg, 10%); @end-color: @navbar-inverse-bg);
    134   .reset-filter(); // Remove gradient in IE<10 to fix bug where dropdowns don't get triggered; see https://github.com/twbs/bootstrap/issues/10257
    135 
    136   .navbar-nav > .open > a,
    137   .navbar-nav > .active > a {
    138     #gradient > .vertical(@start-color: @navbar-inverse-link-active-bg; @end-color: lighten(@navbar-inverse-link-active-bg, 2.5%));
    139     .box-shadow(inset 0 3px 9px rgba(0,0,0,.25));
    140   }
    141 
    142   .navbar-brand,
    143   .navbar-nav > li > a {
    144     text-shadow: 0 -1px 0 rgba(0,0,0,.25);
    145   }
    146 }
    147 
    148 // Undo rounded corners in static and fixed navbars
    149 .navbar-static-top,
    150 .navbar-fixed-top,
    151 .navbar-fixed-bottom {
    152   border-radius: 0;
    153 }
    154 
    155 // Fix active state of dropdown items in collapsed mode
    156 @media (max-width: @grid-float-breakpoint-max) {
    157   .navbar .navbar-nav .open .dropdown-menu > .active > a {
    158     &,
    159     &:hover,
    160     &:focus {
    161       color: #fff;
    162       #gradient > .vertical(@start-color: @dropdown-link-active-bg; @end-color: darken(@dropdown-link-active-bg, 5%));
    163     }
    164   }
    165 }
    166 
    167 
    168 //
    169 // Alerts
    170 // --------------------------------------------------
    171 
    172 // Common styles
    173 .alert {
    174   text-shadow: 0 1px 0 rgba(255,255,255,.2);
    175   @shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 2px rgba(0,0,0,.05);
    176   .box-shadow(@shadow);
    177 }
    178 
    179 // Mixin for generating new styles
    180 .alert-styles(@color) {
    181   #gradient > .vertical(@start-color: @color; @end-color: darken(@color, 7.5%));
    182   border-color: darken(@color, 15%);
    183 }
    184 
    185 // Apply the mixin to the alerts
    186 .alert-success    { .alert-styles(@alert-success-bg); }
    187 .alert-info       { .alert-styles(@alert-info-bg); }
    188 .alert-warning    { .alert-styles(@alert-warning-bg); }
    189 .alert-danger     { .alert-styles(@alert-danger-bg); }
    190 
    191 
    192 //
    193 // Progress bars
    194 // --------------------------------------------------
    195 
    196 // Give the progress background some depth
    197 .progress {
    198   #gradient > .vertical(@start-color: darken(@progress-bg, 4%); @end-color: @progress-bg)
    199 }
    200 
    201 // Mixin for generating new styles
    202 .progress-bar-styles(@color) {
    203   #gradient > .vertical(@start-color: @color; @end-color: darken(@color, 10%));
    204 }
    205 
    206 // Apply the mixin to the progress bars
    207 .progress-bar            { .progress-bar-styles(@progress-bar-bg); }
    208 .progress-bar-success    { .progress-bar-styles(@progress-bar-success-bg); }
    209 .progress-bar-info       { .progress-bar-styles(@progress-bar-info-bg); }
    210 .progress-bar-warning    { .progress-bar-styles(@progress-bar-warning-bg); }
    211 .progress-bar-danger     { .progress-bar-styles(@progress-bar-danger-bg); }
    212 
    213 // Reset the striped class because our mixins don't do multiple gradients and
    214 // the above custom styles override the new `.progress-bar-striped` in v3.2.0.
    215 .progress-bar-striped {
    216   #gradient > .striped();
    217 }
    218 
    219 
    220 //
    221 // List groups
    222 // --------------------------------------------------
    223 
    224 .list-group {
    225   border-radius: @border-radius-base;
    226   .box-shadow(0 1px 2px rgba(0,0,0,.075));
    227 }
    228 .list-group-item.active,
    229 .list-group-item.active:hover,
    230 .list-group-item.active:focus {
    231   text-shadow: 0 -1px 0 darken(@list-group-active-bg, 10%);
    232   #gradient > .vertical(@start-color: @list-group-active-bg; @end-color: darken(@list-group-active-bg, 7.5%));
    233   border-color: darken(@list-group-active-border, 7.5%);
    234 
    235   .badge {
    236     text-shadow: none;
    237   }
    238 }
    239 
    240 
    241 //
    242 // Panels
    243 // --------------------------------------------------
    244 
    245 // Common styles
    246 .panel {
    247   .box-shadow(0 1px 2px rgba(0,0,0,.05));
    248 }
    249 
    250 // Mixin for generating new styles
    251 .panel-heading-styles(@color) {
    252   #gradient > .vertical(@start-color: @color; @end-color: darken(@color, 5%));
    253 }
    254 
    255 // Apply the mixin to the panel headings only
    256 .panel-default > .panel-heading   { .panel-heading-styles(@panel-default-heading-bg); }
    257 .panel-primary > .panel-heading   { .panel-heading-styles(@panel-primary-heading-bg); }
    258 .panel-success > .panel-heading   { .panel-heading-styles(@panel-success-heading-bg); }
    259 .panel-info > .panel-heading      { .panel-heading-styles(@panel-info-heading-bg); }
    260 .panel-warning > .panel-heading   { .panel-heading-styles(@panel-warning-heading-bg); }
    261 .panel-danger > .panel-heading    { .panel-heading-styles(@panel-danger-heading-bg); }
    262 
    263 
    264 //
    265 // Wells
    266 // --------------------------------------------------
    267 
    268 .well {
    269   #gradient > .vertical(@start-color: darken(@well-bg, 5%); @end-color: @well-bg);
    270   border-color: darken(@well-bg, 10%);
    271   @shadow: inset 0 1px 3px rgba(0,0,0,.05), 0 1px 0 rgba(255,255,255,.1);
    272   .box-shadow(@shadow);
    273 }
    274