vendor/assets/stylesheets/magic/content/_buttons.scss in magic_stylez-0.0.0.91 vs vendor/assets/stylesheets/magic/content/_buttons.scss in magic_stylez-0.0.0.92

- old
+ new

@@ -120,103 +120,30 @@ @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-blank-soft { @include btn-blank-variant($btn-default-color, transparentize($btn-default-border, .50), #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-blank-soft { @include btn-blank-variant($btn-primary-bg, transparentize($btn-primary-border, .50), #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-blank-soft { @include btn-blank-variant($btn-success-bg, transparentize($btn-success-border, .50), #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-blank-soft { @include btn-blank-variant($btn-info-bg, transparentize($btn-info-border, .50), #fff); } - &.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-blank-soft { @include btn-blank-variant($btn-warning-bg, transparentize($btn-warning-border, .50), #fff); } - &.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-blank-soft { @include btn-blank-variant($btn-danger-bg, transparentize($btn-danger-border, .50), #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-blank-soft { @include btn-blank-variant($btn-brand-bg, transparentize($btn-brand-border, .50), #fff); } - &.btn-blur { @include btn-blur-variant( $btn-brand-color, $btn-brand-bg, $btn-brand-border ); } -} +$whiteBgButtons: primary success danger brand facebook google twitter paypal one two three; +$darkBgButtons: info warning; - - -// 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-blank-soft { @include btn-blank-variant($btn-facebook-bg, transparentize($btn-facebook-border, .50), #fff); } - &.btn-blur { @include btn-blur-variant( $btn-facebook-color, $btn-facebook-bg, $btn-facebook-border ); } +@each $thatBtn in $whiteBgButtons { + .btn-#{$thatBtn} { + @include btn-variant(map-get($appColorz, btn-#{$thatBtn}-color), map-get($appColorz, btn-#{$thatBtn}-bg), map-get($appColorz, btn-#{$thatBtn}-border)); + &.btn-blank { @include btn-blank-variant(map-get($appColorz, btn-#{$thatBtn}-bg), map-get($appColorz, btn-#{$thatBtn}-border), #fff); } + &.btn-blank-soft { @include btn-blank-variant(map-get($appColorz, btn-#{$thatBtn}-bg), transparentize(map-get($appColorz, btn-#{$thatBtn}-border), .50), #fff); } + &.btn-blur { @include btn-blur-variant(map-get($appColorz, btn-#{$thatBtn}-color), map-get($appColorz, btn-#{$thatBtn}-bg), map-get($appColorz, btn-#{$thatBtn}-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-blank-soft { @include btn-blank-variant($btn-google-bg, transparentize($btn-google-border, .50), #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-blank-soft { @include btn-blank-variant($btn-twitter-bg, transparentize($btn-twitter-border, .50), #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-blank-soft { @include btn-blank-variant($btn-paypal-bg, transparentize($btn-paypal-border, .50), #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-blank-soft { @include btn-blank-variant($btn-one-bg, transparentize($btn-one-border, .50), #fff); } - &.btn-blur { @include btn-blur-variant( $btn-one-color, $btn-one-bg, $btn-one-border ); } +@each $thatBtn in $darkBgButtons { + .btn-#{$thatBtn} { + @include btn-variant(map-get($appColorz, btn-#{$thatBtn}-color), map-get($appColorz, btn-#{$thatBtn}-bg), map-get($appColorz, btn-#{$thatBtn}-border)); + &.btn-blank { @include btn-blank-variant(map-get($appColorz, btn-#{$thatBtn}-bg), map-get($appColorz, btn-#{$thatBtn}-border), #444); } + &.btn-blank-soft { @include btn-blank-variant(map-get($appColorz, btn-#{$thatBtn}-bg), transparentize(map-get($appColorz, btn-#{$thatBtn}-border), .50), #444); } + &.btn-blur { @include btn-blur-variant(map-get($appColorz, btn-#{$thatBtn}-color), map-get($appColorz, btn-#{$thatBtn}-bg), map-get($appColorz, btn-#{$thatBtn}-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-blank-soft { @include btn-blank-variant($btn-two-bg, transparentize($btn-two-border, .50), #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-blank-soft { @include btn-blank-variant($btn-three-bg, transparentize($btn-three-border, .50), #fff); } - &.btn-blur { @include btn-blur-variant( $btn-three-color, $btn-three-bg, $btn-three-border ); } -} - - - .btn-link { \ No newline at end of file