formulaire pour remplir des ticket de panne
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

366 lines
7.3 KiB

$dark-grey: #84878C;
$light-grey: #e5e5e5;
$dark-bordeau: #59184E;
$bordeau: #ac2a8d;
@font-face {
font-family: "monofonto";
src: url('../font/raleway.ttf') format('truetype');
}
body {
z-index: 1;
font-family: monofonto;
background-color: $light-grey;
margin: 143px 20px;
text-align: center;
&>a {
position: absolute;
left: 20px;
top: 20px;
margin: auto;
}
.logo {
display: block;
}
h1 {
margin: 40px;
font-weight: bold;
color: #454545;
}
p {
font-weight: bold;
color: $bordeau;
font-size: 20px;
height: 20px;
}
}
// nav
.nav {
width: 80%;
margin-left: 10%;
margin-bottom: 3%;
background-color: $dark-grey;
border-radius: 20px;
ul {
margin: auto;
padding: 0;
width: 60%;
&::after {
content: "";
display: block;
clear: both;
}
}
&__link{
width: 20%;
min-width: 100px;
float: left;
position: relative;
text-align: center;
list-style-type: none;
&:hover {
background-color: $dark-bordeau;
transition: .65s;
border-radius: 10px;
}
a {
padding-top: 10px;
padding-bottom: 10px;
color: white;
font-weight: bold;
display: inline-block;
text-decoration: none;
&:hover {
color: white;
}
}
}
}
// formulaire
form {
width: 20%;
min-width: 300px;
background-color: white;
display: block;
position: relative;
margin: auto;
border-radius: 30px;
padding: 20px;
}
.container-field {
position: relative;
small {
display: none;
color: red;
}
&__img {
display: none;
position: relative;
float: right;
width: 20px;
bottom: 20px;
right: 20px;
}
&__field {
background-color: inherit;
position: relative;
display: block;
text-decoration-line: none;
appearance: none;
text-align: center;
color: #454444;
resize: none;
outline: none;
margin: 10px auto;
border: 4px solid #4e4d4d;
padding: 10px 10px;
border-radius: 30px;
width: 60%;
max-width: 300px;
transition: .25s;
&:focus, &:hover {
width: 70%;
border-color: $bordeau;
background-color: white;
}
&--submit:hover {
width: 65%;
border-color: #2ecc71;
background-color: #82E6AC;
}
}
}
// help
.hint {
position: absolute;
width: 100%;
top: 0;
&__int {
position: relative;
left: 35%;
}
&__help {
&:hover {
display: block;
}
display: none;
z-index: 2;
position: relative;
width: 170px;
left: 71%;
border-radius: 30px;
box-shadow: 0 0 10px black;
padding: 15px;
margin: 0;
background-color: $light-grey;
font-size: 14px;
p {
position: relative;
font-size: 14px;
}
img {
border-radius: 15px;
width: 100%;
}
code {
background-color: #aaa;
border-radius: 5px;
font-family: courier, monospace;
padding: 3px 5px;
font-size: 14px;
}
}
}
// table
.table {
width: 80%;
border-radius: 5px;
margin-left: 10%;
margin-top: 2%;
background-color: $dark-grey;
color: white;
border: 1px solid $dark-grey;
th {
width: 1%;
}
td {
background-color: $light-grey;
border: 1px solid $dark-grey;
width: 1%;
min-width: 20px;
border-radius: 5px;
text-align: center;
word-break: break-all;
color: $dark-grey;
img {
width: 40%;
max-width: 40px;
}
.input {
border: 2px solid $bordeau;
border-radius: 5px;
text-align: inherit;
outline: none;
color: $dark-grey;
transition: .05s;
&:hover {
font-weight: bold;
}
&:focus {
font-weight: bold;
border: 4px solid $bordeau;
}
}
}
&__title td{
color: $bordeau;
font-weight: bold;
word-break: normal;
}
&__switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
input {
opacity: 0;
width: 0;
height: 0;
&:checked + .table__switch__slider {
background-color: #2ecc71;
}
&:focus + .table__switch__slider {
box-shadow: 0 0 1px #2ecc71;
}
&:checked + .table__switch__slider:before {
transform: translateX(26px);
}
}
&__slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: crimson;
border-radius: 34px;
transition: .4s;
&:before {
position: absolute;
border-radius: 50%;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
transition: .4s;
}
}
}
}
.container-popup {
z-index: 1;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,0,0,.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
&:target {
visibility: visible;
opacity: 1;
}
&__popup {
margin: auto;
padding: 20px;
background: #fff;
top: 0;
bottom: 0;
left: 0;
right: 0;
border-radius: 5px;
width: 30%;
height: 150px;
position: absolute;
transition: all 5s ease-in-out;
h2 {
margin-top: 0;
color: #333;
}
p {
max-height: 30%;
overflow: auto;
}
&__close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
&:hover {
color: #06D85F;
}
}
}
}
.button {
border: 3px solid $bordeau;
background-color: $light-grey;
font-weight: bold;
text-decoration: none;
transition: .5s;
&:hover {
color: $light-grey;
background-color: $bordeau;
}
&--small {
width: 3rem;
border-width: medium;
border-radius: 5px;
margin: 5px;
color: $dark-grey;
}
&--large {
color: $bordeau;
display: inline-block;
margin-bottom: 3%;
padding: 10px 40px;
border-radius: 20px;
}
}