1055 lines
22 KiB
SCSS
1055 lines
22 KiB
SCSS
:root {
|
|
--color-global: #462f91;
|
|
--color-title: #0d0d9c;
|
|
--color-hover: #1877f2;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background-color: #f5f5f5;
|
|
border-radius: 10px;
|
|
}
|
|
::-webkit-scrollbar {
|
|
width: 7px;
|
|
height: 3px;
|
|
background-color: #f5f5f5;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: #462f91;
|
|
border-radius: 20px;
|
|
background-image: -webkit-gradient(
|
|
linear,
|
|
0 0,
|
|
0 100%,
|
|
color-stop(0.7, #462f91),
|
|
color-stop(0.5, transparent),
|
|
to(transparent)
|
|
);
|
|
}
|
|
html {
|
|
font-size: 100%;
|
|
font-family: "Roboto", sans-serif;
|
|
}
|
|
body {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.container-mb {
|
|
max-width: 640px !important;
|
|
margin: 0 auto;
|
|
}
|
|
.container {
|
|
width: 100%;
|
|
padding: 0 12px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.icon_2025 {
|
|
background: url(../images/icon_2025.png) no-repeat;
|
|
background-size: 228px 260px;
|
|
display: block;
|
|
&.map {
|
|
width: 20px;
|
|
height: 26px;
|
|
background-position: 1px 0px;
|
|
}
|
|
&.search {
|
|
width: 24px;
|
|
height: 24px;
|
|
background-position: -70px 0;
|
|
}
|
|
&.search-2 {
|
|
width: 24px;
|
|
height: 24px;
|
|
background-position: -102px 0;
|
|
}
|
|
&.user {
|
|
width: 26px;
|
|
height: 26px;
|
|
background-position: -133px 0px;
|
|
}
|
|
&.buildpc {
|
|
width: 36px;
|
|
height: 24px;
|
|
background-position: -24px -35px;
|
|
}
|
|
&.shop {
|
|
width: 22px;
|
|
height: 24px;
|
|
background-position: -70px -35px;
|
|
}
|
|
&.map-2 {
|
|
width: 15px;
|
|
height: 23px;
|
|
background-position: -26px -3px;
|
|
}
|
|
&.prduct-save {
|
|
width: 24px;
|
|
height: 24px;
|
|
background-position: -133px -35px;
|
|
}
|
|
&.article {
|
|
width: 30px;
|
|
height: 24px;
|
|
background-position: -162px -35px;
|
|
}
|
|
&.question {
|
|
width: 25px;
|
|
height: 25px;
|
|
background-position: -100px -35px;
|
|
}
|
|
&.heart {
|
|
width: 24px;
|
|
height: 24px;
|
|
background-position: -98px -147px;
|
|
}
|
|
&.heart-2 {
|
|
width: 24px;
|
|
height: 24px;
|
|
background-position: -126px -173px;
|
|
}
|
|
&.time {
|
|
width: 15px;
|
|
height: 14.5px;
|
|
background-position: -188px -172px;
|
|
}
|
|
&.link {
|
|
width: 14px;
|
|
height: 12px;
|
|
background-position: -212px -130px;
|
|
}
|
|
&.map-3 {
|
|
width: 13px;
|
|
height: 18px;
|
|
background-position: -49px -3px;
|
|
}
|
|
&.facebook {
|
|
width: 41px;
|
|
height: 40px;
|
|
background-position: 0 -159px;
|
|
}
|
|
&.zalo {
|
|
width: 41px;
|
|
height: 40px;
|
|
background-position: -50px -159px;
|
|
}
|
|
&.home {
|
|
width: 20px;
|
|
height: 20px;
|
|
background-position: -207px -152px;
|
|
}
|
|
&.faq {
|
|
width: 20px;
|
|
height: 20px;
|
|
background-position: -129px -127px;
|
|
}
|
|
&.article {
|
|
width: 30px;
|
|
height: 24px;
|
|
background-position: -162px -35px;
|
|
}
|
|
&.angle-right {
|
|
width: 11px;
|
|
height: 17px;
|
|
background-position: -212px -176px;
|
|
}
|
|
&.view {
|
|
width: 22px;
|
|
height: 16px;
|
|
background-position: -205px -9px;
|
|
}
|
|
&.time-big {
|
|
width: 22px;
|
|
height: 22px;
|
|
background-position: -2px -93px;
|
|
}
|
|
&.share {
|
|
width: 21px;
|
|
height: 21px;
|
|
background-position: -198px -36px;
|
|
}
|
|
&.map-4 {
|
|
width: 18px;
|
|
height: 25px;
|
|
background-position: -152px -92px;
|
|
}
|
|
&.link-review {
|
|
width: 18px;
|
|
height: 18px;
|
|
background-position: -27px -128px;
|
|
}
|
|
&.angle-bottom {
|
|
width: 15px;
|
|
height: 12px;
|
|
background-position: -188px -156px;
|
|
}
|
|
&.angle-top {
|
|
width: 15px;
|
|
height: 12px;
|
|
background-position: -190px -156px;
|
|
transform: rotate(180deg);
|
|
}
|
|
&.mouse {
|
|
width: 20px;
|
|
height: 20px;
|
|
background-position: -160px -170px;
|
|
}
|
|
&.copy {
|
|
width: 20px;
|
|
height: 20px;
|
|
background-position: -208px -94px;
|
|
}
|
|
&.history {
|
|
width: 24px;
|
|
height: 24px;
|
|
background-position: -45px -126px;
|
|
}
|
|
&.download {
|
|
width: 22px;
|
|
height: 22px;
|
|
background-position: -74px -126px;
|
|
}
|
|
&.return {
|
|
width: 18px;
|
|
height: 18px;
|
|
background-position: -155px -129px;
|
|
}
|
|
&.close {
|
|
width: 16px;
|
|
height: 16px;
|
|
background-position: -160px -149px;
|
|
}
|
|
&.filter {
|
|
width: 20px;
|
|
height: 20px;
|
|
background-position: 0px -209px;
|
|
}
|
|
&.time-gray {
|
|
width: 16px;
|
|
height: 16px;
|
|
background-position: -34px -96px;
|
|
}
|
|
&.spec {
|
|
width: 22px;
|
|
height: 22px;
|
|
background-position: -130px -209px;
|
|
}
|
|
&.tag {
|
|
width: 20px;
|
|
height: 20px;
|
|
background-position: -102px -127px;
|
|
}
|
|
&.comment {
|
|
width: 20px;
|
|
height: 20px;
|
|
background-position: -84px -25px;
|
|
background-size: 190px 200px;
|
|
}
|
|
&.earth {
|
|
width: 22px;
|
|
height: 24px;
|
|
background-position: 0 -125px;
|
|
}
|
|
&.images {
|
|
width: 22px;
|
|
height: 22px;
|
|
background-position: -164px -209px;
|
|
}
|
|
&.like {
|
|
width: 22px;
|
|
height: 22px;
|
|
background-position: -209px -234px;
|
|
}
|
|
&.shop-blue {
|
|
width: 24px;
|
|
height: 24px;
|
|
background-position: -99px -172px;
|
|
}
|
|
&.showroom {
|
|
width: 24px;
|
|
height: 24px;
|
|
background-position: -119px -92px;
|
|
}
|
|
&.phone {
|
|
width: 18px;
|
|
height: 18px;
|
|
background-position: -167px -4px;
|
|
}
|
|
&.upload_image {
|
|
width: 24px;
|
|
height: 24px;
|
|
background-position: -86px -91px;
|
|
}
|
|
}
|
|
.icon-star {
|
|
background: url(../images/icon_star.png) no-repeat;
|
|
display: block;
|
|
width: 58px;
|
|
height: 10px;
|
|
background-size: 58px 75px;
|
|
&.star5 {
|
|
background-position: 0 0;
|
|
}
|
|
&.star4 {
|
|
background-position: 0 -14px;
|
|
}
|
|
&.star3 {
|
|
background-position: 0 -26px;
|
|
}
|
|
&.star2 {
|
|
background-position: 0 -39px;
|
|
}
|
|
&.star1 {
|
|
background-position: 0 -52px;
|
|
}
|
|
&.star0 {
|
|
background-position: 0 -64px;
|
|
}
|
|
&.star-small {
|
|
width: 15px;
|
|
height: 15px;
|
|
background-position: 0 0;
|
|
background-size: 85px 105px;
|
|
}
|
|
}
|
|
.box-select {
|
|
position: relative;
|
|
width: 75px;
|
|
.select {
|
|
width: 100%;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 1;
|
|
color: #fff;
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
z-index: 2;
|
|
position: relative;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
font-weight: 700;
|
|
&:focus {
|
|
outline: none;
|
|
box-shadow: 0 0 0 2px rgba(70, 47, 145, 0.2);
|
|
border-color: var(--color-global);
|
|
}
|
|
option {
|
|
background: var(--color-global);
|
|
}
|
|
}
|
|
&::after {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 7px;
|
|
content: "";
|
|
display: block;
|
|
width: 11px;
|
|
height: 5px;
|
|
z-index: 1;
|
|
background: #d9d9d9;
|
|
clip-path: polygon(50% 100%, 0 0, 100% 0);
|
|
}
|
|
}
|
|
.icon_arrow {
|
|
background: #fff;
|
|
width: 10px;
|
|
height: 6px;
|
|
clip-path: polygon(50% 100%, 0 0, 100% 0);
|
|
display: block;
|
|
}
|
|
.icon_bar {
|
|
width: 25px;
|
|
height: 25px;
|
|
display: block;
|
|
background: url(../images/icon_bar.png) no-repeat;
|
|
background-size: contain;
|
|
}
|
|
.icon_fix {
|
|
display: block;
|
|
background: url(../images/icon_fixed.png) no-repeat;
|
|
background-size: 100px 40px;
|
|
&.home {
|
|
width: 20px;
|
|
height: 20px;
|
|
background-position: 1px 1px;
|
|
}
|
|
&.product {
|
|
width: 20px;
|
|
height: 20px;
|
|
background-position: -19px 2px;
|
|
}
|
|
&.settings {
|
|
width: 20px;
|
|
height: 20px;
|
|
background-position: -40px 2px;
|
|
}
|
|
&.faq {
|
|
width: 20px;
|
|
height: 20px;
|
|
background-position: -60px 2px;
|
|
}
|
|
&.user {
|
|
width: 20px;
|
|
height: 20px;
|
|
background-position: -80px 2px;
|
|
}
|
|
}
|
|
.icon_edit {
|
|
display: block;
|
|
width: 20px;
|
|
height: 20px;
|
|
background: url(../images/icon_edit.png) no-repeat;
|
|
background-size: contain;
|
|
}
|
|
.icon_remove {
|
|
display: block;
|
|
width: 20px;
|
|
height: 20px;
|
|
background: url(../images/icon_remove.png) no-repeat;
|
|
background-size: contain;
|
|
}
|
|
|
|
.swiper-pagination-bullet {
|
|
width: 7px;
|
|
height: 7px;
|
|
border-radius: 50%;
|
|
background: #cdcdcd;
|
|
opacity: 1;
|
|
&.swiper-pagination-bullet-active {
|
|
width: 31px;
|
|
background: #ff7a00;
|
|
border-radius: 50px;
|
|
}
|
|
}
|
|
|
|
.banner {
|
|
.swiper-pagination-bullet {
|
|
width: 7px;
|
|
height: 7px;
|
|
border-radius: 50%;
|
|
background: #fff;
|
|
opacity: 1;
|
|
&.swiper-pagination-bullet-active {
|
|
width: 31px;
|
|
background: #f9ef06;
|
|
border-radius: 50px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.product-item {
|
|
padding: 10px;
|
|
border: 1px solid #d3d3d3;
|
|
background: #fff;
|
|
border-radius: 8px;
|
|
.product-image {
|
|
display: block;
|
|
height: 170px;
|
|
width: 100%;
|
|
position: relative;
|
|
margin-bottom: 5px;
|
|
img {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
transform: translatey(0);
|
|
transition: 0.2s all ease-in;
|
|
}
|
|
&:hover {
|
|
img {
|
|
transform: translatey(-5px);
|
|
}
|
|
}
|
|
.box-saleoff {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
width: 35px;
|
|
height: 35px;
|
|
border-radius: 50%;
|
|
background: #da251c;
|
|
color: #fff;
|
|
text-align: center;
|
|
line-height: 36px;
|
|
font-size: 9px;
|
|
font-weight: 700;
|
|
&::before {
|
|
position: absolute;
|
|
content: "";
|
|
width: 30px;
|
|
height: 30px;
|
|
border: 1px dashed #fff;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
.icon-save {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
}
|
|
.icon-remove {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
}
|
|
}
|
|
.name-product {
|
|
font-weight: 700;
|
|
font-size: 13px;
|
|
color: #000;
|
|
margin-bottom: 5px;
|
|
&:hover {
|
|
color: var(--color-title);
|
|
}
|
|
}
|
|
.price {
|
|
font-weight: 700;
|
|
font-size: 15px;
|
|
color: #d80a00;
|
|
}
|
|
.old-price {
|
|
font-size: 15px;
|
|
color: #b0b0b0;
|
|
}
|
|
.box-shop {
|
|
width: 24px;
|
|
height: 24px;
|
|
background: #ff7a00;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.icon_2025.shop {
|
|
width: 15px;
|
|
height: 19px;
|
|
background-position: -49px -23px;
|
|
background-size: 160px 180px;
|
|
filter: brightness(0) invert(1);
|
|
}
|
|
}
|
|
.summary {
|
|
margin-bottom: 5px;
|
|
color: #595959;
|
|
}
|
|
&.save {
|
|
.icon-save {
|
|
right: 30px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.swiper-button-next,
|
|
.swiper-button-prev {
|
|
width: 40px;
|
|
height: 40px;
|
|
background: #fff;
|
|
border-radius: 50%;
|
|
border: 1px solid #d9d9d9;
|
|
}
|
|
.swiper-button-next:after,
|
|
.swiper-button-prev:after {
|
|
font-size: 16px;
|
|
color: #000;
|
|
}
|
|
|
|
.homepage {
|
|
.box-category-homepage {
|
|
.swiper-wrapper {
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
.swiper-slide {
|
|
margin-top: 0 !important;
|
|
margin-bottom: 20px;
|
|
}
|
|
.swiper-pagination {
|
|
bottom: 0;
|
|
}
|
|
}
|
|
.box-menu-homepage {
|
|
.faq {
|
|
width: 24px;
|
|
height: 24px;
|
|
background-size: 130px 52px;
|
|
background-position: -82px 1px;
|
|
filter: brightness(0) saturate(100%);
|
|
}
|
|
}
|
|
}
|
|
#main-menu {
|
|
.faq {
|
|
width: 24px;
|
|
height: 24px;
|
|
background-size: 130px 52px;
|
|
background-position: -82px 1px;
|
|
filter: brightness(0) saturate(100%);
|
|
}
|
|
.product {
|
|
width: 24px;
|
|
height: 24px;
|
|
background-size: 125px 52px;
|
|
background-position: -27px 2px;
|
|
filter: brightness(0) saturate(100%);
|
|
}
|
|
}
|
|
|
|
.item-article {
|
|
display: flex;
|
|
padding-bottom: 12px;
|
|
margin-bottom: 12px;
|
|
border-bottom: 1px solid #efefef;
|
|
align-items: flex-start;
|
|
.image-article {
|
|
width: 80px;
|
|
margin-right: 10px;
|
|
display: block;
|
|
margin-top: 4px;
|
|
img {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
transform: translatey(0);
|
|
transition: 0.2s all ease-in;
|
|
}
|
|
}
|
|
.info {
|
|
width: calc(100% - 90px);
|
|
}
|
|
.name-article {
|
|
font-weight: bold;
|
|
font-size: 15px;
|
|
color: #000;
|
|
margin-bottom: 3px;
|
|
&:hover {
|
|
color: var(--color-title);
|
|
}
|
|
}
|
|
.summary {
|
|
margin-bottom: 3px;
|
|
font-size: 13px;
|
|
color: #161616;
|
|
}
|
|
.link-article {
|
|
margin-top: 5px;
|
|
color: var(--color-global);
|
|
text-decoration: underline;
|
|
font-size: 13px;
|
|
}
|
|
}
|
|
|
|
.item-classifieds {
|
|
display: flex;
|
|
padding-bottom: 10px;
|
|
margin-bottom: 10px;
|
|
border-bottom: 1px solid #efefef;
|
|
align-items: flex-start;
|
|
.image-classifieds {
|
|
width: 80px;
|
|
margin-right: 10px;
|
|
display: block;
|
|
margin-top: 4px;
|
|
img {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
transform: translatey(0);
|
|
transition: 0.2s all ease-in;
|
|
}
|
|
}
|
|
.info {
|
|
width: calc(100% - 90px);
|
|
}
|
|
.summary {
|
|
font-size: 15px;
|
|
margin-bottom: 5px;
|
|
}
|
|
.name-classifieds {
|
|
font-weight: bold;
|
|
font-size: 15px;
|
|
}
|
|
.price {
|
|
font-weight: bold;
|
|
font-size: 18px;
|
|
color: #d80a00;
|
|
}
|
|
}
|
|
|
|
.box-promotions {
|
|
.box-big {
|
|
position: relative;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
&::before {
|
|
position: absolute;
|
|
content: "";
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 52.88%, #000000 100%);
|
|
bottom: 0;
|
|
left: 0;
|
|
}
|
|
&::after {
|
|
position: absolute;
|
|
content: "";
|
|
width: 60px;
|
|
height: 47px;
|
|
background: url(../images/icon-play.png) no-repeat;
|
|
top: 50%;
|
|
left: 50%;
|
|
transition: 0.2s all ease-in;
|
|
transform: translate(-50%, -50%);
|
|
background-size: contain;
|
|
}
|
|
&:hover {
|
|
&::after {
|
|
top: 51%;
|
|
}
|
|
}
|
|
&.active {
|
|
&::after,
|
|
&::before {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.main-footer {
|
|
a {
|
|
display: block;
|
|
margin-bottom: 10px;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
.fix-icon-footer {
|
|
.item {
|
|
&.active,
|
|
&:hover {
|
|
.home {
|
|
background-position: 1px -20px;
|
|
}
|
|
.product {
|
|
background-position: -19px -19px;
|
|
}
|
|
.settings {
|
|
background-position: -40px -19px;
|
|
}
|
|
.faq {
|
|
background-position: -60px -19px;
|
|
}
|
|
.user {
|
|
background-position: -80px -19px;
|
|
}
|
|
span {
|
|
color: var(--color-title);
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.overlay {
|
|
display: none;
|
|
position: fixed;
|
|
height: 100%;
|
|
width: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
background: #00000047;
|
|
border: 1px solid #cecece;
|
|
z-index: 99999;
|
|
}
|
|
.overlay.active {
|
|
display: block;
|
|
}
|
|
#main-menu {
|
|
position: fixed;
|
|
top: 0;
|
|
left: -125%;
|
|
bottom: 0;
|
|
width: 80%;
|
|
background: #fff;
|
|
z-index: 999999;
|
|
transition: all 0.5s ease;
|
|
box-shadow: 4px 0 10px 0 rgba(0, 0, 0, 0.1490196078);
|
|
}
|
|
#main-menu.active {
|
|
left: 0;
|
|
}
|
|
#main-menu .background-menu {
|
|
padding: 12px 10px;
|
|
}
|
|
|
|
.page-product-detail #js-slider-small {
|
|
.item {
|
|
img {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
margin: 0 auto;
|
|
border-radius: 12px;
|
|
}
|
|
}
|
|
.swiper-slide {
|
|
border: 1px solid #b1b1b1;
|
|
width: 100%;
|
|
height: 80px;
|
|
border-radius: 12px;
|
|
}
|
|
.swiper-slide-thumb-active {
|
|
border: 1.5px solid var(--color-title);
|
|
}
|
|
}
|
|
.page-product-detail {
|
|
.box-shop {
|
|
width: 24px;
|
|
height: 24px;
|
|
background: #ff7a00;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.icon_2025.shop {
|
|
width: 15px;
|
|
height: 19px;
|
|
background-position: -49px -23px;
|
|
background-size: 160px 180px;
|
|
filter: brightness(0) invert(1);
|
|
}
|
|
p {
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
.box-summary {
|
|
font-size: 16px;
|
|
li {
|
|
list-style: inside;
|
|
}
|
|
}
|
|
.box-desc {
|
|
.content {
|
|
width: 100%;
|
|
display: block;
|
|
overflow: hidden;
|
|
position: relative;
|
|
&::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
height: 100px;
|
|
background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(#fff));
|
|
background: linear-gradient(transparent, #fff);
|
|
}
|
|
&.active {
|
|
height: auto !important;
|
|
&::after {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.box-spec {
|
|
.content {
|
|
width: 100%;
|
|
height: 580px;
|
|
display: block;
|
|
overflow: hidden;
|
|
position: relative;
|
|
&::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
height: 100px;
|
|
background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(#fff));
|
|
background: linear-gradient(transparent, #fff);
|
|
}
|
|
&.active {
|
|
height: auto !important;
|
|
&::after {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.more-all {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: #ff7a00;
|
|
padding: 10px 0;
|
|
i {
|
|
margin-bottom: 2px;
|
|
margin-left: 5px;
|
|
}
|
|
.angle-top {
|
|
margin-top: 5px;
|
|
}
|
|
}
|
|
}
|
|
|
|
#backgroundPopup {
|
|
display: none;
|
|
position: fixed;
|
|
height: 100%;
|
|
width: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
background: #00000047;
|
|
border: 1px solid #cecece;
|
|
z-index: 99;
|
|
&.active {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.rating-selection {
|
|
float: left;
|
|
display: inline;
|
|
}
|
|
|
|
.rating-selection input {
|
|
float: right;
|
|
width: 15px;
|
|
height: 15px;
|
|
padding: 0;
|
|
margin: 0 0 0 -15px;
|
|
opacity: 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.rating-selection .rating-star {
|
|
position: relative;
|
|
float: right;
|
|
display: block;
|
|
width: 28px;
|
|
height: 26px;
|
|
background: url(../images/star_min.png) 0 -33px;
|
|
cursor: pointer;
|
|
margin-right: 7px;
|
|
}
|
|
|
|
.rating-selection .rating-star:hover {
|
|
background-position: 0 0;
|
|
}
|
|
|
|
.rating-selection .rating-star:hover,
|
|
.rating-star:hover ~ .rating-star {
|
|
background-position: 0 0;
|
|
}
|
|
|
|
.rating-selection .rating:hover .rating-star:hover,
|
|
.rating:hover .rating-star:hover ~ .rating-star,
|
|
.rating-input:checked ~ .rating-star {
|
|
background-position: 0 0;
|
|
}
|
|
|
|
.form-input {
|
|
input,
|
|
textarea {
|
|
width: 100%;
|
|
height: 44px;
|
|
padding: 0 20px;
|
|
border-radius: 4px;
|
|
border: 1px solid #c1c1c1;
|
|
font-size: 13px;
|
|
color: #9c9c9c;
|
|
&:focus {
|
|
outline: 2px solid var(--color-global);
|
|
border: none;
|
|
}
|
|
}
|
|
textarea {
|
|
height: 100px;
|
|
padding: 15px 20px;
|
|
resize: none;
|
|
}
|
|
}
|
|
|
|
.table table {
|
|
width: 100%;
|
|
}
|
|
.table td {
|
|
padding: 14px 20px;
|
|
}
|
|
.table td:first-child {
|
|
width: 230px;
|
|
font-weight: bold;
|
|
font-weight: inherit;
|
|
}
|
|
.table tr {
|
|
background: #f3f3f3;
|
|
}
|
|
.table tr:nth-child(2n + 1) {
|
|
background: #fff;
|
|
}
|
|
|
|
.nd {
|
|
p,
|
|
span {
|
|
line-height: 23px;
|
|
margin-bottom: 10px;
|
|
}
|
|
ul {
|
|
margin-top: 10px;
|
|
}
|
|
li {
|
|
list-style: inside;
|
|
}
|
|
}
|
|
|
|
#backgroundPopup {
|
|
display: none;
|
|
position: fixed;
|
|
height: 100%;
|
|
width: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
background: #000000cc;
|
|
border: 1px solid #cecece;
|
|
z-index: 99;
|
|
&.active {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.select-arrow {
|
|
position: relative;
|
|
background: #fff;
|
|
height: 40px;
|
|
border: 1px solid #d5d5d5;
|
|
border-radius: 4px;
|
|
line-height: 40px;
|
|
select {
|
|
position: relative;
|
|
appearance: none;
|
|
border: 0;
|
|
background: transparent;
|
|
outline: 0;
|
|
width: 100%;
|
|
padding: 0 30px 0 10px;
|
|
z-index: 2;
|
|
}
|
|
&::before {
|
|
position: absolute;
|
|
content: "";
|
|
right: 10px;
|
|
top: 15px;
|
|
z-index: 1;
|
|
width: 16px;
|
|
height: 8px;
|
|
background: #777777;
|
|
clip-path: polygon(50% 100%, 0 0, 100% 0);
|
|
}
|
|
}
|