taiga-front/app/styles/modules/admin/admin-third-parties-webhook...

116 lines
2.6 KiB
SCSS

.admin-webhooks {
.webhooks-table {
.row {
border-bottom: 0;
padding: .5rem 0;
}
.row:hover {
.webhook-options-wrapper {
opacity: 1;
transition: opacity .2s linear;
}
}
}
.table-header {
@extend %bold;
border-bottom: 1px solid $gray-light;
}
.table-body {
.webhook-service {
color: $gray;
}
}
.single-webhook-wrapper {
border-bottom: 1px solid $whitish;
}
.webhooks-options {
margin-bottom: 1rem;
text-align: right;
}
.webhook-service,
.webhook-url {
margin-right: .5rem;
}
.webhook-service {
flex-basis: 20%;
flex-grow: 0;
}
.webhook-url {
flex-basis: 400px;
flex-grow: 8;
span {
@include ellipsis($width: 65%);
color: $gray-light;
display: inline-block;
vertical-align: middle;
}
a {
color: $green-taiga;
margin-left: .5rem;
&:hover {
color: $fresh-taiga;
}
}
}
.webhook-options {
flex-basis: 100px;
flex-grow: 0;
min-width: 100px;
text-align: center;
a {
color: $gray-light;
margin-right: .5rem;
transition: color .2s linear;
vertical-align: middle;
&:hover {
color: $green-taiga;
transition: color .2s linear;
}
}
}
.webhook-options-wrapper {
opacity: 0;
transition: opacity .3s linear;
}
.webhook-url-inputs {
display: flex;
flex-direction: row;
input {
flex-basis: 1;
margin-right: .3rem;
}
}
.history-single {
align-items: center;
border-bottom: 1px solid $whitish;
cursor: pointer;
display: flex;
justify-content: space-between;
margin-left: 22%;
padding: .5rem;
transition: background .2s linear;
&:hover {
background: rgba($fresh-taiga, .1);
transition: background .2s linear;
}
}
.history-response {
background: $gray;
border-radius: 25%;
display: inline-block;
height: .8rem;
margin-right: .5rem;
vertical-align: middle;
width: .8rem;
&.history-success {
background: $fresh-taiga;
}
&.history-error {
background: $red;
}
}
}