diff --git a/source/_assets/components/button.scss b/source/_assets/components/button.scss new file mode 100644 index 0000000..ba85310 --- /dev/null +++ b/source/_assets/components/button.scss @@ -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; +} diff --git a/source/_assets/predictor/demo.vue b/source/_assets/predictor/demo.vue index 21d69c2..d61066b 100644 --- a/source/_assets/predictor/demo.vue +++ b/source/_assets/predictor/demo.vue @@ -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> diff --git a/source/_assets/vars.scss b/source/_assets/vars.scss index 49c5fab..4e95551 100644 --- a/source/_assets/vars.scss +++ b/source/_assets/vars.scss @@ -9,3 +9,5 @@ $preferred-width: 700px; $first-media-step: $preferred-width - 1px; $mobile-margin: 0.8em; + +$button-border-radius: 0.5em;