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; } |