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">
@import "~@/assets/_responsive";
@import "~@/assets/_colors";
@import "~@/assets/_mixins";
#layout {
.button {
&::before {
content: "←";
transform: scale(2.4) translateY(-2px);
content: "";
display: inline-block;
margin-right: -5px;
@include arrow(12px, -90deg, white);
}
&:hover {
&::before {
border-color: $c-background;
}
}
position: fixed;

10
pages/index.vue
View file

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