git.roojs.org Git - bootswatch/blob - bower_components/font-awesome/src/assets/less/bootstrap-3.0.0/theme.less

   1
   2 //
   3 // Load core variables and mixins
   4 // --------------------------------------------------
   5
   6 @import "variables.less";
   7 @import "mixins.less";
   8
   9
  10
  11 //
  12 // Buttons
  13 // --------------------------------------------------
  14
  15 // Common styles
  16 .btn-default,
  17 .btn-primary,
  18 .btn-success,
  19 .btn-info,
  20 .btn-warning,
  21 .btn-danger {
  22   text-shadow: 0 -1px 0 rgba(0,0,0,.2);
  23   @shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075);
  24   .box-shadow(@shadow);
  25
  26   // Reset the shadow
  27   &:active,
  28   &.active {
  29     .box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
  30   }
  31 }
  32
  33 // Mixin for generating new styles
  34 .btn-styles(@btn-color: #555;) {
  35   #gradient > .vertical(@start-color: @btn-color; @end-color: darken(@btn-color, 10%));
  36   border-color: darken(@btn-color, 12%);
  37
  38   &:active,
  39   &.active {
  40     background-color: darken(@btn-color, 10%);
  41     border-color: darken(@btn-color, 12%);
  42   }
  43 }
  44
  45 // Common styles
  46 .btn {
  47   // Remove the gradient for the pressed/active state
  48   &:active,
  49   &.active {
  50     background-image: none;
  51   }
  52 }
  53
  54 // Apply the mixin to the buttons
  55 .btn-default { .btn-styles(@btn-default-bg;); text-shadow: 0 1px 0 #fff; border-color: #ccc; }
  56 .btn-primary { .btn-styles(@btn-primary-bg); }
  57 .btn-success { .btn-styles(@btn-success-bg); }
  58 .btn-warning { .btn-styles(@btn-warning-bg); }
  59 .btn-danger  { .btn-styles(@btn-danger-bg); }
  60 .btn-info    { .btn-styles(@btn-info-bg); }
  61
  62
  63
  64 //
  65 // Images
  66 // --------------------------------------------------
  67
  68 .thumbnail,
  69 .img-thumbnail {
  70   .box-shadow(0 1px 2px rgba(0,0,0,.075));
  71 }
  72
  73
  74
  75 //
  76 // Dropdowns
  77 // --------------------------------------------------
  78
  79 .dropdown-menu > li > a:hover,
  80 .dropdown-menu > li > a:focus,
  81 .dropdown-menu > .active > a,
  82 .dropdown-menu > .active > a:hover,
  83 .dropdown-menu > .active > a:focus {
  84   #gradient > .vertical(@start-color: @dropdown-link-hover-bg; @end-color: darken(@dropdown-link-hover-bg, 5%));
  85   background-color: darken(@dropdown-link-hover-bg, 5%);
  86 }
  87
  88
  89
  90 //
  91 // Navbar
  92 // --------------------------------------------------
  93
  94 // Basic navbar
  95 .navbar {
  96   #gradient > .vertical(@start-color: lighten(@navbar-default-bg, 10%); @end-color: @navbar-default-bg;);
  97   border-radius: @navbar-border-radius;
  98   @shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 5px rgba(0,0,0,.075);
  99   .box-shadow(@shadow);
 100
 101   .navbar-nav > .active > a {
 102     background-color: @navbar-default-bg;
 103   }
 104 }
 105 .navbar-brand,
 106 .navbar-nav > li > a {
 107   text-shadow: 0 1px 0 rgba(255,255,255,.25);
 108 }
 109
 110 // Inverted navbar
 111 .navbar-inverse {
 112   #gradient > .vertical(@start-color: lighten(@navbar-inverse-bg, 10%); @end-color: @navbar-inverse-bg;);
 113
 114   .navbar-nav > .active > a {
 115     background-color: @navbar-inverse-bg;
 116   }
 117
 118   .navbar-brand,
 119   .navbar-nav > li > a {
 120     text-shadow: 0 -1px 0 rgba(0,0,0,.25);
 121   }
 122 }
 123
 124 // Undo rounded corners in static and fixed navbars
 125 .navbar-static-top,
 126 .navbar-fixed-top,
 127 .navbar-fixed-bottom {
 128   border-radius: 0;
 129 }
 130
 131
 132
 133 //
 134 // Alerts
 135 // --------------------------------------------------
 136
 137 // Common styles
 138 .alert {
 139   text-shadow: 0 1px 0 rgba(255,255,255,.2);
 140   @shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 2px rgba(0,0,0,.05);
 141   .box-shadow(@shadow);
 142 }
 143
 144 // Mixin for generating new styles
 145 .alert-styles(@color) {
 146   #gradient > .vertical(@start-color: @color; @end-color: darken(@color, 7.5%));
 147   border-color: darken(@color, 15%);
 148 }
 149
 150 // Apply the mixin to the alerts
 151 .alert-success    { .alert-styles(@alert-success-bg); }
 152 .alert-info       { .alert-styles(@alert-info-bg); }
 153 .alert-warning    { .alert-styles(@alert-warning-bg); }
 154 .alert-danger     { .alert-styles(@alert-danger-bg); }
 155
 156
 157
 158 //
 159 // Progress bars
 160 // --------------------------------------------------
 161
 162 // Give the progress background some depth
 163 .progress {
 164   #gradient > .vertical(@start-color: darken(@progress-bg, 4%); @end-color: @progress-bg;)
 165 }
 166
 167 // Mixin for generating new styles
 168 .progress-bar-styles(@color) {
 169   #gradient > .vertical(@start-color: @color; @end-color: darken(@color, 10%));
 170 }
 171
 172 // Apply the mixin to the progress bars
 173 .progress-bar            { .progress-bar-styles(@progress-bar-bg); }
 174 .progress-bar-success    { .progress-bar-styles(@progress-bar-success-bg); }
 175 .progress-bar-info       { .progress-bar-styles(@progress-bar-info-bg); }
 176 .progress-bar-warning    { .progress-bar-styles(@progress-bar-warning-bg); }
 177 .progress-bar-danger     { .progress-bar-styles(@progress-bar-danger-bg); }
 178
 179
 180
 181 //
 182 // List groups
 183 // --------------------------------------------------
 184
 185 .list-group {
 186   border-radius: @border-radius-base;
 187   .box-shadow(0 1px 2px rgba(0,0,0,.075));
 188 }
 189 .list-group-item.active,
 190 .list-group-item.active:hover,
 191 .list-group-item.active:focus {
 192   text-shadow: 0 -1px 0 darken(@list-group-active-bg, 10%);
 193   #gradient > .vertical(@start-color: @list-group-active-bg; @end-color: darken(@list-group-active-bg, 7.5%));
 194   border-color: darken(@list-group-active-border, 7.5%);
 195 }
 196
 197
 198
 199 //
 200 // Panels
 201 // --------------------------------------------------
 202
 203 // Common styles
 204 .panel {
 205   .box-shadow(0 1px 2px rgba(0,0,0,.05));
 206 }
 207
 208 // Mixin for generating new styles
 209 .panel-heading-styles(@color) {
 210   #gradient > .vertical(@start-color: @color; @end-color: darken(@color, 5%));
 211 }
 212
 213 // Apply the mixin to the panel headings only
 214 .panel-default > .panel-heading   { .panel-heading-styles(@panel-default-heading-bg); }
 215 .panel-primary > .panel-heading   { .panel-heading-styles(@panel-primary-heading-bg); }
 216 .panel-success > .panel-heading   { .panel-heading-styles(@panel-success-heading-bg); }
 217 .panel-info > .panel-heading      { .panel-heading-styles(@panel-info-heading-bg); }
 218 .panel-warning > .panel-heading   { .panel-heading-styles(@panel-warning-heading-bg); }
 219 .panel-danger > .panel-heading    { .panel-heading-styles(@panel-danger-heading-bg); }
 220
 221
 222
 223 //
 224 // Wells
 225 // --------------------------------------------------
 226
 227 .well {
 228   #gradient > .vertical(@start-color: darken(@well-bg, 5%); @end-color: @well-bg;);
 229   border-color: darken(@well-bg, 10%);
 230   @shadow: inset 0 1px 3px rgba(0,0,0,.05), 0 1px 0 rgba(255,255,255,.1);
 231   .box-shadow(@shadow);
 232 }