.cabinet { .spinner_wrapper { .ui-spinner { display: inline-block; position: relative; height: 30px; .spinner { border: #cccccc 1px solid; color: #808080; font-size: 14px; outline: none; width: 100%; padding: 0 10px; height: 30px; &:focus { @include box-shadow(0, 0, 5px, #69badb); border: #69badb 1px solid; } } &-button { position: absolute; right: 0; display: table; width: 26px; height: 15px; } &-up { top: 0px; top: -6px\9\0; .ui-button-text { vertical-align: bottom; } .ui-icon { width: 0; height: 0; border-style: solid; border-width: 0 4px 6px 4px; border-color: transparent transparent #8f9ea4 transparent; } } &-down { bottom: 0; bottom: 6px\9\0; .ui-button-text { vertical-align: top; } .ui-icon { width: 0; height: 0; border-style: solid; border-width: 6px 4px 0 4px; border-color: #8f9ea4 transparent transparent transparent; top: 2px; } } .ui-button-text { display: table-cell; text-align: center; width: 100%; height: 100%; line-height: 15px; } .ui-icon { display: inline-block; font-size: 0px; text-align: center; position: relative; } } &.disabled { pointer-events: none; .spinner { border: #d6d9da 1px solid; background-color: #eef2f3; } } } }