File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
.tk-tooltip-wrap {
display: inline-flex;
position: relative;
.tool-txt {
@include flex-layout($ai:center);
gap: var(--krds-spacer-1);
font-size: var(--krds-fz-body-sm);
}
.tool-btn {
@include flex-layout($ai:center);
gap: var(--krds-spacer-1);
&::after {
display: inline-flex;
content:'';
width: 2rem;
height: 2rem;
background: url(#{$url}/component/common/ico_tooltip_20.svg) no-repeat center;
background-size: contain;
}
}
.tool-in {
display: none;
position: absolute;
z-index: 3;
font-size: var(--krds-fz-body-sm);
width: 56rem;
padding: var(--krds-spacer-6);
border-radius: var(--krds-rd-6);
border: .1rem solid var(--krds-gray-40);
background-color: var(--krds-white);
&::before {
display: inline-flex;
content:'';
position: absolute;
z-index: 4;
width: 2.2rem;
height: 1.2rem;
background: url(#{$url}/component/common/ico_tool_arr.svg) no-repeat center;
background-size: contain;
}
.tool-hd {
@include flex-layout($jc: space-between, $ai: center);
gap: var(--krds-spacer-4);
}
.tool-tit {
flex: 1;
@include ellipsis(1);
padding-right: var(--krds-spacer-10);
}
.tool-close {
display: inline-flex;
position: absolute;
top: var(--krds-spacer-3);
right: var(--krds-spacer-3);
width: 4rem;
height: 4rem;
background: url(#{$url}/component/common/ico_del_20.svg) no-repeat center;
}
.tool-cnt {
@include flex-layout($fd:column, $ai: normal);
gap: var(--krds-spacer-6);
margin-top: var(--krds-spacer-4);
}
}
&.left {
.tool-in {
left: 0;
&::before {
left: var(--krds-spacer-6);
}
}
}
&.center {
.tool-in {
left:50%;
transform: translateX(-50%);
&::before {
left: 50%;
margin-left: -1.1rem;
}
}
}
&.right {
.tool-in {
right: 0;
&::before {
right: var(--krds-spacer-6);
}
}
}
&.top {
.tool-in {
bottom: 100%;
margin-bottom: var(--krds-spacer-3);
&::before {
top: 100%;
}
}
}
&.bottom {
.tool-in {
top: 100%;
margin-top: var(--krds-spacer-3);
&::before {
bottom: 100%;
transform: rotate(-180deg);
}
}
}
}
@include mobile {
.tk-tooltip-wrap {
.tool-in {
width: auto !important;
// margin: 0 1.6rem;
transform: none !important;
&::before {
display: none;
}
}
}
}