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