Dots

dependency:

@import "magic/helper/dots";
.dot

<% for x, i in ["default", "success", "info", "warning", "danger", "brand", "one", "two", "three", "facebook", "google", "twitter", "paypal"]: %>
.dot.dot-<%= x %>

<% end %>

Number-Dots

<% for x in [1,2,3,4]: %>
<%= if x == 4 then " dot-blank-soft" else "" %>"><%= x %>
<% end %>

Sizes

<% for x, i in ["xs", "sm", "", "lg", "xl", "xxl"]: %>
"><%= i + 1 %>

<%= if x != "" then ".dot-#{x}" else "" %>

<% end %>

Colors

<% for x, i in ["default", "success", "info", "warning", "danger", "brand", "one", "two", "three", "facebook", "google", "twitter", "paypal"]: %>
<%= i + 1 %>

.dot-<%= x %>

<% end %>

plus .dot-blank

<% for x, i in ["default", "success", "info", "warning", "danger", "brand", "one", "two", "three", "facebook", "google", "twitter", "paypal"]: %>
<%= i + 1 %>

.dot-<%= x %>

<% end %>

plus .dot-blank-soft

<% for x, i in ["default", "success", "info", "warning", "danger", "brand", "one", "two", "three", "facebook", "google", "twitter", "paypal"]: %>
<%= i + 1 %>

.dot-<%= x %>

<% end %>