Merge pull request #137 from thomasfranz94/feature/replace-bitmap-img…

…s-with-svgs

* switch out bitmap icons for css inlined vector icons

.gitignore

@@ -1,2 +1,3 @@
 node_modules
 .idea/
+.DS_Store

dist/css/chocolat.css

@@ -1,3 +1,11 @@
+:root {
+    --chocolat-icon-left: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 32 32%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%3E    %3Ccircle cx%3D%2216%22 cy%3D%2216%22 r%3D%2216%22 fill-opacity%3D%22.2%22%2F%3E    %3Cpath d%3D%22M15.3 20.7 10.7 16l4.6-4.7m7.4 4.7h-12%22 fill%3D%22none%22 stroke%3D%22%23fff%22 stroke-width%3D%221.3%22%2F%3E%3C%2Fsvg%3E");
+    --chocolat-icon-right: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 32 32%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%3E    %3Ccircle cx%3D%2216%22 cy%3D%2216%22 r%3D%2216%22 fill-opacity%3D%22.2%22%2F%3E    %3Cpath d%3D%22m16.7 11.3 4.6 4.7-4.6 4.7M9.3 16h12%22 fill%3D%22none%22 stroke%3D%22%23fff%22 stroke-width%3D%221.3%22%2F%3E%3C%2Fsvg%3E");
+    --chocolat-icon-close: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 32 32%22 stroke-linecap%3D%22round%22%3E    %3Ccircle cx%3D%2216%22 cy%3D%2216%22 r%3D%2216%22 fill-opacity%3D%22.2%22%2F%3E    %3Cpath d%3D%22m12 12 8 8m0-8-8 8%22 fill%3D%22none%22 stroke%3D%22%23fff%22 stroke-width%3D%221.3%22%2F%3E%3C%2Fsvg%3E");
+    --chocolat-icon-loader: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2238%22 height%3D%2238%22%3E  %3Cg transform%3D%22translate(1 1)%22 stroke-width%3D%222%22 fill%3D%22none%22 fill-rule%3D%22evenodd%22%3E    %3Ccircle stroke-opacity%3D%22.2%22 stroke%3D%22%23000%22 cx%3D%2218%22 cy%3D%2218%22 r%3D%2218%22%2F%3E    %3Cpath d%3D%22M36 18C36 8 28 0 18 0%22 stroke%3D%22%23fff%22%3E      %3CanimateTransform attributeName%3D%22transform%22 type%3D%22rotate%22 from%3D%220 18 18%22 to%3D%22360 18 18%22 dur%3D%221s%22 repeatCount%3D%22indefinite%22%2F%3E    %3C%2Fpath%3E  %3C%2Fg%3E%3C%2Fsvg%3E");
+    --chocolat-icon-fullscreen: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 16 16%22%3E    %3Cg stroke%3D%22%23fff%22 fill%3D%22none%22%3E        %3Cpath d%3D%22M.5 2.5h15v11H.5z%22%2F%3E        %3Cpath d%3D%22M7.5 7.5h8v6h-8z%22%2F%3E    %3C%2Fg%3E%3C%2Fsvg%3E");
+}
+
 .chocolat-zoomable.chocolat-zoomed {
     cursor: zoom-out;
 }
@@ -45,15 +53,15 @@
 }
 .chocolat-loader {
     transition: opacity 0.3s;
-    height: 32px;
-    width: 32px;
+    height: 38px;
+    width: 38px;
     position: absolute;
     left: 50%;
     top: 50%;
-    margin-left: -16px;
-    margin-top: -16px;
+    margin-left: -19px;
+    margin-top: -19px;
     z-index: 11;
-    background: url(../images/loader.gif);
+    background: var(--chocolat-icon-loader);
     opacity: 0;
 }
 .chocolat-loader.chocolat-visible {
@@ -80,7 +88,7 @@
     width: 50px;
     height: 100px;
     cursor: pointer;
-    background: url(../images/left.png) 50% 50% no-repeat;
+    background: var(--chocolat-icon-left) 50% 50% / 2rem auto no-repeat;
     z-index: 17;
     visibility: hidden;
 }
@@ -115,7 +123,7 @@
     width: 50px;
     height: 100px;
     cursor: pointer;
-    background: url(../images/right.png) 50% 50% no-repeat;
+    background: var(--chocolat-icon-right) 50% 50% / 2rem auto no-repeat;
     z-index: 17;
     visibility: hidden;
 }
@@ -138,7 +146,7 @@
     position: absolute;
     top: 0;
     right: 0;
-    background: url(../images/close.png) 50% 50% no-repeat;
+    background: var(--chocolat-icon-close) 50% 50% / 2rem auto no-repeat;
 }
 .chocolat-wrapper .chocolat-bottom {
     height: 40px;
@@ -169,7 +177,7 @@
 .chocolat-wrapper .chocolat-fullscreen {
     width: 16px;
     height: 40px;
-    background: url(../images/fullscreen.png) 50% 50% no-repeat;
+    background: var(--chocolat-icon-fullscreen) 50% 50% / 1rem auto no-repeat;
     display: block;
     cursor: pointer;
     float: right;