diff --git a/src/styles/template_2/common-v4-nav-v2.css b/src/styles/template_2/common-v4-nav-v2.css index 6c80828..7863146 100644 --- a/src/styles/template_2/common-v4-nav-v2.css +++ b/src/styles/template_2/common-v4-nav-v2.css @@ -2243,10 +2243,6 @@ td { overflow: hidden } -.app-v4.active-focus a:focus,.app-v4.active-focus button:focus,.app-v4.active-focus .login-v4-wrap:focus,.app-v4.active-focus .footer-links__title:focus,.app-v4.active-focus .shop-bag:focus,.app-v4.active-focus .nav-addons__profile:focus,.app-v4.active-focus .v4.n03-expanded-support a:focus .dropdown__holder-icon-src,.h-focus-active { - outline: 1px solid #d20a2c -} - .app-v4 .main-nav__item:focus,.app-v4 .nav-addons:focus,.app-v4 div[tabindex],.app-v4 div { outline: 0 } @@ -7140,10 +7136,6 @@ html[dir=rtl] .ip-jump-wrap .ip-jump-go { transform: scaleX(1) } - .v4.n01-main-navigation.nav-v2 .main-nav__login { - display: none - } - .v4.n01-main-navigation.nav-v2 .main-nav__find-store { display: none } @@ -7354,10 +7346,6 @@ html[dir=rtl] .ip-jump-wrap .ip-jump-go { display: none } - .v4.n01-main-navigation.nav-v2 .login-v4-wrap .main-nav__item::after { - background-color: unset - } - .v4.n01-main-navigation.nav-v2 .main-nav__item--has-children .main-nav__link::before,.v4.n01-main-navigation.nav-v2 .main-nav__item--has-children .main-nav__link::after { content: ''; position: absolute; @@ -7387,10 +7375,6 @@ html[dir=rtl] .ip-jump-wrap .ip-jump-go { transform: rotate(-180deg) } - .v4.n01-main-navigation.nav-v2 .main-nav__login-link { - color: #7f7f7f - } - .v4.n01-main-navigation.nav-v2 .main-nav__loggedin-link { color: #7f7f7f; display: none @@ -7575,15 +7559,6 @@ html[dir=rtl] .ip-jump-wrap .ip-jump-go { @media screen and (min-width: 1599.98px) { - .app-v4 .header.nav-v2.mb-ui .main-nav .login-v4-wrap .login-v4-cnt li a { - padding:12px 80px; - color: #000 - } - - .app-v4 .header.nav-v2.mb-ui .main-nav .login-v4-wrap .login-v4-cnt li:not(.ec-login-btn):not(.ec-logout-btn) a::after { - right: 80px - } - .main-navigation.nav-v2 .v4.n02-expanded-products .dropdown__wrap { margin: 0 -80px 15px } @@ -7632,14 +7607,6 @@ html[dir=rtl] .ip-jump-wrap .ip-jump-go { } @media screen and (max-width: 1599.98px) { - .app-v4 .header.nav-v2 .main-nav .login-v4-wrap .login-v4-cnt li a { - padding:12px 40px - } - - .app-v4 .header.nav-v2 .main-nav .login-v4-wrap .login-v4-cnt li:not(.ec-login-btn):not(.ec-logout-btn) a::after { - right: 40px - } - .main-navigation.nav-v2 .v4.n02-expanded-products .dropdown__wrap { margin: 0 -40px 15px } @@ -7658,13 +7625,6 @@ html[dir=rtl] .ip-jump-wrap .ip-jump-go { } @media screen and (max-width: 767.98px) { - .app-v4 .header.nav-v2 .main-nav .login-v4-wrap .login-v4-cnt li a { - padding:12px 16px - } - - .app-v4 .header.nav-v2 .main-nav .login-v4-wrap .login-v4-cnt li:not(.ec-login-btn):not(.ec-logout-btn) a::after { - right: 16px - } .main-navigation.nav-v2 .v4.n02-expanded-products .dropdown__wrap { margin: 0 -16px 15px @@ -9291,6 +9251,7 @@ html[dir=rtl] .ip-jump-wrap .ip-jump-go { } @media only screen and (max-width: 767.98px) { + .main-navigation.nav-v2 .v4.n03-expanded-support .dropdown__order { margin:0 -16px 15px } @@ -9353,615 +9314,4 @@ html[dir=rtl] .ip-jump-wrap .ip-jump-go { .app-v4 .nav-addons__link { font-size: 18px -} - -.app-v4 .login-v4-wrap .login-v4 { - visibility: hidden; - opacity: 0; - position: absolute; - top: 50px; - width: 224px; - right: -40px; - box-shadow: 0 1px 2px 0 rgba(0,0,0,0.16); - background: #fff; - border: 1px solid #e8e8e8; - -webkit-transition: .15s ease-in; - transition: .15s ease-in; - z-index: 21; - pointer-events: none -} - -.app-v4 .login-v4-wrap.active .login-v4 { - visibility: visible; - opacity: 1; - pointer-events: auto -} - -.app-v4 .login-v4-wrap .login-font { - position: relative -} - -.app-v4 .login-v4-wrap .login-font span { - width: 0; - height: 0; - font-size: 0; - overflow: hidden; - position: absolute; - right: 44px -} - -.app-v4 .login-v4-wrap .login-font .login-bot { - border-width: 10px; - border-style: solid dashed dashed; - border-color: transparent transparent #e8e8e8; - bottom: 1px -} - -.app-v4 .login-v4-wrap .login-font .login-top { - border-width: 10px; - border-style: solid dashed dashed; - border-color: transparent transparent #fff; - bottom: -1px -} - -.login-v4-wrap .login-v4-cnt { - padding: 20px 28px -} - -.app-v4 .login-v4-wrap .login-v4-cnt li { - border-top: 1px solid #ececec -} - -.app-v4 .login-v4-wrap .login-v4-cnt li a { - display: block; - padding: 16px 0; - font-size: 16px; - color: rgba(0,0,0,0.5); - -webkit-transition: .15s ease-in; - transition: .15s ease-in -} - -.app-v4 .login-v4-wrap .login-v4-cnt li a:hover { - color: #000 -} - -.app-v4 .login-v4-wrap .show-login { - display: block -} - -.app-v4 .login-v4-wrap .show-logout { - display: none -} - -.app-v4 .login-v4-wrap.signin .show-login { - display: none -} - -.app-v4 .login-v4-wrap.signin .show-logout { - display: block -} - -.app-v4 .login-v4-wrap .login-v4-cnt li:first-child { - border-top: 0 -} - -.app-v4 .login-v4-wrap .app-sign { - display: none -} - -.app-v4 .login-v4-wrap.Self-eCommerce .login-v4-cnt { - padding: 20px 40px -} - -.app-v4 .v4.n01-main-navigation .login-v4-wrap.Self-eCommerce .main-nav__item,.app-v4 .v4.n01-main-navigation .login-v4-wrap.Fusion-eCommerce .main-nav__item { - margin-right: 0 -} - -.app-v4 .login-v4-wrap.Self-eCommerce .show-login li.ec-login-btn a { - color: #2788d9 -} - -.app-v4 .login-v4-wrap.Self-eCommerce .login-v4-cnt .show-logout .greeting-text { - display: none; - font-size: 16px; - font-weight: bold; - margin: 16px 0; - word-break: break-word -} - -.app-v4 .login-v4-wrap.Self-eCommerce .login-v4-cnt .show-logout li:first-of-type { - border-top: 0 -} - -.app-v4 .login-v4-wrap.Self-eCommerce .login-v4-cnt li a { - font-size: 16px; - word-break: break-word -} - -.app-v4 .shop-bag.third-party-jump { - margin-left: 18px -} - -.app-v4 .shop-bag.third-party-jump a { - display: block -} - -.app-v4 .shop-bag.third-party-jump .huawei-vmall { - border-radius: 15px; - border: solid 1px rgba(0,0,0,0.3); - padding: 0 24px; - -webkit-transition: .15s ease-in; - transition: .15s ease-in -} - -.app-v4 .shop-bag.third-party-jump a:hover .huawei-vmall { - border-color: #000 -} - -.app-v4 .shop-bag.third-party-jump .huawei-vmall span { - font-size: 12px; - line-height: 28px; - color: #000; - display: inline-block -} - -.app-v4 .shop-bag.third-party-jump .huawei-vmall .font-short { - display: none -} - -.app-v4 .shop-bag.shopping-bag { - margin-left: 12px -} - -.app-v4 .shop-bag.shopping-bag a { - display: block -} - -.app-v4 .shop-bag.shopping-bag .huawei-bag { - margin-left: 0; - font-size: 18px -} - -.v4.n01-main-navigation .login-v4-wrap.wap { - display: none -} - -@media only screen and (max-width: 1599.98px) and (min-width:1199.98px) { - .app-v4 .login-v4-wrap .login-v4 { - right:-16px - } - - .app-v4 .login-v4-wrap .login-font span { - right: 20px - } -} - -@media only screen and (max-width: 1299.98px) and (min-width:1199.98px) { - .app-v4 .shop-bag.third-party-jump .huawei-vmall .font-long { - display:none - } - - .app-v4 .shop-bag.third-party-jump .huawei-vmall .font-short { - display: inline-block - } - - .app-v4 .shop-bag.third-party-jump { - margin-left: 10px - } - - .app-v4 .shop-bag.third-party-jump .huawei-vmall { - padding: 0 8px - } -} - -@media only screen and (max-width: 1199.98px) { - .app-v4 .login-v4-wrap { - margin-left:16px - } - - .app-v4 .v4.n01-main-navigation .login-v4-wrap .login-v4-but { - padding-top: 6px; - padding-bottom: 6px; - font-size: 21px - } - - .app-v4 .login-v4-wrap .login-v4 { - -webkit-transition: .6s ease-out; - transition: .6s ease-out; - position: fixed; - top: 60px; - bottom: 0; - left: 0; - width: 100%; - background-color: transparent; - box-shadow: none; - transform: inherit; - -webkit-transform: inherit; - border: 0; - pointer-events: auto; - border-top: 1px solid #e5e5e5 - } - - .app-v4 .login-v4-wrap .login-v4:after { - content: ""; - position: absolute; - top: 0; - left: 0; - background-color: rgba(0,0,0,0.4); - width: 100%; - height: 100%; - z-index: -1 - } - - .app-v4 .login-v4-wrap .login-v4-cnt { - background-color: #fff - } - - .app-v4 .main-nav .login-v4-wrap .login-v4-cnt { - padding: 0 - } - - .v4.n01-main-navigation .main-nav .login-v4-wrap { - display: none; - margin-left: 0 - } - - .v4.n01-main-navigation .login-v4-wrap.Fusion-eCommerce,.v4.n01-main-navigation .login-v4-wrap.Self-eCommerce { - display: none - } - - .v4.n01-main-navigation .login-v4-wrap.pc .main-nav__item { - position: unset; - opacity: unset; - -webkit-transform: unset; - transform: unset - } - - .app-v4 .login-v4-wrap .login-font { - display: none - } - - .app-v4 .login-v4-wrap .login-v4-cnt li { - border-top: 0; - border-bottom: 1px solid rgba(0,0,0,0.05) - } - - .app-v4 .main-nav .login-v4-wrap .login-v4-cnt li { - border-bottom: 0 - } - - .app-v4 .login-v4-wrap .login-v4-cnt li a { - line-height: 16px - } - - .app-v4 .login-v4-wrap.Self-eCommerce .login-v4-cnt li.ec-login-btn a { - color: #2788d9 - } - - .app-v4 .login-v4-wrap.Self-eCommerce .login-v4-cnt .show-logout .greeting-text { - margin: 0; - padding: 12px 24px; - line-height: 24px - } - - .app-v4 .login-v4-wrap.Self-eCommerce .login-v4-cnt li a { - font-weight: normal; - line-height: 24px - } - - .app-v4 .main-nav .login-v4-wrap .login-v4-cnt li:not(.ec-login-btn):not(.ec-logout-btn) a::after { - position: absolute; - content: ""; - font-family: 'svgicons'; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - font-style: normal; - font-variant: normal; - font-weight: 700; - text-decoration: none; - text-transform: none; - display: inline-block; - line-height: 1; - font-size: 10px; - padding-left: 5px; - top: 19px; - color: #7f7f7f; - -webkit-transition: .3s ease-out; - transition: .3s ease-out - } - - .app-v4 .login-v4-wrap .login-v4-cnt li:last-child { - border-bottom: 0 - } - - .app-v4 .login-v4-wrap .app-sign { - display: block - } - - .app-v4 .login-v4-wrap .signin-service { - display: none - } - - .app-v4 .login-v4-wrap .signin-information { - display: none - } - - .app-v4 .login-v4-wrap .login-v4-cnt li.app-sign { - border-top: 0 - } - - .app-v4 .login-v4-wrap .font-ico-profile:before { - -webkit-transition: .3s ease-out; - transition: .3s ease-out; - opacity: 1 - } - - .app-v4 .login-v4-wrap.active .font-ico-profile:before { - opacity: 0; - -webkit-transform: rotateY(90deg); - transform: rotateY(90deg) - } - - .app-v4 .login-v4-wrap .icon-onlink-left { - -webkit-transition: .3s ease-out; - transition: .3s ease-out; - position: absolute; - top: 50%; - left: 50%; - height: 2px; - width: 25px; - border-radius: 2px; - background-color: #7f7f7f; - -webkit-transform: translate(-50%,-50%) rotate(0); - transform: translate(-50%,-50%) rotate(0); - opacity: 0 - } - - .app-v4 .login-v4-wrap .icon-onlink-right { - -webkit-transition: .3s ease-out; - transition: .3s ease-out; - position: absolute; - top: 50%; - left: 50%; - height: 2px; - width: 25px; - border-radius: 2px; - background-color: #7f7f7f; - -webkit-transform: translate(-50%,-50%) rotate(0); - transform: translate(-50%,-50%) rotate(0); - opacity: 0 - } - - .app-v4 .login-v4-wrap.active .icon-onlink-left { - opacity: 1; - -webkit-transform: translate(-50%,-50%) rotate(225deg); - transform: translate(-50%,-50%) rotate(225deg) - } - - .app-v4 .login-v4-wrap.active .icon-onlink-right { - -webkit-transform: translate(-50%,-50%) rotate(-225deg); - transform: translate(-50%,-50%) rotate(-225deg); - opacity: 1 - } -} - -.v4.header .v4.n01-main-navigation .main-nav .login-v4-wrap.wap.Fusion-eCommerce,.v4.header .v4.n01-main-navigation .main-nav .login-v4-wrap.wap.Self-eCommerce { - margin: 0 -} - -.app-v4 .main-nav .login-v4-wrap .login-v4-cnt li:not(.ec-login-btn):not(.ec-logout-btn) a::after { - right: 80px -} - -@media only screen and (max-width: 1600px) { - .app-v4 .main-nav .login-v4-wrap .login-v4-cnt li:not(.ec-login-btn):not(.ec-logout-btn) a::after { - right:40px - } -} - -@media only screen and (max-width: 768px) { - .app-v4 .main-nav .login-v4-wrap .login-v4-cnt li:not(.ec-login-btn):not(.ec-logout-btn) a::after { - right:16px - } -} - -.v4.n01-main-navigation .nav-addons .login-v4-wrap.Fusion-eCommerce { - cursor: pointer -} - -@media only screen and (max-width: 1365px) { - .app-v4 .header.nav-v2 .login-v4-wrap { - margin-left:16px - } - - .app-v4 .header.nav-v2 .v4.n01-main-navigation .login-v4-wrap .login-v4-but { - padding-top: 6px; - padding-bottom: 6px; - font-size: 21px - } - - .app-v4 .header.nav-v2 .login-v4-wrap .login-v4 { - -webkit-transition: .6s ease-out; - transition: .6s ease-out; - position: fixed; - top: 60px; - bottom: 0; - left: 0; - width: 100%; - background-color: transparent; - box-shadow: none; - transform: inherit; - -webkit-transform: inherit; - border: 0; - pointer-events: auto - } - - .app-v4 .header.nav-v2 .login-v4-wrap .login-v4:after { - content: ""; - position: absolute; - top: 0; - left: 0; - background-color: rgba(0,0,0,0.4); - width: 100%; - height: 100%; - z-index: -1 - } - - .app-v4 .header.nav-v2 .login-v4-wrap .login-v4-cnt { - background-color: #fff - } - - .app-v4 .header.nav-v2 .main-nav .login-v4-wrap .login-v4-cnt { - padding: 0 - } - - .app-v4 .header.nav-v2 .main-nav .login-v4-wrap { - display: none; - margin-left: 0 - } - - .app-v4 .header.nav-v2 .login-v4-wrap.Fusion-eCommerce,.app-v4 .header.nav-v2 .login-v4-wrap.Self-eCommerce { - display: none - } - - .app-v4 .header.nav-v2 .main-nav .login-v4-wrap.wap.Fusion-eCommerce,.app-v4 .header.nav-v2 .main-nav .login-v4-wrap.wap.Self-eCommerce { - display: block; - padding: 0 - } - - .app-v4 .header.nav-v2 .login-v4-wrap.pc .main-nav__item { - position: unset; - opacity: unset; - -webkit-transform: unset; - transform: unset - } - - .app-v4 .header.nav-v2 .login-v4-wrap .login-font { - display: none - } - - .app-v4 .header.nav-v2 .login-v4-wrap .login-v4-cnt li { - border-top: 0; - border-bottom: 1px solid rgba(0,0,0,0.05) - } - - .app-v4 .header.nav-v2 .main-nav .login-v4-wrap .login-v4-cnt li { - border-bottom: 0 - } - - .app-v4 .header.nav-v2 .login-v4-wrap .login-v4-cnt li a { - line-height: 16px - } - - .app-v4 .header.nav-v2 .login-v4-wrap.Self-eCommerce .login-v4-cnt li.ec-login-btn a { - color: #2788d9 - } - - .app-v4 .header.nav-v2 .login-v4-wrap.Self-eCommerce .login-v4-cnt .show-logout .greeting-text { - margin: 0; - padding: 12px 24px; - line-height: 24px - } - - .app-v4 .header.nav-v2 .login-v4-wrap.Self-eCommerce .login-v4-cnt li a { - font-weight: normal; - line-height: 24px - } - - .app-v4 .header.nav-v2 .main-nav .login-v4-wrap .login-v4-cnt li:not(.ec-login-btn):not(.ec-logout-btn) a::after { - position: absolute; - content: ""; - font-family: 'svgicons'; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - font-style: normal; - font-variant: normal; - font-weight: 700; - text-decoration: none; - text-transform: none; - display: inline-block; - line-height: 1; - font-size: 10px; - padding-left: 5px; - top: 19px; - color: #7f7f7f; - -webkit-transition: .3s ease-out; - transition: .3s ease-out - } - - .app-v4 .header.nav-v2 .login-v4-wrap .login-v4-cnt li:last-child { - border-bottom: 0 - } - - .app-v4 .header.nav-v2 .login-v4-wrap .app-sign { - display: block - } - - .app-v4 .header.nav-v2 .login-v4-wrap .signin-service { - display: none - } - - .app-v4 .header.nav-v2 .login-v4-wrap .signin-information { - display: none - } - - .app-v4 .header.nav-v2 .login-v4-wrap .login-v4-cnt li.app-sign { - border-top: 0 - } - - .app-v4 .header.nav-v2 .login-v4-wrap .font-ico-profile:before { - -webkit-transition: .3s ease-out; - transition: .3s ease-out; - opacity: 1 - } - - .app-v4 .header.nav-v2 .login-v4-wrap.active .font-ico-profile:before { - opacity: 0; - -webkit-transform: rotateY(90deg); - transform: rotateY(90deg) - } - - .app-v4 .header.nav-v2 .login-v4-wrap .icon-onlink-left { - -webkit-transition: .3s ease-out; - transition: .3s ease-out; - position: absolute; - top: 50%; - left: 50%; - height: 2px; - width: 25px; - border-radius: 2px; - background-color: #7f7f7f; - -webkit-transform: translate(-50%,-50%) rotate(0); - transform: translate(-50%,-50%) rotate(0); - opacity: 0; - filter: invert(1) - } - - .app-v4 .header.nav-v2 .login-v4-wrap .icon-onlink-right { - -webkit-transition: .3s ease-out; - transition: .3s ease-out; - position: absolute; - top: 50%; - left: 50%; - height: 2px; - width: 25px; - border-radius: 2px; - background-color: #7f7f7f; - -webkit-transform: translate(-50%,-50%) rotate(0); - transform: translate(-50%,-50%) rotate(0); - opacity: 0; - filter: invert(1) - } - - .app-v4 .header.nav-v2 .login-v4-wrap.active .icon-onlink-left { - opacity: 1; - -webkit-transform: translate(-50%,-50%) rotate(225deg); - transform: translate(-50%,-50%) rotate(225deg) - } - - .app-v4 .header.nav-v2 .login-v4-wrap.active .icon-onlink-right { - -webkit-transform: translate(-50%,-50%) rotate(-225deg); - transform: translate(-50%,-50%) rotate(-225deg); - opacity: 1 - } } \ No newline at end of file diff --git a/src/styles/template_2/style.css b/src/styles/template_2/style.css index 7318d13..48bf85c 100644 --- a/src/styles/template_2/style.css +++ b/src/styles/template_2/style.css @@ -8,6 +8,12 @@ main { /* background: var(--background-light); */ } +@media only screen and (max-width: 767.98px) { + main { + padding: 1rem; + } +} + .h-full { height: 100%; } @@ -125,9 +131,9 @@ main { margin-top: 4.302083333vw; } -.app-read-sc1-kv .sc1-mkt-text img { +/* .app-read-sc1-kv .sc1-mkt-text img { width: 10.625vw; -} +} */ .app-read-sc1-kv .mkt-title { width: 34.5vw;