taiga-front/app/styles/modules/admin/admin-custom-attributes.scss

105 lines
2.3 KiB
SCSS

.custom-field-options {
margin-bottom: 1rem;
text-align: right;
}
.custom-fields-table {
margin-bottom: 2em;
.row {
border-bottom: 0;
padding: .5rem 0;
}
.table-header {
@include font-type(bold);
border-bottom: 3px solid $whitish;
.custom-name,
.custom-description {
padding-left: 1.1rem;
}
}
.table-body {
.row:hover {
background: rgba($primary-light, .05);
cursor: move;
transition: background .2s linear;
.icon-drag,
.custom-options {
opacity: 1;
transition: opacity .2s linear;
}
}
form {
&.row:hover {
background: none;
cursor: default;
}
}
.custom-description {
color: $gray-light;
}
}
.single-custom-field {
border-bottom: 1px solid $whitish;
color: $gray;
}
.icon-drag {
fill: $gray-light;
opacity: 0;
padding: 0 .25rem 0 .1rem;
transition: color .2s linear;
}
.custom-name,
.custom-description {
margin-right: .5rem;
}
.custom-name {
flex-basis: 25%;
flex-shrink: 0;
}
.custom-description {
@include ellipsis(100%);
flex-basis: 50%;
flex-grow: 8;
}
.custom-field-type {
flex-basis: 10%;
flex-grow: 0;
flex-shrink: 0;
}
.custom-options {
flex-basis: 100px;
flex-grow: 0;
flex-shrink: 0;
opacity: 0;
text-align: center;
svg {
cursor: pointer;
fill: $gray-light;
margin-right: .5rem;
transition: color .2s linear;
vertical-align: middle;
&:hover {
fill: $primary;
transition: color .2s linear;
}
&.icon-trash,
&.icon-close {
fill: $red-light;
}
}
}
.custom-options-wrapper {
opacity: 0;
transition: opacity .3s linear;
a {
display: inline-block;
}
}
form {
.custom-options-wrapper {
opacity: 1;
}
}
}