Merge pull request #14 from lbryio/styleguide
v3 - accessible components
This commit is contained in:
Sean Yesmunt
GitHub
commit
e76431fc97
30 changed files with 5247 additions and 1478 deletions
1
dist/badge.css
vendored
Normal file
1
dist/badge.css
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
.badge,.badge--alert,.badge--free,.badge--cost,.badge--tag-mature,.badge--tag{height:var(--height-badge);border-radius:var(--border-radius);font-size:var(--font-small);padding:var(--spacing-xs) var(--spacing-xs);white-space:nowrap;user-select:none;cursor:pointer;align-items:center}.badge--tag{background-color:var(--color-tag-bg);color:var(--color-tag)}.badge--tag:hover{background-color:var(--color-tag-bg-hover);color:var(--color-tag-hover)}.badge--tag-mature{background-color:var(--color-tertiary-alt);color:var(--color-tertiary)}.badge--cost{background-color:var(--color-cost);color:var(--color-black)}.badge--free{background-color:var(--color-secondary-alt);color:var(--color-secondary)}.badge--alert{background-color:var(--color-danger-alt);color:var(--color-danger)}/*# sourceMappingURL=badge.css.map */
|
||||
1
dist/badge.css.map
vendored
Normal file
1
dist/badge.css.map
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"sourceRoot":"","sources":["../sass/badge.scss"],"names":[],"mappings":"AAAA,8EACE,2BACA,mCACA,4BACA,4CACA,mBACA,iBACA,eACA,mBAGF,YAEE,qCACA,uBAEA,kBACE,2CACA,6BAIJ,mBAEE,2CACA,4BAGF,aAEE,mCACA,yBAGF,aAEE,4CACA,6BAGF,cAEE,yCACA","file":"badge.css"}
|
||||
1
dist/button.css
vendored
Normal file
1
dist/button.css
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
.button{display:inline-block;position:relative;white-space:nowrap;text-decoration:none;font-weight:400;cursor:pointer}.button:disabled{opacity:.5}.button--primary,.button--secondary,.button--alt,.button--link{border-radius:var(--border-radius)}.button--primary,.button--secondary{height:var(--height-button);border-radius:var(--border-radius);padding:var(--spacing-s) var(--spacing-m);line-height:1.2}.button--primary:not(:last-of-type),.button--secondary:not(:last-of-type){margin-right:var(--spacing-s)}.button--primary{background-color:var(--color-button-primary-bg);color:var(--color-button-primary-text)}.button--primary:hover{color:var(--color-button-primary-hover-text);background-color:var(--color-button-primary-bg-hover)}.button--secondary{background-color:var(--color-button-secondary-bg);color:var(--color-button-secondary-text)}.button--secondary:hover{background-color:var(--color-button-secondary-bg-hover)}.button--alt{color:var(--color-text)}.button--alt:hover{text-decoration:underline}.button--icon{width:5rem;height:5rem;background-repeat:no-repeat;background-size:50%;border-radius:50%;transition:background-color .2s;background-color:var(--color-primary)}.button--icon:hover{background-color:var(--color-button-primary-bg-hover)}.button--icon.button--play{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Cg stroke='white' stroke-width='2' fill='white' fill-rule='evenodd' stroke-linejoin='round'%3E %3Cpolygon points='5 21 5 3 21 12'/%3E %3C/g%3E %3C/svg%3E");background-position:calc(50% + 0.1rem) center}.button--icon.button--view{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Cg stroke='white' stroke-width='2' fill='none' fill-rule='evenodd'%3E %3Cpath d='M2, 12 C2, 12 5, 5 12, 5 C19, 5 22, 12 22, 12 C22, 12 19, 19 12, 19 C5, 19 2, 12 2, 12 Z' stroke-linejoin='round'/%3E %3Ccircle cx='12' cy='12' r='3'/%3E %3Cpath d='M12, 5 L12, 3' stroke-linecap='round'/%3E %3Cpath d='M18, 6.5 L19, 5' stroke-linecap='round'/%3E %3Cpath d='M21, 10 L22.5, 9' stroke-linecap='round'/%3E %3Cpath d='M1.5, 10 L3, 9' stroke-linecap='round' transform='translate(2.250000, 9.500000) scale(1, -1) translate(-2.250000, -9.500000)'/%3E %3Cpath d='M5, 6.5 L6, 5' stroke-linecap='round' transform='translate(5.500000, 5.750000) scale(-1, 1) translate(-5.500000, -5.750000)'/%3E %3C/g%3E %3C/svg%3E");background-position:center calc(50% + 0.1rem)}.button--link{color:var(--color-link);transition:color .2s;word-break:break-all}.button--link:hover{text-decoration:underline}/*# sourceMappingURL=button.css.map */
|
||||
1
dist/button.css.map
vendored
Normal file
1
dist/button.css.map
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"sourceRoot":"","sources":["../sass/button.scss"],"names":[],"mappings":"AAAA,QACE,qBACA,kBACA,mBACA,qBACA,gBACA,eAEA,iBACE,WAIJ,+DAIE,mCAGF,oCAEE,4BACA,mCACA,0CACA,gBAEA,0EACE,8BAIJ,iBACE,gDACA,uCAEA,uBACE,6CACA,sDAIJ,mBACE,kDACA,yCAEA,yBACE,wDAIJ,aACE,wBAEA,mBACE,0BAIJ,cACE,WACA,YACA,4BACA,oBACA,kBACA,gCACA,sCAEA,oBACE,sDAGF,2BACE,mTACA,8CAGF,2BACE,q1BACA,8CAIJ,cACE,wBACA,qBACA,qBAEA,oBACE","file":"button.css"}
|
||||
1
dist/form.css
vendored
Normal file
1
dist/form.css
vendored
Normal file
File diff suppressed because one or more lines are too long
1
dist/form.css.map
vendored
Normal file
1
dist/form.css.map
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"sourceRoot":"","sources":["../sass/form.scss","../sass/init/_mixins.scss"],"names":[],"mappings":"AAEA,sBAGE,2BACA,mCACA,iBACA,yBACA,uCACA,uCACA,+BACA,8BAEA,wCCyLA,wCDrLA,6DACE,qCACA,WAIJ,sCAGE,eAGF,OACE,gcACA,+BACA,4BACA,qBACA,+BACA,8BAGF,+BACE,aACA,mBACA,8BAGE,olBACE,aAKN,oDAGE,aACA,sBAEA,gaAGE,4BAGF,gGACE,gBAGF,4JAEE,WAIJ,MACE,4BACA,+BACA,qBACA,iCAGF,2BACE,aAEA,gHAEE,SAGF,uDACE,0BACA,6BACA,kBAGF,yDACE,yBACA,4BACA,qCAIJ,iBAEE,kBAEA,gHAEE,8BACA,6BACA,kBACA,YACA,OACA,UACA,6BAGF,6BACE,kBACA,qBACA,SACA,2BACA,6DACA,kCAGE,yDACE,4CAKN,wFAEE,kBACA,WAIF,qFACE,aAIF,oMAEE,WAGF,gMCmDA,wCD3CA,wBACE,8BACA,6BACA,2CACA,mCACA,SACA,SACA,uCAIF,uBACE,WACA,WACA,sBACA,wBACA,oCACA,yBACA,SACA,QAKF,yBACE,kBAIF,qBACE,2BACA,0BACA,2CACA,8CACA,SACA,SACA,uCAIF,oBACE,YACA,WACA,kBACA,wCACA,SACA","file":"form.css"}
|
||||
2
dist/index.css
vendored
2
dist/index.css
vendored
File diff suppressed because one or more lines are too long
2
dist/index.css.map
vendored
2
dist/index.css.map
vendored
|
|
@ -1 +1 @@
|
|||
{"version":3,"sourceRoot":"","sources":["../sass/init/_variables.scss","../sass/init/_mixins.scss","../sass/init/_color.scss","../sass/init/_reset.scss","../sass/init/_animation.scss","../sass/badge/_index.scss","../sass/button/_index.scss","../sass/form/_index.scss","../sass/media/_index.scss","../sass/navigation/_index.scss","../sass/table/_index.scss"],"names":[],"mappings":"AAAA,MCmJI,cDjJgC,MCiJhC,aDhJ+B,MCgJ/B,YD/I8B,MC+I9B,YD9I8B,OC8I9B,YD7I8B,OC6I9B,aD5I+B,OC4I/B,cD3IgC,OC2IhC,sBDxIwC,eCwIxC,0BDvI4C,eCuI5C,kBDtIoC,ICsIpC,wBDrI0C,OCqI1C,aC7IS,QD6IT,aC/IS,KD+IT,cChHU,QDgHV,cC/GU,QD+GV,cC9GU,QD8GV,cC7GU,QD6GV,cC5GU,QD4GV,cC7FU,QD6FV,cC5FU,QD4FV,cC3FU,QD2FV,cC1FU,QD0FV,cCzFU,QDyFV,cC1EU,QD0EV,cCzEU,QDyEV,cCxEU,QDwEV,cCvEU,QDuEV,cCtEU,QDsEV,cCvDU,QDuDV,cCtDU,QDsDV,cCrDU,QDqDV,cCpDU,QDoDV,cCnDU,QDmDV,gBCpCY,QDoCZ,gBCnCY,QDmCZ,gBClCY,QDkCZ,gBCjCY,QDiCZ,gBChCY,QDgCZ,gBCjBY,QDiBZ,gBChBY,QDgBZ,gBCfY,QDeZ,gBCdY,QDcZ,gBCbY,QDaZ,eCEW,QDFX,eCGW,QDHX,eCIW,QDJX,eCKW,QDLX,eCMW,QDNX,cCqBU,QDrBV,cCsBU,QDtBV,cCuBU,QDvBV,cCwBU,QDxBV,cCyBU,QDzBV,aCwCS,QDxCT,aCyCS,QDzCT,aC0CS,QD1CT,aC2CS,QD3CT,aC4CS,QD5CT,gBC2DY,QD3DZ,gBC4DY,QD5DZ,gBC6DY,QD7DZ,gBC8DY,QD9DZ,gBC+DY,QD/DZ,gBC8EY,QD9EZ,gBC+EY,QD/EZ,gBCgFY,QDhFZ,gBCiFY,QDjFZ,gBCkFY,QDlFZ,cCiGU,QDjGV,cCkGU,QDlGV,cCmGU,QDnGV,cCoGU,QDpGV,cCqGU,QDrGV,eCoHW,QDpHX,eCqHW,QDrHX,eCsHW,QDtHX,eCuHW,QDvHX,eCwHW,QDxHX,YDhD8B,YCgD9B,uCEnJJ,KACE,sBACA,eACA,kCAEA,kCACA,mCAGF,qBAGE,mBAEA,YACA,mBACA,UAGF,WACE,oBACA,YAEA,iBACE,yBACA,qBACA,cACA,aAIJ,WACE,mBAGF,uGAQE,eAGF,gEAUE,0BAGF,6BAIE,6BACA,gBACA,oBACA,kBACA,oBAEA,qBACA,wBAEA,iEAEE,gCACA,yBACA,eAIJ,kBAME,mBAGF,MAEE,2BAEA,YACE,2BAIJ,GACE,qBAGF,MACE,iBAGF,GACE,UACA,WAGF,GACE,WACA,kBACA,kBAGF,GACE,UACA,WAGF,IACE,0BACA,4BACA,sBAGF,EACE,cACA,qBAGF,OACE,6BACA,cAEA,sBACE,eAGF,gBACE,WAIJ,GACE,sBACA,oCAGF,MACE,6BACA,cAEA,mBACE,cACA,WAOF,oCACE,wBAIJ,OACE,aAGF,SACE,WACA,8BACA,yBAEA,iBAEA,yBACE,gBAMJ,aAGE,eAEE,+CACA,mCAGF,OAEE,mCAGF,IACE,0BAGF,MACE,uBAGF,QAGE,qBACA,oBAGF,MAEE,kCAGF,MACE,sCAIF,EACE,wCACA,iCACA,mCACA,uBACA,4BAKE,iBACE,uCAKA,sDACE,sBAMJ,qBACE,wCAIJ,WAEE,qCACA,iCC/PN,6BACE,GACE,6BAGF,KACE,6BAIJ,iBACE,GACE,UAGF,IACE,WAGF,KACE,WCtBJ,OACE,oBACA,qBACA,gBACA,gBACA,sBACA,cACA,gCACA,+BACA,mBACA,mBAGF,aACE,sCACA,wBAEA,8BACE,sCAIJ,aACE,oCAEA,8BACE,oCACA,wBAIJ,cACE,eACA,cAGF,aACE,qCAEA,8BACE,qCACA,wBAIJ,gBACE,oCACA,wBAGF,cACE,mCACA,wBCpDF,QACE,kBACA,kBACA,mBAIA,mBACE,0BAIJ,mBLsBI,UKrBiB,KLwBnB,gBACA,uBACA,mBKvBF,kBACE,WAEA,kCACE,oBAEA,wCACE,yBACA,cACA,aAKN,cACE,WACA,YACA,mCACA,4BACA,oBACA,kBACA,wBACA,gCAGA,oBACE,qCAGF,2BACE,mTACA,8CAGF,2BACE,q1BACA,8CAIJ,iBACE,2CACA,6BACA,oCACA,mBACA,cACA,gCAEA,kCACE,kCAGF,uBACE,oCAEA,wCACE,sCAKN,cACE,yBACA,qBACA,qBAEA,+BACE,yBAGF,oBACE,yBAEA,qCACE,yBAKN,iBACE,2CACA,kBACA,oCACA,mBACA,wBACA,gCAEA,uBACE,oCAEA,wCACE,oCAKN,mBACE,yBC/GA,6CACE,+BAIJ,aAEE,wBACA,iBAGF,uEAGE,eAGF,uDAIE,+BACA,8BACA,sBAGF,cACE,wBACA,+BACA,8BACA,mBAEA,0BACE,mCACA,+BAGF,oBACE,oCACA,gCAIJ,OACE,gcACA,+BACA,4BACA,qBACA,+BACA,8BAEA,wBACE,gcAIJ,mBACE,wCACA,+BACA,kBAGF,+BACE,aACA,mBACA,8BAGF,mCACE,aACA,sBACA,+BAEA,yDACE,WAGF,oIAEE,UAGF,+CACE,yBACA,qBACA,kBACA,iCACA,yBAGF,6RAKE,+BAEA,yVACE,gCAIJ,gGAEE,WAIJ,OACE,2CACA,oCACA,+BACA,oBAGF,2BACE,aAEA,wGAEE,OAEA,wJACE,mCACA,+BACA,sCACA,oCAGF,gIACE,oCACA,+BACA,uCACA,qCAKN,mCN2CE,gBACA,mBACA,iBACA,oBACA,2BACA,8BACA,+BACA,kBAGE,2DACE,yBAIJ,+CACE,WACA,8BACA,kBACA,qBACA,UM3DA,gKAEE,gCAKF,6EACE,iBACA,kBAGE,4UAEE,UACA,kBAKF,yGACE,yBAOV,iCNoCE,+CACA,aAEA,iBACA,cACA,kBACA,sBAEA,iDACE,uBACA,aAEA,WACA,cACA,kBM/CF,iDACE,8NACA,gCACA,4BACA,qBACA,mBAIJ,6BNDE,gBACA,mBACA,iBACA,oBACA,2BACA,8BACA,+BACA,kBAGE,qDACE,yBAIJ,yCACE,WACA,8BACA,kBACA,qBACA,UMfA,wIAEE,gCAKF,iEACE,iBACA,kBAGE,wSAEE,6BAKF,6FACE,yBAGF,gRAEE,oCAOV,2BNZE,+CACA,aAEA,iBACA,cACA,kBACA,sBMQA,kBNNA,2CACE,uBACA,aAEA,WACA,cACA,kBMEF,2CACE,kBACA,qBACA,gCCjOJ,YACE,aAQA,mBACE,WACA,eACA,mBAYJ,OACE,kBAOF,cACE,aAEA,2BACE,yBACA,6BAGF,4BACE,YACA,+BAKF,sBP0EA,sBACA,6BACA,mCACA,iCACA,iCACA,6BACA,6GACA,yBACA,sBAEA,uCACE,yHOjFF,uGAGE,gBAGF,oCACE,UAGF,iCACE,UAGF,kCACE,WAIJ,cACE,aACA,8BAEA,iCACE,+BAGF,2BACE,UACA,8BAGF,iCACE,yCACA,kBAGF,4BACE,UAGF,4BACE,YACA,iBAIJ,aACE,aAEA,gCACE,+BAGF,0BACE,yBACA,6BAGF,gCACE,2BACA,kBAGF,0BACE,6BAGF,2BACE,YAGF,2BACE,iBAQJ,gBACE,aACA,6BACA,gCASF,aACE,qBAEA,8BACE,kCAIJ,gBACE,yBACA,mBAGF,mBACE,mBAEA,sCACE,+BAGF,+BACE,qBAOJ,iBACE,kBAIA,8BACE,wBPdF,2CAEE,WAGF,sBACE,WACA,yCAGF,qBACE,WACA,cOUJ,cACE,gBACA,mBC9LF,kBACE,uBAEA,oBACA,OACA,kBACA,uBACA,kBACA,WAGF,yBACE,iBACA,oBAEA,oCACA,qCACA,mCACA,kBAGF,eACE,mBACA,kBAGE,4DACE,6BAGF,qHAEE,aAIJ,2CAEE,UAEA,mFACE,oCAKN,aACE,YACA,mBACA,eACA,aACA,cACA,kBACA,UAEA,oBACE,sBACA,mBAEA,WACA,kBACA,UAIJ,YACE,WACA,gBAEA,mCACA,wCACA,iBACA,oBACA,kBAEA,mBACE,sCACA,gBAEA,mCACA,WACA,WACA,oBACA,kBACA,WAIJ,gBACE,aACA,eACA,kBAGF,aACE,yBACA,iBACA,mBAEA,yBACE,yBAGF,mBACE,gCACA,8BAEA,qBACE,yBAIJ,+BACE,UAGF,yBACE,WAGF,kBACE,aACA,mBACA,sBC1HJ,MACE,WACA,mCACA,kBAEA,YACE,eACA,cACA,kBAEA,eACE,kBACA,UAIJ,YACE,iBAKE,+BACE,2CAKN,kBAEE,mBAGF,SACE,0CACA,qBACA,gBACA,yBAGF,QACE","file":"index.css"}
|
||||
{"version":3,"sourceRoot":"","sources":["../sass/init/_color.scss","../sass/init/_variables.scss","../sass/init/_reset.scss","../sass/init/_animation.scss","../sass/badge.scss","../sass/button.scss","../sass/form.scss","../sass/init/_mixins.scss","../sass/table.scss","../sass/section.scss","../sass/navigation/_index.scss","../sass/index.scss"],"names":[],"mappings":"AAAA,MAEE,yBACA,6BACA,+BACA,2BACA,+BACA,0BACA,8BACA,wBACA,4BACA,yBACA,sBACA,uBACA,qBAEA,oBACA,uBACA,2BACA,wBACA,wBACA,wBACA,wBACA,wBAGA,iCACA,2CACA,8BAKA,gDACA,sDACA,4DACA,4DACA,wDACA,sDACA,uDACA,mCAGA,6BACA,yCACA,mCACA,0BACA,mCACA,0CACA,oDAGA,gDAGA,kCACA,yCACA,sCACA,iDC1DF,MACE,qBACA,uBACA,wBACA,wBACA,qBACA,qBAGA,sBACA,qBACA,oBACA,oBACA,oBACA,qBACA,sBAGA,sCACA,0CACA,uBACA,gCAGA,yBACA,mBACA,sBACA,wBACA,yBACA,wBACA,kBACA,kBACA,yBACA,wBACA,qBACA,sBACA,wBCpCF,KACE,sBACA,kCAEA,kCACA,mCAGF,qBAGE,SACA,UAEA,YACA,mBACA,UAGF,WACE,oBACA,YAGF,WACE,mBAGF,uGAQE,eAGF,gEAUE,0BAGF,6BAIE,6BACA,gBACA,oBACA,kBACA,oBAEA,qBACA,wBAEA,iEACE,eAIJ,kBAME,mBACA,cAGF,MAEE,2BAEA,YACE,2BAIJ,MACE,iBAGF,GACE,UACA,WAGF,GACE,WACA,kBACA,kBAGF,GACE,UACA,WAGF,IACE,WACA,eACA,YACA,gBACA,sBAGF,EACE,qBAGF,OACE,6BACA,oBAEA,sBACE,eAGF,gBACE,WAIJ,GACE,WACA,WACA,qCAGF,MACE,6BACA,cAEA,mBACE,cACA,WAGF,oCACE,wBAIJ,OACE,aAGF,SACE,WACA,8BACA,yBAEA,iBAEA,yBACE,gBAIJ,aAGE,eAEE,gDACA,mCAGF,OAEE,mCAGF,IACE,0BAGF,MACE,uBAGF,QAGE,qBACA,oBAGF,MAEE,kCAGF,MACE,sCAIF,EACE,wCACA,iCACA,mCACA,uBACA,4BAKE,iBAEE,uCAKA,sDACE,sBAMJ,qBACE,wCAIJ,WAEE,qCACA,iCC/ON,6BACE,GACE,6BAGF,KACE,6BAIJ,iBACE,GACE,UAGF,IACE,WAGF,KACE,WCtBJ,8EACE,2BACA,mCACA,4BACA,4CACA,mBACA,iBACA,eACA,mBAGF,YAEE,qCACA,uBAEA,kBACE,2CACA,6BAIJ,mBAEE,2CACA,4BAGF,aAEE,mCACA,yBAGF,aAEE,4CACA,6BAGF,cAEE,yCACA,0BC3CF,QACE,qBACA,kBACA,mBACA,qBACA,gBACA,eAEA,iBACE,WAIJ,+DAIE,mCAGF,oCAEE,4BACA,mCACA,0CACA,gBAEA,0EACE,8BAIJ,iBACE,gDACA,uCAEA,uBACE,6CACA,sDAIJ,mBACE,kDACA,yCAEA,yBACE,wDAIJ,aACE,wBAEA,mBACE,0BAIJ,cACE,WACA,YACA,4BACA,oBACA,kBACA,gCACA,sCAEA,oBACE,sDAGF,2BACE,mTACA,8CAGF,2BACE,q1BACA,8CAIJ,cACE,wBACA,qBACA,qBAEA,oBACE,0BCvFJ,sBAGE,2BACA,mCACA,iBACA,yBACA,uCACA,uCACA,+BACA,8BAEA,wCCyLA,wCDrLA,6DACE,qCACA,WAIJ,sCAGE,eAGF,OACE,gcACA,+BACA,4BACA,qBACA,+BACA,8BAGF,+BACE,aACA,mBACA,8BAGE,olBACE,aAKN,oDAGE,aACA,sBAEA,gaAGE,4BAGF,gGACE,gBAGF,4JAEE,WAIJ,MACE,4BACA,+BACA,qBACA,iCAGF,2BACE,aAEA,gHAEE,SAGF,uDACE,0BACA,6BACA,kBAGF,yDACE,yBACA,4BACA,qCAIJ,iBAEE,kBAEA,gHAEE,8BACA,6BACA,kBACA,YACA,OACA,UACA,6BAGF,6BACE,kBACA,qBACA,SACA,2BACA,6DACA,kCAGE,yDACE,4CAKN,wFAEE,kBACA,WAIF,qFACE,aAIF,oMAEE,WAGF,gMCmDA,wCD3CA,wBACE,8BACA,6BACA,2CACA,mCACA,SACA,SACA,uCAIF,uBACE,WACA,WACA,sBACA,wBACA,oCACA,yBACA,SACA,QAKF,yBACE,kBAIF,qBACE,2BACA,0BACA,2CACA,8CACA,SACA,SACA,uCAIF,oBACE,YACA,WACA,kBACA,wCACA,SACA,QE1MJ,OACE,WACA,kBAEA,oBAEE,gBAEA,gDACE,8BAGF,8CACE,+BAIJ,aACE,eACA,kBAEA,gBACE,4CAMA,gCACE,4CAIJ,wBACE,8CAIJ,oBAEE,mBAIJ,GACE,gBAOF,cACE,mBAIA,0CAEE,cAEA,sEACE,eAGF,oEACE,gBAKF,mCACE,6BAKN,mBACE,uCACA,gBACA,iCAGF,0BACE,iBAGF,yBACE,sBACA,mBAEA,iCACE,mBACA,YACA,YACA,yBACA,6BChGJ,SACE,4BAGF,kBACE,aACA,mBACA,iCAEA,6BACE,6BAGF,qCACE,mCAIJ,mBACE,iCACA,8BACA,2BCrBF,kBACE,WACA,YAEA,oBACA,OACA,kBACA,uBACA,kBACA,WAGF,yBAEE,QACA,SACA,SACA,WAEA,oCACA,qCACA,mCACA,kBAGF,eACE,mBACA,kBAGE,4DACE,6BAGF,qHAEE,aAIJ,2CAEE,UAEA,mFACE,sCAKN,aACE,YACA,mBACA,eACA,aACA,cACA,kBACA,UAEA,oBACE,WACA,WACA,YACA,OAEA,WACA,kBACA,UAIJ,YACE,WACA,SACA,OAEA,oCACA,yCACA,iBACA,oBACA,kBAEA,mBACE,YACA,0BACA,SACA,OAEA,oCACA,WACA,WACA,oBACA,kBACA,WAIJ,gBACE,aACA,eACA,kBAGF,aACE,yBACA,iBACA,mBAEA,yBACE,yBAGF,mBACE,iCACA,8BAEA,qBACE,0BAIJ,+BACE,UAGF,yBACE,WAGF,kBACE,aACA,mBACA,sBCpHJ,KACE,eACA,oCACA,2BACA,gBACA,gBACA,uJAKF,oBJ4KE,wCIxKF,EACE,cAGF,GACE,WACA","file":"index.css"}
|
||||
1
dist/section.css
vendored
Normal file
1
dist/section.css
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
.section{margin-top:var(--spacing-l)}.section__actions{display:flex;align-items:center;margin-top:var(--spacing-medium)}.section__actions:only-child{margin-top:var(--spacing-xs)}.section__actions>*:not(:last-child){margin-right:var(--spacing-medium)}.section__subtitle{color:var(--color-text-subtitle);margin:var(--spacing-small) 0;font-size:var(--font-body)}/*# sourceMappingURL=section.css.map */
|
||||
1
dist/section.css.map
vendored
Normal file
1
dist/section.css.map
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"sourceRoot":"","sources":["../sass/section.scss"],"names":[],"mappings":"AAAA,SACE,4BAGF,kBACE,aACA,mBACA,iCAEA,6BACE,6BAGF,qCACE,mCAIJ,mBACE,iCACA,8BACA","file":"section.css"}
|
||||
1
dist/table.css
vendored
Normal file
1
dist/table.css
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
.table{width:100%;position:relative}.table th,.table td{overflow:hidden}.table th:first-of-type,.table td:first-of-type{padding-left:var(--spacing-l)}.table th:last-of-type,.table td:last-of-type{padding-right:var(--spacing-l)}.table thead{cursor:default;position:relative}.table thead th{border-bottom:1px solid var(--color-border)}.table tr:not(:last-of-type) td{border-bottom:1px solid var(--color-border)}.table tr:nth-child(2n){background-color:var(--color-table-highlight)}.table th,.table td{padding:.5rem 1rem}th{text-align:left}.table--fixed{table-layout:fixed}.table--condensed td,.table--condensed th{padding:.5rem}.table--condensed td:first-of-type,.table--condensed th:first-of-type{padding-left:0}.table--condensed td:last-of-type,.table--condensed th:last-of-type{padding-right:0}.table--condensed tr:nth-child(2n){background-color:transparent}.table__item-label{font-size:var(--font-multiplier-small);font-weight:300;color:var(--color-text-subtitle)}.table__item--align-right{text-align:right}.table__item--actionable{vertical-align:middle;white-space:nowrap}.table__item--actionable .button{vertical-align:top;height:2rem;top:-0.2rem;padding:var(--spacing-s);margin-left:var(--spacing-m)}/*# sourceMappingURL=table.css.map */
|
||||
1
dist/table.css.map
vendored
Normal file
1
dist/table.css.map
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"sourceRoot":"","sources":["../sass/table.scss"],"names":[],"mappings":"AAAA,OACE,WACA,kBAEA,oBAEE,gBAEA,gDACE,8BAGF,8CACE,+BAIJ,aACE,eACA,kBAEA,gBACE,4CAMA,gCACE,4CAIJ,wBACE,8CAIJ,oBAEE,mBAIJ,GACE,gBAOF,cACE,mBAIA,0CAEE,cAEA,sEACE,eAGF,oEACE,gBAKF,mCACE,6BAKN,mBACE,uCACA,gBACA,iCAGF,0BACE,iBAGF,yBACE,sBACA,mBAEA,iCACE,mBACA,YACA,YACA,yBACA","file":"table.css"}
|
||||
605
docs/index.html
605
docs/index.html
|
|
@ -1,401 +1,298 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta charset="utf-8" />
|
||||
<title>Components by LBRY</title>
|
||||
|
||||
<link rel="stylesheet" href="https://rsms.me/inter/inter.css"/>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/tonsky/FiraCode@master/distr/fira_code.css"/>
|
||||
<!-- <link rel="stylesheet" href="../dist/index.css"/> -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lbryio/components@master/dist/index.css"/>
|
||||
<link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
|
||||
<link rel="stylesheet" href="../dist/index.css" />
|
||||
<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lbryio/components@master/dist/index.css"/> -->
|
||||
|
||||
<style>
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-family: var(--font-sans);
|
||||
padding-top: var(--spacing-l);
|
||||
padding: 5rem;
|
||||
max-width: 110rem;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
header {
|
||||
border-bottom: 1px solid var(--lbry-gray-1);
|
||||
margin-bottom: var(--spacing-l);
|
||||
li {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
drawer-navigation,
|
||||
drawer-wrap {
|
||||
padding-right: var(--spacing-l);
|
||||
padding-left: var(--spacing-l);
|
||||
.docs__color-row {
|
||||
margin-bottom: var(--spacing-s);
|
||||
}
|
||||
|
||||
drawer-navigation {
|
||||
font-size: 1.25rem;
|
||||
.docs__color {
|
||||
display: inline-block;
|
||||
height: 100px;
|
||||
width: 250px;
|
||||
border-radius: 5px;
|
||||
padding: var(--spacing-s);
|
||||
margin-right: var(--spacing-s);
|
||||
color: var(--color-text-inverse);
|
||||
}
|
||||
|
||||
main {
|
||||
flex: 1;
|
||||
min-height: 100vh;
|
||||
padding-right: var(--spacing-l);
|
||||
padding-left: var(--spacing-l);
|
||||
.docs__color h3 {
|
||||
margin-bottom: var(--spacing-s);
|
||||
}
|
||||
|
||||
section {
|
||||
border-bottom: 1px solid var(--lbry-gray-1);
|
||||
margin-bottom: var(--spacing-l);
|
||||
.docs__color.docs__color--primary {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-primary-alt);
|
||||
}
|
||||
.docs__color.docs__color--primary-alt {
|
||||
color: var(--color-primary);
|
||||
background-color: var(--color-primary-alt);
|
||||
}
|
||||
.docs__color.docs__color--secondary {
|
||||
background-color: var(--color-secondary);
|
||||
}
|
||||
.docs__color.docs__color--secondary-alt {
|
||||
background-color: var(--color-secondary-alt);
|
||||
color: var(--color-secondary);
|
||||
}
|
||||
.docs__color.docs__color--tertiary {
|
||||
background-color: var(--color-tertiary);
|
||||
}
|
||||
.docs__color.docs__color--tertiary-alt {
|
||||
background-color: var(--color-tertiary-alt);
|
||||
color: var(--color-tertiary);
|
||||
}
|
||||
.docs__color.docs__color--danger {
|
||||
background-color: var(--color-danger);
|
||||
}
|
||||
.docs__color.docs__color--danger-alt {
|
||||
background-color: var(--color-danger-alt);
|
||||
color: var(--color-danger);
|
||||
}
|
||||
.docs__color.docs__color--warning {
|
||||
background-color: var(--color-warning);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
font-weight: bolder;
|
||||
padding-right: var(--spacing-l);
|
||||
padding-left: var(--spacing-l);
|
||||
}
|
||||
|
||||
h2 {
|
||||
.title {
|
||||
font-size: 2rem;
|
||||
padding-right: var(--spacing-l);
|
||||
padding-left: var(--spacing-l);
|
||||
padding-bottom: var(--spacing-s);
|
||||
}
|
||||
|
||||
h3 {
|
||||
background-color: var(--lbry-black);
|
||||
color: var(--lbry-white);
|
||||
display: inline-block;
|
||||
font-size: 1.5rem;
|
||||
font-weight: bolder;
|
||||
margin-bottom: var(--spacing-s);
|
||||
padding: 0.25rem 1rem;
|
||||
pointer-events: none;
|
||||
.title--large {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.25rem;
|
||||
margin-bottom: var(--spacing-s);
|
||||
.title--section {
|
||||
font-weight: 700;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin-bottom: var(--spacing-s);
|
||||
.card--inline {
|
||||
border-radius: 5px;
|
||||
border: 1px solid var(--color-gray-3);
|
||||
margin-top: var(--spacing-s);
|
||||
}
|
||||
|
||||
footer {
|
||||
border-top: 1px solid var(--lbry-gray-1);
|
||||
color: var(--lbry-gray-5);
|
||||
.card__header {
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.card__header,
|
||||
.card__body {
|
||||
padding: var(--spacing-l);
|
||||
}
|
||||
|
||||
.social-links a {
|
||||
width: 1.25rem; height: 1.25rem;
|
||||
|
||||
background-color: var(--lbry-black);
|
||||
color: transparent;
|
||||
display: inline-block;
|
||||
font-size: 0;
|
||||
border-radius: 50%;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.social-links a:not(:last-of-type) {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<h1>@lbry/components</h1>
|
||||
<h2>Styling for shared components across LBRY properties</h2>
|
||||
|
||||
<drawer-navigation>
|
||||
<drawer-section>
|
||||
<drawer-title>
|
||||
Link I
|
||||
<drawer-navigation-helper/>
|
||||
</drawer-title>
|
||||
|
||||
<drawer-wrap>
|
||||
<drawer-children>
|
||||
<drawer-child>
|
||||
<a href="">
|
||||
<strong>Use LBRY</strong>
|
||||
<span>Get the most out of LBRY</span>
|
||||
</a>
|
||||
</drawer-child>
|
||||
|
||||
<drawer-child>
|
||||
<a href="">
|
||||
<strong>FAQ</strong>
|
||||
<span>Got questions? We might have answers!</span>
|
||||
</a>
|
||||
</drawer-child>
|
||||
|
||||
<drawer-child>
|
||||
<a href="">
|
||||
<strong>Blockchain Explorer</strong>
|
||||
<span>The history of LBRY’s blockchain</span>
|
||||
</a>
|
||||
</drawer-child>
|
||||
|
||||
<drawer-child class="social-links">
|
||||
<div>
|
||||
<strong>Social</strong>
|
||||
<span>
|
||||
<a href="">Network 1</a>
|
||||
<a href="">Network 2</a>
|
||||
<a href="">Network 3</a>
|
||||
<a href="">Network 4</a>
|
||||
<a href="">Network 5</a>
|
||||
</span>
|
||||
</div>
|
||||
</drawer-child>
|
||||
|
||||
<drawer-child>
|
||||
<a href="">
|
||||
<strong>Tour</strong>
|
||||
<span>Do you want to learn how to publish content to the LBRY network?</span>
|
||||
</a>
|
||||
</drawer-child>
|
||||
|
||||
<drawer-child>
|
||||
<a href="">
|
||||
<strong>News</strong>
|
||||
<span>The latest happenings with the LBRY team and community</span>
|
||||
</a>
|
||||
</drawer-child>
|
||||
|
||||
<drawer-child>
|
||||
<a href="">
|
||||
<strong>Chat</strong>
|
||||
<span>Chat with other LBRY users and LBRY team members</span>
|
||||
</a>
|
||||
</drawer-child>
|
||||
</drawer-children>
|
||||
</drawer-wrap>
|
||||
</drawer-section>
|
||||
|
||||
<drawer-section>
|
||||
<drawer-title>
|
||||
Link II
|
||||
<drawer-navigation-helper/>
|
||||
</drawer-title>
|
||||
|
||||
<drawer-wrap>
|
||||
<drawer-children>
|
||||
<drawer-child>
|
||||
<a href="">
|
||||
<strong>YouTube Partner Program</strong>
|
||||
<span>Bring all your content to LBRY with just a few clicks</span>
|
||||
</a>
|
||||
</drawer-child>
|
||||
|
||||
<drawer-child>
|
||||
<a href="">
|
||||
<strong>Creator FAQ</strong>
|
||||
<span>Like the FAQ, but for Creators</span>
|
||||
</a>
|
||||
</drawer-child>
|
||||
|
||||
<drawer-child>
|
||||
<a href="">
|
||||
<strong>Fund a Project</strong>
|
||||
<span>How to to get some LBC for your latest idea or project</span>
|
||||
</a>
|
||||
</drawer-child>
|
||||
|
||||
<drawer-child>
|
||||
<a href="">
|
||||
<strong>Makers</strong>
|
||||
<span>Would you like to share and sell 3D printable files?</span>
|
||||
</a>
|
||||
</drawer-child>
|
||||
</drawer-children>
|
||||
</drawer-wrap>
|
||||
</drawer-section>
|
||||
|
||||
<drawer-section>
|
||||
<drawer-title>
|
||||
Link III
|
||||
<drawer-navigation-helper/>
|
||||
</drawer-title>
|
||||
|
||||
<drawer-wrap>
|
||||
<drawer-children>
|
||||
<drawer-child>
|
||||
<a href="">
|
||||
<strong>Team / About</strong>
|
||||
<span>Meet the people building LBRY and find out why they’re doing it</span>
|
||||
</a>
|
||||
</drawer-child>
|
||||
|
||||
<drawer-child>
|
||||
<a href="">
|
||||
<strong>Join Us</strong>
|
||||
<span>Work with the LBRY team</span>
|
||||
</a>
|
||||
</drawer-child>
|
||||
|
||||
<drawer-child>
|
||||
<a href="">
|
||||
<strong>Contact</strong>
|
||||
<span>Have a question or want to connect with the LBRY, Inc. team?</span>
|
||||
</a>
|
||||
</drawer-child>
|
||||
|
||||
<drawer-child>
|
||||
<a href="">
|
||||
<strong>Credit Reports</strong>
|
||||
<span>Four times a year we share the current state of LBRY, Inc.'s balance sheet</span>
|
||||
</a>
|
||||
</drawer-child>
|
||||
</drawer-children>
|
||||
</drawer-wrap>
|
||||
</drawer-section>
|
||||
|
||||
<drawer-section>
|
||||
<drawer-title>
|
||||
Link IV
|
||||
<drawer-navigation-helper/>
|
||||
</drawer-title>
|
||||
|
||||
<drawer-wrap>
|
||||
<drawer-children>
|
||||
<drawer-child>
|
||||
<a href="">
|
||||
<strong>LBRY.tech</strong>
|
||||
<span>Find out how the heck all of this works</span>
|
||||
</a>
|
||||
</drawer-child>
|
||||
|
||||
<drawer-child>
|
||||
<a href="">
|
||||
<strong>GitHub</strong>
|
||||
<span>The LBRY code is open source, check out the repos</span>
|
||||
</a>
|
||||
</drawer-child>
|
||||
|
||||
<drawer-child>
|
||||
<a href="">
|
||||
<strong>Contributor's Guide</strong>
|
||||
<span>Tips and guidelines for being a contributor to the LBRY projects</span>
|
||||
</a>
|
||||
</drawer-child>
|
||||
</drawer-children>
|
||||
</drawer-wrap>
|
||||
</drawer-section>
|
||||
</drawer-navigation>
|
||||
<h1 class="title--large">@lbry/components</h1>
|
||||
<p class="section__subtitle">
|
||||
Styling for shared components across LBRY properties
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section>
|
||||
<p>Hello and whaddup!</p>
|
||||
</section>
|
||||
<section class="section">
|
||||
<h2 class="title--section">Font</h2>
|
||||
<div class="card--inline">
|
||||
<div class="card__header">
|
||||
<h3 class="title">Inter</h3>
|
||||
<p class="subtitle">
|
||||
<a href="https://github.com/rsms/inter" class="button--link"
|
||||
>https://github.com/rsms/inter</a
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
<div class="card__body">
|
||||
<ul>
|
||||
<li style="font-weight: 300;">Inter Light - 300</li>
|
||||
<li style="font-weight: 400;">Inter Regular - 400</li>
|
||||
<li style="font-weight: 700;">Inter Bold - 700</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="section">
|
||||
<h2 class="title--section">Color</h2>
|
||||
<div class="card--inline">
|
||||
<div class="card__body">
|
||||
<div class="docs__color-row">
|
||||
<div class="docs__color docs__color--primary">
|
||||
<h3>Primary</h3>
|
||||
<code>#xxx</code><br />
|
||||
<code>--color-primary</code>
|
||||
</div>
|
||||
<div class="docs__color docs__color--primary-alt">
|
||||
<h3>Primary Alt</h3>
|
||||
<code>#xxx</code><br />
|
||||
<code>--color-primary-alt</code>
|
||||
</div>
|
||||
<div class="docs__color docs__color--secondary">
|
||||
<h3>Secondary</h3>
|
||||
<code>#xxx</code><br />
|
||||
<code>--color-secondary</code>
|
||||
</div>
|
||||
<div class="docs__color docs__color--secondary-alt">
|
||||
<h3>Secondary Alt</h3>
|
||||
<code>#xxx</code><br />
|
||||
<code>--color-secondary-alt</code>
|
||||
</div>
|
||||
</div>
|
||||
<div class="docs__color-row">
|
||||
<div class="docs__color docs__color--tertiary">
|
||||
<h3>Tertiary</h3>
|
||||
<code>#xxx</code><br />
|
||||
<code>--color-tertiary</code>
|
||||
</div>
|
||||
<div class="docs__color docs__color--tertiary-alt">
|
||||
<h3>Tertiary Alt</h3>
|
||||
<code>#xxx</code><br />
|
||||
<code>--color-tertiary-alt</code>
|
||||
</div>
|
||||
<div class="docs__color docs__color--danger">
|
||||
<h3>Danger</h3>
|
||||
<code>#xxx</code><br />
|
||||
<code>--color-danger</code>
|
||||
</div>
|
||||
<div class="docs__color docs__color--danger-alt">
|
||||
<h3>Danger Alt</h3>
|
||||
<code>#xxx</code><br />
|
||||
<code>--color-danger-alt</code>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="docs__color docs__color--warning">
|
||||
<h3>Warning</h3>
|
||||
<code>#xxx</code><br />
|
||||
<code>--color-warning</code>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="section">
|
||||
<h2 class="title--section">Buttons</h2>
|
||||
<div class="card--inline">
|
||||
<div class="card__body">
|
||||
<button class="button button--primary">Primary</button>
|
||||
<button class="button button--secondary">Secondary</button>
|
||||
<button class="button button--link">A Link</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="section">
|
||||
<h2 class="title--section">Badges</h2>
|
||||
<div class="card--inline">
|
||||
<div class="card__body">
|
||||
<button class="button badge--tag">gaming</button>
|
||||
<button class="button badge--tag-mature">pr0n</button>
|
||||
<button class="button badge--cost">12 LBC</button>
|
||||
<button class="button badge--alert">Warning</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="section">
|
||||
<h2 class="title--section">Form Elements</h2>
|
||||
<div class="card--inline">
|
||||
<div class="card__body">
|
||||
<fieldset-section>
|
||||
<label for="name">Name</label>
|
||||
<input id="name" placeholder="Cool guy Sean" type="text" />
|
||||
</fieldset-section>
|
||||
|
||||
<section>
|
||||
<h3>Form</h3>
|
||||
|
||||
<form>
|
||||
<fieldset>
|
||||
<legend>Subscribe to our newsletter</legend>
|
||||
<fieldset-section>
|
||||
<label for="emailAddress">Subscribe to our newsletter</label>
|
||||
|
||||
<input-submit>
|
||||
<input id="emailAddress" placeholder="you@domain.tld" type="text"/>
|
||||
<input title="Subscribe to our technical newsletter" type="submit" value="Subscribe" />
|
||||
<input
|
||||
id="emailAddress"
|
||||
placeholder="you@domain.tld"
|
||||
type="text"
|
||||
/>
|
||||
<button
|
||||
class="button button--secondary"
|
||||
title="Subscribe to our technical newsletter"
|
||||
>
|
||||
Subscribe
|
||||
</button>
|
||||
</input-submit>
|
||||
</fieldset>
|
||||
</fieldset-section>
|
||||
|
||||
<fieldset>
|
||||
<legend>Become a Gym Leader</legend>
|
||||
<fieldset-section>
|
||||
<label for="starter">Pokémon</label>
|
||||
<select id="starter">
|
||||
<option disabled selected>Choose a Pokémon</option>
|
||||
<option>Bulbasaur</option>
|
||||
<option>Charmander</option>
|
||||
<option>Squirtle</option>
|
||||
</select>
|
||||
</fieldset-section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<fieldset-group>
|
||||
<fieldset-section>
|
||||
<label for="name">Name</label>
|
||||
<input id="name" placeholder="Will Smith" type="text"/>
|
||||
</fieldset-section>
|
||||
|
||||
<fieldset-section>
|
||||
<label for="starter">Pokémon</label>
|
||||
<select id="starter">
|
||||
<option disabled selected>Choose a Pokémon</option>
|
||||
<option>Bulbasaur</option>
|
||||
<option>Charmander</option>
|
||||
<option>Squirtle</option>
|
||||
</select>
|
||||
</fieldset-section>
|
||||
</fieldset-group>
|
||||
|
||||
<fieldset-section class="full-width">
|
||||
<label for="notes">Notes</label>
|
||||
<textarea id="notes"></textarea>
|
||||
</fieldset-section>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Click some buttons</legend>
|
||||
|
||||
<radio-element>
|
||||
<input id="test-radio-1" name="toggle" type="radio">
|
||||
<label for="test-radio-1">Radio button 1</label>
|
||||
<radio-toggle/>
|
||||
</radio-element>
|
||||
|
||||
<radio-element>
|
||||
<input id="test-radio-2" name="toggle" type="radio">
|
||||
<label for="test-radio-2">Radio button 2</label>
|
||||
<radio-toggle/>
|
||||
</radio-element>
|
||||
|
||||
<checkbox-element>
|
||||
<input id="test-checkbox-1" name="check" type="checkbox">
|
||||
<div class="card--inline">
|
||||
<div class="card__body">
|
||||
<fieldset-section>
|
||||
<fieldset-section class="checkbox">
|
||||
<label for="test-checkbox-1">Checkbox</label>
|
||||
<checkbox-toggle/>
|
||||
</checkbox-element>
|
||||
</fieldset>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3>Table</h3>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Component</th>
|
||||
<th>Language (Toolset)</th>
|
||||
<th>What Is It</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><a href="https://github.com/lbryio/lbrycrd" rel="noopener noreferrer" target="_blank">lbrycrd</a></td>
|
||||
<td>C++</td>
|
||||
<td>A full node for the LBRY blockchain, including a standalone wallet. Used by miners and some applications. Most consumer applications do not bundle <a class="link--glossary" href="/glossary#lbrycrd">lbrycrd</a> directly, and instead bundle <a class="link--glossary" href="/glossary#lbry-sdk">lbry-sdk</a>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="https://github.com/lbryio/lbry" rel="noopener noreferrer" target="_blank">lbry-sdk</a></td>
|
||||
<td>Python (asyncio)</td>
|
||||
<td>A daemon that can be used directly or to develop other applications. Provides convenience <a href="/api/sdk">APIs</a>, bundles an SPV wallet (<a class="link--glossary" href="/glossary#torba">torba</a>), and contains an implementation of the LBRY data network.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="https://github.com/lbryio/torba" rel="noopener noreferrer" target="_blank">torba</a></td>
|
||||
<td>Python</td>
|
||||
<td>An <a class="link--glossary" href="/glossary#SPV">SPV</a> (Simple Payment Verification) wallet. Bundled with <a class="link--glossary" href="/glossary#lbry-sdk">lbry-sdk</a>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="https://github.com/lbryio/lbry/tree/master/lbrynet/extras/wallet/server" rel="noopener noreferrer" target="_blank">wallet server</a></td>
|
||||
<td>Protobuf, Python</td>
|
||||
<td>The wallet server used by <a class="link--glossary" href="/glossary#torba">torba</a>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="https://github.com/lbryio/lbry/tree/master/lbrynet/schema" rel="noopener noreferrer" target="_blank">schema</a></td>
|
||||
<td>Protobuf, Python</td>
|
||||
<td>Defines the structure of the metadata stored in the LBRY blockchain.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer>Copyright © 2018-2019, LBRY Inc. | BSD 3-Clause Licensed.</footer>
|
||||
<input id="test-checkbox-1" name="check" type="checkbox" />
|
||||
</fieldset-section>
|
||||
<fieldset-section class="checkbox">
|
||||
<label for="test-checkbox-2">Another</label>
|
||||
<input id="test-checkbox-2" name="check-2" type="checkbox" />
|
||||
</fieldset-section>
|
||||
</fieldset-section>
|
||||
<fieldset-section class="radio">
|
||||
<label for="test-radio-1">Radio</label>
|
||||
<input id="test-radio-1" name="check" type="radio" />
|
||||
</fieldset-section>
|
||||
<fieldset-section class="radio">
|
||||
<label for="test-radio-2">Another Radio</label>
|
||||
<input id="test-radio-2" name="check-2" type="radio" />
|
||||
</fieldset-section>
|
||||
<fieldset-section class="radio">
|
||||
<label for="test-radio-2">Another Radio</label>
|
||||
<input id="test-radio-2" name="check-2" type="radio" />
|
||||
</fieldset-section>
|
||||
<fieldset-section class="radio">
|
||||
<label for="test-radio-2">Another Radio</label>
|
||||
<input id="test-radio-2" name="check-2" type="radio" />
|
||||
</fieldset-section>
|
||||
<fieldset-section class="radio">
|
||||
<label for="test-radio-1">Radio</label>
|
||||
<input id="test-radio-1" name="check" type="radio" />
|
||||
</fieldset-section>
|
||||
<fieldset-section class="radio">
|
||||
<label for="test-radio-2">Another Radio</label>
|
||||
<input id="test-radio-2" name="check-2" type="radio" />
|
||||
</fieldset-section>
|
||||
<fieldset-section class="radio">
|
||||
<label for="test-radio-2">Another Radio</label>
|
||||
<input id="test-radio-2" name="check-2" type="radio" />
|
||||
</fieldset-section>
|
||||
<fieldset-section class="radio">
|
||||
<label for="test-radio-2">Another Radio</label>
|
||||
<input id="test-radio-2" name="check-2" type="radio" />
|
||||
</fieldset-section>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
"homepage": "https://github.com/lbryio/components#readme",
|
||||
"husky": {
|
||||
"hooks": {
|
||||
"pre-commit": "npm run test:sass && npm run sass:prod && git add -A :/"
|
||||
"pre-commit": "npm run build && git add -A :/"
|
||||
}
|
||||
},
|
||||
"license": "BSD-3-Clause",
|
||||
|
|
@ -33,8 +33,8 @@
|
|||
"url": "https://github.com/lbryio/components.git"
|
||||
},
|
||||
"scripts": {
|
||||
"sass:dev": "sass --load-path=node_modules --watch sass:dist --style compressed",
|
||||
"sass:prod": "sass --load-path=node_modules --update sass:dist --style compressed",
|
||||
"dev": "sass --load-path=node_modules --watch sass:dist --style compressed",
|
||||
"build": "sass --load-path=node_modules --update sass:dist --style compressed",
|
||||
"test": "run-s test:*",
|
||||
"test:dependencies": "updates --update ./",
|
||||
"test:sass": "sass-lint --config ./node_modules/@inc/sasslint-config/config.json --verbose",
|
||||
|
|
|
|||
45
sass/badge.scss
Normal file
45
sass/badge.scss
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
.badge {
|
||||
height: var(--height-badge);
|
||||
border-radius: var(--border-radius);
|
||||
font-size: var(--font-small);
|
||||
padding: var(--spacing-xs) var(--spacing-xs);
|
||||
white-space: nowrap;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.badge--tag {
|
||||
@extend .badge;
|
||||
background-color: var(--color-tag-bg);
|
||||
color: var(--color-tag);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-tag-bg-hover);
|
||||
color: var(--color-tag-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.badge--tag-mature {
|
||||
@extend .badge;
|
||||
background-color: var(--color-tertiary-alt);
|
||||
color: var(--color-tertiary);
|
||||
}
|
||||
|
||||
.badge--cost {
|
||||
@extend .badge;
|
||||
background-color: var(--color-cost);
|
||||
color: var(--color-black);
|
||||
}
|
||||
|
||||
.badge--free {
|
||||
@extend .badge;
|
||||
background-color: var(--color-secondary-alt);
|
||||
color: var(--color-secondary);
|
||||
}
|
||||
|
||||
.badge--alert {
|
||||
@extend .badge;
|
||||
background-color: var(--color-danger-alt);
|
||||
color: var(--color-danger);
|
||||
}
|
||||
|
|
@ -1,54 +0,0 @@
|
|||
.badge {
|
||||
border-radius: 0.2rem;
|
||||
display: inline-block;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.05rem;
|
||||
line-height: 2;
|
||||
padding-right: var(--spacing-xs);
|
||||
padding-left: var(--spacing-xs);
|
||||
vertical-align: top;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.badge--cost {
|
||||
background-color: var(--lbry-yellow-2);
|
||||
color: var(--lbry-black);
|
||||
|
||||
[data-mode="dark"] & {
|
||||
background-color: var(--lbry-yellow-3);
|
||||
}
|
||||
}
|
||||
|
||||
.badge--free {
|
||||
background-color: var(--lbry-blue-2);
|
||||
|
||||
[data-mode="dark"] & {
|
||||
background-color: var(--lbry-blue-3);
|
||||
color: var(--lbry-black);
|
||||
}
|
||||
}
|
||||
|
||||
.badge--large {
|
||||
font-size: 4rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.badge--nsfw {
|
||||
background-color: var(--lbry-grape-2);
|
||||
|
||||
[data-mode="dark"] & {
|
||||
background-color: var(--lbry-grape-3);
|
||||
color: var(--lbry-black);
|
||||
}
|
||||
}
|
||||
|
||||
.badge--primary {
|
||||
background-color: var(--lbry-teal-5);
|
||||
color: var(--lbry-white);
|
||||
}
|
||||
|
||||
.badge--alert {
|
||||
background-color: var(--lbry-red-2);
|
||||
color: var(--lbry-white);
|
||||
}
|
||||
|
|
@ -1,46 +1,73 @@
|
|||
.button {
|
||||
fill: currentColor;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
}
|
||||
text-decoration: none;
|
||||
font-weight: 400;
|
||||
cursor: pointer;
|
||||
|
||||
.button--alt {
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
&:disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.button--constrict {
|
||||
@include constrict(20vw);
|
||||
.button--primary,
|
||||
.button--secondary,
|
||||
.button--alt,
|
||||
.button--link {
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.button--disabled {
|
||||
opacity: 0.3;
|
||||
.button--primary,
|
||||
.button--secondary {
|
||||
height: var(--height-button);
|
||||
border-radius: var(--border-radius);
|
||||
padding: var(--spacing-s) var(--spacing-m);
|
||||
line-height: 1.2;
|
||||
|
||||
&:not([disabled]) {
|
||||
pointer-events: none;
|
||||
&:not(:last-of-type) {
|
||||
margin-right: var(--spacing-s);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: inherit;
|
||||
color: inherit;
|
||||
fill: inherit;
|
||||
}
|
||||
.button--primary {
|
||||
background-color: var(--color-button-primary-bg);
|
||||
color: var(--color-button-primary-text);
|
||||
|
||||
&:hover {
|
||||
color: var(--color-button-primary-hover-text);
|
||||
background-color: var(--color-button-primary-bg-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.button--secondary {
|
||||
background-color: var(--color-button-secondary-bg);
|
||||
color: var(--color-button-secondary-text);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-button-secondary-bg-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.button--alt {
|
||||
color: var(--color-text);
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.button--icon {
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
background-color: rgba($lbry-black, 0.7);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 50%;
|
||||
border-radius: 50%;
|
||||
color: var(--lbry-white);
|
||||
transition: background-color 0.2s;
|
||||
|
||||
background-color: var(--color-primary);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--lbry-green-3);
|
||||
background-color: var(--color-button-primary-bg-hover);
|
||||
}
|
||||
|
||||
&.button--play {
|
||||
|
|
@ -54,62 +81,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
.button--inverse {
|
||||
padding: var(--spacing-xs) var(--spacing-s); // sass-lint:disable-line shorthand-values
|
||||
background-color: transparent;
|
||||
border: 1px solid var(--lbry-gray-1);
|
||||
border-radius: 1rem;
|
||||
color: inherit;
|
||||
transition: background-color 0.2s;
|
||||
|
||||
[data-mode="dark"] & {
|
||||
border-color: rgba($lbry-white, 0.1);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--lbry-gray-1);
|
||||
|
||||
[data-mode="dark"] & {
|
||||
background-color: rgba($lbry-white, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button--link {
|
||||
color: var(--lbry-teal-5);
|
||||
color: var(--color-link);
|
||||
transition: color 0.2s;
|
||||
word-break: break-all;
|
||||
|
||||
[data-mode="dark"] & {
|
||||
color: var(--lbry-teal-3);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--lbry-teal-3);
|
||||
|
||||
[data-mode="dark"] & {
|
||||
color: var(--lbry-teal-4);
|
||||
}
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.button--primary {
|
||||
padding: var(--spacing-xs) var(--spacing-s); // sass-lint:disable-line shorthand-values
|
||||
align-self: center; // fixes buttons next to tall elements inside one with `display: flex`
|
||||
background-color: var(--lbry-teal-5);
|
||||
border-radius: 1rem;
|
||||
color: var(--lbry-white);
|
||||
transition: background-color 0.2s;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--lbry-teal-3);
|
||||
|
||||
[data-mode="dark"] & {
|
||||
background-color: var(--lbry-teal-4);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button--uppercase {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
217
sass/form.scss
Normal file
217
sass/form.scss
Normal file
|
|
@ -0,0 +1,217 @@
|
|||
@import "init/mixins";
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
height: var(--height-input);
|
||||
border-radius: var(--border-radius);
|
||||
border: 1px solid;
|
||||
color: var(--color-input);
|
||||
border-color: var(--color-input-border);
|
||||
background-color: var(--color-input-bg);
|
||||
padding-right: var(--spacing-s);
|
||||
padding-left: var(--spacing-s);
|
||||
|
||||
&:focus {
|
||||
@include focus;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: var(--color-input-placeholder);
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
|
||||
checkbox-element,
|
||||
radio-element,
|
||||
select {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
select {
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 96 96' xmlns='http://www.w3.org/2000/svg' fill='%23212529'%3E%3Cpath d='M17.172, 31.172c1.562, -1.562 4.095, -1.562 5.656, 0l25.172, 25.171l25.172, -25.171c1.562, -1.562 4.095, -1.562 5.656, 0c1.562, 1.562 1.562, 4.095 0, 5.656l-28, 28c-1.562, 1.562 -4.095, 1.562 -5.656, 0l-28, -28c-0.781, -0.781 -1.172, -1.805 -1.172, -2.828c0, -1.023 0.391, -2.047 1.172, -2.828Z'/%3E%3C/svg%3E%0A");
|
||||
background-position: 99% center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1rem;
|
||||
padding-right: var(--spacing-l);
|
||||
padding-left: var(--spacing-s);
|
||||
}
|
||||
|
||||
fieldset-group {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
|
||||
&.fieldset-group--smushed {
|
||||
fieldset-section + fieldset-section {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
fieldset-section,
|
||||
.checkbox,
|
||||
.radio {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
+ fieldset-section,
|
||||
+ .checkbox,
|
||||
+ .radio {
|
||||
margin-top: var(--spacing-s);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
input,
|
||||
select {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
font-size: var(--font-small);
|
||||
color: var(--color-input-label);
|
||||
display: inline-block;
|
||||
margin-bottom: var(--spacing-xxs);
|
||||
}
|
||||
|
||||
input-submit {
|
||||
display: flex;
|
||||
|
||||
& > *:first-child,
|
||||
& > *:nth-child(2) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
& > *:first-child {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
& > *:nth-child(2) {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox,
|
||||
.radio {
|
||||
position: relative;
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
height: var(--height-checkbox);
|
||||
width: var(--height-checkbox);
|
||||
position: absolute;
|
||||
border: none;
|
||||
left: 0;
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
label {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
font-size: var(--font-base);
|
||||
padding-left: calc(var(--height-checkbox) + var(--spacing-s));
|
||||
min-height: var(--height-checkbox);
|
||||
|
||||
&:hover {
|
||||
&::before {
|
||||
background-color: var(--color-secondary-alt);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
label::before,
|
||||
label::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
}
|
||||
|
||||
// Hide the checkmark by default
|
||||
input[type="checkbox"] + label::after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
// Unhide on the checked state
|
||||
input[type="checkbox"]:checked + label::after,
|
||||
input[type="radio"]:checked + label::after {
|
||||
content: "";
|
||||
}
|
||||
|
||||
input[type="checkbox"]:focus + label::before,
|
||||
input[type="radio"]:focus + label::before {
|
||||
@include focus;
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
// Outer box of the fake checkbox
|
||||
label::before {
|
||||
height: var(--height-checkbox);
|
||||
width: var(--height-checkbox);
|
||||
border: 1px solid var(--color-input-border);
|
||||
border-radius: var(--border-radius);
|
||||
left: 0px;
|
||||
top: -1px;
|
||||
background-color: var(--color-input-bg);
|
||||
}
|
||||
|
||||
// Checkmark of the fake checkbox
|
||||
label::after {
|
||||
height: 6px;
|
||||
width: 12px;
|
||||
border-left: 2px solid;
|
||||
border-bottom: 2px solid;
|
||||
border-color: var(--color-secondary);
|
||||
transform: rotate(-45deg);
|
||||
left: 6px;
|
||||
top: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.radio {
|
||||
input[type="radio"] {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
// Outer box of the fake radio
|
||||
label::before {
|
||||
height: var(--height-radio);
|
||||
width: var(--height-radio);
|
||||
border: 1px solid var(--color-input-border);
|
||||
border-radius: calc(var(--height-radio) * 0.5);
|
||||
left: 0px;
|
||||
top: -1px;
|
||||
background-color: var(--color-input-bg);
|
||||
}
|
||||
|
||||
// Checkmark of the fake radio
|
||||
label::after {
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
border-radius: 50%;
|
||||
background-color: var(--color-secondary);
|
||||
left: 6px;
|
||||
top: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
.fieldset-group {
|
||||
@extend fieldset-group;
|
||||
}
|
||||
|
||||
.fieldset-section {
|
||||
@extend fieldset-section;
|
||||
}
|
||||
|
||||
.input-submit {
|
||||
@extend input-submit;
|
||||
}
|
||||
|
|
@ -1,268 +0,0 @@
|
|||
form {
|
||||
// setting the font size here sizes everything within
|
||||
&:not(:last-child) {
|
||||
margin-bottom: var(--spacing-s);
|
||||
}
|
||||
}
|
||||
|
||||
input,
|
||||
select {
|
||||
height: var(--spacing-l);
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
checkbox-element,
|
||||
radio-element,
|
||||
select {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
[type="email"],
|
||||
[type="number"],
|
||||
[type="password"],
|
||||
[type="text"] {
|
||||
padding-right: var(--spacing-s);
|
||||
padding-left: var(--spacing-s);
|
||||
transition: border 0.2s;
|
||||
}
|
||||
|
||||
[type="submit"] {
|
||||
color: var(--lbry-white);
|
||||
padding-right: var(--spacing-m);
|
||||
padding-left: var(--spacing-m);
|
||||
transition: all 0.2s;
|
||||
|
||||
&:not(:hover) {
|
||||
background-color: var(--lbry-black);
|
||||
border-color: var(--lbry-black);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--lbry-teal-3);
|
||||
border-color: var(--lbry-teal-5);
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 96 96' xmlns='http://www.w3.org/2000/svg' fill='%23212529'%3E%3Cpath d='M17.172, 31.172c1.562, -1.562 4.095, -1.562 5.656, 0l25.172, 25.171l25.172, -25.171c1.562, -1.562 4.095, -1.562 5.656, 0c1.562, 1.562 1.562, 4.095 0, 5.656l-28, 28c-1.562, 1.562 -4.095, 1.562 -5.656, 0l-28, -28c-0.781, -0.781 -1.172, -1.805 -1.172, -2.828c0, -1.023 0.391, -2.047 1.172, -2.828Z'/%3E%3C/svg%3E%0A");
|
||||
background-position: 99% center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1rem;
|
||||
padding-right: var(--spacing-l);
|
||||
padding-left: var(--spacing-s);
|
||||
|
||||
[data-mode="dark"] & {
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 96 96' xmlns='http://www.w3.org/2000/svg' fill='%23ffffff'%3E%3Cpath d='M17.172, 31.172c1.562, -1.562 4.095, -1.562 5.656, 0l25.172, 25.171l25.172, -25.171c1.562, -1.562 4.095, -1.562 5.656, 0c1.562, 1.562 1.562, 4.095 0, 5.656l-28, 28c-1.562, 1.562 -4.095, 1.562 -5.656, 0l-28, -28c-0.781, -0.781 -1.172, -1.805 -1.172, -2.828c0, -1.023 0.391, -2.047 1.172, -2.828Z'/%3E%3C/svg%3E%0A");
|
||||
}
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border-top: 1px solid var(--lbry-gray-1);
|
||||
margin-bottom: var(--spacing-m);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
fieldset-group {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
fieldset-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: var(--spacing-m);
|
||||
|
||||
&.full-width {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
fieldset-group &,
|
||||
.fieldset-group & {
|
||||
width: 49%;
|
||||
}
|
||||
|
||||
label {
|
||||
color: var(--lbry-gray-4);
|
||||
display: inline-block;
|
||||
font-size: smaller;
|
||||
margin-bottom: var(--spacing-xxs);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
[type="email"],
|
||||
[type="number"],
|
||||
[type="text"],
|
||||
select,
|
||||
textarea {
|
||||
border-color: var(--lbry-black);
|
||||
|
||||
&:focus {
|
||||
border-color: var(--lbry-teal-5);
|
||||
}
|
||||
}
|
||||
|
||||
input,
|
||||
select {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
legend {
|
||||
padding: var(--spacing-xs) var(--spacing-s); // sass-lint:disable-line shorthand-values
|
||||
border: 1px solid var(--lbry-gray-1);
|
||||
margin-bottom: var(--spacing-s);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
input-submit {
|
||||
display: flex;
|
||||
|
||||
[type="email"],
|
||||
[type="text"] {
|
||||
flex: 1;
|
||||
|
||||
&:not(:focus) {
|
||||
border-top-color: var(--lbry-black);
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: var(--lbry-black);
|
||||
border-left-color: var(--lbry-black);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-top-color: var(--lbry-teal-5);
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: var(--lbry-teal-5);
|
||||
border-left-color: var(--lbry-teal-5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
checkbox-element {
|
||||
@include tick;
|
||||
|
||||
&:hover {
|
||||
checkbox-toggle,
|
||||
.checkbox-toggle {
|
||||
border-color: var(--lbry-teal-4);
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
&[type="checkbox"] {
|
||||
width: 0; height: 0;
|
||||
visibility: hidden;
|
||||
|
||||
&:not(:checked) {
|
||||
+ label + checkbox-toggle::before,
|
||||
+ label + .checkbox-toggle::before {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
&:checked {
|
||||
+ label {
|
||||
color: var(--lbry-teal-4);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
checkbox-toggle {
|
||||
@include tick-toggle;
|
||||
|
||||
&::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2333b58f' stroke-width='2'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E%0A");
|
||||
background-position: center left;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 130%;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
}
|
||||
|
||||
radio-element {
|
||||
@include tick;
|
||||
|
||||
&:hover {
|
||||
radio-toggle,
|
||||
.radio-toggle {
|
||||
border-color: var(--lbry-teal-4);
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
&[type="radio"] {
|
||||
width: 0; height: 0;
|
||||
visibility: hidden;
|
||||
|
||||
&:not(:checked) {
|
||||
+ label + radio-toggle::before,
|
||||
+ label + .radio-toggle::before {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&:checked {
|
||||
+ label {
|
||||
color: var(--lbry-teal-4);
|
||||
}
|
||||
|
||||
+ label + radio-toggle::before,
|
||||
+ label + .radio-toggle::before {
|
||||
background-color: var(--lbry-teal-4);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
radio-toggle {
|
||||
@include tick-toggle;
|
||||
border-radius: 50%;
|
||||
|
||||
&::before {
|
||||
border-radius: 50%;
|
||||
transform: scale(0.6);
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
}
|
||||
|
||||
// Custom elements are apparently difficult to use in React, so use classes
|
||||
|
||||
.checkbox-element {
|
||||
@extend checkbox-element;
|
||||
}
|
||||
|
||||
.checkbox-toggle {
|
||||
@extend checkbox-toggle;
|
||||
}
|
||||
|
||||
.fieldset {
|
||||
@extend fieldset;
|
||||
}
|
||||
|
||||
.fieldset-group {
|
||||
@extend fieldset-group;
|
||||
}
|
||||
|
||||
.fieldset-section {
|
||||
@extend fieldset-section;
|
||||
}
|
||||
|
||||
.form {
|
||||
@extend form;
|
||||
}
|
||||
|
||||
.input-submit {
|
||||
@extend input-submit;
|
||||
}
|
||||
|
||||
.radio-element {
|
||||
@extend radio-element;
|
||||
}
|
||||
|
||||
.radio-toggle {
|
||||
@extend radio-toggle;
|
||||
}
|
||||
|
|
@ -8,6 +8,32 @@
|
|||
@import "badge";
|
||||
@import "button";
|
||||
@import "form";
|
||||
@import "media";
|
||||
@import "navigation";
|
||||
@import "table";
|
||||
@import "section";
|
||||
|
||||
// OLD - Deprecated
|
||||
@import "./navigation/index";
|
||||
|
||||
body {
|
||||
cursor: default;
|
||||
font-weight: var(--font-weight-base);
|
||||
font-size: var(--font-base);
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
||||
Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
|
||||
"Segoe UI Symbol";
|
||||
}
|
||||
|
||||
*:focus:not(:hover) {
|
||||
@include focus;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 1px;
|
||||
background-color: var(--color-gray-2);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,291 +1,60 @@
|
|||
|
||||
// General
|
||||
// ───────────────────────────────────
|
||||
|
||||
$lbry-white: #fff;
|
||||
$lbry-silver: #f1f3f5;
|
||||
$lbry-black: #212529;
|
||||
|
||||
$base-gray: #ced4da;
|
||||
$base-teal: #38d9a9;
|
||||
$base-cyan: #3bc9db;
|
||||
$base-blue: #339af0;
|
||||
$base-indigo: #748ffc;
|
||||
$base-violet: #9775fa;
|
||||
$base-grape: #da77f2;
|
||||
$base-pink: #f783ac;
|
||||
$base-red: #e03131;
|
||||
$base-orange: #ff922b;
|
||||
$base-yellow: #ffe066;
|
||||
$base-lime: #a9e34b;
|
||||
$base-green: #51cf66;
|
||||
|
||||
|
||||
|
||||
// Gray
|
||||
// ───────────────────────────────────
|
||||
|
||||
$lbry-gray-list: (
|
||||
"1": mix($lbry-white, $base-gray, 40%),
|
||||
"2": mix($lbry-white, $base-gray, 20%),
|
||||
"3": $base-gray,
|
||||
"4": mix($lbry-black, $base-gray, 20%),
|
||||
"5": mix($lbry-black, $base-gray, 40%)
|
||||
);
|
||||
|
||||
$lbry-gray-1: map-get($lbry-gray-list, "1");
|
||||
$lbry-gray-2: map-get($lbry-gray-list, "2");
|
||||
$lbry-gray-3: map-get($lbry-gray-list, "3");
|
||||
$lbry-gray-4: map-get($lbry-gray-list, "4");
|
||||
$lbry-gray-5: map-get($lbry-gray-list, "5");
|
||||
|
||||
|
||||
|
||||
// Teal
|
||||
// ───────────────────────────────────
|
||||
|
||||
$lbry-teal-list: (
|
||||
"1": mix($lbry-white, $base-teal, 40%),
|
||||
"2": mix($lbry-white, $base-teal, 20%),
|
||||
"3": $base-teal,
|
||||
"4": mix($lbry-black, $base-teal, 20%),
|
||||
"5": mix($lbry-black, $base-teal, 40%)
|
||||
);
|
||||
|
||||
$lbry-teal-1: map-get($lbry-teal-list, "1");
|
||||
$lbry-teal-2: map-get($lbry-teal-list, "2");
|
||||
$lbry-teal-3: map-get($lbry-teal-list, "3");
|
||||
$lbry-teal-4: map-get($lbry-teal-list, "4");
|
||||
$lbry-teal-5: map-get($lbry-teal-list, "5");
|
||||
|
||||
|
||||
|
||||
// Cyan
|
||||
// ───────────────────────────────────
|
||||
|
||||
$lbry-cyan-list: (
|
||||
"1": mix($lbry-white, $base-cyan, 40%),
|
||||
"2": mix($lbry-white, $base-cyan, 20%),
|
||||
"3": $base-cyan,
|
||||
"4": mix($lbry-black, $base-cyan, 20%),
|
||||
"5": mix($lbry-black, $base-cyan, 40%)
|
||||
);
|
||||
|
||||
$lbry-cyan-1: map-get($lbry-cyan-list, "1");
|
||||
$lbry-cyan-2: map-get($lbry-cyan-list, "2");
|
||||
$lbry-cyan-3: map-get($lbry-cyan-list, "3");
|
||||
$lbry-cyan-4: map-get($lbry-cyan-list, "4");
|
||||
$lbry-cyan-5: map-get($lbry-cyan-list, "5");
|
||||
|
||||
|
||||
|
||||
// Blue
|
||||
// ───────────────────────────────────
|
||||
|
||||
$lbry-blue-list: (
|
||||
"1": mix($lbry-white, $base-blue, 40%),
|
||||
"2": mix($lbry-white, $base-blue, 20%),
|
||||
"3": $base-blue,
|
||||
"4": mix($lbry-black, $base-blue, 20%),
|
||||
"5": mix($lbry-black, $base-blue, 40%)
|
||||
);
|
||||
|
||||
$lbry-blue-1: map-get($lbry-blue-list, "1");
|
||||
$lbry-blue-2: map-get($lbry-blue-list, "2");
|
||||
$lbry-blue-3: map-get($lbry-blue-list, "3");
|
||||
$lbry-blue-4: map-get($lbry-blue-list, "4");
|
||||
$lbry-blue-5: map-get($lbry-blue-list, "5");
|
||||
|
||||
|
||||
|
||||
// Indigo
|
||||
// ───────────────────────────────────
|
||||
|
||||
$lbry-indigo-list: (
|
||||
"1": mix($lbry-white, $base-indigo, 40%),
|
||||
"2": mix($lbry-white, $base-indigo, 20%),
|
||||
"3": $base-indigo,
|
||||
"4": mix($lbry-black, $base-indigo, 20%),
|
||||
"5": mix($lbry-black, $base-indigo, 40%)
|
||||
);
|
||||
|
||||
$lbry-indigo-1: map-get($lbry-indigo-list, "1");
|
||||
$lbry-indigo-2: map-get($lbry-indigo-list, "2");
|
||||
$lbry-indigo-3: map-get($lbry-indigo-list, "3");
|
||||
$lbry-indigo-4: map-get($lbry-indigo-list, "4");
|
||||
$lbry-indigo-5: map-get($lbry-indigo-list, "5");
|
||||
|
||||
|
||||
|
||||
// Violet
|
||||
// ───────────────────────────────────
|
||||
|
||||
$lbry-violet-list: (
|
||||
"1": mix($lbry-white, $base-violet, 40%),
|
||||
"2": mix($lbry-white, $base-violet, 20%),
|
||||
"3": $base-violet,
|
||||
"4": mix($lbry-black, $base-violet, 20%),
|
||||
"5": mix($lbry-black, $base-violet, 40%)
|
||||
);
|
||||
|
||||
$lbry-violet-1: map-get($lbry-violet-list, "1");
|
||||
$lbry-violet-2: map-get($lbry-violet-list, "2");
|
||||
$lbry-violet-3: map-get($lbry-violet-list, "3");
|
||||
$lbry-violet-4: map-get($lbry-violet-list, "4");
|
||||
$lbry-violet-5: map-get($lbry-violet-list, "5");
|
||||
|
||||
|
||||
|
||||
// Grape
|
||||
// ───────────────────────────────────
|
||||
|
||||
$lbry-grape-list: (
|
||||
"1": mix($lbry-white, $base-grape, 40%),
|
||||
"2": mix($lbry-white, $base-grape, 20%),
|
||||
"3": $base-grape,
|
||||
"4": mix($lbry-black, $base-grape, 20%),
|
||||
"5": mix($lbry-black, $base-grape, 40%)
|
||||
);
|
||||
|
||||
$lbry-grape-1: map-get($lbry-grape-list, "1");
|
||||
$lbry-grape-2: map-get($lbry-grape-list, "2");
|
||||
$lbry-grape-3: map-get($lbry-grape-list, "3");
|
||||
$lbry-grape-4: map-get($lbry-grape-list, "4");
|
||||
$lbry-grape-5: map-get($lbry-grape-list, "5");
|
||||
|
||||
|
||||
|
||||
// Pink
|
||||
// ───────────────────────────────────
|
||||
|
||||
$lbry-pink-list: (
|
||||
"1": mix($lbry-white, $base-pink, 40%),
|
||||
"2": mix($lbry-white, $base-pink, 20%),
|
||||
"3": $base-pink,
|
||||
"4": mix($lbry-black, $base-pink, 20%),
|
||||
"5": mix($lbry-black, $base-pink, 40%)
|
||||
);
|
||||
|
||||
$lbry-pink-1: map-get($lbry-pink-list, "1");
|
||||
$lbry-pink-2: map-get($lbry-pink-list, "2");
|
||||
$lbry-pink-3: map-get($lbry-pink-list, "3");
|
||||
$lbry-pink-4: map-get($lbry-pink-list, "4");
|
||||
$lbry-pink-5: map-get($lbry-pink-list, "5");
|
||||
|
||||
|
||||
|
||||
// Red
|
||||
// ───────────────────────────────────
|
||||
|
||||
$lbry-red-list: (
|
||||
"1": mix($lbry-white, $base-red, 40%),
|
||||
"2": mix($lbry-white, $base-red, 20%),
|
||||
"3": $base-red,
|
||||
"4": mix($lbry-black, $base-red, 20%),
|
||||
"5": mix($lbry-black, $base-red, 40%)
|
||||
);
|
||||
|
||||
$lbry-red-1: map-get($lbry-red-list, "1");
|
||||
$lbry-red-2: map-get($lbry-red-list, "2");
|
||||
$lbry-red-3: map-get($lbry-red-list, "3");
|
||||
$lbry-red-4: map-get($lbry-red-list, "4");
|
||||
$lbry-red-5: map-get($lbry-red-list, "5");
|
||||
|
||||
|
||||
|
||||
// Orange
|
||||
// ───────────────────────────────────
|
||||
|
||||
$lbry-orange-list: (
|
||||
"1": mix($lbry-white, $base-orange, 40%),
|
||||
"2": mix($lbry-white, $base-orange, 20%),
|
||||
"3": $base-orange,
|
||||
"4": mix($lbry-black, $base-orange, 20%),
|
||||
"5": mix($lbry-black, $base-orange, 40%)
|
||||
);
|
||||
|
||||
$lbry-orange-1: map-get($lbry-orange-list, "1");
|
||||
$lbry-orange-2: map-get($lbry-orange-list, "2");
|
||||
$lbry-orange-3: map-get($lbry-orange-list, "3");
|
||||
$lbry-orange-4: map-get($lbry-orange-list, "4");
|
||||
$lbry-orange-5: map-get($lbry-orange-list, "5");
|
||||
|
||||
|
||||
|
||||
// Yellow
|
||||
// ───────────────────────────────────
|
||||
|
||||
$lbry-yellow-list: (
|
||||
"1": mix($lbry-white, $base-yellow, 40%),
|
||||
"2": mix($lbry-white, $base-yellow, 20%),
|
||||
"3": $base-yellow,
|
||||
"4": mix($lbry-black, $base-yellow, 20%),
|
||||
"5": mix($lbry-black, $base-yellow, 40%)
|
||||
);
|
||||
|
||||
$lbry-yellow-1: map-get($lbry-yellow-list, "1");
|
||||
$lbry-yellow-2: map-get($lbry-yellow-list, "2");
|
||||
$lbry-yellow-3: map-get($lbry-yellow-list, "3");
|
||||
$lbry-yellow-4: map-get($lbry-yellow-list, "4");
|
||||
$lbry-yellow-5: map-get($lbry-yellow-list, "5");
|
||||
|
||||
|
||||
|
||||
// Lime
|
||||
// ───────────────────────────────────
|
||||
|
||||
$lbry-lime-list: (
|
||||
"1": mix($lbry-white, $base-lime, 40%),
|
||||
"2": mix($lbry-white, $base-lime, 20%),
|
||||
"3": $base-lime,
|
||||
"4": mix($lbry-black, $base-lime, 20%),
|
||||
"5": mix($lbry-black, $base-lime, 40%)
|
||||
);
|
||||
|
||||
$lbry-lime-1: map-get($lbry-lime-list, "1");
|
||||
$lbry-lime-2: map-get($lbry-lime-list, "2");
|
||||
$lbry-lime-3: map-get($lbry-lime-list, "3");
|
||||
$lbry-lime-4: map-get($lbry-lime-list, "4");
|
||||
$lbry-lime-5: map-get($lbry-lime-list, "5");
|
||||
|
||||
|
||||
|
||||
// Green
|
||||
// ───────────────────────────────────
|
||||
|
||||
$lbry-green-list: (
|
||||
"1": mix($lbry-white, $base-green, 40%),
|
||||
"2": mix($lbry-white, $base-green, 20%),
|
||||
"3": $base-green,
|
||||
"4": mix($lbry-black, $base-green, 20%),
|
||||
"5": mix($lbry-black, $base-green, 40%)
|
||||
);
|
||||
|
||||
$lbry-green-1: map-get($lbry-green-list, "1");
|
||||
$lbry-green-2: map-get($lbry-green-list, "2");
|
||||
$lbry-green-3: map-get($lbry-green-list, "3");
|
||||
$lbry-green-4: map-get($lbry-green-list, "4");
|
||||
$lbry-green-5: map-get($lbry-green-list, "5");
|
||||
|
||||
|
||||
|
||||
// Color list
|
||||
// ───────────────────────────────────
|
||||
|
||||
$lbry-color-spectrum: 9;
|
||||
|
||||
$lbry-color-list: (
|
||||
$lbry-gray-list: "gray",
|
||||
$lbry-teal-list: "teal",
|
||||
$lbry-cyan-list: "cyan",
|
||||
$lbry-blue-list: "blue",
|
||||
$lbry-indigo-list: "indigo",
|
||||
$lbry-violet-list: "violet",
|
||||
$lbry-grape-list: "grape",
|
||||
$lbry-pink-list: "pink",
|
||||
$lbry-red-list: "red",
|
||||
$lbry-orange-list: "orange",
|
||||
$lbry-yellow-list: "yellow",
|
||||
$lbry-lime-list: "lime",
|
||||
$lbry-green-list: "green"
|
||||
);
|
||||
:root {
|
||||
// Generic colors
|
||||
--color-primary: #257761;
|
||||
--color-primary-alt: #e4f4ef;
|
||||
--color-primary-alt-2: #4b8576;
|
||||
--color-secondary: #295284;
|
||||
--color-secondary-alt: #d9eaff;
|
||||
--color-tertiary: #552470;
|
||||
--color-tertiary-alt: #f7e8ff;
|
||||
--color-danger: #9b2023;
|
||||
--color-danger-alt: #fccdce;
|
||||
--color-warning: #fff58c;
|
||||
--color-cost: #f4e866;
|
||||
--color-focus: #93cff2;
|
||||
--color-border: #ddd;
|
||||
|
||||
--color-black: #111;
|
||||
--color-white: #fdfdfd;
|
||||
--color-white-alt: #fafafa;
|
||||
--color-gray-1: #e2e5e9;
|
||||
--color-gray-2: #d8dde1;
|
||||
--color-gray-3: #ced4da;
|
||||
--color-gray-4: #abb1b7;
|
||||
--color-gray-5: #666a6d;
|
||||
|
||||
// Text
|
||||
--color-text: var(--color-black);
|
||||
--color-text-subtitle: var(--color-gray-5);
|
||||
--color-text-inverse: #fdfdfd;
|
||||
|
||||
// Components
|
||||
|
||||
// Button
|
||||
--color-button-primary-bg: var(--color-primary);
|
||||
--color-button-primary-text: var(--color-primary-alt);
|
||||
--color-button-primary-bg-hover: var(--color-primary-alt-2);
|
||||
--color-button-primary-hover-text: var(--color-primary-alt);
|
||||
--color-button-secondary-bg: var(--color-secondary-alt);
|
||||
--color-button-secondary-text: var(--color-secondary);
|
||||
--color-button-secondary-bg-hover: var(--color-gray-3);
|
||||
--color-link: var(--color-primary);
|
||||
|
||||
// Input
|
||||
--color-input-color: #111111;
|
||||
--color-input-label: var(--color-gray-5);
|
||||
--color-input-placeholder: #212529;
|
||||
--color-input-bg: #f2f2f2;
|
||||
--color-input-bg-copyable: #434b53;
|
||||
--color-input-border: var(--color-border);
|
||||
--color-input-border-active: var(--color-secondary);
|
||||
|
||||
// Table
|
||||
--color-table-highlight: var(--color-white-alt);
|
||||
|
||||
// Tag
|
||||
--color-tag: var(--color-primary);
|
||||
--color-tag-bg: var(--color-primary-alt);
|
||||
--color-tag-hover: var(--color-white);
|
||||
--color-tag-bg-hover: var(--color-primary-alt-2);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@
|
|||
font-weight: $font-weight;
|
||||
// sass-lint:disable indentation
|
||||
src: url("#{$relative-font-path}/#{$font-weight}.woff2") format("woff2"),
|
||||
url("#{$relative-font-path}/#{$font-weight}.woff") format("woff");
|
||||
url("#{$relative-font-path}/#{$font-weight}.woff") format("woff");
|
||||
// sass-lint:enable indentation
|
||||
}
|
||||
|
||||
|
|
@ -64,7 +64,7 @@
|
|||
font-weight: $font-weight;
|
||||
// sass-lint:disable indentation
|
||||
src: url("#{$relative-font-path}/#{$font-weight}i.woff2") format("woff2"),
|
||||
url("#{$relative-font-path}/#{$font-weight}i.woff") format("woff");
|
||||
url("#{$relative-font-path}/#{$font-weight}i.woff") format("woff");
|
||||
// sass-lint:enable indentation
|
||||
}
|
||||
}
|
||||
|
|
@ -74,7 +74,9 @@
|
|||
}
|
||||
|
||||
@mixin font-sans {
|
||||
font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
||||
Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
|
||||
"Segoe UI Symbol";
|
||||
}
|
||||
|
||||
@mixin font-serif {
|
||||
|
|
@ -100,10 +102,16 @@
|
|||
position: $computed-position;
|
||||
|
||||
&::after {
|
||||
width: 50%; height: calc(#{$element-height} / #{$row-count});
|
||||
right: 0; bottom: 0;
|
||||
width: 50%;
|
||||
height: calc(#{$element-height} / #{$row-count});
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
||||
background-image: linear-gradient(to right, rgba($lbry-white, 0), #{$fade-color} 80%);
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
rgba($lbry-white, 0),
|
||||
#{$fade-color} 80%
|
||||
);
|
||||
content: "";
|
||||
position: absolute;
|
||||
}
|
||||
|
|
@ -127,7 +135,12 @@
|
|||
animation-name: loading-animation;
|
||||
animation-timing-function: linear;
|
||||
background-color: transparent;
|
||||
background-image: linear-gradient(to right, var(--lbry-gray-3) 10%, transparent 80%, var(--lbry-gray-3) 100%);
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
var(--color-gray-3) 10%,
|
||||
transparent 80%,
|
||||
var(--color-gray-3) 100%
|
||||
);
|
||||
background-repeat: repeat;
|
||||
background-size: 500px;
|
||||
|
||||
|
|
@ -149,7 +162,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
@mixin selection($background-color: var(--lbry-white), $text-color: var(--lbry-black)) {
|
||||
@mixin selection(
|
||||
$background-color: var(--lbry-white),
|
||||
$text-color: var(--lbry-black)
|
||||
) {
|
||||
&::selection {
|
||||
background-color: $background-color;
|
||||
color: $text-color;
|
||||
|
|
@ -180,63 +196,34 @@
|
|||
}
|
||||
}
|
||||
|
||||
@mixin tick {
|
||||
min-height: 2rem;
|
||||
align-items: center;
|
||||
align-self: start;
|
||||
display: inline-flex;
|
||||
flex-direction: row-reverse;
|
||||
margin-right: var(--spacing-s);
|
||||
margin-bottom: var(--spacing-s);
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
label {
|
||||
color: var(--lbry-teal-4);
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
left: -2rem;
|
||||
padding-left: var(--spacing-l);
|
||||
position: relative;
|
||||
transition: color 0.2s;
|
||||
z-index: 1;
|
||||
}
|
||||
@mixin focus {
|
||||
box-shadow: 0 0 0 3px var(--color-focus);
|
||||
}
|
||||
|
||||
@mixin tick-toggle {
|
||||
width: var(--spacing-m); height: var(--spacing-m);
|
||||
top: 0; left: 0;
|
||||
|
||||
border: 2px solid;
|
||||
display: block;
|
||||
position: relative;
|
||||
transition: border 0.2s;
|
||||
|
||||
&::before {
|
||||
width: 100%; height: 100%;
|
||||
top: 0; left: 0;
|
||||
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin underline($text-color: var(--lbry-black), $whitespace-color: var(--lbry-white)) {
|
||||
@mixin underline(
|
||||
$text-color: var(--lbry-black),
|
||||
$whitespace-color: var(--lbry-white)
|
||||
) {
|
||||
@include selection($text-color, $whitespace-color);
|
||||
|
||||
background-image: linear-gradient($whitespace-color, $whitespace-color), linear-gradient($whitespace-color, $whitespace-color), linear-gradient($text-color, $text-color);
|
||||
background-image: linear-gradient($whitespace-color, $whitespace-color),
|
||||
linear-gradient($whitespace-color, $whitespace-color),
|
||||
linear-gradient($text-color, $text-color);
|
||||
background-position: 0 88%, 100% 88%, 0 88%;
|
||||
background-repeat: no-repeat, no-repeat, repeat-x;
|
||||
background-size: 0.05rem 1px, 0.05rem 1px, 1px 1px;
|
||||
box-decoration-break: clone;
|
||||
display: inline;
|
||||
text-decoration: none;
|
||||
text-shadow: 0.03rem 0 $whitespace-color, -0.03rem 0 $whitespace-color, 0 0.03rem $whitespace-color, 0 -0.03rem $whitespace-color, 0.06rem 0 $whitespace-color, -0.06rem 0 $whitespace-color, 0.09rem 0 $whitespace-color, -0.09rem 0 $whitespace-color, 0.12rem 0 $whitespace-color, -0.12rem 0 $whitespace-color, 0.15rem 0 $whitespace-color, -0.15rem 0 $whitespace-color;
|
||||
text-shadow: 0.03rem 0 $whitespace-color, -0.03rem 0 $whitespace-color,
|
||||
0 0.03rem $whitespace-color, 0 -0.03rem $whitespace-color,
|
||||
0.06rem 0 $whitespace-color, -0.06rem 0 $whitespace-color,
|
||||
0.09rem 0 $whitespace-color, -0.09rem 0 $whitespace-color,
|
||||
0.12rem 0 $whitespace-color, -0.12rem 0 $whitespace-color,
|
||||
0.15rem 0 $whitespace-color, -0.15rem 0 $whitespace-color;
|
||||
|
||||
@-moz-document url-prefix() { // sass-lint:disable-line empty-args
|
||||
@-moz-document url-prefix() {
|
||||
// sass-lint:disable-line empty-args
|
||||
background-position: 0 90%, 100% 90%, 0 90%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
html {
|
||||
box-sizing: border-box;
|
||||
font-size: 12px;
|
||||
text-rendering: optimizeLegibility;
|
||||
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
|
@ -10,7 +9,8 @@ html {
|
|||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
margin: 0; padding: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
border: none;
|
||||
box-sizing: inherit;
|
||||
|
|
@ -20,13 +20,6 @@ html {
|
|||
[disabled] {
|
||||
pointer-events: none;
|
||||
resize: none;
|
||||
|
||||
&:hover {
|
||||
background-color: inherit;
|
||||
border-color: inherit;
|
||||
color: inherit;
|
||||
fill: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
[readonly] {
|
||||
|
|
@ -71,9 +64,6 @@ textarea {
|
|||
-webkit-appearance: none;
|
||||
|
||||
&:disabled {
|
||||
// sass-lint:disable-block no-important
|
||||
border-color: var(--lbry-gray-4);
|
||||
color: var(--lbry-gray-4);
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
|
@ -85,6 +75,7 @@ h4,
|
|||
h5,
|
||||
h6 {
|
||||
font-weight: normal;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
ol,
|
||||
|
|
@ -96,10 +87,6 @@ ul {
|
|||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
table {
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
|
@ -121,19 +108,20 @@ dt {
|
|||
}
|
||||
|
||||
img {
|
||||
width: auto; max-width: 100%;
|
||||
height: auto; max-height: 100%;
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
max-height: 100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: transparent;
|
||||
color: inherit;
|
||||
line-height: inherit;
|
||||
|
||||
&:not(:disabled) {
|
||||
cursor: pointer;
|
||||
|
|
@ -145,8 +133,9 @@ button {
|
|||
}
|
||||
|
||||
hr {
|
||||
width: 100%; height: 1px;
|
||||
background-color: var(--lbry-gray-1);
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: var(--color-gray-1);
|
||||
}
|
||||
|
||||
input {
|
||||
|
|
@ -158,10 +147,6 @@ input {
|
|||
opacity: 0.2;
|
||||
}
|
||||
|
||||
// &:not(:disabled) {
|
||||
// color: inherit;
|
||||
// }
|
||||
|
||||
&::-webkit-search-cancel-button {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
|
@ -183,14 +168,12 @@ textarea {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media print {
|
||||
// sass-lint:disable-block no-important
|
||||
// Intelligent print styles
|
||||
pre,
|
||||
blockquote {
|
||||
border: 1px solid var(--lbry-gray-5) !important;
|
||||
border: 1px solid var(--color-gray-5) !important;
|
||||
page-break-inside: avoid !important;
|
||||
}
|
||||
|
||||
|
|
@ -234,7 +217,8 @@ textarea {
|
|||
|
||||
p {
|
||||
a {
|
||||
&[href]::after { // Show hypertext data for links and abbreviations
|
||||
&[href]::after {
|
||||
// Show hypertext data for links and abbreviations
|
||||
content: " (" attr(href) ")" !important;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,103 +1,38 @@
|
|||
:root {
|
||||
--border-radius: 5px;
|
||||
--height-input: 2.5rem;
|
||||
--height-button: 2.5rem;
|
||||
--height-checkbox: 24px;
|
||||
--height-radio: 24px;
|
||||
--height-badge: 24px;
|
||||
|
||||
// Spacing
|
||||
@include root-prop(--spacing-xxs, 0.2rem);
|
||||
@include root-prop(--spacing-xs, 0.4rem);
|
||||
@include root-prop(--spacing-s, 0.8rem);
|
||||
@include root-prop(--spacing-m, 1.6rem);
|
||||
@include root-prop(--spacing-l, 2.4rem);
|
||||
@include root-prop(--spacing-xl, 3.2rem);
|
||||
@include root-prop(--spacing-xxl, 6.4rem);
|
||||
--spacing-xxs: 0.2rem;
|
||||
--spacing-xs: 0.4rem;
|
||||
--spacing-s: 0.8rem;
|
||||
--spacing-m: 1.6rem;
|
||||
--spacing-l: 2.4rem;
|
||||
--spacing-xl: 3.2rem;
|
||||
--spacing-xxl: 6.4rem;
|
||||
|
||||
// Aspect ratio
|
||||
@include root-prop(--aspect-ratio-bluray, 41.6666666667%); // 12:5
|
||||
@include root-prop(--aspect-ratio-panavision, 36.3636363636%); // 11:4
|
||||
@include root-prop(--aspect-ratio-sd, 75%); // 4:3
|
||||
@include root-prop(--aspect-ratio-standard, 56.25%); // 16:9
|
||||
|
||||
// Color
|
||||
@include root-prop(--lbry-black, $lbry-black);
|
||||
@include root-prop(--lbry-white, $lbry-white);
|
||||
|
||||
@include root-prop(--lbry-gray-1, $lbry-gray-1);
|
||||
@include root-prop(--lbry-gray-2, $lbry-gray-2);
|
||||
@include root-prop(--lbry-gray-3, $lbry-gray-3);
|
||||
@include root-prop(--lbry-gray-4, $lbry-gray-4);
|
||||
@include root-prop(--lbry-gray-5, $lbry-gray-5);
|
||||
|
||||
@include root-prop(--lbry-teal-1, $lbry-teal-1);
|
||||
@include root-prop(--lbry-teal-2, $lbry-teal-2);
|
||||
@include root-prop(--lbry-teal-3, $lbry-teal-3);
|
||||
@include root-prop(--lbry-teal-4, $lbry-teal-4);
|
||||
@include root-prop(--lbry-teal-5, $lbry-teal-5);
|
||||
|
||||
@include root-prop(--lbry-cyan-1, $lbry-cyan-1);
|
||||
@include root-prop(--lbry-cyan-2, $lbry-cyan-2);
|
||||
@include root-prop(--lbry-cyan-3, $lbry-cyan-3);
|
||||
@include root-prop(--lbry-cyan-4, $lbry-cyan-4);
|
||||
@include root-prop(--lbry-cyan-5, $lbry-cyan-5);
|
||||
|
||||
@include root-prop(--lbry-blue-1, $lbry-blue-1);
|
||||
@include root-prop(--lbry-blue-2, $lbry-blue-2);
|
||||
@include root-prop(--lbry-blue-3, $lbry-blue-3);
|
||||
@include root-prop(--lbry-blue-4, $lbry-blue-4);
|
||||
@include root-prop(--lbry-blue-5, $lbry-blue-5);
|
||||
|
||||
@include root-prop(--lbry-indigo-1, $lbry-indigo-1);
|
||||
@include root-prop(--lbry-indigo-2, $lbry-indigo-2);
|
||||
@include root-prop(--lbry-indigo-3, $lbry-indigo-3);
|
||||
@include root-prop(--lbry-indigo-4, $lbry-indigo-4);
|
||||
@include root-prop(--lbry-indigo-5, $lbry-indigo-5);
|
||||
|
||||
@include root-prop(--lbry-violet-1, $lbry-violet-1);
|
||||
@include root-prop(--lbry-violet-2, $lbry-violet-2);
|
||||
@include root-prop(--lbry-violet-3, $lbry-violet-3);
|
||||
@include root-prop(--lbry-violet-4, $lbry-violet-4);
|
||||
@include root-prop(--lbry-violet-5, $lbry-violet-5);
|
||||
|
||||
@include root-prop(--lbry-grape-1, $lbry-grape-1);
|
||||
@include root-prop(--lbry-grape-2, $lbry-grape-2);
|
||||
@include root-prop(--lbry-grape-3, $lbry-grape-3);
|
||||
@include root-prop(--lbry-grape-4, $lbry-grape-4);
|
||||
@include root-prop(--lbry-grape-5, $lbry-grape-5);
|
||||
|
||||
@include root-prop(--lbry-pink-1, $lbry-pink-1);
|
||||
@include root-prop(--lbry-pink-2, $lbry-pink-2);
|
||||
@include root-prop(--lbry-pink-3, $lbry-pink-3);
|
||||
@include root-prop(--lbry-pink-4, $lbry-pink-4);
|
||||
@include root-prop(--lbry-pink-5, $lbry-pink-5);
|
||||
|
||||
@include root-prop(--lbry-red-1, $lbry-red-1);
|
||||
@include root-prop(--lbry-red-2, $lbry-red-2);
|
||||
@include root-prop(--lbry-red-3, $lbry-red-3);
|
||||
@include root-prop(--lbry-red-4, $lbry-red-4);
|
||||
@include root-prop(--lbry-red-5, $lbry-red-5);
|
||||
|
||||
@include root-prop(--lbry-orange-1, $lbry-orange-1);
|
||||
@include root-prop(--lbry-orange-2, $lbry-orange-2);
|
||||
@include root-prop(--lbry-orange-3, $lbry-orange-3);
|
||||
@include root-prop(--lbry-orange-4, $lbry-orange-4);
|
||||
@include root-prop(--lbry-orange-5, $lbry-orange-5);
|
||||
|
||||
@include root-prop(--lbry-yellow-1, $lbry-yellow-1);
|
||||
@include root-prop(--lbry-yellow-2, $lbry-yellow-2);
|
||||
@include root-prop(--lbry-yellow-3, $lbry-yellow-3);
|
||||
@include root-prop(--lbry-yellow-4, $lbry-yellow-4);
|
||||
@include root-prop(--lbry-yellow-5, $lbry-yellow-5);
|
||||
|
||||
@include root-prop(--lbry-lime-1, $lbry-lime-1);
|
||||
@include root-prop(--lbry-lime-2, $lbry-lime-2);
|
||||
@include root-prop(--lbry-lime-3, $lbry-lime-3);
|
||||
@include root-prop(--lbry-lime-4, $lbry-lime-4);
|
||||
@include root-prop(--lbry-lime-5, $lbry-lime-5);
|
||||
|
||||
@include root-prop(--lbry-green-1, $lbry-green-1);
|
||||
@include root-prop(--lbry-green-2, $lbry-green-2);
|
||||
@include root-prop(--lbry-green-3, $lbry-green-3);
|
||||
@include root-prop(--lbry-green-4, $lbry-green-4);
|
||||
@include root-prop(--lbry-green-5, $lbry-green-5);
|
||||
--aspect-ratio-bluray: 41.6666666667%; // 12:5
|
||||
--aspect-ratio-panavision: 36.3636363636%; // 11:4
|
||||
--aspect-ratio-sd: 75%; // 4:3
|
||||
--aspect-ratio-standard: 56.25%; // 16:9
|
||||
|
||||
// Type
|
||||
@include root-prop(--font-mono, "Fira Code");
|
||||
@include root-prop(--font-sans, Inter);
|
||||
@include root-prop(--font-serif, Georgia);
|
||||
--font-mono: "Fira Code";
|
||||
--font-sans: Inter;
|
||||
--font-serif: Georgia;
|
||||
--font-weight-base: 400;
|
||||
--font-weight-light: 300;
|
||||
--font-weight-bold: 700;
|
||||
--font-base: 14px;
|
||||
--font-body: 1rem;
|
||||
--font-xsmall: 0.7344rem;
|
||||
--font-small: 0.8571rem;
|
||||
--font-large: 1.3rem;
|
||||
--font-title: 1.71rem;
|
||||
--font-heading: 2.94rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,192 +0,0 @@
|
|||
// C O N T A I N E R S
|
||||
|
||||
.media-grid {
|
||||
display: grid;
|
||||
|
||||
// set your own grid-gap
|
||||
// example → grid-gap: var(--spacing-s);
|
||||
|
||||
// set your own grid-template
|
||||
// example → @include create-grid(4);
|
||||
|
||||
.media {
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
.media-list { // sass-lint:disable-line no-empty-rulesets
|
||||
}
|
||||
|
||||
.media-row { // sass-lint:disable-line no-empty-rulesets
|
||||
}
|
||||
|
||||
|
||||
|
||||
.media {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// M O D I F I E R S
|
||||
|
||||
.media--large {
|
||||
display: flex;
|
||||
|
||||
.media__info {
|
||||
width: calc(100% - 20rem);
|
||||
margin-left: var(--spacing-s);
|
||||
}
|
||||
|
||||
.media__thumb {
|
||||
width: 40rem;
|
||||
margin-bottom: var(--spacing-s);
|
||||
}
|
||||
}
|
||||
|
||||
.media--placeholder {
|
||||
> * {
|
||||
@include placeholder;
|
||||
}
|
||||
|
||||
.media__channel,
|
||||
.media__date,
|
||||
.media__title {
|
||||
min-height: 1rem;
|
||||
}
|
||||
|
||||
.media__channel {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.media__date {
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.media__title {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.media--small {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
&:not(:last-of-type) {
|
||||
margin-bottom: var(--spacing-s);
|
||||
}
|
||||
|
||||
.media__info {
|
||||
width: 50%;
|
||||
padding-left: var(--spacing-s);
|
||||
}
|
||||
|
||||
.media__properties {
|
||||
bottom: -1.5rem; left: calc(-100% - 1.5rem);
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.media__thumb {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.media__title {
|
||||
height: 3rem;
|
||||
line-height: 1.33;
|
||||
}
|
||||
}
|
||||
|
||||
.media--wide { // .media--search-result
|
||||
display: flex;
|
||||
|
||||
&:not(:last-of-type) {
|
||||
margin-bottom: var(--spacing-m);
|
||||
}
|
||||
|
||||
.media__info {
|
||||
width: calc(100% - 20rem);
|
||||
margin-left: var(--spacing-s);
|
||||
}
|
||||
|
||||
.media__properties {
|
||||
bottom: -5.5rem; left: -20rem;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.media__text { // .media__subtext
|
||||
padding-top: var(--spacing-s);
|
||||
}
|
||||
|
||||
.media__thumb {
|
||||
width: 20rem;
|
||||
}
|
||||
|
||||
.media__title {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// C H I L D R E N
|
||||
|
||||
.media__actions {
|
||||
display: flex;
|
||||
padding-top: var(--spacing-m);
|
||||
padding-bottom: var(--spacing-m);
|
||||
}
|
||||
|
||||
.media__content { // sass-lint:disable-line no-empty-rulesets
|
||||
}
|
||||
|
||||
.media__date { // sass-lint:disable-line no-empty-rulesets
|
||||
}
|
||||
|
||||
.media__info {
|
||||
word-wrap: break-word;
|
||||
|
||||
[data-mode="dark"] & {
|
||||
border-color: rgba($lbry-gray-5, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.media__message {
|
||||
padding: var(--spacing-s);
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.media__properties {
|
||||
vertical-align: top;
|
||||
|
||||
> *:not(:last-child) {
|
||||
margin-right: var(--spacing-xs);
|
||||
}
|
||||
|
||||
&:not(:empty) {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.media__property { // sass-lint:disable-line no-empty-rulesets
|
||||
}
|
||||
|
||||
.media__subtitle {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.media__text {
|
||||
[data-mode="dark"] & {
|
||||
color: var(--lbry-white);
|
||||
}
|
||||
}
|
||||
|
||||
.media__thumb {
|
||||
@include thumbnail;
|
||||
}
|
||||
|
||||
.media__title {
|
||||
font-weight: 600;
|
||||
white-space: normal;
|
||||
}
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
drawer-navigation {
|
||||
width: 100%; height: 5rem;
|
||||
width: 100%;
|
||||
height: 5rem;
|
||||
|
||||
display: inline-flex;
|
||||
flex: 1;
|
||||
|
|
@ -9,9 +10,12 @@ drawer-navigation {
|
|||
z-index: 10;
|
||||
}
|
||||
|
||||
drawer-navigation-helper { // This is to make mouse movement forgiving
|
||||
width: 0; height: 0;
|
||||
top: 3rem; left: -5rem;
|
||||
drawer-navigation-helper {
|
||||
// This is to make mouse movement forgiving
|
||||
width: 0;
|
||||
height: 0;
|
||||
top: 3rem;
|
||||
left: -5rem;
|
||||
|
||||
border-right: 8rem solid transparent;
|
||||
border-bottom: 5rem solid transparent;
|
||||
|
|
@ -39,7 +43,7 @@ drawer-section {
|
|||
z-index: 3;
|
||||
|
||||
drawer-title::after {
|
||||
background-color: var(--lbry-teal-4);
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -54,8 +58,10 @@ drawer-title {
|
|||
z-index: 1;
|
||||
|
||||
&::after {
|
||||
width: 100%; height: 1px;
|
||||
bottom: -1px; left: 0;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
bottom: -1px;
|
||||
left: 0;
|
||||
|
||||
content: "";
|
||||
position: absolute;
|
||||
|
|
@ -65,19 +71,22 @@ drawer-title {
|
|||
|
||||
drawer-wrap {
|
||||
width: 100%;
|
||||
top: 5rem; left: 0;
|
||||
top: 5rem;
|
||||
left: 0;
|
||||
|
||||
background-color: var(--lbry-white);
|
||||
border-top: 1px solid var(--lbry-gray-1);
|
||||
background-color: var(--color-white);
|
||||
border-top: 1px solid var(--color-gray-1);
|
||||
padding-top: 2rem;
|
||||
padding-bottom: 2rem;
|
||||
position: absolute;
|
||||
|
||||
&::after {
|
||||
width: 100vw; height: calc(100vh - 5rem);
|
||||
top: 5rem; left: 0;
|
||||
width: 100vw;
|
||||
height: calc(100vh - 5rem);
|
||||
top: 5rem;
|
||||
left: 0;
|
||||
|
||||
background-color: var(--lbry-black);
|
||||
background-color: var(--color-black);
|
||||
content: "";
|
||||
opacity: 0.3;
|
||||
pointer-events: none;
|
||||
|
|
@ -102,11 +111,11 @@ drawer-child {
|
|||
}
|
||||
|
||||
&:hover {
|
||||
border-color: var(--lbry-gray-1);
|
||||
border-color: var(--color-gray-1);
|
||||
padding-left: var(--spacing-m);
|
||||
|
||||
> a {
|
||||
color: var(--lbry-teal-4);
|
||||
color: var(--lbry-primary);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
23
sass/section.scss
Normal file
23
sass/section.scss
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
.section {
|
||||
margin-top: var(--spacing-l);
|
||||
}
|
||||
|
||||
.section__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: var(--spacing-medium);
|
||||
|
||||
&:only-child {
|
||||
margin-top: var(--spacing-xs);
|
||||
}
|
||||
|
||||
> *:not(:last-child) {
|
||||
margin-right: var(--spacing-medium);
|
||||
}
|
||||
}
|
||||
|
||||
.section__subtitle {
|
||||
color: var(--color-text-subtitle);
|
||||
margin: var(--spacing-small) 0;
|
||||
font-size: var(--font-body);
|
||||
}
|
||||
99
sass/table.scss
Normal file
99
sass/table.scss
Normal file
|
|
@ -0,0 +1,99 @@
|
|||
.table {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
th,
|
||||
td {
|
||||
overflow: hidden;
|
||||
|
||||
&:first-of-type {
|
||||
padding-left: var(--spacing-l);
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
padding-right: var(--spacing-l);
|
||||
}
|
||||
}
|
||||
|
||||
thead {
|
||||
cursor: default;
|
||||
position: relative;
|
||||
|
||||
th {
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
}
|
||||
|
||||
tr {
|
||||
&:not(:last-of-type) {
|
||||
td {
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(2n) {
|
||||
background-color: var(--color-table-highlight);
|
||||
}
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
th {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
td {
|
||||
// white-space: nowrap;
|
||||
}
|
||||
|
||||
.table--fixed {
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
.table--condensed {
|
||||
td,
|
||||
th {
|
||||
padding: 0.5rem;
|
||||
|
||||
&:first-of-type {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
tr {
|
||||
&:nth-child(2n) {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table__item-label {
|
||||
font-size: var(--font-multiplier-small);
|
||||
font-weight: 300;
|
||||
color: var(--color-text-subtitle);
|
||||
}
|
||||
|
||||
.table__item--align-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.table__item--actionable {
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
|
||||
.button {
|
||||
vertical-align: top;
|
||||
height: 2rem;
|
||||
top: -0.2rem;
|
||||
padding: var(--spacing-s);
|
||||
margin-left: var(--spacing-m);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,45 +0,0 @@
|
|||
|
||||
table {
|
||||
width: 100%;
|
||||
background-color: var(--lbry-white);
|
||||
position: relative;
|
||||
|
||||
thead {
|
||||
cursor: default;
|
||||
font-size: 80%;
|
||||
position: relative;
|
||||
|
||||
tr {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
tr {
|
||||
&:not(:last-of-type) {
|
||||
td {
|
||||
border-bottom: 1px solid var(--lbry-gray-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
|
||||
th {
|
||||
border-bottom: 2px solid var(--lbry-black);
|
||||
letter-spacing: 0.1rem;
|
||||
text-align: left;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: bolder;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue