Wallet/src/sass/buttons.scss
2018-09-03 14:44:09 +02:00

89 lines
No EOL
2.4 KiB
SCSS

%button-standard {
width: 90%;
max-width: 300px;
margin-left: auto;
margin-right: auto;
display: block;
}
.button,
.onboarding .button {
&.button-primary {
@include button-style($v-button-primary-bg, $v-button-primary-border, $v-button-primary-active-bg, $v-button-primary-active-border, $v-button-primary-color);
@include button-clear($v-button-primary-bg);
@include button-outline($v-button-primary-bg);
}
&.button-primary,
&.button-secondary,
&.button-light,
&.button-white,
&.button-green,
&.button-assertive {
&.button-standard {
@extend %button-standard;
& + .button-standard {
margin-top: 1rem;
}
}
}
}
.onboarding .button {
&.button-secondary {
@include button-style($v-onboarding-button-secondary-bg, $v-onboarding-button-secondary-border, $v-onboarding-button-secondary-active-bg, $v-onboarding-button-secondary-active-border, $v-onboarding-button-secondary-color);
@include button-clear($v-onboarding-button-secondary-color);
@include button-outline($v-onboarding-button-secondary-color);
}
}
@mixin button-shadow() {
box-shadow: 0 2px 11px 0 #C1C1C1;;
}
.button {
&.button-secondary {
@include button-style($v-button-secondary-bg, $v-button-secondary-border, $v-button-secondary-active-bg, $v-button-secondary-active-border, $v-button-secondary-color);
@include button-clear($v-button-secondary-color);
@include button-outline($v-button-secondary-color);
}
}
.button-sendmax {
font-size: 0.7em !important;
display: inline !important;
}
.button {
border-radius: 6px;
&.button-full {
border-radius: 0;
display: block;
}
&-green {
@include button-style(#719561, #FFF, #606060, #FFF, #FFF);
@include button-clear(#FFF);
@include button-outline(#C1C1C1);
border: 0px;
@include button-shadow();
}
&-white {
@include button-style(#FFF, #C1C1C1, #C1C1C1, #FFF, #606060);
@include button-clear(#FFF);
@include button-outline(#C1C1C1);
@include button-shadow();
&.activated {
color: #FFF;
}
&-outline {
@include button-style(transparent, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF);
@include button-outline(#FFFFFF);
background: none;
box-shadow: none;
}
}
&-grey-outline {
@include button-style(transparent, #727272, #FAFAFA, #727272, #727272);
@include button-outline(#727272);
background: none;
box-shadow: none;
}
}