@ninebone/table 0.0.1

package/dist/css/nxModal.css

@@ -0,0 +1,627 @@
+nx-modal {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background-color: rgba(0,0,0,0.5);
+	z-index: 9999;
+	display: flex;
+	justify-content: center;
+	flex-direction: column;
+	padding: 0;
+	overflow: hidden;
+	--border: 1px solid darkgreen;
+	outline: none;
+	resize: both;
+	box-shadow: 0 0 4px 0 darkgreen;
+}
+
+dialog {
+	width: calc(100% - 50px);
+	height: calc(100% - 50px);
+	display: flex;
+	flex-direction: column;
+	padding: 0;
+	overflow: hidden;
+	border: 1px solid darkgreen;
+	outline: none;
+	resize: both;
+	box-shadow: 0 0 4px 0 darkgreen;
+
+	div.head .rect1, div.head .rect2, div.head .rect3 {
+		display: none;
+		width: 50px;
+		height: 100%;
+	}
+
+	div.head .rect1 {
+		background-color: red;
+	}
+	div.head .rect2 {
+		background-color: darkgreen;
+	}
+	div.head .rect3 {
+		background-color: olive;
+	}
+
+	div.head {
+		display: flex;
+		align-items: center;
+		--height: 30px;
+		background-color: darkgreen;
+		padding: 4px;
+		cursor: move;
+	}
+	div.head:hover {
+		filter: brightness(110%);
+	}
+
+	div.head span {
+		font-size: 12px;
+		position: relative;
+	}
+
+	div.head span.title {
+		color: #ddd;
+		margin-left: 4px;
+		font-weight: bold;
+		white-space: nowrap;
+	}
+
+	div.head span.sub-title {
+		color: #ccc;
+		margin-left: 8px;
+		font-style: italic;
+		width: 100%;
+	}
+
+	div.head form {
+		margin: 0;
+	}
+	div.head button {
+		margin-right: 4px;
+		background-color: transparent;
+		border: none;
+		color: #ccc;
+		font-size: x-small;
+	}
+	div.head button:hover {
+		cursor: pointer;
+	}
+
+	div.contents {
+		display: flex;
+		width: 100%;
+		height: 100%;
+		border: 1px solid darkgreen;
+		background: white;
+	}
+	div.left {
+		position: relative;
+		width: 16px;
+		height: 100%;
+		background-color: #ddd;
+		display: none;
+	}
+
+	div.left span {
+		writing-mode: vertical-rl;
+		-moz-user-select: none;
+		-webkit-user-select: none;
+		-ms-user-select: none;
+		user-select: none;
+		color: #ccc;
+		font-weight: 700;
+		width: 100%;
+		height: 100%;
+		margin-left: 3px;
+		margin-top: 3px;
+	}
+	div.close2 {
+		display: none;
+		position: absolute;
+		right: 0;
+		top: 3px;
+		cursor: pointer;
+		color: #666;
+	}
+	div.close2 svg:hover {
+		color: #999;
+	}
+
+	div.body {
+		display: flex;
+		width: 100%;
+		height: unset;
+		--border: 3px solid #999;
+		--border-top: none;
+		overflow-x: hidden;
+		overflow-y: auto;
+		padding: 16px;
+		flex-direction: column;
+		align-items: flex-start;
+	}
+
+	ng-sphere.icon {
+		margin-left: 8px;
+	}
+
+	buttons {
+		display: flex;
+		--position: absolute;
+		--right: 4px;
+	}
+
+	ng-sphere {
+		display: flex;
+		position: relative;
+		--width: 16px;
+		--height: 16px;
+		cursor: pointer;
+		margin-right: 4px;
+	}
+	ng-sphere:hover {
+		filter: brightness(90%);
+	}
+	ng-sphere:active {
+		filter: brightness(80%);
+	}
+
+	ng-sphere:hover::after {
+		content: "";
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		background-repeat: no-repeat;
+		background-position: center;
+	}
+	ng-sphere.apply:hover::after {
+		background-size: 14px 14px;
+		background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><polyline points="2.5,7 6,10 11,3" style="fill:none;stroke:white;stroke-width:2px;" /></svg>');
+	}
+
+	ng-sphere.reset:hover::after {
+		background-size: 12px 12px;
+		background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="fill:none;stroke:white;stroke-width:2px;" focusable="false" aria-hidden="true"><path d="M10 5h5V0"></path><path d="M15 8a6.957 6.957 0 0 1-7 7 6.957 6.957 0 0 1-7-7 6.957 6.957 0 0 1 7-7 6.87 6.87 0 0 1 6.3 4"></path></svg>');
+	}
+
+	ng-sphere.close:hover::after {
+		background-size: 12px 12px;
+		background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" style="fill:none;stroke:white;stroke-width:2px;" focusable="false" aria-hidden="true" viewBox="0 0 16 16"><path d="M2 2l12 12M14 2L2 14"></path></svg>');
+	}
+}
+
+
+
+
+@keyframes runIn {
+	0% {
+		transform:translateX(-1500px) skewX(30deg) scaleX(1.3);
+	}
+	70% {
+		transform:translateX(30px) skewX(0deg) scaleX(.9);
+	}
+	100% {
+		transform:translateX(0px) skewX(0deg) scaleX(1);
+	}
+}
+@keyframes runOut {
+	0% {
+		transform:translateX(0px) skewX(0deg) scaleX(1);
+	}
+	30% {
+		transform:translateX(-30px) skewX(-5deg) scaleX(.9);
+	}
+	100% {
+		transform:translateX(1500px) skewX(30deg) scaleX(1.3);
+	}
+}
+
+:host(.run) {
+	dialog {
+		transform:translateX(-1500px);
+		animation: runIn .3s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
+	}
+	dialog.out {
+		transform:translateX(-1500px);
+		animation: runOut .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
+	}
+}
+
+:host(.reverseRun) {
+	dialog {
+		transform:translateX(-1500px);
+		animation: reverseRunIn .3s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
+	}
+	dialog.out {
+		transform:translateX(-1500px);
+		animation: reverseRunOut .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
+	}
+}
+@keyframes reverseRunIn {
+	0% {
+		transform:translateX(1500px) skewX(-30deg) scaleX(1.3);
+	}
+	70% {
+		transform:translateX(-40px) skewX(0deg) scaleX(.9);
+	}
+	100% {
+		transform:translateX(0px) skewX(0deg) scaleX(1);
+	}
+}
+@keyframes reverseRunOut {
+	0% {
+		transform:translateX(0px) skewX(0deg) scaleX(1);
+	}
+	30% {
+		transform:translateX(30px) skewX(5deg) scaleX(.9);
+	}
+	100% {
+		transform:translateX(-1500px) skewX(-30deg) scaleX(1.3);
+	}
+}
+
+
+:host(.moveUp) {
+	dialog {
+		animation: moveUpIn .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
+	}
+	dialog.out {
+		animation: moveUpOut .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
+	}
+}
+@keyframes moveUpIn {
+	0% {
+		transform:scale(.5) translateY(1000px);
+		opacity:0;
+	}
+	100% {
+		transform:scale(1) translateY(0px);
+		opacity:1;
+	}
+}
+@keyframes moveUpOut {
+	0% {
+		transform:scale(1) translateY(0px);
+		opacity:1;
+	}
+	100% {
+		transform:scale(.5) translateY(1000px);
+		opacity:0;
+	}
+}
+
+:host(.moveDown) {
+	dialog {
+		animation: moveDownIn .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
+	}
+	dialog.out {
+		animation: moveDownOut .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
+	}
+}
+@keyframes moveDownIn {
+	0% {
+		transform:scale(.8) translateY(-1000px);
+		opacity:0;
+	}
+	100% {
+		transform:scale(1) translateY(0px);
+		opacity:1;
+	}
+}
+@keyframes moveDownOut {
+	0% {
+		transform:scale(1) translateY(0px);
+		opacity:1;
+	}
+	100% {
+		transform:scale(.8) translateY(-1000px);
+		opacity:0;
+	}
+}
+
+
+:host(.zoom) {
+	dialog {
+		animation: zoomIn .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
+	}
+	dialog.out {
+		animation: zoomOut .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
+	}
+}
+@keyframes zoomIn {
+	0% {
+		transform:scale(0);
+	}
+	100% {
+		transform:scale(1);
+	}
+}
+
+@keyframes zoomOut {
+	0% {
+		transform:scale(1);
+	}
+	100% {
+		transform:scale(0);
+	}
+}
+
+:host(.fade) {
+	dialog {
+		animation: fadeIn 1s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
+	}
+	dialog.out {
+		animation: fadeOut 0.3s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
+	}
+}
+@keyframes fadeIn {
+	0% {
+		opacity: 0;
+	}
+	100% {
+		opacity: 1;
+	}
+}
+@keyframes fadeOut {
+	0% {
+		opacity: 1;
+	}
+	100% {
+		opacity: 0;
+	}
+}
+
+:host(.shake) {
+	dialog {
+		animation: shake 0.5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
+	}
+	dialog.out {
+		animation: runOut 1s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
+	}
+}
+@keyframes shake {
+	0%, 100% { transform: translate(0, 0); opacity: 1; }
+	10%, 30%, 50%, 70%, 90% { transform: translate(-3px, -3px); opacity: 0.8; }
+	20%, 40%, 60%, 80% { transform: translate(3px, 3px); opacity: 0.8; }
+}
+
+
+
+/**
+:host(.unfold) {
+	dialog {
+		transform:translateX(-1500px);
+		animation:unfoldIn 1s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
+	}
+	dialog.out {
+		transform:translateX(-1500px);
+		animation:unfoldOut 1s .3s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
+	}
+}*/
+
+
+@keyframes unfoldIn {
+	0% {
+		transform:scaleY(.005) scaleX(0);
+	}
+	50% {
+		transform:scaleY(.005) scaleX(1);
+	}
+	100% {
+		transform:scaleY(1) scaleX(1);
+	}
+}
+
+@keyframes unfoldOut {
+	0% {
+		transform:scaleY(1) scaleX(1);
+	}
+	50% {
+		transform:scaleY(.005) scaleX(1);
+	}
+	100% {
+		transform:scaleY(.005) scaleX(0);
+	}
+}
+
+
+
+
+
+
+@keyframes scaleBack {
+	0% {
+		transform:scale(1);
+	}
+	100% {
+		transform:scale(.85);
+	}
+}
+
+@keyframes scaleForward {
+	0% {
+		transform:scale(.85);
+	}
+	100% {
+		transform:scale(1);
+	}
+}
+
+@keyframes quickScaleDown {
+	0% {
+		transform:scale(1);
+	}
+	99.9% {
+		transform:scale(1);
+	}
+	100% {
+		transform:scale(0);
+	}
+}
+
+@keyframes slideUpLarge {
+	0% {
+		transform:translateY(0%);
+	}
+	100% {
+		transform:translateY(-100%);
+	}
+}
+
+@keyframes slideDownLarge {
+	0% {
+		transform:translateY(-100%);
+	}
+	100% {
+		transform:translateY(0%);
+	}
+}
+
+
+@keyframes moveDown {
+	0% {
+		transform:translateY(0px);
+	}
+	100% {
+		transform:translateY(150px);
+	}
+}
+
+
+@keyframes blowUp {
+	0% {
+		transform:scale(0);
+	}
+	100% {
+		transform:scale(1);
+	}
+}
+
+@keyframes blowUpOut {
+	0% {
+		transform:scale(1);
+		opacity:1;
+	}
+	100% {
+		transform:scale(0);
+		opacity:0;
+	}
+}
+
+
+
+@keyframes sketchIn {
+	0% {
+		stroke-dashoffset: 778;
+	}
+	100% {
+		stroke-dashoffset: 0;
+	}
+}
+
+@keyframes sketchOut {
+	0% {
+		stroke-dashoffset: 0;
+	}
+	100% {
+		stroke-dashoffset: 778;
+	}
+}
+
+@keyframes modalFadeIn {
+	0% {
+		background-color:transparent;
+	}
+	100% {
+		background-color:white;
+	}
+}
+
+@keyframes modalFadeOut {
+	0% {
+		background-color:white;
+	}
+	100% {
+		background-color:transparent;
+	}
+}
+
+@keyframes modalContentFadeIn {
+	0% {
+		opacity:0;
+		top:-20px;
+	}
+	100% {
+		opacity:1;
+		top:0;
+	}
+}
+
+@keyframes modalContentFadeOut {
+	0% {
+		opacity:1;
+		top:0px;
+	}
+	100% {
+		opacity:0;
+		top:-20px;
+	}
+}
+
+@keyframes bondJamesBond {
+	0% {
+		transform:translateX(1000px);
+	}
+	80% {
+		transform:translateX(0px);
+		border-radius:75px;
+		height:75px;
+		width:75px;
+	}
+	90% {
+		border-radius:3px;
+		height:182px;
+		width:247px;
+	}
+	100% {
+		border-radius:3px;
+		height:162px;
+		width:227px;
+	}
+}
+
+@keyframes killShot {
+	0% {
+		transform:translateY(0) rotate(0deg);
+		opacity:1;
+	}
+	100% {
+		transform:translateY(300px) rotate(45deg);
+		opacity:0;
+	}
+}
+
+@keyframes fadeToRed {
+	0% {
+		background-color:rgba(black,.6);
+	}
+	100% {
+		background-color:rgba(red,.8);
+	}
+}
+
+@keyframes slowFade {
+	0% {
+		opacity:1;
+	}
+	99.9% {
+		opacity:0;
+		transform:scale(1);
+	}
+	100% {
+		transform:scale(0);
+	}
+}
+