164 lines
2.7 KiB
SCSS
164 lines
2.7 KiB
SCSS
@import "client/common";
|
|
|
|
|
|
$fluid-break: 1335px;
|
|
@mixin layout-small {
|
|
@media (max-width: #{$fluid-break - 1px}) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@mixin layout-normal {
|
|
@media (min-width: #{$fluid-break}) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
|
|
#test-drive-selection {
|
|
|
|
|
|
|
|
div[data-react-class="TestDriveSelection"] {
|
|
height: 100%;
|
|
}
|
|
.content-body-scroller {
|
|
height: 100%;
|
|
padding: 30px;
|
|
@include border_box_sizing;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
margin-bottom: 20px !important;
|
|
display: inline-block;
|
|
}
|
|
|
|
.test-drive-selection-wrapper {
|
|
float:left;
|
|
text-align:center;
|
|
width:31%;
|
|
|
|
&.select-4 {
|
|
|
|
}
|
|
&.select-2 {
|
|
margin:0 3.5%;
|
|
}
|
|
&.select-1 {
|
|
|
|
}
|
|
}
|
|
.test-drive-selection {
|
|
display:inline-block;
|
|
border-radius:10px;
|
|
border-width:1px;
|
|
border-color:$ColorScreenPrimary;
|
|
border-style:solid;
|
|
margin-bottom:15px;
|
|
|
|
@media (max-width: 1180px) {
|
|
min-height:360px;
|
|
}
|
|
@media (min-width: 1181px) {
|
|
min-height:340px;
|
|
}
|
|
@media (min-width: 1450px) {
|
|
min-height:305px;
|
|
}
|
|
}
|
|
|
|
a.select-package {
|
|
margin-bottom:15px;
|
|
max-width: 140px;
|
|
width: 100%;
|
|
}
|
|
|
|
.price-notice {
|
|
color:white;
|
|
font-size:16px;
|
|
}
|
|
|
|
.td-header {
|
|
height:45px;
|
|
color:white;
|
|
text-align:center;
|
|
font-size:24px;
|
|
line-height: 45px;
|
|
vertical-align: middle;
|
|
background-color:$ColorScreenPrimary;
|
|
|
|
border-top-left-radius: 10px;
|
|
border-top-right-radius: 10px;
|
|
|
|
@media (max-width: 1130px) {
|
|
font-size:16px;
|
|
}
|
|
}
|
|
.td-content {
|
|
@include border-box_sizing;
|
|
padding:10px;
|
|
width:100%;
|
|
|
|
}
|
|
|
|
.avatars {
|
|
margin-bottom:20px;
|
|
}
|
|
.td-msg {
|
|
margin-bottom:20px;
|
|
|
|
@media (max-width: 1400px) {
|
|
min-height:42px;
|
|
}
|
|
}
|
|
.td-desc {
|
|
line-height:120%;
|
|
color:$ColorTextTypical;
|
|
}
|
|
|
|
.avatar-header {
|
|
display:inline-block;
|
|
}
|
|
.avatar {
|
|
display:inline-block;
|
|
padding:1px;
|
|
width:48px;
|
|
height:48px;
|
|
background-color:#ed4818;
|
|
margin:10px 8px 0 0;
|
|
-webkit-border-radius:24px;
|
|
-moz-border-radius:24px;
|
|
border-radius:24px;
|
|
float:none;
|
|
|
|
@include layout-small {
|
|
width:32px;
|
|
height:32px;
|
|
-webkit-border-radius:16px;
|
|
-moz-border-radius:16px;
|
|
border-radius:16px;
|
|
margin:10px 6px 0 0;
|
|
}
|
|
}
|
|
.avatar img {
|
|
width: 48px;
|
|
height: 48px;
|
|
-webkit-border-radius:24px;
|
|
-moz-border-radius:24px;
|
|
border-radius:24px;
|
|
@include layout-small {
|
|
width:32px;
|
|
height:32px;
|
|
-webkit-border-radius:16px;
|
|
-moz-border-radius:16px;
|
|
border-radius:16px;
|
|
}
|
|
}
|
|
.selection-area {
|
|
width:100%;
|
|
padding-top:20px;
|
|
}
|
|
|
|
} |