git.roojs.org Git - bootswatch/blob - MDB Free/sass/mdb/free/_buttons.scss

   1 // BUTTONS\r
   2 button:focus {\r
   3     outline: none!important;\r
   4 }\r
   5 \r
   6 .btn {\r
   7     font-size: 0.8rem;\r
   8     padding: 0.85rem 2.13rem;\r
   9     &.btn-lg {\r
  10         font-size: 0.9rem;\r
  11         padding: 1rem 2.4rem;\r
  12     }\r
  13     &.btn-md {\r
  14         font-size: 0.7rem;\r
  15         padding: 0.7rem 1.6rem;\r
  16     }\r
  17     &.btn-sm {\r
  18         font-size: 0.6rem;\r
  19         padding:  0.5rem 1.6rem;\r
  20         &.btn-table {\r
  21             padding: 0.5rem 0.9rem;\r
  22         }\r
  23         .fa {\r
  24             font-size:0.8rem;\r
  25         }\r
  26     }\r
  27 }\r
  28 \r
  29 .btn {\r
  30     border-radius: 2px;\r
  31     border: 0;\r
  32     @extend .z-depth-1;\r
  33     transition: .2s ease-out;\r
  34     color: #fff!important;\r
  35     margin: 6px;\r
  36     white-space: normal !important;\r
  37     word-wrap: break-word;\r
  38     text-transform: uppercase;\r
  39     &:hover {\r
  40         @extend .z-depth-1-half;\r
  41         color: #fff;\r
  42     }\r
  43     &:active,\r
  44     &:focus,\r
  45     &.active {\r
  46         outline: 0;\r
  47         color: #fff;\r
  48         @extend .z-depth-1-half;\r
  49     } \r
  50     .fa {\r
  51         font-size: 1.1rem;\r
  52         position: relative;\r
  53         vertical-align: middle;\r
  54         margin-top: -2px;\r
  55         &.right {\r
  56             margin-left: 3px;\r
  57         }\r
  58         &.left {\r
  59             margin-right: 3px;\r
  60         }\r
  61     }\r
  62 }\r
  63 \r
  64 .btn-group {\r
  65     .btn {\r
  66         margin: 0;\r
  67     }\r
  68 }\r
  69 \r
  70 .btn-block {\r
  71     margin: inherit;\r
  72 }\r
  73 \r
  74 // Alert buttons\r
  75 .btn-secondary {\r
  76     background-color: $secondary-color;\r
  77     &:hover,\r
  78     &:focus,\r
  79     &:active {\r
  80         background-color: lighten( $secondary-color, 5%)!important;\r
  81         color: #fff;\r
  82     }\r
  83     &.active {\r
  84         background-color: darken( $secondary-color, 20%)!important;\r
  85         @extend .z-depth-1-half;\r
  86         &:hover {\r
  87             color: #fff;\r
  88         }\r
  89         &:focus {\r
  90             color: #fff;\r
  91         }\r
  92     }\r
  93     &.dropdown-toggle {\r
  94         color: #fff!important;\r
  95         background-color: $secondary-color!important;\r
  96         @extend .z-depth-1-half;\r
  97         &:hover {\r
  98             color: #fff;\r
  99             background-color: lighten( $secondary-color, 5%)!important;\r
 100         }\r
 101         &:focus {\r
 102             color: #fff;\r
 103             background-color: $secondary-color;\r
 104         }\r
 105     }\r
 106 }\r
 107 \r
 108 .btn-secondary:active:hover {\r
 109     background-color: lighten( $secondary-color, 5%)!important;\r
 110 }\r
 111 \r
 112 .btn-primary {\r
 113     background: $primary-color;\r
 114     &:hover,\r
 115     &:focus,\r
 116     &:active {\r
 117         background-color: lighten( $primary-color, 5%)!important;\r
 118     }\r
 119     &.active {\r
 120         background-color: darken( $primary-color, 20%)!important;\r
 121         @extend .z-depth-1-half;\r
 122     }\r
 123 }\r
 124 \r
 125 .btn-default {\r
 126     background: $default-color;\r
 127     &:hover,\r
 128     &:focus,\r
 129     &:active {\r
 130         background-color: lighten( $default-color, 5%)!important;\r
 131     }\r
 132     &.active {\r
 133         background-color: darken( $default-color, 20%)!important;\r
 134         @extend .z-depth-1-half;\r
 135     }\r
 136 }\r
 137 \r
 138 .btn-success {\r
 139     background: $success-color;\r
 140     &:hover,\r
 141     &:focus,\r
 142     &:active {\r
 143         background-color: lighten( $success-color, 2%)!important;\r
 144     }\r
 145     &.active {\r
 146         background-color: darken( $success-color, 20%)!important;\r
 147         @extend .z-depth-1-half;\r
 148     }\r
 149 }\r
 150 \r
 151 .btn-info {\r
 152     background: $info-color;\r
 153     &:hover,\r
 154     &:focus {\r
 155         background-color: lighten( $info-color, 5%)!important;\r
 156     }\r
 157     &.active {\r
 158         background-color: darken( $info-color, 20%)!important;\r
 159         @extend .z-depth-1-half;\r
 160     }\r
 161 }\r
 162 \r
 163 .btn-warning {\r
 164     background: $warning-color-dark;\r
 165     &:hover,\r
 166     &:focus {\r
 167         background-color: lighten( $warning-color-dark, 6%)!important;\r
 168     }\r
 169     &.active {\r
 170         background-color: darken( $warning-color, 20%)!important;\r
 171         @extend .z-depth-1-half;\r
 172     }\r
 173 }\r
 174 \r
 175 .btn-danger {\r
 176     background: $danger-color-dark;\r
 177     &:hover,\r
 178     &:focus {\r
 179         background-color: lighten( $danger-color-dark, 3%)!important;\r
 180     }\r
 181     &.active {\r
 182         background-color: darken( $danger-color-dark, 15%)!important;\r
 183         @extend .z-depth-1-half;\r
 184     }\r
 185 }\r
 186 \r
 187 .btn-link {\r
 188     background-color: transparent;\r
 189     color: #000!important;\r
 190     &:hover,\r
 191     &:focus {\r
 192         background-color: transparent;\r
 193         color: #000;\r
 194     }\r
 195 }\r
 196 \r
 197 // Additional button styles\r
 198 .btn-outline-primary {\r
 199     border: 2px solid $primary-color;\r
 200     color: $primary-color-dark!important;\r
 201     background-color: transparent;\r
 202     &:hover,\r
 203     &:focus,\r
 204     &:active,\r
 205     &:active:focus {\r
 206         color: $primary-color;\r
 207         border-color: $primary-color;\r
 208         background-color: transparent;\r
 209     }\r
 210 }\r
 211 \r
 212 .btn-outline-secondary {\r
 213     border: 2px solid $secondary-color;\r
 214     color: $secondary-color-dark!important;\r
 215     background-color: transparent;\r
 216     &:hover,\r
 217     &:focus,\r
 218     &:active,\r
 219     &:active:focus {\r
 220         color: $secondary-color;\r
 221         border: 2px solid $secondary-color;\r
 222         background-color: transparent;\r
 223     }\r
 224 }\r
 225 \r
 226 .btn-outline-default {\r
 227     background-color: transparent;\r
 228     border: 2px solid $default-color;\r
 229     color: $default-color-dark!important;\r
 230     background-color: transparent;\r
 231     &:hover,\r
 232     &:focus,\r
 233     &:active,\r
 234     &:active:focus {\r
 235         color: $default-color;\r
 236         border-color: $default-color;\r
 237         background-color:transparent;\r
 238     }\r
 239 }\r
 240 \r
 241 .btn-outline-success {\r
 242     border: 2px solid $success-color;\r
 243     color: $success-color-dark!important;\r
 244     background-color: transparent;\r
 245     &:hover,\r
 246     &:focus,\r
 247     &:active,\r
 248     &:active:focus {\r
 249         color: $success-color;\r
 250         border-color: $success-color;\r
 251         background-color: transparent;\r
 252     }\r
 253 }\r
 254 \r
 255 .btn-outline-info {\r
 256     border: 2px solid $info-color;\r
 257     color: $info-color-dark!important;\r
 258     background-color: transparent;\r
 259     &:hover,\r
 260     &:focus,\r
 261     &:active,\r
 262     &:active:focus {\r
 263         color: $info-color;\r
 264         border-color: $info-color;\r
 265         background-color: transparent;\r
 266 \r
 267     }\r
 268 }\r
 269 \r
 270 .btn-outline-warning {\r
 271     border: 2px solid $warning-color;\r
 272     color: $warning-color-dark!important;\r
 273     background-color: transparent;\r
 274     &:hover,\r
 275     &:focus,\r
 276     &:active,\r
 277     &:active:focus {\r
 278         border-color: $warning-color;\r
 279         color: $warning-color;\r
 280         background-color: transparent;\r
 281     }\r
 282 }\r
 283 \r
 284 .btn-outline-danger {\r
 285     border: 2px solid $danger-color;\r
 286     color: $danger-color-dark!important;\r
 287     background-color: transparent;\r
 288     &:hover,\r
 289     &:focus,\r
 290     &:active,\r
 291     &:active:focus {\r
 292         color: $danger-color;\r
 293         border-color: $danger-color;\r
 294         background-color: transparent;\r
 295     }\r
 296 }\r
 297 \r
 298 .btn-outline-white {\r
 299     border: 2px solid #fff;\r
 300     color: #fff!important;\r
 301     background-color: transparent;\r
 302     &:hover,\r
 303     &:focus,\r
 304     &:active,\r
 305     &:active:focus {\r
 306         color: darken( #fff, 10%);\r
 307         border-color: #fff;\r
 308         background-color:transparent;\r
 309     }\r
 310 }\r
 311 \r
 312 .btn-outline-black {\r
 313     border: 2px solid #000;\r
 314     color: #000!important;\r
 315     background-color: transparent;\r
 316     &:hover,\r
 317     &:focus,\r
 318     &:active,\r
 319     &:active:focus {\r
 320         color: #000;\r
 321         border-color: #000;\r
 322         background-color: transparent;\r
 323     }\r
 324 }\r
 325 \r
 326 // Pagination\r
 327 .pager li a {\r
 328     border: 0;\r
 329     @extend .z-depth-1;\r
 330     transition: .2s ease-out;\r
 331     &:hover {\r
 332         @extend .z-depth-1-half;\r
 333     }\r
 334 }\r
 335 \r
 336 // Additional buttons colors\r
 337 .btn-elegant {\r
 338     background: $elegant-color;\r
 339     &:hover,\r
 340     &:focus {\r
 341         background-color: lighten( $elegant-color, 5%)!important;\r
 342     }\r
 343     &.active {\r
 344         background-color: darken( $elegant-color, 20%)!important;\r
 345         @extend .z-depth-1-half;\r
 346     }\r
 347 }\r
 348 \r
 349 .btn-unique {\r
 350     background: $unique-color-dark;\r
 351     &:hover,\r
 352     &:focus {\r
 353         background-color: lighten( $unique-color-dark, 5%)!important;\r
 354     }\r
 355     &.active {\r
 356         background-color: darken( $unique-color-dark, 20%)!important;\r
 357         @extend .z-depth-1-half;\r
 358     }\r
 359 }\r
 360 \r
 361 .btn-pink {\r
 362     background: #e91e63;\r
 363     &:hover,\r
 364     &:focus {\r
 365         background-color: lighten(#e91e63, 5%)!important;\r
 366     }\r
 367     &.active {\r
 368         background-color: darken(#e91e63, 20%)!important;\r
 369         @extend .z-depth-1-half;\r
 370     }\r
 371 }\r
 372 \r
 373 .btn-purple {\r
 374     background: #4a148c;\r
 375     &:hover,\r
 376     &:focus {\r
 377         background-color: lighten(#4a148c, 5%)!important;\r
 378     }\r
 379     &.active {\r
 380         background-color: darken(#4a148c, 20%)!important;\r
 381         @extend .z-depth-1-half;\r
 382     }\r
 383 }\r
 384 \r
 385 .btn-deep-purple {\r
 386     background: #311b92;\r
 387     &:hover,\r
 388     &:focus {\r
 389         background-color: lighten(#311b92, 5%)!important;\r
 390     }\r
 391     &.active {\r
 392         background-color: darken(#311b92, 20%)!important;\r
 393         @extend .z-depth-1-half;\r
 394     }\r
 395 }\r
 396 \r
 397 .btn-indigo {\r
 398     background: #1a237e;\r
 399     &:hover,\r
 400     &:focus {\r
 401         background-color: lighten(#1a237e, 5%)!important;\r
 402     }\r
 403     &.active {\r
 404         background-color: darken(#1a237e, 20%)!important;\r
 405         @extend .z-depth-1-half;\r
 406     }\r
 407 }\r
 408 \r
 409 .btn-cyan {\r
 410     background: #00acc1;\r
 411     &:hover,\r
 412     &:focus {\r
 413         background-color: lighten(#00acc1, 5%)!important;\r
 414     }\r
 415     &.active {\r
 416         background-color: darken(#00acc1, 20%)!important;\r
 417         @extend .z-depth-1-half;\r
 418     }\r
 419 }\r
 420 \r
 421 .btn-light-green {\r
 422     background: #7cb342;\r
 423     &:hover,\r
 424     &:focus {\r
 425         background-color: lighten(#7cb342, 5%)!important;\r
 426     }\r
 427     &.active {\r
 428         background-color: darken(#7cb342, 20%)!important;\r
 429         @extend .z-depth-1-half;\r
 430     }\r
 431 }\r
 432 \r
 433 .btn-dark-green {\r
 434     background: #007E33;\r
 435     &:hover,\r
 436     &:focus {\r
 437         background-color: lighten(#007E33, 5%)!important;\r
 438     }\r
 439     &.active {\r
 440         background-color: darken(#007E33, 20%)!important;\r
 441         @extend .z-depth-1-half;\r
 442     }\r
 443 }\r
 444 \r
 445 .btn-lime {\r
 446     background: #afb42b;\r
 447     &:hover,\r
 448     &:focus {\r
 449         background-color: lighten(#afb42b, 5%)!important;\r
 450     }\r
 451     &.active {\r
 452         background-color: darken(#afb42b, 20%)!important;\r
 453         @extend .z-depth-1-half;\r
 454     }\r
 455 }\r
 456 \r
 457 .btn-yellow {\r
 458     background: #fbc02d;\r
 459     &:hover,\r
 460     &:focus {\r
 461         background-color: lighten(#fbc02d, 5%)!important;\r
 462     }\r
 463     &.active {\r
 464         background-color: darken(#fbc02d, 20%)!important;\r
 465         @extend .z-depth-1-half;\r
 466     }\r
 467 }\r
 468 \r
 469 .btn-amber {\r
 470     background: #ff6f00;\r
 471     &:hover,\r
 472     &:focus {\r
 473         background-color: lighten(#ff6f00, 5%)!important;\r
 474     }\r
 475     &.active {\r
 476         background-color: darken(#ff6f00, 20%)!important;\r
 477         @extend .z-depth-1-half;\r
 478     }\r
 479 }\r
 480 \r
 481 .btn-orange {\r
 482     background: #e65100;\r
 483     &:hover,\r
 484     &:focus {\r
 485         background-color: lighten(#e65100, 5%)!important;\r
 486     }\r
 487     &.active {\r
 488         background-color: darken(#e65100, 20%)!important;\r
 489         @extend .z-depth-1-half;\r
 490     }\r
 491 }\r
 492 \r
 493 .btn-deep-orange {\r
 494     background: #bf360c;\r
 495     &:hover,\r
 496     &:focus {\r
 497         background-color: lighten(#bf360c, 5%)!important;\r
 498     }\r
 499     &.active {\r
 500         background-color: darken(#bf360c, 20%)!important;\r
 501         @extend .z-depth-1-half;\r
 502     }\r
 503 }\r
 504 \r
 505 .btn-brown {\r
 506     background: #6d4c41;\r
 507     &:hover,\r
 508     &:focus {\r
 509         background-color: lighten(#6d4c41, 5%)!important;\r
 510     }\r
 511     &.active {\r
 512         background-color: darken(#6d4c41, 20%)!important;\r
 513         @extend .z-depth-1-half;\r
 514     }\r
 515 }\r
 516 \r
 517 .btn-blue-grey {\r
 518     background: #607d8b;\r
 519     &:hover,\r
 520     &:focus {\r
 521         background-color: lighten(#607d8b, 5%)!important;\r
 522     }\r
 523     &.active {\r
 524         background-color: darken(#607d8b, 20%)!important;\r
 525         @extend .z-depth-1-half;\r
 526     }\r
 527 }\r
 528 \r
 529 .btn-mdb {\r
 530     background: #45526E;\r
 531     &:hover,\r
 532     &:focus {\r
 533         background-color: lighten(#45526E, 5%)!important;\r
 534     }\r
 535     &.active {\r
 536         background-color: darken(#45526E, 20%)!important;\r
 537         @extend .z-depth-1-half;\r
 538     }\r
 539 }\r
 540 \r
 541 .btn-secondary {\r
 542     &.disabled,\r
 543     &:disabled {\r
 544         background-color: #aa66cc;\r
 545         cursor: not-allowed;\r
 546         pointer-events: auto !important;\r
 547     }\r
 548 }\r
 549 \r
 550 .btn-split {\r
 551     padding-left: 0.85rem;\r
 552     padding-right: 1.25rem;\r
 553 }