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

Fixed vars.scss being imported multiple times (#528)

Browse source 
- Seperated breakpoints into a different file
This commit is contained in:
Shiba 2021-12-21 04:27:25 +03:00 committed by GitHub
parent 9a0fde3f33
commit a196f7a3b0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 20 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
ui/scss/all.scss
View file

@ -1,6 +1,7 @@
@charset "utf-8"; @charset "utf-8";
@import 'init/reset'; @import 'init/reset';
@import 'init/breakpoints';
@import 'init/vars'; @import 'init/vars';
@import 'init/mixins'; @import 'init/mixins';
@import 'init/gui'; @import 'init/gui';

2
ui/scss/component/_animation.scss
View file

@ -5,7 +5,7 @@
} }
100% { 100% {
margin-top: $spacing-vertical; margin-top: var(--spacing-vertical);
opacity: 1; opacity: 1;
} }
} }

2
ui/scss/component/_comment-create.scss
View file

@ -1,4 +1,4 @@
@import '../init/vars'; @import '../init/breakpoints';
$thumbnailWidth: 1.5rem; $thumbnailWidth: 1.5rem;
$thumbnailWidthSmall: 1rem; $thumbnailWidthSmall: 1rem;

2
ui/scss/component/_emote-selector.scss
View file

@ -1,4 +1,4 @@
@import '../init/vars'; @import '../init/breakpoints';
.emoteSelector { .emoteSelector {
animation: menu-animate-in var(--animation-duration) var(--animation-style); animation: menu-animate-in var(--animation-duration) var(--animation-style);

2
ui/scss/component/_file-price.scss
View file

@ -1,4 +1,4 @@
@import '../init/vars.scss'; @import '../init/breakpoints';
.filePrice { .filePrice {
position: relative; position: relative;

2
ui/scss/component/_sticker-selector.scss
View file

@ -1,4 +1,4 @@
@import '../init/vars'; @import '../init/breakpoints';
.stickerSelector { .stickerSelector {
animation: menu-animate-in var(--animation-duration) var(--animation-style); animation: menu-animate-in var(--animation-duration) var(--animation-style);

2
ui/scss/component/_view_count.scss
View file

@ -1,4 +1,4 @@
@import '../init/vars'; @import '../init/breakpoints';
.contains_view_count { .contains_view_count {
// accommodating for large view counts on channel overview // accommodating for large view counts on channel overview

2
ui/scss/component/claim-preview-reset.scss
View file

@ -1,4 +1,4 @@
@import '../init/vars'; @import '../init/breakpoints';
.claimPreviewReset { .claimPreviewReset {
display: flex; display: flex;

2
ui/scss/component/notifications-banner.scss
View file

@ -1,4 +1,4 @@
@import '../init/vars'; @import '../init/breakpoints';
.browserNotificationsBanner { .browserNotificationsBanner {
display: flex; display: flex;

5
ui/scss/init/_breakpoints.scss Normal file
View file

@ -0,0 +1,5 @@
$breakpoint-xxsmall: 450px;
$breakpoint-xsmall: 600px;
$breakpoint-small: 900px;
$breakpoint-medium: 1150px;
$breakpoint-large: 1600px;

6
ui/scss/init/_gui.scss
View file

@ -228,7 +228,7 @@ textarea {
display: flex; display: flex;
.column__item:not(:first-child) { .column__item:not(:first-child) {
padding-left: $spacing-width * 2/3; padding-left: calc(var(--spacing-width) * 2 / 3);
flex: 1; flex: 1;
} }
@ -361,11 +361,11 @@ textarea {
border: 3px solid white; border: 3px solid white;
&.qr-code--right-padding { &.qr-code--right-padding {
margin-right: $spacing-vertical * 2/3; margin-right: calc(var(--spacing-vertical) * 2 / 3);
} }
&.qr-code--top-padding { &.qr-code--top-padding {
margin-top: $spacing-vertical * 2/3; margin-top: calc(var(--spacing-vertical) * 2 / 3);
} }
} }

12
ui/scss/init/_vars.scss
View file

@ -1,12 +1,4 @@
// Both of these should probably die and become variables as well @import 'breakpoints';
$spacing-vertical: 2rem;
$spacing-width: 36px;
$breakpoint-xxsmall: 450px;
$breakpoint-xsmall: 600px;
$breakpoint-small: 900px;
$breakpoint-medium: 1150px;
$breakpoint-large: 1600px;
:root { :root {
--border-radius: 10px; --border-radius: 10px;
@ -24,6 +16,8 @@ $breakpoint-large: 1600px;
--spacing-l: 2rem; --spacing-l: 2rem;
--spacing-xl: 3rem; --spacing-xl: 3rem;
--spacing-xxl: 4rem; --spacing-xxl: 4rem;
--spacing-vertical: 2rem;
--spacing-width: 36px;
// Aspect ratio // Aspect ratio
--aspect-ratio-bluray: 41.6666666667%; // 12:5 --aspect-ratio-bluray: 41.6666666667%; // 12:5