Compare commits
No commits in common. "master" and "app-fixes" have entirely different histories.
31 changed files with 1235 additions and 5378 deletions
12
README.md
12
README.md
|
|
@ -17,7 +17,7 @@ If you are using `@lbry/components`, you can safely remove [@lbry/color](https:/
|
|||
|
||||
### Demo
|
||||
|
||||
[https://lbryio.github.io/components](https://lbryio.github.io/components)
|
||||
Check out `index.html` in the `dist` folder.
|
||||
|
||||
|
||||
|
||||
|
|
@ -49,16 +49,6 @@ They are nearly identical, save for `--watch` and `--update`. Please refer to th
|
|||
|
||||
|
||||
|
||||
### 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
dist/badge.css
vendored
1
dist/badge.css
vendored
|
|
@ -1 +0,0 @@
|
|||
.badge,.badge--alert,.badge--free,.badge--cost,.badge--tag-mature,.badge--tag{height:var(--height-badge);border-radius:var(--border-radius);font-size:var(--font-small);padding:var(--spacing-xs) var(--spacing-xs);white-space:nowrap;user-select:none;cursor:pointer;align-items:center}.badge--tag{background-color:var(--color-tag-bg);color:var(--color-tag)}.badge--tag:hover{background-color:var(--color-tag-bg-hover);color:var(--color-tag-hover)}.badge--tag-mature{background-color:var(--color-tertiary-alt);color:var(--color-tertiary)}.badge--cost{background-color:var(--color-cost);color:var(--color-black);line-height:1}.badge--free{background-color:var(--color-secondary-alt);color:var(--color-secondary)}.badge--alert{background-color:var(--color-danger-alt);color:var(--color-danger)}/*# sourceMappingURL=badge.css.map */
|
||||
1
dist/badge.css.map
vendored
1
dist/badge.css.map
vendored
|
|
@ -1 +0,0 @@
|
|||
{"version":3,"sourceRoot":"","sources":["../sass/badge.scss"],"names":[],"mappings":"AAAA,8EACE,2BACA,mCACA,4BACA,4CACA,mBACA,iBACA,eACA,mBAGF,YAEE,qCACA,uBAEA,kBACE,2CACA,6BAIJ,mBAEE,2CACA,4BAGF,aAEE,mCACA,yBACA,cAGF,aAEE,4CACA,6BAGF,cAEE,yCACA","file":"badge.css"}
|
||||
1
dist/button.css
vendored
1
dist/button.css
vendored
|
|
@ -1 +0,0 @@
|
|||
.button{display:inline-block;position:relative;white-space:nowrap;text-decoration:none;cursor:pointer}.button:disabled{opacity:.5}.button--primary,.button--secondary,.button--alt,.button--link,.button--danger{border-radius:var(--border-radius)}.button--primary,.button--secondary,.button--alt{height:var(--height-button);border-radius:var(--border-radius);padding:var(--spacing-s) var(--spacing-m);line-height:1.2;font-weight:var(--font-weight-bold)}.button--primary{background-color:var(--color-button-primary-bg);color:var(--color-button-primary-text)}.button--primary:hover{color:var(--color-button-primary-hover-text);background-color:var(--color-button-primary-bg-hover)}.button--secondary{background-color:var(--color-button-secondary-bg);color:var(--color-button-secondary-text)}.button--secondary:hover{background-color:var(--color-button-secondary-bg-hover)}.button--alt{background-color:var(--color-button-alt-bg);color:var(--color-button-alt-text)}.button--alt:hover{background-color:var(--color-button-alt-bg-hover)}.button--icon{width:5rem;height:5rem;background-repeat:no-repeat;background-size:50%;border-radius:50%;transition:background-color .2s;background-color:var(--color-primary)}.button--icon:hover{background-color:var(--color-button-primary-bg-hover)}.button--icon.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--icon.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--link,.button--danger{color:var(--color-link);transition:color .2s;word-break:break-all;font-weight:var(--font-weight-bold)}.button--link:hover,.button--danger:hover{text-decoration:underline;color:var(--color-link-hover)}.button--danger{color:var(--color-error)}/*# sourceMappingURL=button.css.map */
|
||||
1
dist/button.css.map
vendored
1
dist/button.css.map
vendored
|
|
@ -1 +0,0 @@
|
|||
{"version":3,"sourceRoot":"","sources":["../sass/button.scss"],"names":[],"mappings":"AAAA,QACE,qBACA,kBACA,mBACA,qBACA,eAEA,iBACE,WAIJ,+EAIE,mCAGF,iDAGE,4BACA,mCACA,0CACA,gBACA,oCAGF,iBACE,gDACA,uCAEA,uBACE,6CACA,sDAIJ,mBACE,kDACA,yCAEA,yBACE,wDAIJ,aACE,4CACA,mCAEA,mBACE,kDAIJ,cACE,WACA,YACA,4BACA,oBACA,kBACA,gCACA,sCAEA,oBACE,sDAGF,2BACE,mTACA,8CAGF,2BACE,q1BACA,8CAIJ,8BACE,wBACA,qBACA,qBACA,oCAEA,0CACE,0BACA,8BAIJ,gBAEE","file":"button.css"}
|
||||
1
dist/form.css
vendored
1
dist/form.css
vendored
File diff suppressed because one or more lines are too long
1
dist/form.css.map
vendored
1
dist/form.css.map
vendored
|
|
@ -1 +0,0 @@
|
|||
{"version":3,"sourceRoot":"","sources":["../sass/form.scss","../sass/init/_mixins.scss"],"names":[],"mappings":"AAEA,sBAGE,2BACA,mCACA,iBACA,yBACA,uCACA,uCACA,+BACA,8BAEA,wCCyLA,wCDrLA,6DACE,qCACA,WAGF,iDACE,WAEA,mEACE,WAIJ,0DACE,YACA,aACA,wCAIJ,sCAGE,eAGF,OACE,gcACA,+BACA,4BACA,qBACA,+BACA,8BAGF,+BACE,aACA,mBACA,8BAGE,olBACE,aAYJ,++DAME,4BAGF,mSACE,4BAGF,oOACE,gBAGF,uXAEE,WAIJ,oDAGE,aACA,sBAGF,MACE,4BACA,+BACA,qBACA,iCAGF,2BACE,aAEA,gHAEE,SAGF,uDACE,0BACA,6BACA,kBAGF,yDACE,yBACA,4BACA,qCAIJ,iBAEE,kBAEA,gHAEE,8BACA,6BACA,kBACA,YACA,OACA,UACA,6BAEA,4KACE,eACA,oBAIJ,6BACE,kBACA,qBACA,SACA,2BACA,6DACA,kCAEA,6CACE,8CAIA,yDACE,oDAKN,wFAEE,kBACA,WAIF,oKAEE,aAIF,oMAEE,WAGF,gMCYA,wCDJA,wBACE,8BACA,6BACA,2CACA,mCACA,SACA,SAIF,uBACE,WACA,WACA,sBACA,wBACA,uCACA,yBACA,SACA,QAKF,yBACE,kBAIF,qBACE,2BACA,0BACA,2CACA,8CACA,SACA,SAIF,oBACE,YACA,WACA,kBACA,wCACA,SACA,QAIJ,cACE,aACA,8BACA,WAEA,gBACE,UACA,kBAEA,8BACE,gBAEF,6BACE","file":"form.css"}
|
||||
2
dist/index.css
vendored
2
dist/index.css
vendored
File diff suppressed because one or more lines are too long
2
dist/index.css.map
vendored
2
dist/index.css.map
vendored
File diff suppressed because one or more lines are too long
388
dist/index.html
vendored
Normal file
388
dist/index.html
vendored
Normal file
|
|
@ -0,0 +1,388 @@
|
|||
<!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="./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-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-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-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-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"/>
|
||||
<button title="Subscribe to our technical newsletter" type="button">Subscribe</button>
|
||||
</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>
|
||||
1
dist/section.css
vendored
1
dist/section.css
vendored
|
|
@ -1 +0,0 @@
|
|||
/*# sourceMappingURL=section.css.map */
|
||||
1
dist/section.css.map
vendored
1
dist/section.css.map
vendored
|
|
@ -1 +0,0 @@
|
|||
{"version":3,"sourceRoot":"","sources":[],"names":[],"mappings":"","file":"section.css"}
|
||||
1
dist/table.css
vendored
1
dist/table.css
vendored
|
|
@ -1 +0,0 @@
|
|||
.table{width:100%;position:relative}.table th,.table td{overflow:hidden}.table th:first-of-type,.table td:first-of-type{padding-left:var(--spacing-l)}.table th:last-of-type,.table td:last-of-type{padding-right:var(--spacing-l)}.table thead{cursor:default;position:relative}.table thead th{border-bottom:1px solid var(--color-border)}.table tr:not(:last-of-type) td{border-bottom:1px solid var(--color-border)}.table tr:nth-child(2n){background-color:var(--color-table-highlight)}.table th,.table td{padding:.5rem 1rem}th{text-align:left}.table--fixed{table-layout:fixed}.table--condensed td,.table--condensed th{padding:.5rem}.table--condensed td:first-of-type,.table--condensed th:first-of-type{padding-left:0}.table--condensed td:last-of-type,.table--condensed th:last-of-type{padding-right:0}.table--condensed tr:nth-child(2n){background-color:transparent}.table__item-label{font-size:var(--font-multiplier-small);font-weight:300;color:var(--color-text-subtitle)}.table__item--align-right{text-align:right}/*# sourceMappingURL=table.css.map */
|
||||
1
dist/table.css.map
vendored
1
dist/table.css.map
vendored
|
|
@ -1 +0,0 @@
|
|||
{"version":3,"sourceRoot":"","sources":["../sass/table.scss"],"names":[],"mappings":"AAAA,OACE,WACA,kBAEA,oBAEE,gBAEA,gDACE,8BAGF,8CACE,+BAIJ,aACE,eACA,kBAEA,gBACE,4CAMA,gCACE,4CAIJ,wBACE,8CAIJ,oBAEE,mBAIJ,GACE,gBAOF,cACE,mBAIA,0CAEE,cAEA,sEACE,eAGF,oEACE,gBAKF,mCACE,6BAKN,mBACE,uCACA,gBACA,iCAGF,0BACE","file":"table.css"}
|
||||
298
docs/index.html
298
docs/index.html
|
|
@ -1,298 +0,0 @@
|
|||
<!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="../dist/index.css" /> -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lbryio/components@master/dist/index.css"/>
|
||||
|
||||
<style>
|
||||
body {
|
||||
padding: 5rem;
|
||||
max-width: 110rem;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
li {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
.docs__color-row {
|
||||
margin-bottom: var(--spacing-s);
|
||||
}
|
||||
|
||||
.docs__color {
|
||||
display: inline-block;
|
||||
height: 100px;
|
||||
width: 250px;
|
||||
border-radius: 5px;
|
||||
padding: var(--spacing-s);
|
||||
margin-right: var(--spacing-s);
|
||||
color: var(--color-text-inverse);
|
||||
}
|
||||
|
||||
.docs__color h3 {
|
||||
margin-bottom: var(--spacing-s);
|
||||
}
|
||||
|
||||
.docs__color.docs__color--primary {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-primary-alt);
|
||||
}
|
||||
.docs__color.docs__color--primary-alt {
|
||||
color: var(--color-primary);
|
||||
background-color: var(--color-primary-alt);
|
||||
}
|
||||
.docs__color.docs__color--secondary {
|
||||
background-color: var(--color-secondary);
|
||||
}
|
||||
.docs__color.docs__color--secondary-alt {
|
||||
background-color: var(--color-secondary-alt);
|
||||
color: var(--color-secondary);
|
||||
}
|
||||
.docs__color.docs__color--tertiary {
|
||||
background-color: var(--color-tertiary);
|
||||
}
|
||||
.docs__color.docs__color--tertiary-alt {
|
||||
background-color: var(--color-tertiary-alt);
|
||||
color: var(--color-tertiary);
|
||||
}
|
||||
.docs__color.docs__color--danger {
|
||||
background-color: var(--color-danger);
|
||||
}
|
||||
.docs__color.docs__color--danger-alt {
|
||||
background-color: var(--color-danger-alt);
|
||||
color: var(--color-danger);
|
||||
}
|
||||
.docs__color.docs__color--warning {
|
||||
background-color: var(--color-warning);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.title--large {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.title--section {
|
||||
font-weight: 700;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.card--inline {
|
||||
border-radius: 5px;
|
||||
border: 1px solid var(--color-gray-3);
|
||||
margin-top: var(--spacing-s);
|
||||
}
|
||||
|
||||
.card__header {
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.card__header,
|
||||
.card__body {
|
||||
padding: var(--spacing-l);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<h1 class="title--large">@lbry/components</h1>
|
||||
<p class="section__subtitle">
|
||||
Styling for shared components across LBRY properties
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<section class="section">
|
||||
<h2 class="title--section">Font</h2>
|
||||
<div class="card--inline">
|
||||
<div class="card__header">
|
||||
<h3 class="title">Inter</h3>
|
||||
<p class="subtitle">
|
||||
<a href="https://github.com/rsms/inter" class="button--link"
|
||||
>https://github.com/rsms/inter</a
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
<div class="card__body">
|
||||
<ul>
|
||||
<li style="font-weight: 300;">Inter Light - 300</li>
|
||||
<li style="font-weight: 400;">Inter Regular - 400</li>
|
||||
<li style="font-weight: 700;">Inter Bold - 700</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="section">
|
||||
<h2 class="title--section">Color</h2>
|
||||
<div class="card--inline">
|
||||
<div class="card__body">
|
||||
<div class="docs__color-row">
|
||||
<div class="docs__color docs__color--primary">
|
||||
<h3>Primary</h3>
|
||||
<code>#xxx</code><br />
|
||||
<code>--color-primary</code>
|
||||
</div>
|
||||
<div class="docs__color docs__color--primary-alt">
|
||||
<h3>Primary Alt</h3>
|
||||
<code>#xxx</code><br />
|
||||
<code>--color-primary-alt</code>
|
||||
</div>
|
||||
<div class="docs__color docs__color--secondary">
|
||||
<h3>Secondary</h3>
|
||||
<code>#xxx</code><br />
|
||||
<code>--color-secondary</code>
|
||||
</div>
|
||||
<div class="docs__color docs__color--secondary-alt">
|
||||
<h3>Secondary Alt</h3>
|
||||
<code>#xxx</code><br />
|
||||
<code>--color-secondary-alt</code>
|
||||
</div>
|
||||
</div>
|
||||
<div class="docs__color-row">
|
||||
<div class="docs__color docs__color--tertiary">
|
||||
<h3>Tertiary</h3>
|
||||
<code>#xxx</code><br />
|
||||
<code>--color-tertiary</code>
|
||||
</div>
|
||||
<div class="docs__color docs__color--tertiary-alt">
|
||||
<h3>Tertiary Alt</h3>
|
||||
<code>#xxx</code><br />
|
||||
<code>--color-tertiary-alt</code>
|
||||
</div>
|
||||
<div class="docs__color docs__color--danger">
|
||||
<h3>Danger</h3>
|
||||
<code>#xxx</code><br />
|
||||
<code>--color-danger</code>
|
||||
</div>
|
||||
<div class="docs__color docs__color--danger-alt">
|
||||
<h3>Danger Alt</h3>
|
||||
<code>#xxx</code><br />
|
||||
<code>--color-danger-alt</code>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="docs__color docs__color--warning">
|
||||
<h3>Warning</h3>
|
||||
<code>#xxx</code><br />
|
||||
<code>--color-warning</code>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="section">
|
||||
<h2 class="title--section">Buttons</h2>
|
||||
<div class="card--inline">
|
||||
<div class="card__body">
|
||||
<button class="button button--primary">Primary</button>
|
||||
<button class="button button--secondary">Secondary</button>
|
||||
<button class="button button--link">A Link</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="section">
|
||||
<h2 class="title--section">Badges</h2>
|
||||
<div class="card--inline">
|
||||
<div class="card__body">
|
||||
<button class="button badge--tag">gaming</button>
|
||||
<button class="button badge--tag-mature">pr0n</button>
|
||||
<button class="button badge--cost">12 LBC</button>
|
||||
<button class="button badge--alert">Warning</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="section">
|
||||
<h2 class="title--section">Form Elements</h2>
|
||||
<div class="card--inline">
|
||||
<div class="card__body">
|
||||
<fieldset-section>
|
||||
<label for="name">Name</label>
|
||||
<input id="name" placeholder="Cool guy Sean" type="text" />
|
||||
</fieldset-section>
|
||||
|
||||
<fieldset-section>
|
||||
<label for="emailAddress">Subscribe to our newsletter</label>
|
||||
|
||||
<input-submit>
|
||||
<input
|
||||
id="emailAddress"
|
||||
placeholder="you@domain.tld"
|
||||
type="text"
|
||||
/>
|
||||
<button
|
||||
class="button button--secondary"
|
||||
title="Subscribe to our technical newsletter"
|
||||
>
|
||||
Subscribe
|
||||
</button>
|
||||
</input-submit>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card--inline">
|
||||
<div class="card__body">
|
||||
<fieldset-section>
|
||||
<fieldset-section class="checkbox">
|
||||
<label for="test-checkbox-1">Checkbox</label>
|
||||
<input id="test-checkbox-1" name="check" type="checkbox" />
|
||||
</fieldset-section>
|
||||
<fieldset-section class="checkbox">
|
||||
<label for="test-checkbox-2">Another</label>
|
||||
<input id="test-checkbox-2" name="check-2" type="checkbox" />
|
||||
</fieldset-section>
|
||||
</fieldset-section>
|
||||
<fieldset-section class="radio">
|
||||
<label for="test-radio-1">Radio</label>
|
||||
<input id="test-radio-1" name="check" type="radio" />
|
||||
</fieldset-section>
|
||||
<fieldset-section class="radio">
|
||||
<label for="test-radio-2">Another Radio</label>
|
||||
<input id="test-radio-2" name="check-2" type="radio" />
|
||||
</fieldset-section>
|
||||
<fieldset-section class="radio">
|
||||
<label for="test-radio-2">Another Radio</label>
|
||||
<input id="test-radio-2" name="check-2" type="radio" />
|
||||
</fieldset-section>
|
||||
<fieldset-section class="radio">
|
||||
<label for="test-radio-2">Another Radio</label>
|
||||
<input id="test-radio-2" name="check-2" type="radio" />
|
||||
</fieldset-section>
|
||||
<fieldset-section class="radio">
|
||||
<label for="test-radio-1">Radio</label>
|
||||
<input id="test-radio-1" name="check" type="radio" />
|
||||
</fieldset-section>
|
||||
<fieldset-section class="radio">
|
||||
<label for="test-radio-2">Another Radio</label>
|
||||
<input id="test-radio-2" name="check-2" type="radio" />
|
||||
</fieldset-section>
|
||||
<fieldset-section class="radio">
|
||||
<label for="test-radio-2">Another Radio</label>
|
||||
<input id="test-radio-2" name="check-2" type="radio" />
|
||||
</fieldset-section>
|
||||
<fieldset-section class="radio">
|
||||
<label for="test-radio-2">Another Radio</label>
|
||||
<input id="test-radio-2" name="check-2" type="radio" />
|
||||
</fieldset-section>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
25
package.json
25
package.json
|
|
@ -1,19 +1,20 @@
|
|||
{
|
||||
"author": {
|
||||
"email": "sean@lbry.com",
|
||||
"name": "Sean Yesmunt"
|
||||
"email": "paul+github@lbry.io",
|
||||
"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",
|
||||
"@inc/sasslint-config": "^1.1.3",
|
||||
"@lbry/color": "^1.1.0",
|
||||
"husky": "^1.3.1",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"sass": "^1.22.7",
|
||||
"sass-lint": "^1.13.1",
|
||||
"updates": "^8.5.1"
|
||||
"sass": "^1.17.0",
|
||||
"sass-lint": "^1.12.1",
|
||||
"updates": "^7.0.0"
|
||||
},
|
||||
"files": [
|
||||
"dist/style.css",
|
||||
|
|
@ -22,7 +23,7 @@
|
|||
"homepage": "https://github.com/lbryio/components#readme",
|
||||
"husky": {
|
||||
"hooks": {
|
||||
"pre-commit": "npm run build && git add -A :/"
|
||||
"pre-commit": "npm run test:sass && npm run sass:prod && git add -A :/"
|
||||
}
|
||||
},
|
||||
"license": "BSD-3-Clause",
|
||||
|
|
@ -33,12 +34,12 @@
|
|||
"url": "https://github.com/lbryio/components.git"
|
||||
},
|
||||
"scripts": {
|
||||
"dev": "sass --load-path=node_modules --watch sass:dist --style compressed",
|
||||
"build": "sass --load-path=node_modules --update 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",
|
||||
"test": "run-s test:*",
|
||||
"test:dependencies": "updates --update ./",
|
||||
"test:sass": "sass-lint --config ./node_modules/@inc/sasslint-config/config.json --verbose",
|
||||
"test:sass": "sass-lint --config ./node_modules/@inc/sasslint-config/config.json --verbose --no-exit",
|
||||
"watch": "npm run sass:dev"
|
||||
},
|
||||
"version": "4.2.5"
|
||||
"version": "2.1.0"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,46 +0,0 @@
|
|||
.badge {
|
||||
height: var(--height-badge);
|
||||
border-radius: var(--border-radius);
|
||||
font-size: var(--font-small);
|
||||
padding: var(--spacing-xs) var(--spacing-xs);
|
||||
white-space: nowrap;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.badge--tag {
|
||||
@extend .badge;
|
||||
background-color: var(--color-tag-bg);
|
||||
color: var(--color-tag);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-tag-bg-hover);
|
||||
color: var(--color-tag-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.badge--tag-mature {
|
||||
@extend .badge;
|
||||
background-color: var(--color-tertiary-alt);
|
||||
color: var(--color-tertiary);
|
||||
}
|
||||
|
||||
.badge--cost {
|
||||
@extend .badge;
|
||||
background-color: var(--color-cost);
|
||||
color: var(--color-black);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.badge--free {
|
||||
@extend .badge;
|
||||
background-color: var(--color-secondary-alt);
|
||||
color: var(--color-secondary);
|
||||
}
|
||||
|
||||
.badge--alert {
|
||||
@extend .badge;
|
||||
background-color: var(--color-danger-alt);
|
||||
color: var(--color-danger);
|
||||
}
|
||||
57
sass/badge/_index.scss
Normal file
57
sass/badge/_index.scss
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
.badge {
|
||||
font-weight: 600;
|
||||
vertical-align: top;
|
||||
white-space: nowrap;
|
||||
|
||||
&:not(.badge--large) {
|
||||
border-radius: 0.2rem;
|
||||
display: inline-block;
|
||||
font-size: 0.8rem;
|
||||
letter-spacing: 0.05rem;
|
||||
line-height: 2;
|
||||
padding-right: var(--spacing-xs);
|
||||
padding-left: var(--spacing-xs);
|
||||
}
|
||||
}
|
||||
|
||||
.badge--cost:not(.badge--large) {
|
||||
background-color: $lbry-yellow-2;
|
||||
color: $lbry-black;
|
||||
|
||||
[data-mode="dark"] & {
|
||||
background-color: $lbry-yellow-3;
|
||||
}
|
||||
}
|
||||
|
||||
.badge--free {
|
||||
background-color: $lbry-blue-2;
|
||||
|
||||
[data-mode="dark"] & {
|
||||
background-color: $lbry-blue-3;
|
||||
color: $lbry-black;
|
||||
}
|
||||
}
|
||||
|
||||
.badge--large {
|
||||
font-size: 4rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.badge--nsfw {
|
||||
background-color: $lbry-grape-2;
|
||||
|
||||
[data-mode="dark"] & {
|
||||
background-color: $lbry-grape-3;
|
||||
color: $lbry-black;
|
||||
}
|
||||
}
|
||||
|
||||
.badge--primary {
|
||||
background-color: $lbry-teal-5;
|
||||
color: $lbry-white;
|
||||
}
|
||||
|
||||
.badge--alert {
|
||||
background-color: $lbry-red-2;
|
||||
color: $lbry-white;
|
||||
}
|
||||
|
|
@ -1,71 +1,38 @@
|
|||
.button {
|
||||
display: inline-block;
|
||||
fill: currentColor;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.button--primary,
|
||||
.button--secondary,
|
||||
.button--alt,
|
||||
.button--link {
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.button--primary,
|
||||
.button--secondary,
|
||||
.button--alt {
|
||||
height: var(--height-button);
|
||||
border-radius: var(--border-radius);
|
||||
padding: var(--spacing-s) var(--spacing-m);
|
||||
line-height: 1.2;
|
||||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
|
||||
.button--primary {
|
||||
background-color: var(--color-button-primary-bg);
|
||||
color: var(--color-button-primary-text);
|
||||
|
||||
&:hover {
|
||||
color: var(--color-button-primary-hover-text);
|
||||
background-color: var(--color-button-primary-bg-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.button--secondary {
|
||||
background-color: var(--color-button-secondary-bg);
|
||||
color: var(--color-button-secondary-text);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-button-secondary-bg-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.button--alt {
|
||||
background-color: var(--color-button-alt-bg);
|
||||
color: var(--color-button-alt-text);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-button-alt-bg-hover);
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.button--constrict {
|
||||
@include constrict(20vw);
|
||||
}
|
||||
|
||||
.button--disabled {
|
||||
opacity: 0.3;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.button--icon {
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
width: 5rem; height: 5rem;
|
||||
|
||||
background-repeat: no-repeat;
|
||||
background-size: 50%;
|
||||
border-radius: 50%;
|
||||
color: $lbry-white;
|
||||
transition: background-color 0.2s;
|
||||
background-color: var(--color-primary);
|
||||
|
||||
&:not(:hover) {
|
||||
background-color: rgba($lbry-black, 0.7);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-button-primary-bg-hover);
|
||||
background-color: $lbry-green-3;
|
||||
}
|
||||
|
||||
&.button--play {
|
||||
|
|
@ -79,19 +46,70 @@
|
|||
}
|
||||
}
|
||||
|
||||
.button--link {
|
||||
color: var(--color-link);
|
||||
transition: color 0.2s;
|
||||
word-break: break-all;
|
||||
font-weight: var(--font-weight-bold);
|
||||
.button--inverse {
|
||||
padding: var(--spacing-xs) var(--spacing-s); // sass-lint:disable-line shorthand-values
|
||||
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 {
|
||||
text-decoration: underline;
|
||||
color: var(--color-link-hover);
|
||||
background-color: $lbry-gray-1;
|
||||
|
||||
[data-mode="dark"] & {
|
||||
background-color: rgba($lbry-white, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button--danger {
|
||||
@extend .button--link;
|
||||
color: var(--color-error);
|
||||
.button--link {
|
||||
transition: color 0.2s;
|
||||
|
||||
&:not(.button--disabled):not(:hover) {
|
||||
color: $lbry-teal-5;
|
||||
|
||||
[data-mode="dark"] & {
|
||||
color: $lbry-teal-3;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.button--disabled):hover {
|
||||
color: $lbry-teal-3;
|
||||
|
||||
[data-mode="dark"] & {
|
||||
color: $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`
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button--uppercase {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
272
sass/form.scss
272
sass/form.scss
|
|
@ -1,272 +0,0 @@
|
|||
@import "init/mixins";
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
height: var(--height-input);
|
||||
border-radius: var(--border-radius);
|
||||
border: 1px solid;
|
||||
color: var(--color-input);
|
||||
border-color: var(--color-input-border);
|
||||
background-color: var(--color-input-bg);
|
||||
padding-right: var(--spacing-s);
|
||||
padding-left: var(--spacing-s);
|
||||
|
||||
&:focus {
|
||||
@include focus;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: var(--color-input-placeholder);
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.4;
|
||||
|
||||
& + label {
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
|
||||
&[type="range"] {
|
||||
height: auto;
|
||||
height: 0.5rem;
|
||||
background-color: var(--color-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
checkbox-element,
|
||||
radio-element,
|
||||
select {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
fieldset-group {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
|
||||
&.fieldset-group--smushed {
|
||||
fieldset-section + fieldset-section {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
fieldset-section,
|
||||
fieldset-group,
|
||||
form,
|
||||
.checkbox,
|
||||
.radio,
|
||||
.form-field--SimpleMDE,
|
||||
.form-field__help {
|
||||
+ fieldset-section,
|
||||
+ fieldset-group,
|
||||
+ form,
|
||||
+ .checkbox,
|
||||
+ .radio,
|
||||
+ .form-field--SimpleMDE {
|
||||
margin-top: var(--spacing-l);
|
||||
}
|
||||
|
||||
+ .form-field__help {
|
||||
margin-top: var(--spacing-s);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
input,
|
||||
select {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
fieldset-section,
|
||||
.checkbox,
|
||||
.radio {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
label {
|
||||
font-size: var(--font-small);
|
||||
color: var(--color-input-label);
|
||||
display: inline-block;
|
||||
margin-bottom: var(--spacing-xxs);
|
||||
}
|
||||
|
||||
input-submit {
|
||||
display: flex;
|
||||
|
||||
& > *:first-child,
|
||||
& > *:nth-child(2) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
& > *:first-child {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
& > *:nth-child(2) {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox,
|
||||
.radio {
|
||||
position: relative;
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
height: var(--height-checkbox);
|
||||
width: var(--height-checkbox);
|
||||
position: absolute;
|
||||
border: none;
|
||||
left: 0;
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
|
||||
&:disabled + label {
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
font-size: var(--font-base);
|
||||
padding-left: calc(var(--height-checkbox) + var(--spacing-s));
|
||||
min-height: var(--height-checkbox);
|
||||
|
||||
&::before {
|
||||
background-color: var(--color-input-toggle-bg);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&::before {
|
||||
background-color: var(--color-input-toggle-bg-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
label::before,
|
||||
label::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
}
|
||||
|
||||
// Hide the checkmark by default
|
||||
input[type="checkbox"] + label::after,
|
||||
input[type="radio"] + label::after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
// Unhide on the checked state
|
||||
input[type="checkbox"]:checked + label::after,
|
||||
input[type="radio"]:checked + label::after {
|
||||
content: "";
|
||||
}
|
||||
|
||||
input[type="checkbox"]:focus + label::before,
|
||||
input[type="radio"]:focus + label::before {
|
||||
@include focus;
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
// Outer box of the fake checkbox
|
||||
label::before {
|
||||
height: var(--height-checkbox);
|
||||
width: var(--height-checkbox);
|
||||
border: 1px solid var(--color-input-border);
|
||||
border-radius: var(--border-radius);
|
||||
left: 0px;
|
||||
top: -1px;
|
||||
}
|
||||
|
||||
// Checkmark of the fake checkbox
|
||||
label::after {
|
||||
height: 6px;
|
||||
width: 12px;
|
||||
border-left: 2px solid;
|
||||
border-bottom: 2px solid;
|
||||
border-color: var(--color-input-toggle);
|
||||
transform: rotate(-45deg);
|
||||
left: 6px;
|
||||
top: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.radio {
|
||||
input[type="radio"] {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
// Outer box of the fake radio
|
||||
label::before {
|
||||
height: var(--height-radio);
|
||||
width: var(--height-radio);
|
||||
border: 1px solid var(--color-input-border);
|
||||
border-radius: calc(var(--height-radio) * 0.5);
|
||||
left: 0px;
|
||||
top: -1px;
|
||||
}
|
||||
|
||||
// Checkmark of the fake radio
|
||||
label::after {
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
border-radius: 50%;
|
||||
background-color: var(--color-secondary);
|
||||
left: 6px;
|
||||
top: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.range__label {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
|
||||
> * {
|
||||
width: 33%;
|
||||
text-align: center;
|
||||
|
||||
&:first-of-type {
|
||||
text-align: left;
|
||||
}
|
||||
&:last-of-type {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fieldset-group {
|
||||
@extend fieldset-group;
|
||||
}
|
||||
|
||||
.fieldset-section {
|
||||
@extend fieldset-section;
|
||||
}
|
||||
|
||||
.input-submit {
|
||||
@extend input-submit;
|
||||
}
|
||||
267
sass/form/_index.scss
Normal file
267
sass/form/_index.scss
Normal file
|
|
@ -0,0 +1,267 @@
|
|||
form {
|
||||
// setting the font size here sizes everything within
|
||||
&:not(:last-child) {
|
||||
margin-bottom: var(--spacing-s);
|
||||
}
|
||||
|
||||
button:not(.button--link),
|
||||
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"],
|
||||
.button--primary {
|
||||
color: $lbry-white;
|
||||
padding-right: var(--spacing-m);
|
||||
padding-left: var(--spacing-m);
|
||||
transition: all 0.2s;
|
||||
|
||||
&:not(:hover) {
|
||||
background-color: $lbry-black;
|
||||
border-color: $lbry-black;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $lbry-teal-3;
|
||||
border-color: $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);
|
||||
}
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border-top: 1px solid $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: $lbry-gray-4;
|
||||
display: inline-block;
|
||||
font-size: smaller;
|
||||
margin-bottom: var(--spacing-xxs);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
[type="email"],
|
||||
[type="text"],
|
||||
select,
|
||||
textarea {
|
||||
&:not(:focus) {
|
||||
border-color: $lbry-black;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: $lbry-teal-5;
|
||||
}
|
||||
}
|
||||
|
||||
input,
|
||||
select {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
legend {
|
||||
padding: var(--spacing-xs) var(--spacing-s); // sass-lint:disable-line shorthand-values
|
||||
border: 1px solid $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: $lbry-black;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: $lbry-black;
|
||||
border-left-color: $lbry-black;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-top-color: $lbry-teal-5;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: $lbry-teal-5;
|
||||
border-left-color: $lbry-teal-5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
checkbox-element {
|
||||
@include tick;
|
||||
|
||||
&:hover {
|
||||
checkbox-toggle,
|
||||
.checkbox-toggle {
|
||||
border-color: $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: $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: $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: $lbry-teal-4;
|
||||
}
|
||||
|
||||
+ label + radio-toggle::before,
|
||||
+ label + .radio-toggle::before {
|
||||
background-color: $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;
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
@charset "utf-8";
|
||||
|
||||
@import "init/color";
|
||||
@import "@lbry/color/lbry-color";
|
||||
@import "init/mixins";
|
||||
@import "init/variables";
|
||||
@import "init/reset";
|
||||
|
|
@ -8,23 +8,6 @@
|
|||
@import "badge";
|
||||
@import "button";
|
||||
@import "form";
|
||||
@import "media";
|
||||
@import "navigation";
|
||||
@import "table";
|
||||
|
||||
// OLD - Deprecated
|
||||
@import "./navigation/index";
|
||||
|
||||
body {
|
||||
cursor: default;
|
||||
font-weight: var(--font-weight-base);
|
||||
font-size: var(--font-base);
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
||||
Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
|
||||
"Segoe UI Symbol";
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 1px;
|
||||
background-color: var(--color-gray-2);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,67 +0,0 @@
|
|||
:root {
|
||||
// Generic colors
|
||||
--color-primary: #257761;
|
||||
--color-primary-alt: #e4f4ef;
|
||||
--color-primary-alt-2: #4b8576;
|
||||
--color-secondary: #295284;
|
||||
--color-secondary-alt: #d9eaff;
|
||||
--color-tertiary: #552470;
|
||||
--color-tertiary-alt: #f7e8ff;
|
||||
--color-danger: #9b2023;
|
||||
--color-danger-alt: #fccdce;
|
||||
--color-warning: #fff58c;
|
||||
--color-cost: #ffd580;
|
||||
--color-focus: #93cff2;
|
||||
--color-border: #ddd;
|
||||
|
||||
--color-black: #111;
|
||||
--color-white: #fdfdfd;
|
||||
--color-white-alt: #fafafa;
|
||||
--color-gray-1: #eff1f4;
|
||||
--color-gray-2: #d8dde1;
|
||||
--color-gray-3: #ced4da;
|
||||
--color-gray-4: #abb1b7;
|
||||
--color-gray-5: #666a6d;
|
||||
|
||||
// Text
|
||||
--color-text: var(--color-black);
|
||||
--color-text-subtitle: var(--color-gray-5);
|
||||
--color-text-inverse: #fdfdfd;
|
||||
|
||||
// Components
|
||||
|
||||
// Button
|
||||
--color-button-primary-bg: var(--color-primary);
|
||||
--color-button-primary-text: var(--color-primary-alt);
|
||||
--color-button-primary-bg-hover: var(--color-primary-alt-2);
|
||||
--color-button-primary-hover-text: var(--color-primary-alt);
|
||||
--color-button-secondary-bg: var(--color-secondary-alt);
|
||||
--color-button-secondary-text: var(--color-secondary);
|
||||
--color-button-secondary-bg-hover: #b9d0e9;
|
||||
--color-button-alt-bg: var(--color-gray-1);
|
||||
--color-button-alt-text: var(--color-text);
|
||||
--color-button-alt-bg-hover: var(--color-gray-2);
|
||||
--color-link: var(--color-primary);
|
||||
--color-link-hover: var(--color-black);
|
||||
|
||||
// Input
|
||||
--color-input-color: #111111;
|
||||
--color-input-label: var(--color-gray-5);
|
||||
--color-input-placeholder: #212529;
|
||||
--color-input-bg: #f2f2f2;
|
||||
--color-input-bg-copyable: #434b53;
|
||||
--color-input-border: var(--color-border);
|
||||
--color-input-border-active: var(--color-secondary);
|
||||
--color-input-toggle: var(--color-secondary);
|
||||
--color-input-toggle-bg: var(--color-gray-1);
|
||||
--color-input-toggle-bg-hover: var(--color-secondary-alt);
|
||||
|
||||
// Table
|
||||
--color-table-highlight: var(--color-white-alt);
|
||||
|
||||
// Tag
|
||||
--color-tag: var(--color-gray-5);
|
||||
--color-tag-bg: var(--color-button-alt-bg);
|
||||
--color-tag-hover: var(--color-button-alt-text);
|
||||
--color-tag-bg-hover: var(--color-button-alt-bg-hover);
|
||||
}
|
||||
|
|
@ -3,18 +3,6 @@
|
|||
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;
|
||||
|
|
@ -54,7 +42,7 @@
|
|||
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");
|
||||
url("#{$relative-font-path}/#{$font-weight}.woff") format("woff");
|
||||
// sass-lint:enable indentation
|
||||
}
|
||||
|
||||
|
|
@ -64,7 +52,7 @@
|
|||
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");
|
||||
url("#{$relative-font-path}/#{$font-weight}i.woff") format("woff");
|
||||
// sass-lint:enable indentation
|
||||
}
|
||||
}
|
||||
|
|
@ -74,9 +62,7 @@
|
|||
}
|
||||
|
||||
@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";
|
||||
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 {
|
||||
|
|
@ -94,7 +80,7 @@
|
|||
@mixin line-clamp(
|
||||
$element-height: 2rem,
|
||||
$row-count: 2,
|
||||
$fade-color: var(--lbry-white),
|
||||
$fade-color: $lbry-white,
|
||||
$computed-position: relative
|
||||
) {
|
||||
height: $element-height;
|
||||
|
|
@ -102,16 +88,10 @@
|
|||
position: $computed-position;
|
||||
|
||||
&::after {
|
||||
width: 50%;
|
||||
height: calc(#{$element-height} / #{$row-count});
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
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%
|
||||
);
|
||||
background-image: linear-gradient(to right, rgba($lbry-white, 0), #{$fade-color} 80%);
|
||||
content: "";
|
||||
position: absolute;
|
||||
}
|
||||
|
|
@ -135,12 +115,7 @@
|
|||
animation-name: loading-animation;
|
||||
animation-timing-function: linear;
|
||||
background-color: transparent;
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
var(--color-gray-3) 10%,
|
||||
transparent 80%,
|
||||
var(--color-gray-3) 100%
|
||||
);
|
||||
background-image: linear-gradient(to right, $lbry-gray-3 10%, transparent 80%, $lbry-gray-3 100%);
|
||||
background-repeat: repeat;
|
||||
background-size: 500px;
|
||||
|
||||
|
|
@ -162,10 +137,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@mixin selection(
|
||||
$background-color: var(--lbry-white),
|
||||
$text-color: var(--lbry-black)
|
||||
) {
|
||||
@mixin selection($background-color: $lbry-white, $text-color: $lbry-black) {
|
||||
&::selection {
|
||||
background-color: $background-color;
|
||||
color: $text-color;
|
||||
|
|
@ -196,34 +168,61 @@
|
|||
}
|
||||
}
|
||||
|
||||
@mixin focus {
|
||||
box-shadow: 0 0 0 3px var(--color-focus);
|
||||
@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: $lbry-teal-4;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
padding-left: var(--spacing-xs);
|
||||
transition: color 0.2s;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin underline(
|
||||
$text-color: var(--lbry-black),
|
||||
$whitespace-color: var(--lbry-white)
|
||||
) {
|
||||
@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;
|
||||
z-index: 5;
|
||||
|
||||
&::before {
|
||||
width: 100%; height: 100%;
|
||||
top: 0; left: 0;
|
||||
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin underline($text-color: $lbry-black, $whitespace-color: $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-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;
|
||||
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
|
||||
@-moz-document url-prefix() { // sass-lint:disable-line empty-args
|
||||
background-position: 0 90%, 100% 90%, 0 90%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
html {
|
||||
box-sizing: border-box;
|
||||
font-size: 12px;
|
||||
text-rendering: optimizeLegibility;
|
||||
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
|
@ -9,8 +10,7 @@ html {
|
|||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
margin: 0; padding: 0;
|
||||
|
||||
border: none;
|
||||
box-sizing: inherit;
|
||||
|
|
@ -55,7 +55,6 @@ input,
|
|||
select,
|
||||
textarea {
|
||||
background-color: transparent;
|
||||
border-radius: 0;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
|
|
@ -75,7 +74,6 @@ h4,
|
|||
h5,
|
||||
h6 {
|
||||
font-weight: normal;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
ol,
|
||||
|
|
@ -87,6 +85,10 @@ ul {
|
|||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
table {
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
|
@ -108,20 +110,19 @@ dt {
|
|||
}
|
||||
|
||||
img {
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
max-height: 100%;
|
||||
width: auto; max-width: 100%;
|
||||
height: auto; max-height: 100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: transparent;
|
||||
line-height: inherit;
|
||||
color: inherit;
|
||||
|
||||
&:not(:disabled) {
|
||||
cursor: pointer;
|
||||
|
|
@ -133,9 +134,8 @@ button {
|
|||
}
|
||||
|
||||
hr {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: var(--color-gray-1);
|
||||
width: 100%; height: 1px;
|
||||
background-color: $lbry-gray-1;
|
||||
}
|
||||
|
||||
input {
|
||||
|
|
@ -147,12 +147,17 @@ input {
|
|||
opacity: 0.2;
|
||||
}
|
||||
|
||||
&:not(:disabled) {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
&::-webkit-search-cancel-button {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
border-radius: 0;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
|
|
@ -168,12 +173,14 @@ textarea {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media print {
|
||||
// sass-lint:disable-block no-important
|
||||
// Intelligent print styles
|
||||
pre,
|
||||
blockquote {
|
||||
border: 1px solid var(--color-gray-5) !important;
|
||||
border: 1px solid $lbry-gray-5 !important;
|
||||
page-break-inside: avoid !important;
|
||||
}
|
||||
|
||||
|
|
@ -210,15 +217,14 @@ textarea {
|
|||
* {
|
||||
background-color: transparent !important;
|
||||
background-image: none !important;
|
||||
color: var(--lbry-black) !important;
|
||||
color: $lbry-black !important;
|
||||
filter: none !important;
|
||||
text-shadow: none !important;
|
||||
}
|
||||
|
||||
p {
|
||||
a {
|
||||
&[href]::after {
|
||||
// Show hypertext data for links and abbreviations
|
||||
&[href]::after { // Show hypertext data for links and abbreviations
|
||||
content: " (" attr(href) ")" !important;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,37 +1,103 @@
|
|||
:root {
|
||||
--border-radius: 5px;
|
||||
--height-input: 2.5rem;
|
||||
--height-button: 2.5rem;
|
||||
--height-checkbox: 24px;
|
||||
--height-radio: 24px;
|
||||
--height-badge: 24px;
|
||||
|
||||
// Spacing
|
||||
--spacing-xxs: calc(2rem / 5);
|
||||
--spacing-xs: calc(2rem / 4);
|
||||
--spacing-s: calc(2rem / 3);
|
||||
--spacing-m: calc(2rem / 2);
|
||||
--spacing-l: 2rem;
|
||||
--spacing-xl: 3rem;
|
||||
@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
|
||||
--aspect-ratio-bluray: 41.6666666667%; // 12:5
|
||||
--aspect-ratio-panavision: 36.3636363636%; // 11:4
|
||||
--aspect-ratio-sd: 75%; // 4:3
|
||||
--aspect-ratio-standard: 56.25%; // 16:9
|
||||
@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
|
||||
--font-mono: "Fira Code";
|
||||
--font-sans: Inter;
|
||||
--font-serif: Georgia;
|
||||
--font-weight-base: 400;
|
||||
--font-weight-light: 300;
|
||||
--font-weight-bold: 700;
|
||||
--font-base: 14px;
|
||||
--font-body: 1rem;
|
||||
--font-xsmall: 0.7344rem;
|
||||
--font-small: 0.8571rem;
|
||||
--font-large: 1.3rem;
|
||||
--font-title: 1.71rem;
|
||||
--font-heading: 2.94rem;
|
||||
@include root-prop(--font-mono, "Fira Code");
|
||||
@include root-prop(--font-sans, Inter);
|
||||
@include root-prop(--font-serif, Georgia);
|
||||
}
|
||||
|
|
|
|||
192
sass/media/_index.scss
Normal file
192
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: $lbry-white;
|
||||
}
|
||||
}
|
||||
|
||||
.media__thumb {
|
||||
@include thumbnail;
|
||||
}
|
||||
|
||||
.media__title {
|
||||
font-weight: 600;
|
||||
white-space: normal;
|
||||
}
|
||||
|
|
@ -1,49 +1,30 @@
|
|||
drawer-navigation {
|
||||
width: 100%;
|
||||
height: 5rem;
|
||||
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(:last-of-type) {
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
&:not(:hover):not(.active) {
|
||||
&:not(:hover) {
|
||||
drawer-title::after {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
drawer-navigation-helper,
|
||||
drawer-wrap {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
z-index: 3;
|
||||
|
||||
&:hover {
|
||||
drawer-title::after {
|
||||
background-color: var(--color-primary);
|
||||
background-color: $lbry-teal-4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -55,13 +36,10 @@ drawer-title {
|
|||
display: flex;
|
||||
line-height: 3;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
&::after {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
bottom: -1px;
|
||||
left: 0;
|
||||
width: 100%; height: 1px;
|
||||
bottom: -1px; left: 0;
|
||||
|
||||
content: "";
|
||||
position: absolute;
|
||||
|
|
@ -71,22 +49,19 @@ drawer-title {
|
|||
|
||||
drawer-wrap {
|
||||
width: 100%;
|
||||
top: 5rem;
|
||||
left: 0;
|
||||
top: 5rem; left: 0;
|
||||
|
||||
background-color: var(--color-white);
|
||||
border-top: 1px solid var(--color-gray-1);
|
||||
background-color: $lbry-white;
|
||||
border-top: 1px solid $lbry-gray-1;
|
||||
padding-top: 2rem;
|
||||
padding-bottom: 2rem;
|
||||
position: absolute;
|
||||
|
||||
&::after {
|
||||
width: 100vw;
|
||||
height: calc(100vh - 5rem);
|
||||
top: 5rem;
|
||||
left: 0;
|
||||
width: 100vw; height: calc(100vh - 5rem);
|
||||
top: 5rem; left: 0;
|
||||
|
||||
background-color: var(--color-black);
|
||||
background-color: $lbry-black;
|
||||
content: "";
|
||||
opacity: 0.3;
|
||||
pointer-events: none;
|
||||
|
|
@ -111,11 +86,11 @@ drawer-child {
|
|||
}
|
||||
|
||||
&:hover {
|
||||
border-color: var(--color-gray-1);
|
||||
border-color: $lbry-gray-1;
|
||||
padding-left: var(--spacing-m);
|
||||
|
||||
> a {
|
||||
color: var(--lbry-primary);
|
||||
color: $lbry-teal-4;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,86 +0,0 @@
|
|||
.table {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
th,
|
||||
td {
|
||||
overflow: hidden;
|
||||
|
||||
&:first-of-type {
|
||||
padding-left: var(--spacing-l);
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
padding-right: var(--spacing-l);
|
||||
}
|
||||
}
|
||||
|
||||
thead {
|
||||
cursor: default;
|
||||
position: relative;
|
||||
|
||||
th {
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
}
|
||||
|
||||
tr {
|
||||
&:not(:last-of-type) {
|
||||
td {
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(2n) {
|
||||
background-color: var(--color-table-highlight);
|
||||
}
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
th {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
td {
|
||||
// white-space: nowrap;
|
||||
}
|
||||
|
||||
.table--fixed {
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
.table--condensed {
|
||||
td,
|
||||
th {
|
||||
padding: 0.5rem;
|
||||
|
||||
&:first-of-type {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
tr {
|
||||
&:nth-child(2n) {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table__item-label {
|
||||
font-size: var(--font-multiplier-small);
|
||||
font-weight: 300;
|
||||
color: var(--color-text-subtitle);
|
||||
}
|
||||
|
||||
.table__item--align-right {
|
||||
text-align: right;
|
||||
}
|
||||
44
sass/table/_index.scss
Normal file
44
sass/table/_index.scss
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
|
||||
table {
|
||||
width: 100%;
|
||||
background-color: $lbry-white;
|
||||
position: relative;
|
||||
|
||||
thead {
|
||||
cursor: default;
|
||||
position: relative;
|
||||
|
||||
tr {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
tr {
|
||||
&:not(:last-of-type) {
|
||||
td {
|
||||
border-bottom: 1px solid $lbry-gray-1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
|
||||
th {
|
||||
border-bottom: 2px solid $lbry-black;
|
||||
letter-spacing: 0.1rem;
|
||||
text-align: left;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: bolder;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue