SCSS Framework

Added Search Button Icon
TODO Add Mail & Arrow Buttons

mixins/layout/buttons/_search.scss

@@ -0,0 +1,90 @@
+/*
+!!! IMPORTANT !!!
+
+AN INPUT ELEMENT MUST BE SURROUNDED WITH A
+LABEL ELEMENT FOR THIS TO WORK BECAUSE INPUT
+ELEMENTS CANNOT TAKE PSEUDO ELEMENTS LIKE
+:BEFORE AND :AFTER
+
+THIS IS THEN USED ON THE LABEL ELEMENT!
+*/
+@mixin search-symbol-button(
+  $size,
+  $background-color,
+  $symbol-color
+) {
+  //----------------------------------------
+  // Calculate the symbols'
+  // line thickness
+  $border-size: $size/10;
+  // Calculate the glass'
+  // size
+  $glass-size: $size/2;
+  // Calculate the tilt'
+  // width & height
+  //$stick-size: $size/4;
+  //
+  //$stick-tilt-size: ($stick-size/1.4142) + ($border-size / 2);
+  //$tilt-connection: ($glass-size*0.7853) + ($border-size / 2);
+  //
+  //$glass-tilt-size: $tilt-connection + $stick-tilt-size;
+  //
+  //$symbol-gutter: ($size - $glass-tilt-size)/2;
+
+  //----------------------------------------
+  // Start actual Styling
+  //----------------------------------------
+  position: relative;
+
+  top: 0;
+  left: 0;
+
+  width: $size;
+  height: $size;
+
+  border: none;
+  border-radius: $size;
+
+  background-color: $background-color;
+
+  &:before {
+    content: "";
+    display: block;
+    box-sizing: border-box;
+
+    position: absolute;
+
+    bottom:$size / 5;
+    left: $size / 3.75;
+
+    width: 0;
+    height: $size/4;
+
+    border-left: solid $border-size $symbol-color;
+
+    transform: rotate(45deg);
+
+    z-index: 10000;
+  }
+
+  &:after {
+    content: "";
+    display: block;
+    box-sizing: border-box;
+
+    position: absolute;
+
+    left: $size /3;
+    top: $size /6.667;
+
+    width: $glass-size;
+    height: $glass-size;
+
+    border: solid $border-size $symbol-color;
+    border-radius: $glass-size;
+
+    transform: rotate(45deg);
+
+    z-index: 10000;
+  }
+}