Phyrexian-split mana

GUP and GWP mana classes. Those symbols appear in "Tamiyo, Compleated Sage
" (NEO) and "Ajani, Sleeper Agent" (DMU) respectively

css/mana.css

@@ -123,7 +123,11 @@
 .ms-up::before,
 .ms-bp::before,
 .ms-rp::before,
-.ms-gp::before {
+.ms-gp::before,
+.ms-gup::before,
+.ms-gup::after,
+.ms-gwp::before,
+.ms-gwp::after {
   content: "\e618";
 }
 .ms-s::before {
@@ -723,7 +727,9 @@
 .ms-cost.ms-2u,
 .ms-cost.ms-2b,
 .ms-cost.ms-2r,
-.ms-cost.ms-2g {
+.ms-cost.ms-2g,
+.ms-cost.ms-gup,
+.ms-cost.ms-gwp {
   position: relative;
   width: 1.3em;
   height: 1.3em;
@@ -743,6 +749,8 @@
 .ms-cost.ms-2b::before,
 .ms-cost.ms-2r::before,
 .ms-cost.ms-2g::before,
+.ms-cost.ms-gup::before,
+.ms-cost.ms-gwp::before,
 .ms-cost.ms-wu::after,
 .ms-cost.ms-wb::after,
 .ms-cost.ms-ub::after,
@@ -757,7 +765,9 @@
 .ms-cost.ms-2u::after,
 .ms-cost.ms-2b::after,
 .ms-cost.ms-2r::after,
-.ms-cost.ms-2g::after {
+.ms-cost.ms-2g::after,
+.ms-cost.ms-gup::after,
+.ms-cost.ms-gwp::after {
   font-size: 0.55em !important;
   position: absolute;
 }
@@ -775,7 +785,9 @@
 .ms-cost.ms-2u::before,
 .ms-cost.ms-2b::before,
 .ms-cost.ms-2r::before,
-.ms-cost.ms-2g::before {
+.ms-cost.ms-2g::before,
+.ms-cost.ms-gup::before,
+.ms-cost.ms-gwp::before {
   top: -0.38em;
   left: 0.28em;
 }
@@ -793,7 +805,9 @@
 .ms-cost.ms-2u::after,
 .ms-cost.ms-2b::after,
 .ms-cost.ms-2r::after,
-.ms-cost.ms-2g::after {
+.ms-cost.ms-2g::after,
+.ms-cost.ms-gup::after,
+.ms-cost.ms-gwp::after {
   top: 0.5em;
   left: 1em;
 }
@@ -877,7 +891,8 @@
   background: linear-gradient(135deg, #db8664 0%, #db8664 50%, #93b483 50%, #93b483 100%);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#db8664', endColorstr='#93b483', GradientType=1);
 }
-.ms-cost.ms-gw {
+.ms-cost.ms-gw,
+.ms-cost.ms-gwp {
   background: #93b483;
   background: -moz-linear-gradient(-45deg, #93b483 0%, #93b483 50%, #edf2b0 50%, #edf2b0 100%);
   background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #93b483), color-stop(50%, #93b483), color-stop(50%, #edf2b0), color-stop(100%, #edf2b0));
@@ -887,7 +902,8 @@
   background: linear-gradient(135deg, #93b483 0%, #93b483 50%, #edf2b0 50%, #edf2b0 100%);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#93b483', endColorstr='#edf2b0', GradientType=1);
 }
-.ms-cost.ms-gu {
+.ms-cost.ms-gu,
+.ms-cost.ms-gup {
   background: #93b483;
   background: -moz-linear-gradient(-45deg, #93b483 0%, #93b483 50%, #b5cde3 50%, #b5cde3 100%);
   background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #93b483), color-stop(50%, #93b483), color-stop(50%, #b5cde3), color-stop(100%, #b5cde3));

index.html

@@ -146,6 +146,9 @@
             <i class="ms ms-2b ms-cost ms-shadow"></i>
             <i class="ms ms-2r ms-cost ms-shadow"></i>
             <i class="ms ms-2g ms-cost ms-shadow"></i>
+            <br />
+            <i class="ms ms-gup ms-cost ms-shadow"></i>
+            <i class="ms ms-gwp ms-cost ms-shadow"></i>
         </p>
         <h3>Tap and roll symbols</h3>
         <p>

less/cost.less

@@ -49,7 +49,9 @@
     &.@{ms-prefix}-2u,
     &.@{ms-prefix}-2b,
     &.@{ms-prefix}-2r,
-    &.@{ms-prefix}-2g {
+    &.@{ms-prefix}-2g,
+    &.@{ms-prefix}-gup,
+    &.@{ms-prefix}-gwp {
         position: relative;
         width: 1.3em;
         height: 1.3em;
@@ -147,7 +149,8 @@
         background: linear-gradient(135deg,  #db8664 0%,#db8664 50%,#93b483 50%,#93b483 100%); // W3C
         filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#db8664', endColorstr='#93b483',GradientType=1 ); // IE6-9 fallback on horizontal gradient
     }
-    &.@{ms-prefix}-gw {
+    &.@{ms-prefix}-gw,
+    &.@{ms-prefix}-gwp {
         background: #93b483; // Old browsers
         background: -moz-linear-gradient(-45deg,  #93b483 0%, #93b483 50%, #edf2b0 50%, #edf2b0 100%); // FF3.6+
         background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#93b483), color-stop(50%,#93b483), color-stop(50%,#edf2b0), color-stop(100%,#edf2b0)); // Chrome,Safari4+
@@ -157,7 +160,8 @@
         background: linear-gradient(135deg,  #93b483 0%,#93b483 50%,#edf2b0 50%,#edf2b0 100%); // W3C
         filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#93b483', endColorstr='#edf2b0',GradientType=1 ); // IE6-9 fallback on horizontal gradient
     }
-    &.@{ms-prefix}-gu {
+    &.@{ms-prefix}-gu,
+    &.@{ms-prefix}-gup {
         background: #93b483; // Old browsers
         background: -moz-linear-gradient(-45deg,  #93b483 0%, #93b483 50%, #b5cde3 50%, #b5cde3 100%); // FF3.6+
         background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#93b483), color-stop(50%,#93b483), color-stop(50%,#b5cde3), color-stop(100%,#b5cde3)); // Chrome,Safari4+

less/icons.less

@@ -39,7 +39,11 @@
     &-up::before,
     &-bp::before,
     &-rp::before,
-    &-gp::before { content: "\e618"; }
+    &-gp::before,
+    &-gup::before,
+    &-gup::after,
+    &-gwp::before,
+    &-gwp::after { content: "\e618"; }
     &-s::before { content: "\e619"; }
     &-s-mtga::before { content: "\e996"; }
     &-c::before { content: "\e904"; }

sass/_cost.scss

@@ -48,7 +48,9 @@
     &.#{$ms-prefix}-2u,
     &.#{$ms-prefix}-2b,
     &.#{$ms-prefix}-2r,
-    &.#{$ms-prefix}-2g {
+    &.#{$ms-prefix}-2g,
+    &.#{$ms-prefix}-gup,
+    &.#{$ms-prefix}-gwp {
         position: relative;
         width: 1.3em;
         height: 1.3em;
@@ -146,7 +148,8 @@
         background: linear-gradient(135deg,  #db8664 0%,#db8664 50%,#93b483 50%,#93b483 100%); // W3C
         filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#db8664', endColorstr='#93b483',GradientType=1 ); // IE6-9 fallback on horizontal gradient
     }
-    &.#{$ms-prefix}-gw {
+    &.#{$ms-prefix}-gw,
+    &.#{$ms-prefix}-gwp {
         background: #93b483; // Old browsers
         background: -moz-linear-gradient(-45deg,  #93b483 0%, #93b483 50%, #edf2b0 50%, #edf2b0 100%); // FF3.6+
         background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#93b483), color-stop(50%,#93b483), color-stop(50%,#edf2b0), color-stop(100%,#edf2b0)); // Chrome,Safari4+
@@ -156,7 +159,8 @@
         background: linear-gradient(135deg,  #93b483 0%,#93b483 50%,#edf2b0 50%,#edf2b0 100%); // W3C
         filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#93b483', endColorstr='#edf2b0',GradientType=1 ); // IE6-9 fallback on horizontal gradient
     }
-    &.#{$ms-prefix}-gu {
+    &.#{$ms-prefix}-gu,
+    &.#{$ms-prefix}-gup {
         background: #93b483; // Old browsers
         background: -moz-linear-gradient(-45deg,  #93b483 0%, #93b483 50%, #b5cde3 50%, #b5cde3 100%); // FF3.6+
         background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#93b483), color-stop(50%,#93b483), color-stop(50%,#b5cde3), color-stop(100%,#b5cde3)); // Chrome,Safari4+