mirror of
https://github.com/LBRYFoundation/lbry.com.git
synced 2025-08-23 17:47:26 +00:00
remove submodule link on web/components/
This commit is contained in:
Sean Yesmunt
Jeremy Kauffman
parent
c6f2737944
commit
3b86f58a23
23 changed files with 2279 additions and 5 deletions
5
.gitmodules
vendored
5
.gitmodules
vendored
|
|
@ -1,6 +1,3 @@
|
|||
[submodule "web/scss/color"]
|
||||
path = web/scss/color
|
||||
url = https://github.com/lbryio/color
|
||||
[submodule "web/components"]
|
||||
path = web/components
|
||||
url = https://github.com/lbryio/components
|
||||
url = https://github.com/lbryio/color
|
||||
|
|
@ -1 +0,0 @@
|
|||
Subproject commit 43666f869e69d10a5810136755062aba872f615a
|
||||
9
web/components/.editorconfig
Normal file
9
web/components/.editorconfig
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
end_of_line = lf
|
||||
indent_size = 2
|
||||
indent_style = space
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
8
web/components/.gitignore
vendored
Normal file
8
web/components/.gitignore
vendored
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
# Files
|
||||
.DS_Store
|
||||
.env
|
||||
*.log
|
||||
.sass-cache
|
||||
|
||||
# Directories
|
||||
node_modules
|
||||
1
web/components/.npmrc
Normal file
1
web/components/.npmrc
Normal file
|
|
@ -0,0 +1 @@
|
|||
package-lock=false
|
||||
14
web/components/LICENSE
Normal file
14
web/components/LICENSE
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
BSD 3-Clause License
|
||||
|
||||
Copyright © LBRY Inc.
|
||||
All rights reserved.
|
||||
|
||||
Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
|
||||
|
||||
* Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
|
||||
|
||||
* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
|
||||
|
||||
* Neither the name of the copyright holder nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
|
||||
|
||||
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
||||
64
web/components/README.md
Normal file
64
web/components/README.md
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
# @lbry/components
|
||||
> Styling for shared components across LBRY properties
|
||||
|
||||
|
||||
|
||||
### Installation
|
||||
|
||||
```bash
|
||||
$ 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.
|
||||
|
||||
If you are using `@lbry/components`, you can safely remove [@lbry/color](https://github.com/lbryio/color) if you've already included it separately (this module includes it by default).
|
||||
|
||||
|
||||
|
||||
### Demo
|
||||
|
||||
[https://lbryio.github.io/components](https://lbryio.github.io/components)
|
||||
|
||||
|
||||
|
||||
### Usage
|
||||
|
||||
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.
|
||||
|
||||
|
||||
|
||||
### Note
|
||||
|
||||
To use with Webpack, you have to make use of the tilde character when referencing a file inside your `node_modules` folder. Like so:
|
||||
|
||||
```scss
|
||||
@import "~@lbry/components/sass/";
|
||||
```
|
||||
|
||||
|
||||
|
||||
### License
|
||||
|
||||
[BSD 3-Clause](LICENSE) Copyright © LBRY Inc.
|
||||
1
web/components/dist/index.css
vendored
Normal file
1
web/components/dist/index.css
vendored
Normal file
File diff suppressed because one or more lines are too long
1
web/components/dist/index.css.map
vendored
Normal file
1
web/components/dist/index.css.map
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"sourceRoot":"","sources":["../sass/init/_variables.scss","../sass/init/_mixins.scss","../sass/init/_color.scss","../sass/init/_reset.scss","../sass/init/_animation.scss","../sass/badge/_index.scss","../sass/button/_index.scss","../sass/form/_index.scss","../sass/media/_index.scss","../sass/navigation/_index.scss","../sass/table/_index.scss"],"names":[],"mappings":"AAAA,MCmJI,cDjJgC,MCiJhC,aDhJ+B,MCgJ/B,YD/I8B,MC+I9B,YD9I8B,OC8I9B,YD7I8B,OC6I9B,aD5I+B,OC4I/B,cD3IgC,OC2IhC,sBDxIwC,eCwIxC,0BDvI4C,eCuI5C,kBDtIoC,ICsIpC,wBDrI0C,OCqI1C,aC7IS,QD6IT,aC/IS,KD+IT,cChHU,QDgHV,cC/GU,QD+GV,cC9GU,QD8GV,cC7GU,QD6GV,cC5GU,QD4GV,cC7FU,QD6FV,cC5FU,QD4FV,cC3FU,QD2FV,cC1FU,QD0FV,cCzFU,QDyFV,cC1EU,QD0EV,cCzEU,QDyEV,cCxEU,QDwEV,cCvEU,QDuEV,cCtEU,QDsEV,cCvDU,QDuDV,cCtDU,QDsDV,cCrDU,QDqDV,cCpDU,QDoDV,cCnDU,QDmDV,gBCpCY,QDoCZ,gBCnCY,QDmCZ,gBClCY,QDkCZ,gBCjCY,QDiCZ,gBChCY,QDgCZ,gBCjBY,QDiBZ,gBChBY,QDgBZ,gBCfY,QDeZ,gBCdY,QDcZ,gBCbY,QDaZ,eCEW,QDFX,eCGW,QDHX,eCIW,QDJX,eCKW,QDLX,eCMW,QDNX,cCqBU,QDrBV,cCsBU,QDtBV,cCuBU,QDvBV,cCwBU,QDxBV,cCyBU,QDzBV,aCwCS,QDxCT,aCyCS,QDzCT,aC0CS,QD1CT,aC2CS,QD3CT,aC4CS,QD5CT,gBC2DY,QD3DZ,gBC4DY,QD5DZ,gBC6DY,QD7DZ,gBC8DY,QD9DZ,gBC+DY,QD/DZ,gBC8EY,QD9EZ,gBC+EY,QD/EZ,gBCgFY,QDhFZ,gBCiFY,QDjFZ,gBCkFY,QDlFZ,cCiGU,QDjGV,cCkGU,QDlGV,cCmGU,QDnGV,cCoGU,QDpGV,cCqGU,QDrGV,eCoHW,QDpHX,eCqHW,QDrHX,eCsHW,QDtHX,eCuHW,QDvHX,eCwHW,QDxHX,YDhD8B,YCgD9B,uCEnJJ,KACE,sBACA,eACA,kCAEA,kCACA,mCAGF,qBAGE,mBAEA,YACA,mBACA,UAGF,WACE,oBACA,YAEA,iBACE,yBACA,qBACA,cACA,aAIJ,WACE,mBAGF,uGAQE,eAGF,gEAUE,0BAGF,6BAIE,6BACA,gBACA,oBACA,kBACA,oBAEA,qBACA,wBAEA,iEAEE,gCACA,yBACA,eAIJ,kBAME,mBAGF,MAEE,2BAEA,YACE,2BAIJ,GACE,qBAGF,MACE,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,GACE,sBACA,oCAGF,MACE,6BACA,cAEA,mBACE,cACA,WAOF,oCACE,wBAIJ,OACE,aAGF,SACE,WACA,8BACA,yBAEA,iBAEA,yBACE,gBAMJ,aAGE,eAEE,+CACA,mCAGF,OAEE,mCAGF,IACE,0BAGF,MACE,uBAGF,QAGE,qBACA,oBAGF,MAEE,kCAGF,MACE,sCAIF,EACE,wCACA,iCACA,mCACA,uBACA,4BAKE,iBACE,uCAKA,sDACE,sBAMJ,qBACE,wCAIJ,WAEE,qCACA,iCC/PN,6BACE,GACE,6BAGF,KACE,6BAIJ,iBACE,GACE,UAGF,IACE,WAGF,KACE,WCtBJ,OACE,oBACA,qBACA,gBACA,gBACA,sBACA,cACA,gCACA,+BACA,mBACA,mBAGF,aACE,sCACA,wBAEA,8BACE,sCAIJ,aACE,oCAEA,8BACE,oCACA,wBAIJ,cACE,eACA,cAGF,aACE,qCAEA,8BACE,qCACA,wBAIJ,gBACE,oCACA,wBAGF,cACE,mCACA,wBCpDF,QACE,kBACA,kBACA,mBAIA,mBACE,0BAIJ,mBLsBI,UKrBiB,KLwBnB,gBACA,uBACA,mBKvBF,kBACE,WAEA,kCACE,oBAEA,wCACE,yBACA,cACA,aAKN,cACE,WACA,YACA,mCACA,4BACA,oBACA,kBACA,wBACA,gCAGA,oBACE,qCAGF,2BACE,mTACA,8CAGF,2BACE,q1BACA,8CAIJ,iBACE,2CACA,6BACA,oCACA,mBACA,cACA,gCAEA,kCACE,kCAGF,uBACE,oCAEA,wCACE,sCAKN,cACE,yBACA,qBACA,qBAEA,+BACE,yBAGF,oBACE,yBAEA,qCACE,yBAKN,iBACE,2CACA,kBACA,oCACA,mBACA,wBACA,gCAEA,uBACE,oCAEA,wCACE,oCAKN,mBACE,yBC/GA,6CACE,+BAIJ,aAEE,wBACA,iBAGF,uEAGE,eAGF,uDAIE,+BACA,8BACA,sBAGF,cACE,wBACA,+BACA,8BACA,mBAEA,0BACE,mCACA,+BAGF,oBACE,oCACA,gCAIJ,OACE,gcACA,+BACA,4BACA,qBACA,+BACA,8BAEA,wBACE,gcAIJ,mBACE,wCACA,+BACA,kBAGF,+BACE,aACA,mBACA,8BAGF,mCACE,aACA,sBACA,+BAEA,yDACE,WAGF,oIAEE,UAGF,+CACE,yBACA,qBACA,kBACA,iCACA,yBAGF,6RAKE,+BAEA,yVACE,gCAIJ,gGAEE,WAIJ,OACE,2CACA,oCACA,+BACA,oBAGF,2BACE,aAEA,wGAEE,OAEA,wJACE,mCACA,+BACA,sCACA,oCAGF,gIACE,oCACA,+BACA,uCACA,qCAKN,mCN2CE,gBACA,mBACA,iBACA,oBACA,2BACA,8BACA,+BACA,kBAGE,2DACE,yBAIJ,+CACE,WACA,8BACA,kBACA,qBACA,UM3DA,gKAEE,gCAKF,6EACE,iBACA,kBAGE,4UAEE,UACA,kBAKF,yGACE,yBAOV,iCNoCE,+CACA,aAEA,iBACA,cACA,kBACA,sBAEA,iDACE,uBACA,aAEA,WACA,cACA,kBM/CF,iDACE,8NACA,gCACA,4BACA,qBACA,mBAIJ,6BNDE,gBACA,mBACA,iBACA,oBACA,2BACA,8BACA,+BACA,kBAGE,qDACE,yBAIJ,yCACE,WACA,8BACA,kBACA,qBACA,UMfA,wIAEE,gCAKF,iEACE,iBACA,kBAGE,wSAEE,6BAKF,6FACE,yBAGF,gRAEE,oCAOV,2BNZE,+CACA,aAEA,iBACA,cACA,kBACA,sBMQA,kBNNA,2CACE,uBACA,aAEA,WACA,cACA,kBMEF,2CACE,kBACA,qBACA,gCCjOJ,YACE,aAQA,mBACE,WACA,eACA,mBAYJ,OACE,kBAOF,cACE,aAEA,2BACE,yBACA,6BAGF,4BACE,YACA,+BAKF,sBP0EA,sBACA,6BACA,mCACA,iCACA,iCACA,6BACA,6GACA,yBACA,sBAEA,uCACE,yHOjFF,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,mBAGF,mBACE,mBAEA,sCACE,+BAGF,+BACE,qBAOJ,iBACE,kBAIA,8BACE,wBPdF,2CAEE,WAGF,sBACE,WACA,yCAGF,qBACE,WACA,cOUJ,cACE,gBACA,mBC9LF,kBACE,uBAEA,oBACA,OACA,kBACA,uBACA,kBACA,WAGF,yBACE,iBACA,oBAEA,oCACA,qCACA,mCACA,kBAGF,eACE,mBACA,kBAGE,4DACE,6BAGF,qHAEE,aAIJ,2CAEE,UAEA,mFACE,oCAKN,aACE,YACA,mBACA,eACA,aACA,cACA,kBACA,UAEA,oBACE,sBACA,mBAEA,WACA,kBACA,UAIJ,YACE,WACA,gBAEA,mCACA,wCACA,iBACA,oBACA,kBAEA,mBACE,sCACA,gBAEA,mCACA,WACA,WACA,oBACA,kBACA,WAIJ,gBACE,aACA,eACA,kBAGF,aACE,yBACA,iBACA,mBAEA,yBACE,yBAGF,mBACE,gCACA,8BAEA,qBACE,yBAIJ,+BACE,UAGF,yBACE,WAGF,kBACE,aACA,mBACA,sBC1HJ,MACE,WACA,mCACA,kBAEA,YACE,eACA,cACA,kBAEA,eACE,kBACA,UAIJ,YACE,iBAKE,+BACE,2CAKN,kBAEE,mBAGF,SACE,0CACA,qBACA,gBACA,yBAGF,QACE","file":"index.css"}
|
||||
401
web/components/docs/index.html
Normal file
401
web/components/docs/index.html
Normal file
|
|
@ -0,0 +1,401 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>Components by LBRY</title>
|
||||
|
||||
<link rel="stylesheet" href="https://rsms.me/inter/inter.css"/>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/tonsky/FiraCode@master/distr/fira_code.css"/>
|
||||
<!-- <link rel="stylesheet" href="../dist/index.css"/> -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lbryio/components@master/dist/index.css"/>
|
||||
|
||||
<style>
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-family: var(--font-sans);
|
||||
padding-top: var(--spacing-l);
|
||||
}
|
||||
|
||||
header {
|
||||
border-bottom: 1px solid var(--lbry-gray-1);
|
||||
margin-bottom: var(--spacing-l);
|
||||
}
|
||||
|
||||
drawer-navigation,
|
||||
drawer-wrap {
|
||||
padding-right: var(--spacing-l);
|
||||
padding-left: var(--spacing-l);
|
||||
}
|
||||
|
||||
drawer-navigation {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
main {
|
||||
flex: 1;
|
||||
min-height: 100vh;
|
||||
padding-right: var(--spacing-l);
|
||||
padding-left: var(--spacing-l);
|
||||
}
|
||||
|
||||
section {
|
||||
border-bottom: 1px solid var(--lbry-gray-1);
|
||||
margin-bottom: var(--spacing-l);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
font-weight: bolder;
|
||||
padding-right: var(--spacing-l);
|
||||
padding-left: var(--spacing-l);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2rem;
|
||||
padding-right: var(--spacing-l);
|
||||
padding-left: var(--spacing-l);
|
||||
padding-bottom: var(--spacing-s);
|
||||
}
|
||||
|
||||
h3 {
|
||||
background-color: var(--lbry-black);
|
||||
color: var(--lbry-white);
|
||||
display: inline-block;
|
||||
font-size: 1.5rem;
|
||||
font-weight: bolder;
|
||||
margin-bottom: var(--spacing-s);
|
||||
padding: 0.25rem 1rem;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.25rem;
|
||||
margin-bottom: var(--spacing-s);
|
||||
}
|
||||
|
||||
hr {
|
||||
margin-bottom: var(--spacing-s);
|
||||
}
|
||||
|
||||
footer {
|
||||
border-top: 1px solid var(--lbry-gray-1);
|
||||
color: var(--lbry-gray-5);
|
||||
padding: var(--spacing-l);
|
||||
}
|
||||
|
||||
.social-links a {
|
||||
width: 1.25rem; height: 1.25rem;
|
||||
|
||||
background-color: var(--lbry-black);
|
||||
color: transparent;
|
||||
display: inline-block;
|
||||
font-size: 0;
|
||||
border-radius: 50%;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.social-links a:not(:last-of-type) {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<h1>@lbry/components</h1>
|
||||
<h2>Styling for shared components across LBRY properties</h2>
|
||||
|
||||
<drawer-navigation>
|
||||
<drawer-section>
|
||||
<drawer-title>
|
||||
Link I
|
||||
<drawer-navigation-helper/>
|
||||
</drawer-title>
|
||||
|
||||
<drawer-wrap>
|
||||
<drawer-children>
|
||||
<drawer-child>
|
||||
<a href="">
|
||||
<strong>Use LBRY</strong>
|
||||
<span>Get the most out of LBRY</span>
|
||||
</a>
|
||||
</drawer-child>
|
||||
|
||||
<drawer-child>
|
||||
<a href="">
|
||||
<strong>FAQ</strong>
|
||||
<span>Got questions? We might have answers!</span>
|
||||
</a>
|
||||
</drawer-child>
|
||||
|
||||
<drawer-child>
|
||||
<a href="">
|
||||
<strong>Blockchain Explorer</strong>
|
||||
<span>The history of LBRY’s blockchain</span>
|
||||
</a>
|
||||
</drawer-child>
|
||||
|
||||
<drawer-child class="social-links">
|
||||
<div>
|
||||
<strong>Social</strong>
|
||||
<span>
|
||||
<a href="">Network 1</a>
|
||||
<a href="">Network 2</a>
|
||||
<a href="">Network 3</a>
|
||||
<a href="">Network 4</a>
|
||||
<a href="">Network 5</a>
|
||||
</span>
|
||||
</div>
|
||||
</drawer-child>
|
||||
|
||||
<drawer-child>
|
||||
<a href="">
|
||||
<strong>Tour</strong>
|
||||
<span>Do you want to learn how to publish content to the LBRY network?</span>
|
||||
</a>
|
||||
</drawer-child>
|
||||
|
||||
<drawer-child>
|
||||
<a href="">
|
||||
<strong>News</strong>
|
||||
<span>The latest happenings with the LBRY team and community</span>
|
||||
</a>
|
||||
</drawer-child>
|
||||
|
||||
<drawer-child>
|
||||
<a href="">
|
||||
<strong>Chat</strong>
|
||||
<span>Chat with other LBRY users and LBRY team members</span>
|
||||
</a>
|
||||
</drawer-child>
|
||||
</drawer-children>
|
||||
</drawer-wrap>
|
||||
</drawer-section>
|
||||
|
||||
<drawer-section>
|
||||
<drawer-title>
|
||||
Link II
|
||||
<drawer-navigation-helper/>
|
||||
</drawer-title>
|
||||
|
||||
<drawer-wrap>
|
||||
<drawer-children>
|
||||
<drawer-child>
|
||||
<a href="">
|
||||
<strong>YouTube Partner Program</strong>
|
||||
<span>Bring all your content to LBRY with just a few clicks</span>
|
||||
</a>
|
||||
</drawer-child>
|
||||
|
||||
<drawer-child>
|
||||
<a href="">
|
||||
<strong>Creator FAQ</strong>
|
||||
<span>Like the FAQ, but for Creators</span>
|
||||
</a>
|
||||
</drawer-child>
|
||||
|
||||
<drawer-child>
|
||||
<a href="">
|
||||
<strong>Fund a Project</strong>
|
||||
<span>How to to get some LBC for your latest idea or project</span>
|
||||
</a>
|
||||
</drawer-child>
|
||||
|
||||
<drawer-child>
|
||||
<a href="">
|
||||
<strong>Makers</strong>
|
||||
<span>Would you like to share and sell 3D printable files?</span>
|
||||
</a>
|
||||
</drawer-child>
|
||||
</drawer-children>
|
||||
</drawer-wrap>
|
||||
</drawer-section>
|
||||
|
||||
<drawer-section>
|
||||
<drawer-title>
|
||||
Link III
|
||||
<drawer-navigation-helper/>
|
||||
</drawer-title>
|
||||
|
||||
<drawer-wrap>
|
||||
<drawer-children>
|
||||
<drawer-child>
|
||||
<a href="">
|
||||
<strong>Team / About</strong>
|
||||
<span>Meet the people building LBRY and find out why they’re doing it</span>
|
||||
</a>
|
||||
</drawer-child>
|
||||
|
||||
<drawer-child>
|
||||
<a href="">
|
||||
<strong>Join Us</strong>
|
||||
<span>Work with the LBRY team</span>
|
||||
</a>
|
||||
</drawer-child>
|
||||
|
||||
<drawer-child>
|
||||
<a href="">
|
||||
<strong>Contact</strong>
|
||||
<span>Have a question or want to connect with the LBRY, Inc. team?</span>
|
||||
</a>
|
||||
</drawer-child>
|
||||
|
||||
<drawer-child>
|
||||
<a href="">
|
||||
<strong>Credit Reports</strong>
|
||||
<span>Four times a year we share the current state of LBRY, Inc.'s balance sheet</span>
|
||||
</a>
|
||||
</drawer-child>
|
||||
</drawer-children>
|
||||
</drawer-wrap>
|
||||
</drawer-section>
|
||||
|
||||
<drawer-section>
|
||||
<drawer-title>
|
||||
Link IV
|
||||
<drawer-navigation-helper/>
|
||||
</drawer-title>
|
||||
|
||||
<drawer-wrap>
|
||||
<drawer-children>
|
||||
<drawer-child>
|
||||
<a href="">
|
||||
<strong>LBRY.tech</strong>
|
||||
<span>Find out how the heck all of this works</span>
|
||||
</a>
|
||||
</drawer-child>
|
||||
|
||||
<drawer-child>
|
||||
<a href="">
|
||||
<strong>GitHub</strong>
|
||||
<span>The LBRY code is open source, check out the repos</span>
|
||||
</a>
|
||||
</drawer-child>
|
||||
|
||||
<drawer-child>
|
||||
<a href="">
|
||||
<strong>Contributor's Guide</strong>
|
||||
<span>Tips and guidelines for being a contributor to the LBRY projects</span>
|
||||
</a>
|
||||
</drawer-child>
|
||||
</drawer-children>
|
||||
</drawer-wrap>
|
||||
</drawer-section>
|
||||
</drawer-navigation>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section>
|
||||
<p>Hello and whaddup!</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3>Form</h3>
|
||||
|
||||
<form>
|
||||
<fieldset>
|
||||
<legend>Subscribe to our newsletter</legend>
|
||||
|
||||
<input-submit>
|
||||
<input id="emailAddress" placeholder="you@domain.tld" type="text"/>
|
||||
<input title="Subscribe to our technical newsletter" type="submit" value="Subscribe" />
|
||||
</input-submit>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Become a Gym Leader</legend>
|
||||
|
||||
<fieldset-group>
|
||||
<fieldset-section>
|
||||
<label for="name">Name</label>
|
||||
<input id="name" placeholder="Will Smith" type="text"/>
|
||||
</fieldset-section>
|
||||
|
||||
<fieldset-section>
|
||||
<label for="starter">Pokémon</label>
|
||||
<select id="starter">
|
||||
<option disabled selected>Choose a Pokémon</option>
|
||||
<option>Bulbasaur</option>
|
||||
<option>Charmander</option>
|
||||
<option>Squirtle</option>
|
||||
</select>
|
||||
</fieldset-section>
|
||||
</fieldset-group>
|
||||
|
||||
<fieldset-section class="full-width">
|
||||
<label for="notes">Notes</label>
|
||||
<textarea id="notes"></textarea>
|
||||
</fieldset-section>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Click some buttons</legend>
|
||||
|
||||
<radio-element>
|
||||
<input id="test-radio-1" name="toggle" type="radio">
|
||||
<label for="test-radio-1">Radio button 1</label>
|
||||
<radio-toggle/>
|
||||
</radio-element>
|
||||
|
||||
<radio-element>
|
||||
<input id="test-radio-2" name="toggle" type="radio">
|
||||
<label for="test-radio-2">Radio button 2</label>
|
||||
<radio-toggle/>
|
||||
</radio-element>
|
||||
|
||||
<checkbox-element>
|
||||
<input id="test-checkbox-1" name="check" type="checkbox">
|
||||
<label for="test-checkbox-1">Checkbox</label>
|
||||
<checkbox-toggle/>
|
||||
</checkbox-element>
|
||||
</fieldset>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3>Table</h3>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Component</th>
|
||||
<th>Language (Toolset)</th>
|
||||
<th>What Is It</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><a href="https://github.com/lbryio/lbrycrd" rel="noopener noreferrer" target="_blank">lbrycrd</a></td>
|
||||
<td>C++</td>
|
||||
<td>A full node for the LBRY blockchain, including a standalone wallet. Used by miners and some applications. Most consumer applications do not bundle <a class="link--glossary" href="/glossary#lbrycrd">lbrycrd</a> directly, and instead bundle <a class="link--glossary" href="/glossary#lbry-sdk">lbry-sdk</a>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="https://github.com/lbryio/lbry" rel="noopener noreferrer" target="_blank">lbry-sdk</a></td>
|
||||
<td>Python (asyncio)</td>
|
||||
<td>A daemon that can be used directly or to develop other applications. Provides convenience <a href="/api/sdk">APIs</a>, bundles an SPV wallet (<a class="link--glossary" href="/glossary#torba">torba</a>), and contains an implementation of the LBRY data network.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="https://github.com/lbryio/torba" rel="noopener noreferrer" target="_blank">torba</a></td>
|
||||
<td>Python</td>
|
||||
<td>An <a class="link--glossary" href="/glossary#SPV">SPV</a> (Simple Payment Verification) wallet. Bundled with <a class="link--glossary" href="/glossary#lbry-sdk">lbry-sdk</a>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="https://github.com/lbryio/lbry/tree/master/lbrynet/extras/wallet/server" rel="noopener noreferrer" target="_blank">wallet server</a></td>
|
||||
<td>Protobuf, Python</td>
|
||||
<td>The wallet server used by <a class="link--glossary" href="/glossary#torba">torba</a>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="https://github.com/lbryio/lbry/tree/master/lbrynet/schema" rel="noopener noreferrer" target="_blank">schema</a></td>
|
||||
<td>Protobuf, Python</td>
|
||||
<td>Defines the structure of the metadata stored in the LBRY blockchain.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer>Copyright © 2018-2019, LBRY Inc. | BSD 3-Clause Licensed.</footer>
|
||||
</body>
|
||||
</html>
|
||||
44
web/components/package.json
Normal file
44
web/components/package.json
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
{
|
||||
"author": {
|
||||
"email": "paul+github@lbry.com",
|
||||
"name": "Paul Anthony Webb"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/lbryio/components/issues"
|
||||
},
|
||||
"description": "Styling for shared components across LBRY properties",
|
||||
"devDependencies": {
|
||||
"@inc/sasslint-config": "^2019.6.22",
|
||||
"husky": "^3.0.1",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"sass": "^1.22.7",
|
||||
"sass-lint": "^1.13.1",
|
||||
"updates": "^8.5.1"
|
||||
},
|
||||
"files": [
|
||||
"dist/style.css",
|
||||
"sass/*"
|
||||
],
|
||||
"homepage": "https://github.com/lbryio/components#readme",
|
||||
"husky": {
|
||||
"hooks": {
|
||||
"pre-commit": "npm run test:sass && npm run sass:prod && git add -A :/"
|
||||
}
|
||||
},
|
||||
"license": "BSD-3-Clause",
|
||||
"main": "sass/",
|
||||
"name": "@lbry/components",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/lbryio/components.git"
|
||||
},
|
||||
"scripts": {
|
||||
"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",
|
||||
"watch": "npm run sass:dev"
|
||||
},
|
||||
"version": "2.8.0"
|
||||
}
|
||||
54
web/components/sass/badge/_index.scss
Normal file
54
web/components/sass/badge/_index.scss
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
.badge {
|
||||
border-radius: 0.2rem;
|
||||
display: inline-block;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.05rem;
|
||||
line-height: 2;
|
||||
padding-right: var(--spacing-xs);
|
||||
padding-left: var(--spacing-xs);
|
||||
vertical-align: top;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.badge--cost {
|
||||
background-color: var(--lbry-yellow-2);
|
||||
color: var(--lbry-black);
|
||||
|
||||
[data-mode="dark"] & {
|
||||
background-color: var(--lbry-yellow-3);
|
||||
}
|
||||
}
|
||||
|
||||
.badge--free {
|
||||
background-color: var(--lbry-blue-2);
|
||||
|
||||
[data-mode="dark"] & {
|
||||
background-color: var(--lbry-blue-3);
|
||||
color: var(--lbry-black);
|
||||
}
|
||||
}
|
||||
|
||||
.badge--large {
|
||||
font-size: 4rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.badge--nsfw {
|
||||
background-color: var(--lbry-grape-2);
|
||||
|
||||
[data-mode="dark"] & {
|
||||
background-color: var(--lbry-grape-3);
|
||||
color: var(--lbry-black);
|
||||
}
|
||||
}
|
||||
|
||||
.badge--primary {
|
||||
background-color: var(--lbry-teal-5);
|
||||
color: var(--lbry-white);
|
||||
}
|
||||
|
||||
.badge--alert {
|
||||
background-color: var(--lbry-red-2);
|
||||
color: var(--lbry-white);
|
||||
}
|
||||
115
web/components/sass/button/_index.scss
Normal file
115
web/components/sass/button/_index.scss
Normal file
|
|
@ -0,0 +1,115 @@
|
|||
.button {
|
||||
fill: currentColor;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.button--alt {
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.button--constrict {
|
||||
@include constrict(20vw);
|
||||
}
|
||||
|
||||
.button--disabled {
|
||||
opacity: 0.3;
|
||||
|
||||
&:not([disabled]) {
|
||||
pointer-events: none;
|
||||
|
||||
&:hover {
|
||||
background-color: inherit;
|
||||
color: inherit;
|
||||
fill: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button--icon {
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
background-color: rgba($lbry-black, 0.7);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 50%;
|
||||
border-radius: 50%;
|
||||
color: var(--lbry-white);
|
||||
transition: background-color 0.2s;
|
||||
|
||||
|
||||
&:hover {
|
||||
background-color: var(--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);
|
||||
}
|
||||
}
|
||||
|
||||
.button--inverse {
|
||||
padding: var(--spacing-xs) var(--spacing-s); // sass-lint:disable-line shorthand-values
|
||||
background-color: transparent;
|
||||
border: 1px solid var(--lbry-gray-1);
|
||||
border-radius: 1rem;
|
||||
color: inherit;
|
||||
transition: background-color 0.2s;
|
||||
|
||||
[data-mode="dark"] & {
|
||||
border-color: rgba($lbry-white, 0.1);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--lbry-gray-1);
|
||||
|
||||
[data-mode="dark"] & {
|
||||
background-color: rgba($lbry-white, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button--link {
|
||||
color: var(--lbry-teal-5);
|
||||
transition: color 0.2s;
|
||||
word-break: break-all;
|
||||
|
||||
[data-mode="dark"] & {
|
||||
color: var(--lbry-teal-3);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--lbry-teal-3);
|
||||
|
||||
[data-mode="dark"] & {
|
||||
color: var(--lbry-teal-4);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button--primary {
|
||||
padding: var(--spacing-xs) var(--spacing-s); // sass-lint:disable-line shorthand-values
|
||||
align-self: center; // fixes buttons next to tall elements inside one with `display: flex`
|
||||
background-color: var(--lbry-teal-5);
|
||||
border-radius: 1rem;
|
||||
color: var(--lbry-white);
|
||||
transition: background-color 0.2s;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--lbry-teal-3);
|
||||
|
||||
[data-mode="dark"] & {
|
||||
background-color: var(--lbry-teal-4);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button--uppercase {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
268
web/components/sass/form/_index.scss
Normal file
268
web/components/sass/form/_index.scss
Normal file
|
|
@ -0,0 +1,268 @@
|
|||
form {
|
||||
// setting the font size here sizes everything within
|
||||
&:not(:last-child) {
|
||||
margin-bottom: var(--spacing-s);
|
||||
}
|
||||
}
|
||||
|
||||
input,
|
||||
select {
|
||||
height: var(--spacing-l);
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
checkbox-element,
|
||||
radio-element,
|
||||
select {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
[type="email"],
|
||||
[type="number"],
|
||||
[type="password"],
|
||||
[type="text"] {
|
||||
padding-right: var(--spacing-s);
|
||||
padding-left: var(--spacing-s);
|
||||
transition: border 0.2s;
|
||||
}
|
||||
|
||||
[type="submit"] {
|
||||
color: var(--lbry-white);
|
||||
padding-right: var(--spacing-m);
|
||||
padding-left: var(--spacing-m);
|
||||
transition: all 0.2s;
|
||||
|
||||
&:not(:hover) {
|
||||
background-color: var(--lbry-black);
|
||||
border-color: var(--lbry-black);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--lbry-teal-3);
|
||||
border-color: var(--lbry-teal-5);
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 96 96' xmlns='http://www.w3.org/2000/svg' fill='%23212529'%3E%3Cpath d='M17.172, 31.172c1.562, -1.562 4.095, -1.562 5.656, 0l25.172, 25.171l25.172, -25.171c1.562, -1.562 4.095, -1.562 5.656, 0c1.562, 1.562 1.562, 4.095 0, 5.656l-28, 28c-1.562, 1.562 -4.095, 1.562 -5.656, 0l-28, -28c-0.781, -0.781 -1.172, -1.805 -1.172, -2.828c0, -1.023 0.391, -2.047 1.172, -2.828Z'/%3E%3C/svg%3E%0A");
|
||||
background-position: 99% center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1rem;
|
||||
padding-right: var(--spacing-l);
|
||||
padding-left: var(--spacing-s);
|
||||
|
||||
[data-mode="dark"] & {
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 96 96' xmlns='http://www.w3.org/2000/svg' fill='%23ffffff'%3E%3Cpath d='M17.172, 31.172c1.562, -1.562 4.095, -1.562 5.656, 0l25.172, 25.171l25.172, -25.171c1.562, -1.562 4.095, -1.562 5.656, 0c1.562, 1.562 1.562, 4.095 0, 5.656l-28, 28c-1.562, 1.562 -4.095, 1.562 -5.656, 0l-28, -28c-0.781, -0.781 -1.172, -1.805 -1.172, -2.828c0, -1.023 0.391, -2.047 1.172, -2.828Z'/%3E%3C/svg%3E%0A");
|
||||
}
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border-top: 1px solid var(--lbry-gray-1);
|
||||
margin-bottom: var(--spacing-m);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
fieldset-group {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
fieldset-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: var(--spacing-m);
|
||||
|
||||
&.full-width {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
fieldset-group &,
|
||||
.fieldset-group & {
|
||||
width: 49%;
|
||||
}
|
||||
|
||||
label {
|
||||
color: var(--lbry-gray-4);
|
||||
display: inline-block;
|
||||
font-size: smaller;
|
||||
margin-bottom: var(--spacing-xxs);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
[type="email"],
|
||||
[type="number"],
|
||||
[type="text"],
|
||||
select,
|
||||
textarea {
|
||||
border-color: var(--lbry-black);
|
||||
|
||||
&:focus {
|
||||
border-color: var(--lbry-teal-5);
|
||||
}
|
||||
}
|
||||
|
||||
input,
|
||||
select {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
legend {
|
||||
padding: var(--spacing-xs) var(--spacing-s); // sass-lint:disable-line shorthand-values
|
||||
border: 1px solid var(--lbry-gray-1);
|
||||
margin-bottom: var(--spacing-s);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
input-submit {
|
||||
display: flex;
|
||||
|
||||
[type="email"],
|
||||
[type="text"] {
|
||||
flex: 1;
|
||||
|
||||
&:not(:focus) {
|
||||
border-top-color: var(--lbry-black);
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: var(--lbry-black);
|
||||
border-left-color: var(--lbry-black);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-top-color: var(--lbry-teal-5);
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: var(--lbry-teal-5);
|
||||
border-left-color: var(--lbry-teal-5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
checkbox-element {
|
||||
@include tick;
|
||||
|
||||
&:hover {
|
||||
checkbox-toggle,
|
||||
.checkbox-toggle {
|
||||
border-color: var(--lbry-teal-4);
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
&[type="checkbox"] {
|
||||
width: 0; height: 0;
|
||||
visibility: hidden;
|
||||
|
||||
&:not(:checked) {
|
||||
+ label + checkbox-toggle::before,
|
||||
+ label + .checkbox-toggle::before {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
&:checked {
|
||||
+ label {
|
||||
color: var(--lbry-teal-4);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
checkbox-toggle {
|
||||
@include tick-toggle;
|
||||
|
||||
&::before {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2333b58f' stroke-width='2'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E%0A");
|
||||
background-position: center left;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 130%;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
}
|
||||
|
||||
radio-element {
|
||||
@include tick;
|
||||
|
||||
&:hover {
|
||||
radio-toggle,
|
||||
.radio-toggle {
|
||||
border-color: var(--lbry-teal-4);
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
&[type="radio"] {
|
||||
width: 0; height: 0;
|
||||
visibility: hidden;
|
||||
|
||||
&:not(:checked) {
|
||||
+ label + radio-toggle::before,
|
||||
+ label + .radio-toggle::before {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&:checked {
|
||||
+ label {
|
||||
color: var(--lbry-teal-4);
|
||||
}
|
||||
|
||||
+ label + radio-toggle::before,
|
||||
+ label + .radio-toggle::before {
|
||||
background-color: var(--lbry-teal-4);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
radio-toggle {
|
||||
@include tick-toggle;
|
||||
border-radius: 50%;
|
||||
|
||||
&::before {
|
||||
border-radius: 50%;
|
||||
transform: scale(0.6);
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
}
|
||||
|
||||
// Custom elements are apparently difficult to use in React, so use classes
|
||||
|
||||
.checkbox-element {
|
||||
@extend checkbox-element;
|
||||
}
|
||||
|
||||
.checkbox-toggle {
|
||||
@extend checkbox-toggle;
|
||||
}
|
||||
|
||||
.fieldset {
|
||||
@extend fieldset;
|
||||
}
|
||||
|
||||
.fieldset-group {
|
||||
@extend fieldset-group;
|
||||
}
|
||||
|
||||
.fieldset-section {
|
||||
@extend fieldset-section;
|
||||
}
|
||||
|
||||
.form {
|
||||
@extend form;
|
||||
}
|
||||
|
||||
.input-submit {
|
||||
@extend input-submit;
|
||||
}
|
||||
|
||||
.radio-element {
|
||||
@extend radio-element;
|
||||
}
|
||||
|
||||
.radio-toggle {
|
||||
@extend radio-toggle;
|
||||
}
|
||||
13
web/components/sass/index.scss
Normal file
13
web/components/sass/index.scss
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
@charset "utf-8";
|
||||
|
||||
@import "init/color";
|
||||
@import "init/mixins";
|
||||
@import "init/variables";
|
||||
@import "init/reset";
|
||||
@import "init/animation";
|
||||
@import "badge";
|
||||
@import "button";
|
||||
@import "form";
|
||||
@import "media";
|
||||
@import "navigation";
|
||||
@import "table";
|
||||
25
web/components/sass/init/_animation.scss
Normal file
25
web/components/sass/init/_animation.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
291
web/components/sass/init/_color.scss
Normal file
291
web/components/sass/init/_color.scss
Normal file
|
|
@ -0,0 +1,291 @@
|
|||
|
||||
// General
|
||||
// ───────────────────────────────────
|
||||
|
||||
$lbry-white: #fff;
|
||||
$lbry-silver: #f1f3f5;
|
||||
$lbry-black: #212529;
|
||||
|
||||
$base-gray: #ced4da;
|
||||
$base-teal: #38d9a9;
|
||||
$base-cyan: #3bc9db;
|
||||
$base-blue: #339af0;
|
||||
$base-indigo: #748ffc;
|
||||
$base-violet: #9775fa;
|
||||
$base-grape: #da77f2;
|
||||
$base-pink: #f783ac;
|
||||
$base-red: #e03131;
|
||||
$base-orange: #ff922b;
|
||||
$base-yellow: #ffe066;
|
||||
$base-lime: #a9e34b;
|
||||
$base-green: #51cf66;
|
||||
|
||||
|
||||
|
||||
// Gray
|
||||
// ───────────────────────────────────
|
||||
|
||||
$lbry-gray-list: (
|
||||
"1": mix($lbry-white, $base-gray, 40%),
|
||||
"2": mix($lbry-white, $base-gray, 20%),
|
||||
"3": $base-gray,
|
||||
"4": mix($lbry-black, $base-gray, 20%),
|
||||
"5": mix($lbry-black, $base-gray, 40%)
|
||||
);
|
||||
|
||||
$lbry-gray-1: map-get($lbry-gray-list, "1");
|
||||
$lbry-gray-2: map-get($lbry-gray-list, "2");
|
||||
$lbry-gray-3: map-get($lbry-gray-list, "3");
|
||||
$lbry-gray-4: map-get($lbry-gray-list, "4");
|
||||
$lbry-gray-5: map-get($lbry-gray-list, "5");
|
||||
|
||||
|
||||
|
||||
// Teal
|
||||
// ───────────────────────────────────
|
||||
|
||||
$lbry-teal-list: (
|
||||
"1": mix($lbry-white, $base-teal, 40%),
|
||||
"2": mix($lbry-white, $base-teal, 20%),
|
||||
"3": $base-teal,
|
||||
"4": mix($lbry-black, $base-teal, 20%),
|
||||
"5": mix($lbry-black, $base-teal, 40%)
|
||||
);
|
||||
|
||||
$lbry-teal-1: map-get($lbry-teal-list, "1");
|
||||
$lbry-teal-2: map-get($lbry-teal-list, "2");
|
||||
$lbry-teal-3: map-get($lbry-teal-list, "3");
|
||||
$lbry-teal-4: map-get($lbry-teal-list, "4");
|
||||
$lbry-teal-5: map-get($lbry-teal-list, "5");
|
||||
|
||||
|
||||
|
||||
// Cyan
|
||||
// ───────────────────────────────────
|
||||
|
||||
$lbry-cyan-list: (
|
||||
"1": mix($lbry-white, $base-cyan, 40%),
|
||||
"2": mix($lbry-white, $base-cyan, 20%),
|
||||
"3": $base-cyan,
|
||||
"4": mix($lbry-black, $base-cyan, 20%),
|
||||
"5": mix($lbry-black, $base-cyan, 40%)
|
||||
);
|
||||
|
||||
$lbry-cyan-1: map-get($lbry-cyan-list, "1");
|
||||
$lbry-cyan-2: map-get($lbry-cyan-list, "2");
|
||||
$lbry-cyan-3: map-get($lbry-cyan-list, "3");
|
||||
$lbry-cyan-4: map-get($lbry-cyan-list, "4");
|
||||
$lbry-cyan-5: map-get($lbry-cyan-list, "5");
|
||||
|
||||
|
||||
|
||||
// Blue
|
||||
// ───────────────────────────────────
|
||||
|
||||
$lbry-blue-list: (
|
||||
"1": mix($lbry-white, $base-blue, 40%),
|
||||
"2": mix($lbry-white, $base-blue, 20%),
|
||||
"3": $base-blue,
|
||||
"4": mix($lbry-black, $base-blue, 20%),
|
||||
"5": mix($lbry-black, $base-blue, 40%)
|
||||
);
|
||||
|
||||
$lbry-blue-1: map-get($lbry-blue-list, "1");
|
||||
$lbry-blue-2: map-get($lbry-blue-list, "2");
|
||||
$lbry-blue-3: map-get($lbry-blue-list, "3");
|
||||
$lbry-blue-4: map-get($lbry-blue-list, "4");
|
||||
$lbry-blue-5: map-get($lbry-blue-list, "5");
|
||||
|
||||
|
||||
|
||||
// Indigo
|
||||
// ───────────────────────────────────
|
||||
|
||||
$lbry-indigo-list: (
|
||||
"1": mix($lbry-white, $base-indigo, 40%),
|
||||
"2": mix($lbry-white, $base-indigo, 20%),
|
||||
"3": $base-indigo,
|
||||
"4": mix($lbry-black, $base-indigo, 20%),
|
||||
"5": mix($lbry-black, $base-indigo, 40%)
|
||||
);
|
||||
|
||||
$lbry-indigo-1: map-get($lbry-indigo-list, "1");
|
||||
$lbry-indigo-2: map-get($lbry-indigo-list, "2");
|
||||
$lbry-indigo-3: map-get($lbry-indigo-list, "3");
|
||||
$lbry-indigo-4: map-get($lbry-indigo-list, "4");
|
||||
$lbry-indigo-5: map-get($lbry-indigo-list, "5");
|
||||
|
||||
|
||||
|
||||
// Violet
|
||||
// ───────────────────────────────────
|
||||
|
||||
$lbry-violet-list: (
|
||||
"1": mix($lbry-white, $base-violet, 40%),
|
||||
"2": mix($lbry-white, $base-violet, 20%),
|
||||
"3": $base-violet,
|
||||
"4": mix($lbry-black, $base-violet, 20%),
|
||||
"5": mix($lbry-black, $base-violet, 40%)
|
||||
);
|
||||
|
||||
$lbry-violet-1: map-get($lbry-violet-list, "1");
|
||||
$lbry-violet-2: map-get($lbry-violet-list, "2");
|
||||
$lbry-violet-3: map-get($lbry-violet-list, "3");
|
||||
$lbry-violet-4: map-get($lbry-violet-list, "4");
|
||||
$lbry-violet-5: map-get($lbry-violet-list, "5");
|
||||
|
||||
|
||||
|
||||
// Grape
|
||||
// ───────────────────────────────────
|
||||
|
||||
$lbry-grape-list: (
|
||||
"1": mix($lbry-white, $base-grape, 40%),
|
||||
"2": mix($lbry-white, $base-grape, 20%),
|
||||
"3": $base-grape,
|
||||
"4": mix($lbry-black, $base-grape, 20%),
|
||||
"5": mix($lbry-black, $base-grape, 40%)
|
||||
);
|
||||
|
||||
$lbry-grape-1: map-get($lbry-grape-list, "1");
|
||||
$lbry-grape-2: map-get($lbry-grape-list, "2");
|
||||
$lbry-grape-3: map-get($lbry-grape-list, "3");
|
||||
$lbry-grape-4: map-get($lbry-grape-list, "4");
|
||||
$lbry-grape-5: map-get($lbry-grape-list, "5");
|
||||
|
||||
|
||||
|
||||
// Pink
|
||||
// ───────────────────────────────────
|
||||
|
||||
$lbry-pink-list: (
|
||||
"1": mix($lbry-white, $base-pink, 40%),
|
||||
"2": mix($lbry-white, $base-pink, 20%),
|
||||
"3": $base-pink,
|
||||
"4": mix($lbry-black, $base-pink, 20%),
|
||||
"5": mix($lbry-black, $base-pink, 40%)
|
||||
);
|
||||
|
||||
$lbry-pink-1: map-get($lbry-pink-list, "1");
|
||||
$lbry-pink-2: map-get($lbry-pink-list, "2");
|
||||
$lbry-pink-3: map-get($lbry-pink-list, "3");
|
||||
$lbry-pink-4: map-get($lbry-pink-list, "4");
|
||||
$lbry-pink-5: map-get($lbry-pink-list, "5");
|
||||
|
||||
|
||||
|
||||
// Red
|
||||
// ───────────────────────────────────
|
||||
|
||||
$lbry-red-list: (
|
||||
"1": mix($lbry-white, $base-red, 40%),
|
||||
"2": mix($lbry-white, $base-red, 20%),
|
||||
"3": $base-red,
|
||||
"4": mix($lbry-black, $base-red, 20%),
|
||||
"5": mix($lbry-black, $base-red, 40%)
|
||||
);
|
||||
|
||||
$lbry-red-1: map-get($lbry-red-list, "1");
|
||||
$lbry-red-2: map-get($lbry-red-list, "2");
|
||||
$lbry-red-3: map-get($lbry-red-list, "3");
|
||||
$lbry-red-4: map-get($lbry-red-list, "4");
|
||||
$lbry-red-5: map-get($lbry-red-list, "5");
|
||||
|
||||
|
||||
|
||||
// Orange
|
||||
// ───────────────────────────────────
|
||||
|
||||
$lbry-orange-list: (
|
||||
"1": mix($lbry-white, $base-orange, 40%),
|
||||
"2": mix($lbry-white, $base-orange, 20%),
|
||||
"3": $base-orange,
|
||||
"4": mix($lbry-black, $base-orange, 20%),
|
||||
"5": mix($lbry-black, $base-orange, 40%)
|
||||
);
|
||||
|
||||
$lbry-orange-1: map-get($lbry-orange-list, "1");
|
||||
$lbry-orange-2: map-get($lbry-orange-list, "2");
|
||||
$lbry-orange-3: map-get($lbry-orange-list, "3");
|
||||
$lbry-orange-4: map-get($lbry-orange-list, "4");
|
||||
$lbry-orange-5: map-get($lbry-orange-list, "5");
|
||||
|
||||
|
||||
|
||||
// Yellow
|
||||
// ───────────────────────────────────
|
||||
|
||||
$lbry-yellow-list: (
|
||||
"1": mix($lbry-white, $base-yellow, 40%),
|
||||
"2": mix($lbry-white, $base-yellow, 20%),
|
||||
"3": $base-yellow,
|
||||
"4": mix($lbry-black, $base-yellow, 20%),
|
||||
"5": mix($lbry-black, $base-yellow, 40%)
|
||||
);
|
||||
|
||||
$lbry-yellow-1: map-get($lbry-yellow-list, "1");
|
||||
$lbry-yellow-2: map-get($lbry-yellow-list, "2");
|
||||
$lbry-yellow-3: map-get($lbry-yellow-list, "3");
|
||||
$lbry-yellow-4: map-get($lbry-yellow-list, "4");
|
||||
$lbry-yellow-5: map-get($lbry-yellow-list, "5");
|
||||
|
||||
|
||||
|
||||
// Lime
|
||||
// ───────────────────────────────────
|
||||
|
||||
$lbry-lime-list: (
|
||||
"1": mix($lbry-white, $base-lime, 40%),
|
||||
"2": mix($lbry-white, $base-lime, 20%),
|
||||
"3": $base-lime,
|
||||
"4": mix($lbry-black, $base-lime, 20%),
|
||||
"5": mix($lbry-black, $base-lime, 40%)
|
||||
);
|
||||
|
||||
$lbry-lime-1: map-get($lbry-lime-list, "1");
|
||||
$lbry-lime-2: map-get($lbry-lime-list, "2");
|
||||
$lbry-lime-3: map-get($lbry-lime-list, "3");
|
||||
$lbry-lime-4: map-get($lbry-lime-list, "4");
|
||||
$lbry-lime-5: map-get($lbry-lime-list, "5");
|
||||
|
||||
|
||||
|
||||
// Green
|
||||
// ───────────────────────────────────
|
||||
|
||||
$lbry-green-list: (
|
||||
"1": mix($lbry-white, $base-green, 40%),
|
||||
"2": mix($lbry-white, $base-green, 20%),
|
||||
"3": $base-green,
|
||||
"4": mix($lbry-black, $base-green, 20%),
|
||||
"5": mix($lbry-black, $base-green, 40%)
|
||||
);
|
||||
|
||||
$lbry-green-1: map-get($lbry-green-list, "1");
|
||||
$lbry-green-2: map-get($lbry-green-list, "2");
|
||||
$lbry-green-3: map-get($lbry-green-list, "3");
|
||||
$lbry-green-4: map-get($lbry-green-list, "4");
|
||||
$lbry-green-5: map-get($lbry-green-list, "5");
|
||||
|
||||
|
||||
|
||||
// Color list
|
||||
// ───────────────────────────────────
|
||||
|
||||
$lbry-color-spectrum: 9;
|
||||
|
||||
$lbry-color-list: (
|
||||
$lbry-gray-list: "gray",
|
||||
$lbry-teal-list: "teal",
|
||||
$lbry-cyan-list: "cyan",
|
||||
$lbry-blue-list: "blue",
|
||||
$lbry-indigo-list: "indigo",
|
||||
$lbry-violet-list: "violet",
|
||||
$lbry-grape-list: "grape",
|
||||
$lbry-pink-list: "pink",
|
||||
$lbry-red-list: "red",
|
||||
$lbry-orange-list: "orange",
|
||||
$lbry-yellow-list: "yellow",
|
||||
$lbry-lime-list: "lime",
|
||||
$lbry-green-list: "green"
|
||||
);
|
||||
242
web/components/sass/init/_mixins.scss
Normal file
242
web/components/sass/init/_mixins.scss
Normal file
|
|
@ -0,0 +1,242 @@
|
|||
@mixin between {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
@mixin breakpoint-max($breakpoint) {
|
||||
@media (max-width: #{$breakpoint}px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin breakpoint-min($breakpoint) {
|
||||
@media (min-width: #{$breakpoint}px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@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
|
||||
@mixin constrict($value: null) {
|
||||
@if ($value) {
|
||||
max-width: $value;
|
||||
}
|
||||
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@mixin create-grid($items-per-row: 4) {
|
||||
grid-template: repeat(1, 1fr) / repeat($items-per-row, 1fr);
|
||||
}
|
||||
|
||||
// Smart font include
|
||||
// Simply pass in the font-weight you want to use and the normal/italicized versions will be added
|
||||
// No more weighing down the front-end with references to unused weights
|
||||
@mixin font-face($font-weight, $relative-font-path, $font-name) {
|
||||
@font-face {
|
||||
font-family: $font-name;
|
||||
font-style: normal;
|
||||
font-weight: $font-weight;
|
||||
// sass-lint:disable indentation
|
||||
src: url("#{$relative-font-path}/#{$font-weight}.woff2") format("woff2"),
|
||||
url("#{$relative-font-path}/#{$font-weight}.woff") format("woff");
|
||||
// sass-lint:enable indentation
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: $font-name;
|
||||
font-style: italic;
|
||||
font-weight: $font-weight;
|
||||
// sass-lint:disable indentation
|
||||
src: url("#{$relative-font-path}/#{$font-weight}i.woff2") format("woff2"),
|
||||
url("#{$relative-font-path}/#{$font-weight}i.woff") format("woff");
|
||||
// sass-lint:enable indentation
|
||||
}
|
||||
}
|
||||
|
||||
@mixin font-mono {
|
||||
font-family: "Fira Code", "Courier New", monospace;
|
||||
}
|
||||
|
||||
@mixin font-sans {
|
||||
font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
}
|
||||
|
||||
@mixin font-serif {
|
||||
font-family: Georgia, serif;
|
||||
}
|
||||
|
||||
@mixin hide-text {
|
||||
border: none;
|
||||
color: transparent;
|
||||
font: 0 / 0 a;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
// Cross-browser line-clamp support
|
||||
@mixin line-clamp(
|
||||
$element-height: 2rem,
|
||||
$row-count: 2,
|
||||
$fade-color: var(--lbry-white),
|
||||
$computed-position: relative
|
||||
) {
|
||||
height: $element-height;
|
||||
overflow: hidden;
|
||||
position: $computed-position;
|
||||
|
||||
&::after {
|
||||
width: 50%; height: calc(#{$element-height} / #{$row-count});
|
||||
right: 0; bottom: 0;
|
||||
|
||||
background-image: linear-gradient(to right, rgba($lbry-white, 0), #{$fade-color} 80%);
|
||||
content: "";
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
@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
|
||||
@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, var(--lbry-gray-3) 10%, transparent 80%, var(--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) {
|
||||
@if ($prop and $value) {
|
||||
#{$prop}: $value;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin selection($background-color: var(--lbry-white), $text-color: var(--lbry-black)) {
|
||||
&::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 {
|
||||
content: "";
|
||||
}
|
||||
|
||||
&::before {
|
||||
float: left;
|
||||
padding-top: var(--aspect-ratio-standard);
|
||||
}
|
||||
|
||||
&::after {
|
||||
clear: both;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin tick {
|
||||
min-height: 2rem;
|
||||
align-items: center;
|
||||
align-self: start;
|
||||
display: inline-flex;
|
||||
flex-direction: row-reverse;
|
||||
margin-right: var(--spacing-s);
|
||||
margin-bottom: var(--spacing-s);
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
label {
|
||||
color: var(--lbry-teal-4);
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
left: -2rem;
|
||||
padding-left: var(--spacing-l);
|
||||
position: relative;
|
||||
transition: color 0.2s;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin tick-toggle {
|
||||
width: var(--spacing-m); height: var(--spacing-m);
|
||||
top: 0; left: 0;
|
||||
|
||||
border: 2px solid;
|
||||
display: block;
|
||||
position: relative;
|
||||
transition: border 0.2s;
|
||||
|
||||
&::before {
|
||||
width: 100%; height: 100%;
|
||||
top: 0; left: 0;
|
||||
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin underline($text-color: var(--lbry-black), $whitespace-color: var(--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%;
|
||||
}
|
||||
}
|
||||
261
web/components/sass/init/_reset.scss
Normal file
261
web/components/sass/init/_reset.scss
Normal file
|
|
@ -0,0 +1,261 @@
|
|||
html {
|
||||
box-sizing: border-box;
|
||||
font-size: 12px;
|
||||
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;
|
||||
}
|
||||
|
||||
[disabled] {
|
||||
pointer-events: none;
|
||||
resize: none;
|
||||
|
||||
&:hover {
|
||||
background-color: inherit;
|
||||
border-color: inherit;
|
||||
color: inherit;
|
||||
fill: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
[readonly] {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
[for],
|
||||
[role="button"],
|
||||
[type="button"],
|
||||
[type="checkbox"],
|
||||
[type="file"],
|
||||
[type="radio"],
|
||||
[type="select"],
|
||||
[type="submit"] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
a,
|
||||
area,
|
||||
button,
|
||||
[role="button"],
|
||||
input,
|
||||
label,
|
||||
select,
|
||||
summary,
|
||||
textarea {
|
||||
// Remove touch delay on supported devices
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
background-color: transparent;
|
||||
border-radius: 0;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
|
||||
&:disabled {
|
||||
// sass-lint:disable-block no-important
|
||||
border-color: var(--lbry-gray-4);
|
||||
color: var(--lbry-gray-4);
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
table {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
width: 100%; height: 1px;
|
||||
background-color: var(--lbry-gray-1);
|
||||
}
|
||||
|
||||
input {
|
||||
background-color: transparent;
|
||||
color: inherit;
|
||||
|
||||
&::placeholder {
|
||||
color: inherit;
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
// &:not(:disabled) {
|
||||
// color: inherit;
|
||||
// }
|
||||
|
||||
&::-webkit-search-cancel-button {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
min-height: var(--spacing-xxl);
|
||||
padding: var(--spacing-s);
|
||||
// border-color should be added in apps for blur/focus
|
||||
border: 1px solid;
|
||||
|
||||
&:not([disabled]) {
|
||||
resize: vertical;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media print {
|
||||
// sass-lint:disable-block no-important
|
||||
// Intelligent print styles
|
||||
pre,
|
||||
blockquote {
|
||||
border: 1px solid var(--lbry-gray-5) !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-color: transparent !important;
|
||||
background-image: none !important;
|
||||
color: var(--lbry-black) !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;
|
||||
}
|
||||
}
|
||||
}
|
||||
103
web/components/sass/init/_variables.scss
Normal file
103
web/components/sass/init/_variables.scss
Normal file
|
|
@ -0,0 +1,103 @@
|
|||
:root {
|
||||
// Spacing
|
||||
@include root-prop(--spacing-xxs, 0.2rem);
|
||||
@include root-prop(--spacing-xs, 0.4rem);
|
||||
@include root-prop(--spacing-s, 0.8rem);
|
||||
@include root-prop(--spacing-m, 1.6rem);
|
||||
@include root-prop(--spacing-l, 2.4rem);
|
||||
@include root-prop(--spacing-xl, 3.2rem);
|
||||
@include root-prop(--spacing-xxl, 6.4rem);
|
||||
|
||||
// Aspect ratio
|
||||
@include root-prop(--aspect-ratio-bluray, 41.6666666667%); // 12:5
|
||||
@include root-prop(--aspect-ratio-panavision, 36.3636363636%); // 11:4
|
||||
@include root-prop(--aspect-ratio-sd, 75%); // 4:3
|
||||
@include root-prop(--aspect-ratio-standard, 56.25%); // 16:9
|
||||
|
||||
// Color
|
||||
@include root-prop(--lbry-black, $lbry-black);
|
||||
@include root-prop(--lbry-white, $lbry-white);
|
||||
|
||||
@include root-prop(--lbry-gray-1, $lbry-gray-1);
|
||||
@include root-prop(--lbry-gray-2, $lbry-gray-2);
|
||||
@include root-prop(--lbry-gray-3, $lbry-gray-3);
|
||||
@include root-prop(--lbry-gray-4, $lbry-gray-4);
|
||||
@include root-prop(--lbry-gray-5, $lbry-gray-5);
|
||||
|
||||
@include root-prop(--lbry-teal-1, $lbry-teal-1);
|
||||
@include root-prop(--lbry-teal-2, $lbry-teal-2);
|
||||
@include root-prop(--lbry-teal-3, $lbry-teal-3);
|
||||
@include root-prop(--lbry-teal-4, $lbry-teal-4);
|
||||
@include root-prop(--lbry-teal-5, $lbry-teal-5);
|
||||
|
||||
@include root-prop(--lbry-cyan-1, $lbry-cyan-1);
|
||||
@include root-prop(--lbry-cyan-2, $lbry-cyan-2);
|
||||
@include root-prop(--lbry-cyan-3, $lbry-cyan-3);
|
||||
@include root-prop(--lbry-cyan-4, $lbry-cyan-4);
|
||||
@include root-prop(--lbry-cyan-5, $lbry-cyan-5);
|
||||
|
||||
@include root-prop(--lbry-blue-1, $lbry-blue-1);
|
||||
@include root-prop(--lbry-blue-2, $lbry-blue-2);
|
||||
@include root-prop(--lbry-blue-3, $lbry-blue-3);
|
||||
@include root-prop(--lbry-blue-4, $lbry-blue-4);
|
||||
@include root-prop(--lbry-blue-5, $lbry-blue-5);
|
||||
|
||||
@include root-prop(--lbry-indigo-1, $lbry-indigo-1);
|
||||
@include root-prop(--lbry-indigo-2, $lbry-indigo-2);
|
||||
@include root-prop(--lbry-indigo-3, $lbry-indigo-3);
|
||||
@include root-prop(--lbry-indigo-4, $lbry-indigo-4);
|
||||
@include root-prop(--lbry-indigo-5, $lbry-indigo-5);
|
||||
|
||||
@include root-prop(--lbry-violet-1, $lbry-violet-1);
|
||||
@include root-prop(--lbry-violet-2, $lbry-violet-2);
|
||||
@include root-prop(--lbry-violet-3, $lbry-violet-3);
|
||||
@include root-prop(--lbry-violet-4, $lbry-violet-4);
|
||||
@include root-prop(--lbry-violet-5, $lbry-violet-5);
|
||||
|
||||
@include root-prop(--lbry-grape-1, $lbry-grape-1);
|
||||
@include root-prop(--lbry-grape-2, $lbry-grape-2);
|
||||
@include root-prop(--lbry-grape-3, $lbry-grape-3);
|
||||
@include root-prop(--lbry-grape-4, $lbry-grape-4);
|
||||
@include root-prop(--lbry-grape-5, $lbry-grape-5);
|
||||
|
||||
@include root-prop(--lbry-pink-1, $lbry-pink-1);
|
||||
@include root-prop(--lbry-pink-2, $lbry-pink-2);
|
||||
@include root-prop(--lbry-pink-3, $lbry-pink-3);
|
||||
@include root-prop(--lbry-pink-4, $lbry-pink-4);
|
||||
@include root-prop(--lbry-pink-5, $lbry-pink-5);
|
||||
|
||||
@include root-prop(--lbry-red-1, $lbry-red-1);
|
||||
@include root-prop(--lbry-red-2, $lbry-red-2);
|
||||
@include root-prop(--lbry-red-3, $lbry-red-3);
|
||||
@include root-prop(--lbry-red-4, $lbry-red-4);
|
||||
@include root-prop(--lbry-red-5, $lbry-red-5);
|
||||
|
||||
@include root-prop(--lbry-orange-1, $lbry-orange-1);
|
||||
@include root-prop(--lbry-orange-2, $lbry-orange-2);
|
||||
@include root-prop(--lbry-orange-3, $lbry-orange-3);
|
||||
@include root-prop(--lbry-orange-4, $lbry-orange-4);
|
||||
@include root-prop(--lbry-orange-5, $lbry-orange-5);
|
||||
|
||||
@include root-prop(--lbry-yellow-1, $lbry-yellow-1);
|
||||
@include root-prop(--lbry-yellow-2, $lbry-yellow-2);
|
||||
@include root-prop(--lbry-yellow-3, $lbry-yellow-3);
|
||||
@include root-prop(--lbry-yellow-4, $lbry-yellow-4);
|
||||
@include root-prop(--lbry-yellow-5, $lbry-yellow-5);
|
||||
|
||||
@include root-prop(--lbry-lime-1, $lbry-lime-1);
|
||||
@include root-prop(--lbry-lime-2, $lbry-lime-2);
|
||||
@include root-prop(--lbry-lime-3, $lbry-lime-3);
|
||||
@include root-prop(--lbry-lime-4, $lbry-lime-4);
|
||||
@include root-prop(--lbry-lime-5, $lbry-lime-5);
|
||||
|
||||
@include root-prop(--lbry-green-1, $lbry-green-1);
|
||||
@include root-prop(--lbry-green-2, $lbry-green-2);
|
||||
@include root-prop(--lbry-green-3, $lbry-green-3);
|
||||
@include root-prop(--lbry-green-4, $lbry-green-4);
|
||||
@include root-prop(--lbry-green-5, $lbry-green-5);
|
||||
|
||||
// Type
|
||||
@include root-prop(--font-mono, "Fira Code");
|
||||
@include root-prop(--font-sans, Inter);
|
||||
@include root-prop(--font-serif, Georgia);
|
||||
}
|
||||
192
web/components/sass/media/_index.scss
Normal file
192
web/components/sass/media/_index.scss
Normal file
|
|
@ -0,0 +1,192 @@
|
|||
// C O N T A I N E R S
|
||||
|
||||
.media-grid {
|
||||
display: grid;
|
||||
|
||||
// set your own grid-gap
|
||||
// example → grid-gap: var(--spacing-s);
|
||||
|
||||
// set your own grid-template
|
||||
// example → @include create-grid(4);
|
||||
|
||||
.media {
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
.media-list { // sass-lint:disable-line no-empty-rulesets
|
||||
}
|
||||
|
||||
.media-row { // sass-lint:disable-line no-empty-rulesets
|
||||
}
|
||||
|
||||
|
||||
|
||||
.media {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// M O D I F I E R S
|
||||
|
||||
.media--large {
|
||||
display: flex;
|
||||
|
||||
.media__info {
|
||||
width: calc(100% - 20rem);
|
||||
margin-left: var(--spacing-s);
|
||||
}
|
||||
|
||||
.media__thumb {
|
||||
width: 40rem;
|
||||
margin-bottom: var(--spacing-s);
|
||||
}
|
||||
}
|
||||
|
||||
.media--placeholder {
|
||||
> * {
|
||||
@include placeholder;
|
||||
}
|
||||
|
||||
.media__channel,
|
||||
.media__date,
|
||||
.media__title {
|
||||
min-height: 1rem;
|
||||
}
|
||||
|
||||
.media__channel {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.media__date {
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.media__title {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.media--small {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
&:not(:last-of-type) {
|
||||
margin-bottom: var(--spacing-s);
|
||||
}
|
||||
|
||||
.media__info {
|
||||
width: 50%;
|
||||
padding-left: var(--spacing-s);
|
||||
}
|
||||
|
||||
.media__properties {
|
||||
bottom: -1.5rem; left: calc(-100% - 1.5rem);
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.media__thumb {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.media__title {
|
||||
height: 3rem;
|
||||
line-height: 1.33;
|
||||
}
|
||||
}
|
||||
|
||||
.media--wide { // .media--search-result
|
||||
display: flex;
|
||||
|
||||
&:not(:last-of-type) {
|
||||
margin-bottom: var(--spacing-m);
|
||||
}
|
||||
|
||||
.media__info {
|
||||
width: calc(100% - 20rem);
|
||||
margin-left: var(--spacing-s);
|
||||
}
|
||||
|
||||
.media__properties {
|
||||
bottom: -5.5rem; left: -20rem;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.media__text { // .media__subtext
|
||||
padding-top: var(--spacing-s);
|
||||
}
|
||||
|
||||
.media__thumb {
|
||||
width: 20rem;
|
||||
}
|
||||
|
||||
.media__title {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// C H I L D R E N
|
||||
|
||||
.media__actions {
|
||||
display: flex;
|
||||
padding-top: var(--spacing-m);
|
||||
padding-bottom: var(--spacing-m);
|
||||
}
|
||||
|
||||
.media__content { // sass-lint:disable-line no-empty-rulesets
|
||||
}
|
||||
|
||||
.media__date { // sass-lint:disable-line no-empty-rulesets
|
||||
}
|
||||
|
||||
.media__info {
|
||||
word-wrap: break-word;
|
||||
|
||||
[data-mode="dark"] & {
|
||||
border-color: rgba($lbry-gray-5, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.media__message {
|
||||
padding: var(--spacing-s);
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.media__properties {
|
||||
vertical-align: top;
|
||||
|
||||
> *:not(:last-child) {
|
||||
margin-right: var(--spacing-xs);
|
||||
}
|
||||
|
||||
&:not(:empty) {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.media__property { // sass-lint:disable-line no-empty-rulesets
|
||||
}
|
||||
|
||||
.media__subtitle {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.media__text {
|
||||
[data-mode="dark"] & {
|
||||
color: var(--lbry-white);
|
||||
}
|
||||
}
|
||||
|
||||
.media__thumb {
|
||||
@include thumbnail;
|
||||
}
|
||||
|
||||
.media__title {
|
||||
font-weight: 600;
|
||||
white-space: normal;
|
||||
}
|
||||
126
web/components/sass/navigation/_index.scss
Normal file
126
web/components/sass/navigation/_index.scss
Normal file
|
|
@ -0,0 +1,126 @@
|
|||
drawer-navigation {
|
||||
width: 100%; height: 5rem;
|
||||
|
||||
display: inline-flex;
|
||||
flex: 1;
|
||||
font-size: inherit;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
drawer-navigation-helper { // This is to make mouse movement forgiving
|
||||
width: 0; height: 0;
|
||||
top: 3rem; left: -5rem;
|
||||
|
||||
border-right: 8rem solid transparent;
|
||||
border-bottom: 5rem solid transparent;
|
||||
border-left: 8rem solid transparent;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
drawer-section {
|
||||
padding-right: 1rem;
|
||||
padding-left: 1rem;
|
||||
|
||||
&:not(:hover):not(.active) {
|
||||
drawer-title::after {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
drawer-navigation-helper,
|
||||
drawer-wrap {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
z-index: 3;
|
||||
|
||||
drawer-title::after {
|
||||
background-color: var(--lbry-teal-4);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
drawer-title {
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
cursor: default;
|
||||
display: flex;
|
||||
line-height: 3;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
&::after {
|
||||
width: 100%; height: 1px;
|
||||
bottom: -1px; left: 0;
|
||||
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
drawer-wrap {
|
||||
width: 100%;
|
||||
top: 5rem; left: 0;
|
||||
|
||||
background-color: var(--lbry-white);
|
||||
border-top: 1px solid var(--lbry-gray-1);
|
||||
padding-top: 2rem;
|
||||
padding-bottom: 2rem;
|
||||
position: absolute;
|
||||
|
||||
&::after {
|
||||
width: 100vw; height: calc(100vh - 5rem);
|
||||
top: 5rem; left: 0;
|
||||
|
||||
background-color: var(--lbry-black);
|
||||
content: "";
|
||||
opacity: 0.3;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
||||
drawer-children {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
drawer-child {
|
||||
padding: var(--spacing-s);
|
||||
border: 2px solid;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:not(:hover) {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: var(--lbry-gray-1);
|
||||
padding-left: var(--spacing-m);
|
||||
|
||||
> a {
|
||||
color: var(--lbry-teal-4);
|
||||
}
|
||||
}
|
||||
|
||||
&:not([full-width]) {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
&[full-width] {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
span {
|
||||
display: flex;
|
||||
padding-top: 0.25rem;
|
||||
padding-bottom: 0.25rem;
|
||||
}
|
||||
}
|
||||
45
web/components/sass/table/_index.scss
Normal file
45
web/components/sass/table/_index.scss
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
|
||||
table {
|
||||
width: 100%;
|
||||
background-color: var(--lbry-white);
|
||||
position: relative;
|
||||
|
||||
thead {
|
||||
cursor: default;
|
||||
font-size: 80%;
|
||||
position: relative;
|
||||
|
||||
tr {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
tr {
|
||||
&:not(:last-of-type) {
|
||||
td {
|
||||
border-bottom: 1px solid var(--lbry-gray-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
|
||||
th {
|
||||
border-bottom: 2px solid var(--lbry-black);
|
||||
letter-spacing: 0.1rem;
|
||||
text-align: left;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: bolder;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue