Basic styles look MUCH better now

README.md

@@ -15,6 +15,12 @@ If you are using `@lbry/components`, you can safely remove [@lbry/color](https:/
 
 
 
+### Demo
+
+Check out `index.html` in the `dist` folder.
+
+
+
 ### Usage
 
 Your main Sass file:

dist/index.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../sass/init/_variables.scss","../sass/init/_mixins.scss","../node_modules/@lbry/color/lbry-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/table/_index.scss"],"names":[],"mappings":"AAAA,MCuII,cDrIgC,MCqIhC,aDpI+B,MCoI/B,YDnI8B,MCmI9B,YDlI8B,OCkI9B,YDjI8B,OCiI9B,aDhI+B,OCgI/B,cD/HgC,OC+HhC,sBD5HwC,eC4HxC,0BD3H4C,eC2H5C,kBD1HoC,IC0HpC,wBDzH0C,OCyH1C,aCjIU,QDiIV,aCnIU,KDmIV,cCpGU,QDoGV,cCnGU,QDmGV,cClGU,QDkGV,cCjGU,QDiGV,cChGU,QDgGV,cCjFU,QDiFV,cChFU,QDgFV,cC/EU,QD+EV,cC9EU,QD8EV,cC7EU,QD6EV,cC9DU,QD8DV,cC7DU,QD6DV,cC5DU,QD4DV,cC3DU,QD2DV,cC1DU,QD0DV,cC3CU,QD2CV,cC1CU,QD0CV,cCzCU,QDyCV,cCxCU,QDwCV,cCvCU,QDuCV,gBCxBY,QDwBZ,gBCvBY,QDuBZ,gBCtBY,QDsBZ,gBCrBY,QDqBZ,gBCpBY,QDoBZ,gBCLY,QDKZ,gBCJY,QDIZ,gBCHY,QDGZ,gBCFY,QDEZ,gBCDY,QDCZ,eCcW,QDdX,eCeW,QDfX,eCgBW,QDhBX,eCiBW,QDjBX,eCkBW,QDlBX,cCiCU,QDjCV,cCkCU,QDlCV,cCmCU,QDnCV,cCoCU,QDpCV,cCqCU,QDrCV,aCoDS,QDpDT,aCqDS,QDrDT,aCsDS,QDtDT,aCuDS,QDvDT,aCwDS,QDxDT,gBCuEY,QDvEZ,gBCwEY,QDxEZ,gBCyEY,QDzEZ,gBC0EY,QD1EZ,gBC2EY,QD3EZ,gBC0FY,QD1FZ,gBC2FY,QD3FZ,gBC4FY,QD5FZ,gBC6FY,QD7FZ,gBC8FY,QD9FZ,cC6GU,QD7GV,cC8GU,QD9GV,cC+GU,QD/GV,cCgHU,QDhHV,cCiHU,QDjHV,eCgIW,QDhIX,eCiIW,QDjIX,eCkIW,QDlIX,eCmIW,QDnIX,eCoIW,QDpIX,YDpC8B,YCoC9B,uCErIJ,KACE,sBACA,eACA,kCAEA,kCACA,mCAGF,qBAGE,mBAEA,YACA,mBACA,UAGF,WACE,oBACA,YAGF,WACE,mBAGF,uGAQE,eAGF,gEAUE,0BAGF,6BAIE,6BACA,oBACA,kBACA,oBAEA,qBACA,wBAEA,iEACE,eAIJ,kBAME,mBAGF,MAEE,2BAEA,YACE,2BAIJ,GACE,qBAGF,MAEE,iBAKF,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,iBD3GY,QC8Gd,MACE,6BACA,cAEA,mBACE,cACA,WAGF,qBACE,cAGF,oCACE,wBAIJ,SACE,WACA,0BAEA,iBAEA,yBACE,gBAMJ,aAEE,eAEE,iCACA,mCAGF,OAEE,mCAGF,IACE,0BAGF,MACE,uBAGF,QAGE,qBACA,oBAGF,MAEE,kCAGF,MACE,sCAIF,EACE,wCACA,iCACA,sBACA,uBACA,4BAKE,iBACE,uCAKA,sDACE,sBAMJ,qBACE,wCAIJ,WAEE,qCACA,iCCnPN,6BACE,GACE,6BAGF,KACE,6BAIJ,iBACE,GACE,UAGF,IACE,WAGF,KACE,WCtBJ,OACE,gBACA,mBACA,mBAEA,0BACE,oBACA,qBACA,gBACA,sBACA,cACA,gCACA,+BAIJ,gCACE,iBHiNc,QG/Md,iDACE,iBH+MY,QG9MZ,MHfU,QGmBd,aACE,iBHmEY,QGjEZ,8BACE,iBHiEU,QGhEV,MHxBU,QG4Bd,cACE,eACA,cAGF,aACE,iBH8Ga,QG5Gb,8BACE,iBH4GW,QG3GX,MHtCU,QG0Cd,gBACE,iBHSY,QGRZ,MH9CY,KIJd,QACE,kBACA,kBAIA,mBACE,0BAIJ,mBLWI,UKViB,KLanB,gBACA,uBACA,mBKZF,kBACE,WACA,oBAGF,cACE,uBAEA,4BACA,oBACA,kBACA,MJtBY,KIuBZ,gCAEA,0BACE,mCAGF,oBACE,iBJuOW,QIpOb,2BACE,mTACA,8CAGF,2BACE,q1BACA,8CAIJ,iBACE,2CACA,yBACA,mBACA,cACA,gCAEA,kCACE,kCAGF,6BACE,6BAGF,uBACE,iBJ7BU,QI+BV,wCACE,sCAKN,cACE,qBAEA,iDACE,MJlBU,QIoBV,kEACE,MJvBQ,QI2BZ,2CACE,MJ5BU,QI8BV,4DACE,MJ9BQ,QImCd,iBACE,2CACA,kBACA,mBACA,MJ5FY,KI6FZ,gCAEA,6BACE,iBJ1CU,QI6CZ,uBACE,iBJhDU,QIkDV,wCACE,iBJlDQ,QIuDd,mBACE,yBCjHF,WAEE,mBAGF,mBACE,6BACA,qBACA,kBAIE,gSACE,mBACA,kBACA,sBAEA,gVACE,iBLZM,QKaN,+BACA,oBLdM,QKeN,kBLfM,QKkBR,wTACE,iBLiCM,QKhCN,+BACA,oBL+BM,QK9BN,kBL8BM,QK1BV,wOAEE,ML9BQ,KK+BR,qBACA,oBACA,mBAEA,wUACE,iBLlCM,QKmCN,aLnCM,QKsCR,wRACE,iBLWM,QKVN,aLYM,QKNd,OACE,qBACA,yBACA,mBACA,oBAGF,aACE,2BACA,aAEA,iBACA,kBACA,cACA,kBACA,sBACA,UAEA,6BACE,uBACA,aAEA,kBACA,WACA,cACA,kBACA,qBACA,gCAIJ,mBACE,gBACA,mBACA,oBACA,2BACA,kBACA,mBACA,kBAGE,2CACE,MLrCQ,QKwCV,wFACE,aLzCQ,QK6CZ,+BACE,mBACA,qBAIA,uDACE,iBACA,kBAGE,wPACE,6BAKF,mFACE,ML/DI,QKkEN,gOACE,iBLnEI,QMvDd,YACE,aAQA,mBACE,WACA,eACA,mBAYJ,OACE,kBAOF,cACE,aAEA,2BACE,yBACA,6BAGF,4BACE,YACA,+BAKF,sBP8DA,sBACA,6BACA,mCACA,iCACA,iCACA,6BACA,uFACA,yBACA,sBAEA,uCACE,yHOrEF,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,MNhLU,KDsJZ,2CAEE,WAGF,sBACE,WACA,yCAGF,qBACE,WACA,cOsBJ,cACE,gBACA,mBC7LF,MACE,WACA,iBPCY,uBOEZ,YACE,eACA,kBAEA,eACE,kBACA,UAIJ,YACE,iBAKE,+BACE,gCAKN,kBAEE,mBAGF,SACE,gCACA,qBACA,gBACA,yBAGF,QACE","file":"index.css"}
+{"version":3,"sourceRoot":"","sources":["../sass/init/_variables.scss","../sass/init/_mixins.scss","../node_modules/@lbry/color/lbry-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/table/_index.scss"],"names":[],"mappings":"AAAA,MCuII,cDrIgC,MCqIhC,aDpI+B,MCoI/B,YDnI8B,MCmI9B,YDlI8B,OCkI9B,YDjI8B,OCiI9B,aDhI+B,OCgI/B,cD/HgC,OC+HhC,sBD5HwC,eC4HxC,0BD3H4C,eC2H5C,kBD1HoC,IC0HpC,wBDzH0C,OCyH1C,aCjIU,QDiIV,aCnIU,KDmIV,cCpGU,QDoGV,cCnGU,QDmGV,cClGU,QDkGV,cCjGU,QDiGV,cChGU,QDgGV,cCjFU,QDiFV,cChFU,QDgFV,cC/EU,QD+EV,cC9EU,QD8EV,cC7EU,QD6EV,cC9DU,QD8DV,cC7DU,QD6DV,cC5DU,QD4DV,cC3DU,QD2DV,cC1DU,QD0DV,cC3CU,QD2CV,cC1CU,QD0CV,cCzCU,QDyCV,cCxCU,QDwCV,cCvCU,QDuCV,gBCxBY,QDwBZ,gBCvBY,QDuBZ,gBCtBY,QDsBZ,gBCrBY,QDqBZ,gBCpBY,QDoBZ,gBCLY,QDKZ,gBCJY,QDIZ,gBCHY,QDGZ,gBCFY,QDEZ,gBCDY,QDCZ,eCcW,QDdX,eCeW,QDfX,eCgBW,QDhBX,eCiBW,QDjBX,eCkBW,QDlBX,cCiCU,QDjCV,cCkCU,QDlCV,cCmCU,QDnCV,cCoCU,QDpCV,cCqCU,QDrCV,aCoDS,QDpDT,aCqDS,QDrDT,aCsDS,QDtDT,aCuDS,QDvDT,aCwDS,QDxDT,gBCuEY,QDvEZ,gBCwEY,QDxEZ,gBCyEY,QDzEZ,gBC0EY,QD1EZ,gBC2EY,QD3EZ,gBC0FY,QD1FZ,gBC2FY,QD3FZ,gBC4FY,QD5FZ,gBC6FY,QD7FZ,gBC8FY,QD9FZ,cC6GU,QD7GV,cC8GU,QD9GV,cC+GU,QD/GV,cCgHU,QDhHV,cCiHU,QDjHV,eCgIW,QDhIX,eCiIW,QDjIX,eCkIW,QDlIX,eCmIW,QDnIX,eCoIW,QDpIX,YDpC8B,YCoC9B,uCEvIJ,KACE,sBACA,eACA,kCAEA,kCACA,mCAGF,qBAGE,mBAEA,YACA,mBACA,UAGF,WACE,oBACA,YAGF,WACE,mBAGF,uGAQE,eAGF,gEAUE,0BAGF,6BAIE,6BACA,oBACA,kBACA,oBAEA,qBACA,wBAEA,iEACE,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,iBDtGY,QCyGd,MACE,6BACA,cAEA,mBACE,cACA,WAGF,qBACE,cAGF,oCACE,wBAIJ,OACE,gBACA,aAGF,SACE,WACA,8BACA,yBAEA,iBAEA,yBACE,gBAMJ,aAGE,eAEE,oCACA,mCAGF,OAEE,mCAGF,IACE,0BAGF,MACE,uBAGF,QAGE,qBACA,oBAGF,MAEE,kCAGF,MACE,sCAIF,EACE,wCACA,iCACA,yBACA,uBACA,4BAKE,iBACE,uCAKA,sDACE,sBAMJ,qBACE,wCAIJ,WAEE,qCACA,iCCrPN,6BACE,GACE,6BAGF,KACE,6BAIJ,iBACE,GACE,UAGF,IACE,WAGF,KACE,WCtBJ,OACE,gBACA,mBACA,mBAEA,0BACE,oBACA,qBACA,gBACA,sBACA,cACA,gCACA,+BAIJ,gCACE,iBHiNc,QG/Md,iDACE,iBH+MY,QG9MZ,MHfU,QGmBd,aACE,iBHmEY,QGjEZ,8BACE,iBHiEU,QGhEV,MHxBU,QG4Bd,cACE,eACA,cAGF,aACE,iBH8Ga,QG5Gb,8BACE,iBH4GW,QG3GX,MHtCU,QG0Cd,gBACE,iBHSY,QGRZ,MH9CY,KIJd,QACE,kBACA,kBAIA,mBACE,0BAIJ,mBLWI,UKViB,KLanB,gBACA,uBACA,mBKZF,kBACE,WACA,oBAGF,cACE,uBAEA,4BACA,oBACA,kBACA,MJtBY,KIuBZ,gCAEA,0BACE,mCAGF,oBACE,iBJuOW,QIpOb,2BACE,mTACA,8CAGF,2BACE,q1BACA,8CAIJ,iBACE,2CACA,yBACA,mBACA,cACA,gCAEA,kCACE,kCAGF,6BACE,6BAGF,uBACE,iBJ7BU,QI+BV,wCACE,sCAKN,cACE,qBAEA,iDACE,MJlBU,QIoBV,kEACE,MJvBQ,QI2BZ,2CACE,MJ5BU,QI8BV,4DACE,MJ9BQ,QImCd,iBACE,2CACA,kBACA,mBACA,MJ5FY,KI6FZ,gCAEA,6BACE,iBJ1CU,QI6CZ,uBACE,iBJhDU,QIkDV,wCACE,iBJlDQ,QIuDd,mBACE,yBCjHF,WAEE,+BAEA,yEAGE,wBACA,iBAGF,wEAEE,+BACA,8BACA,sBAGF,8EAEE,MLhBU,KKiBV,+BACA,8BACA,mBAEA,8HACE,iBLpBQ,QKqBR,aLrBQ,QKwBV,sGACE,iBLyBQ,QKxBR,aL0BQ,QKtBZ,yBACE,gcACA,+BACA,4BACA,qBACA,+BACA,8BAIJ,mBACE,6BACA,+BACA,kBAGF,+BACE,aACA,mBACA,8BAGF,mCACE,aACA,sBACA,+BAEA,yDACE,WAGF,oIAEE,UAGF,+CACE,MLnCU,QKoCV,qBACA,kBACA,iCACA,yBAOA,8TACE,aL/EQ,QKkFV,8QACE,aL/BQ,QKmCZ,gGAEE,WAIJ,OACE,2CACA,yBACA,+BACA,oBAGF,2BACE,aAEA,wGAEE,OAEA,wJACE,iBL5GQ,QK6GR,+BACA,oBL9GQ,QK+GR,kBL/GQ,QKkHV,gIACE,iBL/DQ,QKgER,+BACA,oBLjEQ,QKkER,kBLlEQ,QKuEd,mCN0CE,gBACA,mBACA,oBACA,2BACA,8BACA,+BACA,kBAGE,2DACE,MC5HQ,QDgIZ,+CACE,+BACA,qBMtDA,gKAEE,aL9EQ,QKmFV,6EACE,iBACA,kBAGE,4UAEE,UACA,kBAKF,yGACE,MLjGI,QKwGd,iCN+BE,+CACA,aAEA,iBACA,cACA,kBACA,sBACA,UAEA,iDACE,uBACA,aAEA,WACA,cACA,kBM3CF,iDACE,8NACA,gCACA,4BACA,qBACA,mBAIJ,6BNFE,gBACA,mBACA,oBACA,2BACA,8BACA,+BACA,kBAGE,qDACE,MC5HQ,QDgIZ,yCACE,+BACA,qBMVA,wIAEE,aL1HQ,QK+HV,iEACE,iBACA,kBAGE,wSAEE,6BAKF,6FACE,ML5II,QK+IN,gRAEE,iBLjJI,QKwJd,2BNjBE,+CACA,aAEA,iBACA,cACA,kBACA,sBACA,UMYA,kBNVA,2CACE,uBACA,aAEA,WACA,cACA,kBMMF,2CACE,kBACA,qBACA,gCCtNJ,YACE,aAQA,mBACE,WACA,eACA,mBAYJ,OACE,kBAOF,cACE,aAEA,2BACE,yBACA,6BAGF,4BACE,YACA,+BAKF,sBP8DA,sBACA,6BACA,mCACA,iCACA,iCACA,6BACA,uFACA,yBACA,sBAEA,uCACE,yHOrEF,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,MNhLU,KDsJZ,2CAEE,WAGF,sBACE,WACA,yCAGF,qBACE,WACA,cOsBJ,cACE,gBACA,mBC7LF,MACE,WACA,iBPCY,uBOEZ,YACE,eACA,kBAEA,eACE,kBACA,UAIJ,YACE,iBAKE,+BACE,gCAKN,kBAEE,mBAGF,SACE,gCACA,qBACA,gBACA,yBAGF,QACE","file":"index.css"}

dist/index.html

@@ -93,20 +93,52 @@
             </input-submit>
           </fieldset>
 
+          <fieldset>
+            <legend>Become a Gym Leader</legend>
+
+            <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>
+            <radio-element>
               <input id="test-radio-1" name="toggle" type="radio">
               <label for="test-radio-1">Radio button 1</label>
-              <check></check>
-            </radio>
+              <radio-toggle/>
+            </radio-element>
 
-            <radio>
+            <radio-element>
               <input id="test-radio-2" name="toggle" type="radio">
               <label for="test-radio-2">Radio button 2</label>
-              <check></check>
-            </radio>
+              <radio-toggle/>
+            </radio-element>
+
+            <checkbox-element>
+              <input id="test-checkbox-1" name="check" type="checkbox">
+              <label for="test-checkbox-1">Checkbox</label>
+              <checkbox-toggle/>
+            </checkbox-element>
           </fieldset>
         </form>
       </section>

package.json

@@ -12,9 +12,9 @@
     "@lbry/color": "^1.1.0",
     "husky": "^1.3.1",
     "npm-run-all": "^4.1.5",
-    "sass": "^1.16.1",
+    "sass": "^1.17.0",
     "sass-lint": "^1.12.1",
-    "updates": "^6.2.1"
+    "updates": "^7.0.0"
   },
   "files": [
     "dist/style.css",

sass/form/_index.scss

@@ -1,108 +1,184 @@
 form {
   // setting the font size here sizes everything within
-  margin-bottom: 1rem;
+  margin-bottom: var(--spacing-s);
+
+  button,
+  input,
+  select {
+    height: var(--spacing-l);
+    border: 1px solid;
+  }
+
+  [type="email"],
+  [type="text"] {
+    padding-right: var(--spacing-s);
+    padding-left: var(--spacing-s);
+    transition: border 0.2s;
+  }
+
+  [type="button"],
+  [type="submit"] {
+    color: $lbry-white;
+    padding-right: var(--spacing-m);
+    padding-left: var(--spacing-m);
+    transition: all 0.2s;
+
+    &:not(:hover) {
+      background-color: $lbry-black;
+      border-color: $lbry-black;
+    }
+
+    &:hover {
+      background-color: $lbry-teal-3;
+      border-color: $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);
+  }
 }
 
 fieldset {
   border-top: 1px solid $lbry-gray-1;
-  margin-bottom: 1.5rem;
+  margin-bottom: var(--spacing-m);
   position: relative;
+}
 
-  button,
-  input {
-    &:not([type="button"]):not([type="radio"]):not([type="submit"]) {
-      padding-right: 1rem;
-      padding-left: 1rem;
-      transition: border 0.2s;
+fieldset-group {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
 
-      &:not(:focus) {
-        border-top-color: $lbry-black;
-        border-right-color: transparent;
-        border-bottom-color: $lbry-black;
-        border-left-color: $lbry-black;
-      }
+fieldset-section {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: var(--spacing-m);
 
-      &:focus {
-        border-top-color: $lbry-teal-5;
-        border-right-color: transparent;
-        border-bottom-color: $lbry-teal-5;
-        border-left-color: $lbry-teal-5;
-      }
+  &.full-width {
+    width: 100%;
+  }
+
+  fieldset-group &,
+  .fieldset-group & {
+    width: 49%;
+  }
+
+  label {
+    color: $lbry-gray-4;
+    display: inline-block;
+    font-size: smaller;
+    margin-bottom: var(--spacing-xxs);
+    text-transform: uppercase;
+  }
+
+  [type="email"],
+  [type="text"],
+  select,
+  textarea {
+    &:not(:focus) {
+      border-color: $lbry-black;
     }
 
-    &[type="button"],
-    &[type="submit"] {
-      color: $lbry-white;
-      padding-right: 1.5rem;
-      padding-left: 1.5rem;
-      transition: all 0.2s;
-
-      &:not(:hover) {
-        background-color: $lbry-black;
-        border-color: $lbry-black;
-      }
-
-      &:hover {
-        background-color: $lbry-teal-3;
-        border-color: $lbry-teal-5;
-      }
+    &:focus {
+      border-color: $lbry-teal-5;
     }
   }
+
+  input,
+  select {
+    width: 100%;
+  }
 }
 
 legend {
-  padding: 0.25rem 0.5rem;
+  padding: var(--spacing-xs) var(--spacing-s); // sass-lint:disable-line shorthand-values
   border: 1px solid $lbry-gray-1;
-  margin-bottom: 1rem;
+  margin-bottom: var(--spacing-s);
   pointer-events: none;
 }
 
-check {
-  width: 1.5rem; height: 1.5rem;
-  top: 0; left: 0;
+input-submit {
+  display: flex;
 
-  border: 2px solid;
-  border-radius: 50%;
-  display: block;
-  position: relative;
-  transition: border 0.2s;
-  z-index: 5;
+  [type="email"],
+  [type="text"] {
+    flex: 1;
 
-  &::before {
-    width: 100%; height: 100%;
-    top: 0; left: 0;
+    &:not(:focus) {
+      border-top-color: $lbry-black;
+      border-right-color: transparent;
+      border-bottom-color: $lbry-black;
+      border-left-color: $lbry-black;
+    }
 
-    border-radius: 50%;
-    content: "";
-    display: block;
-    position: absolute;
-    transform: scale(0.6);
-    transition: background-color 0.2s;
+    &:focus {
+      border-top-color: $lbry-teal-5;
+      border-right-color: transparent;
+      border-bottom-color: $lbry-teal-5;
+      border-left-color: $lbry-teal-5;
+    }
   }
 }
 
-radio {
-  min-height: 2rem;
-  align-items: center;
-  display: inline-flex;
-  flex-direction: row-reverse;
-  margin-right: 1rem;
-  margin-bottom: 1rem;
-  position: relative;
+checkbox-element {
+  @include tick;
 
   &:hover {
-    label {
-      color: $lbry-teal-4;
-    }
-
-    check {
+    checkbox-toggle,
+    .checkbox-toggle {
       border-color: $lbry-teal-4;
     }
   }
 
-  label {
-    padding-left: 0.5rem;
-    transition: color 0.2s;
+  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: $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: $lbry-teal-4;
+    }
   }
 
   input {
@@ -111,7 +187,8 @@ radio {
       visibility: hidden;
 
       &:not(:checked) {
-        + label + check::before {
+        + label + radio-toggle::before,
+        + label + .radio-toggle::before {
           background-color: transparent;
         }
       }
@@ -121,7 +198,8 @@ radio {
           color: $lbry-teal-4;
         }
 
-        + label + check::before {
+        + label + radio-toggle::before,
+        + label + .radio-toggle::before {
           background-color: $lbry-teal-4;
         }
       }
@@ -129,20 +207,53 @@ radio {
   }
 }
 
+radio-toggle {
+  @include tick-toggle;
+  border-radius: 50%;
+
+  &::before {
+    border-radius: 50%;
+    transform: scale(0.6);
+    transition: background-color 0.2s;
+  }
+}
 
 
-.check {
-  @extend check;
+
+// 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;
 }
 
-.radio-group {
-  @extend radio;
+.input-submit {
+  @extend input-submit;
+}
+
+.radio-element {
+  @extend radio-element;
+}
+
+.radio-toggle {
+  @extend radio-toggle;
 }

sass/init/_mixins.scss

@@ -168,6 +168,47 @@
   }
 }
 
+@mixin tick {
+  min-height: 2rem;
+  align-items: center;
+  display: inline-flex;
+  flex-direction: row-reverse;
+  margin-right: var(--spacing-s);
+  margin-bottom: var(--spacing-s);
+  position: relative;
+
+  &:hover {
+    label {
+      color: $lbry-teal-4;
+    }
+  }
+
+  label {
+    padding-left: var(--spacing-xs);
+    transition: color 0.2s;
+  }
+}
+
+@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;
+  z-index: 5;
+
+  &::before {
+    width: 100%; height: 100%;
+    top: 0; left: 0;
+
+    content: "";
+    display: block;
+    position: absolute;
+  }
+}
+
 @mixin underline($text-color: $lbry-black, $whitespace-color: $lbry-white) {
   @include selection($text-color, $whitespace-color);
 

sass/init/_reset.scss

@@ -1,5 +1,3 @@
-// sass-lint:disable no-important
-
 html {
   box-sizing: border-box;
   font-size: 12px;
@@ -92,10 +90,7 @@ ul {
 }
 
 table {
-  // border-collapse: collapse;
   border-spacing: 0;
-
-  // -webkit-appearance: none;
 }
 
 dd {
@@ -149,7 +144,7 @@ input {
 
   &::placeholder {
     color: inherit;
-    opacity: 0.3;
+    opacity: 0.2;
   }
 
   &:not(:disabled) {
@@ -161,9 +156,15 @@ input {
   }
 }
 
+select {
+  border-radius: 0;
+  outline: none;
+}
+
 textarea {
   width: 100%;
-  padding: var(--spacing-xs);
+  min-height: var(--spacing-xxl);
+  padding: var(--spacing-s);
   // border-color should be added in apps for blur/focus
   border: 1px solid;
 
@@ -175,10 +176,11 @@ textarea {
 
 
 @media print {
+  // sass-lint:disable-block no-important
   // Intelligent print styles
   pre,
   blockquote {
-    border: 1px solid #999 !important;
+    border: 1px solid $lbry-gray-5 !important;
     page-break-inside: avoid !important;
   }
 
@@ -215,7 +217,7 @@ textarea {
   * {
     background-color: transparent !important;
     background-image: none !important;
-    color: #000 !important;
+    color: $lbry-black !important;
     filter: none !important;
     text-shadow: none !important;
   }