mirror of
https://github.com/ae-utbm/sith.git
synced 2025-01-05 14:41:19 +00:00
thomas girod
GitHub
commit
2f9e5bfee1
@ -1,95 +1,145 @@
|
||||
@import "colors";
|
||||
|
||||
/**
|
||||
* Style related to forms
|
||||
* Style related to forms and form inputs
|
||||
*/
|
||||
|
||||
a.button,
|
||||
button,
|
||||
input[type="button"],
|
||||
input[type="submit"],
|
||||
input[type="reset"],
|
||||
input[type="file"] {
|
||||
border: none;
|
||||
text-decoration: none;
|
||||
background-color: $background-button-color;
|
||||
padding: 0.4em;
|
||||
margin: 0.1em;
|
||||
font-size: 1.2em;
|
||||
border-radius: 5px;
|
||||
color: black;
|
||||
/**
|
||||
* Inputs that are not enclosed in a form element.
|
||||
*/
|
||||
:not(form) {
|
||||
a.button,
|
||||
button,
|
||||
input[type="button"],
|
||||
input[type="submit"],
|
||||
input[type="reset"],
|
||||
input[type="file"] {
|
||||
border: none;
|
||||
text-decoration: none;
|
||||
background-color: $background-button-color;
|
||||
padding: 0.4em;
|
||||
margin: 0.1em;
|
||||
font-size: 1.2em;
|
||||
border-radius: 5px;
|
||||
color: black;
|
||||
|
||||
&:hover {
|
||||
background: hsl(0, 0%, 83%);
|
||||
}
|
||||
}
|
||||
|
||||
a.button,
|
||||
input[type="button"],
|
||||
input[type="submit"],
|
||||
input[type="reset"],
|
||||
input[type="file"] {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
a.button:not(:disabled),
|
||||
button:not(:disabled),
|
||||
input[type="button"]:not(:disabled),
|
||||
input[type="submit"]:not(:disabled),
|
||||
input[type="reset"]:not(:disabled),
|
||||
input[type="checkbox"]:not(:disabled),
|
||||
input[type="file"]:not(:disabled) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea[type="text"],
|
||||
[type="number"] {
|
||||
border: none;
|
||||
text-decoration: none;
|
||||
background-color: $background-button-color;
|
||||
padding: 0.4em;
|
||||
margin: 0.1em;
|
||||
font-size: 1.2em;
|
||||
border-radius: 5px;
|
||||
max-width: 95%;
|
||||
}
|
||||
|
||||
textarea {
|
||||
border: none;
|
||||
text-decoration: none;
|
||||
background-color: $background-button-color;
|
||||
padding: 7px;
|
||||
font-size: 1.2em;
|
||||
border-radius: 5px;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
select {
|
||||
border: none;
|
||||
text-decoration: none;
|
||||
font-size: 1.2em;
|
||||
background-color: $background-button-color;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
a:not(.button) {
|
||||
text-decoration: none;
|
||||
color: $primary-dark-color;
|
||||
|
||||
&:hover {
|
||||
color: $primary-light-color;
|
||||
&:hover {
|
||||
background: hsl(0, 0%, 83%);
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: $primary-color;
|
||||
a.button,
|
||||
input[type="button"],
|
||||
input[type="submit"],
|
||||
input[type="reset"],
|
||||
input[type="file"] {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
a.button:not(:disabled),
|
||||
button:not(:disabled),
|
||||
input[type="button"]:not(:disabled),
|
||||
input[type="submit"]:not(:disabled),
|
||||
input[type="reset"]:not(:disabled),
|
||||
input[type="checkbox"]:not(:disabled),
|
||||
input[type="file"]:not(:disabled) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea[type="text"],
|
||||
[type="number"] {
|
||||
border: none;
|
||||
text-decoration: none;
|
||||
background-color: $background-button-color;
|
||||
padding: 0.4em;
|
||||
margin: 0.1em;
|
||||
font-size: 1.2em;
|
||||
border-radius: 5px;
|
||||
max-width: 95%;
|
||||
}
|
||||
|
||||
textarea {
|
||||
border: none;
|
||||
text-decoration: none;
|
||||
background-color: $background-button-color;
|
||||
padding: 7px;
|
||||
font-size: 1.2em;
|
||||
border-radius: 5px;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
select {
|
||||
border: none;
|
||||
text-decoration: none;
|
||||
font-size: 1.2em;
|
||||
background-color: $background-button-color;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
a:not(.button) {
|
||||
text-decoration: none;
|
||||
color: $primary-dark-color;
|
||||
|
||||
&:hover {
|
||||
color: $primary-light-color;
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
form {
|
||||
margin: 0 auto 10px;
|
||||
// Input size - used for height/padding calculations
|
||||
--nf-input-size: 1rem;
|
||||
|
||||
--nf-input-font-size: calc(var(--nf-input-size) * 0.875);
|
||||
--nf-small-font-size: calc(var(--nf-input-size) * 0.875);
|
||||
|
||||
// Input
|
||||
--nf-input-color: $text-color;
|
||||
--nf-input-border-radius: 0.25rem;
|
||||
--nf-input-placeholder-color: #929292;
|
||||
--nf-input-border-color: #c0c4c9;
|
||||
--nf-input-border-width: 1px;
|
||||
--nf-input-border-style: solid;
|
||||
--nf-input-border-bottom-width: 2px;
|
||||
--nf-input-focus-border-color: #3b4ce2;
|
||||
--nf-input-background-color: #f3f6f7;
|
||||
|
||||
// Valid/invalid
|
||||
--nf-invalid-input-border-color: var(--nf-input-border-color);
|
||||
--nf-invalid-input-background-color: var(--nf-input-background-color);
|
||||
--nf-invalid-input-color: var(--nf-input-color);
|
||||
--nf-valid-input-border-color: var(--nf-input-border-color);
|
||||
--nf-valid-input-background-color: var(--nf-input-background-color);
|
||||
--nf-valid-input-color: inherit;
|
||||
--nf-invalid-input-border-bottom-color: red;
|
||||
--nf-valid-input-border-bottom-color: green;
|
||||
|
||||
// Label variables
|
||||
--nf-label-font-size: var(--nf-small-font-size);
|
||||
--nf-label-color: #374151;
|
||||
--nf-label-font-weight: 500;
|
||||
|
||||
// Slider variables
|
||||
--nf-slider-track-background: #dfdfdf;
|
||||
--nf-slider-track-height: 0.25rem;
|
||||
--nf-slider-thumb-size: calc(var(--nf-slider-track-height) * 4);
|
||||
--nf-slider-track-border-radius: var(--nf-slider-track-height);
|
||||
--nf-slider-thumb-border-width: 2px;
|
||||
--nf-slider-thumb-border-focus-width: 1px;
|
||||
--nf-slider-thumb-border-color: #ffffff;
|
||||
--nf-slider-thumb-background: var(--nf-input-focus-border-color);
|
||||
|
||||
display: block;
|
||||
margin: calc(var(--nf-input-size) * 1.5) auto 10px;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
|
||||
.helptext {
|
||||
margin-top: .25rem;
|
||||
@ -107,9 +157,16 @@ form {
|
||||
}
|
||||
}
|
||||
|
||||
// ------------- LABEL
|
||||
label, legend {
|
||||
font-weight: var(--nf-label-font-weight);
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
margin-bottom: calc(var(--nf-input-size) / 2);
|
||||
white-space: initial;
|
||||
|
||||
+ small {
|
||||
font-style: initial;
|
||||
}
|
||||
|
||||
&.required:after {
|
||||
margin-left: 4px;
|
||||
@ -118,7 +175,555 @@ form {
|
||||
}
|
||||
}
|
||||
|
||||
// wrap texts
|
||||
label, legend, ul.errorlist>li, .helptext {
|
||||
text-wrap: wrap;
|
||||
}
|
||||
|
||||
.choose_file_widget {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// ------------- SMALL
|
||||
|
||||
small {
|
||||
display: block;
|
||||
font-weight: normal;
|
||||
opacity: 0.75;
|
||||
font-size: var(--nf-small-font-size);
|
||||
margin-bottom: calc(var(--nf-input-size) * 0.75);
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// ------------- LEGEND
|
||||
|
||||
legend {
|
||||
font-weight: var(--nf-label-font-weight);
|
||||
display: block;
|
||||
margin-bottom: calc(var(--nf-input-size) / 5);
|
||||
}
|
||||
|
||||
.form-group,
|
||||
> p,
|
||||
> div {
|
||||
margin-top: calc(var(--nf-input-size) / 2);
|
||||
}
|
||||
|
||||
// ------------ ERROR LIST
|
||||
ul.errorlist {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
opacity: 60%;
|
||||
color: var(--nf-invalid-input-border-bottom-color);
|
||||
|
||||
> li {
|
||||
text-align: left;
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="email"],
|
||||
input[type="tel"],
|
||||
input[type="url"],
|
||||
input[type="password"],
|
||||
input[type="number"],
|
||||
input[type="date"],
|
||||
input[type="week"],
|
||||
input[type="time"],
|
||||
input[type="month"],
|
||||
input[type="search"],
|
||||
textarea,
|
||||
select {
|
||||
min-width: 300px;
|
||||
|
||||
&.grow {
|
||||
width: 95%;
|
||||
}
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="checkbox"],
|
||||
input[type="radio"],
|
||||
input[type="email"],
|
||||
input[type="tel"],
|
||||
input[type="url"],
|
||||
input[type="password"],
|
||||
input[type="number"],
|
||||
input[type="date"],
|
||||
input[type="datetime-local"],
|
||||
input[type="week"],
|
||||
input[type="time"],
|
||||
input[type="month"],
|
||||
input[type="search"],
|
||||
textarea,
|
||||
select {
|
||||
background: var(--nf-input-background-color);
|
||||
font-size: var(--nf-input-font-size);
|
||||
border-color: var(--nf-input-border-color);
|
||||
border-width: var(--nf-input-border-width);
|
||||
border-style: var(--nf-input-border-style);
|
||||
box-shadow: none;
|
||||
border-radius: var(--nf-input-border-radius);
|
||||
border-bottom-width: var(--nf-input-border-bottom-width);
|
||||
color: var(--nf-input-color);
|
||||
max-width: 95%;
|
||||
box-sizing: border-box;
|
||||
padding: calc(var(--nf-input-size) * 0.65);
|
||||
line-height: normal;
|
||||
appearance: none;
|
||||
transition: all 0.15s ease-out;
|
||||
|
||||
// ------------- VALID/INVALID
|
||||
|
||||
&.error {
|
||||
&:not(:placeholder-shown):invalid {
|
||||
background-color: var(--nf-invalid-input-background-color);
|
||||
border-color: var(--nf-valid-input-border-color);
|
||||
border-bottom-color: var(--nf-invalid-input-border-bottom-color);
|
||||
color: var(--nf-invalid-input-color);
|
||||
|
||||
// Reset to default when focus
|
||||
|
||||
&:focus {
|
||||
background-color: var(--nf-input-background-color);
|
||||
border-color: var(--nf-input-border-color);
|
||||
color: var(--nf-input-color);
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:placeholder-shown):valid {
|
||||
background-color: var(--nf-valid-input-background-color);
|
||||
border-color: var(--nf-valid-input-border-color);
|
||||
border-bottom-color: var(--nf-valid-input-border-bottom-color);
|
||||
color: var(--nf-valid-input-color);
|
||||
}
|
||||
}
|
||||
|
||||
// ------------- DISABLED
|
||||
|
||||
&:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
// -------- PLACEHOLDERS
|
||||
|
||||
&::-webkit-input-placeholder {
|
||||
color: var(--nf-input-placeholder-color);
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
&:-ms-input-placeholder {
|
||||
color: var(--nf-input-placeholder-color);
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
&::-moz-placeholder {
|
||||
color: var(--nf-input-placeholder-color);
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
&:-moz-placeholder {
|
||||
color: var(--nf-input-placeholder-color);
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
// -------- FOCUS
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: var(--nf-input-focus-border-color);
|
||||
}
|
||||
|
||||
// -------- ADDITIONAL TEXT BENEATH INPUT FIELDS
|
||||
|
||||
+ small {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
// -------- ICONS
|
||||
|
||||
--icon-padding: calc(var(--nf-input-size) * 2.25);
|
||||
--icon-background-offset: calc(var(--nf-input-size) * 0.75);
|
||||
|
||||
&.icon-left {
|
||||
background-position: left var(--icon-background-offset) bottom 50%;
|
||||
padding-left: var(--icon-padding);
|
||||
background-size: var(--nf-input-size);
|
||||
}
|
||||
|
||||
&.icon-right {
|
||||
background-position: right var(--icon-background-offset) bottom 50%;
|
||||
padding-right: var(--icon-padding);
|
||||
background-size: var(--nf-input-size);
|
||||
}
|
||||
|
||||
// When a field has a icon and is autofilled, the background image is removed
|
||||
// by the browser. To negate this we reset the padding, not great but okay
|
||||
|
||||
&:-webkit-autofill {
|
||||
padding: calc(var(--nf-input-size) * 0.75) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// -------- SEARCH
|
||||
|
||||
input[type="search"] {
|
||||
&:placeholder-shown {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-search'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
|
||||
background-position: left calc(var(--nf-input-size) * 0.75) bottom 50%;
|
||||
padding-left: calc(var(--nf-input-size) * 2.25);
|
||||
background-size: var(--nf-input-size);
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
&::-webkit-search-cancel-button {
|
||||
-webkit-appearance: none;
|
||||
width: var(--nf-input-size);
|
||||
height: var(--nf-input-size);
|
||||
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-x'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
&:focus {
|
||||
padding-left: calc(var(--nf-input-size) * 0.75);
|
||||
background-position: left calc(var(--nf-input-size) * -1) bottom 50%;
|
||||
}
|
||||
}
|
||||
|
||||
// -------- EMAIL
|
||||
|
||||
input[type="email"][class^="icon"] {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-at-sign'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-3.92 7.94'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
// -------- TEL
|
||||
|
||||
input[type="tel"][class^="icon"] {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-phone'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
// -------- URL
|
||||
|
||||
input[type="url"][class^="icon"] {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-link'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
// -------- PASSWORD
|
||||
|
||||
input[type="password"] {
|
||||
letter-spacing: 2px;
|
||||
|
||||
&[class^="icon"] {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-lock'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
// -------- RANGE
|
||||
|
||||
input[type="range"] {
|
||||
-webkit-appearance: none;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
// NOTE: for some reason grouping these doesn't work (just like :placeholder)
|
||||
|
||||
@mixin track {
|
||||
width: 100%;
|
||||
height: var(--nf-slider-track-height);
|
||||
background: var(--nf-slider-track-background);
|
||||
border-radius: var(--nf-slider-track-border-radius);
|
||||
}
|
||||
|
||||
@mixin thumb {
|
||||
height: var(--nf-slider-thumb-size);
|
||||
width: var(--nf-slider-thumb-size);
|
||||
border-radius: var(--nf-slider-thumb-size);
|
||||
background: var(--nf-slider-thumb-background);
|
||||
border: 0;
|
||||
border: var(--nf-slider-thumb-border-width) solid var(--nf-slider-thumb-border-color);
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
@mixin thumb-focus {
|
||||
box-shadow: 0 0 0 var(--nf-slider-thumb-border-focus-width) var(--nf-slider-thumb-background);
|
||||
}
|
||||
|
||||
&::-webkit-slider-runnable-track {
|
||||
@include track;
|
||||
}
|
||||
|
||||
&::-moz-range-track {
|
||||
@include track;
|
||||
}
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
@include thumb;
|
||||
margin-top: calc(
|
||||
(
|
||||
calc(var(--nf-slider-track-height) - var(--nf-slider-thumb-size)) *
|
||||
0.5
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
@include thumb;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
&:focus::-webkit-slider-thumb {
|
||||
@include thumb-focus;
|
||||
}
|
||||
|
||||
&:focus::-moz-range-thumb {
|
||||
@include thumb-focus;
|
||||
}
|
||||
}
|
||||
|
||||
// -------- COLOR
|
||||
|
||||
input[type="color"] {
|
||||
border: var(--nf-input-border-width) solid var(--nf-input-border-color);
|
||||
border-bottom-width: var(--nf-input-border-bottom-width);
|
||||
height: calc(var(--nf-input-size) * 2);
|
||||
border-radius: var(--nf-input-border-radius);
|
||||
padding: calc(var(--nf-input-border-width) * 2);
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: var(--nf-input-focus-border-color);
|
||||
}
|
||||
|
||||
&::-webkit-color-swatch-wrapper {
|
||||
padding: 5%;
|
||||
}
|
||||
|
||||
@mixin swatch {
|
||||
border-radius: calc(var(--nf-input-border-radius) / 2);
|
||||
border: none;
|
||||
}
|
||||
|
||||
&::-moz-color-swatch {
|
||||
@include swatch;
|
||||
}
|
||||
|
||||
&::-webkit-color-swatch {
|
||||
@include swatch;
|
||||
}
|
||||
}
|
||||
|
||||
// --------------- NUMBER
|
||||
|
||||
input[type="number"] {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
// --------------- DATES
|
||||
|
||||
input[type="date"],
|
||||
input[type="datetime-local"],
|
||||
input[type="week"],
|
||||
input[type="month"] {
|
||||
min-width: 300px;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-calendar'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
input[type="time"] {
|
||||
min-width: 6em;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-clock'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
input[type="date"],
|
||||
input[type="datetime-local"],
|
||||
input[type="week"],
|
||||
input[type="time"],
|
||||
input[type="month"] {
|
||||
background-position: right calc(var(--nf-input-size) * 0.75) bottom 50%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: var(--nf-input-size);
|
||||
|
||||
&::-webkit-inner-spin-button,
|
||||
&::-webkit-calendar-picker-indicator {
|
||||
-webkit-appearance: none;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
// FireFox reset
|
||||
// FF has restricted control of styling the date/time inputs.
|
||||
// That's why we don't show icons for FF users, and leave basic styling in place.
|
||||
@-moz-document url-prefix() {
|
||||
min-width: auto;
|
||||
width: auto;
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
|
||||
// --------------- TEXAREA
|
||||
|
||||
textarea {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
// --------------- CHECKBOX/RADIO
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
width: var(--nf-input-size);
|
||||
height: var(--nf-input-size);
|
||||
padding: inherit;
|
||||
margin: 0;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
border-radius: calc(var(--nf-input-border-radius) / 2);
|
||||
border-width: var(--nf-input-border-width);
|
||||
cursor: pointer;
|
||||
background-position: center center;
|
||||
|
||||
&:focus:not(:checked) {
|
||||
border: var(--nf-input-border-width) solid var(--nf-input-focus-border-color);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border: var(--nf-input-border-width) solid var(--nf-input-focus-border-color);
|
||||
}
|
||||
|
||||
+ label {
|
||||
display: inline-block;
|
||||
margin-bottom: 0;
|
||||
padding-left: calc(var(--nf-input-size) / 2.5);
|
||||
font-weight: normal;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
max-width: calc(100% - calc(var(--nf-input-size) * 2));
|
||||
line-height: normal;
|
||||
|
||||
> small {
|
||||
margin-top: calc(var(--nf-input-size) / 4);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
&:checked {
|
||||
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' class='feather feather-check'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center center/85%;
|
||||
background-color: var(--nf-input-focus-border-color);
|
||||
border-color: var(--nf-input-focus-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
input[type="radio"] {
|
||||
border-radius: 100%;
|
||||
|
||||
&:checked {
|
||||
background-color: var(--nf-input-focus-border-color);
|
||||
border-color: var(--nf-input-focus-border-color);
|
||||
box-shadow: 0 0 0 3px white inset;
|
||||
}
|
||||
}
|
||||
|
||||
// --------------- SWITCH
|
||||
|
||||
--switch-orb-size: var(--nf-input-size);
|
||||
--switch-orb-offset: calc(var(--nf-input-border-width) * 2);
|
||||
--switch-width: calc(var(--nf-input-size) * 2.5);
|
||||
--switch-height: calc(
|
||||
calc(var(--nf-input-size) * 1.25) + var(--switch-orb-offset)
|
||||
);
|
||||
|
||||
input[type="checkbox"].switch {
|
||||
width: var(--switch-width);
|
||||
height: var(--switch-height);
|
||||
border-radius: var(--switch-height);
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
background: var(--nf-input-border-color);
|
||||
border-radius: var(--switch-orb-size);
|
||||
height: var(--switch-orb-size);
|
||||
left: var(--switch-orb-offset);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: var(--switch-orb-size);
|
||||
content: "";
|
||||
transition: all 0.2s ease-out;
|
||||
}
|
||||
|
||||
+ label {
|
||||
margin-top: calc(var(--switch-height) / 8);
|
||||
}
|
||||
|
||||
&:checked {
|
||||
background: var(--nf-input-focus-border-color) none initial;
|
||||
|
||||
&::after {
|
||||
transform: translateY(-50%) translateX(
|
||||
calc(calc(var(--switch-width) / 2) - var(--switch-orb-offset))
|
||||
);
|
||||
background: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------- FILE
|
||||
|
||||
input[type="file"] {
|
||||
background: rgba(0, 0, 0, 0.025);
|
||||
padding: calc(var(--nf-input-size) / 2);
|
||||
display: block;
|
||||
font-weight: normal;
|
||||
width: 95%;
|
||||
box-sizing: border-box;
|
||||
border-radius: var(--nf-input-border-radius);
|
||||
border: 1px dashed var(--nf-input-border-color);
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
border-color: var(--nf-input-focus-border-color);
|
||||
}
|
||||
|
||||
@mixin button {
|
||||
background: var(--nf-input-focus-border-color);
|
||||
border: 0;
|
||||
appearance: none;
|
||||
border-radius: var(--nf-input-border-radius);
|
||||
color: white;
|
||||
margin-right: 0.75rem;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&::file-selector-button {
|
||||
@include button();
|
||||
}
|
||||
|
||||
&::-webkit-file-upload-button {
|
||||
@include button();
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------- SELECT
|
||||
|
||||
select {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
|
||||
background-position: right calc(var(--nf-input-size) * 0.75) bottom 50%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: var(--nf-input-size);
|
||||
}
|
||||
}
|
||||
|
||||
@ -33,8 +33,8 @@ $hovered-red-text-color: #ff4d4d;
|
||||
flex-direction: row;
|
||||
gap: 10px;
|
||||
|
||||
>a {
|
||||
color: $text-color;
|
||||
> a {
|
||||
color: $text-color!important;
|
||||
}
|
||||
|
||||
&:hover>a {
|
||||
@ -395,9 +395,9 @@ $hovered-red-text-color: #ff4d4d;
|
||||
}
|
||||
|
||||
>input[type=text] {
|
||||
box-sizing: border-box;
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
min-width: unset;
|
||||
border: unset;
|
||||
height: 35px;
|
||||
border-radius: 5px;
|
||||
font-size: .9em;
|
||||
|
||||
@ -446,6 +446,11 @@ body {
|
||||
row-gap: $i * $row-gap;
|
||||
}
|
||||
}
|
||||
|
||||
// Make an element of the row take as much space as needed
|
||||
.grow {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/*---------------------------------NEWS--------------------------------*/
|
||||
@ -1424,16 +1429,6 @@ footer {
|
||||
width: 97%;
|
||||
}
|
||||
|
||||
#user_edit {
|
||||
* {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
#cash_summary_form label,
|
||||
.inline {
|
||||
display: inline;
|
||||
|
||||
@ -1,26 +1,9 @@
|
||||
|
||||
@media (max-width: 750px) {
|
||||
.title {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.field-error {
|
||||
height: auto !important;
|
||||
|
||||
> ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
color: indianred;
|
||||
|
||||
> li {
|
||||
text-align: left !important;
|
||||
line-height: normal;
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.profile {
|
||||
&-visible {
|
||||
display: flex;
|
||||
@ -87,11 +70,7 @@
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
> i {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
>p {
|
||||
> p {
|
||||
text-align: left !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
@ -107,16 +86,6 @@
|
||||
> div {
|
||||
max-width: 100%;
|
||||
|
||||
> input {
|
||||
font-weight: normal;
|
||||
cursor: pointer;
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
> button {
|
||||
min-width: 30%;
|
||||
}
|
||||
|
||||
@media (min-width: 750px) {
|
||||
height: auto;
|
||||
align-items: center;
|
||||
@ -124,8 +93,8 @@
|
||||
overflow: hidden;
|
||||
|
||||
> input {
|
||||
width: 70%;
|
||||
font-size: .6em;
|
||||
|
||||
&::file-selector-button {
|
||||
height: 30px;
|
||||
}
|
||||
@ -167,7 +136,7 @@
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
>* {
|
||||
> * {
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
|
||||
@ -181,45 +150,22 @@
|
||||
}
|
||||
|
||||
&-content {
|
||||
|
||||
>* {
|
||||
> * {
|
||||
box-sizing: border-box;
|
||||
text-align: left !important;
|
||||
line-height: 40px;
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
margin: 0;
|
||||
|
||||
>* {
|
||||
> * {
|
||||
text-align: left !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
>textarea {
|
||||
height: 120px;
|
||||
min-height: 40px;
|
||||
min-width: 300px;
|
||||
max-width: 300px;
|
||||
line-height: initial;
|
||||
|
||||
@media (max-width: 750px) {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
>input[type="file"] {
|
||||
font-size: small;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
>input[type="checkbox"] {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: 0;
|
||||
float: left;
|
||||
}
|
||||
textarea {
|
||||
height: 7rem;
|
||||
}
|
||||
.final-actions {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -63,9 +63,7 @@
|
||||
{%- trans -%}Delete{%- endtrans -%}
|
||||
</button>
|
||||
</div>
|
||||
<p>
|
||||
{{ form[field_name].label }}
|
||||
</p>
|
||||
{{ form[field_name].label_tag() }}
|
||||
{{ form[field_name].errors }}
|
||||
{%- else -%}
|
||||
<em>{% trans %}To edit your profile picture, ask a member of the AE{% endtrans %}</em>
|
||||
@ -118,68 +116,68 @@
|
||||
{# All fields #}
|
||||
<div class="profile-fields">
|
||||
{%- for field in form -%}
|
||||
{%-
|
||||
if field.name in ["quote","profile_pict","avatar_pict","scrub_pict","is_subscriber_viewable","forum_signature"]
|
||||
-%}
|
||||
{%- continue -%}
|
||||
{%- endif -%}
|
||||
{%- if field.name in ["quote","profile_pict","avatar_pict","scrub_pict","is_subscriber_viewable","forum_signature"] -%}
|
||||
{%- continue -%}
|
||||
{%- endif -%}
|
||||
|
||||
<div class="profile-field">
|
||||
<div class="profile-field-label">{{ field.label }}</div>
|
||||
<div class="profile-field-content">
|
||||
{{ field }}
|
||||
{%- if field.errors -%}
|
||||
<div class="field-error">{{ field.errors }}</div>
|
||||
{%- endif -%}
|
||||
<div class="profile-field">
|
||||
<div class="profile-field-label">{{ field.label }}</div>
|
||||
<div class="profile-field-content">
|
||||
{{ field }}
|
||||
{%- if field.errors -%}
|
||||
<div class="field-error">{{ field.errors }}</div>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{%- endfor -%}
|
||||
</div>
|
||||
{%- endfor -%}
|
||||
</div>
|
||||
|
||||
{# Textareas #}
|
||||
<div class="profile-fields">
|
||||
{%- for field in [form.quote, form.forum_signature] -%}
|
||||
<div class="profile-field">
|
||||
<div class="profile-field-label">{{ field.label }}</div>
|
||||
<div class="profile-field-content">
|
||||
{{ field }}
|
||||
{%- if field.errors -%}
|
||||
<div class="field-error">{{ field.errors }}</div>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
<div class="profile-fields">
|
||||
{%- for field in [form.quote, form.forum_signature] -%}
|
||||
<div class="profile-field">
|
||||
<div class="profile-field-label">{{ field.label }}</div>
|
||||
<div class="profile-field-content">
|
||||
{{ field }}
|
||||
{%- if field.errors -%}
|
||||
<div class="field-error">{{ field.errors }}</div>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
</div>
|
||||
{%- endfor -%}
|
||||
</div>
|
||||
{%- endfor -%}
|
||||
</div>
|
||||
|
||||
{# Checkboxes #}
|
||||
<div class="profile-visible">
|
||||
{{ form.is_subscriber_viewable }}
|
||||
{{ form.is_subscriber_viewable.label }}
|
||||
</div>
|
||||
<div class="profile-visible">
|
||||
{{ form.is_subscriber_viewable }}
|
||||
{{ form.is_subscriber_viewable.label }}
|
||||
</div>
|
||||
<div class="final-actions">
|
||||
|
||||
{%- if form.instance == user -%}
|
||||
<p>
|
||||
<a href="{{ url('core:password_change') }}">{%- trans -%}Change my password{%- endtrans -%}</a>
|
||||
</p>
|
||||
{%- elif user.is_root -%}
|
||||
<p>
|
||||
<a href="{{ url('core:password_root_change', user_id=form.instance.id) }}">
|
||||
{%- trans -%}Change user password{%- endtrans -%}
|
||||
</a>
|
||||
</p>
|
||||
{%- endif -%}
|
||||
|
||||
<p>
|
||||
<input type="submit" value="{%- trans -%}Update{%- endtrans -%}" />
|
||||
</p>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{%- if form.instance == user -%}
|
||||
<p>
|
||||
<a href="{{ url('core:password_change') }}">{%- trans -%}Change my password{%- endtrans -%}</a>
|
||||
<em>{%- trans -%}Username: {%- endtrans -%} {{ form.instance.username }}</em>
|
||||
<br />
|
||||
{%- if form.instance.customer -%}
|
||||
<em>{%- trans -%}Account number: {%- endtrans -%} {{ form.instance.customer.account_id }}</em>
|
||||
{%- endif -%}
|
||||
</p>
|
||||
{%- elif user.is_root -%}
|
||||
<p>
|
||||
<a href="{{ url('core:password_root_change', user_id=form.instance.id) }}">
|
||||
{%- trans -%}Change user password{%- endtrans -%}
|
||||
</a>
|
||||
</p>
|
||||
{%- endif -%}
|
||||
|
||||
<p>
|
||||
<input type="submit" value="{%- trans -%}Update{%- endtrans -%}" />
|
||||
</p>
|
||||
</form>
|
||||
|
||||
<p>
|
||||
<em>{%- trans -%}Username: {%- endtrans -%} {{ form.instance.username }}</em>
|
||||
<br />
|
||||
{%- if form.instance.customer -%}
|
||||
<em>{%- trans -%}Account number: {%- endtrans -%} {{ form.instance.customer.account_id }}</em>
|
||||
{%- endif -%}
|
||||
</p>
|
||||
|
||||
{%- endblock -%}
|
||||
|
||||
@ -173,6 +173,9 @@ class RegisteringForm(UserCreationForm):
|
||||
class UserProfileForm(forms.ModelForm):
|
||||
"""Form handling the user profile, managing the files"""
|
||||
|
||||
required_css_class = "required"
|
||||
error_css_class = "error"
|
||||
|
||||
class Meta:
|
||||
model = User
|
||||
fields = [
|
||||
|
||||
@ -47,6 +47,8 @@ class BillingInfoForm(forms.ModelForm):
|
||||
class StudentCardForm(forms.ModelForm):
|
||||
"""Form for adding student cards"""
|
||||
|
||||
error_css_class = "error"
|
||||
|
||||
class Meta:
|
||||
model = StudentCard
|
||||
fields = ["uid"]
|
||||
|
||||
@ -32,7 +32,7 @@
|
||||
x-model.debounce.500ms="search"
|
||||
/>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<fieldset class="grow">
|
||||
<legend>{% trans %}Product state{% endtrans %}</legend>
|
||||
<div class="row">
|
||||
<input type="radio" id="filter-active-products" x-model="productStatus" value="active">
|
||||
|
||||
@ -77,8 +77,7 @@
|
||||
>
|
||||
{% csrf_token %}
|
||||
{{ billing_form }}
|
||||
<br>
|
||||
<br>
|
||||
<br />
|
||||
<div
|
||||
x-show="[BillingInfoReqState.SUCCESS, BillingInfoReqState.FAILURE].includes(reqState)"
|
||||
class="alert"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user