digitransit-ui/app/component/city-bike.scss
2024-01-15 15:22:12 +02:00

91 lines
1.6 KiB
SCSS

$citybike-available-color: $citybike-color;
$citybike-not-available-color: $light-gray;
.city-bike-medium-size {
font-size: 42px;
}
.icon-badge {
width: 18px;
height: 18px;
top: -15px;
left: 19px;
.badge-circle {
stroke-width: 1px;
border-radius: 50%;
}
}
.availability-container {
.availability-header {
.available-bikes {
font-weight: $font-weight-medium;
}
margin-top: 5px !important;
margin-bottom: 6px !important;
}
.separate {
padding-left: 1px;
padding-right: 1px;
}
.availability-column {
height: 8px;
background: $citybike-not-available-color;
background-clip: content-box;
float: left;
}
.row {
.available-fewer {
background: $slider-severe-color;
}
.available-few {
background: $slider-warning-color;
}
.available-more {
background: $slider-ok-color;
}
.availability-column:first-child {
padding-left: 0;
border-top-left-radius: $border-radius;
border-bottom-left-radius: $border-radius;
}
.availability-column:last-child {
padding-right: 0;
border-top-right-radius: $border-radius;
border-bottom-right-radius: $border-radius;
}
}
}
.city-bike-use-container {
padding-top: 10px;
margin-top: 10px;
border-top: 1px solid;
border-color: $light-gray;
text-align: center;
.use-bike-button {
text-align: center;
border-radius: 30px;
background: $gray-blue;
color: #fff;
@include font-medium;
font-size: $font-size-small;
width: 80%;
height: 30px;
margin-top: 10px;
margin-bottom: 0;
padding: 0;
}
}