client/src/MobicoopBundle/Resources/assets/css/page/carpool/results.scss
/*****************************
SEARCH RESULTS
******************************/
body {
h2 {
color: $secondary;
text-decoration: underline;
font-size: 3rem;
font-weight: bold;
}
h3 {
color: $primary-dark;
font-size: 1rem;
font-weight: bold;
}
#search {
margin-top: 2vw;
color: $white;
}
.search {
color: $white;
background-color: #585858;
border-radius: 10px;
border: dotted;
height: 15vw;
width: 70vw;
padding: 1vw;
align-self: center;
.searchResult {
color: $secondary;
text-decoration: none;
}
.field {
.dropdown-item {
.icon {
color: $tertiary;
}
}
}
}
.textContent {
border-bottom: solid $white;
}
.labelOrigin {
color: $tertiary;
}
.labelDestination {
color: $primary;
}
.dot {
height: 35px;
width: 35px;
background-color: $primary;
border-radius: 50%;
display: inline-block;
}
#rechercher {
margin-top: 3vh;
}
#rechercher,
#save,
.contacter {
background-color: $white;
font-size: 100%;
font-family: inherit;
font-weight: bold;
border-radius: 20px;
color: $tertiary;
&:hover {
color: $white;
background-color: $tertiary;
}
}
.date {
color: $tertiary;
}
.heure {
color: $primary;
}
#dateDepart {
box-shadow: none;
border-top: 0;
border-right: 0;
border-left: 0;
outline: none;
border-bottom: solid 1px $white;
border-radius: 0;
background-color: #585858;
color: $white;
}
#heureDepart {
box-shadow: none;
border: 0;
outline: 0;
border-bottom: solid 1px $white;
border-radius: 0;
background-color: #585858;
color: $white;
}
#origin {
box-shadow: none;
border-top: 0;
border-right: 0;
border-left: 0;
outline: none;
border-bottom: solid 1px $white;
border-radius: 0;
background-color: #585858;
.input {
color: $white;
}
::placeholder {
color: $white;
opacity: 1;
}
}
#destination {
box-shadow: none;
border: 0;
outline: 0;
border-bottom: solid 1px $white;
border-radius: 0;
background-color: #585858;
.input {
color: $white;
}
::placeholder {
color: $white;
opacity: 1;
}
}
.driver {
margin-top: -2vh;
.results {
border: solid 0.5px #E9E7E7;
box-shadow: 2px 2px 2px #CECCCC;
background-color: $white;
color: #585858;
border-radius: 10px;
height: 9vw;
width: 70vw;
padding: 1vw;
align-self: center;
.first {
color: $white;
background-color: #585858;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
}
}
.passenger {
margin-top: -2vh;
.results {
border: solid 0.5px #E9E7E7;
box-shadow: 2px 2px 2px #CECCCC;
background-color: #585858;
color: $white;
border-radius: 10px;
height: 9vw;
width: 70vw;
padding: 1vw;
align-self: center;
.first {
color: #585858;
background-color: $white;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
}
}
.disabled {
color: #808080A9;
opacity: 0.5;
}
.dropdown,
.dropdown2 {
.button {
background-color: $white;
color: $tertiary;
&:hover {
color: $white;
background-color: $tertiary;
}
.fas {
padding: 0;
}
}
}
.dropDownResults {
margin-left: -67vw;
box-shadow: 2px 2px 2px #CECCCC;
margin-top: 1.5vh;
background-color: #E9E7E7;
color: #585858A9;
border-radius: 10px;
height: 15vw;
width: 70vw;
padding: 1vw;
align-self: center;
.offer {
color: $primary-dark;
}
.retour {
background-color: #585858A9;
color: $white;
}
}
.resultsV1 {
border: solid 0.5px #E9E7E7;
box-shadow: 2px 2px 2px #CECCCC;
background-color: $white;
color: #585858;
border-radius: 10px;
height: 15vw;
width: 70vw;
padding: 1vw;
align-self: center;
.top {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
background-color: #585858;
color: $white;
}
.source {
background-color: $white;
color: $tertiary;
border-radius: 20px;
&:hover {
color: $white;
background-color: $tertiary;
}
}
}
}