@gravatar-com/hovercards
Version:
Add profile hovercards to Gravatar images.
1 lines • 4.4 kB
Source Map (JSON)
{"version":3,"file":"style.css","mappings":"AAgBA,oBACC,qBACA,iBAEA,6CAEC,SAGD,kEAGC,qIACC,CAUD,eACA,gBACA,UAzCY,CA4Cb,+CACC,aACA,sBACA,8BACA,YACA,aACA,uBACA,qBAlDY,CAmDZ,yBACA,kBACA,qCACA,sBAGD,gDACC,aACA,mBACA,SAGD,0GAEC,oBAGD,gDACC,kBACA,qBArEuB,CAwExB,4DACC,qBAGD,8CAtEA,oBACA,oBAuEmB,CAtEnB,4BACA,gBACA,uBACA,sBAqEC,8CACA,eACA,gBACA,iBACA,UAtFY,CAyFb,kDAjFA,oBACA,oBAkFmB,CAjFnB,4BACA,gBACA,uBACA,sBAgFC,aAzFW,CA4FZ,8CACC,gBAGD,+CA5FA,oBACA,oBA6FmB,CA5FnB,4BACA,gBACA,uBACA,sBA4FA,gDACC,aACA,8BACA,mBAGD,sDACC,aACA,mBACA,QAGD,sDACC,aACA,mBACA,qBACA,QAEA,6FACC,aAxHU,CA2HX,2DACC,cA5HU,CAkIX,mGACC,aAlIU,CAqIX,iEACC,cAtIU,CA6IZ,oQAIC,qBApJuB,CAuJxB,+DACC,WACA,YACA,kBAGD,sEACC,YACA,UAGD,+DACC,WACA,YACA,kBAGD,gEACC,YACA,WAGD,gEACC,mBACA,sBACA,SAGD,iEACC,aAlLW,C","sources":["webpack://@gravatar-com/hovercards/./src/style.scss"],"sourcesContent":["$color-black: #000;\n$color-white: #fff;\n$color-super-light-gray: #eee;\n$color-light-gray: #d8dbdd;\n$color-gray: #707070;\n$color-blue: #1d4fc4;\n\n@mixin ellipsis($lineCount: 1) {\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: $lineCount;\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\tword-break: break-word;\n}\n\n.gravatar-hovercard {\n\tdisplay: inline-block;\n\tz-index: 10000000;\n\n\th4,\n\tp {\n\t\tmargin: 0;\n\t}\n\n\tp,\n\ti,\n\ta {\n\t\tfont-family:\n\t\t\t\"SF Pro Text\",\n\t\t\t-apple-system,\n\t\t\tBlinkMacSystemFont,\n\t\t\t\"Segoe UI\",\n\t\t\tRoboto,\n\t\t\tOxygen-Sans,\n\t\t\tUbuntu,\n\t\t\tCantarell,\n\t\t\t\"Helvetica Neue\",\n\t\t\tsans-serif;\n\t\tfont-size: 14px;\n\t\tline-height: 1.5;\n\t\tcolor: $color-black;\n\t}\n\n\t.gravatar-hovercard__inner {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: space-between;\n\t\twidth: 400px;\n\t\theight: 213px;\n\t\tpadding: 24px 24px 16px;\n\t\tbackground-color: $color-white;\n\t\tborder: 1px solid $color-light-gray;\n\t\tborder-radius: 4px;\n\t\tbox-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);\n\t\tbox-sizing: border-box;\n\t}\n\n\t.gravatar-hovercard__header {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 10px;\n\t}\n\n\t.gravatar-hovercard__avatar-link,\n\t.gravatar-hovercard__social-link {\n\t\tdisplay: inline-flex;\n\t}\n\n\t.gravatar-hovercard__avatar {\n\t\tborder-radius: 50%;\n\t\tbackground-color: $color-super-light-gray;\n\t}\n\n\t.gravatar-hovercard__name-location-link {\n\t\ttext-decoration: none;\n\t}\n\n\t.gravatar-hovercard__name {\n\n\t\t@include ellipsis(2);\n\n\t\tfont-family: Helvetica, Arial, Tahoma, sans-serif;\n\t\tfont-size: 18px;\n\t\tfont-weight: 600;\n\t\tline-height: 1.25;\n\t\tcolor: $color-black;\n\t}\n\n\t.gravatar-hovercard__location {\n\n\t\t@include ellipsis(1);\n\n\t\tcolor: $color-gray;\n\t}\n\n\t.gravatar-hovercard__body {\n\t\tmin-height: 63px;\n\t}\n\n\t.gravatar-hovercard__about {\n\n\t\t@include ellipsis(3);\n\t}\n\n\t.gravatar-hovercard__footer {\n\t\tdisplay: flex;\n\t\tjustify-content: space-between;\n\t\talign-items: center;\n\t}\n\n\t.gravatar-hovercard__social-links {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 8px;\n\t}\n\n\t.gravatar-hovercard__profile-link {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\ttext-decoration: none;\n\t\tgap: 4px;\n\n\t\t.gravatar-hovercard__profile-link-text {\n\t\t\tcolor: $color-gray;\n\t\t}\n\n\t\tpath {\n\t\t\tstroke: $color-gray;\n\t\t}\n\t}\n\n\t.gravatar-hovercard__profile-link--edit {\n\n\t\t.gravatar-hovercard__profile-link-text {\n\t\t\tcolor: $color-blue;\n\t\t}\n\n\t\tpath {\n\t\t\tstroke: $color-blue;\n\t\t}\n\t}\n}\n\n.gravatar-hovercard--skeleton {\n\n\t.gravatar-hovercard__avatar-link,\n\t.gravatar-hovercard__name-location-link,\n\t.gravatar-hovercard__social-link,\n\t.gravatar-hovercard__profile-link {\n\t\tbackground-color: $color-super-light-gray;\n\t}\n\n\t.gravatar-hovercard__avatar-link {\n\t\twidth: 56px;\n\t\theight: 56px;\n\t\tborder-radius: 50%;\n\t}\n\n\t.gravatar-hovercard__name-location-link {\n\t\theight: 20px;\n\t\twidth: 50%;\n\t}\n\n\t.gravatar-hovercard__social-link {\n\t\twidth: 32px;\n\t\theight: 32px;\n\t\tborder-radius: 50%;\n\t}\n\n\t.gravatar-hovercard__profile-link {\n\t\theight: 16px;\n\t\twidth: 96px;\n\t}\n\n\t.gravatar-hovercard__inner--error {\n\t\talign-items: center;\n\t\tjustify-content: start;\n\t\tgap: 34px;\n\t}\n\n\t.gravatar-hovercard__error-message {\n\t\tcolor: $color-gray;\n\t}\n}\n"],"names":[],"sourceRoot":""}