ntr/crates
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

bundle offers grouped

Browse Source
This commit is contained in:
ntr committed 2022-10-23 15:22:15 +11:00
1 parent 7946259550
commit 623d0f3938
12 files changed
+228 -148
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

client/src/style/index.less
+93 -74
View File
@@ -56,7 +56,7 @@ html {
font-family:var(--base-font-family);
line-height:var(--base-line-height);
-webkit-text-size-adjust:100%;
background:var(--base-background-color);
background:var(--background-0);
box-sizing:border-box
}
@@ -65,23 +65,6 @@ html {
--breakpoint-medium: 35em;
--breakpoint-large: 56em;
--color-dark-blue: #101014;
--color-mid-blue: #16171d;
--color-light-blue: #1f2128;
--color-mid-grey: #9BA0B3;
--color-off-white: #F4F1D0;
--color-accent-blue: #5E9ED6;
--color-blue-gray: #506485;
--color-green: #537a34;
--base-accent-color: var(--color-accent-blue);
--fg-color: var(--color-off-white);
--hover-link-color: var(--color-off-white);
--base-background-color: var(--color-dark-blue);
--secondary-background-color: var(--color-mid-blue);
--tertiary-background-color: var(--color-light-blue);
--small-font-size: 0.75em;
--base-font-size: 1em;
--smedium-font-size: 1.333em;
@@ -96,9 +79,6 @@ html {
--base-line-height: 1.4;
--header-line-height: 1.2;
--min-font-size: var(--base-font-size);
--max-font-size: var(--large-font-size);
--base-border-color: var(--secondary-font-color);
--base-border: 2px solid var(--base-border-color);
--hover-border: 2px solid var(--base-font-color);
@@ -107,11 +87,37 @@ html {
--base-focus: 2px solid var(--base-accent-color);
--base-outline-offset: 0.25em;
--base-spacing: 1rem;
--base-spacing-half: calc(var(--base-spacing)/2);
--base-spacing-double: calc(var(--base-spacing)*2);
--min-font-size: var(--base-font-size);
--max-font-size: var(--large-font-size);
--utility-bar-header-height: calc(var(--base-spacing) * 1.5);
--color-dark-blue: #101014;
--color-mid-blue: #16171d;
--color-light-blue: #1f2128;
--color-mid-grey: #9BA0B3;
--color-off-white: #F4F1D0;
--color-accent-blue: #5E9ED6;
--color-blue-gray: #506485;
--color-blue: #475977;
--color-green: #476d4a;
--color-accepted: var(--color-blue);
--color-confirmed: var(--color-green);
--base-accent-color: var(--color-accent-blue);
--fg-color: var(--color-off-white);
--hover-link-color: var(--color-off-white);
--background-0: var(--color-dark-blue);
--background-1: var(--color-mid-blue);
--background-2: var(--color-light-blue);
--spacing: 1rem;
--spacing-half: calc(var(--spacing)/2);
--spacing-double: calc(var(--spacing)*2);
--utility-bar-header-height: calc(var(--spacing) * 1.5);
}
button, input, optgroup, select, textarea {
@@ -136,11 +142,11 @@ input:focus, textarea:focus {
}
button, input {
overflow:visible
overflow:visible;
}
button, select {
text-transform:none
text-transform: none;
}
button, [type=button], [type=reset], [type=submit] {
@@ -154,7 +160,7 @@ button, [type=button], [type=reset], [type=submit] {
text-transform: uppercase;
&:hover {
background: var(--tertiary-background-color);
background: var(--background-2);
border-color: transparent;
}
}
@@ -165,33 +171,33 @@ h1, h2, h3, h4, h5, h6 {
}
h1 {
margin-bottom:var(--base-spacing);
margin-bottom:var(--spacing);
font-size:var(--large-font-size)
}
h2 {
margin-bottom:var(--base-spacing);
margin-bottom:var(--spacing);
font-size:var(--medium-font-size);
}
h3 {
margin-bottom:calc(var(--base-spacing)/2);
margin-bottom:calc(var(--spacing)/2);
font-size:var(--smedium-font-size)
}
h4 {
margin-bottom:calc(var(--base-spacing)/3);
margin-bottom:calc(var(--spacing)/3);
font-size:var(--base-font-size)
}
p {
margin:0 0 var(--base-spacing)
margin:0 0 var(--spacing)
}
// ok actual styles
body {
padding-top: calc(var(--base-spacing)/2);
padding-top: calc(var(--spacing)/2);
}
main {
@@ -199,8 +205,8 @@ main {
}
button, [type=submit] {
padding: var(--base-spacing-half);
background: var(--secondary-background-color);
padding: var(--spacing-half);
background: var(--background-1);
}
@@ -222,7 +228,7 @@ button, [type=submit] {
grid-template-columns: 1fr 1fr;
section {
margin-bottom: var(--base-spacing);
margin-bottom: var(--spacing);
}
.contact {
@@ -237,10 +243,10 @@ button, [type=submit] {
}
article {
background-color: var(--secondary-background-color);
background-color: var(--background-1);
button {
border-color: var(--tertiary-background-color);
border-color: var(--background-2);
}
}
@@ -250,15 +256,15 @@ article {
article {
display: grid;
padding: var(--base-spacing);
margin-bottom: var(--base-spacing);
padding: var(--spacing);
margin-bottom: var(--spacing);
grid-template-columns: 1fr 4fr 1fr;
}
button {
margin-right: var(--base-spacing);
background: var(--tertiary-background-color);
border-color: var(--secondary-background-color);
margin-right: var(--spacing);
background: var(--background-2);
border-color: var(--background-1);
&.added {
background: var(--color-green);
@@ -270,7 +276,10 @@ article {
.list {
display: grid;
grid-template-columns:
1fr 1fr 1fr 1fr;
1fr 1fr 1fr;
grid-row-gap: var(--spacing);
grid-column-gap: var(--spacing);
article {
display: grid;
@@ -284,6 +293,7 @@ article {
"remove remove";
button {
margin-top: var(--spacing-half);
grid-area: remove
}
@@ -291,13 +301,12 @@ article {
grid-area: details;
}
padding: var(--base-spacing);
margin: var(--base-spacing-half);
padding: var(--spacing);
}
}
form {
margin-bottom: var(--base-spacing);
margin-bottom: var(--spacing);
label, input {
display: block;
@@ -308,15 +317,15 @@ form {
}
input {
padding: var(--base-spacing-half);
margin-bottom: var(--base-spacing);
padding: var(--spacing-half);
margin-bottom: var(--spacing);
}
label {
font-family: var(--secondary-font-family);
font-size: var(--small-font-size);
text-transform: uppercase;
margin-bottom: var(--base-spacing-half);
margin-bottom: var(--spacing-half);
}
}
@@ -334,7 +343,7 @@ a {
nav {
a {
font-size: var(--small-font-size);
margin-right: var(--base-spacing);
margin-right: var(--spacing);
}
}
@@ -342,7 +351,7 @@ nav {
header {
display: grid;
grid-template-columns: 1fr 1fr min-content;
padding-bottom: var(--base-spacing);
padding-bottom: var(--spacing);
a {
white-space: nowrap;
@@ -353,10 +362,10 @@ header {
flex-flow: row;
.bundle {
margin-bottom: var(--base-spacing-double);
margin-bottom: var(--spacing-double);
section {
margin-bottom: var(--base-spacing);
margin-bottom: var(--spacing);
}
.items {
@@ -364,14 +373,14 @@ header {
grid-template-columns: repeat(5, 1fr);
div {
margin-right: var(--base-spacing);
margin-bottom: var(--base-spacing);
margin-right: var(--spacing);
margin-bottom: var(--spacing);
display: grid;
&.bold {
font-weight: bold;
background: var(--tertiary-background-color);
background: var(--background-2);
}
}
}
@@ -385,13 +394,14 @@ header {
.offer {
display: grid;
grid-template-columns: 1fr min-content;
grid-template-rows: 1fr min-content;
grid-template-areas:
"details img"
"btn neg";
"lines lines";
padding: var(--base-spacing);
margin: var(--base-spacing-half);
background: var(--secondary-background-color);
padding: var(--spacing);
margin: var(--spacing-half);
background: var(--background-1);
section {
grid-area: details;
@@ -400,22 +410,31 @@ header {
img {
grid-area: img;
justify-self: end;
margin-left: var(--base-spacing-half);
margin-left: var(--spacing-half);
}
button {
margin-top: var(--base-spacing-half);
grid-area: btn;
border-color: var(--tertiary-background-color);
.lines {
grid-area: lines;
display: flex;
flex-wrap: wrap;
column-gap: var(--spacing-half);
&.accepted {
background: var(--color-accent-blue);
cursor: auto;
}
button {
margin-top: var(--spacing-half);
border-color: var(--background-2);
&.neg {
margin-left: var(--base-spacing-half);
grid-area: neg;
&.accepted {
background: var(--color-accepted);
}
&.confirmed {
cursor: auto;
background: var(--color-confirmed);
}
&.neg {
margin-left: var(--spacing-half);
}
}
}
}