@byeolnaerim/flex-layout 0.0.9 → 0.0.10

package/dist/flex-layout/styles/FlexLayout.module.css

@@ -1,416 +1,473 @@
-.flex-layout {
-    display: flex;
-    height: 100%;
-    width: 100%;
-    overflow: auto;
-    overflow-wrap: revert;
-    position: relative;
-    /* -ms-overflow-style: none;
-    scrollbar-width: none; */
-    /* &::-webkit-scrollbar {
-        display: none;
-    } */
-    &[data-direction='column'] {
-        flex-direction: column;
-        & > .flex-resize-panel {
-            height: 4px;
-            width: auto;
-            cursor: ns-resize;
-            &:hover > .hover,
-            &:hover > .hover[data-is_hover],
-            &:active > .hover {
-                height: 3px;
-                width: 100%;
-            }
-        }
-        & > .flex-container > .flex-content-fit-wrapper {
-            width: 100%;
-            height: fit-content;
-            & > * {
-                width: 100%;
-                height: fit-content;
-            }
-        }
-    }
-
-    &[data-direction='row'] {
-        flex-direction: row;
-        & > .flex-resize-panel {
-            width: 4px;
-            height: auto;
-            cursor: ew-resize;
-            &:hover > .hover,
-            &:hover > .hover[data-is_hover],
-            &:active > .hover {
-                width: 3px;
-                height: 100%;
-            }
-        }
-        & > .flex-container > .flex-content-fit-wrapper {
-            width: fit-content;
-            height: 100%;
-            & > * {
-                width: fit-content;
-                height: 100%;
-            }
-        }
-    }
-    & > .flex-container {
-        overflow: hidden;
-        box-sizing: border-box;
-        &[data-is_resize_panel='true'] {
-            flex: 1 1 0%;
-        }
-        &[data-is_resize_panel='false'] {
-            flex: 0 0 0%;
-        }
-        & > *:not(.flex-content-fit-wrapper) {
-            width: 100%;
-            height: 100%;
-        }
-    }
-    & .flex-resize-panel {
-        background-color: rgb(115 115 115);
-        z-index: 1001;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        flex: 0 0 0.1%;
-        position: relative;
-        -moz-user-select: -moz-none;
-        -khtml-user-select: none;
-        -webkit-user-select: none;
-        -ms-user-select: none;
-        user-select: none;
-        right: 0;
-        bottom: 0;
-
-        &:hover,
-        &:active {
-            animation-name: drag-panel-hover;
-            animation-fill-mode: forwards;
-            animation-direction: normal;
-            animation-duration: 0.3s;
-            animation-iteration-count: 1;
-            animation-timing-function: cubic-bezier(1, -0.37, 0.73, 0.8);
-        }
-
-        &:hover > .hover,
-        &:hover > .hover[data-is_hover],
-        &:active > .hover {
-            background-color: #0066ffb5;
-            z-index: 3002;
-            position: absolute;
-            display: block;
-            opacity: 1;
-            visibility: inherit;
-            transition: all 1s;
-            animation-name: drag-panel-hover-highlight;
-            animation-fill-mode: forwards;
-            animation-direction: normal;
-            animation-duration: 0.3s;
-            animation-iteration-count: 1;
-            animation-timing-function: cubic-bezier(1, -0.37, 0.73, 0.8);
-        }
-
-        & > .hover {
-            opacity: 0;
-            visibility: hidden;
-            transition: all 1s;
-        }
-        &.bottom-cylinder {
-            &::after {
-                border-bottom-left-radius: 15px;
-                border-bottom-right-radius: 15px;
-                bottom: 100%;
-            }
-        }
-        &.bottom-cylinder-reverse {
-            &::after {
-                border-top-left-radius: 15px;
-                border-top-right-radius: 15px;
-                bottom: 100%;
-            }
-        }
-        &.top-cylinder {
-            border-bottom-left-radius: 15px;
-            border-bottom-right-radius: 15px;
-        }
-        &.right-cylinder {
-            &::after {
-                border-top-right-radius: 15px;
-                border-bottom-right-radius: 15px;
-                left: 100%;
-            }
-        }
-        &.left-cylinder {
-            &::after {
-                right: 100%;
-            }
-        }
-        &.bottom-cylinder,
-        &.bottom-cylinder-reverse,
-        &.top-cylinder,
-        &.left-cylinder,
-        &.right-cylinder {
-            &::after {
-                background-color: hsla(0, 0%, 54%, 0.32);
-                content: ' ';
-                position: absolute;
-                z-index: 3002;
-            }
-            &:hover,
-            &:hover::after,
-            &:active,
-            &:active::after {
-                background-color: rgb(0 102 255 / 45%);
-                transition: background-color 1s;
-            }
-        }
-        &.bottom-cylinder,
-        &.top-cylinder,
-        &.bottom-cylinder-reverse {
-            &::after {
-                height: 1.1rem;
-                width: 60%;
-            }
-            &:not(.bottom-cylinder-reverse)::after {
-                top: 0;
-            }
-        }
-        &.left-cylinder,
-        &.right-cylinder {
-            &::after {
-                width: 1.1rem;
-                height: 60%;
-            }
-        }
-    }
-}
-
-@keyframes drag-panel-hover {
-    0% {
-        background-color: #b1b1b1d6;
-    }
-
-    10% {
-        background-color: #b1b1b1ba;
-    }
-
-    20% {
-        background-color: #b1b1b194;
-    }
-
-    40% {
-        background-color: #b1b1b17d;
-    }
-
-    60% {
-        background-color: #b1b1b152;
-    }
-
-    80% {
-        background-color: #b1b1b130;
-    }
-
-    100% {
-        background-color: #b1b1b100;
-        animation-play-state: paused;
-    }
-}
-
-@keyframes drag-panel-hover-highlight {
-    0% {
-        opacity: 0;
-    }
-
-    10% {
-        opacity: 0.1;
-    }
-
-    20% {
-        opacity: 0.2;
-    }
-
-    40% {
-        opacity: 0.4;
-    }
-
-    60% {
-        opacity: 0.6;
-    }
-
-    80% {
-        opacity: 0.8;
-    }
-
-    100% {
-        opacity: 1;
-        animation-play-state: paused;
-    }
-}
-
-.flex-split-screen {
-    width: 100%;
-    height: 100%;
-    position: relative;
-    & .flex-split-screen-boundary-container {
-        position: absolute;
-        font-family: Arial, sans-serif;
-        transition:
-            background-color 0.3s,
-            border-color 0.3s;
-        color: #00acc1;
-        border: 2px dashed #00acc1;
-        border-radius: 10px;
-        background-color: #0014ff17;
-        font-size: 1.5rem;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-weight: bold;
-        z-index: 9001;
-    }
-    & .flex-split-screen-drag-box-title-wrapper-sticky {
-        position: sticky;
-        top: 0;
-        z-index: 2001;
-        background: #f0f0f0;
-    }
-    & .flex-split-screen-drag-box-title-wrapper {
-        html[data-color-scheme='dark'] & {
-            background: #3c3c3c;
-            box-shadow: 0px 1px 20px 0px #1e1e1e;
-        }
-        html[data-color-scheme='light'] & {
-            background: #edf1f5;
-            box-shadow: 0px 1px 20px 0px #e5e5e5;
-        }
-        scrollbar-width: initial;
-        scrollbar-color: initial;
-        display: flex;
-        justify-content: space-between;
-        transition:
-            background 0.3s,
-            color 0.3s,
-            box-shadow 0.3s;
-        position: relative;
-        border-bottom: 1px solid #e5e5e5;
-        & .flex-split-screen-drag-box-title-container {
-            display: flex;
-            width: 100%;
-            background: inherit;
-        }
-    }
-}
-.flex-split-screen-drag-box-title-item {
-    display: flex;
-    align-items: baseline;
-    padding-right: 0.5rem;
-    padding-left: 0.1rem;
-    &:last-child:not(:first-child) {
-        border-right: 2px solid #00000012;
-    }
-    &:not(.active) {
-        box-shadow: inset 0 0 20px 20px #00000000;
-        border-bottom: 1px solid #007fff40;
-    }
-    &:hover {
-        html[data-color-scheme='dark'] & {
-            background: #494949;
-        }
-        html[data-color-scheme='light'] & {
-            background: #e0e0e0;
-        }
-        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-    }
-    &:active {
-        box-shadow: inset 0px 0px 17px 0px #00000029;
-        transform: scale(0.97);
-    }
-    & button {
-        background: none;
-        border: none;
-        color: #bbbbbb;
-        font-weight: bold;
-        font-family: none;
-        font-size: 0.9rem;
-        cursor: pointer;
-        padding: 0 0.25rem;
-    }
-    &.active {
-        html[data-color-scheme='dark'] & {
-            color: #b9af3a;
-        }
-        html[data-color-scheme='light'] & {
-            color: #494300;
-        }
-        font-weight: bold;
-        box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
-        & button {
-            color: #5f5f5f;
-        }
-    }
-}
-.flex-split-screen-drag-box-title-more {
-    display: flex;
-    flex-direction: column;
-    line-height: 0.3;
-    padding: 0rem 0.65rem 0.5rem;
-    font-size: 1.2rem;
-    font-weight: bold;
-    border: none;
-    background: none;
-    color: black;
-    justify-content: space-evenly;
-    cursor: pointer;
-    background: inherit;
-    &:hover {
-        background: #797979;
-        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-    }
-    &:active {
-        box-shadow: inset 0px 0px 17px 0px #00000029;
-        transform: scale(0.97);
-    }
-}
-.flex-split-screen-drag-box {
-    align-self: center;
-    -webkit-touch-callout: none; /* iOS */
-    -webkit-user-select: none; /* Safari */
-    -khtml-user-select: none; /* Konqueror */
-    -moz-user-select: none; /* Firefox */
-    -ms-user-select: none; /* IE 10+ */
-    user-select: none; /* Standard syntax */
-    /* pointer-events: none; */
-    -webkit-tap-highlight-color: transparent;
-    /* touch-action: none; */
-    -webkit-touch-callout: none;
-}
-.flex-split-screen-drag-box-clone {
-    -webkit-touch-callout: none; /* iOS */
-    -webkit-user-select: none; /* Safari */
-    -khtml-user-select: none; /* Konqueror */
-    -moz-user-select: none; /* Firefox */
-    -ms-user-select: none; /* IE 10+ */
-    user-select: none; /* Standard syntax */
-    /* pointer-events: none; */
-    -webkit-tap-highlight-color: transparent;
-    /* touch-action: none; */
-    -webkit-touch-callout: none;
-
-    display: flex;
-    background-color: #adadad;
-    flex-direction: column;
-    padding: 0.2rem 0.4rem;
-    border-radius: 7px;
-    line-height: 99%;
-    z-index: 9001;
-    & span:first-child {
-        font-weight: bold;
-        font-size: 0.85rem;
-    }
-    & span:last-child {
-        font-size: 0.75rem;
-    }
-}
+.flex-layout {
+	display: flex;
+	height: 100%;
+	width: 100%;
+	overflow: auto;
+	overflow-wrap: revert;
+	position: relative;
+	/* -ms-overflow-style: none;
+    scrollbar-width: none; */
+	/* &::-webkit-scrollbar {
+        display: none;
+    } */
+	&[data-direction="column"] {
+		flex-direction: column;
+		& > .flex-resize-panel {
+			height: 4px;
+			width: auto;
+			cursor: ns-resize;
+			&:hover > .hover,
+			& > .hover[data-is_hover],
+			&:active > .hover {
+				height: 3px;
+				width: 100%;
+			}
+		}
+		& > .flex-container > .flex-content-fit-wrapper {
+			width: 100%;
+			height: fit-content;
+			& > * {
+				width: 100%;
+				height: fit-content;
+			}
+		}
+	}
+
+	&[data-direction="row"] {
+		flex-direction: row;
+		& > .flex-resize-panel {
+			width: 4px;
+			height: auto;
+			cursor: ew-resize;
+			&:hover > .hover,
+			& > .hover[data-is_hover],
+			&:active > .hover {
+				width: 3px;
+				height: 100%;
+			}
+		}
+		& > .flex-container > .flex-content-fit-wrapper {
+			width: fit-content;
+			height: 100%;
+			& > * {
+				width: fit-content;
+				height: 100%;
+			}
+		}
+	}
+	& > .flex-container {
+		overflow: hidden;
+		box-sizing: border-box;
+		&[data-is_resize_panel="true"] {
+			flex: 1 1 0%;
+		}
+		&[data-is_resize_panel="false"] {
+			flex: 0 0 0%;
+		}
+		& > *:not(.flex-content-fit-wrapper) {
+			width: 100%;
+			height: 100%;
+		}
+	}
+	& .flex-resize-panel {
+		background-color: rgb(115 115 115);
+		z-index: 1001;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		flex: 0 0 0.1%;
+		position: relative;
+		-moz-user-select: -moz-none;
+		-khtml-user-select: none;
+		-webkit-user-select: none;
+		-ms-user-select: none;
+		user-select: none;
+		right: 0;
+		bottom: 0;
+
+		&:hover,
+		&:active {
+			animation-name: drag-panel-hover;
+			animation-fill-mode: forwards;
+			animation-direction: normal;
+			animation-duration: 0.3s;
+			animation-iteration-count: 1;
+			animation-timing-function: cubic-bezier(1, -0.37, 0.73, 0.8);
+		}
+
+		&:hover > .hover,
+		& > .hover[data-is_hover],
+		&:active > .hover {
+			background-color: #0066ffb5;
+			z-index: 3002;
+			position: absolute;
+			display: block;
+			opacity: 1;
+			visibility: inherit;
+			transition: all 1s;
+			animation-name: drag-panel-hover-highlight;
+			animation-fill-mode: forwards;
+			animation-direction: normal;
+			animation-duration: 0.3s;
+			animation-iteration-count: 1;
+			animation-timing-function: cubic-bezier(1, -0.37, 0.73, 0.8);
+		}
+
+		& > .hover {
+			opacity: 0;
+			visibility: hidden;
+			transition: all 1s;
+		}
+
+		&.top-cylinder,
+		&.top-cylinder-reverse,
+		&.bottom-cylinder,
+		&.bottom-cylinder-reverse,
+		&.left-cylinder,
+		&.left-cylinder-reverse,
+		&.right-cylinder,
+		&.right-cylinder-reverse {
+			/* 실린더 크기(기존 1.1rem 유지) */
+			--cyl-size: 1.1rem;
+			/* 선 방향 기준 길이(기존 60% 유지) */
+			--cyl-span: 60%;
+
+			&::after {
+				content: "";
+				position: absolute;
+				z-index: 3002;
+				background-color: hsla(0, 0%, 54%, 0.32);
+			}
+			&:hover,
+			&:hover::after,
+			&:active,
+			&:active::after {
+				background-color: rgb(0 102 255 / 45%);
+				transition: background-color 1s;
+			}
+		}
+
+		/* 수평 패널(가로 선)용 실린더: 위/아래로 튀어나오게 */
+		&.top-cylinder,
+		&.top-cylinder-reverse,
+		&.bottom-cylinder,
+		&.bottom-cylinder-reverse {
+			&::after {
+				height: var(--cyl-size);
+				width: var(--cyl-span);
+
+				/* transform 없이 가운데 정렬: left 20% + width 60% */
+				left: 20%;
+			}
+		}
+
+		/* 위로 튀어나오는(top) */
+		&.top-cylinder,
+		&.top-cylinder-reverse {
+			&::after {
+				bottom: 100%;
+			}
+		}
+		/* 아래로 튀어나오는(bottom) */
+		&.bottom-cylinder,
+		&.bottom-cylinder-reverse {
+			&::after {
+				top: 100%;
+			}
+		}
+
+		/* 라운딩(기본/리버스) */
+		&.top-cylinder::after {
+			border-top-left-radius: 15px;
+			border-top-right-radius: 15px;
+		}
+		&.top-cylinder-reverse::after {
+			border-bottom-left-radius: 15px;
+			border-bottom-right-radius: 15px;
+		}
+
+		&.bottom-cylinder::after {
+			border-bottom-left-radius: 15px;
+			border-bottom-right-radius: 15px;
+		}
+		&.bottom-cylinder-reverse::after {
+			border-top-left-radius: 15px;
+			border-top-right-radius: 15px;
+		}
+
+		/* 수직 패널(세로 선)용 실린더: 좌/우로 튀어나오게 */
+		&.left-cylinder,
+		&.left-cylinder-reverse,
+		&.right-cylinder,
+		&.right-cylinder-reverse {
+			&::after {
+				width: var(--cyl-size);
+				height: var(--cyl-span);
+
+				/* transform 없이 가운데 정렬: top 20% + height 60% */
+				top: 20%;
+			}
+		}
+
+		/* 오른쪽으로 튀어나오는(right) */
+		&.right-cylinder,
+		&.right-cylinder-reverse {
+			&::after {
+				left: 100%;
+			}
+		}
+		/* 왼쪽으로 튀어나오는(left) */
+		&.left-cylinder,
+		&.left-cylinder-reverse {
+			&::after {
+				right: 100%;
+			}
+		}
+
+		/* 라운딩(기본/리버스) */
+		&.right-cylinder::after {
+			border-top-right-radius: 15px;
+			border-bottom-right-radius: 15px;
+		}
+		&.right-cylinder-reverse::after {
+			border-top-left-radius: 15px;
+			border-bottom-left-radius: 15px;
+		}
+
+		&.left-cylinder::after {
+			border-top-left-radius: 15px;
+			border-bottom-left-radius: 15px;
+		}
+		&.left-cylinder-reverse::after {
+			border-top-right-radius: 15px;
+			border-bottom-right-radius: 15px;
+		}
+	}
+}
+
+@keyframes drag-panel-hover {
+	0% {
+		background-color: #b1b1b1d6;
+	}
+
+	10% {
+		background-color: #b1b1b1ba;
+	}
+
+	20% {
+		background-color: #b1b1b194;
+	}
+
+	40% {
+		background-color: #b1b1b17d;
+	}
+
+	60% {
+		background-color: #b1b1b152;
+	}
+
+	80% {
+		background-color: #b1b1b130;
+	}
+
+	100% {
+		background-color: #b1b1b100;
+		animation-play-state: paused;
+	}
+}
+
+@keyframes drag-panel-hover-highlight {
+	0% {
+		opacity: 0;
+	}
+
+	10% {
+		opacity: 0.1;
+	}
+
+	20% {
+		opacity: 0.2;
+	}
+
+	40% {
+		opacity: 0.4;
+	}
+
+	60% {
+		opacity: 0.6;
+	}
+
+	80% {
+		opacity: 0.8;
+	}
+
+	100% {
+		opacity: 1;
+		animation-play-state: paused;
+	}
+}
+
+.flex-split-screen {
+	width: 100%;
+	height: 100%;
+	position: relative;
+	& .flex-split-screen-boundary-container {
+		position: absolute;
+		font-family: Arial, sans-serif;
+		transition:
+			background-color 0.3s,
+			border-color 0.3s;
+		color: #00acc1;
+		border: 2px dashed #00acc1;
+		border-radius: 10px;
+		background-color: #0014ff17;
+		font-size: 1.5rem;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-weight: bold;
+		z-index: 9001;
+	}
+	& .flex-split-screen-drag-box-title-wrapper-sticky {
+		position: sticky;
+		top: 0;
+		z-index: 2001;
+		background: #f0f0f0;
+	}
+	& .flex-split-screen-drag-box-title-wrapper {
+		html[data-color-scheme="dark"] & {
+			background: #3c3c3c;
+			box-shadow: 0px 1px 20px 0px #1e1e1e;
+		}
+		html[data-color-scheme="light"] & {
+			background: #edf1f5;
+			box-shadow: 0px 1px 20px 0px #e5e5e5;
+		}
+		scrollbar-width: initial;
+		scrollbar-color: initial;
+		display: flex;
+		justify-content: space-between;
+		transition:
+			background 0.3s,
+			color 0.3s,
+			box-shadow 0.3s;
+		position: relative;
+		border-bottom: 1px solid #e5e5e5;
+		& .flex-split-screen-drag-box-title-container {
+			display: flex;
+			width: 100%;
+			background: inherit;
+		}
+	}
+}
+.flex-split-screen-drag-box-title-item {
+	display: flex;
+	align-items: baseline;
+	padding-right: 0.5rem;
+	padding-left: 0.1rem;
+	&:last-child:not(:first-child) {
+		border-right: 2px solid #00000012;
+	}
+	&:not(.active) {
+		box-shadow: inset 0 0 20px 20px #00000000;
+		border-bottom: 1px solid #007fff40;
+	}
+	&:hover {
+		html[data-color-scheme="dark"] & {
+			background: #494949;
+		}
+		html[data-color-scheme="light"] & {
+			background: #e0e0e0;
+		}
+		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+	}
+	&:active {
+		box-shadow: inset 0px 0px 17px 0px #00000029;
+		transform: scale(0.97);
+	}
+	& button {
+		background: none;
+		border: none;
+		color: #bbbbbb;
+		font-weight: bold;
+		font-family: none;
+		font-size: 0.9rem;
+		cursor: pointer;
+		padding: 0 0.25rem;
+	}
+	&.active {
+		html[data-color-scheme="dark"] & {
+			color: #b9af3a;
+		}
+		html[data-color-scheme="light"] & {
+			color: #494300;
+		}
+		font-weight: bold;
+		box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
+		& button {
+			color: #5f5f5f;
+		}
+	}
+}
+.flex-split-screen-drag-box-title-more {
+	display: flex;
+	flex-direction: column;
+	line-height: 0.3;
+	padding: 0rem 0.65rem 0.5rem;
+	font-size: 1.2rem;
+	font-weight: bold;
+	border: none;
+	background: none;
+	color: black;
+	justify-content: space-evenly;
+	cursor: pointer;
+	background: inherit;
+	&:hover {
+		background: #797979;
+		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+	}
+	&:active {
+		box-shadow: inset 0px 0px 17px 0px #00000029;
+		transform: scale(0.97);
+	}
+}
+.flex-split-screen-drag-box {
+	align-self: center;
+	-webkit-touch-callout: none; /* iOS */
+	-webkit-user-select: none; /* Safari */
+	-khtml-user-select: none; /* Konqueror */
+	-moz-user-select: none; /* Firefox */
+	-ms-user-select: none; /* IE 10+ */
+	user-select: none; /* Standard syntax */
+	/* pointer-events: none; */
+	-webkit-tap-highlight-color: transparent;
+	/* touch-action: none; */
+	-webkit-touch-callout: none;
+}
+.flex-split-screen-drag-box-clone {
+	-webkit-touch-callout: none; /* iOS */
+	-webkit-user-select: none; /* Safari */
+	-khtml-user-select: none; /* Konqueror */
+	-moz-user-select: none; /* Firefox */
+	-ms-user-select: none; /* IE 10+ */
+	user-select: none; /* Standard syntax */
+	/* pointer-events: none; */
+	-webkit-tap-highlight-color: transparent;
+	/* touch-action: none; */
+	-webkit-touch-callout: none;
+
+	display: flex;
+	background-color: #adadad;
+	flex-direction: column;
+	padding: 0.2rem 0.4rem;
+	border-radius: 7px;
+	line-height: 99%;
+	z-index: 9001;
+	& span:first-child {
+		font-weight: bold;
+		font-size: 0.85rem;
+	}
+	& span:last-child {
+		font-size: 0.75rem;
+	}
+}