From 14f035304fd195fd6e472c03165c8d60414e8fdd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=83=9D=E3=83=BC=E3=83=AB=20=E3=82=A6=E3=82=A7=E3=83=83?= =?UTF-8?q?=E3=83=96?= Date: Mon, 3 Dec 2018 15:05:48 -0600 Subject: [PATCH] Added styling to mixins and updated README --- README.md | 28 +++++++++- dist/index.css | 1 + dist/index.css.map | 1 + index.js | 20 ------- package.json | 9 ++- sass/{style.scss => index.scss} | 0 sass/init/_mixins.scss | 58 +++++++++++++++++++ sass/init/_reset.scss | 98 +++++++++++++++++++++++++++++++++ 8 files changed, 187 insertions(+), 28 deletions(-) create mode 100644 dist/index.css create mode 100644 dist/index.css.map delete mode 100644 index.js rename sass/{style.scss => index.scss} (100%) diff --git a/README.md b/README.md index 33f2057..698de32 100644 --- a/README.md +++ b/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. diff --git a/dist/index.css b/dist/index.css new file mode 100644 index 0000000..d32167c --- /dev/null +++ b/dist/index.css @@ -0,0 +1 @@ +:root{--spacing-xxs:.2rem;--spacing-xs:.4rem;--spacing-s:.8rem;--spacing-m:1.6rem;--spacing-l:2.4rem;--spacing-xl:3.2rem;--spacing-xxl:6.4rem;--aspect-ratio-bluray:41.6666666667%;--aspect-ratio-panavision:36.3636363636%;--aspect-ratio-sd:75%;--aspect-ratio-standard:56.25%}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}[readonly]{cursor:not-allowed}[type=button],[type=submit]{cursor:pointer}a,area,button,[role=button],input,label,select,summary,textarea{touch-action:manipulation}button,input,select,textarea{background-color:transparent;font-family:inherit;font-size:inherit;font-weight:inherit;-moz-appearance:none;-webkit-appearance:none}button:disabled,input:disabled,select:disabled,textarea:disabled{cursor:default;pointer-events:none}h1,h2,h3,h4,h5,h6{font-weight:normal}ol,ul{list-style-position:inside}ol>li,ul>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}button:not(:disabled){cursor:pointer}button:disabled{opacity:.3}input{background-color:transparent;color:inherit}input::placeholder{color:inherit;opacity:.3}input:not(:disabled){color:inherit}input:not([type=checkbox]),input:not([type=file]),input:not([type=radio]),input:not([type=select]){cursor:text}input[type=checkbox]:not(:disabled),input[type=file]:not(:disabled),input[type=radio]:not(:disabled),input[type=select]:not(:disabled){cursor:pointer}input::-webkit-search-cancel-button{-webkit-appearance:none}textarea{width:100%;padding:var(--spacing-xs);border:1px solid}textarea:not([disabled]){resize:vertical}textarea[disabled]{resize:none}@media print{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:.5cm !important}p,h2,h3{orphans:3 !important;widows:3 !important}h2,h3{page-break-after:avoid !important}thead{display:table-header-group !important}*{background:transparent !important;color:#000 !important;filter:none !important;text-shadow:none !important}p a[href]::after{content:" (" attr(href) ")" !important}p a[href^="javascript:"]::after,p a[href^="#"]::after{content:"" !important}p abbr[title]::after{content:" (" attr(title) ")" !important}p a,p abbr{text-decoration:underline !important;word-wrap:break-word !important}}@keyframes loading-animation{0%{background-position:-500px 0}100%{background-position:500px 0}}@keyframes pulse{0%{opacity:1}50%{opacity:.7}100%{opacity:1}}.badge{font-weight:600;vertical-align:top;white-space:nowrap}.badge:not(.badge--large){border-radius:.2rem;display:inline-block;font-size:.8rem;letter-spacing:.05rem;line-height:2;padding-right:var(--spacing-xs);padding-left:var(--spacing-xs)}.badge--cost:not(.badge--large){background-color:#ffe685}[data-mode=dark] .badge--cost:not(.badge--large){background-color:#ffe066;color:#212529}.badge--free{background-color:#5caef3}[data-mode=dark] .badge--free{background-color:#339af0;color:#212529}.badge--large{font-size:5rem;line-height:1}.badge--nsfw{background-color:#e192f5}[data-mode=dark] .badge--nsfw{background-color:#da77f2;color:#212529}.button{fill:currentColor;position:relative}.button--alt:hover{text-decoration:underline}.button--constrict{max-width:20vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.button--disabled{opacity:.3}.button--icon{width:5rem;height:5rem;background-repeat:no-repeat;background-size:50%;border-radius:50%;color:#fff;transition:background-color .2s}.button--icon:not(:hover){background-color:rgba(33,37,41,.7)}.button--icon:hover{background-color:#51cf66}.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--inverse{padding:var(--spacing-xs --spacing-s);border:1px solid #e2e5e9;border-radius:1rem;color:inherit;transition:background-color .2s}[data-mode=dark] .button--inverse{border-color:rgba(255,255,255,.1)}.button--inverse:not(:hover){background-color:transparent}.button--inverse:hover{background-color:#e2e5e9}[data-mode=dark] .button--inverse:hover{background-color:rgba(255,255,255,.1)}.button--link{transition:color .2s}.button--link:not(.button--link--disabled):not(:hover){color:#2f9176}[data-mode=dark] .button--link:not(.button--link--disabled):not(:hover){color:#38d9a9}.button--link:not(.button--link--disabled):hover{color:#38d9a9}[data-mode=dark] .button--link:not(.button--link--disabled):hover{color:#33b58f}.button--primary{padding:var(--spacing-xs --spacing-s);align-self:center;border-radius:1rem;color:#fff;transition:background-color .2s}.button--primary:not(:hover){background-color:#2f9176}.button--primary:hover{background-color:#38d9a9}[data-mode=dark] .button--primary:hover{background-color:#33b58f}.button--uppercase{text-transform:uppercase}.media{position:relative}.media--large{display:flex;font-size:1.5rem}.media--large .media__info{width:calc(100% - 20rem);margin-left:var(--spacing-s)}.media--large .media__thumb{width:40rem;margin-bottom:var(--spacing-s)}.media--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, #ced4da 10%, transparent 80%, #ced4da 100%);background-repeat:repeat;background-size:500px}[data-mode=dark] .media--placeholder>*{background-image:linear-gradient(to right, rgba(255, 255, 255, 0.1) 10%, transparent 80%, rgba(255, 255, 255, 0.1) 100%)}.media--placeholder .media__channel,.media--placeholder .media__date,.media--placeholder .media__title{min-height:1rem}.media--placeholder .media__channel{width:70%}.media--placeholder .media__date{width:30%}.media--placeholder .media__title{width:100%}.media--small{display:flex;justify-content:space-between}.media--small:not(:last-of-type){margin-bottom:var(--spacing-s)}.media--small .media__info{width:50%;padding-left:var(--spacing-s)}.media--small .media__properties{bottom:-1.5rem;left:calc(-100% - 1.5rem);position:absolute}.media--small .media__thumb{width:50%}.media--small .media__title{height:3rem;line-height:1.33}.media--wide{display:flex}.media--wide:not(:last-of-type){margin-bottom:var(--spacing-m)}.media--wide .media__info{width:calc(100% - 20rem);margin-left:var(--spacing-s)}.media--wide .media__properties{bottom:-5.5rem;left:-20rem;position:absolute}.media--wide .media__text{padding-top:var(--spacing-s)}.media--wide .media__thumb{width:20rem}.media--wide .media__title{font-size:1.5rem}.media__actions{display:flex;padding-top:var(--spacing-m);padding-bottom:var(--spacing-m)}.media__info{word-wrap:break-word}[data-mode=dark] .media__info{border-color:rgba(137,142,147,.2)}.media__message{padding:var(--spacing-s);font-size:.9rem;white-space:normal}.media__properties{vertical-align:top}.media__properties>*:not(:last-child){margin-right:var(--spacing-xs)}.media__properties:not(:empty){display:inline-block}.media__subtitle{position:relative}.media__text{font-size:2.5rem}[data-mode=dark] .media__text{color:#fff}.media__thumb::before,.media__thumb::after{content:""}.media__thumb::before{float:left;padding-top:var(--aspect-ratio-standard)}.media__thumb::after{clear:both;display:block}.media__title{font-weight:600;white-space:normal}/*# sourceMappingURL=index.css.map */ diff --git a/dist/index.css.map b/dist/index.css.map new file mode 100644 index 0000000..80526fb --- /dev/null +++ b/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"} \ No newline at end of file diff --git a/index.js b/index.js deleted file mode 100644 index 7ac0cfa..0000000 --- a/index.js +++ /dev/null @@ -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" -// } diff --git a/package.json b/package.json index 3825bf8..f29c609 100644 --- a/package.json +++ b/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", diff --git a/sass/style.scss b/sass/index.scss similarity index 100% rename from sass/style.scss rename to sass/index.scss diff --git a/sass/init/_mixins.scss b/sass/init/_mixins.scss index 52ec026..f4f62da 100644 --- a/sass/init/_mixins.scss +++ b/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%; + } +} diff --git a/sass/init/_reset.scss b/sass/init/_reset.scss index 888075f..ba586bb 100644 --- a/sass/init/_reset.scss +++ b/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; + } + } }