123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162 |
- // Buttons
- .btn {
- box-shadow: $z-depth-1;
- @include button-size($btn-padding-y-basic, $btn-padding-x-basic, $btn-font-size-basic);
- transition: $btn-transition;
- margin: $btn-margin-basic;
- border: 0;
- border-radius: $border-radius-base;
- cursor: pointer;
- text-transform: uppercase;
- white-space: normal;
- word-wrap: break-word;
- color: inherit;
- &:hover,
- &:active,
- &:focus {
- box-shadow: $z-depth-1-half;
- outline: 0;
- }
- &:not([disabled]):not(.disabled):active,
- &:not([disabled]):not(.disabled).active {
- box-shadow: $z-depth-1-half;
- }
- .fas, .fab, .far {
- position: relative;
- font-size: $btn-icon-basic;
- &.right {
- margin-left: $btn-icon-margin;
- }
- &.left {
- margin-right: $btn-icon-margin;
- }
- }
- &.btn-lg {
- @include button-size($btn-padding-y-large, $btn-padding-x-large, $btn-font-size-large);
- .fas, .fab, .far {
- font-size: $btn-icon-large;
- }
- }
- &.btn-md {
- @include button-size($btn-padding-y-medium, $btn-padding-x-medium, $btn-font-size-medium);
- .fas, .fab, .far {
- font-size: $btn-icon-medium;
- }
- }
- &.btn-sm {
- @include button-size($btn-padding-y-small, $btn-padding-x-small, $btn-font-size-small);
- .fas, .fab, .far {
- font-size: $btn-icon-small;
- }
- }
- &.btn-tb {
- padding: $btn-tb-padding-y $btn-tb-padding-x;
- }
- &.disabled,
- &:disabled {
- &:active,
- &:focus,
- &:hover {
- box-shadow: $z-depth-1;
- }
- }
- &.btn-block {
- margin: inherit;
- }
- &.btn-link {
- @extend .black-text;
- box-shadow: none;
- background-color: transparent;
- &:active,
- &:focus,
- &:hover {
- box-shadow: none !important;
- background-color: transparent;
- }
- }
- &[class*="btn-outline-"] {
- padding-top: $btn-outline-padding-y-basic;
- padding-bottom: $btn-outline-padding-y-basic;
- &.btn-lg {
- padding-top: $btn-outline-padding-y-large;
- padding-bottom: $btn-outline-padding-y-large;
- }
- &.btn-md {
- padding-top: $btn-outline-padding-y-medium;
- padding-bottom: $btn-outline-padding-y-medium;
- }
- &.btn-sm {
- padding-top: $btn-outline-padding-y-small;
- padding-bottom: $btn-outline-padding-y-small;
- }
- }
- }
- .btn-group {
- .btn {
- margin: 0;
- }
- }
- // Overwrite default button icon size
- .btn,
- .btn-floating {
- .fa-lg {
- font-size: 1.33333em !important;
- }
- .fa-xs {
- font-size: .75em !important;
- }
- .fa-sm {
- font-size: .875em !important;
- }
- .fa-1x {
- font-size: 1em !important;
- }
- .fa-2x {
- font-size: 2em !important;
- }
- .fa-3x {
- font-size: 3em !important;
- }
- .fa-4x {
- font-size: 4em !important;
- }
- .fa-5x {
- font-size: 5em !important;
- }
- .fa-6x {
- font-size: 6em !important;
- }
- .fa-7x {
- font-size: 7em !important;
- }
- .fa-8x {
- font-size: 8em !important;
- }
- .fa-9x {
- font-size: 9em !important;
- }
- .fa-10x {
- font-size: 10em !important;
- }
- }
- @each $btn_name, $color_value in $mdb-colors {
- @include make-button($btn_name, $color_value);
- @include make-outline-button($btn_name, $color_value);
- }
- .btn-warning:not(:disabled):not(.disabled).active,
- .btn-warning:not(:disabled):not(.disabled):active,
- .show>.btn-warning.dropdown-toggle {
- color: $white-base;
- }
|