v4.2.5

fix demo

dist/button.css

@@ -1 +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;color:var(--color-link-hover)}/*# sourceMappingURL=button.css.map */
+.button{display:inline-block;position:relative;white-space:nowrap;text-decoration:none;cursor:pointer}.button:disabled{opacity:.5}.button--primary,.button--secondary,.button--alt,.button--link,.button--danger{border-radius:var(--border-radius)}.button--primary,.button--secondary,.button--alt{height:var(--height-button);border-radius:var(--border-radius);padding:var(--spacing-s) var(--spacing-m);line-height:1.2;font-weight:var(--font-weight-bold)}.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{background-color:var(--color-button-alt-bg);color:var(--color-button-alt-text)}.button--alt:hover{background-color:var(--color-button-alt-bg-hover)}.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,.button--danger{color:var(--color-link);transition:color .2s;word-break:break-all;font-weight:var(--font-weight-bold)}.button--link:hover,.button--danger:hover{text-decoration:underline;color:var(--color-link-hover)}.button--danger{color:var(--color-error)}/*# sourceMappingURL=button.css.map */

dist/button.css.map

@@ -1 +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,0BACA","file":"button.css"}
+{"version":3,"sourceRoot":"","sources":["../sass/button.scss"],"names":[],"mappings":"AAAA,QACE,qBACA,kBACA,mBACA,qBACA,eAEA,iBACE,WAIJ,+EAIE,mCAGF,iDAGE,4BACA,mCACA,0CACA,gBACA,oCAGF,iBACE,gDACA,uCAEA,uBACE,6CACA,sDAIJ,mBACE,kDACA,yCAEA,yBACE,wDAIJ,aACE,4CACA,mCAEA,mBACE,kDAIJ,cACE,WACA,YACA,4BACA,oBACA,kBACA,gCACA,sCAEA,oBACE,sDAGF,2BACE,mTACA,8CAGF,2BACE,q1BACA,8CAIJ,8BACE,wBACA,qBACA,qBACA,oCAEA,0CACE,0BACA,8BAIJ,gBAEE","file":"button.css"}

dist/form.css.map

@@ -1 +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,yDAIE,aACA,sBAEA,0jBAIE,4BAGF,gHACE,gBAGF,mLAEE,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,oDAKN,wFAEE,kBACA,WAIF,oKAEE,aAIF,oMAEE,WAGF,gMCgDA,wCDxCA,wBACE,8BACA,6BACA,2CACA,mCACA,SACA,SACA,uCAIF,uBACE,WACA,WACA,sBACA,wBACA,uCACA,yBACA,SACA,QAKF,yBACE,kBAIF,qBACE,2BACA,0BACA,2CACA,8CACA,SACA,SACA,uCAIF,oBACE,YACA,WACA,kBACA,wCACA,SACA","file":"form.css"}
+{"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,WAGF,iDACE,WAEA,mEACE,WAIJ,0DACE,YACA,aACA,wCAIJ,sCAGE,eAGF,OACE,gcACA,+BACA,4BACA,qBACA,+BACA,8BAGF,+BACE,aACA,mBACA,8BAGE,olBACE,aAYJ,++DAME,4BAGF,mSACE,4BAGF,oOACE,gBAGF,uXAEE,WAIJ,oDAGE,aACA,sBAGF,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,6BAEA,4KACE,eACA,oBAIJ,6BACE,kBACA,qBACA,SACA,2BACA,6DACA,kCAEA,6CACE,8CAIA,yDACE,oDAKN,wFAEE,kBACA,WAIF,oKAEE,aAIF,oMAEE,WAGF,gMCYA,wCDJA,wBACE,8BACA,6BACA,2CACA,mCACA,SACA,SAIF,uBACE,WACA,WACA,sBACA,wBACA,uCACA,yBACA,SACA,QAKF,yBACE,kBAIF,qBACE,2BACA,0BACA,2CACA,8CACA,SACA,SAIF,oBACE,YACA,WACA,kBACA,wCACA,SACA,QAIJ,cACE,aACA,8BACA,WAEA,gBACE,UACA,kBAEA,8BACE,gBAEF,6BACE","file":"form.css"}

dist/index.css.map

@@ -1 +1 @@
-{"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,mCACA,uCAGA,6BACA,yCACA,mCACA,0BACA,mCACA,0CACA,oDACA,6CACA,0DAGA,gDAGA,kCACA,yCACA,sCACA,iDC7DF,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,yBACA,cAGF,aAEE,4CACA,6BAGF,cAEE,yCACA,0BC5CF,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,0BACA,8BCxFJ,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,yDAIE,aACA,sBAEA,0jBAIE,4BAGF,gHACE,gBAGF,mLAEE,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,oDAKN,wFAEE,kBACA,WAIF,oKAEE,aAIF,oMAEE,WAGF,gMCgDA,wCDxCA,wBACE,8BACA,6BACA,2CACA,mCACA,SACA,SACA,uCAIF,uBACE,WACA,WACA,sBACA,wBACA,uCACA,yBACA,SACA,QAKF,yBACE,kBAIF,qBACE,2BACA,0BACA,2CACA,8CACA,SACA,SACA,uCAIF,oBACE,YACA,WACA,kBACA,wCACA,SACA,QE7MJ,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,iBCpFF,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,GACE,WACA","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/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,2CACA,2CACA,2CACA,iDACA,mCACA,uCAGA,6BACA,yCACA,mCACA,0BACA,mCACA,0CACA,oDACA,6CACA,6CACA,0DAGA,gDAGA,iCACA,2CACA,gDACA,uDCjEF,MACE,qBACA,uBACA,wBACA,wBACA,qBACA,qBAGA,8BACA,6BACA,4BACA,4BACA,kBACA,mBAGA,sCACA,0CACA,uBACA,gCAGA,yBACA,mBACA,sBACA,wBACA,yBACA,wBACA,kBACA,kBACA,yBACA,wBACA,qBACA,sBACA,wBCnCF,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,yBACA,cAGF,aAEE,4CACA,6BAGF,cAEE,yCACA,0BC5CF,QACE,qBACA,kBACA,mBACA,qBACA,eAEA,iBACE,WAIJ,+EAIE,mCAGF,iDAGE,4BACA,mCACA,0CACA,gBACA,oCAGF,iBACE,gDACA,uCAEA,uBACE,6CACA,sDAIJ,mBACE,kDACA,yCAEA,yBACE,wDAIJ,aACE,4CACA,mCAEA,mBACE,kDAIJ,cACE,WACA,YACA,4BACA,oBACA,kBACA,gCACA,sCAEA,oBACE,sDAGF,2BACE,mTACA,8CAGF,2BACE,q1BACA,8CAIJ,8BACE,wBACA,qBACA,qBACA,oCAEA,0CACE,0BACA,8BAIJ,gBAEE,yBC7FF,sBAGE,2BACA,mCACA,iBACA,yBACA,uCACA,uCACA,+BACA,8BAEA,wCCyLA,wCDrLA,6DACE,qCACA,WAGF,iDACE,WAEA,mEACE,WAIJ,0DACE,YACA,aACA,wCAIJ,sCAGE,eAGF,OACE,gcACA,+BACA,4BACA,qBACA,+BACA,8BAGF,+BACE,aACA,mBACA,8BAGE,olBACE,aAYJ,++DAME,4BAGF,mSACE,4BAGF,oOACE,gBAGF,uXAEE,WAIJ,oDAGE,aACA,sBAGF,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,6BAEA,4KACE,eACA,oBAIJ,6BACE,kBACA,qBACA,SACA,2BACA,6DACA,kCAEA,6CACE,8CAIA,yDACE,oDAKN,wFAEE,kBACA,WAIF,oKAEE,aAIF,oMAEE,WAGF,gMCYA,wCDJA,wBACE,8BACA,6BACA,2CACA,mCACA,SACA,SAIF,uBACE,WACA,WACA,sBACA,wBACA,uCACA,yBACA,SACA,QAKF,yBACE,kBAIF,qBACE,2BACA,0BACA,2CACA,8CACA,SACA,SAIF,oBACE,YACA,WACA,kBACA,wCACA,SACA,QAIJ,cACE,aACA,8BACA,WAEA,gBACE,UACA,kBAEA,8BACE,gBAEF,6BACE,iBEhQN,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,iBCpFF,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,sBCrHJ,KACE,eACA,oCACA,2BACA,gBACA,gBACA,uJAKF,GACE,WACA","file":"index.css"}

dist/section.css

@@ -1 +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 */
+/*# sourceMappingURL=section.css.map */

dist/section.css.map

@@ -1 +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"}
+{"version":3,"sourceRoot":"","sources":[],"names":[],"mappings":"","file":"section.css"}

docs/index.html

@@ -5,8 +5,8 @@
     <title>Components by LBRY</title>
 
     <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"/> -->
+    <!-- <link rel="stylesheet" href="../dist/index.css" /> -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lbryio/components@master/dist/index.css"/>
 
     <style>
       body {

package.json

@@ -40,5 +40,5 @@
     "test:sass": "sass-lint --config ./node_modules/@inc/sasslint-config/config.json --verbose",
     "watch": "npm run sass:dev"
   },
-  "version": "3.0.9"
+  "version": "4.2.5"
 }

sass/button.scss

@@ -3,7 +3,6 @@
   position: relative;
   white-space: nowrap;
   text-decoration: none;
-  font-weight: 400;
   cursor: pointer;
 
   &:disabled {
@@ -19,15 +18,13 @@
 }
 
 .button--primary,
-.button--secondary {
+.button--secondary,
+.button--alt {
   height: var(--height-button);
   border-radius: var(--border-radius);
   padding: var(--spacing-s) var(--spacing-m);
   line-height: 1.2;
-
-  &:not(:last-of-type) {
-    margin-right: var(--spacing-s);
-  }
+  font-weight: var(--font-weight-bold);
 }
 
 .button--primary {
@@ -50,10 +47,11 @@
 }
 
 .button--alt {
-  color: var(--color-text);
+  background-color: var(--color-button-alt-bg);
+  color: var(--color-button-alt-text);
 
   &:hover {
-    text-decoration: underline;
+    background-color: var(--color-button-alt-bg-hover);
   }
 }
 
@@ -85,9 +83,15 @@
   color: var(--color-link);
   transition: color 0.2s;
   word-break: break-all;
+  font-weight: var(--font-weight-bold);
 
   &:hover {
     text-decoration: underline;
     color: var(--color-link-hover);
   }
 }
+
+.button--danger {
+  @extend .button--link;
+  color: var(--color-error);
+}

sass/form.scss

@@ -20,6 +20,20 @@ select {
     color: var(--color-input-placeholder);
     opacity: 0.4;
   }
+
+  &:disabled {
+    opacity: 0.4;
+
+    & + label {
+      opacity: 0.4;
+    }
+  }
+
+  &[type="range"] {
+    height: auto;
+    height: 0.5rem;
+    background-color: var(--color-secondary);
+  }
 }
 
 checkbox-element,
@@ -50,16 +64,22 @@ fieldset-group {
 }
 
 fieldset-section,
+fieldset-group,
 form,
 .checkbox,
-.radio {
-  display: flex;
-  flex-direction: column;
-
+.radio,
+.form-field--SimpleMDE,
+.form-field__help {
   + fieldset-section,
+  + fieldset-group,
   + form,
   + .checkbox,
-  + .radio {
+  + .radio,
+  + .form-field--SimpleMDE {
+    margin-top: var(--spacing-l);
+  }
+
+  + .form-field__help {
     margin-top: var(--spacing-s);
   }
 
@@ -73,6 +93,13 @@ form,
   }
 }
 
+fieldset-section,
+.checkbox,
+.radio {
+  display: flex;
+  flex-direction: column;
+}
+
 label {
   font-size: var(--font-small);
   color: var(--color-input-label);
@@ -114,6 +141,11 @@ input-submit {
     left: 0;
     padding: 0;
     background-color: transparent;
+
+    &:disabled + label {
+      cursor: default;
+      pointer-events: none;
+    }
   }
 
   label {
@@ -124,6 +156,10 @@ input-submit {
     padding-left: calc(var(--height-checkbox) + var(--spacing-s));
     min-height: var(--height-checkbox);
 
+    &::before {
+      background-color: var(--color-input-toggle-bg);
+    }
+
     &:hover {
       &::before {
         background-color: var(--color-input-toggle-bg-hover);
@@ -164,7 +200,6 @@ input-submit {
     border-radius: var(--border-radius);
     left: 0px;
     top: -1px;
-    background-color: var(--color-input-bg);
   }
 
   // Checkmark of the fake checkbox
@@ -193,7 +228,6 @@ input-submit {
     border-radius: calc(var(--height-radio) * 0.5);
     left: 0px;
     top: -1px;
-    background-color: var(--color-input-bg);
   }
 
   // Checkmark of the fake radio
@@ -207,6 +241,24 @@ input-submit {
   }
 }
 
+.range__label {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+
+  > * {
+    width: 33%;
+    text-align: center;
+
+    &:first-of-type {
+      text-align: left;
+    }
+    &:last-of-type {
+      text-align: right;
+    }
+  }
+}
+
 .fieldset-group {
   @extend fieldset-group;
 }

sass/index.scss

@@ -9,7 +9,6 @@
 @import "button";
 @import "form";
 @import "table";
-@import "section";
 
 // OLD - Deprecated
 @import "./navigation/index";

sass/init/_color.scss

@@ -10,14 +10,14 @@
   --color-danger: #9b2023;
   --color-danger-alt: #fccdce;
   --color-warning: #fff58c;
-  --color-cost: #f4e866;
+  --color-cost: #ffd580;
   --color-focus: #93cff2;
   --color-border: #ddd;
 
   --color-black: #111;
   --color-white: #fdfdfd;
   --color-white-alt: #fafafa;
-  --color-gray-1: #e2e5e9;
+  --color-gray-1: #eff1f4;
   --color-gray-2: #d8dde1;
   --color-gray-3: #ced4da;
   --color-gray-4: #abb1b7;
@@ -37,7 +37,10 @@
   --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-button-secondary-bg-hover: #b9d0e9;
+  --color-button-alt-bg: var(--color-gray-1);
+  --color-button-alt-text: var(--color-text);
+  --color-button-alt-bg-hover: var(--color-gray-2);
   --color-link: var(--color-primary);
   --color-link-hover: var(--color-black);
 
@@ -50,14 +53,15 @@
   --color-input-border: var(--color-border);
   --color-input-border-active: var(--color-secondary);
   --color-input-toggle: var(--color-secondary);
+  --color-input-toggle-bg: var(--color-gray-1);
   --color-input-toggle-bg-hover: var(--color-secondary-alt);
 
   // 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);
+  --color-tag: var(--color-gray-5);
+  --color-tag-bg: var(--color-button-alt-bg);
+  --color-tag-hover: var(--color-button-alt-text);
+  --color-tag-bg-hover: var(--color-button-alt-bg-hover);
 }

sass/init/_variables.scss

@@ -7,13 +7,12 @@
   --height-badge: 24px;
 
   // Spacing
-  --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;
+  --spacing-xxs: calc(2rem / 5);
+  --spacing-xs: calc(2rem / 4);
+  --spacing-s: calc(2rem / 3);
+  --spacing-m: calc(2rem / 2);
+  --spacing-l: 2rem;
+  --spacing-xl: 3rem;
 
   // Aspect ratio
   --aspect-ratio-bluray: 41.6666666667%; // 12:5

sass/section.scss

@@ -1,23 +0,0 @@
-.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);
-}