digitransit-ui/app/component/itinerary/street-mode-selector-button.scss
2024-10-15 15:31:47 +03:00

149 lines
2.6 KiB
SCSS

.street-mode-selector-weather-container {
display: flex;
flex-direction: column;
align-items: flex-start;
flex-basis: 56px;
padding-left: 7px;
flex-shrink: 0;
.mobile & {
flex-basis: 57px;
}
.hover-frame:hover {
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
cursor: pointer;
}
& > div {
display: flex;
flex-direction: column;
align-items: center;
min-width: 40px;
}
.icon-container {
height: 36px;
.icon {
width: 38px;
height: 38px;
}
}
.street-mode-selector-panel-weather-text {
font-size: 15px;
font-weight: $font-weight-medium;
font-stretch: normal;
font-style: normal;
line-height: normal;
color: #333;
}
}
.street-mode-selector-button-container {
display: flex;
cursor: pointer;
flex-basis: 121px;
flex-shrink: 0;
height: calc(32px + 1.25rem);
min-height: 52px;
border-radius: 5px;
position: relative;
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);
color: #333;
border: solid 1px #d9d9d9;
background-color: #fff;
align-items: center;
margin-right: 8px;
&:last-child {
margin-right: 0;
}
.street-mode-selector-button-content {
margin: auto;
display: flex;
flex-direction: row;
align-items: center;
.street-mode-selector-button-icon {
padding-right: 7px;
padding-top: 8px;
.icon-container {
.icon {
width: 30px;
height: 30px;
}
}
&.car-park-primary {
padding-top: 12px;
.icon-container {
.icon {
width: 22px;
height: 22px;
}
}
}
&.bike-and-vehicle-primary {
.icon-container {
.icon {
width: 27px;
height: 27px;
}
}
}
&.car-and-vehicle-primary {
.icon-container {
.icon {
width: 27px;
height: 27px;
}
}
}
&.secondary-icon {
margin-bottom: 20px;
margin-left: -18px;
padding-top: 0;
&.car-park-secondary {
margin-left: -12px;
}
.icon-container {
.icon {
width: 12px;
height: 12px;
}
}
}
}
.street-mode-button-info {
margin-top: 4px;
.street-mode-button-time {
font-size: 14px;
font-weight: $font-weight-medium;
height: 15px;
line-height: 15px;
white-space: nowrap;
}
.street-mode-button-length {
font-size: 13px;
font-weight: normal;
}
}
}
&:hover {
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}
}