move detailgrid (formgrid) to main css
This commit is contained in:
parent
ce201c5d85
commit
0951e23946
|
@ -1,4 +1,4 @@
|
||||||
@import "fonts.css";
|
@import "fonts.css";
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
font-family: "Fira Sans";
|
font-family: "Fira Sans";
|
||||||
|
@ -180,6 +180,20 @@ table tr:nth-child(2n+1) {
|
||||||
background-color: var(--c-base-highlight);
|
background-color: var(--c-base-highlight);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
img.xs {
|
||||||
|
width: var(--u2);
|
||||||
|
}
|
||||||
|
|
||||||
|
img.s {
|
||||||
|
width: var(--u4);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
img.m {
|
||||||
|
width: var(--u8);
|
||||||
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* NAV
|
* NAV
|
||||||
*/
|
*/
|
||||||
|
@ -299,6 +313,14 @@ label {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
input.linestyle {
|
||||||
|
background-color: transparent;
|
||||||
|
border-bottom: var(--u-4) solid var(--c-primary);
|
||||||
|
border-radius: 0px;
|
||||||
|
padding: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* HERO
|
* HERO
|
||||||
*/
|
*/
|
||||||
|
@ -326,6 +348,35 @@ label {
|
||||||
padding-right: var(--u0);
|
padding-right: var(--u0);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.full-width {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detailgrid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
|
||||||
|
grid-template-rows: auto;
|
||||||
|
grid-column-gap: var(--u0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.detailgrid > .s {
|
||||||
|
grid-column: span 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detailgrid > .m {
|
||||||
|
grid-column: span 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detailgrid > .l {
|
||||||
|
grid-column: span 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detailgrid > .spacer {
|
||||||
|
grid-column: span 3;
|
||||||
|
height: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
.bar-flex {
|
.bar-flex {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
|
@ -1,20 +1,3 @@
|
||||||
img.xs {
|
|
||||||
width: var(--u2);
|
|
||||||
}
|
|
||||||
|
|
||||||
img.s {
|
|
||||||
width: var(--u4);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
img.m {
|
|
||||||
width: var(--u8);
|
|
||||||
}
|
|
||||||
|
|
||||||
.full-width {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
span.checked::after {
|
span.checked::after {
|
||||||
content: "✔️";
|
content: "✔️";
|
||||||
}
|
}
|
||||||
|
@ -22,34 +5,3 @@ span.checked::after {
|
||||||
span.unchecked::after {
|
span.unchecked::after {
|
||||||
content: "❌";
|
content: "❌";
|
||||||
}
|
}
|
||||||
|
|
||||||
input.linestyle {
|
|
||||||
background-color: transparent;
|
|
||||||
border-bottom: var(--u-4) solid var(--c-primary);
|
|
||||||
border-radius: 0px;
|
|
||||||
padding: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.formgrid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
|
|
||||||
grid-template-rows: auto;
|
|
||||||
grid-column-gap: var(--u0);
|
|
||||||
}
|
|
||||||
|
|
||||||
.formgrid > .s {
|
|
||||||
grid-column: span 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.formgrid > .m {
|
|
||||||
grid-column: span 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.formgrid > .l {
|
|
||||||
grid-column: span 3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.formgrid > .spacer {
|
|
||||||
grid-column: span 3;
|
|
||||||
height: 0px;
|
|
||||||
}
|
|
||||||
|
|
|
@ -13,7 +13,7 @@
|
||||||
<h1> Account Settings </h1>
|
<h1> Account Settings </h1>
|
||||||
|
|
||||||
|
|
||||||
<form class="formgrid" th:action="@{/updateAccountSettings}" th:object="${customer}" method="post">
|
<form class="detailgrid" th:action="@{/updateAccountSettings}" th:object="${customer}" method="post">
|
||||||
|
|
||||||
<div class="l">
|
<div class="l">
|
||||||
<h2>General Settings</h2>
|
<h2>General Settings</h2>
|
||||||
|
|
|
@ -36,7 +36,7 @@
|
||||||
)
|
)
|
||||||
-->
|
-->
|
||||||
<h2>Artikel bearbeiten</h2>
|
<h2>Artikel bearbeiten</h2>
|
||||||
<form class="formgrid">
|
<form class="detailgrid">
|
||||||
<p class="m">
|
<p class="m">
|
||||||
<label for="title">Titel</label>
|
<label for="title">Titel</label>
|
||||||
<input class="linestyle full-width" type="text" name="title" value="Kamera" />
|
<input class="linestyle full-width" type="text" name="title" value="Kamera" />
|
||||||
|
|
Reference in New Issue