composer/iTop
6
0
Fork 0
mirror of https://github.com/Combodo/iTop.git synced 2026-04-23 10:38:45 +02:00
Code Issues Packages Projects Releases Wiki Activity

Set attribute: Fix items display

Browse Source
This commit is contained in:
Molkobain
2021-03-12 16:31:06 +01:00
parent d175bca3cc
commit dfa85df39c
5 changed files with 192 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
css/backoffice/components/input/_input-set.scss Normal file
View File

@@ -0,0 +1,103 @@
$ibo-input-set--padding-x: 8px !default;
$ibo-input-set--padding-y: 5px !default;
$ibo-input-set--input--height: 100% !default;
$ibo-input-set--remove--padding-top: 0.15em !default;
$ibo-input-set--remove--border-left: none !default;
$ibo-input-set--has-items--after--right: 8px !default;
$ibo-input-set--has-items--after--top: 5px !default;
$ibo-input-set--item--siblings-spacing: 3px !default;
$ibo-input-set--item--margin-y: 2px !default;
$ibo-input-set--item--padding-x: 6px !default;
$ibo-input-set--item--padding-y: 4px !default;
$ibo-input-set--item--max-width: 120px !default;
$ibo-input-set--item--background-color: $ibo-color-white-100 !default;
$ibo-input-set--item--border: none !default;
$ibo-input-set--item--border-radius: $ibo-border-radius-300 !default;
$ibo-input-set--item--box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 1px 1px rgba(241, 241, 241, 0.7) !default;
.ibo-input-set {
> input {
height: $ibo-input-set--input--height;
}
.item[data-value] > .remove {
font-size: 18px;
padding-top: $ibo-input-set--remove--padding-top;
border-left: $ibo-input-set--remove--border-left;
}
&.has-items::after {
content: "\f067";
font-family: "Font Awesome 5 Free";
font-weight: 600;
font-size: 10px;
position: absolute;
right: $ibo-input-set--has-items--after--right;
top: $ibo-input-set--has-items--after--top;
}
}
/* CSS rules from the old style, retrieved almost as is. Do not change the classes names in the markup without second thought as they are used by the portal as well */
/* - Item style, always the same in read-only or edition */
%ibo-input-set--item {
display: inline-block;
margin-top: $ibo-input-set--item--margin-y;
margin-right: 0;
margin-bottom: $ibo-input-set--item--margin-y;
padding: $ibo-input-set--item--padding-y $ibo-input-set--item--padding-x;
max-width: $ibo-input-set--item--max-width;
background: $ibo-input-set--item--background-color none;
border: $ibo-input-set--item--border;
border-radius: $ibo-input-set--item--border-radius;
box-shadow: $ibo-input-set--item--box-shadow;
color: $ibo-color-grey-900;
text-shadow: none;
@extend %ibo-text-truncated-with-ellipsis;
&:not(:first-child) {
margin-left: $ibo-input-set--item--siblings-spacing;
}
}
/* - Read-only */
.attribute-set {
.attribute-set-item {
@extend %ibo-input-set--item;
}
&.history-added {
.attribute-set-item {
font-weight: bold;
}
}
&.history-removed {
.attribute-set-item {
text-decoration: line-through;
font-style: italic;
}
}
}
/* - Edition */
/* Note: The selector is "precise" on purpose as it needs to override the one from selectize. */
.selectize-control.multi {
.selectize-input {
&.ibo-input-set {
padding: $ibo-input-set--padding-y $ibo-input-set--padding-x;
.attribute-set-item {
@extend %ibo-input-set--item;
}
}
}
}