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?= <netopwibby@thenetwork.email>
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";