fix: a lot of design flaws
Info text when empty, new inputs, minimum height of content fixed
This commit is contained in:
parent
cef5330567
commit
1504b8bfe9
21 changed files with 970 additions and 458 deletions
|
|
@ -1,24 +0,0 @@
|
|||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-stretch: 100%;
|
||||
font-display: swap;
|
||||
src: url('/fonts/opensans.woff2') format('woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto Condensed';
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
font-display: swap;
|
||||
src: url('/fonts/roboto_con_reg.woff2') format('woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto Condensed';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url('/fonts/roboto_con_bold.woff2') format('woff2');
|
||||
}
|
||||
|
|
@ -1,52 +0,0 @@
|
|||
.Input {
|
||||
&.error {
|
||||
& .input-wrapper {
|
||||
border-color: var(--color-error);
|
||||
outline-width: 2px;
|
||||
}
|
||||
|
||||
& span {
|
||||
color: var(--color-error);
|
||||
}
|
||||
}
|
||||
|
||||
& span {
|
||||
font-size: .65em;
|
||||
}
|
||||
|
||||
& .input-wrapper {
|
||||
position: relative;
|
||||
flex: 25% 1 0;
|
||||
border: 2px solid var(--color-main-dark);
|
||||
border-radius: var(--radius-default);
|
||||
overflow: hidden;
|
||||
transition: var(--transition-default);
|
||||
outline: 0 solid var(--color-lightest);
|
||||
|
||||
& label {
|
||||
position: absolute;
|
||||
font-size: .8em;
|
||||
top: .3rem;
|
||||
left: .5rem;
|
||||
transition: var(--transition-default);
|
||||
}
|
||||
|
||||
& input {
|
||||
all: unset;
|
||||
width: calc(100% - 1rem);
|
||||
padding: 1.3rem .5rem .5rem .5rem;
|
||||
background: var(--color-lightest);
|
||||
|
||||
&[type="number"] {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
& input:focus,
|
||||
& input:not(:placeholder-shown) {
|
||||
& + label {
|
||||
color: var(--color-main-dark);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
66
app/assets/styles/form/textfield.css
Executable file
66
app/assets/styles/form/textfield.css
Executable file
|
|
@ -0,0 +1,66 @@
|
|||
.TextField {
|
||||
--border-color: var(--color-light);
|
||||
--label-color: var(--color-middle);
|
||||
--label-position-top: 0.4em;
|
||||
--label-font-size: 1rem;
|
||||
--icon-color: var(--color-main-dark);
|
||||
--message-color: var(--color-middle);
|
||||
|
||||
position: relative;
|
||||
flex: 25% 1 0;
|
||||
|
||||
&:focus-within {
|
||||
--border-color: var(--color-main-dark);
|
||||
}
|
||||
|
||||
&:focus-within,
|
||||
&:has(input:not(:placeholder-shown)) {
|
||||
--icon-color: var(--color-main-dark);
|
||||
--label-color: var(--color-main-dark);
|
||||
--label-position-top: -11px;
|
||||
--label-font-size: 0.8rem;
|
||||
}
|
||||
|
||||
&.error {
|
||||
--label-color: var(--color-error);
|
||||
--icon-color: var(--color-error);
|
||||
--border-color: var(--color-error);
|
||||
--message-color: var(--color-error);
|
||||
}
|
||||
|
||||
& .wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.1rem 0.5rem;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-default);
|
||||
}
|
||||
|
||||
& label {
|
||||
position: absolute;
|
||||
background: var(--color-lightest);
|
||||
padding: 0.2rem;
|
||||
left: 1.8rem;
|
||||
color: var(--label-color);
|
||||
top: var(--label-position-top);
|
||||
font-size: var(--label-font-size);
|
||||
transition: var(--transition-default);
|
||||
}
|
||||
|
||||
& .icon {
|
||||
color: var(--icon-color);
|
||||
}
|
||||
|
||||
& input {
|
||||
all: unset;
|
||||
padding: 0.5rem;
|
||||
font-size: 1rem;
|
||||
width: 100%;
|
||||
flex: 25% 1 0;
|
||||
}
|
||||
|
||||
& span {
|
||||
color: var(--message-color);
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,181 +1,208 @@
|
|||
:root {
|
||||
--padding-default: 1rem;
|
||||
--padding-small: .5rem;
|
||||
--radius-default: 3px;
|
||||
--transition-default: 150ms;
|
||||
--padding-default: 1rem;
|
||||
--padding-small: 0.5rem;
|
||||
--radius-default: 3px;
|
||||
--transition-default: 150ms;
|
||||
|
||||
--color-success: #328104;
|
||||
--color-error: #A20606;
|
||||
--color-blue-light: #0DDCE7;
|
||||
--color-blue: #05B0FF;
|
||||
--color-blue-dark: #0266F2;
|
||||
--color-blue-darkest: #013174;
|
||||
--color-success: #328104;
|
||||
--color-error: #a20606;
|
||||
--color-blue-light: #0ddce7;
|
||||
--color-blue: #05b0ff;
|
||||
--color-blue-dark: #0266f2;
|
||||
--color-blue-darkest: #013174;
|
||||
|
||||
--color-darkest: #292929;
|
||||
--color-dark: #404040;
|
||||
--color-middle: #707070;
|
||||
--color-light: #E0E0E6;
|
||||
--color-lightest: #FAFAFF;
|
||||
--color-darkest: #292929;
|
||||
--color-dark: #404040;
|
||||
--color-middle: #707070;
|
||||
--color-light: #e0e0e6;
|
||||
--color-lightest: #fafaff;
|
||||
|
||||
--color-green-light: #05FFC5;
|
||||
--color-green: #02F276;
|
||||
--color-green-dark: #09DC33;
|
||||
--color-green-darkest: #07B029;
|
||||
--color-green-darkest-most: #157C2A;
|
||||
--color-green-light: #05ffc5;
|
||||
--color-green: #02f276;
|
||||
--color-green-dark: #09dc33;
|
||||
--color-green-darkest: #07b029;
|
||||
--color-green-darkest-most: #157c2a;
|
||||
|
||||
--color-main: var(--color-blue);
|
||||
--color-main-light: var(--color-blue-light);
|
||||
--color-main-dark: var(--color-blue-dark);
|
||||
--color-main-darkest: var(--color-blue-darkest);
|
||||
|
||||
--color-main: var(--color-blue);
|
||||
--color-main-light: var(--color-blue-light);
|
||||
--color-main-dark: var(--color-blue-dark);
|
||||
--color-main-darkest: var(--color-blue-darkest);
|
||||
--color-accent: var(--color-green);
|
||||
--color-accent-light: var(--color-green-light);
|
||||
--color-accent-dark: var(--color-green-dark);
|
||||
--color-accent-darkest: var(--color-green-darkest);
|
||||
|
||||
--color-accent: var(--color-green);
|
||||
--color-accent-light: var(--color-green-light);
|
||||
--color-accent-dark: var(--color-green-dark);
|
||||
--color-accent-darkest: var(--color-green-darkest);
|
||||
|
||||
--color-gradient-main: linear-gradient(to bottom right, var(--color-main), var(--color-main-light));
|
||||
--color-gradient-main-dark: linear-gradient(to bottom right, var(--color-main-darkest), var(--color-main-dark));
|
||||
--color-gradient-accent: linear-gradient(to bottom right, var(--color-accent), var(--color-accent-light));
|
||||
--color-gradient-accent-dark: linear-gradient(to bottom right, var(--color-accent-darkest), var(--color-accent-dark));
|
||||
--color-gradient-error: linear-gradient(to bottom right, #B00707, #DC0909);
|
||||
--color-gradient-error-reverse: linear-gradient(to top left, #B00707, #DC0909);
|
||||
|
||||
--box-shadow-upper: 0 -3px 6px rgba(0,0,0,0.16), 0 -3px 6px rgba(0,0,0,0.23);
|
||||
--box-shadow-z2: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
|
||||
--box-shadow-inset: inset 0 3px 6px rgba(0,0,0,0.16), inset 0 3px 6px rgba(0,0,0,0.23);
|
||||
--color-gradient-main: linear-gradient(to bottom right, var(--color-main), var(--color-main-light));
|
||||
--color-gradient-main-dark: linear-gradient(to bottom right, var(--color-main-darkest), var(--color-main-dark));
|
||||
--color-gradient-accent: linear-gradient(to bottom right, var(--color-accent), var(--color-accent-light));
|
||||
--color-gradient-accent-dark: linear-gradient(to bottom right, var(--color-accent-darkest), var(--color-accent-dark));
|
||||
--color-gradient-error: linear-gradient(to bottom right, #b00707, #dc0909);
|
||||
--color-gradient-error-reverse: linear-gradient(to top left, #b00707, #dc0909);
|
||||
|
||||
--box-shadow-upper: 0 -3px 6px rgba(0, 0, 0, 0.16), 0 -3px 6px rgba(0, 0, 0, 0.23);
|
||||
--box-shadow-z2: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
|
||||
--box-shadow-inset: inset 0 3px 6px rgba(0, 0, 0, 0.16), inset 0 3px 6px rgba(0, 0, 0, 0.23);
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
overflow-x: hidden;
|
||||
font-family: sans-serif;
|
||||
background: var(--color-main-darkest);
|
||||
height: 100%;
|
||||
overflow-x: hidden;
|
||||
font-family: sans-serif;
|
||||
background: var(--color-main-darkest);
|
||||
}
|
||||
|
||||
.dot {
|
||||
--size: 10px;
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
top: 5px;
|
||||
right: 25%;
|
||||
border-radius: 50%;
|
||||
background-color: var(--color-accent);
|
||||
display: inline-block;
|
||||
margin-right: 0.5rem;
|
||||
position: absolute;
|
||||
box-shadow: var(--box-shadow-z2);
|
||||
scale: 0;
|
||||
transition: var(--transition-default);
|
||||
--size: 10px;
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
top: 5px;
|
||||
right: 25%;
|
||||
border-radius: 50%;
|
||||
background-color: var(--color-accent);
|
||||
display: inline-block;
|
||||
margin-right: 0.5rem;
|
||||
position: absolute;
|
||||
box-shadow: var(--box-shadow-z2);
|
||||
scale: 0;
|
||||
transition: var(--transition-default);
|
||||
|
||||
&.visible {
|
||||
scale: 1;
|
||||
animation: pulse 1s infinite;
|
||||
}
|
||||
&.visible {
|
||||
scale: 1;
|
||||
animation: pulse 1s infinite;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
transform: scale(0.95);
|
||||
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
70% {
|
||||
transform: scale(1);
|
||||
box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
|
||||
}
|
||||
0% {
|
||||
transform: scale(0.95);
|
||||
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
70% {
|
||||
transform: scale(1);
|
||||
box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(0.95);
|
||||
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
|
||||
}
|
||||
100% {
|
||||
transform: scale(0.95);
|
||||
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
overflow: hidden;
|
||||
border-radius: var(--radius-default);
|
||||
box-shadow: var(--box-shadow-z2);
|
||||
overflow: hidden;
|
||||
border-radius: var(--radius-default);
|
||||
box-shadow: var(--box-shadow-z2);
|
||||
}
|
||||
|
||||
.flex-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.flex-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.text-white {
|
||||
color: var(--color-lightest);
|
||||
color: var(--color-lightest);
|
||||
}
|
||||
|
||||
.bg-main {
|
||||
background-color: var(--color-main);
|
||||
background-color: var(--color-main);
|
||||
}
|
||||
|
||||
.bg-main-hover:hover {
|
||||
background-color: var(--color-main);
|
||||
background-color: var(--color-main);
|
||||
}
|
||||
|
||||
.bg-main-dark {
|
||||
background-color: var(--color-main-dark);
|
||||
background-color: var(--color-main-dark);
|
||||
}
|
||||
|
||||
.bg-main-dark-hover:hover {
|
||||
background-color: var(--color-main-dark);
|
||||
background-color: var(--color-main-dark);
|
||||
}
|
||||
|
||||
.gap-default {
|
||||
gap: 1rem;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.bg-blue {
|
||||
background: var(--color-blue);
|
||||
background: var(--color-blue);
|
||||
}
|
||||
|
||||
.bg-white {
|
||||
background: var(--color-lightest);
|
||||
background: var(--color-lightest);
|
||||
}
|
||||
|
||||
.padding {
|
||||
gap: 1rem;
|
||||
padding: var(--padding-default);
|
||||
gap: 1rem;
|
||||
padding: var(--padding-default);
|
||||
}
|
||||
|
||||
.padding-small {
|
||||
gap: 1rem;
|
||||
padding: var(--padding-small);
|
||||
gap: 1rem;
|
||||
padding: var(--padding-small);
|
||||
}
|
||||
|
||||
.roboto-condensed {
|
||||
font-family: "Roboto Condensed", sans-serif;
|
||||
}
|
||||
|
||||
.roboto {
|
||||
font-family: "Roboto", sans-serif;
|
||||
}
|
||||
|
||||
.open-sans {
|
||||
font-family: "Open Sans", sans-serif;
|
||||
}
|
||||
|
||||
.grow {
|
||||
flex-grow: 1;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
dialog {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 100vw;
|
||||
transform: translate(-50%, -50%);
|
||||
border: none;
|
||||
border-radius: var(--radius-default);
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 100vw;
|
||||
transform: translate(-50%, -50%);
|
||||
border: none;
|
||||
border-radius: var(--radius-default);
|
||||
background: var(--color-lightest);
|
||||
font-size: 1rem;
|
||||
|
||||
font-size: 1rem;
|
||||
& > .wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
& header {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
& header {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1rem 1rem 0;
|
||||
}
|
||||
|
||||
& footer {
|
||||
justify-content: space-between;
|
||||
}
|
||||
main {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
&::backdrop {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
}
|
||||
& footer {
|
||||
justify-content: space-between;
|
||||
padding: 0 1rem 1rem;
|
||||
}
|
||||
|
||||
&::backdrop {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,7 +16,6 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-weight: bold;
|
||||
|
||||
& a {
|
||||
|
|
|
|||
|
|
@ -1,3 +1,18 @@
|
|||
.page-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
|
||||
& .page {
|
||||
flex-grow: 1;
|
||||
|
||||
& .nuxt-page-wrapper {
|
||||
height: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.filter-bar {
|
||||
background: var(--color-lightest);
|
||||
display: flex;
|
||||
|
|
@ -25,16 +40,24 @@
|
|||
z-index: 100;
|
||||
|
||||
& p {
|
||||
font-family: 'Roboto Condensed', sans-serif;
|
||||
font-weight: lighter;
|
||||
font-weight: 100;
|
||||
color: var(--color-lightest);
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
min-height: 100dvh;
|
||||
border-top-left-radius: 15px;
|
||||
border-top-right-radius: 15px;
|
||||
overflow: hidden;
|
||||
background: var(--color-lightest);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.info-text {
|
||||
padding: 0 1rem;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
top: 40%;
|
||||
transform: translateY(-50%);
|
||||
position: absolute;
|
||||
}
|
||||
|
|
@ -3,7 +3,6 @@
|
|||
width: 100%;
|
||||
color: var(--color-darkest);
|
||||
border-bottom: 1px solid var(--color-light);
|
||||
font-family: 'Roboto', sans-serif;
|
||||
|
||||
.bottom {
|
||||
position: absolute;
|
||||
|
|
@ -79,10 +78,6 @@
|
|||
margin-right: .5rem;
|
||||
color: var(--color-middle);
|
||||
}
|
||||
|
||||
& > span:nth-child(2) {
|
||||
font-family: 'Roboto Condensed', sans-serif;
|
||||
}
|
||||
}
|
||||
|
||||
& .wrapper {
|
||||
|
|
@ -91,7 +86,6 @@
|
|||
width: 100%;
|
||||
gap: 1rem;
|
||||
justify-content: space-between;
|
||||
font-family: 'Roboto Condensed', sans-serif;
|
||||
|
||||
& > .info {
|
||||
flex-grow: 0;
|
||||
|
|
@ -110,7 +104,7 @@
|
|||
}
|
||||
|
||||
& > .pro {
|
||||
font-size: .5rem;
|
||||
font-size: .6rem;
|
||||
color: var(--color-middle);
|
||||
font-weight: lighter;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue