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
File name
Commit message
Commit date
/* form area */
.fieldset {
display: flex;
flex-direction: column;
gap: var(--#{$prefix}spacer-6);
}
.form-group {
display: flex;
flex-direction: column;
gap: var(--#{$prefix}spacer-3);
width: 100%;
.form-tit {
width: 100%;
}
.form-conts {
display: flex;
flex-direction: column;
gap:var(--krds-spacer-3);
width: 100%;
&.keyword-sch {
width: 58.8rem;
}
.form-label {
display: flex;
// font-size: 1.5rem;
font-size: var(--#{$prefix}fz-label-sm);
width: 100%;
}
&.btn-ico-wrap { //input안에 button 노출
position: relative;
.form-control {
padding-right: var(--#{$prefix}spacer-14);
}
.btn {
@include position($t:50%, $r:1.6rem);
transform: translateY(-50%);
}
}
&.datepicker-conts {
gap: 0;
}
.form-check {
.form-check-cnt {
margin-top: 1.2rem;
.form-check-p {
color: var(--#{$prefix}gray-70);
}
}
}
}
> p {
width: 100%;
}
[class^=form-hint] {
$value : calc(2rem + var(--#{$prefix}spacer-1));
font-size: var(--#{$prefix}fz-label-sm);
color: var(--#{$prefix}gray-70);
padding-left:$value;
&::before {
display: inline-flex;
@include foursquare(2rem);
@include flex-size(0, 0);
@include pseudo();
margin-left: calc($value * -1);
margin-right: var(--#{$prefix}spacer-1);
vertical-align: top;
background: url(#{$url}/component/common/ico_hint_20.svg) no-repeat center;
background-size: contain;
}
}
.is-error {
~ .form-hint-invalid {
color:var(--#{$prefix}point);
&::before {
background-color: transparent;
background-image: url(#{$url}/component/common/ico_hint_error.svg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
}
}
}
.form-checks-inline {
display: flex;
gap:1.2rem;
}
.input-group {
display: flex;
align-items: center;
gap: 1rem;
width: 100%;
&.range {
align-items: flex-end;
position: relative;
> li {
&:not(.mark) {
//flex: auto;
@include flex-layout($fd: column);
@include equal-width();
gap: 1.2rem;
}
&.mark {
@include flex-layout($ai: center);
flex: none;
height: var(--#{$prefix}input-h-lg);
text-align: center;
&.md {
height: var(--#{$prefix}input-h-md);
}
&.sm {
height: var(--#{$prefix}input-h-sm);
}
}
}
&.set {
background-color: var(--#{$prefix}white);
border: 1px solid var(--#{$prefix}gray-60);
border-radius: var(--#{$prefix}input-rd-lg);
.form-control {
background-color: transparent;
border-color: transparent;
}
&::after {
@include position($t: 50%, $r:1.6rem);
@include pseudo();
width: 2.4rem;
height: 2.4rem;
background: url(#{$url}/component/common/ico_calendar.svg) no-repeat;
background-size: contain;
transform: translateY(-50%);
}
}
}
}
.row {
.input-group {
flex-direction: column;
&.range {
> li {
width: 100%;
}
}
}
}
/* for common */
.radio,
.checkbox {
~ .form-chip-outline {
display: inline-flex;
align-items: center;
border-width: 1px;
border-style: solid;
border-color:var(--#{$prefix}gray-40);
}
&:focus {
~ .form-chip-outline {
border-color: var(--#{$prefix}primary);
// border-width: .2rem;
// outline-offset: -.5rem;
}
}
&:checked {
~ .form-chip-outline {
background-color: var(--#{$prefix}primary-5);
border-color: var(--#{$prefix}information);
color: var(--#{$prefix}primary-60);
}
}
&:disabled {
~ .form-chip-outline {
pointer-events: none;
background-color: var(--#{$prefix}gray-30);
border-color: var(--#{$prefix}gray-40);
color: var(--#{$prefix}gray-60);
}
}
}
/* 검색 폼 */
.sch-form-wrap {
@include flex-layout($ai: center);
gap: var(--krds-spacer-4);
&.vert {
@include flex-layout($fd:column, $ai : flex-start);
.sch-input {
width: 100%;
}
}
.input-group {
.form-select {
width: auto;
}
}
.btn-txt {
&.ico-sch1 {
&::before {
width: 2.4rem;
height: 2.4rem;
}
}
}
}
.sch-input {
display: flex;
position: relative;
.form-control {
padding: 0 var(--krds-spacer-12) 0 var(--krds-spacer-4);
~ .ico-sch {
width: 2.4rem;
height: 2.4rem;
}
&.xlg {
font-weight: map-get($fws, bold);
padding: 0 var(--krds-spacer-18) 0 var(--krds-spacer-6);
~ .ico-sch {
right: var(--krds-spacer-6);
width: 4rem;
height: 4rem;
}
}
}
.ico-sch {
position: absolute;
top: 50%;
right: var(--krds-spacer-4);
transform: translateY(-50%);
}
}
//모바일 전용
@include mobile {
.form-group {
.form-conts {
&.keyword-sch {
width: 100%;
}
}
}
/* 검색 폼 */
.sch-form-wrap {
flex-direction: column;
align-items: flex-start;
}
.sch-input {
.form-control {
&.xlg {
padding: 0 var(--krds-spacer-12) 0 var(--krds-spacer-4);
~ .ico-sch {
right: var(--krds-spacer-4);
width: 2.4rem;
height: 2.4rem;
}
}
}
}
}