www.aleph1.co.uk Git - yaffs-website/blob - vendor/geedmo/yamm3/demo/components/bootstrap/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 // 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 }