124 lines
2.2 KiB
SCSS
124 lines
2.2 KiB
SCSS
.due-date-button,
|
|
[disabled].due-date-button {
|
|
background: $gray-light;
|
|
display: inline-block;
|
|
margin-right: .5rem;
|
|
padding: 1rem;
|
|
transition: background .2s linear;
|
|
transition-delay: .1s;
|
|
&.closed,
|
|
&.text-button.closed:hover {
|
|
background: $gray-lighter;
|
|
border-color: $gray-lighter;
|
|
}
|
|
&.due-set,
|
|
&.text-button.due-set:hover {
|
|
background: $yellow-green;
|
|
border-color: $yellow-green;
|
|
}
|
|
&.due-soon,
|
|
&.text-button.due-soon:hover {
|
|
background: $my-sin;
|
|
border-color: $my-sin;
|
|
}
|
|
&.past-due,
|
|
&.text-button.past-due:hover {
|
|
background: $red-light;
|
|
border-color: $red-light;
|
|
}
|
|
&:hover {
|
|
background: $gray;
|
|
}
|
|
&.editable {
|
|
cursor: pointer;
|
|
}
|
|
&.text-button {
|
|
color: $white;
|
|
margin: 0;
|
|
padding: .5rem;
|
|
&.not-set:hover {
|
|
color: $white;
|
|
}
|
|
&.not-set {
|
|
color: $gray;
|
|
}
|
|
}
|
|
}
|
|
|
|
.due-date-icon {
|
|
display: inline-block;
|
|
margin: 0 .25rem;
|
|
position: relative;
|
|
svg {
|
|
fill: $gray-light;
|
|
transition: fill .2s ease-in;
|
|
}
|
|
&.closed svg {
|
|
fill: $gray-lighter;
|
|
}
|
|
&.due-set svg {
|
|
fill: $yellow-green;
|
|
}
|
|
&.due-soon svg {
|
|
fill: $my-sin;
|
|
}
|
|
&.past-due svg {
|
|
fill: $red-light;
|
|
}
|
|
}
|
|
|
|
.backlog-table-body .user-story-name,
|
|
.related-tasks .task-name {
|
|
.due-date-icon {
|
|
top: .1rem;
|
|
}
|
|
}
|
|
|
|
.issues-table .subject .due-date-icon {
|
|
top: .25rem;
|
|
}
|
|
|
|
.card-statistics .due-date-icon {
|
|
margin: .1rem 0 0;
|
|
svg {
|
|
height: .9rem;
|
|
width: .9rem;
|
|
}
|
|
}
|
|
|
|
.due-date-button-wrapper {
|
|
display: flex;
|
|
position: relative;
|
|
}
|
|
|
|
.date-picker-container {
|
|
overflow: visible;
|
|
}
|
|
|
|
.date-picker-popover {
|
|
background: $white;
|
|
border: 1px solid $gray;
|
|
left: 0;
|
|
overflow: visible;
|
|
position: absolute;
|
|
top: 56px;
|
|
width: auto;
|
|
.pika-single.is-bound {
|
|
border: 0;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
.date-picker-popover-footer {
|
|
padding: .2rem .5rem;
|
|
text-align: right;
|
|
svg {
|
|
fill: $gray;
|
|
height: 1rem;
|
|
width: 1rem;
|
|
}
|
|
a:hover svg {
|
|
fill: $red;
|
|
}
|
|
}
|