Fixes and added some media styles

This commit is contained in:
ポール ウェッブ 2018-11-28 17:36:23 -06:00
parent a80d7a8fb1
commit 85028b0651
10 changed files with 404 additions and 36 deletions

2
.gitignore vendored
View file

@ -5,6 +5,4 @@
.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

1
dist/style.css vendored Normal file

File diff suppressed because one or more lines are too long

1
dist/style.css.map vendored Normal file
View file

@ -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":"AAAA,MC8CI,cD7CgC,MC6ChC,aD5C+B,MC4C/B,YD3C8B,MC2C9B,YD1C8B,OC0C9B,YDzC8B,OCyC9B,aDxC+B,OCwC/B,cDvCgC,OCuChC,sBDpCwC,eCoCxC,0BDjC4C,eCiC5C,kBD9BoC,IC8BpC,wBD3B0C,OEnB9C,KACE,sBACA,kCAEA,kCACA,mCAGF,qBAGE,mBAEA,YACA,mBACA,UACA,iBAGF,gEAUE,0BAGF,6BAIE,oBACA,kBACA,oBAEA,iEACE,eACA,oBAIJ,kBAME,mBAGF,MAEE,2BAEA,YACE,2BAIJ,GACE,qBAIA,WACE,eAIJ,MACE,yBACA,iBAGF,GACE,UACA,WAGF,GACE,WACA,kBACA,kBAGF,GACE,UACA,WAGF,IACE,0BACA,4BACA,sBAGF,EACE,cACA,qBAGF,OACE,6BACA,cAEA,sBACE,eAGF,gBACE,WAIJ,MACE,6BACA,cAGA,mBACE,cACA,WAGF,qBACE,cAGF,mGAIE,YAGF,uIAIE,eAGF,oCACE,wBAIJ,SACE,WACA,0BAEA,iBC1JF,6BACE,GACE,6BAGF,KACE,6BAIJ,iBACE,GACE,UAGF,IACE,WAGF,KACE,WCtBJ,OACE,gBACA,mBACA,mBAEA,0BACE,oBACA,qBACA,gBACA,sBACA,cACA,gCACA,+BAGF,gCACE,iBCkNY,QDhNZ,iDACE,iBCgNU,QD/MV,MCdQ,QDkBZ,aACE,iBCoEU,QDlEV,8BACE,iBCkEQ,QDjER,MCvBQ,QD2BZ,cACE,eACA,cAGF,aACE,iBC+GW,QD7GX,8BACE,iBC6GS,QD5GT,MCrCQ,QCNd,QACE,kBACA,kBAGE,mBACE,0BAIJ,6BACqB,KLErB,gBACA,uBACA,mBKDA,kBACE,WAGF,cACE,uBAEA,4BACA,oBACA,kBACA,MDpBU,KCqBV,gCAEA,0BACE,mCAGF,oBACE,iBDyOS,QCtOX,2BACE,mTACA,8CAGF,2BACE,q1BACA,8CAIJ,iBACE,sCACA,yBACA,mBACA,cACA,gCAEA,kCACE,kCAGF,6BACE,6BAGF,uBACE,iBD3BQ,QC6BR,wCACE,sCAKN,cACE,qBAEA,uDACE,MDhBQ,QCkBR,wEACE,MDrBM,QCyBV,iDACE,MD1BQ,QC4BR,kEACE,MD5BM,QCiCZ,iBACE,sCACA,kBACA,mBACA,MD1FU,KC2FV,gCAEA,6BACE,iBDxCQ,QC2CV,uBACE,iBD9CQ,QCgDR,wCACE,iBDhDM,QCqDZ,mBACE,yBClGJ,OACE,kBAIA,cACE,aACA,iBAEA,2BACE,yBACA,6BAGF,4BACE,YACA,+BAKF,sBNZF,sBACA,6BACA,mCACA,iCACA,iCACA,6BACA,uFACA,yBACA,sBAEA,uCACE,yHMKA,uGAGE,gBAGF,oCACE,UAGF,iCACE,UAGF,kCACE,WAIJ,cACE,aACA,8BAEA,iCACE,+BAGF,2BACE,UACA,8BAGF,iCACE,yCACA,kBAGF,4BACE,UAGF,4BACE,YACA,iBAIJ,aACE,aAEA,gCACE,+BAGF,0BACE,yBACA,6BAGF,gCACE,2BACA,kBAGF,0BACE,6BAGF,2BACE,YAGF,2BACE,iBAQJ,gBACE,aACA,6BACA,gCASF,aACE,qBAEA,8BACE,kCAIJ,gBACE,yBACA,gBACA,mBAGF,mBACE,mBAEA,sCACE,+BAGF,+BACE,qBAOJ,iBACE,kBAGF,aACE,iBAEA,8BACE,MFpKQ,KJ+CZ,2CAEE,WAGF,sBACE,WACA,yCAGF,qBACE,WACA,cMiHF,cACE,gBACA","file":"style.css"}

View file

@ -14,7 +14,7 @@
"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.4.0" "updates": "^5.4.2"
}, },
"homepage": "https://github.com/lbryio/components#readme", "homepage": "https://github.com/lbryio/components#readme",
"husky": { "husky": {
@ -29,7 +29,6 @@
"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:*",

114
sass/button/_index.scss Normal file
View file

@ -0,0 +1,114 @@
.button {
fill: currentColor;
position: relative;
&--alt {
&:hover {
text-decoration: underline;
}
}
&--constrict {
@include constrict(20vw);
}
&--disabled {
opacity: 0.3;
}
&--icon {
width: 5rem; height: 5rem;
background-repeat: no-repeat;
background-size: 50%;
border-radius: 50%;
color: $lbry-white;
transition: background-color 0.2s;
&:not(:hover) {
background-color: rgba($lbry-black, 0.7);
}
&:hover {
background-color: $lbry-green-3;
}
&.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--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);
}
}
&--inverse {
padding: var(--spacing-xs --spacing-s); // 0.5rem 1rem;
border: 1px solid $lbry-gray-1;
border-radius: 1rem;
color: inherit;
transition: background-color 0.2s;
[data-mode="dark"] & {
border-color: rgba($lbry-white, 0.1);
}
&:not(:hover) {
background-color: transparent;
}
&:hover {
background-color: $lbry-gray-1;
[data-mode="dark"] & {
background-color: rgba($lbry-white, 0.1);
}
}
}
&--link {
transition: color 0.2s;
&:not(&--disabled):not(:hover) {
color: $lbry-teal-5;
[data-mode="dark"] & {
color: $lbry-teal-3;
}
}
&:not(&--disabled):hover {
color: $lbry-teal-3;
[data-mode="dark"] & {
color: $lbry-teal-4;
}
}
}
&--primary {
padding: var(--spacing-xs --spacing-s); // 0.5rem 1rem;
align-self: center; // fixes buttons next to tall elements inside one with `display: flex`
border-radius: 1rem;
color: $lbry-white;
transition: background-color 0.2s;
&:not(:hover) {
background-color: $lbry-teal-5;
}
&:hover {
background-color: $lbry-teal-3;
[data-mode="dark"] & {
background-color: $lbry-teal-4;
}
}
}
&--uppercase {
text-transform: uppercase;
}
}

View file

@ -8,7 +8,7 @@
// Omit value for basic text truncation // Omit value for basic text truncation
@mixin constrict($value: null) { @mixin constrict($value: null) {
@if ($value) { @if ($value) {
max-width: $value; // 20vw max-width: $value;
} }
overflow: hidden; overflow: hidden;

158
sass/init/_reset.scss Normal file
View file

@ -0,0 +1,158 @@
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;
}
a,
area,
button,
[role="button"],
input,
label,
select,
summary,
textarea {
// Remove touch delay on supported devices
touch-action: manipulation;
}
button,
input,
select,
textarea {
font-family: inherit;
font-size: inherit;
font-weight: inherit;
&:disabled {
cursor: default;
pointer-events: none;
}
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: normal;
}
ol,
ul {
list-style-position: inside;
> 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;
&:not(:disabled) {
cursor: pointer;
}
&:disabled {
opacity: 0.3;
}
}
input {
background-color: transparent;
color: inherit;
// line-height: 1; // this can differ across apps
&::placeholder {
color: inherit;
opacity: 0.3;
}
&:not(:disabled) {
color: inherit;
}
&:not([type="checkbox"]),
&:not([type="file"]),
&:not([type="radio"]),
&:not([type="select"]) {
cursor: text;
}
&[type="checkbox"]:not(:disabled),
&[type="file"]:not(:disabled),
&[type="radio"]:not(:disabled),
&[type="select"]:not(:disabled) {
cursor: pointer;
}
&::-webkit-search-cancel-button {
-webkit-appearance: none;
}
}
textarea {
width: 100%;
padding: var(--spacing-xs);
// border-color should be added in apps for blur/focus
border: 1px solid;
}

View file

@ -18,24 +18,4 @@
// 16:9 // 16:9
@include root-prop(--aspect-ratio-standard, 56.25%); @include root-prop(--aspect-ratio-standard, 56.25%);
// --spacing-xxs: 0.2rem;
// --spacing-xs: 0.4rem;
// --spacing-s: 0.8rem;
// --spacing-m: 1.6rem;
// --spacing-l: 2.4rem;
// --spacing-xl: 3.2rem;
// --spacing-xxl: 6.4rem;
// // 12:5
// --aspect-ratio-bluray: 41.6666666667%;
// // 11:4
// --aspect-ratio-panavision: 36.3636363636%;
// // 4:3
// --aspect-ratio-sd: 75%;
// // 16:9
// --aspect-ratio-standard: 56.25%;
} }

View file

@ -1,30 +1,116 @@
// sass-lint:disable no-empty-rulesets
// C O N T A I N E R S // C O N T A I N E R S
.media-grid { .media-grid { // sass-lint:disable-line no-empty-rulesets
} }
.media-list { .media-list { // sass-lint:disable-line no-empty-rulesets
} }
.media-row { .media-row { // sass-lint:disable-line no-empty-rulesets
} }
.media { .media {
position: relative;
// M O D I F I E R S // M O D I F I E R S
&--large { &--large {
display: flex;
font-size: 1.5rem;
.media__info {
width: calc(100% - 20rem);
margin-left: var(--spacing-s); // 1rem;
}
.media__thumb {
width: 40rem;
margin-bottom: var(--spacing-s); // 1rem;
}
} }
&--placeholder { &--placeholder {
> * {
@include placeholder;
}
.media__channel,
.media__date,
.media__title {
min-height: 1rem;
}
.media__channel {
width: 70%;
}
.media__date {
width: 30%;
}
.media__title {
width: 100%;
}
} }
&--small { &--small {
display: flex;
justify-content: space-between;
&:not(:last-of-type) {
margin-bottom: var(--spacing-s); // 1rem;
}
.media__info {
width: 50%;
padding-left: var(--spacing-s); // 1rem;
}
.media__properties {
bottom: -1.5rem; left: calc(-100% - 1.5rem);
position: absolute;
}
.media__thumb {
width: 50%;
}
.media__title {
height: 3rem;
line-height: 1.33;
}
}
&--wide { // .media--search-result
display: flex;
&:not(:last-of-type) {
margin-bottom: var(--spacing-m); // 1.5rem;
}
.media__info {
width: calc(100% - 20rem);
margin-left: var(--spacing-s); // 1rem;
}
.media__properties {
bottom: -5.5rem; left: -20rem;
position: absolute;
}
.media__text { // .media__subtext
padding-top: var(--spacing-s); // 1rem;
}
.media__thumb {
width: 20rem;
}
.media__title {
font-size: 1.5rem;
}
} }
@ -32,35 +118,64 @@
// C H I L D R E N // C H I L D R E N
&__actions { &__actions {
display: flex;
padding-top: var(--spacing-m); // 2rem;
padding-bottom: var(--spacing-m); // 2rem;
} }
&__content { &__content { // sass-lint:disable-line no-empty-rulesets
} }
&__date { &__date { // sass-lint:disable-line no-empty-rulesets
} }
&__info { &__info {
word-wrap: break-word;
[data-mode="dark"] & {
border-color: rgba($lbry-gray-5, 0.2);
}
} }
&__message { &__message {
padding: var(--spacing-s); // 1rem;
font-size: 0.9rem;
white-space: normal;
} }
&__properties { &__properties {
vertical-align: top;
> *:not(:last-child) {
margin-right: var(--spacing-xs); // 0.5rem;
}
&:not(:empty) {
display: inline-block;
}
} }
&__property { &__property { // sass-lint:disable-line no-empty-rulesets
} }
&__subtitle { &__subtitle {
position: relative;
} }
&__text { &__text {
font-size: 2.5rem;
[data-mode="dark"] & {
color: $lbry-white;
}
} }
&__thumb { &__thumb {
@include thumbnail;
} }
&__title { &__title {
font-weight: 600;
white-space: normal;
} }
} }

View file

@ -1,8 +1,10 @@
@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 "init/reset";
@import "init/animation";
@import "badge"; @import "badge";
@import "button";
@import "media"; @import "media";