.widget-choices { ul { padding: 3px; } li { padding: 2px; list-style: none; } button { font-weight: 700; color: hsl(240, 100%, 50%); } .widget-choices-heading { font-weight: 600; } } .todo-widget, .poll-widget { h4 { font-size: 18px; font-weight: 600; } li { list-style: none; margin: 2px 2px 2px 0; } ul { margin: 0 0 5px 0; padding: 0; } } .poll-widget { .poll-option { font-weight: 600; } .poll-vote { color: hsl(156, 41%, 40%); border-color: hsl(156, 28%, 70%); margin-right: 4px; background-color: hsl(0, 0%, 100%); &:hover { border-color: hsl(156, 30%, 50%); } } } button { &.task { height: 20px; width: 20px; background-color: transparent; border-color: hsl(156, 28%, 70%); margin-right: 4px; border-radius: 3px; &:hover { border: 1px solid hsl(194, 60%, 40%); } } &.task-completed { border-color: hsl(157, 18%, 77%); padding: 0; } &.add-task, &.add-desc, &.poll-option, &.poll-question { border-radius: 3px; border: 1px solid hsl(0, 0%, 80%); background-color: hsl(0, 0%, 100%); width: 100px; &:hover { border-color: hsl(0, 0%, 60%); } } } img.task-completed { width: 15px; } input, button { &.add-task, &.add-desc, &.poll-option, &.poll-question { padding: 4px 6px; margin: 2px 0 2px 0; } } .widget-error { color: hsl(1, 45%, 50%); font-size: 12px; } .poll-question-check, .poll-question-remove { width: 28px !important; height: 28px; border-radius: 3px; border: 1px solid hsl(0, 0%, 80%); background-color: hsl(0, 0%, 100%); &:hover { border-color: hsl(0, 0%, 60%); } } .poll-edit-question { opacity: 0.4; display: inline-block; margin-left: 5px; &:hover { opacity: 1; } } .poll-question-header { display: inline-block; } .current-user-vote { background-color: hsla(156, 10%, 90%, 0.9); }