Added styling to mixins and updated README

README.md

@@ -1,12 +1,12 @@
 # @lbry/components
-Styling for shared components across LBRY properties
+> Styling for shared components across LBRY properties
 
 
 
 ### Installation
 
 ```bash
-$ npm i @lbry/components sass -D SOON
+$ npm i @lbry/components sass -D
 ```
 
 We recommend using this module with [Dart Sass](https://www.npmjs.com/package/sass) for its' focus on speed and low dependency count.
@@ -17,7 +17,29 @@ If you are using `@lbry/components`, you can safely remove [@lbry/color](https:/
 
 ### Usage
 
-TBD
+Your main Sass file:
+
+```scss
+@charset "utf-8";
+
+@import "@lbry/components/sass/";
+// ...your other Sass imports
+```
+
+In your watch scripts for Sass files, ensure you load the `node_modules` path in order to `import` this module in your project without silly prefixes like `../../../`. What a _mess_.
+
+Example `package.json` scripts section:
+
+```js
+"scripts": {
+  ...,
+  "sass:dev": "sass --load-path=node_modules --watch app/sass:app/dist --style compressed",
+  "sass:prod": "sass --load-path=node_modules --update app/sass:app/dist --style compressed",
+  ...
+}
+```
+
+They are nearly identical, save for `--watch` and `--update`. Please refer to the [Dart Sass README](https://github.com/sass/dart-sass/blob/master/README.md) for assistance on how to integrate it with your project. The [above example](https://github.com/lbryio/lbry.tech/blob/master/package.json) is taken from the `lbry.tech` repo.
 
 
 

dist/index.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":"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","file":"index.css"}

index.js

@@ -1,20 +0,0 @@
-"use strict";
-
-
-
-module.exports = exports = {
-  badge: require("./sass/badge.scss")
-};
-
-// {
-//   "badge": "sass/badge",
-//   "button": "sass/button",
-//   "index": "sass/style.scss",
-//   "init": [
-//     "sass/init/animation",
-//     "sass/init/mixins",
-//     "sass/init/reset",
-//     "sass/init/variables"
-//   ],
-//   "media": "sass/media"
-// }

package.json

@@ -14,21 +14,20 @@
     "npm-run-all": "^4.1.5",
     "sass": "^1.15.1",
     "sass-lint": "^1.12.1",
-    "updates": "^5.4.2"
+    "updates": "^5.4.3"
   },
   "files": [
     "dist/style.css",
-    "sass/*",
-    "index.js"
+    "sass/*"
   ],
   "homepage": "https://github.com/lbryio/components#readme",
   "husky": {
     "hooks": {
-      "pre-commit": "npm run test:sass && git add -A :/"
+      "pre-commit": "npm run test:sass && npm run sass:prod && git add -A :/"
     }
   },
   "license": "BSD-3-Clause",
-  "main": "lbry-components.json",
+  "main": "sass/",
   "name": "@lbry/components",
   "repository": {
     "type": "git",

sass/init/_mixins.scss

@@ -3,6 +3,18 @@
   justify-content: space-between;
 }
 
+@mixin center {
+  align-items: center;
+  display: inline-flex;
+  justify-content: center;
+}
+
+@mixin clearfix {
+  clear: both;
+  content: "";
+  display: block;
+}
+
 // (Smart) text truncation
 // Pass in a width to customize how much text is allowed
 // Omit value for basic text truncation
@@ -16,6 +28,21 @@
   white-space: nowrap;
 }
 
+@mixin hide-text {
+  border: none;
+  color: transparent;
+  font: 0 / 0 a;
+  text-shadow: none;
+}
+
+@mixin no-user-select {
+  user-select: none;
+
+  -ms-user-select: none;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+}
+
 // 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
@@ -48,6 +75,20 @@
   }
 }
 
+@mixin selection($background-color, $text-color) {
+  &::selection {
+    background-color: $background-color;
+    color: $text-color;
+    text-shadow: none;
+  }
+
+  &::-moz-selection {
+    background-color: $background-color;
+    color: $text-color;
+    text-shadow: none;
+  }
+}
+
 @mixin thumbnail {
   &::before,
   &::after {
@@ -64,3 +105,20 @@
     display: block;
   }
 }
+
+@mixin underline($text-color: $lbry-black, $whitespace-color: $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-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;
+
+  @-moz-document url-prefix() { // sass-lint:disable-line empty-args
+    background-position: 0 90%, 100% 90%, 0 90%;
+  }
+}

sass/init/_reset.scss

@@ -1,3 +1,5 @@
+// sass-lint:disable no-important
+
 html {
   box-sizing: border-box;
   text-rendering: optimizeLegibility;
@@ -17,6 +19,15 @@ html {
   user-select: none;
 }
 
+[readonly] {
+  cursor: not-allowed;
+}
+
+[type="button"],
+[type="submit"] {
+  cursor: pointer;
+}
+
 a,
 area,
 button,
@@ -34,10 +45,14 @@ button,
 input,
 select,
 textarea {
+  background-color: transparent;
   font-family: inherit;
   font-size: inherit;
   font-weight: inherit;
 
+  -moz-appearance: none;
+  -webkit-appearance: none;
+
   &:disabled {
     cursor: default;
     pointer-events: none;
@@ -155,4 +170,87 @@ textarea {
   padding: var(--spacing-xs);
   // border-color should be added in apps for blur/focus
   border: 1px solid;
+
+  &:not([disabled]) {
+    resize: vertical;
+  }
+
+  &[disabled] {
+    resize: none;
+  }
+}
+
+
+
+@media print {
+  // Intelligent print styles
+  pre,
+  blockquote {
+    border: 1px solid #999 !important;
+    page-break-inside: avoid !important;
+  }
+
+  tr,
+  img {
+    page-break-inside: avoid !important;
+  }
+
+  img {
+    max-width: 100% !important;
+  }
+
+  @page {
+    margin: 0.5cm !important;
+  }
+
+  p,
+  h2,
+  h3 {
+    orphans: 3 !important;
+    widows: 3 !important;
+  }
+
+  h2,
+  h3 {
+    page-break-after: avoid !important;
+  }
+
+  thead {
+    display: table-header-group !important;
+  }
+
+  // Faster, more stable printing
+  * {
+    background: transparent !important;
+    color: #000 !important;
+    filter: none !important;
+    text-shadow: none !important;
+  }
+
+  p {
+    a {
+      &[href]::after { // Show hypertext data for links and abbreviations
+        content: " (" attr(href) ")" !important;
+      }
+
+      &[href^="javascript:"],
+      &[href^="#"] {
+        &::after {
+          content: "" !important;
+        }
+      }
+    }
+
+    abbr {
+      &[title]::after {
+        content: " (" attr(title) ")" !important;
+      }
+    }
+
+    a,
+    abbr {
+      text-decoration: underline !important;
+      word-wrap: break-word !important;
+    }
+  }
 }