Better UI for brands
This commit is contained in:
Julien Chanséaume
committed by
Julien Chanseaume
Julien Chanseaume
parent
09c124c6ae
commit
0610b8037a
@@ -5174,7 +5174,7 @@ body.modal-open,
|
||||
left: 100%;
|
||||
}
|
||||
.carousel-inner > .prev {
|
||||
left: -99.99999999%;
|
||||
left: -100%;
|
||||
}
|
||||
.carousel-inner > .next.left,
|
||||
.carousel-inner > .prev.right {
|
||||
@@ -8282,10 +8282,6 @@ fieldset[disabled] .checkout-progress .btn-step.active {
|
||||
.table-cart-total td {
|
||||
width: 50%;
|
||||
}
|
||||
.table-cart-total td.shipping .price {
|
||||
color: #7a7a7a;
|
||||
font-size: 19px;
|
||||
}
|
||||
.table-cart-total td.total .price {
|
||||
font-size: 19px;
|
||||
}
|
||||
@@ -8778,7 +8774,7 @@ td.navbar .navbar-brand {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.block .block-content .block-subtitle {
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
/*border-bottom: 1px solid @block-subheading-border;*/
|
||||
color: #f49a17;
|
||||
font-size: 16px;
|
||||
font-weight: 300;
|
||||
@@ -11171,8 +11167,6 @@ textarea.option .option-content .form-control {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
#folder-contents .contents > ul {
|
||||
margin-left: -15px;
|
||||
margin-right: -15px;
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
}
|
||||
@@ -11205,197 +11199,72 @@ textarea.option .option-content .form-control {
|
||||
filter: alpha(opacity=100);
|
||||
}
|
||||
}
|
||||
#folder-contents .contents > ul:before,
|
||||
#folder-contents .contents > ul:after {
|
||||
content: " ";
|
||||
/* 1 */
|
||||
display: table;
|
||||
/* 2 */
|
||||
}
|
||||
#folder-contents .contents > ul:after {
|
||||
clear: both;
|
||||
}
|
||||
#folder-contents .contents > ul:before,
|
||||
#folder-contents .contents > ul:after {
|
||||
content: " ";
|
||||
/* 1 */
|
||||
display: table;
|
||||
/* 2 */
|
||||
}
|
||||
#folder-contents .contents > ul:after {
|
||||
clear: both;
|
||||
}
|
||||
#folder-contents .contents > ul .item {
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
#folder-contents .contents > ul .item + .item {
|
||||
border-top: 1px solid #ededed;
|
||||
padding-top: 15px;
|
||||
}
|
||||
#folder-contents .contents > ul .item > article {
|
||||
margin-left: -15px;
|
||||
margin-right: -15px;
|
||||
margin-left: 0;
|
||||
}
|
||||
#folder-contents .contents > ul .item > article:before,
|
||||
#folder-contents .contents > ul .item > article:after {
|
||||
content: " ";
|
||||
/* 1 */
|
||||
display: table;
|
||||
/* 2 */
|
||||
}
|
||||
#folder-contents .contents > ul .item > article:after {
|
||||
clear: both;
|
||||
}
|
||||
#folder-contents .contents > ul .item > article:before,
|
||||
#folder-contents .contents > ul .item > article:after {
|
||||
content: " ";
|
||||
/* 1 */
|
||||
display: table;
|
||||
/* 2 */
|
||||
}
|
||||
#folder-contents .contents > ul .item > article:after {
|
||||
clear: both;
|
||||
}
|
||||
#folder-contents .contents > ul .item > article .content-image {
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
margin-bottom: 15px;
|
||||
padding: 0;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
#folder-contents .contents > ul .item > article .content-image {
|
||||
float: left;
|
||||
width: 16.66666667%;
|
||||
}
|
||||
}
|
||||
#folder-contents .contents > ul .item > article .content-image > img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
width: 100%;
|
||||
}
|
||||
#folder-contents .contents > ul .item > article .content-info {
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
#folder-contents .contents > ul .item {
|
||||
#folder-contents .contents > ul .item > article .content-info {
|
||||
float: left;
|
||||
width: 33.33333333%;
|
||||
width: 58.33333333%;
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
#folder-contents .contents > ul .item {
|
||||
float: left;
|
||||
width: 33.33333333%;
|
||||
}
|
||||
}
|
||||
#folder-contents .contents > ul .item:before,
|
||||
#folder-contents .contents > ul .item:after {
|
||||
content: " ";
|
||||
/* 1 */
|
||||
display: table;
|
||||
/* 2 */
|
||||
}
|
||||
#folder-contents .contents > ul .item:after {
|
||||
clear: both;
|
||||
}
|
||||
#folder-contents .contents > ul .item:before,
|
||||
#folder-contents .contents > ul .item:after {
|
||||
content: " ";
|
||||
/* 1 */
|
||||
display: table;
|
||||
/* 2 */
|
||||
}
|
||||
#folder-contents .contents > ul .item:after {
|
||||
clear: both;
|
||||
}
|
||||
#folder-contents .contents > ul.content-col-2 > .item {
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
#folder-contents .contents > ul.content-col-2 > .item {
|
||||
float: left;
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
#folder-contents .contents > ul.content-col-3 > .item {
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
#folder-contents .contents > ul.content-col-3 > .item {
|
||||
float: left;
|
||||
width: 33.33333333%;
|
||||
}
|
||||
}
|
||||
#folder-contents .contents > ul.content-col-4 > .item {
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
#folder-contents .contents > ul.content-col-4 > .item {
|
||||
float: left;
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
#folder-contents .contents > ul.content-col-5 > .item {
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
#folder-contents .contents > ul.content-col-5 > .item {
|
||||
float: left;
|
||||
width: 20%;
|
||||
}
|
||||
}
|
||||
#folder-contents .contents > ul.content-col-6 > .item {
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
#folder-contents .contents > ul.content-col-6 > .item {
|
||||
float: left;
|
||||
width: 16.66666667%;
|
||||
}
|
||||
}
|
||||
#folder-contents .contents > ul .item {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
#folder-contents .contents > ul .item .content-image > img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
width: 100%;
|
||||
}
|
||||
#folder-contents .contents > ul .item .content-info .name {
|
||||
margin: 4px 0;
|
||||
}
|
||||
#folder-contents .contents > ul .item .content-info .description {
|
||||
display: none !important;
|
||||
}
|
||||
tr#folder-contents .contents > ul .item .content-info .description {
|
||||
display: none !important;
|
||||
}
|
||||
th#folder-contents .contents > ul .item .content-info .description,
|
||||
td#folder-contents .contents > ul .item .content-info .description {
|
||||
display: none !important;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
#folder-contents .contents > ul .item .content-info .description {
|
||||
display: block !important;
|
||||
}
|
||||
tr#folder-contents .contents > ul .item .content-info .description {
|
||||
display: table-row !important;
|
||||
}
|
||||
th#folder-contents .contents > ul .item .content-info .description,
|
||||
td#folder-contents .contents > ul .item .content-info .description {
|
||||
display: table-cell !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
#folder-contents .contents > ul .item .content-info .description.visible-sm {
|
||||
display: block !important;
|
||||
}
|
||||
tr#folder-contents .contents > ul .item .content-info .description.visible-sm {
|
||||
display: table-row !important;
|
||||
}
|
||||
th#folder-contents .contents > ul .item .content-info .description.visible-sm,
|
||||
td#folder-contents .contents > ul .item .content-info .description.visible-sm {
|
||||
display: table-cell !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) and (max-width: 1199px) {
|
||||
#folder-contents .contents > ul .item .content-info .description.visible-md {
|
||||
display: block !important;
|
||||
}
|
||||
tr#folder-contents .contents > ul .item .content-info .description.visible-md {
|
||||
display: table-row !important;
|
||||
}
|
||||
th#folder-contents .contents > ul .item .content-info .description.visible-md,
|
||||
td#folder-contents .contents > ul .item .content-info .description.visible-md {
|
||||
display: table-cell !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
#folder-contents .contents > ul .item .content-info .description.visible-lg {
|
||||
display: block !important;
|
||||
}
|
||||
tr#folder-contents .contents > ul .item .content-info .description.visible-lg {
|
||||
display: table-row !important;
|
||||
}
|
||||
th#folder-contents .contents > ul .item .content-info .description.visible-lg,
|
||||
td#folder-contents .contents > ul .item .content-info .description.visible-lg {
|
||||
display: table-cell !important;
|
||||
}
|
||||
}
|
||||
#folder-contents .contents > ul .item .content-info .short-description {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
#folder-contents .contents > ul .item > article .content-info .name {
|
||||
margin-top: 0;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.contents-grid .content-image,
|
||||
@@ -11632,6 +11501,9 @@ td.contents-grid .item .content-info .description {
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.contents-list .item {
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
.contents-list .item + .item {
|
||||
border-top: 1px solid #ededed;
|
||||
padding-top: 15px;
|
||||
@@ -11672,7 +11544,7 @@ td.contents-grid .item .content-info .description {
|
||||
@media (min-width: 768px) {
|
||||
.contents-list .item > article .content-image {
|
||||
float: left;
|
||||
width: 25%;
|
||||
width: 16.66666667%;
|
||||
}
|
||||
}
|
||||
.contents-list .item > article .content-image > img {
|
||||
@@ -11690,12 +11562,417 @@ td.contents-grid .item .content-info .description {
|
||||
@media (min-width: 768px) {
|
||||
.contents-list .item > article .content-info {
|
||||
float: left;
|
||||
width: 50%;
|
||||
width: 58.33333333%;
|
||||
}
|
||||
}
|
||||
.contents-list .item > article .content-info .name {
|
||||
margin-top: 0;
|
||||
}
|
||||
.brand-description {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
#brands .brands > ul {
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
#brands .brands > ul .brand-image {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
#brands .brands > ul .brand-image > .mask {
|
||||
background-color: #f49a17;
|
||||
background-color: rgba(244, 154, 23, 0.4);
|
||||
display: block;
|
||||
opacity: 0;
|
||||
filter: alpha(opacity=0);
|
||||
overflow: visible;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
visibility: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-webkit-transition: opacity 300ms ease-in-out 50ms;
|
||||
transition: opacity 300ms ease-in-out 50ms;
|
||||
}
|
||||
#brands .brands > ul .brand-image:hover .mask,
|
||||
#brands .brands > ul .brand-image:focus .mask {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
filter: alpha(opacity=100);
|
||||
}
|
||||
}
|
||||
#brands .brands > ul .item {
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
#brands .brands > ul .item + .item {
|
||||
border-top: 1px solid #ededed;
|
||||
padding-top: 15px;
|
||||
}
|
||||
#brands .brands > ul .item > article {
|
||||
margin-left: -15px;
|
||||
margin-right: -15px;
|
||||
margin-left: 0;
|
||||
}
|
||||
#brands .brands > ul .item > article:before,
|
||||
#brands .brands > ul .item > article:after {
|
||||
content: " ";
|
||||
/* 1 */
|
||||
display: table;
|
||||
/* 2 */
|
||||
}
|
||||
#brands .brands > ul .item > article:after {
|
||||
clear: both;
|
||||
}
|
||||
#brands .brands > ul .item > article:before,
|
||||
#brands .brands > ul .item > article:after {
|
||||
content: " ";
|
||||
/* 1 */
|
||||
display: table;
|
||||
/* 2 */
|
||||
}
|
||||
#brands .brands > ul .item > article:after {
|
||||
clear: both;
|
||||
}
|
||||
#brands .brands > ul .item > article .brand-image {
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
margin-bottom: 15px;
|
||||
padding: 0;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
#brands .brands > ul .item > article .brand-image {
|
||||
float: left;
|
||||
width: 16.66666667%;
|
||||
}
|
||||
}
|
||||
#brands .brands > ul .item > article .brand-image > img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
width: 100%;
|
||||
}
|
||||
#brands .brands > ul .item > article .brand-info {
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
#brands .brands > ul .item > article .brand-info {
|
||||
float: left;
|
||||
width: 58.33333333%;
|
||||
}
|
||||
}
|
||||
#brands .brands > ul .item > article .brand-info .name {
|
||||
margin-top: 0;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.brands-grid .brand-image,
|
||||
.brands-list .brand-image {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.brands-grid .brand-image > .mask,
|
||||
.brands-list .brand-image > .mask {
|
||||
background-color: #f49a17;
|
||||
background-color: rgba(244, 154, 23, 0.4);
|
||||
display: block;
|
||||
opacity: 0;
|
||||
filter: alpha(opacity=0);
|
||||
overflow: visible;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
visibility: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-webkit-transition: opacity 300ms ease-in-out 50ms;
|
||||
transition: opacity 300ms ease-in-out 50ms;
|
||||
}
|
||||
.brands-grid .brand-image:hover .mask,
|
||||
.brands-list .brand-image:hover .mask,
|
||||
.brands-grid .brand-image:focus .mask,
|
||||
.brands-list .brand-image:focus .mask {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
filter: alpha(opacity=100);
|
||||
}
|
||||
}
|
||||
.brands-grid {
|
||||
margin-left: -15px;
|
||||
margin-right: -15px;
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.brands-grid:before,
|
||||
.brands-grid:after {
|
||||
content: " ";
|
||||
/* 1 */
|
||||
display: table;
|
||||
/* 2 */
|
||||
}
|
||||
.brands-grid:after {
|
||||
clear: both;
|
||||
}
|
||||
.brands-grid:before,
|
||||
.brands-grid:after {
|
||||
content: " ";
|
||||
/* 1 */
|
||||
display: table;
|
||||
/* 2 */
|
||||
}
|
||||
.brands-grid:after {
|
||||
clear: both;
|
||||
}
|
||||
.brands-grid .item {
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.brands-grid .item {
|
||||
float: left;
|
||||
width: 33.33333333%;
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.brands-grid .item {
|
||||
float: left;
|
||||
width: 33.33333333%;
|
||||
}
|
||||
}
|
||||
.brands-grid .item:before,
|
||||
.brands-grid .item:after {
|
||||
content: " ";
|
||||
/* 1 */
|
||||
display: table;
|
||||
/* 2 */
|
||||
}
|
||||
.brands-grid .item:after {
|
||||
clear: both;
|
||||
}
|
||||
.brands-grid .item:before,
|
||||
.brands-grid .item:after {
|
||||
content: " ";
|
||||
/* 1 */
|
||||
display: table;
|
||||
/* 2 */
|
||||
}
|
||||
.brands-grid .item:after {
|
||||
clear: both;
|
||||
}
|
||||
.brands-grid.content-col-2 > .item {
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.brands-grid.content-col-2 > .item {
|
||||
float: left;
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
.brands-grid.content-col-3 > .item {
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.brands-grid.content-col-3 > .item {
|
||||
float: left;
|
||||
width: 33.33333333%;
|
||||
}
|
||||
}
|
||||
.brands-grid.content-col-4 > .item {
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.brands-grid.content-col-4 > .item {
|
||||
float: left;
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
.brands-grid.content-col-5 > .item {
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.brands-grid.content-col-5 > .item {
|
||||
float: left;
|
||||
width: 20%;
|
||||
}
|
||||
}
|
||||
.brands-grid.content-col-6 > .item {
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.brands-grid.content-col-6 > .item {
|
||||
float: left;
|
||||
width: 16.66666667%;
|
||||
}
|
||||
}
|
||||
.brands-grid .item {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.brands-grid .item .brand-image > img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
width: 100%;
|
||||
}
|
||||
.brands-grid .item .brand-info .name {
|
||||
margin: 4px 0;
|
||||
}
|
||||
.brands-grid .item .brand-info .description {
|
||||
display: none !important;
|
||||
}
|
||||
tr.brands-grid .item .brand-info .description {
|
||||
display: none !important;
|
||||
}
|
||||
th.brands-grid .item .brand-info .description,
|
||||
td.brands-grid .item .brand-info .description {
|
||||
display: none !important;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.brands-grid .item .brand-info .description {
|
||||
display: block !important;
|
||||
}
|
||||
tr.brands-grid .item .brand-info .description {
|
||||
display: table-row !important;
|
||||
}
|
||||
th.brands-grid .item .brand-info .description,
|
||||
td.brands-grid .item .brand-info .description {
|
||||
display: table-cell !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
.brands-grid .item .brand-info .description.visible-sm {
|
||||
display: block !important;
|
||||
}
|
||||
tr.brands-grid .item .brand-info .description.visible-sm {
|
||||
display: table-row !important;
|
||||
}
|
||||
th.brands-grid .item .brand-info .description.visible-sm,
|
||||
td.brands-grid .item .brand-info .description.visible-sm {
|
||||
display: table-cell !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) and (max-width: 1199px) {
|
||||
.brands-grid .item .brand-info .description.visible-md {
|
||||
display: block !important;
|
||||
}
|
||||
tr.brands-grid .item .brand-info .description.visible-md {
|
||||
display: table-row !important;
|
||||
}
|
||||
th.brands-grid .item .brand-info .description.visible-md,
|
||||
td.brands-grid .item .brand-info .description.visible-md {
|
||||
display: table-cell !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
.brands-grid .item .brand-info .description.visible-lg {
|
||||
display: block !important;
|
||||
}
|
||||
tr.brands-grid .item .brand-info .description.visible-lg {
|
||||
display: table-row !important;
|
||||
}
|
||||
th.brands-grid .item .brand-info .description.visible-lg,
|
||||
td.brands-grid .item .brand-info .description.visible-lg {
|
||||
display: table-cell !important;
|
||||
}
|
||||
}
|
||||
.brands-grid .item .brand-info .short-description {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.brands-list {
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.brands-list .item {
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
.brands-list .item + .item {
|
||||
border-top: 1px solid #ededed;
|
||||
padding-top: 15px;
|
||||
}
|
||||
.brands-list .item > article {
|
||||
margin-left: -15px;
|
||||
margin-right: -15px;
|
||||
margin-left: 0;
|
||||
}
|
||||
.brands-list .item > article:before,
|
||||
.brands-list .item > article:after {
|
||||
content: " ";
|
||||
/* 1 */
|
||||
display: table;
|
||||
/* 2 */
|
||||
}
|
||||
.brands-list .item > article:after {
|
||||
clear: both;
|
||||
}
|
||||
.brands-list .item > article:before,
|
||||
.brands-list .item > article:after {
|
||||
content: " ";
|
||||
/* 1 */
|
||||
display: table;
|
||||
/* 2 */
|
||||
}
|
||||
.brands-list .item > article:after {
|
||||
clear: both;
|
||||
}
|
||||
.brands-list .item > article .brand-image {
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
margin-bottom: 15px;
|
||||
padding: 0;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.brands-list .item > article .brand-image {
|
||||
float: left;
|
||||
width: 16.66666667%;
|
||||
}
|
||||
}
|
||||
.brands-list .item > article .brand-image > img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
width: 100%;
|
||||
}
|
||||
.brands-list .item > article .brand-info {
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.brands-list .item > article .brand-info {
|
||||
float: left;
|
||||
width: 58.33333333%;
|
||||
}
|
||||
}
|
||||
.brands-list .item > article .brand-info .name {
|
||||
margin-top: 0;
|
||||
}
|
||||
.page-home #carousel {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
@@ -28,7 +28,7 @@
|
||||
margin-bottom: @line-height-computed;
|
||||
|
||||
.block-subtitle {
|
||||
border-bottom: 1px solid @block-subheading-border;
|
||||
/*border-bottom: 1px solid @block-subheading-border;*/
|
||||
color: @block-subheading-color;
|
||||
font-size: @block-subheading-font-size;
|
||||
font-weight: 300;
|
||||
|
||||
99
templates/frontOffice/default/assets/less/thelia/brand.less
Normal file
99
templates/frontOffice/default/assets/less/thelia/brand.less
Normal file
@@ -0,0 +1,99 @@
|
||||
// Thelia : Brand
|
||||
|
||||
// Brand Info
|
||||
.brand-chapo {}
|
||||
.brand-description {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
// Content List
|
||||
#brands {
|
||||
.brands > ul { .brands-list; }
|
||||
}
|
||||
|
||||
.brands-grid,
|
||||
.brands-list {
|
||||
// Animation
|
||||
@media (min-width: @screen-tablet) {
|
||||
.brand-image {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
> .mask {
|
||||
background-color: @brand-primary;
|
||||
background-color: rgba(red(@brand-primary), green(@brand-primary), blue(@brand-primary), .4);
|
||||
display: block;
|
||||
.opacity(0);
|
||||
overflow: visible;
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
visibility: hidden;
|
||||
width: 100%; height: 100%;
|
||||
.transition(opacity 300ms ease-in-out 50ms);
|
||||
}
|
||||
&:hover,
|
||||
&:focus {
|
||||
.mask {
|
||||
visibility: visible;
|
||||
.opacity(1);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Contents Grid
|
||||
.brands-grid {
|
||||
.make-row();
|
||||
.list-unstyled();
|
||||
.item { .make-sm-column(4); .make-md-column(4); .clearfix(); } // default
|
||||
&.content-col-2 > .item { .make-md-column(6); }
|
||||
&.content-col-3 > .item { .make-md-column(4); }
|
||||
&.content-col-4 > .item { .make-md-column(3); }
|
||||
&.content-col-5 > .item { .make-md-column(2.4); }
|
||||
&.content-col-6 > .item { .make-md-column(2); }
|
||||
|
||||
.item {
|
||||
margin-bottom: @line-height-computed;
|
||||
|
||||
.brand-image {
|
||||
> img { .img-responsive(); width: 100%; }
|
||||
> .mask {}
|
||||
}
|
||||
|
||||
.brand-info {
|
||||
.name { margin: 4px 0; }
|
||||
.description { .visible-xs; }
|
||||
.short-description { display: block; margin-bottom: 5px; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Content List
|
||||
.brands-list {
|
||||
.list-unstyled();
|
||||
.item {
|
||||
padding-bottom: 15px;
|
||||
+ .item { border-top: 1px solid #ededed; padding-top: 15px; }
|
||||
> article {
|
||||
.make-row();
|
||||
margin-left: 0;
|
||||
|
||||
.brand-image {
|
||||
.make-sm-column(2);
|
||||
margin-bottom: 15px; padding: 0;
|
||||
> img { .img-responsive(); width: 100%; }
|
||||
> .mask {}
|
||||
}
|
||||
|
||||
.brand-info {
|
||||
.make-sm-column(7);
|
||||
.name { margin-top: 0; }
|
||||
.description {}
|
||||
.short-description {}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -8,7 +8,7 @@
|
||||
|
||||
// Content List
|
||||
#folder-contents {
|
||||
.contents > ul { .contents-grid; }
|
||||
.contents > ul { .contents-list; }
|
||||
}
|
||||
|
||||
.contents-grid,
|
||||
@@ -75,20 +75,21 @@
|
||||
.contents-list {
|
||||
.list-unstyled();
|
||||
.item {
|
||||
padding-bottom: 15px;
|
||||
+ .item { border-top: 1px solid #ededed; padding-top: 15px; }
|
||||
> article {
|
||||
.make-row();
|
||||
margin-left: 0;
|
||||
|
||||
.content-image {
|
||||
.make-sm-column(3);
|
||||
.make-sm-column(2);
|
||||
margin-bottom: 15px; padding: 0;
|
||||
> img { .img-responsive(); width: 100%; }
|
||||
> .mask {}
|
||||
}
|
||||
|
||||
.content-info {
|
||||
.make-sm-column(6);
|
||||
.make-sm-column(7);
|
||||
.name { margin-top: 0; }
|
||||
.description {}
|
||||
.short-description {}
|
||||
|
||||
@@ -31,6 +31,9 @@
|
||||
// Thelia : Contents
|
||||
@import "folder";
|
||||
|
||||
// Thelia : Brands
|
||||
@import "brand";
|
||||
|
||||
// Thelia : Pages
|
||||
@import "page-home";
|
||||
@import "page-error";
|
||||
|
||||
@@ -1,41 +1,53 @@
|
||||
{extends file="layout.tpl"}
|
||||
|
||||
{block name="init"}
|
||||
{$brand_id={brand attr="id"}}
|
||||
{/block}
|
||||
|
||||
{* Body Class *}
|
||||
{block name="body-class"}page-content{/block}
|
||||
{block name="body-class"}page-brand{/block}
|
||||
|
||||
{* Page Title *}
|
||||
{block name='no-return-functions' append}
|
||||
{loop name="brand.seo.title" type="brand" id="{brand attr="id"}"}
|
||||
{if $brand_id}
|
||||
{loop name="brand.seo.title" type="brand" id=$brand_id limit="1"}
|
||||
{$page_title = {$META_TITLE}}
|
||||
{/loop}
|
||||
{/if}
|
||||
{/block}
|
||||
|
||||
{* Meta *}
|
||||
{block name="meta"}
|
||||
{loop name="brand.seo.meta" type="brand" id="{brand attr="id"}"}
|
||||
{include file="includes/meta-seo.html"}
|
||||
{if $brand_id}
|
||||
{loop name="brand.seo.meta" type="brand" id=$brand_id limit="1"}
|
||||
{include file="includes/meta-seo.html"}
|
||||
{/loop}
|
||||
{/if}
|
||||
{/block}
|
||||
|
||||
{* Feeds *}
|
||||
{block name="feeds"}
|
||||
<link rel="alternate" type="application/rss+xml" title="{intl l='All product in brand %title' title={brand attr='title'}}" href="{url path="/feed/brand/{lang attr='locale'}/{brand attr='id'}"}"/>
|
||||
{if $brand_id}
|
||||
<link rel="alternate" type="application/rss+xml" title="{intl l='All product in brand %title' title={brand attr='title'}}" href="{url path="/feed/brand/{lang attr='locale'}/{$brand_id}"}"/>
|
||||
{/if}
|
||||
{/block}
|
||||
|
||||
{* Breadcrumb *}
|
||||
{block name='no-return-functions' append}
|
||||
{if $brand_id}
|
||||
{$breadcrumbs = []}
|
||||
{$brand_id={brand attr="id"}}
|
||||
{if $brand_id}
|
||||
{loop type="brand" name="brand-breadcrumb" id="{brand attr="id"}"}
|
||||
{loop type="brand" name="brand-breadcrumb" id=$brand_id limit="1"}
|
||||
{$breadcrumbs[] = ['title' => {$TITLE}, 'url'=> {$URL}]}
|
||||
{/loop}
|
||||
{else}
|
||||
{$breadcrumbs[] = ['title' => {intl l="All brands"}, 'url'=> '']}
|
||||
{/if}
|
||||
{/if}
|
||||
{/block}
|
||||
|
||||
{block name="main-content"}
|
||||
{if $brand_id}
|
||||
<div class="main layout-col-2-left">
|
||||
{$limit={$smarty.get.limit|default:8}}
|
||||
{$product_page={$smarty.get.page|default:1}}
|
||||
@@ -43,7 +55,7 @@
|
||||
{$mode=$smarty.get.mode|default:'grid'}
|
||||
|
||||
<article class="col-main {$mode}" role="main" aria-labelledby="main-label">
|
||||
{loop name="brand.info" type="brand" current="yes"}
|
||||
{loop name="brand.info" type="brand" id=$brand_id limit="1"}
|
||||
<section class="brand-description">
|
||||
<h1 id="main-label" class="page-header">{$TITLE}</h1>
|
||||
|
||||
@@ -156,4 +168,40 @@
|
||||
</aside>
|
||||
|
||||
</div><!-- /.layout -->
|
||||
{else}
|
||||
<div class="main" id="brands">
|
||||
<div class="col-main brands" role="main" aria-labelledby="main-label">
|
||||
{ifloop rel="brands"}
|
||||
<ul>
|
||||
{loop name="brands" type="brand"}
|
||||
<li class="item">
|
||||
<article>
|
||||
<div class="brand-info">
|
||||
{ifloop rel="brand_logo"}
|
||||
<a href="{$URL}" tabindex="-1" class="brand-image">
|
||||
{loop name="brand_logo" type="image" source="brand" id={$LOGO_IMAGE_ID} width=218 height=146 resize_mode="borders" limit="1"}
|
||||
<img src="{$IMAGE_URL}" alt="{$TITLE}">
|
||||
{/loop}
|
||||
<span class="mask"></span>
|
||||
</a>
|
||||
{/ifloop}
|
||||
|
||||
<h2 class="name"><a href="{$URL}">{$TITLE}</a></h2>
|
||||
{if $CHAPO}
|
||||
<div class="short-description">
|
||||
{$CHAPO}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</article>
|
||||
</li>
|
||||
{/loop}
|
||||
</ul>
|
||||
{/ifloop}
|
||||
{elseloop rel="brand_logo"}
|
||||
|
||||
{/elseloop}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{/block}
|
||||
|
||||
Reference in New Issue
Block a user