gsy-component-library
Version:
reusable components from grid singularity
52 lines (51 loc) • 1.79 kB
CSS
@import url("https://fonts.googleapis.com/css?family=Lato:300,400,700");
@import url("https://fonts.googleapis.com/css?family=Roboto:100,200,300,400,500,700");
/* VERBUND THEME */
.nativeSelect {
position: relative; }
.theme-d3a .nativeSelect {
background: #1d5064; }
.theme-verbund .nativeSelect {
background: #1d5064; }
.nativeSelect__icon {
position: absolute;
right: 5px;
height: 25px;
display: flex;
justify-content: center; }
.theme-d3a .nativeSelect__icon svg {
fill: #35d7c6; }
.theme-verbund .nativeSelect__icon svg {
fill: #35d7c6; }
.nativeSelect__select {
display: block;
width: 100%;
background: transparent;
font-size: 12px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 0;
border-radius: 2px;
padding: 5px 50px 5px 15px;
position: relative;
z-index: 10; }
.theme-d3a .nativeSelect__select {
color: #fff; }
.theme-verbund .nativeSelect__select {
color: #fff; }
.nativeSelect__select::-ms-expand {
display: none; }
.theme-d3a .nativeSelect:focus, .theme-d3a .nativeSelect:hover {
box-shadow: 5px 5px 0 0 rgba(9, 21, 25, 0.25); }
.theme-verbund .nativeSelect:focus, .theme-verbund .nativeSelect:hover {
box-shadow: 5px 5px 0 0 rgba(9, 21, 25, 0.25); }
.theme-d3a .nativeSelect:focus .nativeSelect__icon svg, .theme-d3a .nativeSelect:hover .nativeSelect__icon svg {
fill: #a666ff; }
.theme-verbund .nativeSelect:focus .nativeSelect__icon svg, .theme-verbund .nativeSelect:hover .nativeSelect__icon svg {
fill: #a666ff; }
.nativeSelect--medium .nativeSelect__select {
padding: 15px 50px 15px 15px; }
.nativeSelect--medium .nativeSelect__icon {
right: 15px;
height: 45px; }