git.roojs.org Git - roojs1/blob - css/buttons.css

   1 .btn {
   2   display: inline-block;
   3   margin-bottom: 0;
   4   font-weight: normal;
   5   text-align: center;
   6   vertical-align: middle;
   7   touch-action: manipulation;
   8   cursor: pointer;
   9   background-image: none;
  10   border: 1px solid transparent;
  11   white-space: nowrap;
  12   padding: 6px 12px;
  13   font-size: 14px;
  14   line-height: 1.42857143;
  15   border-radius: 4px;
  16   -webkit-user-select: none;
  17   -moz-user-select: none;
  18   -ms-user-select: none;
  19   user-select: none;
  20 }
  21 .btn:focus,
  22 .btn:active:focus,
  23 .btn.active:focus,
  24 .btn.focus,
  25 .btn:active.focus,
  26 .btn.active.focus {
  27   outline: 5px auto -webkit-focus-ring-color;
  28   outline-offset: -2px;
  29 }
  30 .btn:hover,
  31 .btn:focus,
  32 .btn.focus {
  33   color: #333333;
  34   text-decoration: none;
  35 }
  36 .btn:active,
  37 .btn.active {
  38   outline: 0;
  39   background-image: none;
  40   -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  41   box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  42 }
  43 .btn.disabled,
  44 .btn[disabled],
  45 fieldset[disabled] .btn {
  46   cursor: not-allowed;
  47   opacity: 0.65;
  48   filter: alpha(opacity=65);
  49   -webkit-box-shadow: none;
  50   box-shadow: none;
  51 }
  52 a.btn.disabled,
  53 fieldset[disabled] a.btn {
  54   pointer-events: none;
  55 }
  56 .btn-default {
  57   color: #333333;
  58   background-color: #ffffff;
  59   border-color: #cccccc;
  60 }
  61 .btn-default:focus,
  62 .btn-default.focus {
  63   color: #333333;
  64   background-color: #e6e6e6;
  65   border-color: #8c8c8c;
  66 }
  67 .btn-default:hover {
  68   color: #333333;
  69   background-color: #e6e6e6;
  70   border-color: #adadad;
  71 }
  72 .btn-default:active,
  73 .btn-default.active,
  74 .open > .dropdown-toggle.btn-default {
  75   color: #333333;
  76   background-color: #e6e6e6;
  77   border-color: #adadad;
  78 }
  79 .btn-default:active:hover,
  80 .btn-default.active:hover,
  81 .open > .dropdown-toggle.btn-default:hover,
  82 .btn-default:active:focus,
  83 .btn-default.active:focus,
  84 .open > .dropdown-toggle.btn-default:focus,
  85 .btn-default:active.focus,
  86 .btn-default.active.focus,
  87 .open > .dropdown-toggle.btn-default.focus {
  88   color: #333333;
  89   background-color: #d4d4d4;
  90   border-color: #8c8c8c;
  91 }
  92 .btn-default:active,
  93 .btn-default.active,
  94 .open > .dropdown-toggle.btn-default {
  95   background-image: none;
  96 }
  97 .btn-default.disabled:hover,
  98 .btn-default[disabled]:hover,
  99 fieldset[disabled] .btn-default:hover,
 100 .btn-default.disabled:focus,
 101 .btn-default[disabled]:focus,
 102 fieldset[disabled] .btn-default:focus,
 103 .btn-default.disabled.focus,
 104 .btn-default[disabled].focus,
 105 fieldset[disabled] .btn-default.focus {
 106   background-color: #ffffff;
 107   border-color: #cccccc;
 108 }
 109 .btn-default .badge {
 110   color: #ffffff;
 111   background-color: #333333;
 112 }
 113 .btn-primary {
 114   color: #ffffff;
 115   background-color: #337ab7;
 116   border-color: #2e6da4;
 117 }
 118 .btn-primary:focus,
 119 .btn-primary.focus {
 120   color: #ffffff;
 121   background-color: #286090;
 122   border-color: #122b40;
 123 }
 124 .btn-primary:hover {
 125   color: #ffffff;
 126   background-color: #286090;
 127   border-color: #204d74;
 128 }
 129 .btn-primary:active,
 130 .btn-primary.active,
 131 .open > .dropdown-toggle.btn-primary {
 132   color: #ffffff;
 133   background-color: #286090;
 134   border-color: #204d74;
 135 }
 136 .btn-primary:active:hover,
 137 .btn-primary.active:hover,
 138 .open > .dropdown-toggle.btn-primary:hover,
 139 .btn-primary:active:focus,
 140 .btn-primary.active:focus,
 141 .open > .dropdown-toggle.btn-primary:focus,
 142 .btn-primary:active.focus,
 143 .btn-primary.active.focus,
 144 .open > .dropdown-toggle.btn-primary.focus {
 145   color: #ffffff;
 146   background-color: #204d74;
 147   border-color: #122b40;
 148 }
 149 .btn-primary:active,
 150 .btn-primary.active,
 151 .open > .dropdown-toggle.btn-primary {
 152   background-image: none;
 153 }
 154 .btn-primary.disabled:hover,
 155 .btn-primary[disabled]:hover,
 156 fieldset[disabled] .btn-primary:hover,
 157 .btn-primary.disabled:focus,
 158 .btn-primary[disabled]:focus,
 159 fieldset[disabled] .btn-primary:focus,
 160 .btn-primary.disabled.focus,
 161 .btn-primary[disabled].focus,
 162 fieldset[disabled] .btn-primary.focus {
 163   background-color: #337ab7;
 164   border-color: #2e6da4;
 165 }
 166 .btn-primary .badge {
 167   color: #337ab7;
 168   background-color: #ffffff;
 169 }
 170 .btn-success {
 171   color: #ffffff;
 172   background-color: #5cb85c;
 173   border-color: #4cae4c;
 174 }
 175 .btn-success:focus,
 176 .btn-success.focus {
 177   color: #ffffff;
 178   background-color: #449d44;
 179   border-color: #255625;
 180 }
 181 .btn-success:hover {
 182   color: #ffffff;
 183   background-color: #449d44;
 184   border-color: #398439;
 185 }
 186 .btn-success:active,
 187 .btn-success.active,
 188 .open > .dropdown-toggle.btn-success {
 189   color: #ffffff;
 190   background-color: #449d44;
 191   border-color: #398439;
 192 }
 193 .btn-success:active:hover,
 194 .btn-success.active:hover,
 195 .open > .dropdown-toggle.btn-success:hover,
 196 .btn-success:active:focus,
 197 .btn-success.active:focus,
 198 .open > .dropdown-toggle.btn-success:focus,
 199 .btn-success:active.focus,
 200 .btn-success.active.focus,
 201 .open > .dropdown-toggle.btn-success.focus {
 202   color: #ffffff;
 203   background-color: #398439;
 204   border-color: #255625;
 205 }
 206 .btn-success:active,
 207 .btn-success.active,
 208 .open > .dropdown-toggle.btn-success {
 209   background-image: none;
 210 }
 211 .btn-success.disabled:hover,
 212 .btn-success[disabled]:hover,
 213 fieldset[disabled] .btn-success:hover,
 214 .btn-success.disabled:focus,
 215 .btn-success[disabled]:focus,
 216 fieldset[disabled] .btn-success:focus,
 217 .btn-success.disabled.focus,
 218 .btn-success[disabled].focus,
 219 fieldset[disabled] .btn-success.focus {
 220   background-color: #5cb85c;
 221   border-color: #4cae4c;
 222 }
 223 .btn-success .badge {
 224   color: #5cb85c;
 225   background-color: #ffffff;
 226 }
 227 .btn-info {
 228   color: #ffffff;
 229   background-color: #5bc0de;
 230   border-color: #46b8da;
 231 }
 232 .btn-info:focus,
 233 .btn-info.focus {
 234   color: #ffffff;
 235   background-color: #31b0d5;
 236   border-color: #1b6d85;
 237 }
 238 .btn-info:hover {
 239   color: #ffffff;
 240   background-color: #31b0d5;
 241   border-color: #269abc;
 242 }
 243 .btn-info:active,
 244 .btn-info.active,
 245 .open > .dropdown-toggle.btn-info {
 246   color: #ffffff;
 247   background-color: #31b0d5;
 248   border-color: #269abc;
 249 }
 250 .btn-info:active:hover,
 251 .btn-info.active:hover,
 252 .open > .dropdown-toggle.btn-info:hover,
 253 .btn-info:active:focus,
 254 .btn-info.active:focus,
 255 .open > .dropdown-toggle.btn-info:focus,
 256 .btn-info:active.focus,
 257 .btn-info.active.focus,
 258 .open > .dropdown-toggle.btn-info.focus {
 259   color: #ffffff;
 260   background-color: #269abc;
 261   border-color: #1b6d85;
 262 }
 263 .btn-info:active,
 264 .btn-info.active,
 265 .open > .dropdown-toggle.btn-info {
 266   background-image: none;
 267 }
 268 .btn-info.disabled:hover,
 269 .btn-info[disabled]:hover,
 270 fieldset[disabled] .btn-info:hover,
 271 .btn-info.disabled:focus,
 272 .btn-info[disabled]:focus,
 273 fieldset[disabled] .btn-info:focus,
 274 .btn-info.disabled.focus,
 275 .btn-info[disabled].focus,
 276 fieldset[disabled] .btn-info.focus {
 277   background-color: #5bc0de;
 278   border-color: #46b8da;
 279 }
 280 .btn-info .badge {
 281   color: #5bc0de;
 282   background-color: #ffffff;
 283 }
 284 .btn-warning {
 285   color: #ffffff;
 286   background-color: #f0ad4e;
 287   border-color: #eea236;
 288 }
 289 .btn-warning:focus,
 290 .btn-warning.focus {
 291   color: #ffffff;
 292   background-color: #ec971f;
 293   border-color: #985f0d;
 294 }
 295 .btn-warning:hover {
 296   color: #ffffff;
 297   background-color: #ec971f;
 298   border-color: #d58512;
 299 }
 300 .btn-warning:active,
 301 .btn-warning.active,
 302 .open > .dropdown-toggle.btn-warning {
 303   color: #ffffff;
 304   background-color: #ec971f;
 305   border-color: #d58512;
 306 }
 307 .btn-warning:active:hover,
 308 .btn-warning.active:hover,
 309 .open > .dropdown-toggle.btn-warning:hover,
 310 .btn-warning:active:focus,
 311 .btn-warning.active:focus,
 312 .open > .dropdown-toggle.btn-warning:focus,
 313 .btn-warning:active.focus,
 314 .btn-warning.active.focus,
 315 .open > .dropdown-toggle.btn-warning.focus {
 316   color: #ffffff;
 317   background-color: #d58512;
 318   border-color: #985f0d;
 319 }
 320 .btn-warning:active,
 321 .btn-warning.active,
 322 .open > .dropdown-toggle.btn-warning {
 323   background-image: none;
 324 }
 325 .btn-warning.disabled:hover,
 326 .btn-warning[disabled]:hover,
 327 fieldset[disabled] .btn-warning:hover,
 328 .btn-warning.disabled:focus,
 329 .btn-warning[disabled]:focus,
 330 fieldset[disabled] .btn-warning:focus,
 331 .btn-warning.disabled.focus,
 332 .btn-warning[disabled].focus,
 333 fieldset[disabled] .btn-warning.focus {
 334   background-color: #f0ad4e;
 335   border-color: #eea236;
 336 }
 337 .btn-warning .badge {
 338   color: #f0ad4e;
 339   background-color: #ffffff;
 340 }
 341 .btn-danger {
 342   color: #ffffff;
 343   background-color: #d9534f;
 344   border-color: #d43f3a;
 345 }
 346 .btn-danger:focus,
 347 .btn-danger.focus {
 348   color: #ffffff;
 349   background-color: #c9302c;
 350   border-color: #761c19;
 351 }
 352 .btn-danger:hover {
 353   color: #ffffff;
 354   background-color: #c9302c;
 355   border-color: #ac2925;
 356 }
 357 .btn-danger:active,
 358 .btn-danger.active,
 359 .open > .dropdown-toggle.btn-danger {
 360   color: #ffffff;
 361   background-color: #c9302c;
 362   border-color: #ac2925;
 363 }
 364 .btn-danger:active:hover,
 365 .btn-danger.active:hover,
 366 .open > .dropdown-toggle.btn-danger:hover,
 367 .btn-danger:active:focus,
 368 .btn-danger.active:focus,
 369 .open > .dropdown-toggle.btn-danger:focus,
 370 .btn-danger:active.focus,
 371 .btn-danger.active.focus,
 372 .open > .dropdown-toggle.btn-danger.focus {
 373   color: #ffffff;
 374   background-color: #ac2925;
 375   border-color: #761c19;
 376 }
 377 .btn-danger:active,
 378 .btn-danger.active,
 379 .open > .dropdown-toggle.btn-danger {
 380   background-image: none;
 381 }
 382 .btn-danger.disabled:hover,
 383 .btn-danger[disabled]:hover,
 384 fieldset[disabled] .btn-danger:hover,
 385 .btn-danger.disabled:focus,
 386 .btn-danger[disabled]:focus,
 387 fieldset[disabled] .btn-danger:focus,
 388 .btn-danger.disabled.focus,
 389 .btn-danger[disabled].focus,
 390 fieldset[disabled] .btn-danger.focus {
 391   background-color: #d9534f;
 392   border-color: #d43f3a;
 393 }
 394 .btn-danger .badge {
 395   color: #d9534f;
 396   background-color: #ffffff;
 397 }
 398 .btn-link {
 399   color: #337ab7;
 400   font-weight: normal;
 401   border-radius: 0;
 402 }
 403 .btn-link,
 404 .btn-link:active,
 405 .btn-link.active,
 406 .btn-link[disabled],
 407 fieldset[disabled] .btn-link {
 408   background-color: transparent;
 409   -webkit-box-shadow: none;
 410   box-shadow: none;
 411 }
 412 .btn-link,
 413 .btn-link:hover,
 414 .btn-link:focus,
 415 .btn-link:active {
 416   border-color: transparent;
 417 }
 418 .btn-link:hover,
 419 .btn-link:focus {
 420   color: #23527c;
 421   text-decoration: underline;
 422   background-color: transparent;
 423 }
 424 .btn-link[disabled]:hover,
 425 fieldset[disabled] .btn-link:hover,
 426 .btn-link[disabled]:focus,
 427 fieldset[disabled] .btn-link:focus {
 428   color: #777777;
 429   text-decoration: none;
 430 }
 431 .btn-lg,
 432 .btn-group-lg > .btn {
 433   padding: 10px 16px;
 434   font-size: 18px;
 435   line-height: 1.3333333;
 436   border-radius: 6px;
 437 }
 438 .btn-sm,
 439 .btn-group-sm > .btn {
 440   padding: 5px 10px;
 441   font-size: 12px;
 442   line-height: 1.5;
 443   border-radius: 3px;
 444 }
 445 .btn-xs,
 446 .btn-group-xs > .btn {
 447   padding: 1px 5px;
 448   font-size: 12px;
 449   line-height: 1.5;
 450   border-radius: 3px;
 451 }
 452 .btn-block {
 453   display: block;
 454   width: 100%;
 455 }
 456 .btn-block + .btn-block {
 457   margin-top: 5px;
 458 }
 459 input[type="submit"].btn-block,
 460 input[type="reset"].btn-block,
 461 input[type="button"].btn-block {
 462   width: 100%;
 463 }