create global scss styles

This commit is contained in:
Ilion Beyst 2022-08-19 19:57:57 +02:00
parent 87f6a9c455
commit 329fc73b94
6 changed files with 32 additions and 40 deletions

View file

@ -14,8 +14,8 @@
<slot /> <slot />
</div> </div>
<style lang="scss"> <style lang="scss" global>
@import "src/styles/variables.scss"; @import "src/styles/global.scss";
.outer-container { .outer-container {
width: 100vw; width: 100vw;

View file

@ -97,7 +97,7 @@
<MatchList {matches} /> <MatchList {matches} />
{#if matches.length > 0} {#if matches.length > 0}
<div class="btn-container"> <div class="btn-container">
<a class="btn-view-more" href={`/matches?bot=${bot["name"]}`}>All matches</a> <a class="btn" href={`/matches?bot=${bot["name"]}`}>All matches</a>
</div> </div>
{/if} {/if}
</div> </div>
@ -118,7 +118,6 @@
</div> </div>
<style lang="scss"> <style lang="scss">
@import "src/styles/variables.scss";
.container { .container {
width: 800px; width: 800px;
max-width: 80%; max-width: 80%;
@ -151,14 +150,6 @@
padding: 24px; padding: 24px;
text-align: center; text-align: center;
} }
.btn-view-more {
color: $btn-text-color;
font-size: 14px;
text-decoration: none;
padding: 6px 16px;
border: 1px solid $btn-border-color;
border-radius: 5px;
}
.versions { .versions {
margin: 30px 0; margin: 30px 0;

View file

@ -107,35 +107,10 @@
</div> </div>
<style lang="scss"> <style lang="scss">
@import "src/styles/variables.scss";
.container { .container {
width: 800px; width: 800px;
margin: 0 auto; margin: 0 auto;
} }
.btn {
color: $btn-text-color;
font-size: 14px;
text-decoration: none;
padding: 6px 16px;
border: 1px solid $btn-border-color;
border-radius: 5px;
}
.btn-group {
display: flex;
}
.btn-group .btn:not(:last-child) {
border-right: none;
}
.btn-group .btn:first-child {
border-radius: 5px 0 0 5px;
}
.btn-group .btn:last-child {
border-radius: 0 5px 5px 0;
}
.page-controls { .page-controls {
display: flex; display: flex;

View file

@ -0,0 +1,27 @@
$btn-text-color: rgb(9, 105, 218);
$btn-border-color: rgba(27, 31, 36, 0.25);
.btn {
color: $btn-text-color;
font-size: 14px;
text-decoration: none;
padding: 6px 16px;
border: 1px solid $btn-border-color;
border-radius: 5px;
}
.btn-group {
display: flex;
}
.btn-group .btn:not(:last-child) {
border-right: none;
}
.btn-group .btn:first-child {
border-radius: 5px 0 0 5px;
}
.btn-group .btn:last-child {
border-radius: 0 5px 5px 0;
}

View file

@ -0,0 +1,2 @@
@forward "./variables.scss";
@forward "./buttons.scss";

View file

@ -1,4 +1 @@
$bg-color: rgb(41, 41, 41); $bg-color: rgb(41, 41, 41);
$btn-text-color: rgb(9, 105, 218);
$btn-border-color: rgba(27, 31, 36, 0.25);