diff --git a/css/mana.css b/css/mana.css index 8bfb1a9..9fca30f 100644 --- a/css/mana.css +++ b/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)); diff --git a/index.html b/index.html index 42a494b..7a9b1db 100644 --- a/index.html +++ b/index.html @@ -146,6 +146,9 @@ +
+ +

Tap and roll symbols

diff --git a/less/cost.less b/less/cost.less index f68a17f..82b26ce 100644 --- a/less/cost.less +++ b/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+ diff --git a/less/icons.less b/less/icons.less index a59ea0a..18ce494 100644 --- a/less/icons.less +++ b/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"; } diff --git a/sass/_cost.scss b/sass/_cost.scss index d085a8a..c4b0f20 100644 --- a/sass/_cost.scss +++ b/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+