Skip to content
This repository was archived by the owner on Mar 20, 2024. It is now read-only.

Commit 15d7bb3

Browse files
YagoYago
committed
Merge branch 'release/2.6.0'
2 parents af3870e + 09b48b5 commit 15d7bb3

40 files changed

+1005
-93
lines changed

‎README.md‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,8 +44,9 @@ There are several ways to get started:
4444
- Clone the repo `git clone https://github.com/antistatique/Swiss-Admin-web-guidelines.git`
4545

4646

47-
## Contribution (development tools)
48-
This is not needed to use the styleguide, only if you want to modify it to fix some bugs and contribute.
47+
## Contribution
48+
49+
If you want to contribute, fix a bug or suggest a new feature, please first [create a new issue](https://github.com/swiss/styleguide/issues/new), so we can discuss it. Then, please make a Pull Request to the `dev` branch. This is important, as we use the [Git Flow](https://github.com/swiss/styleguide/issues/new) workflow. We thank you in advance for your collaboration!
4950

5051

5152
### Installation on OSX/Unix

‎VERSION‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
2.5.5
1+
2.6.0

‎assets/sass/layout/checkboxes.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ Checkboxes are used when one or more elements are to be selected from a predefin
4545
input {
4646
position: absolute;
4747
left: -999999999%;
48+
display: none;
4849
}
4950
label {
5051
position: relative;

‎assets/sass/layout/forms.scss‎

Lines changed: 102 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,40 @@ HTML5 input types: `text`, `password`, `datetime`, `datetime-local`, `date`, `mo
3636
**2.1.8**
3737
- added **IDs** to label and help text, `aria-labelledby` and `role` to buttons for a better accessibility
3838
- added `<fieldset>` and `<legend class="hidden">` around `.form-group` for a better accessibility
39+
40+
<br>
41+
**2.6.0**
42+
- added a datepicker calendar plugin as an option. Use this in your script to initiate the plugin on the fields you need. See the [official Pikaday documentation](https://github.com/dbushell/Pikaday).
43+
44+
```js_example
45+
// code duplicated in footer to make the datepicker work in the styleguide
46+
// Load Pikaday on date fields
47+
if ($(window).width() > 767) {
48+
49+
$('[type=date]').each(function(){
50+
51+
// we need to change to type text to be able to write in another format
52+
// Just uncomment the following line:
53+
54+
// $(this).prop('type', 'text');
55+
56+
var picker = new Pikaday({
57+
field: $(this)[0],
58+
format: 'YYYY-MM-DD', // must be a input[type=text] to change this, see above
59+
firstDay: 1, // sets monday as first day
60+
theme: 'admin-theme',
61+
i18n: {
62+
previousMonth : 'Previous Month',
63+
nextMonth : 'Next Month',
64+
months : ['January','February','March','April','May','June','July','August','September','October','November','December'],
65+
weekdays : ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'],
66+
weekdaysShort : ['Sun','Mon','Tue','Wed','Thu','Fri','Sat']
67+
}
68+
});
69+
});
70+
71+
}
72+
```
3973
</div>
4074
4175
```html_example
@@ -105,11 +139,11 @@ HTML5 input types: `text`, `password`, `datetime`, `datetime-local`, `date`, `mo
105139
<label class="col-sm-2 control-label" id="check-group-1">Terms</label>
106140
<div class="col-sm-10">
107141
<div class="checkbox checkbox--left">
108-
<input id="checkboxform" type="checkbox" aria-labelledby="check-group-1 checkbox-label-1">
142+
<input id="checkboxform" name="remember" type="checkbox" aria-labelledby="check-group-1 checkbox-label-1">
109143
<label id="checkbox-label-1" for="checkboxform">Remember me</label>
110144
</div>
111145
<div class="checkbox checkbox--left">
112-
<input id="checkboxform2" type="checkbox" aria-labelledby="check-group-1 checkbox-label-2">
146+
<input id="checkboxform2" name="accept" type="checkbox" aria-labelledby="check-group-1 checkbox-label-2">
113147
<label id="checkbox-label-2" for="checkboxform2">Accept terms</label>
114148
</div>
115149
</div>
@@ -122,58 +156,58 @@ HTML5 input types: `text`, `password`, `datetime`, `datetime-local`, `date`, `mo
122156
<div class="form-group">
123157
<label class="col-sm-2 control-label" id="check-group-2">Terms</label>
124158
<div class="col-sm-10">
125-
<label class="checkbox-inline">
159+
<div class="checkbox-inline">
126160
<div class="checkbox checkbox--left">
127-
<input id="checkboxform3" type="checkbox" aria-labelledby="check-group-2 checkbox-label-3">
161+
<input id="checkboxform3" name="remember" type="checkbox" aria-labelledby="check-group-2 checkbox-label-3">
128162
<label id="checkbox-label-3" for="checkboxform3">Remember me</label>
129163
</div>
130-
</label>
131-
<label class="checkbox-inline">
164+
</div>
165+
<div class="checkbox-inline">
132166
<div class="checkbox checkbox--left">
133-
<input id="checkboxform4" type="checkbox" aria-labelledby="check-group-2 checkbox-label-4">
167+
<input id="checkboxform4" name="accept" type="checkbox" aria-labelledby="check-group-2 checkbox-label-4">
134168
<label id="checkbox-label-4" for="checkboxform4">Accept terms</label>
135169
</div>
136-
</label>
170+
</div>
137171
</div>
138172
</div>
139173
</fieldset>
140174
141-
<!-- Radio buttons horizontal -->
175+
<!-- Radio buttons vertical -->
142176
<fieldset>
143177
<legend class="hidden-legend">Terms</legend>
144178
<div class="form-group">
145179
<label class="col-sm-2 control-label" id="radio-group-1">Terms</label>
146180
<div class="col-sm-10">
147181
<div class="radio radio--left">
148-
<input id="radioform" type="radio" name="radio-h" aria-labelledby="radio-group-1 radio-label-1">
182+
<input id="radioform" value="yes" type="radio" name="radio-h" aria-labelledby="radio-group-1 radio-label-1">
149183
<label for="radioform" id="radio-label-1">Remember me</label>
150184
</div>
151185
<div class="radio radio--left">
152-
<input id="radioform2" type="radio" name="radio-h" aria-labelledby="radio-group-1 radio-label-2">
186+
<input id="radioform2" value="no" type="radio" name="radio-h" aria-labelledby="radio-group-1 radio-label-2">
153187
<label for="radioform2" id="radio-label-2">Don't remember me</label>
154188
</div>
155189
</div>
156190
</div>
157191
</fieldset>
158192
159-
<!-- Radio buttons vertical -->
193+
<!-- Radio buttons horizontal -->
160194
<fieldset>
161195
<legend class="hidden-legend">Terms</legend>
162196
<div class="form-group">
163197
<label class="col-sm-2 control-label" id="radio-group-2">Terms</label>
164198
<div class="col-sm-10">
165-
<label class="radio-inline">
199+
<div class="radio-inline">
166200
<div class="radio radio--left">
167-
<input id="radioform" type="radio" name="radio-h" aria-labelledby="radio-group-2 radio-label-3">
168-
<label for="radioform" id="radio-label-3">Remember me</label>
201+
<input id="radioform3" value="radio3" type="radio" name="radio-j" aria-labelledby="radio-group-2 radio-label-3">
202+
<label for="radioform3" id="radio-label-3">Remember me</label>
169203
</div>
170-
</label>
171-
<label class="radio-inline">
204+
</div>
205+
<div class="radio-inline">
172206
<div class="radio radio--left">
173-
<input id="radioform" type="radio" name="radio-h" aria-labelledby="radio-group-2 radio-label-4">
174-
<label for="radioform" id="radio-label-4">Remember me</label>
207+
<input id="radioform4" value="radio4" type="radio" name="radio-j" aria-labelledby="radio-group-2 radio-label-4">
208+
<label for="radioform4" id="radio-label-4">Remember me</label>
175209
</div>
176-
</label>
210+
</div>
177211
</div>
178212
</div>
179213
</fieldset>
@@ -245,7 +279,10 @@ input[type="date"],
245279
input[type="time"],
246280
input[type="datetime-local"],
247281
input[type="month"] {
248-
line-height: 1.2;
282+
283+
&.form-control {
284+
line-height: 1.2;
285+
}
249286
}
250287

251288

@@ -319,6 +356,7 @@ label {
319356
.checkbox-inline {
320357
padding-right: 20px;
321358
padding-left: 0;
359+
overflow: hidden;
322360
}
323361
.form-horizontal{
324362
.radio-inline,
@@ -335,4 +373,46 @@ label {
335373
// ie placeholders
336374
.placeholdr {
337375
color: $input-color-placeholder !important;
338-
}
376+
}
377+
378+
// hide Chrome native calendar popup
379+
input[type="date"]::-webkit-calendar-picker-indicator {
380+
display: none !important;
381+
}
382+
input[type="date"]::-webkit-input-placeholder {
383+
visibility: hidden !important;
384+
}
385+
386+
// Pickaday styles
387+
/**
388+
* This theme is an example to show how you can create your own.
389+
*/
390+
391+
.admin-theme .pika-table th {
392+
color: $empress;
393+
}
394+
395+
.admin-theme .pika-week {
396+
color: #999;
397+
}
398+
399+
.admin-theme .is-today .pika-button {
400+
background-color: $mocassin;
401+
color: $coal;
402+
}
403+
404+
.admin-theme .is-selected .pika-button {
405+
color: #fff;
406+
background: $fire-engine-red;
407+
box-shadow: inset 0 0 1px rgba($night-rider, 0.8);
408+
}
409+
410+
.admin-theme .is-disabled .pika-button {
411+
color: #999;
412+
opacity: .3;
413+
}
414+
415+
.admin-theme .pika-button:hover {
416+
color: #fff !important;
417+
background: $venetian-red !important;
418+
}

‎bower.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "swiss-styleguide",
3-
"version": "2.5.4",
3+
"version": "2.6.0",
44
"homepage": "http://swiss.github.io/styleguide",
55
"authors": "Antistatique.net",
66
"description": "Swiss Admin Styleguide",

‎build/css/admin.css‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)