Added badge styles and started on media

.gitignore

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

package.json

@@ -8,14 +8,20 @@
   },
   "description": "Styling for shared components across LBRY properties",
   "devDependencies": {
-    "@inc/sasslint-config": "^1.1.1",
+    "@inc/sasslint-config": "^1.1.2",
     "@lbry/color": "^1.0.5",
+    "husky": "^1.2.0",
     "npm-run-all": "^4.1.5",
     "sass": "^1.15.1",
     "sass-lint": "^1.12.1",
-    "updates": "^5.3.0"
+    "updates": "^5.4.0"
   },
   "homepage": "https://github.com/lbryio/components#readme",
+  "husky": {
+    "hooks": {
+      "pre-commit": "npm run test:sass && git add -A :/"
+    }
+  },
   "license": "BSD-3-Clause",
   "name": "@lbry/components",
   "repository": {
@@ -23,11 +29,13 @@
     "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:*",
     "test:dependencies": "updates --update ./",
-    "test:sass": "sass-lint --config ./node_modules/@inc/sasslint-config/config.json --verbose --no-exit"
+    "test:sass": "sass-lint --config ./node_modules/@inc/sasslint-config/config.json --verbose --no-exit",
+    "watch": "npm run sass:dev"
   },
   "version": "1.0.1"
 }

sass/badge/_index.scss

@@ -0,0 +1,47 @@
+.badge {
+  font-weight: 600;
+  vertical-align: top;
+  white-space: nowrap;
+
+  &:not(&--large) {
+    border-radius: 0.2rem;
+    display: inline-block;
+    font-size: 0.8rem;
+    letter-spacing: 0.05rem;
+    line-height: 2;
+    padding-right: var(--spacing-xs); // 0.5rem;
+    padding-left: var(--spacing-xs); // 0.55rem;
+  }
+
+  &--cost:not(&--large) {
+    background-color: $lbry-yellow-2;
+
+    [data-mode="dark"] & {
+      background-color: $lbry-yellow-3;
+      color: $lbry-black;
+    }
+  }
+
+  &--free {
+    background-color: $lbry-blue-2;
+
+    [data-mode="dark"] & {
+      background-color: $lbry-blue-3;
+      color: $lbry-black;
+    }
+  }
+
+  &--large {
+    font-size: 5rem;
+    line-height: 1;
+  }
+
+  &--nsfw {
+    background-color: $lbry-grape-2;
+
+    [data-mode="dark"] & {
+      background-color: $lbry-grape-3;
+      color: $lbry-black;
+    }
+  }
+}

sass/init/_animation.scss

@@ -0,0 +1,25 @@
+// TODO: Make customizable
+// This may have to become a mixin
+@keyframes loading-animation {
+  0% {
+    background-position: -500px 0;
+  }
+
+  100% {
+    background-position: 500px 0;
+  }
+}
+
+@keyframes pulse {
+  0% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.7;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}

sass/init/_mixins.scss

@@ -1,3 +1,45 @@
+@mixin between {
+  display: flex;
+  justify-content: space-between;
+}
+
+// (Smart) text truncation
+// Pass in a width to customize how much text is allowed
+// Omit value for basic text truncation
+@mixin constrict($value: null) {
+  @if ($value) {
+    max-width: $value; // 20vw
+  }
+
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+// TODO: Make customizable
+// The `background-position` in `loading-animation` is the same width as this `background-size`
+// The same values can be passed to both
+@mixin placeholder {
+  animation-duration: 4s;
+  animation-fill-mode: forwards;
+  animation-iteration-count: infinite;
+  animation-name: loading-animation;
+  animation-timing-function: linear;
+  background-color: transparent;
+  background-image: linear-gradient(to right, $lbry-gray-3 10%, transparent 80%, $lbry-gray-3 100%);
+  background-repeat: repeat;
+  background-size: 500px;
+
+  [data-mode="dark"] & {
+    background-image: linear-gradient(
+      to right,
+      rgba($lbry-white, 0.1) 10%,
+      transparent 80%,
+      rgba($lbry-white, 0.1) 100%
+    );
+  }
+}
+
 // Use CSS variables without upsetting Sass-Lint
 // https://github.com/sasstools/sass-lint/issues/1161#issuecomment-390537190
 @mixin root-prop($prop: null, $value: null) {
@@ -5,3 +47,20 @@
     #{$prop}: $value;
   }
 }
+
+@mixin thumbnail {
+  &::before,
+  &::after {
+    content: "";
+  }
+
+  &::before {
+    float: left;
+    padding-top: var(--aspect-ratio-standard);
+  }
+
+  &::after {
+    clear: both;
+    display: block;
+  }
+}

sass/media/_index.scss

@@ -0,0 +1,66 @@
+// sass-lint:disable no-empty-rulesets
+
+
+
+//  C O N T A I N E R S
+
+.media-grid {
+}
+
+.media-list {
+}
+
+.media-row {
+}
+
+
+
+.media {
+  //  M O D I F I E R S
+
+  &--large {
+  }
+
+  &--placeholder {
+  }
+
+  &--small {
+  }
+
+
+
+  //  C H I L D R E N
+
+  &__actions {
+  }
+
+  &__content {
+  }
+
+  &__date {
+  }
+
+  &__info {
+  }
+
+  &__message {
+  }
+
+  &__properties {
+  }
+
+  &__property {
+  }
+
+  &__subtitle {
+  }
+
+  &__text {
+  }
+
+  &__thumb {
+  }
+
+  &__title {
+  }
+}

sass/style.scss

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