_partials
7 years ago
about.scss
7 years ago
admin-compat.scss
7 years ago
number-spinner.scss
7 years ago
post-editor.scss
7 years ago
views.scss
7 years ago
number-spinner.scss
108 lines
| 1 | /** |
| 2 | * Number spinner |
| 3 | */ |
| 4 | .number-style { |
| 5 | display: inline-block; |
| 6 | margin-right: 10px; |
| 7 | |
| 8 | input { |
| 9 | margin: 0 5px; |
| 10 | font-family: Consolas, Monaco, monospace; |
| 11 | text-align: center; |
| 12 | width: 4em; |
| 13 | } |
| 14 | |
| 15 | > span { |
| 16 | cursor: pointer; |
| 17 | |
| 18 | &.number-minus, |
| 19 | &.number-plus { |
| 20 | height: 24px; |
| 21 | width: 24px; |
| 22 | display: inline-block; |
| 23 | text-align: center; |
| 24 | vertical-align: top; |
| 25 | // to match WordPress: |
| 26 | border-radius: 3px; |
| 27 | background: #0085ba; |
| 28 | border-width: 1px; |
| 29 | border-style: solid; |
| 30 | border-color: #0073aa #006799 #006799; |
| 31 | -webkit-box-shadow: 0 1px 0 #006799; |
| 32 | box-shadow: 0 1px 0 #006799; |
| 33 | text-shadow: 0 -1px 1px #006799, 1px 0 1px #006799, 0 1px 1px #006799, -1px 0 1px #006799; |
| 34 | color: #FFF; |
| 35 | |
| 36 | &:hover { |
| 37 | background: #008ec2; |
| 38 | } |
| 39 | |
| 40 | &:active { |
| 41 | background: #0073aa; |
| 42 | border-color: #006799; |
| 43 | -webkit-box-shadow: inset 0 2px 0 #006799; |
| 44 | box-shadow: inset 0 2px 0 #006799; |
| 45 | -webkit-transform: translateY(1px); |
| 46 | -ms-transform: translateY(1px); |
| 47 | transform: translateY(1px); |
| 48 | outline: none; |
| 49 | } |
| 50 | |
| 51 | &.disabled { |
| 52 | background: #AAA; |
| 53 | border-color: #999 #777 #777; |
| 54 | -webkit-box-shadow: 0 1px 0 #777; |
| 55 | box-shadow: 0 1px 0 #777; |
| 56 | text-shadow: 0 -1px 1px #777, 1px 0 1px #777, 0 1px 1px #777, -1px 0 1px #777; |
| 57 | } |
| 58 | } |
| 59 | |
| 60 | &.number-minus::after, |
| 61 | &.number-plus::after { |
| 62 | font-family: dashicons; |
| 63 | font-size: 24px; |
| 64 | line-height: 24px; |
| 65 | height: 24px; |
| 66 | width: 24px; |
| 67 | display: inline-block; |
| 68 | color: #FFF; |
| 69 | text-align: center; |
| 70 | position: relative; |
| 71 | left: -1px; |
| 72 | } |
| 73 | |
| 74 | &.number-minus::after { |
| 75 | content: "\f140"; |
| 76 | } |
| 77 | |
| 78 | &.number-plus::after { |
| 79 | content: "\f142"; |
| 80 | } |
| 81 | } |
| 82 | |
| 83 | input[type='number']='number'] { |
| 84 | -moz-appearance: textfield; |
| 85 | } |
| 86 | |
| 87 | input::-webkit-outer-spin-button, |
| 88 | input::-webkit-inner-spin-button { |
| 89 | -webkit-appearance: none; |
| 90 | } |
| 91 | |
| 92 | /** |
| 93 | * Disable text selection on buttons. Seems to help jittery pointers. |
| 94 | */ |
| 95 | .number-minus, |
| 96 | .number-plus, |
| 97 | .number-minus::after, |
| 98 | .number-plus::after { |
| 99 | -webkit-touch-callout: none; /* iOS Safari */ |
| 100 | -webkit-user-select: none; /* Safari */ |
| 101 | -khtml-user-select: none; /* Konqueror HTML */ |
| 102 | -moz-user-select: none; /* Firefox */ |
| 103 | -ms-user-select: none; /* Internet Explorer/Edge */ |
| 104 | user-select: none; /* Non-prefixed version, currently |
| 105 | supported by Chrome and Opera */ |
| 106 | } |
| 107 | } |
| 108 |