patternplate-client
Version:
Universal javascript client application for patternplate
90 lines (89 loc) • 1.43 kB
text/less
.pattern-environment-selection {
display: inline-flex;
flex-grow: 1;
justify-content: space-between;;
align-items: center;
position: relative;
height: 60px;
color: inherit;
cursor: pointer;
overflow: hidden;
padding-left: 0;
transition: .3s all ease-in-out;
margin-right: auto;
&--disabled {
color: @border-color;
cursor: not-allowed;
min-width: 0;
.pattern-environment-selection__value {
width: 0;
}
}
& &__label {
font-weight: bold;
overflow: hidden;
width: 0;
padding: 0;
}
& &__arrow {
padding: 0;
margin-left: -30px;
}
& &__value {
width: 0;
overflow: hidden;
}
& &__arrow,
& &__label,
& &__value {
position: relative;
z-index: 1;
background: @root-background;
pointer-events: none;
}
& &__native {
z-index: 0;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
appearance: none;
border: 0;
background: transparent;
color: inherit;
cursor: pointer;
&:focus {
outline: none;
}
}
& &__arrow {
transform: rotate(90deg);
}
@media screen and (min-width: 500px) {
min-width: 200px;
flex-grow: 0;
&--disabled {
.pattern-environment-selection__value {
width: 0;
}
}
& &__label {
width: auto;
padding: 10px 10px 10px 15px;
}
& &__value {
width: auto;
overflow: hidden;
}
& &__arrow {
margin-left: 0;
}
& &__native {
position: absolute;
}
&.pattern-tool {
padding: 0;
}
}
}