_dots.scss in magic_stylez-0.0.0.92

- old
+ new
@@ -1,26 +1,83 @@
 .dot {
 	display: block; display: inline-block; position: relative;
 	width: 10px; height: 10px;
 	@include border-radius( 15px );
 	border: solid 1px $main-border-color;
-	&.ok { background: #55b8f7; border: solid 1px darken( #55b8f7, 10% ); }
-	&.warning { background: #f9a538; border: solid 1px darken( #f9a538, 10% ); }
 }
 
 
-.number_dot {
+.number_dot, .number-dot, .nmbr_dot, .nmbr-dot {
 	display: inline-block;
-	height: 92px;
-	line-height: 82px;
-	width: 92px;
+	height: 40px; width: 40px;
+	line-height: 36px;
 	text-align: center;
 	@include border-radius( 100px );
 	@include box-shadow (inset 0 1px 1px 0 rgba(51,102,153,0.4));
 	text-shadow: 0 2px rgba(51,102,153,0.4);
-	border: solid 5px #fff;
+	border: solid 2px #fff;
 	color: #fff;
 	background-color: $pink;
-	font-size: 40px;
+	font-size: 22px;
 	font-weight: 800;
 	margin: 0 auto $general-vertical-spacing-half;
-}
\ No newline at end of file
+	
+	
+
+	
+	&.sm {
+	    height: 24px;
+	    line-height: 20px;
+	    width: 24px;
+	    border: solid 1px #fff;
+	    font-size: 18px;
+	    margin: 0 5px 0 0;
+	}
+	
+	&.dot-xs {
+	    height: 20px; width: 20px;
+	    line-height: 18px;
+	    border-width: 1px;
+	    font-size: 14px;
+	}
+	&.dot-sm {
+	    height: 30px; width: 30px;
+	    line-height: 26px;
+	    border-width: 1px;
+	    font-size: 18px;
+	}
+	
+	&.dot-lg {
+	    height: 60px; width: 60px;
+	    line-height: 54px;
+	    border-width: 3px;
+	    font-size: 34px;
+	}
+	&.dot-xl {
+	    height: 92px; width: 92px;
+	    line-height: 82px;
+	    border-width: 5px;
+	    font-size: 40px;
+	}
+	
+	&.dot-xxl {
+	    height: 120px; width: 120px;
+	    line-height: 108px;
+	    border-width: 5px;
+	    font-size: 80px;
+	}
+	
+}
+
+
+.dot, .number_dot, .number-dot, .nmbr_dot, .nmbr-dot {
+    @each $current-color in $colorClasses {
+	    &.dot-#{$current-color} {
+	        background-color:   map-get($appColorz, btn-#{$current-color}-bg);
+    	    color:              map-get($appColorz, btn-#{$current-color}-color);
+    	    border-color:       map-get($appColorz, btn-#{$current-color}-border);
+	    }
+	}
+}
+
+
+