agenda-libre-ruby/public/webshims/shims/styles/scss/_api-forms-ext.scss
2014-07-20 02:43:13 +02:00

230 lines
3.6 KiB
SCSS

/* style picker api */
/* how to use:
*
Markup (good to style one input different than other):
<!-- simply use a placeholder as class on your input elment -->
<input type="date" class="show-week" />
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;
}
input[type="number"],
&[type="number"], {
-moz-appearance: textfield;
}
&::-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;
}
input[type="number"],
&[type="number"], {
-moz-appearance: textfield;
}
&::-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;
}
}
}