Chorly Chore Items

by Erik Bartlow

HTML

<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="http://thebartlows.com/scripts/iconsprite/vc-clear.css">
<h3>Individual Chore - Not Completed</h3>

<div class="cy-chore cy-flex vc-flex-start cy-color-chore">
    <div class="cy-flex-child cy-chore-title">Take out the trash</div>
    <div class="cy-flex-child cy-chore-options">5</div>
</div>

<h3>Individual Chore - Completed</h3>

<div class="cy-chore cy-flex vc-flex-start cy-color-chore-done">
    <div class="cy-flex-child cy-chore-title">Take out the trash</div>
    <div class="cy-flex-child cy-chore-options">5</div>
</div>

<h3>Grouped Chores</h3>

<div class="cy-chore-group">
    <div class="cy-chore cy-flex vc-flex-start cy-color-chore">
        <div class="cy-flex-child cy-chore-title">Take out the trash</div>
        <div class="cy-flex-child cy-chore-options">5</div>
    </div>
    <div class="cy-chore cy-flex vc-flex-start cy-color-chore">
        <div class="cy-flex-child cy-chore-title">Take out the trash</div>
        <div class="cy-flex-child cy-chore-options">5</div>
    </div>
</div>

CSS

.cy-chore {
    border-radius: 10px;
    width: 100%;
    height: 40px;
    border: 1px solid;
    background-color: #CCCCCC;
    font-size: 1.2em;
    margin-bottom: 3px;
    cursor: hand;
}
.cy-color-chore {
    color:#426148;
    background-color: #58DB72;
    border-color: #2E733C;
}
.cy-color-chore-done {
    background-color: #CCCCCC;
    color: #FFFFFF;
    border: 1px solid #000000;
}
.cy-flex {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
.cy-flex-child {
    width: 100%;
    /* Or whatever */
    margin: auto;
    /* Magic! */
    padding: 5px;
}
.cy-flex-child div {
}
.cy-chore-title {
}
.cy-chore-options {
    flex-direction: column;
    min-width: 64px;
    max-width: 64px;
    width: 32px;
    height: 30px;
    background-color: #EEEEEE;
    border-top-left-radius: initial !important;
    border-bottom-left-radius: initial !important;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-left: 1px solid #2E733C Important;
    color: #000000;
    font-size: 1.3em;
    text-align: center;
    font-weight: bold;
}
.cy-chore-options::after {
    content:"pts";
}
.cy-chore-group > div:first-child {
    border-top-left-radius: 10px !Important;
    border-top-right-radius: 10px !Important;
    border-bottom-width: 1px;
}
.cy-chore-group > div:first-child .cy-chore-options {
    border-top-right-radius: 10px !Important;
    border-bottom-right-radius: 0px !Important;
}
.cy-chore-group > div:not(:first-child){
    border-top-width: 0px;
}
.cy-chore-group > div:not(:last-child) {
    margin-bottom: 0px;
}
.cy-chore-group > div:last-child {
    border-bottom-left-radius: 10px !Important;
    border-bottom-right-radius: 10px !Important;
    border-bottom-width: 1px;
}
.cy-chore-group > div:last-child .cy-chore-options {
    border-bottom-left-radius: 00px !Important;
    border-bottom-right-radius: 10px !Important;
}
.cy-chore-group div {
   ...