av/homepage
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Create button component

Browse Source
This commit is contained in:
Anton Vakhrushev 2018-06-22 22:04:25 +03:00
parent 2dcd3ffa5e
commit f0c83831db
3 changed files with 23 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
source/_assets/components/button.scss Normal file
View File

@ -0,0 +1,12 @@
@import '../vars';
%button {
display: inline-block;
color: #fff;
background-color: #405480;
padding: 0.6em 1.2em;
border: none;
font-size: 100%;
font-family: inherit;
border-radius: $button-border-radius;
}

27
source/_assets/predictor/demo.vue
View File

@ -81,8 +81,7 @@ export default {
<style lang="scss">
@import '../vars.scss';
$button-radius: 0.5em;
@import '../components/button';
.app {
display: block;
@ -115,20 +114,12 @@ $button-radius: 0.5em;
justify-content: center;
}
%button {
display: inline-block;
color: #fff;
background-color: #405480;
padding: 0.6em;
border: none;
font-size: 100%;
font-family: inherit;
}
.restart-button {
@extend %button;
padding: 0.6em 1.4em;
border-radius: $button-radius;
padding: {
left: 1.4em;
right: 1.4em;
}
}
.pass-button {
@ -139,12 +130,12 @@ $button-radius: 0.5em;
}
.pass-button.__left {
border-top-left-radius: $button-radius;
border-bottom-left-radius: $button-radius;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.pass-button.__right {
border-top-right-radius: $button-radius;
border-bottom-right-radius: $button-radius;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
</style>

2
source/_assets/vars.scss
View File

@ -9,3 +9,5 @@ $preferred-width: 700px;
$first-media-step: $preferred-width - 1px;
$mobile-margin: 0.8em;
$button-border-radius: 0.5em;