Added badge styles and started on media

This commit is contained in:
ポール ウェッブ 2018-11-27 17:29:27 -06:00
parent 333518f040
commit a80d7a8fb1
7 changed files with 213 additions and 3 deletions

2
.gitignore vendored
View file

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

View file

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

47
sass/badge/_index.scss Normal file
View file

@ -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;
}
}
}

25
sass/init/_animation.scss Normal file
View file

@ -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;
}
}

View file

@ -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 // Use CSS variables without upsetting Sass-Lint
// https://github.com/sasstools/sass-lint/issues/1161#issuecomment-390537190 // https://github.com/sasstools/sass-lint/issues/1161#issuecomment-390537190
@mixin root-prop($prop: null, $value: null) { @mixin root-prop($prop: null, $value: null) {
@ -5,3 +47,20 @@
#{$prop}: $value; #{$prop}: $value;
} }
} }
@mixin thumbnail {
&::before,
&::after {
content: "";
}
&::before {
float: left;
padding-top: var(--aspect-ratio-standard);
}
&::after {
clear: both;
display: block;
}
}

66
sass/media/_index.scss Normal file
View file

@ -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 {
}
}

View file

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