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