@gravatar-com/hovercards
Version:
Add profile hovercards to Gravatar images.
1 lines • 9.78 kB
Source Map (JSON)
{"version":3,"file":"style.css","mappings":"AAkBA,oBAuDC,qBACA,qIAnEa,CAoEb,eACA,gBACA,UA7Ea,CA8Eb,iBAvDA,2EAGC,sBAGD,sBACC,SACA,UACA,SACA,mBACA,aACA,oBACA,cACA,yBACA,wBACA,gBACA,gBACA,wBACA,qBAID,sBACC,qBACA,eAGD,2BACC,gBACA,YACA,UACA,eAGD,gDAEC,cACA,eACA,YAID,6EAEC,yBAYD,+CACC,aACA,sBACA,8BACA,YACA,iBACA,kBACA,uBACA,qBAvFY,CAwFZ,yBACA,kBACA,qCACA,gBAGD,sDACC,kBACA,MACA,SACA,YACA,WACA,2BACA,kBAGD,0DACC,WACA,qCACA,2BACA,kBAGD,gDACC,UACA,aACA,sBACA,QAGD,qDACC,yCAGD,gDACC,kBACA,qBA3HuB,CA8HxB,8CAtHA,oBACA,oBAuHmB,CAtHnB,4BACA,gBACA,uBACA,sBAqHC,qIA7HY,CA8HZ,eACA,gBACA,iBAGD,+FAhIA,oBACA,oBAkImB,CAjInB,4BACA,gBACA,uBACA,sBAgIC,aA3IW,CA8IZ,8CACC,eAGD,qDA5IA,oBACA,oBA6ImB,CA5InB,4BACA,gBACA,uBACA,sBA4IA,sDACC,aACA,mBACA,QACA,gBAGD,iDACC,aACA,SACA,gBAGD,gDACC,WACA,gBACA,YACA,kBACA,oCACA,qIAvKY,CAwKZ,eACA,gBACA,iBACA,aA7KW,CA+KX,sDACC,oCAIF,gDACC,aACA,8BACA,mBACA,SACA,gBAGD,qDAvLA,oBACA,oBAwLmB,CAvLnB,4BACA,gBACA,uBACA,sBAuLC,qBACA,aAnMW,CAsMZ,sDACC,cACA,aAxMW,CA2MZ,uDACC,kBACA,SACA,OACA,WACA,WAMD,mUAKC,qBA7NuB,CAgOxB,+DACC,YACA,aACA,kBAGD,sEACC,YACA,UAGD,+DACC,WACA,YACA,kBAGD,+DACC,UACA,YAGD,gEACC,YACA,WAMD,sDACC,mBACA,uBACA,SAGD,sEACC,aACA,sBACA,mBAGD,8DACC,aAzQW,CA2QX,kHACC,0BAKH,4BACC,kBACA,MACA,OACA,SACA,QACA,kBACA,gBACA,UAEA,iEACC,kBACA,MACA,OACA,SACA,QACA,gCACA,UACA,mCAGD,6DACC,kBACA,OACA,SACA,WACA,gBACA,aACA,sBACA,qBAjTY,CAkTZ,2BACA,4BACA,eACA,kCACA,qCAGD,+DACC,aACA,mBACA,8BACA,eACA,mBAGD,8DACC,qIA5TY,CA6TZ,eACA,gBACA,iBAGD,8DACC,aACA,mBACA,uBAGD,8DACC,aACA,sBACA,eACA,SACA,gBAGD,6DACC,aACA,kBACA,QAGD,kEACC,aACA,sBAGD,mEACC,gBACA,iBACA,0BAGD,kEACC,aApWW,CAsWX,wEACC,0BAIF,6DACC,mBAEA,kGACC,UAGD,8FACC,+BAIF,gEACC,mBAEA,qGACC,UAGD,iGACC,kC","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/* stylelint-disable-next-line value-keyword-case */\n$font-sf-pro: \"SF Pro Text\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif;\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\n\t/* CSS reset for the hovercard. Add additional reset styles here if needed */\n\n\t/* General: zero out unwanted defaults */\n\t&,\n\t&::before,\n\t&::after {\n\t\tbox-sizing: border-box;\n\t}\n\n\t* {\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\tborder: 0;\n\t\tbox-sizing: inherit;\n\t\tfont: inherit;\n\t\tline-height: inherit;\n\t\tcolor: inherit;\n\t\tbackground: transparent;\n\t\tvertical-align: baseline;\n\t\tlist-style: none; /* covers all lists (ul, ol, li) */\n\t\tappearance: none; /* strips native styling from every element */\n\t\t-webkit-appearance: none;\n\t\t-moz-appearance: none;\n\t}\n\n\t/* Components */\n\ta {\n\t\ttext-decoration: none;\n\t\tcursor: pointer;\n\t}\n\n\tbutton {\n\t\tbackground: none;\n\t\tborder: none;\n\t\tpadding: 0;\n\t\tcursor: pointer;\n\t}\n\n\timg,\n\tsvg {\n\t\tdisplay: block; /* avoids inline whitespace */\n\t\tmax-width: 100%;\n\t\theight: auto;\n\t}\n\n\t/* States */\n\ta:focus-visible,\n\tbutton:focus-visible {\n\t\toutline: 2px solid revert;\n\t}\n\n\t/* End of CSS reset */\n\n\tdisplay: inline-block;\n\tfont-family: $font-sf-pro;\n\tfont-size: 14px;\n\tline-height: 1.5;\n\tcolor: $color-black;\n\tz-index: 10000000;\n\n\t.gravatar-hovercard__inner {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: space-between;\n\t\twidth: 336px;\n\t\tmin-height: 273px;\n\t\tposition: relative;\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\toverflow: hidden;\n\t}\n\n\t.gravatar-hovercard__header-image {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: 50%;\n\t\theight: 75px;\n\t\twidth: 100%;\n\t\ttransform: translateX(-50%);\n\t\toverflow-y: hidden;\n\t}\n\n\t.gravatar-hovercard__header-image-img {\n\t\twidth: 100%;\n\t\tobject-fit: cover;\n\t\ttransform: translateY(-30%);\n\t\tfilter: blur(40px);\n\t}\n\n\t.gravatar-hovercard__header {\n\t\tz-index: 1;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: 8px;\n\t}\n\n\t.gravatar-hovercard__avatar-link {\n\t\twidth: fit-content;\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 {\n\n\t\t@include ellipsis(2);\n\n\t\tfont-family: $font-sf-pro;\n\t\tfont-size: 32px;\n\t\tfont-weight: 700;\n\t\tline-height: 38px;\n\t}\n\n\t.gravatar-hovercard__job,\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\tmargin-top: 8px;\n\t}\n\n\t.gravatar-hovercard__description {\n\n\t\t@include ellipsis(2);\n\t}\n\n\t.gravatar-hovercard__social-links {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 4px;\n\t\tmargin-top: 16px;\n\t}\n\n\t.gravatar-hovercard__buttons {\n\t\tdisplay: flex;\n\t\tgap: 16px;\n\t\tmargin-top: 16px;\n\t}\n\n\t.gravatar-hovercard__button {\n\t\twidth: 100%;\n\t\tmin-height: 42px;\n\t\tpadding: 8px;\n\t\tborder-radius: 4px;\n\t\tborder: 1px solid rgba($color-blue, 0.3);\n\t\tfont-family: $font-sf-pro;\n\t\tfont-size: 15px;\n\t\tfont-weight: 600;\n\t\tline-height: 21px;\n\t\tcolor: $color-blue;\n\n\t\t&:hover {\n\t\t\tborder: 1px solid rgba($color-blue, 0.6);\n\t\t}\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\tgap: 12px;\n\t\tmargin-top: 12px;\n\t}\n\n\t.gravatar-hovercard__profile-url {\n\n\t\t@include ellipsis(1);\n\n\t\t/* Ensure consistent word-breaking across browsers. */\n\t\tword-break: break-all;\n\t\tcolor: $color-gray;\n\t}\n\n\t.gravatar-hovercard__profile-link {\n\t\tflex-shrink: 0;\n\t\tcolor: $color-gray;\n\t}\n\n\t.gravatar-hovercard__profile-color {\n\t\tposition: absolute;\n\t\tbottom: 0;\n\t\tleft: 0;\n\t\twidth: 100%;\n\t\theight: 4px;\n\t}\n}\n\n.gravatar-hovercard--skeleton {\n\n\t.gravatar-hovercard__avatar-link,\n\t.gravatar-hovercard__personal-info-link,\n\t.gravatar-hovercard__social-link,\n\t.gravatar-hovercard__profile-link,\n\t.gravatar-hovercard__profile-url {\n\t\tbackground-color: $color-super-light-gray;\n\t}\n\n\t.gravatar-hovercard__avatar-link {\n\t\twidth: 104px;\n\t\theight: 104px;\n\t\tborder-radius: 50%;\n\t}\n\n\t.gravatar-hovercard__personal-info-link {\n\t\theight: 38px;\n\t\twidth: 70%;\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-url {\n\t\twidth: 50%;\n\t\theight: 21px;\n\t}\n\n\t.gravatar-hovercard__profile-link {\n\t\theight: 21px;\n\t\twidth: 96px;\n\t}\n}\n\n.gravatar-hovercard--error {\n\n\t.gravatar-hovercard__inner {\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tgap: 34px;\n\t}\n\n\t.gravatar-hovercard__error-message-wrapper {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\talign-items: center;\n\t}\n\n\t.gravatar-hovercard__error-message {\n\t\tcolor: $color-gray;\n\n\t\t&.gravatar-hovercard__error-message--claim-gravatar a {\n\t\t\ttext-decoration: underline;\n\t\t}\n\t}\n}\n\n.gravatar-hovercard__drawer {\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n\tbottom: 0;\n\tright: 0;\n\tvisibility: hidden;\n\toverflow: hidden;\n\tz-index: 1;\n\n\t.gravatar-hovercard__drawer-backdrop {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\tbottom: 0;\n\t\tright: 0;\n\t\tbackground-color: rgba($color-black, 0.4);\n\t\topacity: 0;\n\t\ttransition: opacity 0.3s ease-in-out;\n\t}\n\n\t.gravatar-hovercard__drawer-card {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\tbottom: 0;\n\t\twidth: 100%;\n\t\tmax-height: 100%;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tbackground-color: $color-white;\n\t\tborder-top-left-radius: 4px;\n\t\tborder-top-right-radius: 4px;\n\t\tpadding: 20px 0;\n\t\ttransform: translate3d(0, 100%, 0);\n\t\ttransition: transform 0.3s ease-in-out;\n\t}\n\n\t.gravatar-hovercard__drawer-header {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t\tpadding: 0 20px;\n\t\tmargin-bottom: 16px;\n\t}\n\n\t.gravatar-hovercard__drawer-title {\n\t\tfont-family: $font-sf-pro;\n\t\tfont-size: 18px;\n\t\tfont-weight: 700;\n\t\tline-height: 27px;\n\t}\n\n\t.gravatar-hovercard__drawer-close {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t}\n\n\t.gravatar-hovercard__drawer-items {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tpadding: 0 20px;\n\t\tgap: 12px;\n\t\toverflow-y: auto;\n\t}\n\n\t.gravatar-hovercard__drawer-item {\n\t\tdisplay: flex;\n\t\talign-items: start;\n\t\tgap: 8px;\n\t}\n\n\t.gravatar-hovercard__drawer-item-info {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t}\n\n\t.gravatar-hovercard__drawer-item-label {\n\t\tfont-weight: 600;\n\t\tline-height: 24px;\n\t\ttext-transform: capitalize;\n\t}\n\n\t.gravatar-hovercard__drawer-item-link {\n\t\tcolor: $color-blue;\n\n\t\t&:hover {\n\t\t\ttext-decoration: underline;\n\t\t}\n\t}\n\n\t&.gravatar-hovercard__drawer--open {\n\t\tvisibility: visible;\n\n\t\t.gravatar-hovercard__drawer-backdrop {\n\t\t\topacity: 1;\n\t\t}\n\n\t\t.gravatar-hovercard__drawer-card {\n\t\t\ttransform: translate3d(0, 0, 0);\n\t\t}\n\t}\n\n\t&.gravatar-hovercard__drawer--closing {\n\t\tvisibility: visible;\n\n\t\t.gravatar-hovercard__drawer-backdrop {\n\t\t\topacity: 0;\n\t\t}\n\n\t\t.gravatar-hovercard__drawer-card {\n\t\t\ttransform: translate3d(0, 100%, 0);\n\t\t}\n\t}\n}\n"],"names":[],"sourceRoot":""}