From a80d7a8fb18145598058b8d08eac1dcecd0f0810 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: Tue, 27 Nov 2018 17:29:27 -0600 Subject: [PATCH] Added badge styles and started on media --- .gitignore | 2 ++ package.json | 14 +++++++-- sass/badge/_index.scss | 47 ++++++++++++++++++++++++++++ sass/init/_animation.scss | 25 +++++++++++++++ sass/init/_mixins.scss | 59 ++++++++++++++++++++++++++++++++++ sass/media/_index.scss | 66 +++++++++++++++++++++++++++++++++++++++ sass/style.scss | 3 ++ 7 files changed, 213 insertions(+), 3 deletions(-) create mode 100644 sass/badge/_index.scss create mode 100644 sass/init/_animation.scss create mode 100644 sass/media/_index.scss diff --git a/.gitignore b/.gitignore index fada4a8..c687a8e 100644 --- a/.gitignore +++ b/.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 diff --git a/package.json b/package.json index fb549ca..54092c2 100644 --- a/package.json +++ b/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" } diff --git a/sass/badge/_index.scss b/sass/badge/_index.scss new file mode 100644 index 0000000..addcabb --- /dev/null +++ b/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; + } + } +} diff --git a/sass/init/_animation.scss b/sass/init/_animation.scss new file mode 100644 index 0000000..718ea30 --- /dev/null +++ b/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; + } +} diff --git a/sass/init/_mixins.scss b/sass/init/_mixins.scss index 5635b93..5d892f8 100644 --- a/sass/init/_mixins.scss +++ b/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; + } +} diff --git a/sass/media/_index.scss b/sass/media/_index.scss new file mode 100644 index 0000000..a28c7e0 --- /dev/null +++ b/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 { + } +} diff --git a/sass/style.scss b/sass/style.scss index 0c8af20..795ed23 100644 --- a/sass/style.scss +++ b/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";