@mixin btn_icn_width( $lineHeight: 20px, $verticalPadding: 10px ) { $wdth: 5 + $lineHeight + $verticalPadding * 2; min-width: $wdth; max-width: $wdth; } .btn-xl, .btn-group-xl > .btn { padding: $padding-xl-vertical $padding-xl-horizontal; font-size: $font-size-xl; line-height: $line-height-xl; border-radius: $border-radius-xl; } .btn-splited, .btn-divided { display: table; width: auto; width: 100%; // margin: 0 0 10px; margin: 0; padding: 0; & > * { display: table-cell; position: relative; padding: $padding-base-vertical $padding-base-horizontal; font-size: inherit; line-height: inherit; text-shadow: inherit; color: inherit; width: auto; width: 98%; @include border-left-radius(0); vertical-align: middle; &:first-child { @include border-left-radius($border-radius-base); } &:last-child { @include border-right-radius($border-radius-base); } &.icn { width: 2%; font-size: $font-size-base * 1.1; @include horizontal-padding(2px); text-align: center; @include btn_icn_width( $line-height-computed, $padding-base-vertical ); } } &.btn-xl > * { padding: $padding-xl-vertical $padding-xl-horizontal; font-size: $font-size-xl; line-height: $line-height-xl; &:first-child { @include border-left-radius( $border-radius-xl ); } &:last-child { @include border-right-radius( $border-radius-xl ); } &.icn { font-size: $font-size-xl * 1.1; @include btn_icn_width($line-height-computed-xl, $padding-xl-vertical);} } &.btn-lg > * { padding: $padding-large-vertical $padding-large-horizontal; // font-size: $font-size-large; // line-height: $line-height-large; &:first-child { @include border-left-radius($border-radius-large); } &:last-child { @include border-right-radius($border-radius-large); } &.icn { font-size: $font-size-large * 1.1; @include btn_icn_width($line-height-computed-lg, $padding-large-vertical);} } &.btn-sm > * { padding: $padding-small-vertical $padding-small-horizontal; // font-size: $font-size-small; // line-height: $line-height-small; &:first-child { @include border-left-radius($border-radius-small); } &:last-child { @include border-right-radius($border-radius-small); } &.icn { font-size: $font-size-small * 1.1; @include btn_icn_width($line-height-computed-sm, $padding-small-vertical);} } &.btn-xs > * { padding: $padding-xs-vertical $padding-xs-horizontal; // font-size: $font-size-small; // line-height: $line-height-small; &:first-child { @include border-left-radius($border-radius-xs); } &:last-child { @include border-right-radius($border-radius-xs); } &.icn { font-size: $font-size-xs * 1.1; @include btn_icn_width($line-height-computed-xs, $padding-xs-vertical); } } & > .icn { width: 2%; @include horizontal-padding(2px); text-align: center; } } .btn-divided { & > * { border-right-style: solid; border-right-width: 1px; border-right-color: inherit; @include box-shadow( inset -1px 0 1px 0 rgba(255,255,255,.32) ); &:last-child { @include box-shadow( none ); border-right: none; } } } // Vertically space out multiple block buttons .btn-block + .btn-block { margin-top: 10px; } .btn-splited + .btn-splited, .btn-splited + .btn-divided, .btn-divided + .btn-splited, .btn-divided + .btn-divided { margin-top: 10px; } // // Social - Buttons // .btn-app, .btn-google, .btn-facebook, .btn-twitter, .btn-paypal, .btn-app-nice, .btn-google-nice, .btn-facebook-nice, .btn-twitter-nice, .btn-paypal-nice { color: #fff; vertical-align: middle; &:hover, &:active { color: #fff; } } // Alternate buttons .. again with important color (to stay btn in navbar) // -------------------------------------------------- .btn-default { @include btn-variant($btn-default-color, $btn-default-bg, $btn-default-border); &.btn-blank { @include btn-blank-variant($btn-default-color, $btn-default-border, #fff); } &.btn-blur { @include btn-blur-variant( $btn-default-color, $btn-default-bg, $btn-default-border ); } } .btn-primary { @include btn-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border); &.btn-blank { @include btn-blank-variant($btn-primary-bg, $btn-primary-border, #fff); } &.btn-blur { @include btn-blur-variant( $btn-primary-color, $btn-primary-bg, $btn-primary-border ); } } // Success appears as green .btn-success { @include btn-variant($btn-success-color, $btn-success-bg, $btn-success-border); &.btn-blank { @include btn-blank-variant($btn-success-bg, $btn-success-border, #fff); } &.btn-blur { @include btn-blur-variant( $btn-success-color, $btn-success-bg, $btn-success-border ); } } // Info appears as blue-green .btn-info { @include btn-variant($btn-info-color, $btn-info-bg, $btn-info-border); &.btn-blank { @include btn-blank-variant($btn-info-bg, $btn-info-border, #444); } &.btn-blur { @include btn-blur-variant( $btn-info-color, $btn-info-bg, $btn-info-border ); } } // Warning appears as orange .btn-warning { @include btn-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border); &.btn-blank { @include btn-blank-variant($btn-warning-bg, $btn-warning-border, #444); } &.btn-blur { @include btn-blur-variant( $btn-warning-color, $btn-warning-bg, $btn-warning-border ); } } // Danger and error appear as red .btn-danger { @include btn-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border); &.btn-blank { @include btn-blank-variant($btn-danger-bg, $btn-danger-border, #fff); } &.btn-blur { @include btn-blur-variant( $btn-danger-color, $btn-danger-bg, $btn-danger-border ); } } .btn-brand { @include btn-variant($btn-brand-color, $btn-brand-bg, $btn-brand-border); &.btn-blank { @include btn-blank-variant($btn-brand-bg, $btn-brand-border, #fff); } &.btn-blur { @include btn-blur-variant( $btn-brand-color, $btn-brand-bg, $btn-brand-border ); } } // Socials .btn-facebook { @include btn-variant($btn-facebook-color, $btn-facebook-bg, $btn-facebook-border); &.btn-blank { @include btn-blank-variant($btn-facebook-bg, $btn-facebook-border, #fff); } &.btn-blur { @include btn-blur-variant( $btn-facebook-color, $btn-facebook-bg, $btn-facebook-border ); } } .btn-google { @include btn-variant($btn-google-color, $btn-google-bg, $btn-google-border); &.btn-blank { @include btn-blank-variant($btn-google-bg, $btn-google-border, #fff); } &.btn-blur { @include btn-blur-variant( $btn-google-color, $btn-google-bg, $btn-google-border ); } } .btn-twitter { @include btn-variant($btn-twitter-color, $btn-twitter-bg, $btn-twitter-border); &.btn-blank { @include btn-blank-variant($btn-twitter-bg, $btn-twitter-border, #fff); } &.btn-blur { @include btn-blur-variant( $btn-twitter-color, $btn-twitter-bg, $btn-twitter-border ); } } .btn-paypal { @include btn-variant($btn-paypal-color, $btn-paypal-bg, $btn-paypal-border); &.btn-blank { @include btn-blank-variant($btn-paypal-bg, $btn-paypal-border, #fff); } &.btn-blur { @include btn-blur-variant( $btn-paypal-color, $btn-paypal-bg, $btn-paypal-border ); } } .btn-one { @include btn-variant($btn-one-color, $btn-one-bg, $btn-one-border); &.btn-blank { @include btn-blank-variant($btn-one-bg, $btn-one-border, #fff); } &.btn-blur { @include btn-blur-variant( $btn-one-color, $btn-one-bg, $btn-one-border ); } } .btn-two { @include btn-variant($btn-two-color, $btn-two-bg, $btn-two-border); &.btn-blank { @include btn-blank-variant($btn-two-bg, $btn-two-border, #fff); } &.btn-blur { @include btn-blur-variant( $btn-two-color, $btn-two-bg, $btn-two-border ); } } .btn-three { @include btn-variant($btn-three-color, $btn-three-bg, $btn-three-border); &.btn-blank { @include btn-blank-variant($btn-three-bg, $btn-three-border, #fff); } &.btn-blur { @include btn-blur-variant( $btn-three-color, $btn-three-bg, $btn-three-border ); } } .btn-link { color: $link-color !important; background-color: transparent !important; border-color: transparent !important; &:hover, &:focus, &:active, &.active, .open > &.dropdown-toggle { color: $link-hover-color !important; background-color: transparent !important; border-color: transparent !important; background-image: none; box-shadow: none; } } .btn-round { @include horizontal-padding( 18px ); -webkit-border-radius: 100px !important; -moz-border-radius: 100px !important; -ms-border-radius: 100px !important; -o-border-radius: 100px !important; border-radius: 100px !important; &.btn-xs { @include horizontal-padding( 12px ); } &.btn-sm { @include horizontal-padding( 15px ); } &.btn-lg { @include horizontal-padding( 23px ); } &.btn-xl { @include horizontal-padding( 30px ); } } .btn-borderless { border: none !important; } .btn-width { @include horizontal-padding( 30px ); &.btn-xs { @include horizontal-padding( 10px ); } &.btn-sm { @include horizontal-padding( 20px ); } &.btn-lg { @include horizontal-padding( 40px ); } &.btn-xl { @include horizontal-padding( 50px ); } } // # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # // // D E P R E A C A T E D . . . will be removed soon ! // // # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # .btn-group-block.input-group { .btn { text-align: left; padding: 10px; &.icn { text-align: center; } } } .btn-group-block { @include box-sizing(border-box); display: table; width: 100%; margin: 0 0 10px; text-decoration: none; .btn { display: table-cell; width: auto; width: 95%; &.btn-icn { width: 5%; font-size: 18px; @include box-shadow( inset -1px 0 1px 0 rgba(255,255,255,.32) ); min-width: 42px; max-width: 44px; text-align: center; @include horizontal-padding(5px); } border-collapse: separate; border-spacing: 0; @include border-radius(0); &:first-child { @include border-left-radius(5px); } &:last-child { @include border-right-radius(5px); } } .btn + .btn { border-left: none; } &.lineless { .btn { border-left-width: 0; border-right-width: 0; @include box-shadow( none ); &:first-child { border-left-width: 0; } &:last-child { border-right-width: 0; } } } &.half { width: 50%; margin-left: auto; margin-right: auto; } &:hover { text-decoration: none !important; } }