442 lines
12 KiB
CSS
442 lines
12 KiB
CSS
.input-picker .ws-picker-body, .input-picker .ws-button-row, .input-picker .picker-grid, .input-picker .picker-list, .input-picker .ws-options button {
|
|
zoom: 1;
|
|
}
|
|
.input-picker .ws-picker-body:before, .input-picker .ws-button-row:before, .input-picker .picker-grid:before, .input-picker .picker-list:before, .input-picker .ws-options button:before, .input-picker .ws-picker-body:after, .input-picker .ws-button-row:after, .input-picker .picker-grid:after, .input-picker .picker-list:after, .input-picker .ws-options button:after {
|
|
display: table;
|
|
clear: both;
|
|
content: ' ';
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
*
|
|
*/
|
|
.input-picker[data-class~="show-week"] .ws-week,
|
|
.show-week .input-picker .ws-week {
|
|
display: table-cell;
|
|
}
|
|
|
|
.input-picker[data-class~="show-yearbtns"] .ws-picker-header,
|
|
.show-yearbtns .input-picker .ws-picker-header {
|
|
margin: 0 4.23077em;
|
|
}
|
|
.input-picker[data-class~="show-yearbtns"] button.ws-year-btn,
|
|
.show-yearbtns .input-picker button.ws-year-btn {
|
|
display: inline-block;
|
|
}
|
|
|
|
.input-picker[data-class~="hide-btnrow"] .ws-button-row,
|
|
.hide-btnrow .input-picker .ws-button-row {
|
|
display: none;
|
|
}
|
|
|
|
.input-picker[data-class~="show-selectnav"] .ws-picker-header > button:after,
|
|
.show-selectnav .input-picker .ws-picker-header > button:after, .input-picker[data-class~="show-uparrow"] .ws-picker-header > button:after,
|
|
.show-uparrow .input-picker .ws-picker-header > button:after {
|
|
display: inline-block;
|
|
}
|
|
|
|
.input-picker[data-class~="show-selectnav"] .ws-picker-header > select,
|
|
.show-selectnav .input-picker .ws-picker-header > select {
|
|
display: inline-block;
|
|
}
|
|
.input-picker[data-class~="show-selectnav"] .ws-picker-header > button,
|
|
.show-selectnav .input-picker .ws-picker-header > button {
|
|
width: auto;
|
|
}
|
|
.input-picker[data-class~="show-selectnav"] .ws-picker-header > button > span,
|
|
.show-selectnav .input-picker .ws-picker-header > button > span {
|
|
display: none;
|
|
}
|
|
|
|
/* btn api */
|
|
.input-picker .ws-button-row > button {
|
|
background: #ccc;
|
|
padding: 0.38462em 0.61538em;
|
|
display: inline-block;
|
|
border: 0.07692em solid transparent;
|
|
}
|
|
|
|
.input-picker {
|
|
overflow: visible;
|
|
font-size: 13px;
|
|
outline: none;
|
|
text-align: center;
|
|
font-family: sans-serif;
|
|
width: 29.23077em;
|
|
min-width: 20.76923em;
|
|
max-width: 98vw;
|
|
/* Selector API: */
|
|
}
|
|
.input-picker .ws-po-outerbox {
|
|
-webkit-transform: translate(0, 30%);
|
|
transform: translate(0, 30%);
|
|
}
|
|
.input-picker[data-vertical="bottom"] .ws-po-outerbox {
|
|
-webkit-transform: translate(0, -30%);
|
|
transform: translate(0, -30%);
|
|
}
|
|
.input-picker.time-popover, .input-picker.datetime-local-popover {
|
|
width: 31.92308em;
|
|
}
|
|
.input-picker.time-popover .ws-prev,
|
|
.input-picker.time-popover .ws-next,
|
|
.input-picker.time-popover .ws-super-prev,
|
|
.input-picker.time-popover .ws-super-next {
|
|
display: none;
|
|
}
|
|
.input-picker.ws-size-2 {
|
|
width: 51.92308em;
|
|
min-width: 51.53846em;
|
|
}
|
|
.input-picker.ws-size-3 {
|
|
width: 75.76923em;
|
|
min-width: 75.53846em;
|
|
}
|
|
.input-picker.color-popover {
|
|
width: 590px;
|
|
min-width: 575px;
|
|
}
|
|
.input-picker abbr[title] {
|
|
cursor: help;
|
|
}
|
|
.input-picker li,
|
|
.input-picker button {
|
|
font-size: 1em;
|
|
line-height: 1.23077em;
|
|
color: #000;
|
|
transition: all 400ms;
|
|
}
|
|
.input-picker .ws-focus,
|
|
.input-picker :focus {
|
|
outline: 1px dotted #000;
|
|
}
|
|
.input-picker .ws-po-box {
|
|
position: relative;
|
|
padding: 1.15385em 1.53846em;
|
|
direction: ltr;
|
|
}
|
|
.input-picker .ws-picker-controls {
|
|
position: absolute;
|
|
top: 1.15385em;
|
|
}
|
|
.input-picker .ws-picker-controls > button {
|
|
box-sizing: content-box;
|
|
border: 0.07692em solid #cccccc;
|
|
padding: 0;
|
|
width: 1.84615em;
|
|
height: 1.84615em;
|
|
background: #eee;
|
|
z-index: 1;
|
|
color: #333;
|
|
}
|
|
.input-picker .ws-picker-controls > button.ws-year-btn:after, .input-picker .ws-picker-controls > button:before {
|
|
display: inline-block;
|
|
content: "";
|
|
width: 0px;
|
|
height: 0px;
|
|
border-style: solid;
|
|
margin-top: 0.29231em;
|
|
}
|
|
.input-picker .ws-picker-controls > button:hover {
|
|
border-color: #666;
|
|
color: #000;
|
|
}
|
|
.input-picker .ws-picker-controls > button[disabled] {
|
|
opacity: 0.4;
|
|
border-color: #eee;
|
|
color: #ddd;
|
|
}
|
|
.input-picker .prev-controls,
|
|
.input-picker .ws-po-box[dir="rtl"] .next-controls {
|
|
left: 1.53846em;
|
|
right: auto;
|
|
}
|
|
.input-picker .prev-controls > .ws-year-btn:after,
|
|
.input-picker .prev-controls > button:before,
|
|
.input-picker .ws-po-box[dir="rtl"] .next-controls > .ws-year-btn:after,
|
|
.input-picker .ws-po-box[dir="rtl"] .next-controls > button:before {
|
|
border-width: 0.35em 0.6em 0.35em 0;
|
|
border-color: transparent #333 transparent transparent;
|
|
margin-left: -0.1em;
|
|
}
|
|
.input-picker .prev-controls > .ws-year-btn,
|
|
.input-picker .ws-po-box[dir="rtl"] .next-controls > .ws-year-btn {
|
|
margin-right: 0.23077em;
|
|
margin-left: 0;
|
|
}
|
|
.input-picker .prev-controls > .ws-year-btn[disabled],
|
|
.input-picker .ws-po-box[dir="rtl"] .next-controls > .ws-year-btn[disabled] {
|
|
display: none;
|
|
}
|
|
.input-picker .next-controls,
|
|
.input-picker .ws-po-box[dir="rtl"] .prev-controls {
|
|
right: 1.53846em;
|
|
left: auto;
|
|
}
|
|
.input-picker .next-controls > button:before,
|
|
.input-picker .ws-po-box[dir="rtl"] .prev-controls > button:before {
|
|
margin-left: 0.11538em;
|
|
}
|
|
.input-picker .next-controls > .ws-year-btn:after,
|
|
.input-picker .next-controls > button:before,
|
|
.input-picker .ws-po-box[dir="rtl"] .prev-controls > .ws-year-btn:after,
|
|
.input-picker .ws-po-box[dir="rtl"] .prev-controls > button:before {
|
|
border-width: 0.35em 0 0.35em 0.6em;
|
|
border-color: transparent transparent transparent #333;
|
|
margin-right: -0.1em;
|
|
}
|
|
.input-picker .next-controls > .ws-year-btn,
|
|
.input-picker .ws-po-box[dir="rtl"] .prev-controls > .ws-year-btn {
|
|
margin-left: 0.23077em;
|
|
margin-right: 0;
|
|
}
|
|
.input-picker .next-controls > .ws-year-btn[disabled],
|
|
.input-picker .ws-po-box[dir="rtl"] .prev-controls > .ws-year-btn[disabled] {
|
|
display: none;
|
|
}
|
|
.input-picker.ws-po-visible .ws-picker-controls > button:after, .input-picker.ws-po-visible .ws-picker-controls > button:before {
|
|
content: " ";
|
|
}
|
|
.input-picker .ws-po-box[dir="rtl"] {
|
|
direction: rtl;
|
|
}
|
|
.input-picker.time-popover .ws-picker-body {
|
|
padding-top: 2.76923em;
|
|
}
|
|
.input-picker .ws-picker-body {
|
|
position: relative;
|
|
padding: 3.07692em 0 0;
|
|
zoom: 1;
|
|
margin: 0 -0.76923em;
|
|
}
|
|
.input-picker .ws-button-row {
|
|
position: relative;
|
|
margin: 0.76923em 0 0;
|
|
border-top: 0.07692em solid #eeeeee;
|
|
padding: 0.76923em 0 0;
|
|
text-align: left;
|
|
z-index: 2;
|
|
}
|
|
.input-picker .ws-button-row > button {
|
|
border: 0.07692em solid #cccccc;
|
|
background-color: #ddd;
|
|
background-image: linear-gradient(to bottom, #ececec 0%, #dddddd 100%);
|
|
transition: border-color 200ms linear;
|
|
float: left;
|
|
}
|
|
.input-picker .ws-button-row > button.ws-empty {
|
|
float: right;
|
|
}
|
|
.input-picker .ws-po-box[dir="rtl"] .ws-button-row > button {
|
|
float: right;
|
|
}
|
|
.input-picker .ws-po-box[dir="rtl"] .ws-button-row > button.ws-empty {
|
|
float: left;
|
|
}
|
|
.input-picker[data-currentview="setMonthList"] .ws-picker-header > select, .input-picker[data-currentview="setYearList"] .ws-picker-header > select {
|
|
max-width: 90%;
|
|
}
|
|
.input-picker[data-currentview="setDayList"] .ws-picker-header > select {
|
|
max-width: 40%;
|
|
}
|
|
.input-picker[data-currentview="setDayList"] .ws-picker-header > .month-select {
|
|
max-width: 50%;
|
|
}
|
|
.input-picker.time-popover .ws-picker-header {
|
|
top: -2.30769em;
|
|
}
|
|
.input-picker.time-popover .ws-picker-header button {
|
|
font-size: 1.15385em;
|
|
}
|
|
.input-picker .ws-picker-header {
|
|
position: absolute;
|
|
top: -3.07692em;
|
|
right: 0;
|
|
left: 0;
|
|
margin: 0 2.69231em;
|
|
}
|
|
.input-picker .ws-picker-header > button {
|
|
display: inline-block;
|
|
width: 100%;
|
|
margin: 0;
|
|
padding: 0.30769em 0;
|
|
font-weight: 700;
|
|
color: #000;
|
|
}
|
|
.input-picker .ws-picker-header > button > .month-digit,
|
|
.input-picker .ws-picker-header > button > .monthname-short {
|
|
display: none;
|
|
}
|
|
.input-picker .ws-picker-header > button:after {
|
|
content: " ";
|
|
margin: -0.1em 0.5em 0;
|
|
width: 0px;
|
|
height: 0px;
|
|
border-style: solid;
|
|
border-width: 0 0.3em 0.6em 0.3em;
|
|
border-color: transparent transparent #333 transparent;
|
|
vertical-align: middle;
|
|
}
|
|
.input-picker .ws-picker-header > button:hover {
|
|
text-decoration: underline;
|
|
}
|
|
.input-picker .ws-picker-header > button[disabled]:after {
|
|
display: none !important;
|
|
}
|
|
.input-picker .ws-picker-header > button[disabled]:hover {
|
|
text-decoration: none;
|
|
}
|
|
.input-picker .picker-grid {
|
|
position: relative;
|
|
zoom: 1;
|
|
overflow: hidden;
|
|
/* negative padding of td */
|
|
margin: 0 -0.15385em;
|
|
}
|
|
.input-picker .picker-grid .monthname,
|
|
.input-picker .picker-grid .month-digit {
|
|
display: none;
|
|
}
|
|
.input-picker.ws-size-1 .picker-list {
|
|
float: none;
|
|
width: auto;
|
|
}
|
|
.input-picker .picker-list {
|
|
position: relative;
|
|
zoom: 1;
|
|
width: 22.30769em;
|
|
float: left;
|
|
margin: 0 10px;
|
|
background: #fff;
|
|
}
|
|
.input-picker .picker-list tr {
|
|
border: 0;
|
|
}
|
|
.input-picker .picker-list th,
|
|
.input-picker .picker-list td {
|
|
padding: 0.15385em;
|
|
text-align: center;
|
|
}
|
|
.input-picker .picker-list.day-list td {
|
|
padding: 0.03846em 0.15385em;
|
|
}
|
|
.input-picker .picker-list.day-list td > button {
|
|
padding: 0.42308em 0;
|
|
}
|
|
.input-picker .picker-list.time-list > .ws-picker-header > button > .monthname {
|
|
display: inline;
|
|
}
|
|
.input-picker .picker-list.time-list td {
|
|
padding: 0.07692em 0.38462em;
|
|
}
|
|
.input-picker .picker-list.time-list td > button {
|
|
padding: 0.52692em 0;
|
|
}
|
|
.input-picker .picker-list td > button {
|
|
display: block;
|
|
padding: 1.58992em 0;
|
|
width: 100%;
|
|
color: #000;
|
|
background-color: #fff;
|
|
}
|
|
.input-picker .picker-list td > button.othermonth {
|
|
color: #888;
|
|
}
|
|
.input-picker .picker-list td > button:hover, .input-picker .picker-list td > button.checked-value {
|
|
color: #fff;
|
|
background: #000;
|
|
}
|
|
.input-picker .picker-list td > button[disabled], .input-picker .picker-list td > button[disabled]:hover {
|
|
color: #888;
|
|
background-color: #fff;
|
|
}
|
|
.input-picker .picker-list table {
|
|
width: 100%;
|
|
margin: 0;
|
|
border: 0 none;
|
|
border-collapse: collapse;
|
|
table-layout: fixed;
|
|
}
|
|
.input-picker .picker-list th,
|
|
.input-picker .picker-list td.week-cell {
|
|
font-size: 1em;
|
|
line-height: 1.23077em;
|
|
padding-bottom: 0.23077em;
|
|
text-transform: uppercase;
|
|
font-weight: 700;
|
|
}
|
|
.input-picker .ws-options {
|
|
margin: 0.76923em 0 0;
|
|
border-top: 0.07692em solid #eeeeee;
|
|
padding: 0.76923em 0 0;
|
|
text-align: left;
|
|
}
|
|
.input-picker .ws-options h5 {
|
|
margin: 0 0 0.38462em;
|
|
padding: 0;
|
|
font-size: 1.07692em;
|
|
font-weight: bold;
|
|
}
|
|
.input-picker .ws-options ul,
|
|
.input-picker .ws-options li {
|
|
padding: 0;
|
|
margin: 0;
|
|
list-style: none;
|
|
}
|
|
.input-picker .ws-options button {
|
|
display: block;
|
|
padding: 0.30769em;
|
|
width: 100%;
|
|
text-align: left;
|
|
}
|
|
.input-picker .ws-options button.ws-focus, .input-picker .ws-options button:focus, .input-picker .ws-options button:hover {
|
|
color: #fff;
|
|
background: #000;
|
|
}
|
|
.input-picker .ws-options button[disabled], .input-picker .ws-options button[disabled].ws-focus, .input-picker .ws-options button[disabled]:focus, .input-picker .ws-options button[disabled]:hover {
|
|
color: #888;
|
|
background: #fff;
|
|
text-decoration: none;
|
|
}
|
|
.input-picker .ws-options button .ws-value {
|
|
float: left;
|
|
}
|
|
.input-picker .ws-options button .ws-label {
|
|
float: right;
|
|
font-size: 96%;
|
|
}
|
|
.input-picker .ws-week,
|
|
.input-picker .ws-year-btn {
|
|
display: none;
|
|
}
|
|
|
|
.ws-picker-controls > button {
|
|
display: inline-block;
|
|
}
|
|
|
|
.ws-picker-header > button:after {
|
|
display: none;
|
|
}
|
|
|
|
.ws-picker-header select {
|
|
display: none;
|
|
}
|
|
|
|
/* helper classes to hide show/hide specific picker features */
|