All Files string sort done

src/assets/components.css

@@ -0,0 +1,88 @@
+.loader {
+  width: 64px;
+  height: 64px;
+  position: relative;
+  background-image:
+    linear-gradient(#FFF 16px, transparent 0) ,
+    linear-gradient(#FF3D00 16px, transparent 0) ,
+    linear-gradient(#FF3D00 16px, transparent 0) ,
+    linear-gradient(#FFF 16px, transparent 0);
+  background-repeat: no-repeat;
+  background-size: 16px 16px;
+  background-position: left top , left bottom , right top , right bottom;
+  animation: rotate 1s linear infinite;
+}
+@keyframes rotate {
+  0% {
+    width: 64px;
+    height: 64px;
+    transform: rotate(0deg)
+  }
+  50% {
+    width: 30px;
+    height: 30px;
+    transform: rotate(180deg)
+  }
+  100% {
+    width: 64px;
+    height: 64px;
+    transform: rotate(360deg)
+  }
+}
+
+/* toggle */
+/* <div class="toggle">
+    <input type="checkbox"/>
+    <label></label>
+</div> */
+.toggle {
+  position: relative;
+}
+.toggle input[type="checkbox"] {
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 10;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+  opacity: 0;
+}
+.toggle label {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+.toggle label:before {
+    content: '';
+    border: 5px solid #bbb;
+    height: 35px;
+    width: 70px;
+    position: relative;
+    display: inline-block;
+    border-radius: 46px;
+    transition: 0.2s ease-in;
+}
+.toggle label:after {
+    content: '';
+    position: absolute;
+    background: #555;
+    width: 28px;
+    height: 28px;
+    left: 8px;
+    top: 8px;
+    border-radius: 50%;
+    z-index: 2;
+    box-shadow: 0 0 5px #0002;
+    transition: 0.2s ease-in;
+}
+.toggle input[type="checkbox"]:hover + label:after  {
+    box-shadow: 0 2px 15px 0 #0002, 0 3px 8px 0 #0001;
+}
+.toggle input[type="checkbox"]:checked + label:before {
+  border-color: #77C2BB;
+}
+.toggle input[type="checkbox"]:checked + label:after {
+  background: #009688;
+  left: 44px;
+}