diff --git a/css/light-grey.css b/css/light-grey.css index 75dd3a0d4..e6391e463 100644 --- a/css/light-grey.css +++ b/css/light-grey.css @@ -2892,13 +2892,6 @@ table.listResults .originColor { .menu-icon-select > .ui-menu-item { padding: 0.3em 3%; } -.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; @@ -2907,17 +2900,14 @@ table.listResults .originColor { 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-edit .attribute-set .attribute-set-item, .attribute-tag-set.attribute-set .attribute-set-item, .selectize-control > .selectize-input > .item[data-value], .selectize-control.multi > .selectize-input > .item[data-value], .selectize-control > .selectize-input > .item[data-value].active, .selectize-control.multi > .selectize-input > .item[data-value].active { display: inline-block; margin-right: 3px; margin-bottom: 3px; padding: 4px 6px; - padding-right: 1.5em !important; - /* this is for the remove box ! */ max-width: 120px; background: #fdfdfd none; border-radius: 2px; - border: 1px solid #ddd; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 1px 1px #f1f1f1; color: #222; text-shadow: none; @@ -2926,9 +2916,21 @@ table.listResults .originColor { 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 { +.attribute-edit .attribute-set .attribute-set-item::after, .attribute-tag-set.attribute-set .attribute-set-item::after, .selectize-control > .selectize-input > .item[data-value]::after, .selectize-control.multi > .selectize-input > .item[data-value]::after, .selectize-control > .selectize-input > .item[data-value].active::after, .selectize-control.multi > .selectize-input > .item[data-value].active::after { content: ""; + margin-right: 0; } -div.selectize-control > div.selectize-input > div.item[data-value] > .remove { +.selectize-control > .selectize-input.has-items:after, .selectize-control.multi > .selectize-input.has-items:after { + content: "+"; + display: inline-block; + font-size: 17px; + font-weight: bold; + color: #222; +} +.selectize-control > .selectize-input > .item[data-value], .selectize-control.multi > .selectize-input > .item[data-value] { + padding-right: 1.5em !important; + border: 1px solid #ddd; +} +.selectize-control > .selectize-input > .item[data-value] > .remove, .selectize-control.multi > .selectize-input > .item[data-value] > .remove { border: none; } diff --git a/css/light-grey.scss b/css/light-grey.scss index ce3b09bca..f5b97f8d0 100644 --- a/css/light-grey.scss +++ b/css/light-grey.scss @@ -3310,23 +3310,8 @@ table.listResults .originColor{ } ////////////////////// -// Tagset attribute // +// Set attribute // // - Readonly (object viewing, objects list) -////////////////////// -// 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{ @@ -3334,7 +3319,6 @@ table.listResults .originColor{ content: ","; margin-right: 0.5em; } - &:last-of-type::after{ content: ""; margin-right: 0; @@ -3342,21 +3326,16 @@ table.listResults .originColor{ } } } - -.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{ +// - Edit is always styled like the selectize items, see below. +%attribute-set-item-edition{ display: inline-block; margin-right: 3px; margin-bottom: 3px; padding: 4px 6px; - padding-right: 1.5em !important; /* this is for the remove box ! */ max-width: 120px; background: #fdfdfd none; border-radius: 2px; - border: 1px solid $gray-lighter; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 1px 1px rgb(241, 241, 241, 0.7); color: $gray-darker; @@ -3368,11 +3347,47 @@ div.selectize-control > div.selectize-input > div.item[data-value].active{ &::after{ content: ""; + margin-right: 0; + } +} +.attribute-edit .attribute-set .attribute-set-item{ + @extend %attribute-set-item-edition; +} +////////////////////// +// TagSet attribute // +// Always styled like the selectize items, see below. +.attribute-tag-set.attribute-set{ + .attribute-set-item{ + @extend %attribute-set-item-edition; } } +////////////////////// +// Selectize widget // +// +.selectize-control, +.selectize-control.multi{ + > .selectize-input{ + &.has-items:after { + content: "+"; + display: inline-block; + font-size: 17px; + font-weight: bold; + color: $gray-darker; + } + > .item[data-value]{ + @extend %attribute-set-item-edition; -div.selectize-control > div.selectize-input > div.item[data-value] > .remove { - border: none; -} \ No newline at end of file + padding-right: 1.5em !important; + border: 1px solid $gray-lighter; + + &.active{ + @extend %attribute-set-item-edition; + } + > .remove { + border: none; + } + } + } +}