moritzruth/moritzruth.de
1
0
Fork 0
Code Activity Actions

better arrows

Browse source
This commit is contained in:
Moritz Ruth 2019-03-09 23:35:48 +01:00
parent 86ac7d9ccb
commit 8ead8b8928
3 changed files with 26 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

9
assets/_mixins.scss Normal file
View file

@ -0,0 +1,9 @@
@mixin arrow($length, $angle, $color) {
border-color: $color;
border-bottom: solid;
border-right: solid;
border-width: 2px;
width: $length;
height: $length;
transform: rotate($angle + -135deg);
}

13
layouts/secondLevel.vue
View file

@ -15,13 +15,22 @@
<style scoped lang="scss"> <style scoped lang="scss">
@import "~@/assets/_responsive"; @import "~@/assets/_responsive";
@import "~@/assets/_colors";
@import "~@/assets/_mixins";
#layout { #layout {
.button { .button {
&::before { &::before {
content: "←"; content: "";
transform: scale(2.4) translateY(-2px);
display: inline-block; display: inline-block;
margin-right: -5px;
@include arrow(12px, -90deg, white);
}
&:hover {
&::before {
border-color: $c-background;
}
} }
position: fixed; position: fixed;

10
pages/index.vue
View file

@ -51,7 +51,8 @@
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@import "~@/assets/_responsive.scss"; @import "~@/assets/_responsive";
@import "~@/assets/_mixins";
main { main {
height: 100%; height: 100%;
@ -78,10 +79,11 @@
margin: 10px; margin: 10px;
&::before { &::before {
content: "→"; content: "";
transform: translateY(-4px) scale(1.7);
display: inline-block; display: inline-block;
margin-right: 5px; margin-right: 10px;
margin-left: -5px;
@include arrow(12px, 90deg, white);
} }
} }
} }