fancy list

by kpowz

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css">
<div class="base text-success" ></div>

<ul style="display:inline-block">
    <li class="circle"><div class=" text-success" ><span class="glyphicon glyphicon-ok"></span></div><a href='#'>go to agreement #1</a></li>
    <li class="circle"><div class=" text-error"></div><a href='#'>go to agreement #2</a></li>
    <li class="circle"><div class=""></div><a href='#'>go to agreement #3</a></li>
</ul>

<!-- recommendation to not make these actual checkbox controls as they don't need to be interactive with the user and checkboxes are notoriously hard to style ( you basically replace them with an image to style them normally for cross browser consistency)
-->

<!--
TODOs:
- replace icon font asset reference w/ own asset & possibly will need different means of centering since, depending on asset type, the asset might not pick up on the text-align setting
- organization of css is not great
-->

CSS

.circle,
.circle2{
    vertical-align:middle;    
}
li.circle,
li.circle2{
    margin-bottom: 1em;
}
.circle div{  
    border: 0.286em solid;
    border-radius: 50%;
    height: 2.857em;
    width: 2.857em;    
    display: inline-block;   
    margin-right: 0.714em;
    text-align: center; 
    line-height: 2.500em;
    vertical-align: middle;
}
.circle2 div{  
    border: 4px solid;
    border-radius: 50%;
    height: 40px;
    width: 40px;    
    display: inline-block;   
    margin-right: 10px;
    text-align: center; 
    line-height: 35px;
    vertical-align: middle;
}


/*cloudnet list styles*/
ul,
ol {
  margin-left: 0;
  padding-left: 0;
  list-style: none;
}
ul ul,
ul ol,
ol ol,
ol ul {
  margin-bottom: 0;
}
li {
  line-height: 20px;
}
ul.styled,
ol.styled {
  padding: 0;
  margin: 0 0 10px 25px;
}
ul.styled ul,
ol.styled ul {
  list-style: disc;
  list-style-position: inside;
  margin-left: 20px;
}
ul.styled ol,
ol.styled ol {
  list-style: decimal;
  list-style-position: inside;
  margin-left: 20px;
}
ul.styled {
  list-style: disc;
  list-style-position: inside;
}
ol.styled {
  list-style: decimal;
  list-style-position: inside;
}
ul.inline,
ol.inline {
  margin-left: 0;
  list-style: none;
}
ul.inline > li,
ol.inline > li {
  display: inline-block;
  padding-left: 5px;
  padding-right: 5px;
}

/*couldnet text styles */
.muted {
  color: #999999;
}
a.muted:hover {
  color: #808080;
}
.text-warning,
.text-error,
.text-info,
.text-success {
  font-weight: bold;
}
.text-warning {
  color: #9a7a42;
}
a.text-warning:hover {
  color: #765e33;
}
.text-error {
  color: #863a43;
}
a.text-error:hover {
  color: #622b31;
}
.text-info {
  color: #2e5772;
}
a.text-info:hover {
  color: #1f3b4e;
}
.text-success {
  color: #6b8026;
}
a.text-success:hover {
  color: #4a591a;
}