Go to most recent revision | Details | Last modification | View Log | RSS feed
| Rev | Author | Line No. | Line |
|---|---|---|---|
| 12722 | obado | 1 | /** Nikaia grouped input styles */ |
| 12723 | obado | 2 | .input-group{ |
| 3 | justify-content: center; |
||
| 4 | } |
||
| 5 | |||
| 12722 | obado | 6 | /* from Foundation for Sites by ZURB |
| 7 | * Version 6.4.3 |
||
| 8 | * foundation.zurb.com |
||
| 9 | */ |
||
| 10 | |||
| 11 | |||
| 12 | /* select box */ |
||
| 13 | |||
| 14 | .input-group>select{ |
||
| 15 | border-radius: 0 5px 5px 0; |
||
| 16 | } |
||
| 17 | |||
| 18 | select { |
||
| 19 | padding: 0.5rem; |
||
| 20 | -webkit-appearance: none; |
||
| 21 | -moz-appearance: none; |
||
| 22 | |||
| 23 | border: 1px solid #cacaca; |
||
| 24 | border-radius: 0 2px; |
||
| 25 | |||
| 26 | background-image: url("img/triangle.svg"); |
||
| 27 | background-origin: content-box; |
||
| 28 | background-position: right -1rem center; |
||
| 29 | background-repeat: no-repeat; |
||
| 30 | background-size: 9px 6px; |
||
| 31 | padding-right: 1.5rem; |
||
| 32 | transition: box-shadow 0.5s, border-color 0.25s ease-in-out; |
||
| 33 | } |
||
| 34 | @media screen and (min-width: 0\0) { |
||
| 35 | select { |
||
| 36 | background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAYCAYAAACbU/80AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIpJREFUeNrEkckNgDAMBBfRkEt0ObRBBdsGXUDgmQfK4XhH2m8czQAAy27R3tsw4Qfe2x8uOO6oYLb6GlOor3GF+swURAOmUJ+RwtEJs9WvTGEYxBXqI1MQAZhCfUQKRzDMVj+TwrAIV6jvSUEkYAr1LSkcyTBb/V+KYfX7xAeusq3sLDtGH3kEGACPWIflNZfhRQAAAABJRU5ErkJggg=="); } } |
||
| 37 | select:focus { |
||
| 38 | outline: none; |
||
| 39 | border: 1px solid #8a8a8a; |
||
| 40 | |||
| 41 | box-shadow: 0 0 5px #cacaca; |
||
| 42 | transition: border-color .25s ease-in-out, -webkit-box-shadow .5s; |
||
| 43 | transition: box-shadow .5s, border-color .25s ease-in-out; } |
||
| 44 | select:disabled { |
||
| 45 | background-color: #e6e6e6; |
||
| 46 | cursor: not-allowed; } |
||
| 47 | select::-ms-expand { |
||
| 48 | display: none; } |
||
| 49 | select[multiple] { |
||
| 50 | height: auto; |
||
| 51 | background-image: none; } |
||
| 52 | |||
| 53 | /* input groups */ |
||
| 54 | .input-group { |
||
| 55 | display: -webkit-box; |
||
| 56 | display: -ms-flexbox; |
||
| 57 | display: flex; |
||
| 58 | width: 100%; |
||
| 59 | margin-bottom: 1rem; |
||
| 60 | -ms-flex-align: stretch; |
||
| 61 | align-items: stretch; } |
||
| 62 | .input-group > :first-child { |
||
| 63 | border-radius: 0 0 0 0; } |
||
| 64 | .input-group > :last-child > * { |
||
| 65 | border-radius: 0 0 0 0; } |
||
| 66 | |||
| 67 | .input-group-label, .input-group-field, .input-group-button, .input-group-button a, |
||
| 68 | .input-group-button input, |
||
| 69 | .input-group-button button, |
||
| 70 | .input-group-button label { |
||
| 71 | margin: 0; |
||
| 72 | white-space: nowrap; } |
||
| 73 | |||
| 74 | .input-group-label { |
||
| 75 | padding: 0 1rem; |
||
| 76 | border: 1px solid #cacaca; |
||
| 77 | background: #e6e6e6; |
||
| 78 | color: #0a0a0a; |
||
| 79 | text-align: center; |
||
| 80 | white-space: nowrap; |
||
| 81 | display: -webkit-box; |
||
| 82 | display: -ms-flexbox; |
||
| 83 | display: flex; |
||
| 84 | flex: 0 0 auto; |
||
| 85 | -ms-flex-align: center; |
||
| 86 | align-items: center; } |
||
| 87 | .input-group-label:first-child { |
||
| 88 | border-right: 0; } |
||
| 89 | .input-group-label:last-child { |
||
| 90 | border-left: 0; } |
||
| 91 | |||
| 92 | .input-group-field { |
||
| 93 | border-radius: 0; |
||
| 94 | -ms-flex: 1 1 0; |
||
| 95 | flex: 1 1 0; |
||
| 96 | min-width: 0; } |
||
| 97 | |||
| 98 | .input-group-button { |
||
| 99 | padding-top: 0; |
||
| 100 | padding-bottom: 0; |
||
| 101 | text-align: center; |
||
| 102 | display: -webkit-box; |
||
| 103 | display: -ms-flexbox; |
||
| 104 | display: flex; |
||
| 105 | -ms-flex: 0 0 auto; |
||
| 106 | flex: 0 0 auto; } |
||
| 107 | .input-group-button a, |
||
| 108 | .input-group-button input, |
||
| 109 | .input-group-button button, |
||
| 110 | .input-group-button label { |
||
| 111 | -ms-flex-item-align: stretch; |
||
| 112 | align-self: stretch; |
||
| 113 | height: auto; |
||
| 114 | padding-top: 0; |
||
| 115 | padding-bottom: 0; |
||
| 116 | font-size: 1rem; } |