Merge branch 'release/2.6.0'

swiss · Oct 20, 2015 · 15d7bb3 · 15d7bb3
2 parents af3870e + 09b48b5
commit 15d7bb3
Show file tree

Hide file tree

Showing 40 changed files with 1,005 additions and 93 deletions.
diff --git a/README.md b/README.md
@@ -44,8 +44,9 @@ There are several ways to get started:
   - Clone the repo `git clone https://github.com/antistatique/Swiss-Admin-web-guidelines.git`
 
 
-## Contribution (development tools)
-This is not needed to use the styleguide, only if you want to modify it to fix some bugs and contribute.
+## Contribution
+
+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!
 
 
 ### Installation on OSX/Unix

diff --git a/VERSION b/VERSION
@@ -1 +1 @@
-2.5.5
+2.6.0
diff --git a/assets/sass/layout/checkboxes.scss b/assets/sass/layout/checkboxes.scss
@@ -45,6 +45,7 @@ Checkboxes are used when one or more elements are to be selected from a predefin
   input {
     position: absolute;
     left: -999999999%;
+    display: none;
   }
   label {
     position: relative;

diff --git a/assets/sass/layout/forms.scss b/assets/sass/layout/forms.scss
@@ -36,6 +36,40 @@ HTML5 input types: `text`, `password`, `datetime`, `datetime-local`, `date`, `mo
 **2.1.8**
   - added **IDs** to label and help text, `aria-labelledby` and `role` to buttons for a better accessibility
   - added `<fieldset>` and `<legend class="hidden">` around `.form-group` for a better accessibility
+
+<br>
+**2.6.0**
+  - 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).
+
+  ```js_example
+  // code duplicated in footer to make the datepicker work in the styleguide
+  // Load Pikaday on date fields
+  if ($(window).width() > 767) {
+
+    $('[type=date]').each(function(){
+
+      // we need to change to type text to be able to write in another format
+      // Just uncomment the following line:
+
+      // $(this).prop('type', 'text');
+
+      var picker = new Pikaday({
+        field: $(this)[0],
+        format: 'YYYY-MM-DD', // must be a input[type=text] to change this, see above
+        firstDay: 1, // sets monday as first day
+        theme: 'admin-theme',
+        i18n: {
+            previousMonth : 'Previous Month',
+            nextMonth     : 'Next Month',
+            months        : ['January','February','March','April','May','June','July','August','September','October','November','December'],
+            weekdays      : ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'],
+            weekdaysShort : ['Sun','Mon','Tue','Wed','Thu','Fri','Sat']
+        }
+      });
+    });
+
+  }
+  ```
 </div>
 
 ```html_example
@@ -105,11 +139,11 @@ HTML5 input types: `text`, `password`, `datetime`, `datetime-local`, `date`, `mo
       <label class="col-sm-2 control-label" id="check-group-1">Terms</label>
       <div class="col-sm-10">
         <div class="checkbox checkbox--left">
-          <input id="checkboxform" type="checkbox" aria-labelledby="check-group-1 checkbox-label-1">
+          <input id="checkboxform" name="remember" type="checkbox" aria-labelledby="check-group-1 checkbox-label-1">
           <label id="checkbox-label-1" for="checkboxform">Remember me</label>
         </div>
         <div class="checkbox checkbox--left">
-          <input id="checkboxform2" type="checkbox" aria-labelledby="check-group-1 checkbox-label-2">
+          <input id="checkboxform2" name="accept" type="checkbox" aria-labelledby="check-group-1 checkbox-label-2">
           <label id="checkbox-label-2" for="checkboxform2">Accept terms</label>
         </div>
       </div>
@@ -122,58 +156,58 @@ HTML5 input types: `text`, `password`, `datetime`, `datetime-local`, `date`, `mo
     <div class="form-group">
       <label class="col-sm-2 control-label" id="check-group-2">Terms</label>
       <div class="col-sm-10">
-        <label class="checkbox-inline">
+        <div class="checkbox-inline">
           <div class="checkbox checkbox--left">
-            <input id="checkboxform3" type="checkbox" aria-labelledby="check-group-2 checkbox-label-3">
+            <input id="checkboxform3" name="remember" type="checkbox" aria-labelledby="check-group-2 checkbox-label-3">
             <label id="checkbox-label-3" for="checkboxform3">Remember me</label>
           </div>
-        </label>
-        <label class="checkbox-inline">
+        </div>
+        <div class="checkbox-inline">
           <div class="checkbox checkbox--left">
-            <input id="checkboxform4" type="checkbox" aria-labelledby="check-group-2 checkbox-label-4">
+            <input id="checkboxform4" name="accept" type="checkbox" aria-labelledby="check-group-2 checkbox-label-4">
             <label id="checkbox-label-4" for="checkboxform4">Accept terms</label>
           </div>
-        </label>
+        </div>
       </div>
     </div>
   </fieldset>
 
- <!-- Radio buttons horizontal -->
+ <!-- Radio buttons vertical -->
   <fieldset>
     <legend class="hidden-legend">Terms</legend>
     <div class="form-group">
       <label class="col-sm-2 control-label" id="radio-group-1">Terms</label>
       <div class="col-sm-10">
         <div class="radio radio--left">
-          <input id="radioform" type="radio" name="radio-h" aria-labelledby="radio-group-1 radio-label-1">
+          <input id="radioform" value="yes" type="radio" name="radio-h" aria-labelledby="radio-group-1 radio-label-1">
           <label for="radioform" id="radio-label-1">Remember me</label>
         </div>
         <div class="radio radio--left">
-          <input id="radioform2" type="radio" name="radio-h" aria-labelledby="radio-group-1 radio-label-2">
+          <input id="radioform2" value="no" type="radio" name="radio-h" aria-labelledby="radio-group-1 radio-label-2">
           <label for="radioform2" id="radio-label-2">Don't remember me</label>
         </div>
       </div>
     </div>
   </fieldset>
 
-  <!-- Radio buttons vertical -->
+  <!-- Radio buttons horizontal -->
   <fieldset>
     <legend class="hidden-legend">Terms</legend>
     <div class="form-group">
       <label class="col-sm-2 control-label" id="radio-group-2">Terms</label>
       <div class="col-sm-10">
-        <label class="radio-inline">
+        <div class="radio-inline">
           <div class="radio radio--left">
-            <input id="radioform" type="radio" name="radio-h" aria-labelledby="radio-group-2 radio-label-3">
-            <label for="radioform" id="radio-label-3">Remember me</label>
+            <input id="radioform3" value="radio3" type="radio" name="radio-j" aria-labelledby="radio-group-2 radio-label-3">
+            <label for="radioform3" id="radio-label-3">Remember me</label>
           </div>
-        </label>
-        <label class="radio-inline">
+        </div>
+        <div class="radio-inline">
           <div class="radio radio--left">
-            <input id="radioform" type="radio" name="radio-h" aria-labelledby="radio-group-2 radio-label-4">
-            <label for="radioform" id="radio-label-4">Remember me</label>
+            <input id="radioform4" value="radio4" type="radio" name="radio-j" aria-labelledby="radio-group-2 radio-label-4">
+            <label for="radioform4" id="radio-label-4">Remember me</label>
           </div>
-        </label>
+        </div>
       </div>
     </div>
   </fieldset>
@@ -245,7 +279,10 @@ input[type="date"],
 input[type="time"],
 input[type="datetime-local"],
 input[type="month"] {
-  line-height: 1.2;
+
+  &.form-control {
+    line-height: 1.2;
+  }
 }
 
 
@@ -319,6 +356,7 @@ label {
 .checkbox-inline {
   padding-right: 20px;
   padding-left: 0;
+  overflow: hidden;
 }
 .form-horizontal{
   .radio-inline,
@@ -335,4 +373,46 @@ label {
 // ie placeholders
 .placeholdr {
   color: $input-color-placeholder !important;
-}
+}
+
+// hide Chrome native calendar popup
+input[type="date"]::-webkit-calendar-picker-indicator {
+    display: none !important;
+}
+input[type="date"]::-webkit-input-placeholder {
+    visibility: hidden !important;
+}
+
+// Pickaday styles
+/**
+ * This theme is an example to show how you can create your own.
+ */
+
+.admin-theme .pika-table th {
+    color: $empress;
+}
+
+.admin-theme .pika-week {
+    color: #999;
+}
+
+.admin-theme .is-today .pika-button {
+    background-color: $mocassin;
+    color: $coal;
+}
+
+.admin-theme .is-selected .pika-button {
+    color: #fff;
+    background: $fire-engine-red;
+    box-shadow: inset 0 0 1px rgba($night-rider, 0.8);
+}
+
+.admin-theme .is-disabled .pika-button {
+    color: #999;
+    opacity: .3;
+}
+
+.admin-theme .pika-button:hover {
+    color: #fff !important;
+    background: $venetian-red !important;
+}
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "swiss-styleguide",
-  "version": "2.5.4",
+  "version": "2.6.0",
   "homepage": "http://swiss.github.io/styleguide",
   "authors": "Antistatique.net",
   "description": "Swiss Admin Styleguide",

diff --git a/build/css/admin.css b/build/css/admin.css