diff --git a/com.twin.app.shoptime/src/components/TCheckBox/TCheckBoxSquare.module.less b/com.twin.app.shoptime/src/components/TCheckBox/TCheckBoxSquare.module.less index 48e4b5c3..dce57809 100644 --- a/com.twin.app.shoptime/src/components/TCheckBox/TCheckBoxSquare.module.less +++ b/com.twin.app.shoptime/src/components/TCheckBox/TCheckBoxSquare.module.less @@ -1,11 +1,9 @@ // src/components/TCheckBox/TCheckBoxSquare.module.less -@SQUARE_BORDER_DEFAULT: #CCCCCC; -@SQUARE_BORDER_ACTIVE: #C70850; -@SQUARE_BG_SELECTED: #7A808D; +@SQUARE_BORDER_DEFAULT: #cccccc; +@SQUARE_BORDER_ACTIVE: #c70850; +@SQUARE_BG_SELECTED: #7a808d; // @SQUARE_BG_SELECTED: #C70850; -; - .tCheckBoxSquare { min-width: 45px !important; min-height: 45px !important; @@ -17,17 +15,19 @@ position: relative; box-sizing: border-box; cursor: pointer; - transition: background 0.15s, border 0.15s !important; + transition: + background 0.15s, + border 0.15s !important; &:hover, &:focus, &.focus { border-color: @SQUARE_BORDER_ACTIVE !important; - border-width: 4px !important; // ๐Ÿ”ฅ ํฌ์ปค์Šค ์‹œ ๊ตต์€ ํ…Œ๋‘๋ฆฌ + border-width: 4px !important; // ๐Ÿ”ฅ ํฌ์ปค์Šค ์‹œ ๊ตต์€ ํ…Œ๋‘๋ฆฌ } &::before { - content: ''; + content: ""; position: absolute; top: 50%; left: 50%; @@ -53,7 +53,6 @@ border-color: @SQUARE_BORDER_ACTIVE !important; border-width: 4px !important; background-color: @SQUARE_BG_SELECTED !important; - box-shadow: 0 0 0 4px fade(@SQUARE_BORDER_ACTIVE, 20%) !important; &::before { transform: translate(-50%, -70%) rotate(-45deg) scale(1); } diff --git a/com.twin.app.shoptime/src/components/TPopUp/TNewPopUp.module.less b/com.twin.app.shoptime/src/components/TPopUp/TNewPopUp.module.less index b8b20206..4134cbfb 100644 --- a/com.twin.app.shoptime/src/components/TPopUp/TNewPopUp.module.less +++ b/com.twin.app.shoptime/src/components/TPopUp/TNewPopUp.module.less @@ -11,18 +11,18 @@ // bottom: unset !important; // transform: none !important; // overflow: unset; - + // > div { // overflow: unset; // } // } - + // // ๋‹ค๋ฅธ ํŒ์—…๋“ค์€ ๊ธฐ์กด TPopUp ๋ฐฉ์‹ ์œ ์ง€ // &:not(:has(.src_components_TPopUp_TNewPopUp_optionalConfirm)) { // bottom: 50%; // transform: translateY(50%); // overflow: unset; - + // > div { // overflow: unset; // } @@ -184,7 +184,7 @@ &.optionPopup { .default-style(); - + .optionInfo { width: 820px; background-color: @BG_COLOR_01; @@ -225,7 +225,7 @@ background: @PRIMARY_COLOR_RED; color: @COLOR_WHITE; } - + .optionImg { width: 60px; height: 60px; @@ -248,7 +248,7 @@ &.optionScroll { overflow-y: auto; } - + .selectedOption { box-sizing: border-box; background: @COLOR_WHITE; @@ -256,7 +256,7 @@ border: 4px solid @PRIMARY_COLOR_RED; } } - + .optionButtonContainer { margin: 30px 0 30px 0; display: flex; @@ -266,7 +266,7 @@ &.eventBannerPopup { .default-style(); - + .eventBannerInfo { width: 600px; height: 510px; @@ -277,7 +277,7 @@ font-weight: normal; box-sizing: border-box; border-radius: 4px; - + > p > img { width: 600px; height: 510px; @@ -291,7 +291,7 @@ left: 0; right: 0; bottom: 50px; - + > div { margin: 0 6px; min-width: 240px; @@ -302,7 +302,7 @@ &.supportPopup { .default-style(); - + .supportInfo { width: 960px; height: 640px; @@ -313,7 +313,7 @@ font-weight: normal; box-sizing: border-box; border-radius: 4px; - + .supportButtonContainer { position: absolute; right: 0; @@ -332,7 +332,7 @@ &.couponPopup { .default-style(); - + .couponInfo { width: 960px; height: 640px; @@ -343,7 +343,7 @@ font-weight: normal; box-sizing: border-box; border-radius: 4px; - + .couponButtonContainer { position: absolute; right: 0; @@ -362,7 +362,7 @@ &.mobileSendPopup { .default-style(); - + .mobileSendInfo { width: 960px; height: 640px; @@ -373,7 +373,7 @@ font-weight: normal; box-sizing: border-box; border-radius: 4px; - + .mobileSendButtonContainer { position: absolute; right: 0; @@ -392,7 +392,7 @@ &.qrPopup { .default-style(); - + .qrInfo { width: 960px; height: 640px; @@ -404,7 +404,7 @@ box-sizing: border-box; border-radius: 4px; } - + .qrButtonContainer { display: flex; justify-content: center; @@ -458,7 +458,7 @@ } } } - + .checkoutTermsButtonContainer { display: flex; justify-content: center; @@ -481,7 +481,7 @@ &.scrollPopup { .default-style(); - + .scrollInfo { width: 900px; background-color: @BG_COLOR_01; @@ -492,7 +492,7 @@ box-sizing: border-box; border-radius: 4px; } - + .scrollButtonContainer { display: flex; justify-content: center; @@ -517,7 +517,7 @@ position: absolute; right: 42px; bottom: -330px; - + .watchInfo { width: 1038px; height: 168px; @@ -567,7 +567,7 @@ .elip(@clamp:1); } } - + .watchButtonContainer { display: flex; flex-wrap: wrap; @@ -613,7 +613,7 @@ text-align: center; .flex(); } - + .setPinCodeButtonContainer { margin: 0 0 30px 0; display: flex; @@ -902,22 +902,22 @@ .default-style(); bottom: unset !important; - transform: none !important; + transform: none !important; top: 20% !important; - + // ๊ธฐ์กด ์œ„์น˜ ์Šคํƒ€์ผ๋“ค... - + .optionalConfirmInfo { width: 100vw; height: 198px; - background-color: #E6EBF0; + background-color: #e6ebf0; border-radius: 4px; - box-shadow: 0px 20px 12px rgba(0, 0, 0, 0.30); + box-shadow: 0px 20px 12px rgba(0, 0, 0, 0.3); display: flex; flex-direction: column; box-sizing: border-box; // gap: 15px; - + .optionalConfirmContentContainer { width: 100%; height: 100%; @@ -927,7 +927,7 @@ box-sizing: border-box; justify-content: center; // gap: 20px; - + .optionalConfirmTextSection { // flex: 1; // ๋‚˜๋จธ์ง€ ๋†’์ด๋ฅผ ๋ชจ๋‘ ์ฐจ์ง€ height: 30px; @@ -937,7 +937,7 @@ // border : 1px solid red; margin-bottom: 20px; } - + .optionalConfirmButtonSection { height: 60px; // margin-top: 15px; // gap ๋Œ€์‹  margin์œผ๋กœ ๊ฐ„๊ฒฉ ์ฒ˜๋ฆฌ @@ -951,10 +951,10 @@ width: 320px; height: 60px; // ๋ถ€๋ชจ ๋†’์ด(60px) ๋ชจ๋‘ ์‚ฌ์šฉ display: flex; - align-items: center; // ์ˆ˜์ง ์ค‘์•™ ์ •๋ ฌ + align-items: center; // ์ˆ˜์ง ์ค‘์•™ ์ •๋ ฌ display: flex; justify-content: space-between; - + .optionalTermsButton { width: 100% !important; height: 100% !important; @@ -963,25 +963,25 @@ padding: 0 20px !important; margin: 0 !important; background: white !important; - border: 1px solid #CFCFCF !important; + border: 1px solid #cfcfcf !important; border-radius: 4px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; // ๐Ÿ‘ˆ flex-start โ†’ space-between ๋ณ€๊ฒฝ flex-shrink: 0; box-sizing: border-box !important; - + // ํฌ์ปค์Šค ์Šคํƒ€์ผ &:focus { - outline: 2px solid #C70850 !important; - outline-offset: 1px !important; + outline: 2px solid #c70850; + outline-offset: -1px; } - + .optionalTermsTitle { - height: 100%; - color: #1A1A1A; + height: 100%; + color: #1a1a1a; font-size: 22px; - font-family: 'LG Smart UI'; + font-family: "LG Smart UI"; font-weight: 600; line-height: 22px; white-space: nowrap; @@ -989,35 +989,35 @@ text-overflow: ellipsis; flex: 1; } - + // ๐Ÿ‘ˆ '>' ์•„์ด์ฝ˜ ์Šคํƒ€์ผ ์ถ”๊ฐ€ .optionalTermsIcon { width: 24px; height: 24px; border-radius: 50%; - border: 2px solid #1A1A1A; + border: 2px solid #1a1a1a; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-left: 8px; - + &::after { - content: '>'; + content: ">"; font-size: 14px; font-weight: bold; - color: #1A1A1A; + color: #1a1a1a; } } } } - + .optionalConfirmRightButtonSection { // width: 332px; height: 100%; // ๋ถ€๋ชจ ๋†’์ด(60px) ๋ชจ๋‘ ์‚ฌ์šฉ display: flex; align-items: center; // ์ˆ˜์ง ์ค‘์•™ ์ •๋ ฌ - justify-content: space-between; + justify-content: space-between; // gap: 12px; .optionalConfirmButton { @@ -1037,37 +1037,37 @@ .figmaTermsInfo { .size(@w: 1064px, @h: 750px); padding: 60px 57px 40px; - background: #E6EBF0; - box-shadow: 0px 20px 12px rgba(0, 0, 0, 0.30); + background: #e6ebf0; + box-shadow: 0px 20px 12px rgba(0, 0, 0, 0.3); border-radius: 4px; } - + .figmaTermsContentContainer { display: flex; flex-direction: column; // gap: 40px; } - + .figmaTermsCard { background: white; border-radius: 4px; - border: 1px solid #CCCCCC; + border: 1px solid #cccccc; overflow: hidden; display: flex; flex-direction: column; } - + .figmaTermsTitleBar { padding: 17px 31px; - border-bottom: 1px solid #CCCCCC; + border-bottom: 1px solid #cccccc; } - + .figmaTermsTitleText { - color: #C70850; + color: #c70850; font-size: 30px; font-weight: 700; } - + .figmaTermsContentBody { flex-grow: 1; display: flex; @@ -1081,7 +1081,7 @@ line-height: 1.5; } } - + .figmaTermsButtonContainer { display: flex; justify-content: center; @@ -1089,13 +1089,13 @@ margin-top: 40px; // gap: 15px; // ๋ฒ„ํŠผ ์‚ฌ์ด ๊ฐ„๊ฒฉ } - + .figmaTermsAgreeButton { // ์ด์ œ TButton์˜ type="popup" ์Šคํƒ€์ผ์„ ์‚ฌ์šฉํ•˜๋ฏ€๋กœ, // ์—ฌ๊ธฐ์„œ๋Š” ์ถ”๊ฐ€์ ์ธ ์Šคํƒ€์ผ์ด ํ•„์š” ์—†์Šต๋‹ˆ๋‹ค. margin-right: 15px; } - + .figmaTermsCloseButton { // TButton์˜ type="popup" ์Šคํƒ€์ผ์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. margin-left: 0px; // lint ์˜ค๋ฅ˜ ๋Œ€๋น„์šฉ์šฉ @@ -1104,7 +1104,7 @@ } // optionalConfirm์ผ ๋•Œ๋งŒ ๊ธฐ์กด ์œ„์น˜ ์Šคํƒ€์ผ ๋ฌด๋ ฅํ™” - + // :global([id="floatLayer"]) :global(> div:not([id])) :global(> div) :global(> div:nth-child(2)) { // .tNewPopUp.optionalConfirm & { // bottom: unset !important; diff --git a/com.twin.app.shoptime/src/views/IntroPanel/IntroPanel.new.module.less b/com.twin.app.shoptime/src/views/IntroPanel/IntroPanel.new.module.less index 9c916376..69c215e6 100644 --- a/com.twin.app.shoptime/src/views/IntroPanel/IntroPanel.new.module.less +++ b/com.twin.app.shoptime/src/views/IntroPanel/IntroPanel.new.module.less @@ -171,16 +171,12 @@ // &:focus-visible, &:hover { outline: 4px #c91d53 solid !important; - outline-offset: 2px !important; transform: translateY(-2px) !important; - box-shadow: 0 4px 12px rgba(201, 29, 83, 0.3) !important; - .termsText { font-weight: bold !important; - } - } + } + } } - } } .termsRightPanel { @@ -317,14 +313,12 @@ &.selected:before { background-color: #c91d53 !important; border: 4px solid #c91d53 !important; // ๊ตต์€ ํ…Œ๋‘๋ฆฌ๋กœ ๋ณ€๊ฒฝ - box-shadow: 0 0 8px rgba(201, 29, 83, 0.3); // ์•ฝ๊ฐ„์˜ ๊ทธ๋ฆผ์ž ํšจ๊ณผ } // ํฌ์ปค์Šค ๋ฐ›์•˜์ง€๋งŒ ์„ ํƒ ์•ˆ๋จ &.focused:not(.selected):before { background-color: rgba(201, 29, 83, 0.1); border: 4px solid #c91d53 !important; - box-shadow: 0 0 10px rgba(199, 8, 80, 0.3) !important; } // ๋น„ํ™œ์„ฑํ™”๋จ @@ -337,7 +331,6 @@ // ํฌ์ปค์Šค ๋ฐ›์Œ (์„ ํƒ๋œ ์ƒํƒœ๊ฐ€ ์•„๋‹Œ ๊ฒฝ์šฐ์—๋งŒ ์ ์šฉ) &.focused:not(.selected):before { border: 4px solid #c91d53 !important; - box-shadow: 0 0 10px rgba(199, 8, 80, 0.3) !important; } // ์ฒดํฌ๋งˆํฌ