git.roojs.org Git - bootswatch/blob - simplex/bootswatch.less

   1 // Bootswatch.less
   2 // Swatch: Simplex
   3 // Version: 2.0.4
   4 // -----------------------------------------------------
   5
   6 @boxShadow: 0 1px 1px rgba(0, 0, 0, 0.3);
   7
   8 // TYPOGRAPHY
   9 // -----------------------------------------------------
  10
  11 h6, .hero-unit {
  12         color: @headingsColor;
  13 }
  14
  15 // NAVBAR
  16 // -----------------------------------------------------
  17
  18 .navbar {
  19
  20         .navbar-inner {
  21                 .box-shadow(inset 0 -1px #CFCACA);
  22                 border-bottom: 1px solid #FFF;
  23                 border-bottom: none;
  24         }
  25
  26         .brand {
  27                 padding-top: 10px;
  28                 color: @headingsColor;
  29         }
  30
  31         .navbar-text {
  32                 padding: 14px 10px 11px;
  33                 text-shadow: none;
  34                 font-weight: normal;
  35                 font-size: 11px;
  36                 line-height: 19px;
  37         }
  38
  39         .nav > li > a {
  40                 padding-top: 14px;
  41                 text-shadow: none;
  42                 font-weight: normal;
  43                 font-size: 11px;
  44         }
  45
  46         .nav > li > a:hover {
  47                 text-decoration: underline;
  48         }
  49
  50         .nav .active > a,
  51         .nav .active > a:hover {
  52                 background-color: transparent;
  53         }
  54
  55         .nav li.dropdown .dropdown-toggle .caret,
  56         .nav li.open.dropdown .dropdown-toggle .caret {
  57                 border-top-color: @textColor;
  58         }
  59
  60         .nav-collapse .nav li > a {
  61                 color: @headingsColor;
  62                 font-weight: normal;
  63         }
  64
  65         .nav-collapse .nav li > a:hover {
  66                 background-color: transparent;
  67                 color: @black;
  68                 text-decoration: underline;
  69         }
  70 }
  71
  72 div.subnav {
  73
  74         background-image: none;
  75         background-color: @navbarBackground;
  76         border-bottom: 1px solid transparent;
  77         .box-shadow(@boxShadow);
  78
  79         &.subnav-fixed {
  80                 .box-shadow(inset 0 5px #fff~"," @boxShadow);
  81         }
  82
  83         .nav > li > a {
  84                 padding-top: 12px;
  85                 color: @navbarText;
  86                 font-weight: normal;
  87                 font-size: 11px;
  88
  89                 &:hover {
  90                         text-decoration: underline;
  91                 }
  92         }
  93
  94         .nav > li.open > a,
  95         .nav > li.open > a:hover {
  96                 background-color: transparent;
  97                 border-left: 1px solid whiteSmoke;
  98                 border-right: 1px solid #E5E5E5;
  99         }
 100 }
 101
 102 @media (max-width: 979px) {
 103         form.navbar-form, form.navbar-search {
 104                 border-top: 1px solid #ccc;
 105                 border-bottom: 1px solid #ccc;
 106         }
 107 }
 108
 109 // NAV
 110 // -----------------------------------------------------
 111
 112 .nav .nav-header {
 113         font-weight: normal;
 114         text-transform: none;
 115 }
 116
 117 .nav > li > a {
 118         font-size: 11px;
 119         border-width: 1px;
 120 }
 121
 122 .dropdown-menu {
 123         .border-radius(0);
 124         font-size: 11px;
 125 }
 126
 127 .dropdown.open .dropdown-toggle {
 128         color: @headingsColor;
 129 }
 130
 131 .nav-tabs > li > a,
 132 .nav-tabs > li > a:hover,
 133 .tabbable > .nav-tabs > li > a,
 134 .tabbable > .nav-tabs > li > a:hover {
 135         background-color: darken(@bodyBackground, 3%);
 136         border: 1px solid #ccc;
 137 }
 138
 139 .tabbable > .nav-tabs > li.active > a {
 140         border-bottom: 1px solid transparent;
 141 }
 142
 143 .tabbable.tabs-below > .nav-tabs > li.active > a,
 144 .tabbable.tabs-left > .nav-tabs > li.active > a,
 145 .tabbable.tabs-right > .nav-tabs > li.active > a {
 146         border-bottom: 1px solid #ccc;
 147 }
 148
 149 .nav-pills > li > a:hover {
 150         background-color: transparent;
 151 }
 152
 153 .nav-tabs > li.active > a,
 154 .nav-tabs > li.active > a:hover {
 155         background-color: @bodyBackground;
 156 }
 157
 158 // FORMS
 159 // -----------------------------------------------------
 160
 161 legend {
 162         border-bottom: 1px solid #ddd;
 163 }
 164
 165 .navbar-search .search-query {
 166         border: 1px solid #ddd;
 167         .border-radius(0);
 168         background-color: @bodyBackground;
 169         color: @gray;
 170 }
 171
 172 .help-inline, .help-block {
 173         font-size: 11px;
 174 }
 175
 176 // TABLES
 177 // -----------------------------------------------------
 178
 179
 180 // BUTTONS
 181 // -----------------------------------------------------
 182
 183 .btn {
 184         .border-radius(2px);
 185         font-weight: bold;
 186         #gradient > .vertical-three-colors(@white, @white, 25%, darken(@white, 10%));
 187 }
 188
 189 .btn-primary {
 190         .buttonBackground(lighten(@btnPrimaryBackground, 5%), @btnPrimaryBackground);
 191 }
 192
 193 .btn-warning {
 194         .buttonBackground(lighten(@orange, 5%), @orange);
 195 }
 196
 197 .btn-danger {
 198         .buttonBackground(lighten(@red, 5%), @red);
 199 }
 200
 201 .btn-success {
 202         .buttonBackground(lighten(@green, 5%), @green);
 203 }
 204
 205 .btn-info {
 206         .buttonBackground(lighten(#5bc0de, 5%), #5bc0de);
 207 }
 208
 209 .btn-inverse {
 210         .buttonBackground(lighten(@purple, 5%), @purple);
 211 }
 212
 213 // MODALS
 214 // -----------------------------------------------------
 215
 216 .modal,
 217 .modal-header,
 218 .modal-footer {
 219         .border-radius(0);
 220 }
 221
 222 .modal-header {
 223         border-bottom: none;
 224 }
 225
 226 .modal-header,
 227 .modal-body {
 228         background-color: @navbarBackground;
 229 }
 230
 231 .modal-footer {
 232         background-color: @bodyBackground;
 233 }
 234
 235 // MISCELLANEOUS
 236 // -----------------------------------------------------
 237
 238 i[class^="icon-"]{
 239         opacity: 0.6;
 240         vertical-align: -2px;
 241 }
 242
 243 .alert, .alert p, .alert-heading {
 244         font-size: 11px;
 245 }
 246
 247 .progress {
 248     #gradient > .vertical(#e0e0e0, #e8e8e8);
 249 }
 250
 251 .label {
 252         font-size: 11px;
 253         font-weight: normal;
 254 }
 255
 256 .hero-unit {
 257         background-color: @white;
 258         .box-shadow(@boxShadow);
 259 }
 260
 261 .well {
 262         .box-shadow(@boxShadow);
 263         background-color: @white;
 264         border: none;
 265 }
 266
 267 .breadcrumb {
 268         .box-shadow(@boxShadow);
 269         border: 0px solid transparent;
 270         font-size: 11px;
 271 }
 272
 273 footer.footer p {
 274         font-size: 11px;
 275 }