select { .border-radius(0); cursor: pointer; background: none; color: @primary-disabled; font-family: @fStandard; font-size: 1em; background-color: transparent; -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 0.1em 0.5em; outline:none; border: 0; &:focus { outline:none; } &::-moz-focus-inner { border: 0; } } .select { color: @primary-disabled; position: absolute; left: -1px; padding: 0.5em 0; width: 100%; margin: 0; max-height: 300px; overflow-y: auto; overflow-x: hidden; z-index: 0; -webkit-overflow-scrolling: touch; background-color: @bg; border: 1px solid @primary; white-space: nowrap; text-align: center; &::-webkit-scrollbar { width: 0.5em; } &::-webkit-scrollbar-track { background-color: transparent; border-left: 1px solid @primary; } &::-webkit-scrollbar-thumb { background-color: @primary-disabled; } .select-group { line-height: 1.5em; text-align: left; margin: 0.5em 0; padding-left: 5px; border-top: 1px solid @primary-disabled; border-bottom: 1px solid @primary-disabled; } .empty-c, .c, .lc { cursor: pointer; color: @primary-disabled; stroke-width: 1em; stroke: @primary-disabled; &:hover { color: @warning; stroke: @warning; } &.disabled { cursor: not-allowed; color: @disabled; stroke: @disabled; } &.active { color: @secondary; stroke: @secondary; } } @optionSpacing: 2em; .lc { line-height:@optionSpacing; text-align: left; } .empty-c { line-height:@optionSpacing; text-align: center; } .c { border:1px solid @primary-disabled; display: inline-block; padding: 0.1em; margin: 0.3em; width: 2em; line-height: @optionSpacing; text-align: center; &:hover { border:1px solid @warning; } &.disabled { border:1px solid @disabled; } &.active { border:1px solid @secondary; } } ul { display: inline-block; text-align: left; min-width: 15em; margin: 0 auto; padding: 0; list-style: none; } &.hardpoint { .c { width: 4.4em; padding: 0.1em 0.2em; } ul { width: 17em; } } }