KevinMidboe/seasoned
1
0
Fork 0
Code Issues 12 Pull Requests 1 Packages Projects Releases 1 Wiki Activity

Minor fixes formatting document & table styling

Browse Source
This commit is contained in:
Kevin
2022-08-08 18:45:03 +02:00
parent dc69b4086c
commit fde8fd9259
6 changed files with 28 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
public/assets/no-image.svg
View File

@@ -3,7 +3,7 @@
height="900" height="900"
viewBox="0 0 600 900" viewBox="0 0 600 900"
fill="none" fill="none"
xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns="http://www.w3.org/2000/svg"
> >
<rect width="600" height="900" fill="white" /> <rect width="600" height="900" fill="white" />
<path <path
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.3 KiB

After

Width:  |  Height:  |  Size: 6.3 KiB

2
public/assets/no-image_small.svg
View File

@@ -3,7 +3,7 @@
height="900" height="900"
viewBox="0 0 600 900" viewBox="0 0 600 900"
fill="none" fill="none"
xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns="http://www.w3.org/2000/svg"
> >
<rect width="600" height="900" fill="white" /> <rect width="600" height="900" fill="white" />
<path <path
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.3 KiB

After

Width:  |  Height:  |  Size: 6.3 KiB

2
src/index.html
View File

@@ -24,7 +24,7 @@
<meta name="theme-color" content="#081c24" /> <meta name="theme-color" content="#081c24" />
</head> </head>
<body> <body>
<div id="app"></div> <div id="entry"></div>
</body> </body>
<script <script

12
src/scss/main.scss
View File

@@ -72,6 +72,18 @@ img {
} }
} }
.form {
> div,
> input,
> button {
margin-bottom: 1rem;
&:last-child {
margin-bottom: 0px;
}
}
}
.flex { .flex {
display: flex; display: flex;

13
src/scss/variables.scss
View File

@@ -19,6 +19,7 @@
--background-80: rgba(255, 255, 255, 0.8); --background-80: rgba(255, 255, 255, 0.8);
--background-70: rgba(255, 255, 255, 0.7); --background-70: rgba(255, 255, 255, 0.7);
--background-40: rgba(255, 255, 255, 0.4); --background-40: rgba(255, 255, 255, 0.4);
--background-0: rgba(255, 255, 255, 0);
--background-nav-logo: #081c24; --background-nav-logo: #081c24;
--color-green: #01d277; --color-green: #01d277;
@@ -37,6 +38,9 @@
--color-error: rgba(220, 48, 35, 0.8); --color-error: rgba(220, 48, 35, 0.8);
--color-error-highlight: #dc3023; --color-error-highlight: #dc3023;
--table-background-color: #081c24;
--table-header-text-color: white;
--header-size: 90px; --header-size: 90px;
--line-height: 1.5; --line-height: 1.5;
} }
@@ -59,6 +63,9 @@
--background-80: rgba(6, 7, 8, 0.8); --background-80: rgba(6, 7, 8, 0.8);
--background-70: rgba(6, 7, 8, 0.7); --background-70: rgba(6, 7, 8, 0.7);
--background-40: rgba(6, 7, 8, 0.4); --background-40: rgba(6, 7, 8, 0.4);
--background-0: rgba(6, 7, 8, 0);
--table-background-color: black;
--table-header-text-color: white;
} }
} }
@@ -94,6 +101,7 @@ $background-90: var(--background-90) !default;
$background-80: var(--background-80) !default; $background-80: var(--background-80) !default;
$background-70: var(--background-70) !default; $background-70: var(--background-70) !default;
$background-40: var(--background-40) !default; $background-40: var(--background-40) !default;
$background-0: var(--background-0) !default;
$background-dark-85: rgba($dark, 0.85) !default; $background-dark-85: rgba($dark, 0.85) !default;
$background-nav-logo: var(--background-nav-logo) !default; $background-nav-logo: var(--background-nav-logo) !default;
$color-warning: var(--color-warning) !default; $color-warning: var(--color-warning) !default;
@@ -125,6 +133,9 @@ $color-error-highlight: var(--color-error-highlight) !default;
--background-80: rgba(17, 17, 17, 0.8); --background-80: rgba(17, 17, 17, 0.8);
--background-70: rgba(17, 17, 17, 0.8); --background-70: rgba(17, 17, 17, 0.8);
--background-40: rgba(17, 17, 17, 0.4); --background-40: rgba(17, 17, 17, 0.4);
--background-0: rgba(17, 17, 17, 0);
--table-background-color: black;
--table-header-text-color: white;
} }
.light { .light {
@@ -142,4 +153,6 @@ $color-error-highlight: var(--color-error-highlight) !default;
--background-80: rgba(255, 255, 255, 0.8); --background-80: rgba(255, 255, 255, 0.8);
--background-70: rgba(255, 255, 255, 0.7); --background-70: rgba(255, 255, 255, 0.7);
--background-40: rgba(255, 255, 255, 0.4); --background-40: rgba(255, 255, 255, 0.4);
--table-background-color: #081c24;
--table-header-text-color: white;
} }

68
src/scss/vue-data-tablee.css
View File

@@ -1,68 +0,0 @@
.data-tablee {
overflow: hidden;
border: 1px solid #eaedef;
width: 100%;
border-radius: 5px;
border-spacing: 0; }
.data-tablee-cell {
position: relative;
min-height: calc(27px + 4px);
padding: 10px;
border-top: 1px solid #eaedef; }
.data-tablee-row:first-child > .data-tablee-cell {
border-top: 0; }
.data-tablee-cell::before {
position: absolute;
left: 0;
top: 50%;
display: block;
width: 1px;
height: 27px;
background-color: #eaedef;
transform: translateY(-50%);
content: ''; }
.data-tablee-cell:first-child::before {
content: none; }
.data-tablee-cell.-right {
text-align: right; }
.data-tablee-cell.-left {
text-align: left; }
.data-tablee-cell.-center {
text-align: center; }
.data-tablee-cell.-clickable {
cursor: pointer; }
.data-tablee-text {
font-size: 13px;
font-weight: 400;
color: #5e6684; }
.data-tablee-cell.-header {
background-color: #fdfdfd; }
.data-tablee-cell.-header > .data-tablee-text,
.data-tablee-cell.-header > .data-tablee-icon {
display: inline-block;
font-size: 12px;
font-weight: 400;
text-transform: uppercase;
color: #bec0d3; }
.data-tablee-cell.-header > .data-tablee-icon {
opacity: 0;
transition: opacity .3s ease, transform .3s ease; }
.data-tablee-cell.-header.-sortable {
cursor: pointer; }
.data-tablee-cell.-header.-sortable > .data-tablee-icon {
opacity: .2; }
.data-tablee-cell.-header.-sortable:hover > .data-tablee-icon {
opacity: .8; }
.data-tablee-cell.-header.-sortable:active > .data-tablee-icon {
transition: transform .1s ease;
transform: scale(1.5); }
.data-tablee-cell.-header.-sortable.-right {
padding-right: 6px; }
.data-tablee-cell.-header.-sorting > .data-tablee-icon {
opacity: 1; }
.data-tablee-text {
line-height: 1; }