Commit @add6a159c2010c8165670c1533d0256bcfe995c4

yanghyo 10-24

말줄임 수정

@add6a159c2010c8165670c1533d0256bcfe995c4

7e2f4bd

add6a15

resources/front/site/SITE_00000/css/common/component/_component.scss

--- resources/front/site/SITE_00000/css/common/component/_component.scss

+++ resources/front/site/SITE_00000/css/common/component/_component.scss


     z-index: 3;
 }
 .ellipsis {
-	@include ellipsis(2);
+	@include ellipsis(1);
 }
 .txt-hide {
 	@include hideElement();

 				flex: none;
 			}
 			.txt {
-				width: auto;
+				width: auto; 
 				word-break: break-all;
 				max-width: 100%;
 				@include ellipsis(1);

7e2f4bd

add6a15

resources/front/site/SITE_00000/css/common/component/_popup.scss

--- resources/front/site/SITE_00000/css/common/component/_popup.scss

+++ resources/front/site/SITE_00000/css/common/component/_popup.scss


 		right:$pop-gap;
 	}
 }
-.popup {
-	
-}
 .pop-close {
 	position: absolute;
 	top:0;

 		}
 	}
 }
+.mn-popup-area{
+    position: fixed;
+    top:0;
+    left:0;
+    height: 100%;
+    width: 100%;
+    background-color: $color-black-alpha50;
+    display: none;
+    grid-template-rows: 1fr auto;
+    padding:$spacing-md 0;
+    gap:$spacing-md;
+    z-index: 99;
+    &.is-active {
+        display: grid;
+    }
+    .popup {
+        max-width: initial;
+    }
+    .pop-header {
+        padding-right: 0;
+    }
+    .mn-pop-body {
+        display:flex;
+        align-items: center;
+        justify-content: center;
+        min-width: 0;
+        overflow: hidden;
+        .cont {
+            position: relative;
+            height: 100%;
+            min-width: 0;
+            display:flex;
+            flex-direction:column;
+            gap:$spacing-md;
+            justify-content: center;
+        }
+    }
+    .is-inactive {
+        .swiper-wrapper {
+            justify-content: center;
+        }
+    }
+    
+    .swiper-fnc-static {
+        justify-content: flex-end;
+        width:100%;
+        button {
+            background-color: $color-white-alpha90;
+        }
+        .swiper-button-prev.swiper-button-disabled  ~
+        .swiper-button-next.swiper-button-disabled ~ .swiper-btn-playstop-toggle {
+            opacity: .4;
+        }
+        // &:has(.swiper-button-disabled) {
+        //     display: none;
+        // }
+    }
+    .swiper {
+        width: 100%;
+        height: 100%;
+        max-height: 80rem;
+    }
+    // .swiper {
+    //     position: static;
+    //     width: 100%;
+    //     display: grid;
+    //     grid-template-rows: 1fr auto;
+    //     gap:$spacing-md;
+    // }
+    .swiper-slide  {
+        display: flex;
+        justify-content: center;
+        // width: 100% !important;
+    }
+    .pop-editor-cont {
+        img {
+            max-width: 100%;
+        }
+    }
+    .popup {
+        display: flex;
+        position: relative;
+        top:initial;
+        left:initial;
+        transform: initial;
+        max-height: 100%;
+        height: max-content;
+    }
+    .mn-pop-footer {
+        .fnc {
+            background-color: $color-white-alpha80;
+            padding:$spacing-md $spacing-lg;
+            border-radius: $radius-md;       
+        }
+    }
+}
 @include responsive(mobile) {
 	.popup,
 	.popup-modal {

7e2f4bd

add6a15

resources/front/site/SITE_00000/css/style.css

--- resources/front/site/SITE_00000/css/style.css

+++ resources/front/site/SITE_00000/css/style.css

...	...	@@ -8668,6 +8668,110 @@
8668	8668	color: var(--color-font-default-tertiary);
8669	8669	}
8670	8670
	8671	+.mn-popup-area {
	8672	+ position: fixed;
	8673	+ top: 0;
	8674	+ left: 0;
	8675	+ height: 100%;
	8676	+ width: 100%;
	8677	+ background-color: rgba(17, 17, 17, 0.5);
	8678	+ display: none;
	8679	+ grid-template-rows: 1fr auto;
	8680	+ padding: 1.6rem 0;
	8681	+ gap: 1.6rem;
	8682	+ z-index: 99;
	8683	+}
	8684	+.mn-popup-area.is-active {
	8685	+ display: grid;
	8686	+}
	8687	+.mn-popup-area .popup {
	8688	+ max-width: initial;
	8689	+}
	8690	+.mn-popup-area .pop-header {
	8691	+ padding-right: 0;
	8692	+}
	8693	+.mn-popup-area .mn-pop-body {
	8694	+ display: -webkit-box;
	8695	+ display: -ms-flexbox;
	8696	+ display: flex;
	8697	+ -webkit-box-align: center;
	8698	+ -ms-flex-align: center;
	8699	+ align-items: center;
	8700	+ -webkit-box-pack: center;
	8701	+ -ms-flex-pack: center;
	8702	+ justify-content: center;
	8703	+ min-width: 0;
	8704	+ overflow: hidden;
	8705	+}
	8706	+.mn-popup-area .mn-pop-body .cont {
	8707	+ position: relative;
	8708	+ height: 100%;
	8709	+ min-width: 0;
	8710	+ display: -webkit-box;
	8711	+ display: -ms-flexbox;
	8712	+ display: flex;
	8713	+ -webkit-box-orient: vertical;
	8714	+ -webkit-box-direction: normal;
	8715	+ -ms-flex-direction: column;
	8716	+ flex-direction: column;
	8717	+ gap: 1.6rem;
	8718	+ -webkit-box-pack: center;
	8719	+ -ms-flex-pack: center;
	8720	+ justify-content: center;
	8721	+}
	8722	+.mn-popup-area .is-inactive .swiper-wrapper {
	8723	+ -webkit-box-pack: center;
	8724	+ -ms-flex-pack: center;
	8725	+ justify-content: center;
	8726	+}
	8727	+.mn-popup-area .swiper-fnc-static {
	8728	+ -webkit-box-pack: end;
	8729	+ -ms-flex-pack: end;
	8730	+ justify-content: flex-end;
	8731	+ width: 100%;
	8732	+}
	8733	+.mn-popup-area .swiper-fnc-static button {
	8734	+ background-color: rgba(255, 255, 255, 0.95);
	8735	+}
	8736	+.mn-popup-area .swiper-fnc-static .swiper-button-prev.swiper-button-disabled ~ .swiper-button-next.swiper-button-disabled ~ .swiper-btn-playstop-toggle {
	8737	+ opacity: 0.4;
	8738	+}
	8739	+.mn-popup-area .swiper {
	8740	+ width: 100%;
	8741	+ height: 100%;
	8742	+ max-height: 80rem;
	8743	+}
	8744	+.mn-popup-area .swiper-slide {
	8745	+ display: -webkit-box;
	8746	+ display: -ms-flexbox;
	8747	+ display: flex;
	8748	+ -webkit-box-pack: center;
	8749	+ -ms-flex-pack: center;
	8750	+ justify-content: center;
	8751	+}
	8752	+.mn-popup-area .pop-editor-cont img {
	8753	+ max-width: 100%;
	8754	+}
	8755	+.mn-popup-area .popup {
	8756	+ display: -webkit-box;
	8757	+ display: -ms-flexbox;
	8758	+ display: flex;
	8759	+ position: relative;
	8760	+ top: initial;
	8761	+ left: initial;
	8762	+ -webkit-transform: initial;
	8763	+ transform: initial;
	8764	+ max-height: 100%;
	8765	+ height: -webkit-max-content;
	8766	+ height: -moz-max-content;
	8767	+ height: max-content;
	8768	+}
	8769	+.mn-popup-area .mn-pop-footer .fnc {
	8770	+ background-color: rgba(255, 255, 255, 0.9);
	8771	+ padding: 1.6rem 2.4rem;
	8772	+ border-radius: 2.4rem;
	8773	+}
	8774	+
8671	8775	@media (max-width: 767px) {
8672	8776	.popup,
8673	8777	.popup-modal {
...	...	@@ -13349,13 +13453,11 @@
13349	13453	}
13350	13454
13351	13455	.ellipsis {
13352		- display: -webkit-box;
13353		- overflow: hidden;
13354		- line-height: 1.4;
13355		- width: 100%;
13356	13456	text-overflow: ellipsis;
13357		- -webkit-box-orient: vertical;
13358		- -webkit-line-clamp: 2;
	13457	+ white-space: nowrap;
	13458	+ word-wrap: normal;
	13459	+ width: 100%;
	13460	+ overflow: hidden;
13359	13461	}
13360	13462
13361	13463	.txt-hide {
...	...	@@ -32536,4 +32638,126 @@
32536	32638	.accordion-item .accordion-comment-area .btn-flex-cont {
32537	32639	margin-top: 1.2rem;
32538	32640	margin-bottom: 0;
	32641	+}
	32642	+
	32643	+.summary-grid {
	32644	+ display: -webkit-box;
	32645	+ display: -ms-flexbox;
	32646	+ display: flex;
	32647	+ gap: 2.4rem;
	32648	+}
	32649	+.summary-grid .profile-card {
	32650	+ display: -webkit-box;
	32651	+ display: -ms-flexbox;
	32652	+ display: flex;
	32653	+ padding: 3.2rem 4rem;
	32654	+ -webkit-box-align: center;
	32655	+ -ms-flex-align: center;
	32656	+ align-items: center;
	32657	+ gap: 24px;
	32658	+ border-radius: 2.4rem;
	32659	+ background: var(--color-background-default-secondary);
	32660	+}
	32661	+.summary-grid .profile-card img {
	32662	+ width: 12rem;
	32663	+ height: 12rem;
	32664	+ aspect-ratio: 1/1;
	32665	+ border-radius: 100%;
	32666	+ border: 0.1rem solid var(--color-stroke-default-secondary);
	32667	+ background: url(<path-to-image>) lightgray -128.286px -25.307px/318% 212% no-repeat;
	32668	+}
	32669	+.summary-grid .profile-card .profile-info {
	32670	+ display: -webkit-box;
	32671	+ display: -ms-flexbox;
	32672	+ display: flex;
	32673	+ width: 219px;
	32674	+ -webkit-box-orient: vertical;
	32675	+ -webkit-box-direction: normal;
	32676	+ -ms-flex-direction: column;
	32677	+ flex-direction: column;
	32678	+ -webkit-box-align: start;
	32679	+ -ms-flex-align: start;
	32680	+ align-items: flex-start;
	32681	+ gap: 2.4rem;
	32682	+}
	32683	+.summary-grid .profile-card .profile-info .profile-name {
	32684	+ font-size: var(--size-font-xlg);
	32685	+}
	32686	+.summary-grid .point-card {
	32687	+ display: -webkit-box;
	32688	+ display: -ms-flexbox;
	32689	+ display: flex;
	32690	+ padding: 3.2rem 4rem;
	32691	+ -webkit-box-align: center;
	32692	+ -ms-flex-align: center;
	32693	+ align-items: center;
	32694	+ -webkit-box-flex: 1;
	32695	+ -ms-flex: 1 0 0px;
	32696	+ flex: 1 0 0;
	32697	+ -ms-flex-item-align: stretch;
	32698	+ align-self: stretch;
	32699	+ border-radius: 3.2rem;
	32700	+ border: 0.1rem solid var(--color-stroke-default-tertiary);
	32701	+ background: var(--color-background-default-primary);
	32702	+ position: relative;
	32703	+}
	32704	+.summary-grid .point-card::after {
	32705	+ content: "";
	32706	+ position: absolute;
	32707	+ right: 4rem;
	32708	+ bottom: 0;
	32709	+ width: 18.7rem;
	32710	+ height: 8rem;
	32711	+ aspect-ratio: 187/80;
	32712	+ background: url("/resources/front/site/SITE_00000/images/custom/common/img-obj.svg") no-repeat right bottom/contain;
	32713	+}
	32714	+.summary-grid .point-card .point-list {
	32715	+ display: -webkit-box;
	32716	+ display: -ms-flexbox;
	32717	+ display: flex;
	32718	+ gap: 2.4rem;
	32719	+ -webkit-box-align: center;
	32720	+ -ms-flex-align: center;
	32721	+ align-items: center;
	32722	+}
	32723	+.summary-grid .point-card .point-avail {
	32724	+ display: -webkit-box;
	32725	+ display: -ms-flexbox;
	32726	+ display: flex;
	32727	+ -webkit-box-align: center;
	32728	+ -ms-flex-align: center;
	32729	+ align-items: center;
	32730	+ gap: 0.8rem;
	32731	+}
	32732	+.summary-grid .point-card .point-avail dd {
	32733	+ min-width: var(--form-width-sm);
	32734	+ font-size: var(--size-font-3xlg);
	32735	+ text-align: right;
	32736	+ font-weight: bold;
	32737	+}
	32738	+.summary-grid .point-card .point-avail::after {
	32739	+ content: "";
	32740	+ display: inline-block;
	32741	+ width: 40px;
	32742	+ height: 40px;
	32743	+ -ms-flex-negative: 0;
	32744	+ flex-shrink: 0;
	32745	+ background: url("/resources/front/site/SITE_00000/images/custom/common/ico-img-point.svg") no-repeat center/contain;
	32746	+ vertical-align: middle;
	32747	+}
	32748	+.summary-grid .point-card .point-total {
	32749	+ display: -webkit-box;
	32750	+ display: -ms-flexbox;
	32751	+ display: flex;
	32752	+ height: 40px;
	32753	+ padding: 0 1.6rem;
	32754	+ -webkit-box-align: center;
	32755	+ -ms-flex-align: center;
	32756	+ align-items: center;
	32757	+ gap: 0.4rem;
	32758	+ border-radius: 2.4rem;
	32759	+ background: var(--color-background-default-tertiary);
	32760	+}
	32761	+.summary-grid .point-card .point-total dd {
	32762	+ font-weight: bold;
32539	32763	}/# sourceMappingURL=style.css.map / (파일 끝에 줄바꿈 문자 없음)

7e2f4bd

add6a15

resources/front/site/SITE_00000/css/style.css.map

--- resources/front/site/SITE_00000/css/style.css.map

+++ resources/front/site/SITE_00000/css/style.css.map

This diff is too big to display.

7e2f4bd

add6a15

resources/front/site/SITE_00000/css/style.min.css

--- resources/front/site/SITE_00000/css/style.min.css

+++ resources/front/site/SITE_00000/css/style.min.css

This diff is too big to display.

7e2f4bd

add6a15

resources/front/site/SITE_00000/css/style.min.css.map

--- resources/front/site/SITE_00000/css/style.min.css.map

+++ resources/front/site/SITE_00000/css/style.min.css.map

This diff is too big to display.

Add a comment

Open 0
Closed 0

List

...	...	@@ -1556,7 +1556,7 @@
1556	1556	z-index: 3;
1557	1557	}
1558	1558	.ellipsis {
1559		- @include ellipsis(2);
	1559	+ @include ellipsis(1);
1560	1560	}
1561	1561	.txt-hide {
1562	1562	@include hideElement();
...	...	@@ -3089,7 +3089,7 @@
3089	3089	flex: none;
3090	3090	}
3091	3091	.txt {
3092		- width: auto;
	3092	+ width: auto;
3093	3093	word-break: break-all;
3094	3094	max-width: 100%;
3095	3095	@include ellipsis(1);

...	...	@@ -165,9 +165,6 @@
165	165	right:$pop-gap;
166	166	}
167	167	}
168		-.popup {
169		-
170		-}
171	168	.pop-close {
172	169	position: absolute;
173	170	top:0;
...	...	@@ -389,6 +386,102 @@
389	386	}
390	387	}
391	388	}
	389	+.mn-popup-area{
	390	+ position: fixed;
	391	+ top:0;
	392	+ left:0;
	393	+ height: 100%;
	394	+ width: 100%;
	395	+ background-color: $color-black-alpha50;
	396	+ display: none;
	397	+ grid-template-rows: 1fr auto;
	398	+ padding:$spacing-md 0;
	399	+ gap:$spacing-md;
	400	+ z-index: 99;
	401	+ &.is-active {
	402	+ display: grid;
	403	+ }
	404	+ .popup {
	405	+ max-width: initial;
	406	+ }
	407	+ .pop-header {
	408	+ padding-right: 0;
	409	+ }
	410	+ .mn-pop-body {
	411	+ display:flex;
	412	+ align-items: center;
	413	+ justify-content: center;
	414	+ min-width: 0;
	415	+ overflow: hidden;
	416	+ .cont {
	417	+ position: relative;
	418	+ height: 100%;
	419	+ min-width: 0;
	420	+ display:flex;
	421	+ flex-direction:column;
	422	+ gap:$spacing-md;
	423	+ justify-content: center;
	424	+ }
	425	+ }
	426	+ .is-inactive {
	427	+ .swiper-wrapper {
	428	+ justify-content: center;
	429	+ }
	430	+ }
	431	+
	432	+ .swiper-fnc-static {
	433	+ justify-content: flex-end;
	434	+ width:100%;
	435	+ button {
	436	+ background-color: $color-white-alpha90;
	437	+ }
	438	+ .swiper-button-prev.swiper-button-disabled ~
	439	+ .swiper-button-next.swiper-button-disabled ~ .swiper-btn-playstop-toggle {
	440	+ opacity: .4;
	441	+ }
	442	+ // &:has(.swiper-button-disabled) {
	443	+ // display: none;
	444	+ // }
	445	+ }
	446	+ .swiper {
	447	+ width: 100%;
	448	+ height: 100%;
	449	+ max-height: 80rem;
	450	+ }
	451	+ // .swiper {
	452	+ // position: static;
	453	+ // width: 100%;
	454	+ // display: grid;
	455	+ // grid-template-rows: 1fr auto;
	456	+ // gap:$spacing-md;
	457	+ // }
	458	+ .swiper-slide {
	459	+ display: flex;
	460	+ justify-content: center;
	461	+ // width: 100% !important;
	462	+ }
	463	+ .pop-editor-cont {
	464	+ img {
	465	+ max-width: 100%;
	466	+ }
	467	+ }
	468	+ .popup {
	469	+ display: flex;
	470	+ position: relative;
	471	+ top:initial;
	472	+ left:initial;
	473	+ transform: initial;
	474	+ max-height: 100%;
	475	+ height: max-content;
	476	+ }
	477	+ .mn-pop-footer {
	478	+ .fnc {
	479	+ background-color: $color-white-alpha80;
	480	+ padding:$spacing-md $spacing-lg;
	481	+ border-radius: $radius-md;
	482	+ }
	483	+ }
	484	+}
392	485	@include responsive(mobile) {
393	486	.popup,
394	487	.popup-modal {

Delete comment