LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

init css vars implementation

Browse source
This commit is contained in:
btzr-io 2017-08-12 23:03:15 -06:00
parent f5e69c57d2
commit a655bdd1d6
1 changed files with 39 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

72
ui/scss/_global.scss
View file

@ -1,46 +1,50 @@
@charset "UTF-8";
$spacing-vertical: 24px;
:root {
$padding-button: 12px;
$padding-text-link: 4px;
--spacing-vertical: 24px;
$color-primary: #155B4A;
$color-primary-light: saturate(lighten($color-primary, 50%), 20%);
$color-light-alt: hsl(hue($color-primary), 15, 85);
$color-text-dark: #000;
$color-black-transparent: rgba(32,32,32,0.9);
$color-help: rgba(0,0,0,.6);
$color-notice: #8a6d3b;
$color-error: #a94442;
$color-load-screen-text: #c3c3c3;
$color-canvas: #f5f5f5;
$color-bg: #ffffff;
$color-bg-alt: #D9D9D9;
$color-money: #216C2A;
$color-meta-light: #505050;
$color-form-border: rgba(160,160,160,.5);
--padding-button: 12px;
--padding-text-link: 4px;
$font-size: 16px;
$font-line-height: 1.3333;
--color-primary: #155B4A;
/* --color-primary-light: saturate(lighten(--color-primary, 50%), 20%); */
/* --color-light-alt: hsl(hue(--color-primary), 15, 85); */
--color-text-dark: #000;
--color-black-transparent: rgba(32,32,32,0.9);
--color-help: rgba(0,0,0,.6);
--color-notice: #8a6d3b;
--color-error: #a94442;
--color-load-screen-text: #c3c3c3;
--color-canvas: #f5f5f5;
--color-bg: #ffffff;
--color-bg-alt: #D9D9D9;
--color-money: #216C2A;
--color-meta-light: #505050;
--color-form-border: rgba(160,160,160,.5);
$mobile-width-threshold: 801px;
$max-content-width: 1000px;
$max-text-width: 660px;
--font-size: 16px;
--font-line-height: 1.3333;
$width-page-constrained: 800px;
$width-input-text: 330px;
--mobile-width-threshold: 801px;
--max-content-width: 1000px;
--max-text-width: 660px;
$height-button: $spacing-vertical * 1.5;
$height-header: $spacing-vertical * 2.5;
$height-video-embedded: $width-page-constrained * 9 / 16;
--width-page-constrained: 800px;
--width-input-text: 330px;
$box-shadow-layer: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
$box-shadow-focus: 2px 4px 4px 0 rgba(0,0,0,.14),2px 5px 3px -2px rgba(0,0,0,.2),2px 3px 7px 0 rgba(0,0,0,.12);
--height-button: --spacing-vertical * 1.5;
--height-header: --spacing-vertical * 2.5;
--height-video-embedded: --width-page-constrained * 9 / 16;
$transition-standard: .225s ease;
--box-shadow-layer: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
--box-shadow-focus: 2px 4px 4px 0 rgba(0,0,0,.14),2px 5px 3px -2px rgba(0,0,0,.2),2px 3px 7px 0 rgba(0,0,0,.12);
$blur-intensity-nsfw: 20px;
--transition-standard: .225s ease;
--blur-intensity-nsfw: 20px;
}
@mixin clearfix()
{
@ -163,7 +167,7 @@ $blur-intensity-nsfw: 20px;
overflow:hidden;
}
@mixin text-link($color: $color-primary, $hover-opacity: 0.70) {
@mixin text-link($color: var(--color-primary), $hover-opacity: 0.70) {
.icon
{
&:first-child {
@ -183,7 +187,7 @@ $blur-intensity-nsfw: 20px;
&:hover
{
opacity: $hover-opacity;
transition: opacity $transition-standard;
transition: opacity var(--transition-standard);
text-decoration: underline;
.icon {
text-decoration: none;