// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten. @mixin btn-shadow(){ @include shadow-z-1(); transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1); &:active:not(.btn-link) { @include shadow-z-1-hover(); } } .btn { position: relative; padding: 8px 30px; border: 0; margin: 10px 1px; cursor: pointer; border-radius: 2px; text-transform: uppercase; text-decoration: none; color: $darkbg-text; &:hover:not(.btn-link):not(.btn-flat):not(.btn-fab) { @include shadow-z-1(); } &:active:not(.btn-link):not(.btn-flat):not(.btn-fab) { @include shadow-z-1-hover(); } transition: background-color 0.2s ease, box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1); outline: none !important; @include variations(unquote(".btn-flat:not(.btn-link)"), color, $lightbg-text); @include background-variations(unquote(":not(.btn-link):not(.btn-flat)"), $btn-default); // BTN hover effect // SASS conversion note: please mirror any content change in _mixins-shared.scss button-variations-content @include button-variations(unquote(":hover:not(.btn-link):not(.btn-flat)"), $btn-default, 4%); // BTN active effect // SASS conversion note: please mirror any content change in _mixins-shared.scss button-variations-content @include button-variations(unquote(":active:not(.btn-link):not(.btn-flat)"), $btn-default, 6%); // BTN .active effect // SASS conversion note: please mirror any content change in _mixins-shared.scss button-variations-content @include button-variations(unquote(".active:not(.btn-link):not(.btn-flat)"), $btn-default, 6%); // BTN flat hover effect // SASS conversion note: please mirror any content change in _mixins-shared.scss bg-color-variations-content @include bg-color-variations(unquote(".btn-flat:hover:not(.btn-link)"), $btn-default, (20/100)); } .btn { &.btn-flat { background: none; box-shadow: none; font-weight: 500; &:disabled { color: $text-disabled !important; } } // Size variations &.btn-sm { padding: 5px 20px; } &.btn-xs { padding: 4px 15px; font-size: 10px; } &.btn-raised { @include btn-shadow(); } &.btn-fab { margin: 0; padding: 15px; font-size: 26px; width: 56px; height: 56px; &, &:hover, &:active { @include variations(unquote(""), background-color, transparent); } &, &:hover { @include shadow-z-1(); } &:active { @include shadow-z-1-hover(); } &, .ripple-wrapper { border-radius: 100%; } &.btn-fab-mini { width: 40px; height: 40px; padding: 13px 0; font-size: 15px; } i { position: relative; top: -5px; margin: 0 auto; } } } // This is needed to style buttons which has not a variation suffix (they must be stiled as btn-default) .btn-link, .btn:not([class*="btn-"]), .btn-default { color: $lightbg-text; &:hover { color: $lightbg-text; } } .btn:not([class*="btn-"]), .btn-default, .btn-flat:not(.btn-link) { &:hover, &.active { background-color: rgba(255,255,255,0.5); } } .open > .dropdown-toggle.btn { @include variations(unquote(""), background-color, $btn-default); } .btn-group .btn+.btn, .btn-group .btn+.btn-group, .btn-group .btn-group+.btn, .btn-group .btn-group+.btn-group { margin-left: 0; } .btn-group, .btn-group-vertical { position: relative; border-radius: 2px; margin: 10px 1px; @include btn-shadow(); &.open .dropdown-toggle { box-shadow: none; } &.btn-group-raised { @include btn-shadow(); } .btn, .btn:active, .btn-group { box-shadow: none !important; margin: 0; } } .btn-group-flat { box-shadow: none !important; }