Skip to content

Instantly share code, notes, and snippets.

@fccoelho7

fccoelho7/poc-rules.html

Created April 20, 2018 20:31
Show Gist options
  • Save fccoelho7/b1bfd76eb992ce97ff7e27f4aa634311 to your computer and use it in GitHub Desktop.
Save fccoelho7/b1bfd76eb992ce97ff7e27f4aa634311 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
poc-rules.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.component {
display: block;
background-color: #ccc;
height: 100px;
width: 100px;
position: relative;
}
.drag-item {
position: absolute;
width: 100px;
height: 100px;
}
.page-offsets {
position: absolute;
width: 100vw;
height: 100vh;
}
.top-offset {
position: absolute;
top: 0;
width: 100%;
&::before {
display: block;
width: 100%;
height: 1px;
background-color: #f0a;
content: "";
position: absolute;
top: -1px;
}
span {
display: block;
color: #f0a;
z-index: 1;
position: absolute;
left: 50%;
top: -15px;
}
}
.bottom-offset {
position: absolute;
bottom: 0;
width: 100%;
&::before {
display: block;
width: 100%;
height: 1px;
background-color: #f0a;
content: "";
position: absolute;
bottom: -1px;
}
span {
display: block;
color: #f0a;
z-index: 1;
position: absolute;
left: 50%;
top: 0;
}
}
.left-offset {
position: absolute;
left: 0;
height: 100%;
width: 1px;
&::before {
display: block;
width: 1px;
height: 100%;
background-color: #f0a;
content: "";
position: absolute;
left: -1px;
}
span {
display: block;
color: #f0a;
z-index: 1;
position: absolute;
top: 50%;
left: -25px;
transform: rotate(-90deg);
}
}
.right-offset {
position: absolute;
right: 0;
height: 100%;
width: 1px;
&::before {
display: block;
width: 1px;
height: 100%;
background-color: #f0a;
content: "";
position: absolute;
right: 1px;
}
span {
display: block;
color: #f0a;
z-index: 1;
position: absolute;
top: 50%;
right: -25px;
transform: rotate(-90deg);
}
}
</style>
<body>
<div>
<div class="page-offsets">
<div class="top-offset" style="top: 150px">
<span>150px</span>
</div>
<div class="bottom-offset" style="bottom: 332px">
<span>332px</span>
</div>
<div class="left-offset" style="left: 50px">
<span>50px</span>
</div>
<div class="right-offset" style="right: 746px">
<span>746px</span>
</div>
</div>
<div class="drag-area">
<div class="drag-item" style="top: 150px; left: 50px">
<div class="component">Component</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment