bachir/materio-d9
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

modalcard added samples, industriels in navtools; flag collection items open modalcard

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2021-01-22 12:12:31 +01:00
parent 9e99c4c688
commit 515e400ea5
8 changed files with 245 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
web/themes/custom/materiotheme/assets/dist/main.css vendored
View File

@@ -1844,9 +1844,17 @@ article.card {
height: 100px;
margin: auto; }
article.card.minicard > header {
padding: 0.3em 0.3em 0.1em; }
padding: 0.3em 0.3em 0.1em;
cursor: pointer; }
article.card.minicard > header h1 {
margin: 0; }
margin: 0;
font-size: 1em; }
article.card.minicard > header h4 {
margin: 0;
line-height: 1.1;
margin-bottom: -0.4em; }
article.card.minicard > header span.ref {
line-height: 0.5; }
article.card.minicard > nav.tools {
top: auto;
bottom: 0;
@@ -1855,7 +1863,7 @@ article.card {
article.card.minicard > nav.tools .mdi.unflag {
cursor: pointer; }
article.card.linkedmaterialcard {
width: 200px;
width: 190px;
height: 110px; }
article.card.linkedmaterialcard > header {
padding: 0.3em 0.3em 0.1em;
@@ -1927,9 +1935,9 @@ article.card {
right: 100%;
width: 180px;
box-sizing: border-box;
padding: 0.3em;
padding: 0;
background-color: #fff;
box-shadow: -2px 3px 4px rgba(0, 0, 0, 0.2);
box-shadow: -2px 3px 8px rgba(0, 0, 0, 0.5);
opacity: 0;
max-height: 0;
max-width: 0;
@@ -1938,6 +1946,7 @@ article.card {
article.card nav.tools > *:hover .tool-content {
transition: all 0.3s ease-in-out;
opacity: 1;
padding: 0.3em;
max-height: 195px;
max-width: 200px; }
article.card nav.tools .tool.flags .tool-content ul {
@@ -1989,27 +1998,51 @@ article.card {
flex-basis: 50%; }
article.card.modal-card section.col-right > *:not(nav.tools) {
position: relative;
padding: 0.5em 0.5em 0;
padding: 0.3em 20px 0 0.5em;
box-sizing: border-box;
width: 100%; }
article.card.modal-card section.col-right > header {
bottom: auto; }
article.card.modal-card section.col-right span.label {
font-size: 0.693em;
font-weight: 500; }
article.card.modal-card section.col-right section.body p {
font-size: 0.882em;
font-size: 0.693em;
font-weight: 300;
line-height: 1.35;
margin: 0 0 0.5em; }
article.card.modal-card section.col-right section.linked-materials {
margin: 0 0 0.3em; }
article.card.modal-card section.col-right section.linked-materials > ul {
display: flex;
flex-flow: row wrap;
justify-content: space-between; }
article.card.modal-card section.col-right section.linked-materials > article.linkedmaterialcard {
article.card.modal-card section.col-right section.linked-materials > ul > li {
flex-basis: 0 0 50%;
margin-bottom: 0.5em; }
article.card.modal-card section.col-right nav.tools {
opacity: 1; }
article.card.modal-card section.col-right nav.tools section.close span.btn.mdi-close {
cursor: pointer; }
article.card.modal-card section.col-right nav.tools div.tool-content {
min-width: 385px; }
article.card.modal-card section.col-right section.tool.samples div.tool-content ul {
font-size: 0.882em;
font-weight: 300; }
article.card.modal-card section.col-right section.tool.samples div.tool-content ul li {
padding-right: 0.5em; }
article.card.modal-card section.col-right section.tool.samples div.tool-content ul li span.showroom {
font-weight: 500; }
article.card.modal-card section.col-right section.tool.industriels div.tool-content {
display: flex;
flex-flow: row; }
article.card.modal-card section.col-right section.tool.industriels div.tool-content > section {
flex: 0 0 50%; }
article.card.modal-card section.col-right section.tool.industriels div.tool-content > section h2 {
margin: 0;
font-size: 1em;
line-height: 0.6; }
article.card.modal-card section.col-right section.tool.industriels div.tool-content > section p {
margin: 0;
font-size: 0.882em; }
#main-content > article.thematique div.cols {
display: flex;

12
web/themes/custom/materiotheme/assets/dist/main.js vendored
View File

File diff suppressed because one or more lines are too long

2
web/themes/custom/materiotheme/assets/styles/base/_variables.scss
View File

@@ -13,7 +13,7 @@ $card_height: 295px;
$minicard_width: 170px;
$minicard_height: 100px;
$linkedmaterialcard_width: 200px;
$linkedmaterialcard_width: 190px;
$linkedmaterialcard_height: 110px;
$modalcard_width: 850px;

98
web/themes/custom/materiotheme/assets/styles/main.scss
View File

@@ -952,8 +952,18 @@ article.card{
margin:auto;
>header{
padding: 0.3em 0.3em 0.1em;
cursor: pointer;
h1{
margin:0;
font-size: 1em;
}
h4{
margin:0;
line-height: 1.1;
margin-bottom: -0.4em;
}
span.ref{
line-height: 0.5;
}
}
>nav.tools{
@@ -1035,13 +1045,13 @@ article.card{
&.card-thematique header{
background-color: $color-base-transparent;
}
$navtool_width: 15px;
nav.tools{
position: absolute;
top: 0;
right: 0;
z-index: 21;
$toolbar_width: 15px;
width: $toolbar_width;
width: $navtool_width;
background-color: #fff;
box-sizing: content-box;
padding: 0.3em 0.1em;
@@ -1057,11 +1067,11 @@ article.card{
top: 0px;
right: 100%;
// width: 5em;
width: $column_width - $toolbar_width - 10px;
width: $column_width - $navtool_width - 10px;
box-sizing: border-box;
padding: 0.3em;
padding: 0;
background-color: #fff;
box-shadow: -2px 3px 4px rgba(0, 0, 0, 0.2);
box-shadow: -2px 3px 8px rgba(0, 0, 0, 0.5);
opacity: 0;
max-height: 0; max-width:0;
overflow: hidden;
@@ -1071,6 +1081,7 @@ article.card{
.tool-content{
transition: all 0.3s ease-in-out;
opacity: 1;
padding: 0.3em;
max-height: 195px;
max-width:200px;
}
@@ -1148,44 +1159,41 @@ article.card{
section.col-right{
>*:not(nav.tools){
position: relative;
padding: 0.5em 0.5em 0;
padding: 0.3em $navtool_width + 5px 0 0.5em;
box-sizing: border-box;
width: 100%;
}
>header{
bottom: auto;
}
// section.samples{
// ul{
// display: flex;
// flex-flow: row wrap;
// font-size: 0.882em;
// font-weight: 300;
// // line-height: 1.35;
// li{
// padding-right: 0.5em;
// span.showroom{ font-weight: 500; }
// }
// }
// }
span.label{
font-size: 0.693em;
font-weight: 500;
}
section.body{
p{
font-size: 0.882em;
font-size: 0.693em;
font-weight: 300;
line-height: 1.35;
margin:0 0 0.5em;
margin:0 0 0.3em;
}
}
section.linked-materials{
display: flex;
flex-flow: row wrap;
justify-content: space-between;
>article.linkedmaterialcard{
flex-basis: 0 0 50%;
margin-bottom: 0.5em;
>ul{
display: flex;
flex-flow: row wrap;
justify-content: space-between;
>li{
flex-basis: 0 0 50%;
margin-bottom: 0.5em;
article.linkedmaterialcard{
}
}
}
}
nav.tools{
opacity: 1;
section.close{
@@ -1193,6 +1201,42 @@ article.card{
cursor:pointer;
}
}
div.tool-content{
min-width: $column_width *2 - $navtool_width - 10px;
}
}
section.tool.samples{
div.tool-content{
ul{
// display: flex;
// flex-flow: row wrap;
font-size: 0.882em;
font-weight: 300;
// line-height: 1.35;
li{
padding-right: 0.5em;
span.showroom{ font-weight: 500; }
}
}
}
}
section.tool.industriels{
div.tool-content{
display: flex;
flex-flow: row;
>section{
flex: 0 0 50%;
h2{
margin:0;
font-size: 1em;
line-height: 0.6;
}
p{
margin: 0;
font-size: 0.882em;
}
}
}
}
}
}