Draw grippie with CSS.

This commit is contained in:
Guo Xiang Tan 2016-08-04 10:24:14 +08:00
parent 927bf19d93
commit 66f14ab0b8
2 changed files with 17 additions and 6 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 90 B

View File

@ -69,14 +69,25 @@ body {
}
}
$grippie-border-color: dark-light-choose(scale-color($primary, $lightness: 70%), scale-color($secondary, $lightness: 50%));
.grippie {
width: 100%;
position: relative;
cursor: row-resize;
height: 11px;
overflow: hidden;
display:block;
border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
background: image-url("grippie.png") dark-light-diff($primary, $secondary, 90%, -60%) no-repeat center 3px;
margin: auto;
height: 4.5px;
width: 27px;
border-top: 1px solid $grippie-border-color;
border-bottom: 1px solid $grippie-border-color;
top: 4px;
box-sizing: border-box;
}
.grippie:before {
content: '';
display: block;
border-top: 1px solid $grippie-border-color;
margin-top: 0.5px;
}
}