Erstellt, wird vielleicht noch zusammengefasst
parent
72cee710da
commit
75accc1cd2
|
|
@ -0,0 +1,130 @@
|
|||
/*TODO: Hintergrundfarben entfernen*/
|
||||
|
||||
|
||||
.hauptcontainer {
|
||||
/*Einzelne Elemente untereinander anzeigen.*/
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#reservationConfirmation_heading {
|
||||
/* background-color: #70AD47; */
|
||||
margin-top: 30px;
|
||||
margin-left: 30px;
|
||||
margin-bottom: 25px;
|
||||
margin-right: 50px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
#reservationConfirmation_subHeading {
|
||||
margin-left: 45px;
|
||||
margin-bottom: 20px;
|
||||
font-weight: 500;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
/*Container wird mit Daten aus der Datenbank gefüllt.*/
|
||||
#booksToReserve_container {
|
||||
padding-left: 45px;
|
||||
padding-right: 50px;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
.book_container {
|
||||
/* background-color: blueviolet; */
|
||||
display: flex;
|
||||
/*Einzelne Elemente nebeneinander anzeigen.*/
|
||||
flex-direction: row;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.bookCover_container {
|
||||
/*background-color: blue;*/
|
||||
display: flex;
|
||||
/*Verbietet dem Container, seine Standardgröße (px) zu ändern.*/
|
||||
flex: 0 0 75px;
|
||||
align-items: center;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.bookCover {
|
||||
/*Bild passt sich seinem Container an.*/
|
||||
max-width:100%;
|
||||
max-height:100%;
|
||||
}
|
||||
|
||||
.bookDetails_container {
|
||||
/* background-color: aquamarine; */
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
.bookTitle {
|
||||
margin-bottom: 10px;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.available_container {
|
||||
width: fit-content;
|
||||
/*Hintergrundfarbe wird an Inhalt angepasst.*/
|
||||
background-color: #70AD47;
|
||||
/*background-color: #F34343;*/
|
||||
/*Element immer an der unteren Seite des Containers platzieren.*/
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.available {
|
||||
color: white;
|
||||
margin: 10px 25px;
|
||||
}
|
||||
|
||||
.divider {
|
||||
margin-top: 15px;
|
||||
margin-bottom: 15px;
|
||||
background-color: #987554;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
#reservationConfirmationText {
|
||||
margin-left: 45px;
|
||||
margin-right: 50px;
|
||||
}
|
||||
|
||||
#meinebuecher_link {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
#button_container {
|
||||
margin-top: 20px;
|
||||
padding-left: 45px;
|
||||
padding-right: 50px;
|
||||
margin-bottom: 50px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.reserve_button {
|
||||
background-color: #664220;
|
||||
color:white;
|
||||
text-align: center;
|
||||
border-radius: 10px;
|
||||
font-size: medium;
|
||||
border-width: 0px;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
#backToCart_button {
|
||||
margin-right: auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#confirm_button {
|
||||
margin-left: auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -0,0 +1,217 @@
|
|||
/*TODO: Hintergrundfarben entfernen*/
|
||||
|
||||
.hauptcontainer {
|
||||
/*Einzelne Elemente untereinander anzeigen.*/
|
||||
flex-direction: column;
|
||||
background-color: #987554;
|
||||
}
|
||||
|
||||
#shoppingCart_heading {
|
||||
/* background-color: #70AD47; */
|
||||
margin-top: 30px;
|
||||
margin-left: 30px;
|
||||
margin-right: 50px;
|
||||
font-weight: 500;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#secondary_container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-left: 30px;
|
||||
margin-right: 50px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
/*Container wird mit Daten aus der Datenbank gefüllt.*/
|
||||
#cartItems_container {
|
||||
padding: 15px;
|
||||
background-color: #E5D3B3;
|
||||
overflow-y:auto
|
||||
}
|
||||
|
||||
.book_container {
|
||||
/* background-color: blueviolet; */
|
||||
display: flex;
|
||||
/*Einzelne Elemente nebeneinander anzeigen.*/
|
||||
flex-direction: row;
|
||||
cursor: pointer;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.bookCover_container {
|
||||
/* background-color: blue; */
|
||||
display: flex;
|
||||
/*Verbietet dem Container, seine Standardgröße (px) zu ändern.*/
|
||||
flex: 0 0 150px;
|
||||
align-items: center;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.bookCover {
|
||||
/*Bild passt sich seinem Container an.*/
|
||||
max-width:100%;
|
||||
max-height:100%;
|
||||
}
|
||||
|
||||
.bookDetails_container {
|
||||
/* background-color: aquamarine; */
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
.bookTitle {
|
||||
margin-bottom: 10px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.bookDetails {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.available_container {
|
||||
width: fit-content;
|
||||
/*Hintergrundfarbe wird an Inhalt angepasst.*/
|
||||
background-color: #70AD47;
|
||||
/*background-color: #F34343;*/
|
||||
/*Element immer an der unteren Seite des Containers platzieren.*/
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.available {
|
||||
color: white;
|
||||
margin: 10px 25px;
|
||||
}
|
||||
|
||||
.quantity_container {
|
||||
/* background-color: chartreuse; */
|
||||
display: flex;
|
||||
margin-left: auto;
|
||||
margin-top: auto;
|
||||
flex: 0 0 40px;
|
||||
}
|
||||
|
||||
.reduce_container {
|
||||
/* background-color: coral; */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.reduce {
|
||||
background-image: url('pictures/remove.png');
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.reduce:hover {
|
||||
background-image: url('pictures/remove_hover.png');
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.quantityText_container {
|
||||
width: 30px;
|
||||
background-color: white;
|
||||
border-color: black;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: default;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.add_container {
|
||||
/* background-color: coral; */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.add {
|
||||
background-image: url('pictures/add.png');
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.add:hover {
|
||||
background-image: url('pictures/add_hover.png');
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.trashCan_container {
|
||||
/* background-color: chartreuse; */
|
||||
padding-left: 20px;
|
||||
margin-left: auto;
|
||||
margin-top: auto;
|
||||
flex: 0 0 30px;
|
||||
}
|
||||
|
||||
.trashCan {
|
||||
background-image: url('pictures/bin.png');
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.trashCan:hover {
|
||||
background-image: url('pictures/bin_hover.png');
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.divider {
|
||||
margin-top: 15px;
|
||||
margin-bottom: 15px;
|
||||
background-color: #987554;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
#totalQuantity_container {
|
||||
background-color: #E5D3B3;
|
||||
margin-left: 25px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
/* TODO: Elegantere Lösung finden */
|
||||
min-width: 200px;
|
||||
max-width: 200px;
|
||||
min-height: 70px;
|
||||
max-height: 70px;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
#reserveNow {
|
||||
margin-top: 10px;
|
||||
background-color: #664220;
|
||||
width: 160px;
|
||||
height: 40px;
|
||||
color:white;
|
||||
text-align: center;
|
||||
border-radius: 50px;
|
||||
font-size: medium;
|
||||
border-width: 0px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/*----------------------------------------------------------------------------*/
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
#secondary_container {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#totalQuantity_container {
|
||||
margin-top: 30px;
|
||||
margin-left: 0px;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue