From 1d9e5da9ee69548577254485b0e1da40938701ae Mon Sep 17 00:00:00 2001 From: Titouan BENOIT Date: Thu, 23 Mar 2017 08:56:41 +0100 Subject: [PATCH] First scss convertion --- sass/_core.scss | 14 +++ sass/_cost.scss | 292 +++++++++++++++++++++++++++++++++++++++++++ sass/_dfc.scss | 9 ++ sass/_icons.scss | 146 ++++++++++++++++++++++ sass/_loyalty.scss | 91 ++++++++++++++ sass/_path.scss | 21 ++++ sass/_sizes.scss | 8 ++ sass/_variables.scss | 8 ++ sass/mana.scss | 8 ++ 9 files changed, 597 insertions(+) create mode 100644 sass/_core.scss create mode 100644 sass/_cost.scss create mode 100644 sass/_dfc.scss create mode 100644 sass/_icons.scss create mode 100644 sass/_loyalty.scss create mode 100644 sass/_path.scss create mode 100644 sass/_sizes.scss create mode 100644 sass/_variables.scss create mode 100644 sass/mana.scss diff --git a/sass/_core.scss b/sass/_core.scss new file mode 100644 index 0000000..6a2b417 --- /dev/null +++ b/sass/_core.scss @@ -0,0 +1,14 @@ +.#{$ms-prefix} { + display: inline-block; + font: normal normal normal $ms-font-size-base/1 Mana; + font-size: inherit; + line-height: 1em; + text-rendering: auto; + transform: translate(0, 0); + speak: none; + text-transform: none; + vertical-align: middle; + // Better font rendering + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} diff --git a/sass/_cost.scss b/sass/_cost.scss new file mode 100644 index 0000000..c366381 --- /dev/null +++ b/sass/_cost.scss @@ -0,0 +1,292 @@ +/** + * Mana cost styles */ + +.#{$ms-prefix}-cost { + + // Base cost styles + background-color: #BEB9B2; + border-radius: 1em; + color: #111; + font-size: 0.95em; + width: 1.3em; + height: 1.3em; + line-height: 1.35em; + text-align: center; + + // Single symbols + &.#{$ms-prefix}-w, + &.#{$ms-prefix}-wp { + background-color: #F0F2C0; + } + &.#{$ms-prefix}-u, + &.#{$ms-prefix}-up { + background-color: #B5CDE3; + } + &.#{$ms-prefix}-b, + &.#{$ms-prefix}-bp { + background-color: #ACA29A; + } + &.#{$ms-prefix}-r, + &.#{$ms-prefix}-rp { + background-color: #DB8664; + } + &.#{$ms-prefix}-g, + &.#{$ms-prefix}-gp { + background-color: #93B483; + } + + // Split symbols + &.#{$ms-prefix}-wu { + background: #edf2b0; // Old browsers + background: -moz-linear-gradient(-45deg, #edf2b0 0%, #edf2b0 50%, #a6c1dd 50%, #a6c1dd 100%); // FF3.6+ + background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#edf2b0), color-stop(50%,#edf2b0), color-stop(50%,#a6c1dd), color-stop(100%,#a6c1dd)); // Chrome,Safari4+ + background: -webkit-linear-gradient(-45deg, #edf2b0 0%,#edf2b0 50%,#a6c1dd 50%,#a6c1dd 100%); // Chrome10+,Safari5.1+ + background: -o-linear-gradient(-45deg, #edf2b0 0%,#edf2b0 50%,#a6c1dd 50%,#a6c1dd 100%); // Opera 11.10+ + background: -ms-linear-gradient(-45deg, #edf2b0 0%,#edf2b0 50%,#a6c1dd 50%,#a6c1dd 100%); // IE10+ + background: linear-gradient(135deg, #edf2b0 0%,#edf2b0 50%,#a6c1dd 50%,#a6c1dd 100%); // W3C + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#edf2b0', endColorstr='#a6c1dd',GradientType=1 ); // IE6-9 fallback on horizontal gradient + } + &.#{$ms-prefix}-wb { + background: #edf2b0; // Old browsers + background: -moz-linear-gradient(-45deg, #edf2b0 0%, #edf2b0 50%, #9c9188 50%, #9c9188 100%); // FF3.6+ + background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#edf2b0), color-stop(50%,#edf2b0), color-stop(50%,#9c9188), color-stop(100%,#9c9188)); // Chrome,Safari4+ + background: -webkit-linear-gradient(-45deg, #edf2b0 0%,#edf2b0 50%,#9c9188 50%,#9c9188 100%); // Chrome10+,Safari5.1+ + background: -o-linear-gradient(-45deg, #edf2b0 0%,#edf2b0 50%,#9c9188 50%,#9c9188 100%); // Opera 11.10+ + background: -ms-linear-gradient(-45deg, #edf2b0 0%,#edf2b0 50%,#9c9188 50%,#9c9188 100%); // IE10+ + background: linear-gradient(135deg, #edf2b0 0%,#edf2b0 50%,#9c9188 50%,#9c9188 100%); // W3C + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#edf2b0', endColorstr='#9c9188',GradientType=1 ); // IE6-9 fallback on horizontal gradient + } + &.#{$ms-prefix}-ub { + background: #a6c1dd; // Old browsers + background: -moz-linear-gradient(-45deg, #a6c1dd 0%, #a6c1dd 50%, #9c9188 50%, #9c9188 100%); // FF3.6+ + background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#a6c1dd), color-stop(50%,#a6c1dd), color-stop(50%,#9c9188), color-stop(100%,#9c9188)); // Chrome,Safari4+ + background: -webkit-linear-gradient(-45deg, #a6c1dd 0%,#a6c1dd 50%,#9c9188 50%,#9c9188 100%); // Chrome10+,Safari5.1+ + background: -o-linear-gradient(-45deg, #a6c1dd 0%,#a6c1dd 50%,#9c9188 50%,#9c9188 100%); // Opera 11.10+ + background: -ms-linear-gradient(-45deg, #a6c1dd 0%,#a6c1dd 50%,#9c9188 50%,#9c9188 100%); // IE10+ + background: linear-gradient(135deg, #a6c1dd 0%,#a6c1dd 50%,#9c9188 50%,#9c9188 100%); // W3C + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6c1dd', endColorstr='#9c9188',GradientType=1 ); // IE6-9 fallback on horizontal gradient + } + &.#{$ms-prefix}-ur { + background: #a6c1dd; // Old browsers + background: -moz-linear-gradient(-45deg, #a6c1dd 0%, #a6c1dd 50%, #db8664 50%, #db8664 100%); // FF3.6+ + background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#a6c1dd), color-stop(50%,#a6c1dd), color-stop(50%,#db8664), color-stop(100%,#db8664)); // Chrome,Safari4+ + background: -webkit-linear-gradient(-45deg, #a6c1dd 0%,#a6c1dd 50%,#db8664 50%,#db8664 100%); // Chrome10+,Safari5.1+ + background: -o-linear-gradient(-45deg, #a6c1dd 0%,#a6c1dd 50%,#db8664 50%,#db8664 100%); // Opera 11.10+ + background: -ms-linear-gradient(-45deg, #a6c1dd 0%,#a6c1dd 50%,#db8664 50%,#db8664 100%); // IE10+ + background: linear-gradient(135deg, #a6c1dd 0%,#a6c1dd 50%,#db8664 50%,#db8664 100%); // W3C + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6c1dd', endColorstr='#db8664',GradientType=1 ); // IE6-9 fallback on horizontal gradient + } + &.#{$ms-prefix}-br { + background: #aca29a; // Old browsers + background: -moz-linear-gradient(-45deg, #aca29a 0%, #aca29a 50%, #db8664 50%, #db8664 100%); // FF3.6+ + background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#aca29a), color-stop(50%,#aca29a), color-stop(50%,#db8664), color-stop(100%,#db8664)); // Chrome,Safari4+ + background: -webkit-linear-gradient(-45deg, #aca29a 0%,#aca29a 50%,#db8664 50%,#db8664 100%); // Chrome10+,Safari5.1+ + background: -o-linear-gradient(-45deg, #aca29a 0%,#aca29a 50%,#db8664 50%,#db8664 100%); // Opera 11.10+ + background: -ms-linear-gradient(-45deg, #aca29a 0%,#aca29a 50%,#db8664 50%,#db8664 100%); // IE10+ + background: linear-gradient(135deg, #aca29a 0%,#aca29a 50%,#db8664 50%,#db8664 100%); // W3C + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aca29a', endColorstr='#db8664',GradientType=1 ); // IE6-9 fallback on horizontal gradient + } + &.#{$ms-prefix}-bg { + background: #aca29a; // Old browsers + background: -moz-linear-gradient(-45deg, #aca29a 0%, #aca29a 50%, #93b483 50%, #93b483 100%); // FF3.6+ + background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#aca29a), color-stop(50%,#aca29a), color-stop(50%,#93b483), color-stop(100%,#93b483)); // Chrome,Safari4+ + background: -webkit-linear-gradient(-45deg, #aca29a 0%,#aca29a 50%,#93b483 50%,#93b483 100%); // Chrome10+,Safari5.1+ + background: -o-linear-gradient(-45deg, #aca29a 0%,#aca29a 50%,#93b483 50%,#93b483 100%); // Opera 11.10+ + background: -ms-linear-gradient(-45deg, #aca29a 0%,#aca29a 50%,#93b483 50%,#93b483 100%); // IE10+ + background: linear-gradient(135deg, #aca29a 0%,#aca29a 50%,#93b483 50%,#93b483 100%); // W3C + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aca29a', endColorstr='#93b483',GradientType=1 ); // IE6-9 fallback on horizontal gradient + } + &.#{$ms-prefix}-rw { + background: #db8664; // Old browsers + background: -moz-linear-gradient(-45deg, #db8664 0%, #db8664 50%, #edf2b0 50%, #edf2b0 100%); // FF3.6+ + background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#db8664), color-stop(50%,#db8664), color-stop(50%,#edf2b0), color-stop(100%,#edf2b0)); // Chrome,Safari4+ + background: -webkit-linear-gradient(-45deg, #db8664 0%,#db8664 50%,#edf2b0 50%,#edf2b0 100%); // Chrome10+,Safari5.1+ + background: -o-linear-gradient(-45deg, #db8664 0%,#db8664 50%,#edf2b0 50%,#edf2b0 100%); // Opera 11.10+ + background: -ms-linear-gradient(-45deg, #db8664 0%,#db8664 50%,#edf2b0 50%,#edf2b0 100%); // IE10+ + background: linear-gradient(135deg, #db8664 0%,#db8664 50%,#edf2b0 50%,#edf2b0 100%); // W3C + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#db8664', endColorstr='#edf2b0',GradientType=1 ); // IE6-9 fallback on horizontal gradient + } + &.#{$ms-prefix}-rg { + background: #db8664; // Old browsers + background: -moz-linear-gradient(-45deg, #db8664 0%, #db8664 50%, #93b483 50%, #93b483 100%); // FF3.6+ + background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#db8664), color-stop(50%,#db8664), color-stop(50%,#93b483), color-stop(100%,#93b483)); // Chrome,Safari4+ + background: -webkit-linear-gradient(-45deg, #db8664 0%,#db8664 50%,#93b483 50%,#93b483 100%); // Chrome10+,Safari5.1+ + background: -o-linear-gradient(-45deg, #db8664 0%,#db8664 50%,#93b483 50%,#93b483 100%); // Opera 11.10+ + background: -ms-linear-gradient(-45deg, #db8664 0%,#db8664 50%,#93b483 50%,#93b483 100%); // IE10+ + 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 { + 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+ + background: -webkit-linear-gradient(-45deg, #93b483 0%,#93b483 50%,#edf2b0 50%,#edf2b0 100%); // Chrome10+,Safari5.1+ + background: -o-linear-gradient(-45deg, #93b483 0%,#93b483 50%,#edf2b0 50%,#edf2b0 100%); // Opera 11.10+ + background: -ms-linear-gradient(-45deg, #93b483 0%,#93b483 50%,#edf2b0 50%,#edf2b0 100%); // IE10+ + 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 { + 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+ + background: -webkit-linear-gradient(-45deg, #93b483 0%,#93b483 50%,#b5cde3 50%,#b5cde3 100%); // Chrome10+,Safari5.1+ + background: -o-linear-gradient(-45deg, #93b483 0%,#93b483 50%,#b5cde3 50%,#b5cde3 100%); // Opera 11.10+ + background: -ms-linear-gradient(-45deg, #93b483 0%,#93b483 50%,#b5cde3 50%,#b5cde3 100%); // IE10+ + background: linear-gradient(135deg, #93b483 0%,#93b483 50%,#b5cde3 50%,#b5cde3 100%); // W3C + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#93b483', endColorstr='#b5cde3',GradientType=1 ); // IE6-9 fallback on horizontal gradient + } + &.#{$ms-prefix}-2w { + background: #beb9b2; // Old browsers + background: -moz-linear-gradient(-45deg, #beb9b2 0%, #beb9b2 50%, #edf2b0 50%, #edf2b0 100%); // FF3.6+ + background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#beb9b2), color-stop(50%,#beb9b2), color-stop(50%,#edf2b0), color-stop(100%,#edf2b0)); // Chrome,Safari4+ + background: -webkit-linear-gradient(-45deg, #beb9b2 0%,#beb9b2 50%,#edf2b0 50%,#edf2b0 100%); // Chrome10+,Safari5.1+ + background: -o-linear-gradient(-45deg, #beb9b2 0%,#beb9b2 50%,#edf2b0 50%,#edf2b0 100%); // Opera 11.10+ + background: -ms-linear-gradient(-45deg, #beb9b2 0%,#beb9b2 50%,#edf2b0 50%,#edf2b0 100%); // IE10+ + background: linear-gradient(135deg, #beb9b2 0%,#beb9b2 50%,#edf2b0 50%,#edf2b0 100%); // W3C + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#beb9b2', endColorstr='#edf2b0',GradientType=1 ); // IE6-9 fallback on horizontal gradient + } + &.#{$ms-prefix}-2u { + background: #beb9b2; // Old browsers + background: -moz-linear-gradient(-45deg, #beb9b2 0%, #beb9b2 50%, #b5cde3 50%, #b5cde3 100%); // FF3.6+ + background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#beb9b2), color-stop(50%,#beb9b2), color-stop(50%,#b5cde3), color-stop(100%,#b5cde3)); // Chrome,Safari4+ + background: -webkit-linear-gradient(-45deg, #beb9b2 0%,#beb9b2 50%,#b5cde3 50%,#b5cde3 100%); // Chrome10+,Safari5.1+ + background: -o-linear-gradient(-45deg, #beb9b2 0%,#beb9b2 50%,#b5cde3 50%,#b5cde3 100%); // Opera 11.10+ + background: -ms-linear-gradient(-45deg, #beb9b2 0%,#beb9b2 50%,#b5cde3 50%,#b5cde3 100%); // IE10+ + background: linear-gradient(135deg, #beb9b2 0%,#beb9b2 50%,#b5cde3 50%,#b5cde3 100%); // W3C + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#beb9b2', endColorstr='#b5cde3',GradientType=1 ); // IE6-9 fallback on horizontal gradient + } + &.#{$ms-prefix}-2b { + background: #beb9b2; // Old browsers + background: -moz-linear-gradient(-45deg, #beb9b2 0%, #beb9b2 50%, #9c9188 50%, #9c9188 100%); // FF3.6+ + background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#beb9b2), color-stop(50%,#beb9b2), color-stop(50%,#9c9188), color-stop(100%,#9c9188)); // Chrome,Safari4+ + background: -webkit-linear-gradient(-45deg, #beb9b2 0%,#beb9b2 50%,#9c9188 50%,#9c9188 100%); // Chrome10+,Safari5.1+ + background: -o-linear-gradient(-45deg, #beb9b2 0%,#beb9b2 50%,#9c9188 50%,#9c9188 100%); // Opera 11.10+ + background: -ms-linear-gradient(-45deg, #beb9b2 0%,#beb9b2 50%,#9c9188 50%,#9c9188 100%); // IE10+ + background: linear-gradient(135deg, #beb9b2 0%,#beb9b2 50%,#9c9188 50%,#9c9188 100%); // W3C + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#beb9b2', endColorstr='#9c9188',GradientType=1 ); // IE6-9 fallback on horizontal gradient + } + &.#{$ms-prefix}-2r { + background: #beb9b2; // Old browsers + background: -moz-linear-gradient(-45deg, #beb9b2 0%, #beb9b2 50%, #db8664 50%, #db8664 100%); // FF3.6+ + background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#beb9b2), color-stop(50%,#beb9b2), color-stop(50%,#db8664), color-stop(100%,#db8664)); // Chrome,Safari4+ + background: -webkit-linear-gradient(-45deg, #beb9b2 0%,#beb9b2 50%,#db8664 50%,#db8664 100%); // Chrome10+,Safari5.1+ + background: -o-linear-gradient(-45deg, #beb9b2 0%,#beb9b2 50%,#db8664 50%,#db8664 100%); // Opera 11.10+ + background: -ms-linear-gradient(-45deg, #beb9b2 0%,#beb9b2 50%,#db8664 50%,#db8664 100%); // IE10+ + background: linear-gradient(135deg, #beb9b2 0%,#beb9b2 50%,#db8664 50%,#db8664 100%); // W3C + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#beb9b2', endColorstr='#db8664',GradientType=1 ); // IE6-9 fallback on horizontal gradient + } + &.#{$ms-prefix}-2g { + background: #beb9b2; // Old browsers + background: -moz-linear-gradient(-45deg, #beb9b2 0%, #beb9b2 50%, #93b483 50%, #93b483 100%); // FF3.6+ + background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#beb9b2), color-stop(50%,#beb9b2), color-stop(50%,#93b483), color-stop(100%,#93b483)); // Chrome,Safari4+ + background: -webkit-linear-gradient(-45deg, #beb9b2 0%,#beb9b2 50%,#93b483 50%,#93b483 100%); // Chrome10+,Safari5.1+ + background: -o-linear-gradient(-45deg, #beb9b2 0%,#beb9b2 50%,#93b483 50%,#93b483 100%); // Opera 11.10+ + background: -ms-linear-gradient(-45deg, #beb9b2 0%,#beb9b2 50%,#93b483 50%,#93b483 100%); // IE10+ + background: linear-gradient(135deg, #beb9b2 0%,#beb9b2 50%,#93b483 50%,#93b483 100%); // W3C + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#beb9b2', endColorstr='#93b483',GradientType=1 ); // IE6-9 fallback on horizontal gradient + } + + // Phyrexian mana and size increases + &.#{$ms-prefix}-p:before, + &.#{$ms-prefix}-wp:before, + &.#{$ms-prefix}-up:before, + &.#{$ms-prefix}-bp:before, + &.#{$ms-prefix}-rp:before, + &.#{$ms-prefix}-gp:before { + display: inline-block; + -moz-transform: scale( 1.2, 1.2 ); + -webkit-transform: scale( 1.2, 1.2 ); + transform: scale( 1.2, 1.2 ); + } + + // Alternate tap + &.#{$ms-prefix}-tap-alt:before { + display: inline-block; + -moz-transform: scale( 1.2, 1.2 ); + -webkit-transform: scale( 1.2, 1.2 ); + transform: scale( 1.2, 1.2 ); + padding-left: .06em; + padding-bottom: 0.10em; + } + + // Snow mana + &.#{$ms-prefix}-s:before { + color: #fff; + -webkit-text-stroke: 2px #fff; + font-size: 0.85em; + top: -0.05em; + position: relative; + display: inline-block; + } + &.#{$ms-prefix}-s:after { + //text-shadow: -1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, 1px 1px 0 #fff; + content: "\e619"; + position: absolute; + color: #333; + margin-left: -0.9em; + font-size: 1.1em; + } + + // Tap symbols + &.#{$ms-prefix}-untap { + background-color: #111; + color: #fff; + } + + // Shadow + &.#{$ms-prefix}-shadow { + box-shadow: -0.06em 0.07em 0 #111, 0 0.06em 0 #111; + &.#{$ms-prefix}-untap { + box-shadow: -0.06em 0.07em 0 #fff, 0 0.06em 0 #fff; + } + } +} + + +/** + * Split costs */ + +.#{$ms-prefix}-split { + position: relative; + width: 1.3em; + height: 1.3em; +} +.#{$ms-prefix}-split:before, +.#{$ms-prefix}-split:after { + font-size: 0.55em !important; + position: absolute; +} +.#{$ms-prefix}-split:before { + top: -0.38em; + left: 0.28em; +} +.#{$ms-prefix}-split:after { + top: 0.5em; + left: 1.0em; +} + + +/** + * Half costs */ + +.#{$ms-prefix}-half { + width: .675em; + overflow: hidden; + display: inline-block; + margin-left: .675em; + + > .#{$ms-prefix}-cost { + margin-left: -.675em; + } +} + +/** + * Un-set costs */ + +.#{$ms-prefix}-100 { + width: 2.4em; +} +.#{$ms-prefix}-1000000 { + width: 5.4em; +} diff --git a/sass/_dfc.scss b/sass/_dfc.scss new file mode 100644 index 0000000..ae00985 --- /dev/null +++ b/sass/_dfc.scss @@ -0,0 +1,9 @@ +/** + * Double faced cards */ + +.#{$ms-prefix}-dfc { + color: #111; + border: .05em solid #111; + border-radius: 2em; + padding: 0.025em; +} diff --git a/sass/_icons.scss b/sass/_icons.scss new file mode 100644 index 0000000..2a322ce --- /dev/null +++ b/sass/_icons.scss @@ -0,0 +1,146 @@ +/** + * Mana */ + +.#{$ms-prefix}-w:before { content: "\e600"; } +.#{$ms-prefix}-u:before { content: "\e601"; } +.#{$ms-prefix}-b:before { content: "\e602"; } +.#{$ms-prefix}-r:before { content: "\e603"; } +.#{$ms-prefix}-g:before { content: "\e604"; } +.#{$ms-prefix}-0:before { content: "\e605"; } +.#{$ms-prefix}-1:before { content: "\e606"; } +.#{$ms-prefix}-2:before { content: "\e607"; } +.#{$ms-prefix}-3:before { content: "\e608"; } +.#{$ms-prefix}-4:before { content: "\e609"; } +.#{$ms-prefix}-5:before { content: "\e60a"; } +.#{$ms-prefix}-6:before { content: "\e60b"; } +.#{$ms-prefix}-7:before { content: "\e60c"; } +.#{$ms-prefix}-8:before { content: "\e60d"; } +.#{$ms-prefix}-9:before { content: "\e60e"; } +.#{$ms-prefix}-10:before { content: "\e60f"; } +.#{$ms-prefix}-11:before { content: "\e610"; } +.#{$ms-prefix}-12:before { content: "\e611"; } +.#{$ms-prefix}-13:before { content: "\e612"; } +.#{$ms-prefix}-14:before { content: "\e613"; } +.#{$ms-prefix}-15:before { content: "\e614"; } +.#{$ms-prefix}-16:before { content: "\e62a"; } +.#{$ms-prefix}-17:before { content: "\e62b"; } +.#{$ms-prefix}-18:before { content: "\e62c"; } +.#{$ms-prefix}-19:before { content: "\e62d"; } +.#{$ms-prefix}-20:before { content: "\e62e"; } +.#{$ms-prefix}-x:before { content: "\e615"; } +.#{$ms-prefix}-y:before { content: "\e616"; } +.#{$ms-prefix}-z:before { content: "\e617"; } +.#{$ms-prefix}-p:before, +.#{$ms-prefix}-wp:before, +.#{$ms-prefix}-up:before, +.#{$ms-prefix}-bp:before, +.#{$ms-prefix}-rp:before, +.#{$ms-prefix}-gp:before { content: "\e618"; } +.#{$ms-prefix}-s:before { content: "\e619"; } +.#{$ms-prefix}-c:before { content: "\e904"; } +.#{$ms-prefix}-e:before, +.#{$ms-prefix}-energy:before{ content: "\e907"; } + +/** + * Tap/roll symbols */ + +.#{$ms-prefix}-tap:before { content: "\e61a"; } +.#{$ms-prefix}-untap:before { content: "\e61b"; } +.#{$ms-prefix}-tap-alt:before { content: "\e61c"; } +.#{$ms-prefix}-chaos:before { content: "\e61d"; } +.#{$ms-prefix}-1-2:before { content: "\e902"; } +.#{$ms-prefix}-infinity:before { content: "\e903"; } + +/** + * Card types */ + +.#{$ms-prefix}-artifact:before { content: "\e61e"; } +.#{$ms-prefix}-creature:before { content: "\e61f"; } +.#{$ms-prefix}-enchantment:before { content: "\e620"; } +.#{$ms-prefix}-instant:before { content: "\e621"; } +.#{$ms-prefix}-land:before { content: "\e622"; } +.#{$ms-prefix}-planeswalker:before { content: "\e623"; } +.#{$ms-prefix}-sorcery:before { content: "\e624"; } + +/** + * Split symbols */ + +.#{$ms-prefix}-wu:before, +.#{$ms-prefix}-wb:before, +.#{$ms-prefix}-rw:after, +.#{$ms-prefix}-gw:after, +.#{$ms-prefix}-2w:after { content: "\e600"; } // white +.#{$ms-prefix}-ub:before, +.#{$ms-prefix}-ur:before, +.#{$ms-prefix}-wu:after, +.#{$ms-prefix}-gu:after, +.#{$ms-prefix}-2u:after { content: "\e601"; } // blue +.#{$ms-prefix}-br:before, +.#{$ms-prefix}-bg:before, +.#{$ms-prefix}-wb:after, +.#{$ms-prefix}-ub:after, +.#{$ms-prefix}-2b:after { content: "\e602"; } // black +.#{$ms-prefix}-rw:before, +.#{$ms-prefix}-rg:before, +.#{$ms-prefix}-ur:after, +.#{$ms-prefix}-br:after, +.#{$ms-prefix}-2r:after { content: "\e603"; } // red +.#{$ms-prefix}-gw:before, +.#{$ms-prefix}-gu:before, +.#{$ms-prefix}-bg:after, +.#{$ms-prefix}-rg:after, +.#{$ms-prefix}-2g:after { content: "\e604"; } // green +.#{$ms-prefix}-2w:before, +.#{$ms-prefix}-2u:before, +.#{$ms-prefix}-2b:before, +.#{$ms-prefix}-2r:before, +.#{$ms-prefix}-2g:before { content: "\e607"; } // 2 + +/** + * Un-set symbols */ + +.#{$ms-prefix}-100:before { content: "\e900"; } +.#{$ms-prefix}-1000000:before { content: "\e901"; } + +/** + * Planeswalker symbols */ + +.#{$ms-prefix}-loyalty-up:before { content: "\e627"; } // Up +.#{$ms-prefix}-loyalty-down:before { content: "\e625"; } // Down +.#{$ms-prefix}-loyalty-zero:before { content: "\e626"; } // Zero +.#{$ms-prefix}-loyalty-start:before { content: "\e628"; } // Start + +/** + * Other */ + +.#{$ms-prefix}-flashback:before { content: "\e629"; } +.#{$ms-prefix}-dfc-night:before { content: "\e905"; } +.#{$ms-prefix}-dfc-day:before { content: "\e906"; } +.#{$ms-prefix}-dfc-ignite:before { content: "\e908"; } +.#{$ms-prefix}-dfc-spark:before { content: "\e909"; } +.#{$ms-prefix}-dfc-emrakul:before { content: "\e90a"; } +.#{$ms-prefix}-dfc-moon:before { content: "\e90b"; } + +/** + * Guilds and Clans */ + +.#{$ms-prefix}-guild-azorius:before { content: "\e90c"; } +.#{$ms-prefix}-guild-boros:before { content: "\e90d"; } +.#{$ms-prefix}-guild-dimir:before { content: "\e90e"; } +.#{$ms-prefix}-guild-golgari:before { content: "\e90f"; } +.#{$ms-prefix}-guild-gruul:before { content: "\e910"; } +.#{$ms-prefix}-guild-izzet:before { content: "\e911"; } +.#{$ms-prefix}-guild-orzhov:before { content: "\e912"; } +.#{$ms-prefix}-guild-rakdos:before { content: "\e913"; } +.#{$ms-prefix}-guild-selesnya:before { content: "\e914"; } +.#{$ms-prefix}-guild-simic:before { content: "\e915"; } +.#{$ms-prefix}-clan-abzan:before { content: "\e916"; } +.#{$ms-prefix}-clan-jeskai:before { content: "\e917"; } +.#{$ms-prefix}-clan-mardu:before { content: "\e918"; } +.#{$ms-prefix}-clan-sultai:before { content: "\e919"; } +.#{$ms-prefix}-clan-temur:before { content: "\e91a"; } +.#{$ms-prefix}-clan-atarka:before { content: "\e91b"; } +.#{$ms-prefix}-clan-dromoka:before { content: "\e91c"; } +.#{$ms-prefix}-clan-kolaghan:before { content: "\e91d"; } +.#{$ms-prefix}-clan-ojutai:before { content: "\e91e"; } +.#{$ms-prefix}-clan-silumgar:before { content: "\e91f"; } diff --git a/sass/_loyalty.scss b/sass/_loyalty.scss new file mode 100644 index 0000000..304201a --- /dev/null +++ b/sass/_loyalty.scss @@ -0,0 +1,91 @@ +/** + * Planeswalker symbols */ + +.#{$ms-prefix}-loyalty { + + // All + &-up, + &-down, + &-zero, + &-start { + color: #111; + font-size: 1.5em; + position: relative; + text-align: center; + } + + // Start + &-start { + font-size: 2.0em; // increase the size a bit by default + } + + // Counters + &-0:after, + &-1:after, + &-2:after, + &-3:after, + &-4:after, + &-5:after, + &-6:after, + &-7:after, + &-8:after, + &-9:after, + &-10:after, + &-12:after, + &-14:after, + &-x:after { + color: #fff; + display: inline-block; + font-size: 0.5em; + font-family: $ms-serif-font; + position: absolute; + left: 0; + line-height: 1.75em; + width: 100%; + text-align: center; + -webkit-padding-before: 0.15em; // fix for odd webkit line-height + } + &-0:after { content: "0"; } + &-up { + &.#{$ms-prefix}-loyalty-1:after { content: "+1"; } + &.#{$ms-prefix}-loyalty-2:after { content: "+2"; } + &.#{$ms-prefix}-loyalty-3:after { content: "+3"; } + &.#{$ms-prefix}-loyalty-4:after { content: "+4"; } + &.#{$ms-prefix}-loyalty-5:after { content: "+5"; } + &.#{$ms-prefix}-loyalty-6:after { content: "+6"; } + &.#{$ms-prefix}-loyalty-7:after { content: "+7"; } + &.#{$ms-prefix}-loyalty-8:after { content: "+8"; } + &.#{$ms-prefix}-loyalty-9:after { content: "+9"; } + &.#{$ms-prefix}-loyalty-10:after { content: "+10"; } + &.#{$ms-prefix}-loyalty-x:after { content: "+X"; } + } + &-start { + &.#{$ms-prefix}-loyalty-1:after { content: "1"; } + &.#{$ms-prefix}-loyalty-2:after { content: "2"; } + &.#{$ms-prefix}-loyalty-3:after { content: "3"; } + &.#{$ms-prefix}-loyalty-4:after { content: "4"; } + &.#{$ms-prefix}-loyalty-5:after { content: "5"; } + &.#{$ms-prefix}-loyalty-6:after { content: "6"; } + &.#{$ms-prefix}-loyalty-7:after { content: "7"; } + &.#{$ms-prefix}-loyalty-8:after { content: "8"; } + &.#{$ms-prefix}-loyalty-9:after { content: "9"; } + &.#{$ms-prefix}-loyalty-10:after { content: "10"; } + &.#{$ms-prefix}-loyalty-x:after { content: "X"; } + } + &-down { + &:after{ line-height: 1.6em; } + &.#{$ms-prefix}-loyalty-1:after { content: "-1"; } + &.#{$ms-prefix}-loyalty-2:after { content: "-2"; } + &.#{$ms-prefix}-loyalty-3:after { content: "-3"; } + &.#{$ms-prefix}-loyalty-4:after { content: "-4"; } + &.#{$ms-prefix}-loyalty-5:after { content: "-5"; } + &.#{$ms-prefix}-loyalty-6:after { content: "-6"; } + &.#{$ms-prefix}-loyalty-7:after { content: "-7"; } + &.#{$ms-prefix}-loyalty-8:after { content: "-8"; } + &.#{$ms-prefix}-loyalty-9:after { content: "-9"; } + &.#{$ms-prefix}-loyalty-10:after { content: "-10"; } + &.#{$ms-prefix}-loyalty-12:after { content: "-12"; } + &.#{$ms-prefix}-loyalty-14:after { content: "-14"; } + &.#{$ms-prefix}-loyalty-x:after { content: "-X"; } + } +} diff --git a/sass/_path.scss b/sass/_path.scss new file mode 100644 index 0000000..11790d1 --- /dev/null +++ b/sass/_path.scss @@ -0,0 +1,21 @@ +@font-face { + font-family: 'Mana'; + src:url( '#{$ms-font-path}/mana.eot?v=#{$ms-version}' ); + src:url( '#{$ms-font-path}/mana.eot?#iefix&v=#{$ms-version}') format( 'embedded-opentype' ), + url( '#{$ms-font-path}/mana.woff?v=#{$ms-version}') format( 'woff' ), + url( '#{$ms-font-path}/mana.ttf?v=#{$ms-version}') format( 'truetype' ), + url( '#{$ms-font-path}/mana.svg?v=#{$ms-version}#mana') format( 'svg' ); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'MPlantin'; + src:url( '#{$ms-font-path}/mplantin.eot?v=#{$ms-version}' ); + src:url( '#{$ms-font-path}/mplantin.eot?#iefix&v=#{$ms-version}') format( 'embedded-opentype' ), + url( '#{$ms-font-path}/mplantin.woff?v=#{$ms-version}') format( 'woff' ), + url( '#{$ms-font-path}/mplantin.ttf?v=#{$ms-version}') format( 'truetype' ), + url( '#{$ms-font-path}/mplantin.svg?v=#{$ms-version}#mplantin') format( 'svg' ); + font-weight: normal; + font-style: normal; +} diff --git a/sass/_sizes.scss b/sass/_sizes.scss new file mode 100644 index 0000000..857d616 --- /dev/null +++ b/sass/_sizes.scss @@ -0,0 +1,8 @@ +/* + * Larger sizes */ + +.#{$ms-prefix}-2x { font-size: 1.75em; } +.#{$ms-prefix}-3x { font-size: 2.25em; } +.#{$ms-prefix}-4x { font-size: 3.0em; } +.#{$ms-prefix}-5x { font-size: 3.75em; } +.#{$ms-prefix}-6x { font-size: 4.5em; } diff --git a/sass/_variables.scss b/sass/_variables.scss new file mode 100644 index 0000000..2697ce2 --- /dev/null +++ b/sass/_variables.scss @@ -0,0 +1,8 @@ +/** + * Global */ + +$ms-font-path: '../fonts'; +$ms-version: '1.3.1'; +$ms-font-size-base: 14px; +$ms-prefix: ms; +$ms-serif-font: 'MPlantin, Garamond, Palatino, 'Times New Roman', Times, serif'; diff --git a/sass/mana.scss b/sass/mana.scss new file mode 100644 index 0000000..a158b48 --- /dev/null +++ b/sass/mana.scss @@ -0,0 +1,8 @@ +@import "variables"; +@import "path"; +@import "core"; +@import "cost"; +@import "loyalty"; +@import "dfc"; +@import "sizes"; +@import "icons";