Fixes and added some media styles

.gitignore

@@ -5,6 +5,4 @@
 .sass-cache
 
 # Directories
-# it would be useful to commit the compiled CSS but let's disable this for now
-dist
 node_modules

dist/style.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../sass/init/_variables.scss","../sass/init/_mixins.scss","../sass/init/_reset.scss","../sass/init/_animation.scss","../sass/badge/_index.scss","../node_modules/@lbry/color/lbry-color.scss","../sass/button/_index.scss","../sass/media/_index.scss"],"names":[],"mappings":"AAAA,MC8CI,cD7CgC,MC6ChC,aD5C+B,MC4C/B,YD3C8B,MC2C9B,YD1C8B,OC0C9B,YDzC8B,OCyC9B,aDxC+B,OCwC/B,cDvCgC,OCuChC,sBDpCwC,eCoCxC,0BDjC4C,eCiC5C,kBD9BoC,IC8BpC,wBD3B0C,OEnB9C,KACE,sBACA,kCAEA,kCACA,mCAGF,qBAGE,mBAEA,YACA,mBACA,UACA,iBAGF,gEAUE,0BAGF,6BAIE,oBACA,kBACA,oBAEA,iEACE,eACA,oBAIJ,kBAME,mBAGF,MAEE,2BAEA,YACE,2BAIJ,GACE,qBAIA,WACE,eAIJ,MACE,yBACA,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,MACE,6BACA,cAGA,mBACE,cACA,WAGF,qBACE,cAGF,mGAIE,YAGF,uIAIE,eAGF,oCACE,wBAIJ,SACE,WACA,0BAEA,iBC1JF,6BACE,GACE,6BAGF,KACE,6BAIJ,iBACE,GACE,UAGF,IACE,WAGF,KACE,WCtBJ,OACE,gBACA,mBACA,mBAEA,0BACE,oBACA,qBACA,gBACA,sBACA,cACA,gCACA,+BAGF,gCACE,iBCkNY,QDhNZ,iDACE,iBCgNU,QD/MV,MCdQ,QDkBZ,aACE,iBCoEU,QDlEV,8BACE,iBCkEQ,QDjER,MCvBQ,QD2BZ,cACE,eACA,cAGF,aACE,iBC+GW,QD7GX,8BACE,iBC6GS,QD5GT,MCrCQ,QCNd,QACE,kBACA,kBAGE,mBACE,0BAIJ,6BACqB,KLErB,gBACA,uBACA,mBKDA,kBACE,WAGF,cACE,uBAEA,4BACA,oBACA,kBACA,MDpBU,KCqBV,gCAEA,0BACE,mCAGF,oBACE,iBDyOS,QCtOX,2BACE,mTACA,8CAGF,2BACE,q1BACA,8CAIJ,iBACE,sCACA,yBACA,mBACA,cACA,gCAEA,kCACE,kCAGF,6BACE,6BAGF,uBACE,iBD3BQ,QC6BR,wCACE,sCAKN,cACE,qBAEA,uDACE,MDhBQ,QCkBR,wEACE,MDrBM,QCyBV,iDACE,MD1BQ,QC4BR,kEACE,MD5BM,QCiCZ,iBACE,sCACA,kBACA,mBACA,MD1FU,KC2FV,gCAEA,6BACE,iBDxCQ,QC2CV,uBACE,iBD9CQ,QCgDR,wCACE,iBDhDM,QCqDZ,mBACE,yBClGJ,OACE,kBAIA,cACE,aACA,iBAEA,2BACE,yBACA,6BAGF,4BACE,YACA,+BAKF,sBNZF,sBACA,6BACA,mCACA,iCACA,iCACA,6BACA,uFACA,yBACA,sBAEA,uCACE,yHMKA,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,gBACA,mBAGF,mBACE,mBAEA,sCACE,+BAGF,+BACE,qBAOJ,iBACE,kBAGF,aACE,iBAEA,8BACE,MFpKQ,KJ+CZ,2CAEE,WAGF,sBACE,WACA,yCAGF,qBACE,WACA,cMiHF,cACE,gBACA","file":"style.css"}

package.json

@@ -14,7 +14,7 @@
     "npm-run-all": "^4.1.5",
     "sass": "^1.15.1",
     "sass-lint": "^1.12.1",
-    "updates": "^5.4.0"
+    "updates": "^5.4.2"
   },
   "homepage": "https://github.com/lbryio/components#readme",
   "husky": {
@@ -29,7 +29,6 @@
     "url": "https://github.com/lbryio/components.git"
   },
   "scripts": {
-    "prepublish": "TODO: Add `npm run test:sass && npm run sass:prod` to this script",
     "sass:dev": "sass --load-path=node_modules --watch sass:dist --style compressed",
     "sass:prod": "sass --load-path=node_modules --update sass:dist --style compressed",
     "test": "run-s test:*",

sass/button/_index.scss

@@ -0,0 +1,114 @@
+.button {
+  fill: currentColor;
+  position: relative;
+
+  &--alt {
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  &--constrict {
+    @include constrict(20vw);
+  }
+
+  &--disabled {
+    opacity: 0.3;
+  }
+
+  &--icon {
+    width: 5rem; height: 5rem;
+
+    background-repeat: no-repeat;
+    background-size: 50%;
+    border-radius: 50%;
+    color: $lbry-white;
+    transition: background-color 0.2s;
+
+    &:not(:hover) {
+      background-color: rgba($lbry-black, 0.7);
+    }
+
+    &:hover {
+      background-color: $lbry-green-3;
+    }
+
+    &.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--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);
+    }
+  }
+
+  &--inverse {
+    padding: var(--spacing-xs --spacing-s); // 0.5rem 1rem;
+    border: 1px solid $lbry-gray-1;
+    border-radius: 1rem;
+    color: inherit;
+    transition: background-color 0.2s;
+
+    [data-mode="dark"] & {
+      border-color: rgba($lbry-white, 0.1);
+    }
+
+    &:not(:hover) {
+      background-color: transparent;
+    }
+
+    &:hover {
+      background-color: $lbry-gray-1;
+
+      [data-mode="dark"] & {
+        background-color: rgba($lbry-white, 0.1);
+      }
+    }
+  }
+
+  &--link {
+    transition: color 0.2s;
+
+    &:not(&--disabled):not(:hover) {
+      color: $lbry-teal-5;
+
+      [data-mode="dark"] & {
+        color: $lbry-teal-3;
+      }
+    }
+
+    &:not(&--disabled):hover {
+      color: $lbry-teal-3;
+
+      [data-mode="dark"] & {
+        color: $lbry-teal-4;
+      }
+    }
+  }
+
+  &--primary {
+    padding: var(--spacing-xs --spacing-s); // 0.5rem 1rem;
+    align-self: center; // fixes buttons next to tall elements inside one with `display: flex`
+    border-radius: 1rem;
+    color: $lbry-white;
+    transition: background-color 0.2s;
+
+    &:not(:hover) {
+      background-color: $lbry-teal-5;
+    }
+
+    &:hover {
+      background-color: $lbry-teal-3;
+
+      [data-mode="dark"] & {
+        background-color: $lbry-teal-4;
+      }
+    }
+  }
+
+  &--uppercase {
+    text-transform: uppercase;
+  }
+}

sass/init/_mixins.scss

@@ -8,7 +8,7 @@
 // Omit value for basic text truncation
 @mixin constrict($value: null) {
   @if ($value) {
-    max-width: $value; // 20vw
+    max-width: $value;
   }
 
   overflow: hidden;

sass/init/_reset.scss

@@ -0,0 +1,158 @@
+html {
+  box-sizing: border-box;
+  text-rendering: optimizeLegibility;
+
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+*,
+*::before,
+*::after {
+  margin: 0; padding: 0;
+
+  border: none;
+  box-sizing: inherit;
+  outline: 0;
+  user-select: none;
+}
+
+a,
+area,
+button,
+[role="button"],
+input,
+label,
+select,
+summary,
+textarea {
+  // Remove touch delay on supported devices
+  touch-action: manipulation;
+}
+
+button,
+input,
+select,
+textarea {
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+
+  &:disabled {
+    cursor: default;
+    pointer-events: none;
+  }
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: normal;
+}
+
+ol,
+ul {
+  list-style-position: inside;
+
+  > li {
+    list-style-position: inside;
+  }
+}
+
+ul {
+  list-style-type: none;
+}
+
+label {
+  &[for] {
+    cursor: pointer;
+  }
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+dd {
+  width: 80%;
+  float: left;
+}
+
+dl {
+  width: 100%;
+  overflow-x: scroll;
+  overflow-y: hidden;
+}
+
+dt {
+  width: 20%;
+  float: left;
+}
+
+img {
+  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;
+
+  &:not(:disabled) {
+    cursor: pointer;
+  }
+
+  &:disabled {
+    opacity: 0.3;
+  }
+}
+
+input {
+  background-color: transparent;
+  color: inherit;
+  // line-height: 1; // this can differ across apps
+
+  &::placeholder {
+    color: inherit;
+    opacity: 0.3;
+  }
+
+  &:not(:disabled) {
+    color: inherit;
+  }
+
+  &:not([type="checkbox"]),
+  &:not([type="file"]),
+  &:not([type="radio"]),
+  &:not([type="select"]) {
+    cursor: text;
+  }
+
+  &[type="checkbox"]:not(:disabled),
+  &[type="file"]:not(:disabled),
+  &[type="radio"]:not(:disabled),
+  &[type="select"]:not(:disabled) {
+    cursor: pointer;
+  }
+
+  &::-webkit-search-cancel-button {
+    -webkit-appearance: none;
+  }
+}
+
+textarea {
+  width: 100%;
+  padding: var(--spacing-xs);
+  // border-color should be added in apps for blur/focus
+  border: 1px solid;
+}

sass/init/_variables.scss

@@ -18,24 +18,4 @@
 
   // 16:9
   @include root-prop(--aspect-ratio-standard, 56.25%);
-
-  // --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;
-
-  // // 12:5
-  // --aspect-ratio-bluray: 41.6666666667%;
-
-  // // 11:4
-  // --aspect-ratio-panavision: 36.3636363636%;
-
-  // // 4:3
-  // --aspect-ratio-sd: 75%;
-
-  // // 16:9
-  // --aspect-ratio-standard: 56.25%;
 }

sass/media/_index.scss

@@ -1,30 +1,116 @@
-// sass-lint:disable no-empty-rulesets
-
-
-
 //  C O N T A I N E R S
 
-.media-grid {
+.media-grid { // sass-lint:disable-line no-empty-rulesets
 }
 
-.media-list {
+.media-list { // sass-lint:disable-line no-empty-rulesets
 }
 
-.media-row {
+.media-row { // sass-lint:disable-line no-empty-rulesets
 }
 
 
 
 .media {
+  position: relative;
+
   //  M O D I F I E R S
 
   &--large {
+    display: flex;
+    font-size: 1.5rem;
+
+    .media__info {
+      width: calc(100% - 20rem);
+      margin-left: var(--spacing-s); // 1rem;
+    }
+
+    .media__thumb {
+      width: 40rem;
+      margin-bottom: var(--spacing-s); // 1rem;
+    }
   }
 
   &--placeholder {
+    > * {
+      @include placeholder;
+    }
+
+    .media__channel,
+    .media__date,
+    .media__title {
+      min-height: 1rem;
+    }
+
+    .media__channel {
+      width: 70%;
+    }
+
+    .media__date {
+      width: 30%;
+    }
+
+    .media__title {
+      width: 100%;
+    }
   }
 
   &--small {
+    display: flex;
+    justify-content: space-between;
+
+    &:not(:last-of-type) {
+      margin-bottom: var(--spacing-s); // 1rem;
+    }
+
+    .media__info {
+      width: 50%;
+      padding-left: var(--spacing-s); // 1rem;
+    }
+
+    .media__properties {
+      bottom: -1.5rem; left: calc(-100% - 1.5rem);
+      position: absolute;
+    }
+
+    .media__thumb {
+      width: 50%;
+    }
+
+    .media__title {
+      height: 3rem;
+      line-height: 1.33;
+    }
+  }
+
+  &--wide { // .media--search-result
+    display: flex;
+
+    &:not(:last-of-type) {
+      margin-bottom: var(--spacing-m); // 1.5rem;
+    }
+
+    .media__info {
+      width: calc(100% - 20rem);
+      margin-left: var(--spacing-s); // 1rem;
+    }
+
+    .media__properties {
+      bottom: -5.5rem; left: -20rem;
+      position: absolute;
+    }
+
+    .media__text { // .media__subtext
+      padding-top: var(--spacing-s); // 1rem;
+    }
+
+    .media__thumb {
+      width: 20rem;
+    }
+
+    .media__title {
+      font-size: 1.5rem;
+    }
   }
 
 
@@ -32,35 +118,64 @@
   //  C H I L D R E N
 
   &__actions {
+    display: flex;
+    padding-top: var(--spacing-m); // 2rem;
+    padding-bottom: var(--spacing-m); // 2rem;
   }
 
-  &__content {
+  &__content { // sass-lint:disable-line no-empty-rulesets
   }
 
-  &__date {
+  &__date { // sass-lint:disable-line no-empty-rulesets
   }
 
   &__info {
+    word-wrap: break-word;
+
+    [data-mode="dark"] & {
+      border-color: rgba($lbry-gray-5, 0.2);
+    }
   }
 
   &__message {
+    padding: var(--spacing-s); // 1rem;
+    font-size: 0.9rem;
+    white-space: normal;
   }
 
   &__properties {
+    vertical-align: top;
+
+    > *:not(:last-child) {
+      margin-right: var(--spacing-xs); // 0.5rem;
     }
 
-  &__property {
+    &:not(:empty) {
+      display: inline-block;
+    }
+  }
+
+  &__property { // sass-lint:disable-line no-empty-rulesets
   }
 
   &__subtitle {
+    position: relative;
   }
 
   &__text {
+    font-size: 2.5rem;
+
+    [data-mode="dark"] & {
+      color: $lbry-white;
+    }
   }
 
   &__thumb {
+    @include thumbnail;
   }
 
   &__title {
+    font-weight: 600;
+    white-space: normal;
   }
 }

sass/style.scss

@@ -1,8 +1,10 @@
 @charset "utf-8";
 
 @import "@lbry/color/lbry-color";
-@import "init/animation";
 @import "init/mixins";
 @import "init/variables";
+@import "init/reset";
+@import "init/animation";
 @import "badge";
+@import "button";
 @import "media";