Initial info

_sass/minimal-mistakes/_h-nyc-subway-icons.scss

@@ -0,0 +1,82 @@
+$mta-red: #df0000;
+$mta-green: #008700;
+$mta-blue: #0a5786;
+$mta-orange: #de3700;
+$mta-purple: #5a045a;
+$mta-green-2: #4f8403;
+$mta-yellow: #FCCC0A;
+$mta-gray: #666;
+$mta-brown: #573208;
+
+$subways: (mta-red: $mta-red,
+mta-green: $mta-green,
+mta-blue: $mta-blue,
+mta-orange: $mta-orange,
+mta-purple: $mta-purple,
+mta-green-2: $mta-green-2,
+mta-yellow: $mta-yellow,
+mta-gray: $mta-gray,
+mta-brown: $mta-brown);
+
+$icon-padding: 0.4em;
+
+[class*="subway-icon"] {
+    position: relative;
+    font-size: .75em;
+    z-index: 5;
+    height: 1em;
+    width: 1em;
+    line-height: 1em;
+    margin-left: $icon-padding/2;
+    margin-right: $icon-padding/2;
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+    text-align: center;
+    font-weight: bold;
+    text-transform: uppercase;
+    color: #000;
+
+    &::before {
+        content: "";
+        position: absolute;
+        z-index: -1;
+        width: calc(100% + #{$icon-padding});
+        height: calc(100% + #{$icon-padding});
+        left: -($icon-padding / 2);
+        top: -($icon-padding / 2);
+        border-radius: 50%;
+        background-color: red;
+    }
+
+    &.express {
+        margin-left: $icon-padding/1.5;
+        margin-right: $icon-padding/1.5;
+
+        &::before {
+            transform: rotate(45deg);
+            border-radius: 0;
+            width: calc(100% + #{$icon-padding / 4});
+            height: calc(100% + #{$icon-padding / 4});
+            left: -($icon-padding / 8);
+            top: -($icon-padding / 8);
+        }
+    }
+}
+
+@each $value1,
+$value2 in $subways {
+    .#{$value1} {
+        &::before {
+            background-color: $value2;
+        }
+
+        @if $value2==$mta-yellow {
+            color: #000;
+        }
+
+        @else {
+            color: #fff;
+        }
+    }
+}