Implement share functionality and UI updates: Add share button to various pages, create share popup with URL input, and enhance CSS styles for better layout and responsiveness. Update JavaScript for clipboard functionality and navigator share API support.
This commit is contained in:
@@ -1,4 +1,5 @@
|
||||
@charset "UTF-8";
|
||||
@import "utils.scss";
|
||||
/*변수*/
|
||||
/*반응형 화면 크기*/
|
||||
/*css 디폴트는 모바일이 기준*/
|
||||
@@ -136,7 +137,7 @@
|
||||
.contentsTypeNew.caseAs ul.case01 li {
|
||||
position: relative;
|
||||
padding: 80px 30px 25px;
|
||||
border: 1px solid #DEDEDE;
|
||||
border: 1px solid #dedede;
|
||||
border-radius: 6px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 30px 24px;
|
||||
@@ -210,7 +211,7 @@
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
background-color: #EEEEEE;
|
||||
background-color: #eeeeee;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
@@ -246,7 +247,7 @@
|
||||
background-position: 40px 5px;
|
||||
}
|
||||
.contentsTypeNew.caseAs ul.case02 li + li {
|
||||
border-left: 1px solid #DEDEDE;
|
||||
border-left: 1px solid #dedede;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.contentsTypeNew.caseAs ul.case02 li {
|
||||
@@ -329,7 +330,7 @@
|
||||
width: calc(50% - 10px);
|
||||
height: 120px;
|
||||
padding-left: 110px;
|
||||
border: 1px solid #DEDEDE;
|
||||
border: 1px solid #dedede;
|
||||
border-radius: 6px;
|
||||
background: url("/kr/assets/images/kia/contents/icon06.svg") no-repeat 30px center;
|
||||
line-height: 118px;
|
||||
@@ -474,7 +475,7 @@
|
||||
width: calc(33.3333333333% - 12px);
|
||||
}
|
||||
.contentsTypeNew.caseRegist .connectStore ul li:first-child img {
|
||||
border: 1px solid #DEDEDE;
|
||||
border: 1px solid #dedede;
|
||||
}
|
||||
.contentsTypeNew.caseRegist .connectStore ul li img {
|
||||
display: block;
|
||||
@@ -542,7 +543,7 @@
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
border: 1px solid #DEDEDE;
|
||||
border: 1px solid #dedede;
|
||||
border-radius: 6px;
|
||||
font-size: 20px;
|
||||
line-height: 1.5;
|
||||
@@ -628,7 +629,8 @@
|
||||
line-height: 54px;
|
||||
color: #000;
|
||||
}
|
||||
.contentsTypeNew.caseUsageDetail .caseBtnWrap a::before, .contentsTypeNew.caseUsageDetail .caseBtnWrap a::after {
|
||||
.contentsTypeNew.caseUsageDetail .caseBtnWrap a::before,
|
||||
.contentsTypeNew.caseUsageDetail .caseBtnWrap a::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@@ -647,8 +649,8 @@
|
||||
position: absolute;
|
||||
left: 40px;
|
||||
right: 40px;
|
||||
border-top: 1px solid #9BA1A5;
|
||||
border-bottom: 1px solid #9BA1A5;
|
||||
border-top: 1px solid #9ba1a5;
|
||||
border-bottom: 1px solid #9ba1a5;
|
||||
}
|
||||
.contentsTypeNew.caseUsageDetail .caseVideo a {
|
||||
display: block;
|
||||
@@ -668,7 +670,7 @@
|
||||
top: 50px;
|
||||
width: 51px;
|
||||
height: 57px;
|
||||
background: linear-gradient(270deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
|
||||
background: linear-gradient(270deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
|
||||
}
|
||||
.contentsTypeNew.caseUsageDetail .caseFunction .functionTab {
|
||||
overflow-x: auto;
|
||||
@@ -702,7 +704,7 @@
|
||||
.contentsTypeNew.caseUsageDetail .caseFunction .functionTab > ul button {
|
||||
margin-right: 20px;
|
||||
font-size: 18px;
|
||||
color: #9EA1A2;
|
||||
color: #9ea1a2;
|
||||
cursor: pointer;
|
||||
}
|
||||
.contentsTypeNew.caseUsageDetail .caseFunction .functionTab > ul li.active button {
|
||||
@@ -739,7 +741,7 @@
|
||||
}
|
||||
.contentsTypeNew.caseUsageDetail .caseFunction .functionDetail .item img {
|
||||
max-width: 100%;
|
||||
border: 1px solid #DEDEDE;
|
||||
border: 1px solid #dedede;
|
||||
border-radius: 6px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@@ -798,13 +800,14 @@
|
||||
.contentsTypeNew.caseUsageDetail .caseStreaming > section:nth-of-type(2) h3 {
|
||||
width: 100px;
|
||||
}
|
||||
.contentsTypeNew.caseUsageDetail .caseStreaming > section:nth-of-type(2)::before, .contentsTypeNew.caseUsageDetail .caseStreaming > section:nth-of-type(2)::after {
|
||||
.contentsTypeNew.caseUsageDetail .caseStreaming > section:nth-of-type(2)::before,
|
||||
.contentsTypeNew.caseUsageDetail .caseStreaming > section:nth-of-type(2)::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 1px;
|
||||
background: #DEDEDE;
|
||||
background: #dedede;
|
||||
}
|
||||
.contentsTypeNew.caseUsageDetail .caseStreaming > section:nth-of-type(2)::before {
|
||||
left: calc((100% - 100px) / 4);
|
||||
@@ -842,7 +845,7 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
.contentsTypeNew.caseUsageDetail .caseStreaming > section > div a.caseBorder {
|
||||
border: 1px solid #DEDEDE;
|
||||
border: 1px solid #dedede;
|
||||
}
|
||||
.contentsTypeNew.caseUsageDetail .caseStreaming > section > div a + a {
|
||||
margin-left: 15px;
|
||||
@@ -863,14 +866,15 @@
|
||||
margin-top: 40px;
|
||||
width: unset;
|
||||
}
|
||||
.contentsTypeNew.caseUsageDetail .caseStreaming > section:nth-of-type(2)::before, .contentsTypeNew.caseUsageDetail .caseStreaming > section:nth-of-type(2)::after {
|
||||
.contentsTypeNew.caseUsageDetail .caseStreaming > section:nth-of-type(2)::before,
|
||||
.contentsTypeNew.caseUsageDetail .caseStreaming > section:nth-of-type(2)::after {
|
||||
display: none;
|
||||
}
|
||||
.contentsTypeNew.caseUsageDetail .caseStreaming > section:last-of-type {
|
||||
margin-top: 40px;
|
||||
margin-left: 50px;
|
||||
padding-left: 50px;
|
||||
border-left: 1px solid #DEDEDE;
|
||||
border-left: 1px solid #dedede;
|
||||
}
|
||||
}
|
||||
@media (max-width: 680px) {
|
||||
@@ -945,7 +949,7 @@
|
||||
}
|
||||
@media (max-width: 680px) {
|
||||
.contentsTypeNew.caseUsageDetail .caseFunction .functionDetail .itemWrap .item,
|
||||
.contentsTypeNew.caseUsageDetail .caseFunction .functionDetail .itemWrap p {
|
||||
.contentsTypeNew.caseUsageDetail .caseFunction .functionDetail .itemWrap p {
|
||||
width: 100%;
|
||||
}
|
||||
.contentsTypeNew.caseUsageDetail .caseFunction .functionDetail .itemWrap .item + .item {
|
||||
@@ -1026,7 +1030,7 @@
|
||||
.contentsTypeNew.caseRspa2 .info ul li img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
border: 1px solid #DEDEDE;
|
||||
border: 1px solid #dedede;
|
||||
border-radius: 6px;
|
||||
}
|
||||
@media (min-width: 641px) and (max-width: 1024px) {
|
||||
@@ -1036,7 +1040,7 @@
|
||||
.contentsTypeNew.caseRspa2 .info ul li + li + li + li {
|
||||
margin-top: 15px;
|
||||
}
|
||||
.contentsTypeNew.caseRspa2 .info ul li:nth-of-type(3n+1) {
|
||||
.contentsTypeNew.caseRspa2 .info ul li:nth-of-type(3n + 1) {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
@@ -1050,7 +1054,7 @@
|
||||
.contentsTypeNew.caseRspa2 .info ul li + li + li {
|
||||
margin-top: 15px;
|
||||
}
|
||||
.contentsTypeNew.caseRspa2 .info ul li:nth-of-type(2n+1) {
|
||||
.contentsTypeNew.caseRspa2 .info ul li:nth-of-type(2n + 1) {
|
||||
margin-left: 0;
|
||||
}
|
||||
.contentsTypeNew.caseRspa2 .info ul li strong {
|
||||
@@ -1085,7 +1089,7 @@
|
||||
position: relative;
|
||||
width: calc(33.3333333333% - 8px);
|
||||
padding: 30px 30px 110px;
|
||||
border: 1px solid #DEDEDE;
|
||||
border: 1px solid #dedede;
|
||||
border-radius: 6px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: left 30px bottom 30px;
|
||||
@@ -1101,7 +1105,7 @@
|
||||
}
|
||||
.contentsTypeNew.caseRspa2 .howtobuy > div > * b:first-child {
|
||||
font-size: 14px;
|
||||
color: #9EA1A2;
|
||||
color: #9ea1a2;
|
||||
}
|
||||
.contentsTypeNew.caseRspa2 .howtobuy > div > * strong {
|
||||
display: block;
|
||||
@@ -1177,11 +1181,13 @@
|
||||
width: calc(20% - 15px);
|
||||
height: unset;
|
||||
padding: 20px;
|
||||
border: 1px solid #DEDEDE;
|
||||
border: 1px solid #dedede;
|
||||
border-radius: 6px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.contentsTypeNew .storeguideTab a:hover, .contentsTypeNew .storeguideTab a:focus, .contentsTypeNew .storeguideTab a.current {
|
||||
.contentsTypeNew .storeguideTab a:hover,
|
||||
.contentsTypeNew .storeguideTab a:focus,
|
||||
.contentsTypeNew .storeguideTab a.current {
|
||||
border-color: #000;
|
||||
}
|
||||
.contentsTypeNew .storeguideTab a strong {
|
||||
@@ -1295,7 +1301,7 @@
|
||||
.contentsTypeNew .storeGuideItem > header strong {
|
||||
padding: 0 0 13px 5px;
|
||||
font-size: 12px;
|
||||
color: #FF0000;
|
||||
color: #ff0000;
|
||||
}
|
||||
@media (max-width: 500px) {
|
||||
.contentsTypeNew .storeGuideItem > header strong {
|
||||
@@ -1324,16 +1330,16 @@
|
||||
image-rendering: crisp-edges;
|
||||
transform: translateZ(0);
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
.contentsTypeNew .storeGuideItem ul li img:not(.noBorder) {
|
||||
border: 1px solid #DEDEDE;
|
||||
border: 1px solid #dedede;
|
||||
}
|
||||
.contentsTypeNew .storeGuideItem ul li > b {
|
||||
display: block;
|
||||
margin: 20px 0 8px;
|
||||
font-size: 14px;
|
||||
color: #9EA1A2;
|
||||
color: #9ea1a2;
|
||||
}
|
||||
.contentsTypeNew .storeGuideItem ul li strong {
|
||||
font-size: 16px;
|
||||
@@ -1373,13 +1379,13 @@
|
||||
width: 400px;
|
||||
height: 4px;
|
||||
border-radius: 0;
|
||||
background: #C3C6C8;
|
||||
background: #c3c6c8;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
.contentsTypeNew .storeGuideItem .swiper-horizontal > .swiper-scrollbar .swiper-scrollbar-drag,
|
||||
.contentsTypeNew .storeGuideItem .swiper-scrollbar.swiper-scrollbar-horizontal .swiper-scrollbar-drag {
|
||||
border-radius: 0;
|
||||
background: #05141F;
|
||||
background: #05141f;
|
||||
}
|
||||
.contentsTypeNew .storeGuideItem .swiper-scrollbar-after-space {
|
||||
height: 68px;
|
||||
@@ -1395,7 +1401,8 @@
|
||||
height: 55px;
|
||||
background: url("/kr/assets/images/kia/contents/arrowSwipe.svg") no-repeat center;
|
||||
}
|
||||
.contentsTypeNew .storeGuideItem .swiper-button-next::after, .contentsTypeNew .storeGuideItem .swiper-button-next.swiper-button-disabled,
|
||||
.contentsTypeNew .storeGuideItem .swiper-button-next::after,
|
||||
.contentsTypeNew .storeGuideItem .swiper-button-next.swiper-button-disabled,
|
||||
.contentsTypeNew .storeGuideItem .swiper-button-prev::after,
|
||||
.contentsTypeNew .storeGuideItem .swiper-button-prev.swiper-button-disabled {
|
||||
display: none;
|
||||
@@ -1406,7 +1413,7 @@
|
||||
}
|
||||
@media (max-width: 1400px) {
|
||||
.contentsTypeNew .storeGuideItem .swiper-button-next,
|
||||
.contentsTypeNew .storeGuideItem .swiper-button-prev {
|
||||
.contentsTypeNew .storeGuideItem .swiper-button-prev {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -1437,7 +1444,8 @@
|
||||
padding-left: 24px !important;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
.contentsTypeNew .storeGuideItem ul.caseWide li, .contentsTypeNew .storeGuideItem ul.caseWide2 li {
|
||||
.contentsTypeNew .storeGuideItem ul.caseWide li,
|
||||
.contentsTypeNew .storeGuideItem ul.caseWide2 li {
|
||||
width: 480px;
|
||||
padding-left: 2rem !important;
|
||||
}
|
||||
@@ -1459,11 +1467,12 @@
|
||||
.contentsTypeNew .storeGuideItem ul li b {
|
||||
margin-top: 15px;
|
||||
}
|
||||
.contentsTypeNew .storeGuideItem ul.caseWide li, .contentsTypeNew .storeGuideItem ul.caseWide2 li {
|
||||
.contentsTypeNew .storeGuideItem ul.caseWide li,
|
||||
.contentsTypeNew .storeGuideItem ul.caseWide2 li {
|
||||
width: 100%;
|
||||
}
|
||||
.contentsTypeNew .storeGuideItem .swiper-horizontal > .swiper-scrollbar,
|
||||
.contentsTypeNew .storeGuideItem .swiper-scrollbar.swiper-scrollbar-horizontal {
|
||||
.contentsTypeNew .storeGuideItem .swiper-scrollbar.swiper-scrollbar-horizontal {
|
||||
width: calc(100% - 40px);
|
||||
}
|
||||
.contentsTypeNew .storeGuideItem .swiper-scrollbar-after-space {
|
||||
@@ -1601,7 +1610,7 @@
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.contentsTypeNew .caseMagazineView > div,
|
||||
.contentsTypeNew .caseMagazineView img {
|
||||
.contentsTypeNew .caseMagazineView img {
|
||||
width: 100%;
|
||||
padding-right: 0 !important;
|
||||
padding-left: 0 !important;
|
||||
@@ -1646,7 +1655,7 @@
|
||||
width: 100%;
|
||||
top: 0;
|
||||
height: 1px;
|
||||
background: #DEDEDE;
|
||||
background: #dedede;
|
||||
}
|
||||
.contentsTypeNew .caseService header h2 {
|
||||
font-size: 16px;
|
||||
@@ -1692,7 +1701,7 @@
|
||||
position: relative;
|
||||
width: calc(50% - 5px);
|
||||
padding: 120px 50px 30px 30px;
|
||||
border: 1px solid #DEDEDE;
|
||||
border: 1px solid #dedede;
|
||||
border-radius: 6px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 30px 30px;
|
||||
@@ -1715,7 +1724,8 @@
|
||||
height: 16px;
|
||||
background: url("/kr/assets/images/kia/contents/arrow.svg") no-repeat center;
|
||||
}
|
||||
.contentsTypeNew .caseService div a:hover, .contentsTypeNew .caseService div a:focus {
|
||||
.contentsTypeNew .caseService div a:hover,
|
||||
.contentsTypeNew .caseService div a:focus {
|
||||
border-color: #000;
|
||||
}
|
||||
@media screen and (max-width: 500px) {
|
||||
@@ -1931,7 +1941,7 @@
|
||||
font-size: 1.4rem;
|
||||
padding: 1.4rem 2rem;
|
||||
background-color: #fff;
|
||||
border: 1px solid #DEDEDE;
|
||||
border: 1px solid #dedede;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
@@ -1955,7 +1965,7 @@
|
||||
transform: translate(-50%, 0);
|
||||
width: 1.4rem;
|
||||
height: 0.8rem;
|
||||
displaY: block;
|
||||
display: block;
|
||||
background: url("/kr/assets/images/common/icon-notice.svg");
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
@@ -1968,7 +1978,7 @@
|
||||
width: 100%;
|
||||
top: 4.4rem;
|
||||
left: 0;
|
||||
border: 1px solid #DEDEDE;
|
||||
border: 1px solid #dedede;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
z-index: 1;
|
||||
@@ -2028,7 +2038,7 @@
|
||||
font-size: 1.4rem;
|
||||
padding: 1.4rem 2rem;
|
||||
background-color: #fff;
|
||||
border: 1px solid #DEDEDE;
|
||||
border: 1px solid #dedede;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
@@ -2052,7 +2062,7 @@
|
||||
transform: translate(-50%, 0);
|
||||
width: 1.4rem;
|
||||
height: 0.8rem;
|
||||
displaY: block;
|
||||
display: block;
|
||||
background: url("/kr/assets/images/common/icon-notice.svg");
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
@@ -2065,7 +2075,7 @@
|
||||
width: 100%;
|
||||
top: 4.4rem;
|
||||
left: 0;
|
||||
border: 1px solid #DEDEDE;
|
||||
border: 1px solid #dedede;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
z-index: 1;
|
||||
@@ -2126,7 +2136,7 @@
|
||||
font-size: 1.4rem;
|
||||
padding: 1.4rem 2rem;
|
||||
background-color: #fff;
|
||||
border: 1px solid #DEDEDE;
|
||||
border: 1px solid #dedede;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
@@ -2150,7 +2160,7 @@
|
||||
transform: translate(-50%, 0);
|
||||
width: 1.4rem;
|
||||
height: 0.8rem;
|
||||
displaY: block;
|
||||
display: block;
|
||||
background: url("/kr/assets/images/common/icon-notice.svg");
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
@@ -2163,7 +2173,7 @@
|
||||
width: 100%;
|
||||
top: 4.4rem;
|
||||
left: 0;
|
||||
border: 1px solid #DEDEDE;
|
||||
border: 1px solid #dedede;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
z-index: 1;
|
||||
@@ -2193,4 +2203,39 @@
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
/*# sourceMappingURL=contents.css.map */
|
||||
/*# sourceMappingURL=contents.css.map */
|
||||
|
||||
.util-area {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: 1.6rem;
|
||||
margin-bottom: 1.6rem;
|
||||
@media (min-width: 768px) {
|
||||
gap: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.btn-wish {
|
||||
width: 2.4rem;
|
||||
height: 2.4rem;
|
||||
background: url(../images/common/icon_heart.png) no-repeat center / 100% auto;
|
||||
text-indent: -9999px;
|
||||
cursor: pointer;
|
||||
@media (min-width: 768px) {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
}
|
||||
}
|
||||
.btn-share {
|
||||
width: 2.4rem;
|
||||
height: 2.4rem;
|
||||
background: url(../images/common/icon_share.png) no-repeat center / 100% auto;
|
||||
text-indent: -9999px;
|
||||
cursor: pointer;
|
||||
@media (min-width: 768px) {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user