Taxons: Rework of CSS & markup in the console (portal still to come).

This commit is contained in:
Molkobain
2018-09-27 16:45:04 +02:00
parent 58525f247e
commit 5fa4b4cb88
10 changed files with 87 additions and 52 deletions

View File

@@ -1944,26 +1944,19 @@ fieldset .details > .field_container {
.field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_extkey > .field_input_btn > img {
max-width: 20px;
}
.field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_tagset .selectize-control {
.field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_set .selectize-control {
width: 100%;
}
.field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_tagset .selectize-control .selectize-dropdown, .field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_tagset .selectize-control .selectize-input, .field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_tagset .selectize-control .selectize-input input {
.field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_set .selectize-control .selectize-dropdown, .field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_set .selectize-control .selectize-input, .field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_set .selectize-control .selectize-input input {
font-size: 12px;
}
.field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_tagset .selectize-control .selectize-input {
.field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_set .selectize-control .selectize-input {
padding: 2px 2px 0px 2px;
/* padding-bottom = padding-top - item margin-bottom */
border: 1px solid #ababab;
border-radius: 0;
}
.field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_tagset .selectize-control .selectize-input.has-items:after {
content: "+";
display: inline-block;
font-size: 17px;
font-weight: bold;
color: #222;
}
.field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_tagset .selectize-control .selectize-input .attribute-set-item.partial-code {
.field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_set .selectize-control .selectize-input .attribute-set-item.partial-code {
color: rgba(34, 34, 34, 0.6);
background-color: #eaeaea;
}
@@ -2899,7 +2892,22 @@ table.listResults .originColor {
.menu-icon-select > .ui-menu-item {
padding: 0.3em 3%;
}
div.selectize-control > div.selectize-input > div.item[data-value], div.selectize-control > div.selectize-input > div.item[data-value].active, .attribute-set .attribute-set-item {
.selectize-control .selectize-input.has-items:after {
content: "+";
display: inline-block;
font-size: 17px;
font-weight: bold;
color: #222;
}
.attribute.attribute-set .attribute-set-item::after {
content: ",";
margin-right: 0.5em;
}
.attribute.attribute-set .attribute-set-item:last-of-type::after {
content: "";
margin-right: 0;
}
.attribute-edit .attribute-set .attribute-set-item, .attribute-set.attribute-tag-set .attribute-set-item, div.selectize-control > div.selectize-input > div.item[data-value], div.selectize-control > div.selectize-input > div.item[data-value].active {
display: inline-block;
margin-right: 3px;
margin-bottom: 3px;
@@ -2918,6 +2926,9 @@ div.selectize-control > div.selectize-input > div.item[data-value], div.selectiz
text-overflow: ellipsis;
white-space: nowrap;
}
.attribute-edit .attribute-set .attribute-set-item::after, .attribute-set.attribute-tag-set .attribute-set-item::after, div.selectize-control > div.selectize-input > div.item[data-value]::after, div.selectize-control > div.selectize-input > div.item[data-value].active::after {
content: "";
}
div.selectize-control > div.selectize-input > div.item[data-value] > .remove {
border: none;
}

View File

@@ -2265,7 +2265,7 @@ fieldset .details>.field_container {
}
}
&.field_input_tagset{
&.field_input_set{
.selectize-control{
width: 100%;
@@ -2279,14 +2279,6 @@ fieldset .details>.field_container {
border: 1px solid #ABABAB;
border-radius: 0;
&.has-items:after {
content: "+";
display: inline-block;
font-size: 17px;
font-weight: bold;
color: $gray-darker;
}
.attribute-set-item.partial-code{
color: transparentize($gray-darker, 0.4);
background-color: lighten($gray-lighter, 5%);
@@ -3323,9 +3315,38 @@ table.listResults .originColor{
//////////////////////
// Selectize widget //
//
.selectize-control{
.selectize-input{
&.has-items:after {
content: "+";
display: inline-block;
font-size: 17px;
font-weight: bold;
color: $gray-darker;
}
}
}
.attribute {
&.attribute-set {
.attribute-set-item{
&::after{
content: ",";
margin-right: 0.5em;
}
&:last-of-type::after{
content: "";
margin-right: 0;
}
}
}
}
.attribute-edit .attribute-set .attribute-set-item,
.attribute-set.attribute-tag-set .attribute-set-item,
div.selectize-control > div.selectize-input > div.item[data-value],
div.selectize-control > div.selectize-input > div.item[data-value].active,
.attribute-set .attribute-set-item {
div.selectize-control > div.selectize-input > div.item[data-value].active{
display: inline-block;
margin-right: 3px;
margin-bottom: 3px;
@@ -3344,9 +3365,14 @@ div.selectize-control > div.selectize-input > div.item[data-value].active,
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
&::after{
content: "";
}
}
div.selectize-control > div.selectize-input > div.item[data-value] > .remove {
border: none;
}