mirror of
https://github.com/andrewgioia/mana.git
synced 2024-11-21 22:54:45 +00:00
First scss convertion
This commit is contained in:
Titouan BENOIT
parent
0735159a32
commit
1d9e5da9ee
14
sass/_core.scss
Normal file
14
sass/_core.scss
Normal file
@ -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;
|
||||
}
|
||||
292
sass/_cost.scss
Normal file
292
sass/_cost.scss
Normal file
@ -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;
|
||||
}
|
||||
9
sass/_dfc.scss
Normal file
9
sass/_dfc.scss
Normal file
@ -0,0 +1,9 @@
|
||||
/**
|
||||
* Double faced cards */
|
||||
|
||||
.#{$ms-prefix}-dfc {
|
||||
color: #111;
|
||||
border: .05em solid #111;
|
||||
border-radius: 2em;
|
||||
padding: 0.025em;
|
||||
}
|
||||
146
sass/_icons.scss
Normal file
146
sass/_icons.scss
Normal file
@ -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"; }
|
||||
91
sass/_loyalty.scss
Normal file
91
sass/_loyalty.scss
Normal file
@ -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"; }
|
||||
}
|
||||
}
|
||||
21
sass/_path.scss
Normal file
21
sass/_path.scss
Normal file
@ -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;
|
||||
}
|
||||
8
sass/_sizes.scss
Normal file
8
sass/_sizes.scss
Normal file
@ -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; }
|
||||
8
sass/_variables.scss
Normal file
8
sass/_variables.scss
Normal file
@ -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';
|
||||
8
sass/mana.scss
Normal file
8
sass/mana.scss
Normal file
@ -0,0 +1,8 @@
|
||||
@import "variables";
|
||||
@import "path";
|
||||
@import "core";
|
||||
@import "cost";
|
||||
@import "loyalty";
|
||||
@import "dfc";
|
||||
@import "sizes";
|
||||
@import "icons";
|
||||
Loading…
Reference in New Issue
Block a user