selfhosted
/
padloc
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Adjust svg viewport scaling to allow for better granularity

This commit is contained in:
Martin Kleinschrodt 2013-11-17 21:43:22 +01:00
parent e8ba28b5b2
commit b848aff4e6
1 changed files with 20 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/components/shapeshifter.html
View File

@ -6,7 +6,6 @@
min-width: 30px;
min-height: 30px;
position: relative;
border: solid 1px;
};
svg {
@ -16,50 +15,50 @@
line {
stroke: #333;
stroke-width: 2;
stroke-width: 6;
-webkit-transform-origin: center center;
-webkit-transition: -webkit-transform 0.5s;
-webkit-transform: translate(0, 0) scale(0);
}
.plus line:nth-child(1) {
-webkit-transform: translate(0, 0) scale(10, 1);
-webkit-transform: translate(0, 0) scale(12, 1);
}
.plus line:nth-child(3) {
-webkit-transform: translate(0, 0) rotate(90deg) scale(10, 1);
-webkit-transform: translate(0, 0) rotate(90deg) scale(12, 1);
}
.cancel line:nth-child(1) {
-webkit-transform: translate(0, 0) rotate(135deg) scale(10, 1);
-webkit-transform: translate(0, 0) rotate(135deg) scale(12, 1);
}
.cancel line:nth-child(3) {
-webkit-transform: translate(0, 0) rotate(-135deg) scale(10, 1);
-webkit-transform: translate(0, 0) rotate(-135deg) scale(12, 1);
}
.check line:nth-child(1) {
-webkit-transform: translate(-7px, 4px) rotate(45deg) scale(5, 1);
-webkit-transform: translate(-24.7px, 10.5px) rotate(45deg) scale(6, 1);
}
.check line:nth-child(3) {
-webkit-transform: translate(3px, 0) rotate(-45deg) scale(10, 1);
-webkit-transform: translate(11.5px, 0) rotate(-45deg) scale(12, 1);
}
.menu line:nth-child(1) {
-webkit-transform: translate(0, -7px) scale(10, 1);
-webkit-transform: translate(0, -22px) scale(12, 1);
}
.menu line:nth-child(2) {
-webkit-transform: translate(0, 0) scale(10, 1);
-webkit-transform: translate(0, 0) scale(12, 1);
}
.menu line:nth-child(3) {
-webkit-transform: translate(0, 7px) scale(10, 1);
-webkit-transform: translate(0, 22px) scale(12, 1);
}
.more line:nth-child(1) {
-webkit-transform: translate(-7px, 0) scale(2, 2);
-webkit-transform: translate(-25px, 0) scale(2, 2);
}
.more line:nth-child(2) {
@ -67,29 +66,29 @@
}
.more line:nth-child(3) {
-webkit-transform: translate(7px, 0) scale(2, 2);
-webkit-transform: translate(25px, 0) scale(2, 2);
}
.arrow-right line:nth-child(1) {
-webkit-transform: translate(0, -5px) rotate(45deg) scale(8, 1);
-webkit-transform: translate(0, -17px) rotate(45deg) scale(9, 1);
}
.arrow-right line:nth-child(3) {
-webkit-transform: translate(0, 5px) rotate(-45deg) scale(8, 1);
-webkit-transform: translate(0, 17px) rotate(-45deg) scale(9, 1);
}
.arrow-left line:nth-child(1) {
-webkit-transform: translate(0, -5px) rotate(-45deg) scale(8, 1);
-webkit-transform: translate(0, -17px) rotate(-45deg) scale(9, 1);
}
.arrow-left line:nth-child(3) {
-webkit-transform: translate(0, 5px) rotate(45deg) scale(8, 1);
-webkit-transform: translate(0, 17px) rotate(45deg) scale(9, 1);
}
</style>
<svg class="{{ shape }}" viewBox="0 0 30 30">
<line x1="14" y1="15" x2="16" y2="15" />
<line x1="14" y1="15" x2="16" y2="15" />
<line x1="14" y1="15" x2="16" y2="15" />
<svg class="{{ shape }}" viewBox="0 0 100 100">
<line x1="47" y1="50" x2="53" y2="50" />
<line x1="47" y1="50" x2="53" y2="50" />
<line x1="47" y1="50" x2="53" y2="50" />
</svg>
</template>
<script>