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

108 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 {
@extend %bold;
border-bottom: 3px solid $whitish;
.custom-name span,
.custom-description span {
padding-left: 1.1rem;
}
}
.table-body {
form:last-child {
.row {
border: 0;
}
}
.row:hover {
background: rgba($primary-light, .05);
cursor: move;
transition: background .2s linear;
.icon-drag-v,
.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-v {
color: $gray-light;
opacity: 0;
padding: 0 .1rem;
transition: color .2s linear;
vertical-align: middle;
&:hover {
color: $gray;
cursor: move;
transition: color .2s linear;
}
}
.custom-name,
.custom-description {
color: $gray;
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: 25%;
flex-grow: 0;
}
.custom-options {
flex-basis: 100px;
flex-grow: 0;
flex-shrink: 0;
opacity: 0;
text-align: center;
a {
color: $gray-light;
margin-right: .5rem;
transition: color .2s linear;
vertical-align: middle;
&:hover {
color: $primary;
transition: color .2s linear;
}
}
}
.custom-options-wrapper {
opacity: 0;
transition: opacity .3s linear;
}
form {
.custom-options-wrapper {
opacity: 1;
}
}
}