/* style picker api */ /* how to use: * Markup (good to style one input different than other): CSS: //replace the placeholder with .input-picker or (.input-date-picker) .input-picker .ws-week { display: table-cell; } SASS: //use the placeholder(s) and go crazy .input-picker { @extend %show-week; //@extend show-selectnav; } * */ @function wsem($pixels, $context: 13) { @return #{$pixels/$context}em } $pickerapis: show-week show-yearbtns hide-btnrow show-uparrow show-selectnav; %show-week { .ws-week { display: table-cell; } } %show-yearbtns { .ws-picker-header { margin: 0 wsem(55); } button.ws-year-btn { display: inline-block; } } %hide-btnrow { .ws-button-row { display: none; } } %show-uparrow { .ws-picker-header > button:after { display: inline-block; } } %show-selectnav { @extend %show-uparrow; .ws-picker-header { > select { display: inline-block; } > button { width: auto; > span { display: none; } } } } /* btn api */ $btnapis: hide-spinbtns hide-dropdownbtn hide-inputbtns inputbtns-outside a11yhide-inputbtns; %hide-spinbtns { + .input-buttons > .step-controls, .input-buttons > .step-controls { display: none; } &::-webkit-inner-spin-button, ::-webkit-inner-spin-button { display: none; } } %hide-dropdownbtn { + .input-buttons > .ws-popover-opener, .input-buttons > .ws-popover-opener { display: none; } } %hide-inputbtns { + .input-buttons, .input-buttons { display: none; } &::-webkit-inner-spin-button, ::-webkit-inner-spin-button { display: none; } } %a11yhide-inputbtns { + .input-buttons, .input-buttons { width: 0; margin: 0; overflow: visible; > .step-controls { display: none; } > .ws-popover-opener { height: 0; width: 0; overflow: hidden; &:focus, &:active { height: 19px; width: 19px; } } } } %inputbtns-outside { + span.input-buttons, span.input.input-buttons { margin-left: 2px; &.ws-is-rtl { margin-left: 0; margin-right: 2px; } } } $rangeapis: show-ticklabels show-tickvalues hide-ticks show-valuetooltip show-labeltooltip show-activevaluetooltip show-activelabeltooltip; %show-ticklabels { .ws-range-ticks[data-label]:after { display: inline-block; } } %show-tickvalues { .ws-range-ticks:before { display: inline-block; } } %hide-ticks { .ws-range-ticks { display: none; } } %show-valuetooltip { span.ws-range-thumb > span { &, > span:after { display: inline-block; } > span:after { content: attr(data-value) !important; visibility: visible !important; } } } %show-activevaluetooltip { &.ws-active span.ws-range-thumb > span, .ws-range.ws-active span.ws-range-thumb > span { &, > span:after { display: inline-block; } > span:after { content: attr(data-value) !important; visibility: visible !important; } } } %show-labeltooltip { span.ws-range-thumb > span { &, > span:before { display: inline-block; } > span:before { content: attr(data-valuetext) !important; visibility: visible !important; } } } %show-activelabeltooltip { &.ws-active span.ws-range-thumb > span, .ws-range.ws-active span.ws-range-thumb > span { &, > span:before { display: inline-block; } > span:before { content: attr(data-valuetext) !important; visibility: visible !important; } } }