blur-admin/src/app/pages/dashboard/widgets/todo/_todo.scss

118 lines
2.1 KiB
SCSS

input.task-todo {
margin-bottom: 14px;
}
ul.todo-list {
margin: 0;
padding: 0;
.placeholder, .ui-sortable-placeholder {
background: #fff;
}
li {
margin: 0 0 -1px 0;
padding: 12px;
list-style: none;
position: relative;
border: 1px solid $input-border;
cursor: grab;
height: 42px;
&.ui-sortable-helper {
background: #ffffff;
}
i.remove-todo {
position: absolute;
cursor: pointer;
top: 0px;
right: 12px;
font-size: 32px;
transition: color 0.2s;
color: $input-border;
visibility: hidden;
line-height: 42px;
&:hover {
color: $danger-dark;
}
}
&:hover {
i.remove-todo {
visibility: visible;
}
}
&.checked {
.todo-text {
color: #BFBFBF;
}
&:before {
background: $input-border !important;
}
}
@mixin mark($color) {
i.mark {
background: $color;
}
}
&.primary {
@include mark($primary);
}
&.danger {
@include mark($danger);
}
&.success {
@include mark($success);
}
&.info {
@include mark($info);
}
&.warning {
@include mark($warning);
}
i.mark {
display: block;
position: absolute;
top: -1px;
left: -1px;
height: 42px;
min-width: 4px;
background: $input-border;
cursor: pointer;
transition: min-width 0.3s ease-out;
}
&.active {
i.mark {
min-width: 40px;
}
label.todo-checkbox>span {
&:before {
color: white;
content: '\f10c';
margin-right: 20px;
transition: margin-right 0.1s ease-out;
transition-delay: 0.2s;
}
}
label.todo-checkbox>input:checked+span:before {
content: '\f00c';
}
}
}
}
label.todo-checkbox {
width: 100%;
padding-right: 25px;
min-height: 16px;
cursor: pointer;
>span {
white-space: nowrap;
height: 16px;
&:before {
border: none;
color: $help-text;
transition: all 0.15s ease-out;
}
}
}