oysteikt/IT2
Archived
0
0
Fork 0
Code Issues Pull Requests Releases Activity

Update grid elements

Browse Source
This commit is contained in:
Oystein Kristoffer Tveit
2020-04-02 13:24:49 +02:00
parent 31abcf72aa
commit a97909fea7
3 changed files with 130 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
resources/css/main.css
View File

@@ -127,7 +127,7 @@ tr:hover {
margin: auto;
}
.center > :not(table) {
.center > {
display: block;
}
@@ -163,6 +163,7 @@ tr:hover {
}
.textboxGrid * {
display: auto;
size: 100%;
margin: 0px;
padding: 30px 0px;
@@ -170,8 +171,15 @@ tr:hover {
background-color: #787878;
}
.textboxGrid .linkGridElement {
.textboxGrid .gridElement, .textboxGrid .linkGridElement {
border: 1px solid black;
overflow-wrap: break-word;
}
.textboxGrid .gridElement *, .textboxGrid .linkGridElement * {
margin: 3px;
padding: 0px 30px;
background-color: transparent;
}
.textboxGrid .linkGridElement:hover {
@@ -184,8 +192,6 @@ tr:hover {
color: #66D9EF;
}
.textboxGrid .linkGridElement * {
margin: 0px;
padding: 0px;
background-color: transparent;
.hoverable:hover {
background-color: rgba(0, 0, 0, 0.2);
}

112
resources/css/scss/_classes.scss
View File

@@ -1,73 +1,85 @@
.center {
background-color: $grey3;
margin: auto;
margin-bottom: 10%;
width: 70%;
padding: 5%;
height: max-content;
border-radius: $radius;
* { margin: auto;}
background-color: $grey3;
margin: auto;
margin-bottom: 10%;
width: 70%;
padding: 5%;
height: max-content;
border-radius: $radius;
* { margin: auto;}
&>:not(table){ display: block;}
&>:not(table, .textboxGrid){ display: block;}
canvas {
border: 5px solid black;
}
canvas {
border: 5px solid black;
}
}
.inline {
margin: $standardMargin;
* {display: inline-block;}
margin: $standardMargin;
* {display: inline-block;}
}
.leftalign * {
margin: 15px;
text-align: left;
margin: 15px;
text-align: left;
}
.textboxGrid {
display: grid;
justify-content: space-evenly;
align-content: space-evenly;
display: grid;
justify-content: space-evenly;
align-content: space-evenly;
grid: {
column-gap: 20px;
row-gap: 20px;
grid: {
column-gap: 20px;
row-gap: 20px;
template-columns: repeat(auto-fit, minmax(350px, 1fr));
}
template-columns: repeat(auto-fit, minmax(350px, 1fr));
}
* {
display: auto;
size: 100%;
margin: 0px;
padding: 30px 0px;
text-align: center;
background-color: $grey4;
}
.gridElement {
border: 1px solid black;
overflow-wrap: break-word;
* {
margin: 3px;
padding: 0px 30px;
background-color: transparent;
}
}
size: 100%;
margin: 0px;
padding: 30px 0px;
text-align: center;
background-color: $grey4;
.linkGridElement {
@extend .gridElement;
&:hover {
background-color: $grey3;
cursor: pointer;
}
.linkGridElement {
border: 1px solid black;
&:hover {
background-color: $grey3;
cursor: pointer;
}
a:hover {
text-decoration: underline;
color: $linkStill;
}
* {
margin: 0px;
padding: 0px;
background-color: transparent;
}
a:hover {
text-decoration: underline;
color: $linkStill;
}
}
}
.hoverable {
&:hover {
background-color: rgba($color: #000000, $alpha: 0.2);
}
}

112
resources/css/scss/main.scss
View File

@@ -7,94 +7,94 @@
/* General styling */
body {
background-color: $grey1;
color: white;
margin: 0px;
padding: 0px;
background-color: $grey1;
color: white;
margin: 0px;
padding: 0px;
margin: {
right: 2%;
left: 8%;
top: 5%;
}
font: {
family: museo-sans-rounded, sans-serif;
size: 14pt;
weight: 300;
style: normal;
}
margin: {
right: 2%;
left: 8%;
top: 5%;
}
font: {
family: museo-sans-rounded, sans-serif;
size: 14pt;
weight: 300;
style: normal;
}
}
/* Text elements */
h1 {
color: $blue;
text-align: center;
background-color: $grey2;
padding: 15px;
margin-left: 10%;
margin-right: 10%;
border-radius: $radius;
color: $blue;
text-align: center;
background-color: $grey2;
padding: 15px;
margin-left: 10%;
margin-right: 10%;
border-radius: $radius;
}
h2 {
color: $green;
color: $green;
}
a {
color: $linkStill;
&:hover {color: $linkHover;}
color: $linkStill;
&:hover {color: $linkHover;}
}
/* Special elements */
button {
background-color: $grey4;
border: 2px solid $border-color;
color: white;
padding: 4px 12px;
margin: 2px 12px;
font-size: 14pt;
&:hover {background-color: $grey3;}
&:focus {outline:0;}
background-color: $grey4;
border: 2px solid $border-color;
color: white;
padding: 4px 12px;
margin: 2px 12px;
font-size: 14pt;
&:hover {background-color: $grey3;}
&:focus {outline:0;}
&.big {
padding: 15px;
border-radius: $radius;
font-size: 18pt;
}
&.big {
padding: 15px;
border-radius: $radius;
font-size: 18pt;
}
}
/* Inputs */
input {
padding: 4px 12px;
margin: 2px 12px;
font-size: 14pt;
padding: 4px 12px;
margin: 2px 12px;
font-size: 14pt;
}
input[type=color] {
width: 4em;
height: 2em;
background-color: $grey4;
width: 4em;
height: 2em;
background-color: $grey4;
}
input[type=submit] {
@extend button;
@extend button;
}
/* Table elements */
table {
width: 100%;
display: table;
width: 100%;
display: table;
}
tbody {
@@ -108,15 +108,15 @@ tr {
}
td, th {
border: 1px solid $border-color;
padding: 8px;
display: table-cell;
width: auto;
border: 1px solid $border-color;
padding: 8px;
display: table-cell;
width: auto;
}
th {
text-align: left;
background-color: #4CAF50;
text-align: left;
background-color: #4CAF50;
}
tr {