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

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

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

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

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