Moves to Sass building now. Fixes loyalty line height issues cross browser and re: issue #96

This commit is contained in:
Andrew Gioia 2023-03-10 15:23:18 -05:00
parent cdbd52ef72
commit ee43118df7
Signed by: andrew
GPG Key ID: FC09694A000800C8
7 changed files with 57 additions and 38 deletions

View File

@ -1062,6 +1062,8 @@ span.ms-half > .ms-cost {
width: 5.4em; width: 5.4em;
} }
/**
* planeswalker and other loyalty symbols */
.ms-loyalty-up, .ms-loyalty-down, .ms-loyalty-zero, .ms-loyalty-start { .ms-loyalty-up, .ms-loyalty-down, .ms-loyalty-zero, .ms-loyalty-start {
color: #111; color: #111;
font-size: 1.5em; font-size: 1.5em;
@ -1071,17 +1073,16 @@ span.ms-half > .ms-cost {
.ms-loyalty-start { .ms-loyalty-start {
font-size: 2em; font-size: 2em;
} }
.ms-loyalty-0::after, .ms-loyalty-1::after, .ms-loyalty-2::after, .ms-loyalty-3::after, .ms-loyalty-4::after, .ms-loyalty-5::after, .ms-loyalty-6::after, .ms-loyalty-7::after, .ms-loyalty-8::after, .ms-loyalty-9::after, .ms-loyalty-10::after, .ms-loyalty-11::after, .ms-loyalty-12::after, .ms-loyalty-13::after, .ms-loyalty-14::after, .ms-loyalty-15::after, .ms-loyalty-16::after, .ms-loyalty-17::after, .ms-loyalty-18::after, .ms-loyalty-19::after, .ms-loyalty-20::after, .ms-loyalty-x::after { .ms-loyalty-0::after, .ms-loyalty-1::after, .ms-loyalty-2::after, .ms-loyalty-3::after, .ms-loyalty-4::after, .ms-loyalty-5::after, .ms-loyalty-6::after, .ms-loyalty-7::after, .ms-loyalty-8::after, .ms-loyalty-9::after, .ms-loyalty-10::after, .ms-loyalty-11::after, .ms-loyalty-12::after, .ms-loyalty-13::after, .ms-loyalty-14::after, .ms-loyalty-15::after, .ms-loyalty-16::after, .ms-loyalty-17::after, .ms-loyalty-18::after, .ms-loyalty-19::after, .ms-loyalty-20::after, .ms-loyalty-25::after, .ms-loyalty-x::after {
color: #fff; color: #fff;
display: inline-block; display: inline-block;
font-size: 0.5em; font-size: 0.5em;
font-family: "MPlantin, Garamond, Palatino, 'Times New Roman', Times, serif"; font-family: "MPlantin, Garamond, Palatino, 'Times New Roman', Times, serif";
position: absolute; position: absolute;
left: 0; left: 0;
line-height: 1.75em; line-height: 2.25em;
width: 100%; width: 100%;
text-align: center; text-align: center;
-webkit-padding-before: 0.15em;
} }
.ms-loyalty-0::after { .ms-loyalty-0::after {
content: "0"; content: "0";
@ -1146,6 +1147,9 @@ span.ms-half > .ms-cost {
.ms-loyalty-up.ms-loyalty-20::after { .ms-loyalty-up.ms-loyalty-20::after {
content: "+20"; content: "+20";
} }
.ms-loyalty-up.ms-loyalty-25::after {
content: "+25";
}
.ms-loyalty-up.ms-loyalty-x::after { .ms-loyalty-up.ms-loyalty-x::after {
content: "+X"; content: "+X";
} }
@ -1209,11 +1213,14 @@ span.ms-half > .ms-cost {
.ms-loyalty-start.ms-loyalty-20::after { .ms-loyalty-start.ms-loyalty-20::after {
content: "20"; content: "20";
} }
.ms-loyalty-start.ms-loyalty-25::after {
content: "25";
}
.ms-loyalty-start.ms-loyalty-x::after { .ms-loyalty-start.ms-loyalty-x::after {
content: "X"; content: "X";
} }
.ms-loyalty-down::after { .ms-loyalty-down::after {
line-height: 1.6em; line-height: 2em;
} }
.ms-loyalty-down.ms-loyalty-1::after { .ms-loyalty-down.ms-loyalty-1::after {
content: "-1"; content: "-1";
@ -1275,12 +1282,13 @@ span.ms-half > .ms-cost {
.ms-loyalty-down.ms-loyalty-20::after { .ms-loyalty-down.ms-loyalty-20::after {
content: "-20"; content: "-20";
} }
.ms-loyalty-down.ms-loyalty-25::after {
content: "-25";
}
.ms-loyalty-down.ms-loyalty-x::after { .ms-loyalty-down.ms-loyalty-x::after {
content: "-X"; content: "-X";
} }
/**
* Saga loyalty */
.ms-saga-1::after, .ms-saga-2::after, .ms-saga-3::after, .ms-saga-4::after, .ms-saga-5::after { .ms-saga-1::after, .ms-saga-2::after, .ms-saga-3::after, .ms-saga-4::after, .ms-saga-5::after {
color: #fff; color: #fff;
display: inline-block; display: inline-block;
@ -1288,7 +1296,7 @@ span.ms-half > .ms-cost {
font-family: "MPlantin, Garamond, Palatino, 'Times New Roman', Times, serif"; font-family: "MPlantin, Garamond, Palatino, 'Times New Roman', Times, serif";
position: absolute; position: absolute;
left: 0; left: 0;
line-height: 1.75em; line-height: 2em;
width: 100%; width: 100%;
text-align: center; text-align: center;
} }
@ -1308,8 +1316,6 @@ span.ms-half > .ms-cost {
content: "V"; content: "V";
} }
/**
* Level card levels */
.ms-level > span { .ms-level > span {
font-size: 0.33em; font-size: 0.33em;
position: absolute; position: absolute;

File diff suppressed because one or more lines are too long

2
css/mana.min.css vendored

File diff suppressed because one or more lines are too long

1
css/mana.min.css.map Normal file
View File

@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":["../sass/_path.scss","../sass/_core.scss","../sass/_icons.scss","../sass/_cost.scss","../sass/_variables.scss","../sass/_loyalty.scss","../sass/_dfc.scss","../sass/_sizes.scss","../sass/_duo.scss","../sass/_colors.scss","../sass/_extras.scss"],"names":[],"mappings":"CAEA,WACI,mBACA,sCACA,qOAIA,mBACA,kBAGJ,WACI,uBACA,0CACA,yPAIA,mBACA,kBCnBJ,IACI,qBACA,oCACA,kBACA,gBACA,oBACA,0BACA,WACA,oBACA,sBAEA,mCACA,kCCTA,0BACA,mCACA,+BACA,0BACA,0BACA,0BACA,0BACA,0BACA,0BACA,0BACA,0BACA,0BACA,0BACA,0BACA,0BACA,0BACA,0BACA,2BACA,2BACA,2BACA,2BACA,2BACA,2BACA,2BACA,2BACA,2BACA,2BACA,2BACA,0BACA,0BACA,0BACA,0BACA,0BACA,+BACA,0BACA,iCACkB,YAClB,8BACA,kCACmB,YACnB,4BACA,iCAGA,4BACA,8BACA,gCACA,8BAGA,iCACA,kCACA,mCACA,iCACA,oCACA,gCACA,gCACA,6BACA,mCACA,8BACA,qCACA,+BACA,6BACA,+BACA,gCACA,8BACA,wCACyB,YACzB,iCACA,mCAGA,6BACA,gCACA,kCACA,8BAGA,wEAIc,YACd,wEAIc,YACd,wEAIc,YACd,wEAIc,YACd,wEAIc,YACd,2EAIe,YAGf,iYAwBe,YAGf,4BACA,gCAII,mCACA,qCACA,qCACA,sCAKA,8BACA,6BAKA,gCACA,oCACA,wCACA,mCACA,iCACA,mCACA,uCACA,uCACA,iCACA,kCACA,kCAIJ,kCACA,8BACA,kCAEI,qCACA,mCAKA,sCACA,oCACA,oCACA,sCACA,oCACA,oCACA,qCACA,qCACA,uCACA,oCAGA,mCACA,oCACA,mCACA,oCACA,mCACA,oCACA,qCACA,sCACA,oCACA,sCAGA,sCACA,oCACA,sCAGA,wCACA,wCACA,wCACA,2CACA,2CAKA,sCACA,sCACA,uCACA,yCACA,qCACA,qCACA,sCACA,sCACA,uCACA,qCACA,mCACA,qCACA,wCACA,uCACA,sCACA,6CACA,uCACA,oCACA,oCACA,qCACA,4CACA,uCACA,yCACA,sCACA,sCACA,qCACA,sCACA,uCAEA,uCACA,qCAKA,mFAEwB,YACxB,wCACA,sCACA,yCACA,0CACA,wCACA,0CACA,0CACA,yCACA,sCACA,uCACA,sCACA,sCACA,yCACA,2CACA,wCACA,uCACA,0CACA,8CACA,wCACA,0CACA,sCACA,oCACA,0CACA,oDACA,2CACA,wCACA,yCACA,yCACA,wCACA,uCACA,8CACA,wCACA,uCACA,uCACA,uCACA,uCACA,2CACA,wCACA,wCACA,0CACA,6CACA,sCACA,uCACA,6CACA,yCACA,qCACA,sCAEI,yCACA,+CACA,8CACA,+CACA,6CACA,+CAEJ,yCACA,+CACA,4CACA,0CACA,uCACA,yCACA,sCACA,yCACA,0CACA,qCACA,uCACA,uCACA,uCACA,yCACA,wCACA,sCACA,0CACA,4CACA,0CACA,wCACA,qCACA,sCACA,2CACA,4CACA,uCACA,qCACA,2CACA,0CACA,qFAE0B,YAC1B,mDACA,wCACA,sCACA,yCACA,wCACA,0CACA,0CACA,4CACA,wCACA,0CACA,qCCnWR,SAEI,iBCKgB,QDJhB,kBACA,WACA,gBACA,YACA,aACA,mBACA,kBAGA,6BAEI,iBCNQ,QDQZ,6BAEI,iBCTO,QDWX,6BAEI,iBCZQ,QDcZ,6BAEI,iBCfM,QDiBV,6BAEI,iBClBQ,QDsBZ,iYAyBI,kBACA,YACA,aACA,ynCAEI,2BACA,kBAEJ,ykBACI,YACA,WAEJ,gjBACI,SACA,SAGR,+BAEI,mBACA,4FACA,oKACA,+FACA,0FACA,2FACA,uFACA,mHAEJ,+BAEI,mBACA,4FACA,oKACA,+FACA,0FACA,2FACA,uFACA,mHAEJ,+BAEI,mBACA,4FACA,oKACA,+FACA,0FACA,2FACA,uFACA,mHAEJ,+BAEI,mBACA,4FACA,oKACA,+FACA,0FACA,2FACA,uFACA,mHAEJ,+BAEI,mBACA,4FACA,oKACA,+FACA,0FACA,2FACA,uFACA,mHAEJ,+BAEI,mBACA,4FACA,oKACA,+FACA,0FACA,2FACA,uFACA,mHAEJ,+BAEI,mBACA,4FACA,oKACA,+FACA,0FACA,2FACA,uFACA,mHAEJ,+BAEI,mBACA,4FACA,oKACA,+FACA,0FACA,2FACA,uFACA,mHAEJ,+BAEI,mBACA,4FACA,oKACA,+FACA,0FACA,2FACA,uFACA,mHAEJ,+BAEI,mBACA,4FACA,oKACA,+FACA,0FACA,2FACA,uFACA,mHAEJ,eACI,mBACA,4FACA,oKACA,+FACA,0FACA,2FACA,uFACA,mHAEJ,eACI,mBACA,4FACA,oKACA,+FACA,0FACA,2FACA,uFACA,mHAEJ,eACI,mBACA,4FACA,oKACA,+FACA,0FACA,2FACA,uFACA,mHAEJ,eACI,mBACA,4FACA,oKACA,+FACA,0FACA,2FACA,uFACA,mHAEJ,eACI,mBACA,4FACA,oKACA,+FACA,0FACA,2FACA,uFACA,mHAIJ,yXAgBI,qBACA,+BACA,kCACA,0BAIJ,4BACI,qBACA,+BACA,kCACA,0BACA,mBACA,oBAKA,sBACI,WACA,6BACA,gBACA,YACA,kBACA,qBAEJ,qBAEI,YACA,kBACA,WACA,mBACA,gBAEJ,2BACI,WAKR,kBACI,sBACA,WAIJ,mBACI,+CACA,4BACI,+CAQZ,UACI,kBACA,YACA,aAEJ,mCAEI,2BACA,kBAEJ,kBACI,YACA,WAEJ,iBACI,SACA,SAMJ,aACI,aACA,gBACA,qBACA,mBAEA,sBACI,qBAIR,SACI,aACA,mBACA,gBACA,0BACA,iBACI,oBAOR,QACI,YAEJ,YACI,YErWA,mEAII,WACA,gBACA,kBACA,kBAIJ,kBACI,cAIJ,+eAuBI,WACA,qBACA,eACA,YD3CQ,gEC4CR,kBACA,OACA,mBACA,WACA,kBAEJ,qBACI,YAII,gDACA,gDACA,gDACA,gDACA,gDACA,gDACA,gDACA,gDACA,gDACA,kDACA,kDACA,kDACA,kDACA,kDACA,kDACA,kDACA,kDACA,kDACA,kDACA,kDACA,kDACA,gDAKA,kDACA,kDACA,kDACA,kDACA,kDACA,kDACA,kDACA,kDACA,kDACA,oDACA,oDACA,oDACA,oDACA,oDACA,oDACA,oDACA,oDACA,oDACA,oDACA,oDACA,oDACA,kDAIJ,wBACI,gBAGA,kDACA,kDACA,kDACA,kDACA,kDACA,kDACA,kDACA,kDACA,kDACA,oDACA,oDACA,oDACA,oDACA,oDACA,oDACA,oDACA,oDACA,oDACA,oDACA,oDACA,oDACA,kDAUR,0FAKI,WACA,qBACA,eACA,YDrJQ,gECsJR,kBACA,OACA,gBACA,WACA,kBAGJ,8BACA,+BACA,gCACA,+BACA,8BASA,eACI,gBACA,kBACA,OACA,MACA,WACA,YDhLQ,gECiLR,UACA,kBACA,gBAIJ,iBACI,sBACA,cACA,cACA,YACA,OACA,kBACA,MACA,WClMR,QACI,WACA,wBACA,kBACA,eCJJ,wBACA,wBACA,qBACA,wBACA,uBAKA,OACI,UACA,kBCbJ,QAgBI,WAbA,eACI,WACA,WACA,cACA,cACA,YACA,OACA,kBACA,MACA,WAOJ,6BACI,YAKA,kCACI,YAEJ,kCACI,YAEJ,kCACI,YAEJ,qCACI,YAGA,sCACI,YAEJ,qCACI,YAQR,sBACI,MJ3CM,QI+CN,mCACI,MJlCK,QIoCT,2CACI,WJpCK,8DIqCL,6BACA,sCAMA,uDACA,sDAGA,uDACA,sDAGA,uDACA,sDAGA,0DACA,yDAGA,0DACA,yDClFhB,OAGI,mBACA,8BACA,kBACA,UACA,WAGA,qBLJc,QKOd,6BACA,6BACA,6BACA,6BACA,6BAGA,oBLPO,KKQP,oBLPM,QKQN,oBLPO,QKQP,oBLPK,QKQL,oBLPO,QKUP,mCAGI,yEAMJ,kCAGI,yEAMJ,iCAGI,+EAMJ,iCAGI,+EAMJ,+CAII,+EAMJ,kCAGI,+EAMJ,iCAGI,4EAMJ,iCAGI,+EAMJ,iCAGI,+EAMJ,oCAGI,4EAQJ,8EAOI,mGAOJ,+EAOI,mGAOJ,gFAOI,sGAOJ,8EAOI,sGAOJ,8EAOI,gGAOJ,wGASI,mGAOJ,4FAQI,mGAOJ,sGASI,sGAOJ,2FAQI,gGAOJ,2FAQI,sGASJ,6SAEI,6HAQJ,4SAEI,0HAQJ,2SAEI,0HAQJ,6SAEI,0HAQJ,4SAEI,uHAUJ,iiDAEI,8ICrUR,aACI,WNuBc,gDMtBd,6BACA","file":"mana.min.css"}

View File

@ -1,26 +1,25 @@
/** /**
* Planeswalker symbols */ * planeswalker and other loyalty symbols */
.@{ms-prefix}-loyalty { .@{ms-prefix}-loyalty {
// All // all
&-up, &-up,
&-down, &-down,
&-zero, &-zero,
&-start { &-start {
color: #111; color: #111;
font-size: 21px; font-size: 1.5em;
position: relative; position: relative;
text-align: center; text-align: center;
line-height: 0.9em;
} }
// Start // start
&-start { &-start {
font-size: 25px; // increase the size a bit by default font-size: 2.0em; // increase the size a bit by default
} }
// Counters // base styles for counters
&-0::after, &-0::after,
&-1::after, &-1::after,
&-2::after, &-2::after,
@ -50,11 +49,13 @@
font-family: @ms-serif-font; font-family: @ms-serif-font;
position: absolute; position: absolute;
left: 0; left: 0;
line-height: 2em; line-height: 2.25em;
width: 100%; width: 100%;
text-align: center; text-align: center;
} }
&-0::after { content: "0"; } &-0::after {
content: "0";
}
&-up { &-up {
&.@{ms-prefix}-loyalty-1::after { content: "+1"; } &.@{ms-prefix}-loyalty-1::after { content: "+1"; }
&.@{ms-prefix}-loyalty-2::after { content: "+2"; } &.@{ms-prefix}-loyalty-2::after { content: "+2"; }
@ -104,7 +105,9 @@
&.@{ms-prefix}-loyalty-x::after { content: "X"; } &.@{ms-prefix}-loyalty-x::after { content: "X"; }
} }
&-down { &-down {
&::after{ line-height: 1.8em; } &::after{
line-height: 2.0em;
}
&.@{ms-prefix}-loyalty-1::after { content: "-1"; } &.@{ms-prefix}-loyalty-1::after { content: "-1"; }
&.@{ms-prefix}-loyalty-2::after { content: "-2"; } &.@{ms-prefix}-loyalty-2::after { content: "-2"; }
&.@{ms-prefix}-loyalty-3::after { content: "-3"; } &.@{ms-prefix}-loyalty-3::after { content: "-3"; }
@ -131,12 +134,14 @@
} }
/** // saga loyalty
* Saga loyalty */
.@{ms-prefix}-saga { .@{ms-prefix}-saga {
// Numbers // all
color: #111;
// numbers
&-1::after, &-1::after,
&-2::after, &-2::after,
&-3::after, &-3::after,
@ -148,7 +153,7 @@
font-family: @ms-serif-font; font-family: @ms-serif-font;
position: absolute; position: absolute;
left: 0; left: 0;
line-height: 1.75em; line-height: 2.0em;
width: 100%; width: 100%;
text-align: center; text-align: center;
} }
@ -161,8 +166,7 @@
} }
/** // level card levels
* Level card levels */
.@{ms-prefix}-level { .@{ms-prefix}-level {

View File

@ -20,7 +20,8 @@
"less": "lessc less/mana.less css/mana.css", "less": "lessc less/mana.less css/mana.css",
"lessmin": "lessc --clean-css less/mana.less css/mana.min.css", "lessmin": "lessc --clean-css less/mana.less css/mana.min.css",
"sass": "sass sass/mana.scss css/mana.css --style=expanded", "sass": "sass sass/mana.scss css/mana.css --style=expanded",
"sassmin": "sass sass/mana.scss css/mana.css --style compressed" "sassmin": "sass sass/mana.scss css/mana.min.css --style compressed",
"build": "npm run -s sass && npm run -s sassmin"
}, },
"author": "Andrew Gioia <andrew@gioia.email>", "author": "Andrew Gioia <andrew@gioia.email>",
"license": "MIT", "license": "MIT",

View File

@ -1,4 +1,5 @@
// planeswalker specifics /**
* planeswalker and other loyalty symbols */
.#{$ms-prefix}-loyalty { .#{$ms-prefix}-loyalty {
@ -40,6 +41,7 @@
&-18::after, &-18::after,
&-19::after, &-19::after,
&-20::after, &-20::after,
&-25::after,
&-x::after { &-x::after {
color: #fff; color: #fff;
display: inline-block; display: inline-block;
@ -47,10 +49,9 @@
font-family: $ms-serif-font; font-family: $ms-serif-font;
position: absolute; position: absolute;
left: 0; left: 0;
line-height: 1.75em; line-height: 2.25em;
width: 100%; width: 100%;
text-align: center; text-align: center;
-webkit-padding-before: 0.15em; // fix for odd webkit line-height
} }
&-0::after { &-0::after {
content: "0"; content: "0";
@ -77,6 +78,7 @@
&-18::after { content: "+18"; } &-18::after { content: "+18"; }
&-19::after { content: "+19"; } &-19::after { content: "+19"; }
&-20::after { content: "+20"; } &-20::after { content: "+20"; }
&-25::after { content: "+25"; }
&-x::after { content: "+X"; } &-x::after { content: "+X"; }
} }
} }
@ -102,11 +104,14 @@
&-18::after { content: "18"; } &-18::after { content: "18"; }
&-19::after { content: "19"; } &-19::after { content: "19"; }
&-20::after { content: "20"; } &-20::after { content: "20"; }
&-25::after { content: "25"; }
&-x::after { content: "X"; } &-x::after { content: "X"; }
} }
} }
&-down { &-down {
&::after { line-height: 1.6em; } &::after {
line-height: 2em;
}
&.#{$ms-prefix}-loyalty { &.#{$ms-prefix}-loyalty {
&-1::after { content: "-1"; } &-1::after { content: "-1"; }
&-2::after { content: "-2"; } &-2::after { content: "-2"; }
@ -128,17 +133,20 @@
&-18::after { content: "-18"; } &-18::after { content: "-18"; }
&-19::after { content: "-19"; } &-19::after { content: "-19"; }
&-20::after { content: "-20"; } &-20::after { content: "-20"; }
&-25::after { content: "-25"; }
&-x::after { content: "-X"; } &-x::after { content: "-X"; }
} }
} }
} }
/** // saga loyalty
* Saga loyalty */
.#{$ms-prefix}-saga { .#{$ms-prefix}-saga {
// Numbers // all
color: #111;
// numbers
&-1::after, &-1::after,
&-2::after, &-2::after,
&-3::after, &-3::after,
@ -150,7 +158,7 @@
font-family: $ms-serif-font; font-family: $ms-serif-font;
position: absolute; position: absolute;
left: 0; left: 0;
line-height: 1.75em; line-height: 2.0em;
width: 100%; width: 100%;
text-align: center; text-align: center;
} }
@ -163,8 +171,7 @@
} }
/** // level card levels
* Level card levels */
.#{$ms-prefix}-level { .#{$ms-prefix}-level {