mirror of
https://github.com/ae-utbm/sith.git
synced 2025-07-16 06:49:24 +00:00
Format with biome instead of standard
This commit is contained in:
@ -1,241 +1,245 @@
|
||||
#eboutic {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
align-items: flex-start;
|
||||
column-gap: 20px;
|
||||
margin: 0 20px 20px;
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
align-items: flex-start;
|
||||
column-gap: 20px;
|
||||
margin: 0 20px 20px;
|
||||
}
|
||||
|
||||
#eboutic-title {
|
||||
margin-left: 20px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
#eboutic h3 {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
#basket {
|
||||
min-width: 300px;
|
||||
border-radius: 8px;
|
||||
box-shadow: rgb(60 64 67 / 30%) 0 1px 3px 0, rgb(60 64 67 / 15%) 0 4px 8px 3px;
|
||||
padding: 10px;
|
||||
min-width: 300px;
|
||||
border-radius: 8px;
|
||||
box-shadow: rgb(60 64 67 / 30%) 0 1px 3px 0, rgb(60 64 67 / 15%) 0 4px 8px 3px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#basket h3 {
|
||||
margin-top: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 765px) {
|
||||
#eboutic {
|
||||
flex-direction: column-reverse;
|
||||
align-items: center;
|
||||
margin: 10px;
|
||||
row-gap: 20px;
|
||||
}
|
||||
#eboutic-title {
|
||||
margin-bottom: 20px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
#basket {
|
||||
width: -webkit-fill-available;
|
||||
}
|
||||
#eboutic {
|
||||
flex-direction: column-reverse;
|
||||
align-items: center;
|
||||
margin: 10px;
|
||||
row-gap: 20px;
|
||||
}
|
||||
#eboutic-title {
|
||||
margin-bottom: 20px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
#basket {
|
||||
width: -webkit-fill-available;
|
||||
}
|
||||
}
|
||||
|
||||
#eboutic .item-list {
|
||||
margin-left: 0;
|
||||
list-style: none;
|
||||
margin-left: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#eboutic .item-list li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10px
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#eboutic .item-row {
|
||||
gap: 10px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
#eboutic .item-name {
|
||||
word-break: break-word;
|
||||
width: 100%;
|
||||
line-height: 100%;
|
||||
word-break: break-word;
|
||||
width: 100%;
|
||||
line-height: 100%;
|
||||
}
|
||||
|
||||
#eboutic .fa-plus,
|
||||
#eboutic .fa-minus {
|
||||
cursor: pointer;
|
||||
background-color: #354a5f;
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
padding: 5px;
|
||||
font-size: 10px;
|
||||
line-height: 10px;
|
||||
width: 10px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
background-color: #354a5f;
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
padding: 5px;
|
||||
font-size: 10px;
|
||||
line-height: 10px;
|
||||
width: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#eboutic .item-quantity {
|
||||
min-width: 65px;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
min-width: 65px;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
#eboutic .item-price {
|
||||
min-width: 65px;
|
||||
text-align: right;
|
||||
min-width: 65px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* CSS du catalogue */
|
||||
|
||||
#eboutic #catalog {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-direction: column;
|
||||
row-gap: 30px;
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-direction: column;
|
||||
row-gap: 30px;
|
||||
}
|
||||
|
||||
#eboutic .category-header {
|
||||
margin-bottom: 15px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
#eboutic .product-group {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
column-gap: 15px;
|
||||
row-gap: 15px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
column-gap: 15px;
|
||||
row-gap: 15px;
|
||||
}
|
||||
#eboutic .product-button {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
min-height: 180px;
|
||||
height: fit-content;
|
||||
width: 150px;
|
||||
padding: 15px;
|
||||
overflow: hidden;
|
||||
box-shadow: rgb(60 64 67 / 30%) 0 1px 3px 0, rgb(60 64 67 / 15%) 0 4px 8px 3px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
row-gap: 5px;
|
||||
justify-content: flex-start;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
min-height: 180px;
|
||||
height: fit-content;
|
||||
width: 150px;
|
||||
padding: 15px;
|
||||
overflow: hidden;
|
||||
box-shadow: rgb(60 64 67 / 30%) 0 1px 3px 0, rgb(60 64 67 / 15%) 0 4px 8px 3px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
row-gap: 5px;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
#eboutic .product-button.selected {
|
||||
animation: bg-in-out 1s ease;
|
||||
background-color: rgb(216, 236, 255);
|
||||
animation: bg-in-out 1s ease;
|
||||
background-color: rgb(216, 236, 255);
|
||||
}
|
||||
|
||||
#eboutic .product-button.selected::after {
|
||||
content: "🛒";
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
padding: 5px;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 12px 2px rgb(0 0 0 / 14%);
|
||||
background-color: white;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
content: "🛒";
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
padding: 5px;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 12px 2px rgb(0 0 0 / 14%);
|
||||
background-color: white;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
#eboutic .product-button:active {
|
||||
box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
#eboutic .product-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 70px;
|
||||
max-height: 70px;
|
||||
object-fit: contain;
|
||||
border-radius: 4px;
|
||||
line-height: 70px;
|
||||
margin-bottom: 15px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 70px;
|
||||
max-height: 70px;
|
||||
object-fit: contain;
|
||||
border-radius: 4px;
|
||||
line-height: 70px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
#eboutic i.product-image {
|
||||
background-color: rgba(173, 173, 173, 0.2);
|
||||
background-color: rgba(173, 173, 173, 0.2);
|
||||
}
|
||||
|
||||
#eboutic .product-description h4 {
|
||||
font-size: .75em;
|
||||
word-break: break-word;
|
||||
margin: 0 0 5px 0;
|
||||
font-size: .75em;
|
||||
word-break: break-word;
|
||||
margin: 0 0 5px 0;
|
||||
}
|
||||
|
||||
#eboutic .product-button p {
|
||||
font-size: 13px;
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#eboutic .catalog-buttons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
column-gap: 30px;
|
||||
margin: 30px 0 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
column-gap: 30px;
|
||||
margin: 30px 0 0;
|
||||
}
|
||||
|
||||
#eboutic input {
|
||||
all: unset;
|
||||
all: unset;
|
||||
}
|
||||
|
||||
#eboutic .catalog-buttons button {
|
||||
min-width: 60px;
|
||||
min-width: 60px;
|
||||
}
|
||||
|
||||
#eboutic .catalog-buttons form {
|
||||
margin: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 765px) {
|
||||
#eboutic #catalog {
|
||||
row-gap: 15px;
|
||||
width: 100%;
|
||||
}
|
||||
#eboutic #catalog {
|
||||
row-gap: 15px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#eboutic section {
|
||||
text-align: center;
|
||||
}
|
||||
#eboutic section {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#eboutic .product-group {
|
||||
justify-content: space-around;
|
||||
flex-direction: column;
|
||||
}
|
||||
#eboutic .product-group {
|
||||
justify-content: space-around;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#eboutic .product-group .product-button {
|
||||
min-height: 100px;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 10px;
|
||||
}
|
||||
#eboutic .product-group .product-button {
|
||||
min-height: 100px;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
#eboutic .product-group .product-description {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
}
|
||||
#eboutic .product-group .product-description {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#eboutic .product-description h4 {
|
||||
text-align: left;
|
||||
max-width: 90%;
|
||||
}
|
||||
#eboutic .product-description h4 {
|
||||
text-align: left;
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
#eboutic .product-image {
|
||||
margin-bottom: 0;
|
||||
max-width: 70px;
|
||||
}
|
||||
#eboutic .product-image {
|
||||
margin-bottom: 0;
|
||||
max-width: 70px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bg-in-out {
|
||||
0% { background-color: white; }
|
||||
100% { background-color: rgb(216, 236, 255); }
|
||||
}
|
||||
0% {
|
||||
background-color: white;
|
||||
}
|
||||
100% {
|
||||
background-color: rgb(216, 236, 255);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user