Ionic List Stlying For Dummies

So, I'm a bit embarassed here. I got off on a bit of a tangent while trying to style the new signup process for Kids In Touch. I wanted a checklist to show the status of the onboarding process.

Somehow, I decided a checkbox would style a list of steps really well. It did. Then, I decided to use an "Xbox" to indicate a problem with some information. So, I dug into SASS and CSS (big mistake) and created a new feature request for "Configurable Checkboxes". It all looked pretty good! http://jsbin.com/fuvaw/10/edit?html,css,output

Then, I needed ANOTHER one of these with a question mark in it this time. So, more SASS, more CSS, more big mistakes. I ended up with a new "question-box" That looked pretty good too!

Final result:

Then, while dabbling with the CSS (do I ever learn?), I realized I was being so stupid. Ionic already has this list like thingy with some icons on the left hand side. IT'S CALLED A LIST WITH ICONS-LEFT, YOU IDIOT!!

So, now, a nice little signup overview without stupid custom checkboxes:

<div class="list">

    <a class="item item-icon-left item-text-wrap intro-list-item" href="#">
        <i class="icon ion-close-circled assertive"></i>
        {{ 'ENTRY_OVERVIEW_AGE' | translate}}
    </a>

    <a class="item item-icon-left intro-list-item" href="#">
        <i class="icon ion-help-circled royal"></i>
        {{ 'ENTRY_OVERVIEW_NAME' | translate}} :<br/> {{model.givenName}}  {{model.familyName}}
    </a>

    <a class="item item-icon-left intro-list-item" href="#">
        <i class="icon ion-checkmark-circled balanced"></i>
        {{ 'ENTRY_OVERVIEW_EMAIL' | translate}} :<br/> {{model.email}}
    </a>

    <a class="item item-icon-left intro-list-item" href="#">
        <i class="icon ion-checkmark-circled balanced"></i>
        {{ 'ENTRY_INFO_LIST_ITEM_EMAIL' | translate}}
    </a>

    <a class="item item-icon-left intro-list-item" href="#">
        <i class="icon ion-checkmark-circled balanced"></i>
        {{ 'ENTRY_OVERVIEW_MOBILE' | translate}} :<br/> {{model.mobile}}
    </a>

</div>

So, after spending a day(yes, a day), I now have a properly designed list without checkbox hacks. Sigh.... However, I still like the idea of having "xboxes" for somethings. If you like that idea, vote it up here : https://trello.com/c/hqzW7nhi/52-configurable-checkbox-icons