fccoelho7/poc-rules.html

## 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>
	<!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>