@randstad-design/orbit-multitheme
Version:
multitheme Front-end code based on Randstad Human Forward components
143 lines (135 loc) • 5.38 kB
CSS
.divider {
border-bottom: 1px solid #e2e2e2; }
.divider--top {
border-bottom: 0;
border-top: 1px solid #e2e2e2; }
.bg-brand--gradient-orange .divider,
.bg-brand--gradient-blue .divider,
.bg-brand--dark-grey .divider {
border-color: rgba(255, 255, 255, 0.5); }
.select-menu__list {
border: 2px solid #e2e2e2;
opacity: 0;
position: absolute; }
.select-menu--open {
font-family: Montserrat, arial, sans-serif;
font-size: 16px;
text-transform: none;
line-height: 25px; }
@media (min-width: 941px) {
.select-menu--open {
font-family: Montserrat, arial, sans-serif;
font-size: 18px;
text-transform: none;
line-height: 30px; } }
.select-menu--open::after {
border-bottom: 1px solid #e2e2e2;
content: '';
left: 20px;
position: absolute;
right: 20px;
top: 60px;
z-index: 1; }
.select-menu--open.form-group__input {
margin-bottom: -3px; }
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
.select-menu--open.form-group__input {
margin-bottom: -2px; } }
.select-menu--open input[type='text'], .select-menu--open input[type='text']:active, .select-menu--open input[type='text']:focus {
border-color: #ff661a;
border-style: solid;
border-width: 2px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
padding: 14px 18px 20px; }
.bg-brand--gradient-orange .select-menu--open input[type='text'], .bg-brand--gradient-orange .select-menu--open input[type='text']:active, .bg-brand--gradient-orange .select-menu--open input[type='text']:focus {
border-color: #2e2e2e; }
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
.select-menu--open input[type='text'], .select-menu--open input[type='text']:active, .select-menu--open input[type='text']:focus {
min-height: 62px; } }
.select-menu--open .select-menu__list {
-webkit-overflow-scrolling: touch;
overflow-y: auto;
-webkit-transition: border-color 0.2s;
transition: border-color 0.2s;
border-color: #ff661a;
background: #fff;
border-style: solid;
border-width: 2px;
border-radius: 0 0 4px 4px;
border-top: 0;
left: 0;
max-height: 165px;
opacity: 1;
right: 0;
top: 60px;
z-index: 1; }
.select-menu--open .select-menu__list::-webkit-scrollbar {
border-radius: 3px;
width: 6px; }
.select-menu--open .select-menu__list::-webkit-scrollbar-thumb {
background: #e2e2e2;
border-radius: 3px; }
.bg-brand--gradient-orange .select-menu--open .select-menu__list {
border-color: #2e2e2e; }
.select-menu--open .select-menu__item {
color: #97999b;
fill: #97999b;
cursor: pointer;
line-height: 30px;
padding: 7px 18px; }
.select-menu--open .select-menu__item mark {
background: none;
color: #2e2e2e; }
.select-menu--open .select-menu__item--no-result {
font-family: Montserrat, arial, sans-serif;
font-size: 16px;
text-transform: none;
line-height: 25px;
cursor: none;
padding: 10px 18px 20px;
pointer-events: none; }
@media (min-width: 941px) {
.select-menu--open .select-menu__item--no-result {
font-family: Montserrat, arial, sans-serif;
font-size: 18px;
text-transform: none;
line-height: 30px; } }
.select-menu--open .select-menu__item.select-menu__item--action {
color: #ff8548;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center; }
.select-menu--open .select-menu__item.select-menu__item--action svg {
fill: #ff8548;
width: 1em;
height: 1em;
margin-right: 0.5em; }
.select-menu--open .select-menu__item--preselect {
background: #fff0e8; }
.form-group--error .select-menu--open input[type='text'], .form-group--error .select-menu--open input[type='text']:active, .form-group--error .select-menu--open input[type='text']:focus,
.form-group--error .select-menu--open .select-menu__list,
.form-group--error .select-menu--open .select-menu__list:active,
.form-group--error .select-menu--open .select-menu__list:focus {
background: #fef5f4;
border-color: #f13c23; }
.bg-brand--gradient-orange .form-group--error .select-menu--open input[type='text'], .bg-brand--gradient-orange .form-group--error .select-menu--open input[type='text']:active, .bg-brand--gradient-orange .form-group--error .select-menu--open input[type='text']:focus, .bg-brand--gradient-orange
.form-group--error .select-menu--open .select-menu__list, .bg-brand--gradient-orange
.form-group--error .select-menu--open .select-menu__list:active, .bg-brand--gradient-orange
.form-group--error .select-menu--open .select-menu__list:focus {
border-color: #2e2e2e; }
@media (min-width: 941px) {
.select-menu--open::after {
left: 22px;
right: 22px; }
.select-menu--open input[type='text'], .select-menu--open input[type='text']:active, .select-menu--open input[type='text']:focus {
padding: 12px 18px 17px; }
.select-menu--open .select-menu__list {
max-height: 240px;
padding-top: 10px; } }
/*# sourceMappingURL=autosuggest.css.map */