organize scss

src/scss/misc.scss

@@ -0,0 +1,71 @@
+@import "variables.scss";
+
+.monospaced {
+    font-family: $font-family-monospace;
+}
+
+.sr-only {
+    position: absolute !important;
+    width: 1px !important;
+    height: 1px !important;
+    padding: 0 !important;
+    margin: -1px !important;
+    overflow: hidden !important;
+    clip: rect(0, 0, 0, 0) !important;
+    border: 0 !important;
+}
+
+.totp {
+    .totp-code {
+        font-family: $font-family-monospace;
+        font-size: 1.1em;
+    }
+
+    .totp-countdown {
+        margin: 3px 3px 0 0;
+        display: block;
+        user-select: none;
+        float: right;
+
+        .totp-sec {
+            font-size: 0.85em;
+            position: absolute;
+            line-height: 32px;
+            width: 32px;
+            text-align: center;
+        }
+
+        svg {
+            width: 32px;
+            height: 32px;
+            transform: rotate(-90deg);
+        }
+
+        .totp-circle {
+            stroke: $brand-primary;
+            fill: none;
+
+            &.inner {
+                stroke-width: 3;
+                stroke-dasharray: 78.6;
+                stroke-dashoffset: 0;
+            }
+
+            &.outer {
+                stroke-width: 2;
+                stroke-dasharray: 88;
+                stroke-dashoffset: 0;
+            }
+        }
+    }
+
+    &.low {
+        .totp-sec, .totp-code {
+            color: $brand-danger;
+        }
+
+        .totp-circle {
+            stroke: $brand-danger;
+        }
+    }
+}