diff --git a/src/styles/base/_check-radio.scss b/src/styles/base/_check-radio.scss index 3df63fa..d4d2904 100644 --- a/src/styles/base/_check-radio.scss +++ b/src/styles/base/_check-radio.scss @@ -3,7 +3,9 @@ // check radio 공통 .check-form-box input[type="checkbox"], .radio-form-box input[type="radio"]{ - position: static; + position: absolute; + top: 0; + left: 0; margin-left:0; opacity: 0; z-index: 1; @@ -44,20 +46,24 @@ border: 1px solid #A8B6C7; border-radius: 4px; background-color: #fff; - transition: border 0.15s ease-in-out, color 0.15s ease-in-out; + transition: border 0.15s ease-in-out, color 0.15s ease-in-out, background-color 0.15s ease-in-out; cursor: pointer; } &::after{ content: ""; display: inline-block; position: absolute; - width: 20px; - height: 20px; - top: 0px; - left: 0; - margin-left: 0; - border-color: #fff; + top: -1px; + left: -1px; + width: 7px; + height: 9px; + border: 2px solid transparent; + border-left: none; + border-top: none; + transform: translate(7.75px,4.5px) rotate(45deg); + -ms-transform: translate(7.75px,4.5px) rotate(45deg); cursor: pointer; + transition: border 0.15s ease-in-out, color 0.15s ease-in-out; } } input[type="checkbox"]:checked + label::before{ @@ -66,17 +72,7 @@ } input[type="checkbox"]:checked + label::after{ content: ""; - display: inline-block; - position: absolute; - top: -1px; - left: -1px; - width: 7px; - height: 9px; - border: 2px solid #fff; - border-left: none; - border-top: none; - transform: translate(7.75px,4.5px) rotate(45deg); - -ms-transform: translate(7.75px,4.5px) rotate(45deg); + border-color: #fff; } input[type="checkbox"]:disabled + label{ opacity: 0.7; diff --git a/src/styles/components/_sub.scss b/src/styles/components/_sub.scss index 6e6a5fb..5739fbe 100644 --- a/src/styles/components/_sub.scss +++ b/src/styles/components/_sub.scss @@ -576,6 +576,7 @@ @include defaultFont($font-s-13, $font-w-500, $font-c); } .check-name-btn{ + padding-left: 5px; margin-left: auto; .bx-btn{ display: block; @@ -621,13 +622,13 @@ } .check-item-wrap{ - display: flex; + @include flex(0px); align-items: center; } .compliance-icon-wrap{ margin-left: auto; min-width: 44px; - display: flex; + @include flex(0px); align-items: center; }