Skip to content

Commit

Permalink
feat: Add checkmark feature and improve component clarity
Browse files Browse the repository at this point in the history
  • Loading branch information
@Matei-Iordache
Matei-Iordache committed Aug 23, 2024
1 parent 6bcb1c9 commit a34e1ea
Showing 1 changed file with 88 additions and 31 deletions.
119 changes: 88 additions & 31 deletions _src/blocks/new-prod-boxes/new-prod-boxes.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,18 +39,21 @@
margin: auto;
margin-bottom: 20px;
}

.new-prod-boxes-container .new-prod-boxes {
margin: 0 auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.new-prod-boxes-container .new-prod-boxes .prod_box {
flex: 1;
max-width: 410px;
margin: 8px;
}

.new-prod-boxes-container .new-prod-boxes .prod_box .inner_prod_box {
position: relative;
height: 100%;
Expand All @@ -59,6 +62,7 @@
padding: 25px;
margin: 0 auto;
}

.new-prod-boxes-container .new-prod-boxes .prod_box .inner_prod_box .greenTag2 {
height: 30px;
max-width: 350px;
Expand All @@ -75,6 +79,7 @@
left: 7%;
box-sizing: content-box;
}

.new-prod-boxes-container .new-prod-boxes .prod_box .inner_prod_box h2 {
font-weight: bold;
font-size: 24px;
Expand All @@ -83,13 +88,16 @@
margin-top: 10px;
margin-bottom: 4px;
}

.new-prod-boxes-container .new-prod-boxes .prod_box .inner_prod_box h2 a {
transition: all 0.5s ease;
}

.new-prod-boxes-container .new-prod-boxes .prod_box .inner_prod_box h2 a:hover {
text-decoration: none;
transition: all 0.5s ease;
}

.new-prod-boxes-container .new-prod-boxes .prod_box .inner_prod_box .blueTag {
font-size: var(--body-font-size-xs);
font-family: Arial, sans-serif;
Expand All @@ -100,23 +108,28 @@
border-radius: 20px;
padding: 6px 16px;
}

.new-prod-boxes-container .new-prod-boxes .prod_box .inner_prod_box .blueTag div {
display: flex;
}

.new-prod-boxes-container .new-prod-boxes .prod_box .inner_prod_box .blueTag img {
height: 14px;
margin-right: 5px;
margin-top: -5px;
}

.new-prod-boxes-container .new-prod-boxes .prod_box .inner_prod_box .subtitle {
font-size: clamp(10px, 14px, 14px);
font-family: Arial, sans-serif;
margin-bottom: 0;
line-height: 1.25;
}

.new-prod-boxes-container .new-prod-boxes .prod_box .inner_prod_box .subtitle.fixed_height {
min-height: 80px;
}

.new-prod-boxes-container .new-prod-boxes .prod_box .inner_prod_box hr {
border: 1px solid #D1D1D1;
margin: 10px 0;
Expand All @@ -136,12 +149,14 @@
align-items: center;
margin-bottom: 8px;
}

.new-prod-boxes-container .new-prod-boxes .prod_box .inner_prod_box .save_price_box .prod-oldprice {
font-size: var(--heading-font-size-xs);
line-height: var(--heading-font-size-xs);
text-decoration: line-through;
margin-right: 10px;
}

.new-prod-boxes-container .new-prod-boxes .prod_box .inner_prod_box .save_price_box .prod-percent {
font-size: 13px;
line-height: 15px;
Expand All @@ -150,25 +165,30 @@
border-radius: 11px;
padding: 4px 10px;
}

.new-prod-boxes-container .new-prod-boxes .prod_box .inner_prod_box .prices_box {
display: flex;
justify-content: left;
}

.new-prod-boxes-container .new-prod-boxes .prod_box .inner_prod_box .prices_box .prod-newprice {
font-size: var(--heading-font-size-xl);
line-height: var(--heading-font-size-xl);
}

.new-prod-boxes-container .new-prod-boxes .prod_box .inner_prod_box .prices_box sup {
margin: 15px 0 0 5px;
font-size: var(--heading-font-size-s);
line-height: var(--heading-font-size-s);
}

.new-prod-boxes-container .new-prod-boxes .prod_box .inner_prod_box .billed {
font-size: 12px;
font-family: Arial, sans-serif;
line-height: 13px;
margin: 7px 0;
}

.new-prod-boxes-container .new-prod-boxes .prod_box .inner_prod_box .buy-btn a.red-buy-button {
width: 100%;
text-transform: none;
Expand All @@ -177,23 +197,28 @@
font-weight: 500 !important;
padding: 10px 1% !important;
}

.new-prod-boxes-container .new-prod-boxes .prod_box .inner_prod_box .undeBuyLink {
font-size: 12px;
font-family: Arial, sans-serif;
line-height: 13px;
margin: 7px 0;
}

.new-prod-boxes-container .new-prod-boxes .prod_box .inner_prod_box .benefitsLists {
font-family: Arial, sans-serif;
color: transparent;
}

.new-prod-boxes-container .new-prod-boxes .prod_box .inner_prod_box .benefitsLists p {
margin: 0;
}

.new-prod-boxes-container .new-prod-boxes .prod_box .inner_prod_box .benefitsLists u {
font-size: var(--body-font-size-xs);
text-decoration: none;
}

.new-prod-boxes-container .new-prod-boxes .prod_box .inner_prod_box .benefitsLists ul {
margin: 0;
margin-bottom: -5px;
Expand All @@ -214,6 +239,40 @@
font-family: Arial, sans-serif;
margin-bottom: 0.5rem;
}

.new-prod-boxes-container {
.new-prod-boxes {
.prod_box {
.inner_prod_box {
.benefitsLists {
ul {
&.checkmark-list {
background-color: #E7E7E7;
padding: 13px 48px 16px 10px;
filter: grayscale(1);
border-radius: 8px;
li {
&:first-of-type {
display: flex;
align-items: center;
font-weight: normal;
font-size: 14px;

.checkmark {
width: 16px;
height: 16px;
margin: 0 16px 0 0;
}
}
}
}
}
}
}
}
}
}

.new-prod-boxes-container .new-prod-boxes .prod_box .inner_prod_box .benefitsLists ul li:first-of-type.has_arrow::before {
content: "";
margin: 0 5px 20px 0;
Expand All @@ -223,6 +282,7 @@
background-size: 15px 12px;
float: left;
}

.new-prod-boxes-container .new-prod-boxes .prod_box .inner_prod_box .benefitsLists ul li:first-of-type.has_arrow_right .arrow-right {
background: url("https://bitdefender.com/icons/arrow-right-solid.svg") no-repeat center transparent;
width: 20px;
Expand All @@ -232,6 +292,7 @@
top: 4px;
display: inline-flex;
}

.new-prod-boxes-container .new-prod-boxes .prod_box .inner_prod_box .benefitsLists ul li:not(:first-of-type) {
font-size: 14px;
line-height: 17px;
Expand All @@ -242,7 +303,8 @@
background-size: 13px;
position: relative;
}
.new-prod-boxes-container .new-prod-boxes .prod_box .inner_prod_box .benefitsLists ul li:not(:first-of-type) > span:last-of-type {

.new-prod-boxes-container .new-prod-boxes .prod_box .inner_prod_box .benefitsLists ul li:not(:first-of-type)>span:last-of-type {
position: absolute;
background-color: white;
padding: 10px;
Expand All @@ -255,7 +317,8 @@
box-shadow: 4px 4px 7px -8px #000;
display: none;
}
.new-prod-boxes-container .new-prod-boxes .prod_box .inner_prod_box .benefitsLists ul li:not(:first-of-type) > span:last-of-type::before {

.new-prod-boxes-container .new-prod-boxes .prod_box .inner_prod_box .benefitsLists ul li:not(:first-of-type)>span:last-of-type::before {
content: "";
position: absolute;
left: 17px;
Expand All @@ -264,9 +327,11 @@
border-style: solid;
border-color: white transparent transparent;
}
.new-prod-boxes-container .new-prod-boxes .prod_box .inner_prod_box .benefitsLists ul li:not(:first-of-type):hover > span:last-of-type {

.new-prod-boxes-container .new-prod-boxes .prod_box .inner_prod_box .benefitsLists ul li:not(:first-of-type):hover>span:last-of-type {
display: block;
}

.new-prod-boxes-container .new-prod-boxes .prod_box .inner_prod_box .benefitsLists ul li:not(:first-of-type) u {
font-size: 14px;
font-weight: bold;
Expand All @@ -276,12 +341,15 @@
background: url("https://bitdefender.com/pages/images/icons/individual.svg") center right 6px no-repeat #026DFF;
background-size: auto 12px;
}

.new-prod-boxes-container .new-prod-boxes .prod_box .inner_prod_box .benefitsLists ul:nth-of-type(2) {
min-height: 5em;
}

.new-prod-boxes-container .new-prod-boxes .prod_box.hasGreenTag {
margin-top: 45px;
}

.new-prod-boxes-container .new-prod-boxes .prod_box.hasGreenTag .inner_prod_box {
box-shadow: 0 3px 7px 0 #C1C1C1;
}
Expand All @@ -290,17 +358,21 @@
font-size: 16px;
text-decoration: line-through;
}

.new-prod-boxes-container .prod-save {
color: #1C7928;
font-weight: bold;
}

.new-prod-boxes-container .prod-newprice {
font-size: 40px;
font-weight: bold;
}

.new-prod-boxes-container .newprice-container {
line-height: 1;
}

.new-prod-boxes-container .newprice-container sup {
position: relative;
top: -20px;
Expand Down Expand Up @@ -365,7 +437,7 @@
border: 2px solid #006EFF !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
text-overflow: ellipsis !important;
border-radius: 8px !important;
height: fit-content !important;
}
Expand Down Expand Up @@ -452,7 +524,7 @@
transition: all 0.4s;
}

.switch input:checked + .slider {
.switch input:checked+.slider {
transform: translateX(149px);
}

Expand All @@ -476,36 +548,36 @@
z-index: 10;
}

.switch input:checked ~ .label.right {
.switch input:checked~.label.right {
transition: color 0.4s;
color: white !important;
}

.switch input ~ .label .icon {
.switch input~.label .icon {
position: relative;
margin-right: 10px;
top: 2px;
}

.switch input ~ .label .icon svg {
.switch input~.label .icon svg {
width: 14px;
height: 16px;
}

.switch input ~ .label.right .icon svg {
.switch input~.label.right .icon svg {
fill: #026DFF;
}

.switch input:checked ~ .label.right .icon svg {
.switch input:checked~.label.right .icon svg {
fill: white;
}

.switch input:checked ~ .label.left {
.switch input:checked~.label.left {
transition: color 0.4s;
color: black;
}

.switch input:checked ~ .label.left .icon svg {
.switch input:checked~.label.left .icon svg {
fill: #026DFF;
}

Expand Down Expand Up @@ -556,31 +628,16 @@
transition: all 250ms ease;
}

.plan-switcher input[type=radio]:checked + .radio-label:before {
.plan-switcher input[type=radio]:checked+.radio-label:before {
background-color: #3197EE;
box-shadow: inset 0 0 0 4px #f4f4f4;
}
.plan-switcher input[type=radio]:focus + .radio-label:before {

.plan-switcher input[type=radio]:focus+.radio-label:before {
outline: none;
border-color: #3197EE;
}

.new-prod-boxes {
.checkmark-list {
li:first-of-type {
display: flex;
align-items: center;
font-weight: normal;

.checkmark {
width: 16px;
height: 16px;
margin: 0 16px 0 0;
}
}
}
}

@media (min-width: 768px) {
.new-prod-boxes-container .new-prod-boxes {
flex-direction: row;
Expand Down Expand Up @@ -608,4 +665,4 @@
padding-left: 20px;
padding-right: 20px;
}
}
}

0 comments on commit a34e1ea

Please sign in to comment.