Mercurial Mercurial > hg > eskp-app / file revision
summary | shortlog | changelog | graph | tags | bookmarks | branches | files | changeset | file | latest | revisions | annotate | diff | comparison | raw | help
static/less/theme.less
author Jens-Uwe Grooss <j.-u.grooss@fz-juelich.de>
Tue, 10 Feb 2015 08:14:09 +0100
changeset 391 0310a10ab15b
parent 53 3416f82943ea
permissions -rwxr-xr-x
kl. Text?nderung 
     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 }
eskp-app/1.0

Impressum Datenschutzerklärung