104 lines
2.4 KiB
SCSS
104 lines
2.4 KiB
SCSS
.task {
|
|
position: relative;
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: .5rem;
|
|
flex-direction: column;
|
|
background-color: #444;
|
|
|
|
.header {
|
|
border-radius: .1rem;
|
|
height: 2.5rem;
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.drag-n-drop {
|
|
padding: 0 1rem;
|
|
&:hover {
|
|
cursor: grab;
|
|
}
|
|
}
|
|
|
|
mat-checkbox {
|
|
// padding: 0 .5rem;
|
|
}
|
|
|
|
.input-container {
|
|
display: flex;
|
|
flex-grow: 1;
|
|
|
|
input {
|
|
border-style: none;
|
|
height: 1.8rem;
|
|
padding: 0 .8rem;
|
|
margin: 0 .8rem;
|
|
background-color: #444;
|
|
border-style: solid;
|
|
border-width: .1rem;
|
|
border-color: rgba(0,0,0, 0);
|
|
border-radius: .2rem;
|
|
|
|
width: 100%;
|
|
|
|
transition: background-color .2s ease-out,
|
|
border-color .2s ease-out;
|
|
|
|
&:hover {
|
|
border-color: rgb(53, 53, 53);
|
|
}
|
|
}
|
|
}
|
|
|
|
.expand {
|
|
margin-right: .5rem;
|
|
}
|
|
}
|
|
|
|
.body {
|
|
height: 0;
|
|
visibility: hidden;
|
|
transition: height .1s ease-in-out;
|
|
display: flex;
|
|
|
|
&.expanded {
|
|
height: 20rem;
|
|
visibility: visible;
|
|
width: 100%;
|
|
}
|
|
|
|
.container {
|
|
flex-grow: 1;
|
|
padding: 1rem;
|
|
display: flex;
|
|
flex-direction: row;
|
|
|
|
.description-container {
|
|
width: 80%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
textarea {
|
|
flex-grow: 1;
|
|
border: 1px solid #444;
|
|
background-color: #4a4a4a;
|
|
resize: none;
|
|
}
|
|
}
|
|
|
|
.actions {
|
|
display: flex;
|
|
flex-grow: 1;
|
|
background-color: gray;
|
|
height: 100%;
|
|
flex-wrap: wrap;
|
|
max-width: 20%;
|
|
justify-content: space-around;
|
|
align-items: flex-start;
|
|
padding: 1rem;
|
|
}
|
|
}
|
|
}
|
|
} |