Icons added into docs, update

gerwinbeumer · gerwinbeumer · commit 0fa22e676c62 · 2016-12-12T17:00:23.000+01:00
diff --git a/dist/about.html b/dist/about.html
@@ -60,6 +60,7 @@
 		</li>
 		<li><a href="utility.html">Utility classes</a></li>
 		<li><a href="utility_spacers.html">Utility spacers</a></li>
+		<li><a href="icons.html">Icons</a></li>
 		<li><a href="buttons.html">Buttons</a></li>
 		<li><a href="notifications.html">Notifications / alerts</a></li>
 		<li><a href="mixins.html">Mixins</a></li>
diff --git a/dist/buttons.html b/dist/buttons.html
@@ -60,6 +60,7 @@
 		</li>
 		<li><a href="utility.html">Utility classes</a></li>
 		<li><a href="utility_spacers.html">Utility spacers</a></li>
+		<li><a href="icons.html">Icons</a></li>
 		<li><a href="buttons.html">Buttons</a></li>
 		<li><a href="notifications.html">Notifications / alerts</a></li>
 		<li><a href="mixins.html">Mixins</a></li>
diff --git a/dist/css/styles.min.css b/dist/css/styles.min.css
diff --git a/dist/css/styles.min.css.map b/dist/css/styles.min.css.map
diff --git a/dist/grid.html b/dist/grid.html
@@ -61,6 +61,7 @@
 		</li>
 		<li><a href="utility.html">Utility classes</a></li>
 		<li><a href="utility_spacers.html">Utility spacers</a></li>
+		<li><a href="icons.html">Icons</a></li>
 		<li><a href="buttons.html">Buttons</a></li>
 		<li><a href="notifications.html">Notifications / alerts</a></li>
 		<li><a href="mixins.html">Mixins</a></li>
diff --git a/dist/icons.html b/dist/icons.html
diff --git a/dist/index.html b/dist/index.html
@@ -60,6 +60,7 @@
 		</li>
 		<li><a href="utility.html">Utility classes</a></li>
 		<li><a href="utility_spacers.html">Utility spacers</a></li>
+		<li><a href="icons.html">Icons</a></li>
 		<li><a href="buttons.html">Buttons</a></li>
 		<li><a href="notifications.html">Notifications / alerts</a></li>
 		<li><a href="mixins.html">Mixins</a></li>
diff --git a/dist/installation.html b/dist/installation.html
@@ -60,6 +60,7 @@
 		</li>
 		<li><a href="utility.html">Utility classes</a></li>
 		<li><a href="utility_spacers.html">Utility spacers</a></li>
+		<li><a href="icons.html">Icons</a></li>
 		<li><a href="buttons.html">Buttons</a></li>
 		<li><a href="notifications.html">Notifications / alerts</a></li>
 		<li><a href="mixins.html">Mixins</a></li>
diff --git a/dist/mixins.html b/dist/mixins.html
@@ -60,6 +60,7 @@
 		</li>
 		<li><a href="utility.html">Utility classes</a></li>
 		<li><a href="utility_spacers.html">Utility spacers</a></li>
+		<li><a href="icons.html">Icons</a></li>
 		<li><a href="buttons.html">Buttons</a></li>
 		<li><a href="notifications.html">Notifications / alerts</a></li>
 		<li><a href="mixins.html">Mixins</a></li>
diff --git a/dist/notifications.html b/dist/notifications.html
@@ -60,6 +60,7 @@
 		</li>
 		<li><a href="utility.html">Utility classes</a></li>
 		<li><a href="utility_spacers.html">Utility spacers</a></li>
+		<li><a href="icons.html">Icons</a></li>
 		<li><a href="buttons.html">Buttons</a></li>
 		<li><a href="notifications.html">Notifications / alerts</a></li>
 		<li><a href="mixins.html">Mixins</a></li>
diff --git a/dist/utility.html b/dist/utility.html
@@ -60,6 +60,7 @@
 		</li>
 		<li><a href="utility.html">Utility classes</a></li>
 		<li><a href="utility_spacers.html">Utility spacers</a></li>
+		<li><a href="icons.html">Icons</a></li>
 		<li><a href="buttons.html">Buttons</a></li>
 		<li><a href="notifications.html">Notifications / alerts</a></li>
 		<li><a href="mixins.html">Mixins</a></li>
diff --git a/dist/utility_spacers.html b/dist/utility_spacers.html
@@ -60,6 +60,7 @@
 		</li>
 		<li><a href="utility.html">Utility classes</a></li>
 		<li><a href="utility_spacers.html">Utility spacers</a></li>
+		<li><a href="icons.html">Icons</a></li>
 		<li><a href="buttons.html">Buttons</a></li>
 		<li><a href="notifications.html">Notifications / alerts</a></li>
 		<li><a href="mixins.html">Mixins</a></li>
diff --git a/dist/variables.html b/dist/variables.html
@@ -60,6 +60,7 @@
 		</li>
 		<li><a href="utility.html">Utility classes</a></li>
 		<li><a href="utility_spacers.html">Utility spacers</a></li>
+		<li><a href="icons.html">Icons</a></li>
 		<li><a href="buttons.html">Buttons</a></li>
 		<li><a href="notifications.html">Notifications / alerts</a></li>
 		<li><a href="mixins.html">Mixins</a></li>
diff --git a/dist/variables_1x.html b/dist/variables_1x.html
@@ -60,6 +60,7 @@
 		</li>
 		<li><a href="utility.html">Utility classes</a></li>
 		<li><a href="utility_spacers.html">Utility spacers</a></li>
+		<li><a href="icons.html">Icons</a></li>
 		<li><a href="buttons.html">Buttons</a></li>
 		<li><a href="notifications.html">Notifications / alerts</a></li>
 		<li><a href="mixins.html">Mixins</a></li>
diff --git a/scss/layout/icons_layout.scss b/scss/layout/icons_layout.scss
@@ -1,28 +1,35 @@
 .icon {
+	position: relative;
 	display: inline-block;
-	margin-bottom: $margin-default;
-	width: 7.5rem; height: 7.5rem;
-	font-size: 2.4rem; 
-	line-height: 7.5rem;
+	padding-bottom: 100%;
+	width: 100%; height: 0;
+	font-size: 2.8rem; 
 	background: $color03;
+
+	 > * {
+	 	position: absolute; top: 50%; left: 50%;
+    	margin-right: -50%;
+	 	transform: translate(-50%, -50%);
+	 }
 }
 
 .icon-social {
-	display: inline-block;
-	margin-bottom: $margin-default;
-	width: 5.5rem; height: 5.5rem;
+	@extend .icon;
 	border-radius: 50%; border: 1px solid $theme02;
-	font-size: 2.4rem; line-height: 4.5rem;
-	color: $theme02;
+	font-size: 2.4rem;
 	background: $color01;
 	transition: all .2s ease-out;
 
-	> * {
-		vertical-align: middle;
-	}
-
 	&:hover {
 		border: 1px solid $theme01;
 		color: $theme01;
 	}
 }
+
+@media only screen and ( min-width: $b5 ) {
+	.icon-social {
+		padding-bottom: 80%;
+		width: 80%;
+	}
+}
+
diff --git a/views/icons.html b/views/icons.html
