Merge pull request #3 in FFE/sb1-ffe-framework from feature/Form-comp…

…onents to master

* commit '7bea3d7044030419ced31b21fe52e050a222510c':
  More variable clean up
  Added variable paths for fonts and icons
  Added mixins
  Added chevron icons used by buttons. Icons should only be added to FFE if there is a heavy design dependency. We do not want to have a bloated library with many unused icon references in the CSS
  Added styling for basic form components

less/components/action-button.less

@@ -0,0 +1,13 @@
+.action-button {
+    &:extend(.primary-button all);
+    background-color: @green-wcag;
+
+    &:focus,
+    &:hover {
+      background-color: darken(@green-wcag, 5%);
+    }
+    &:active,
+    &.-loading {
+      background-color: darken(@green-wcag, 10%);
+    }
+}

less/components/check-box.less

@@ -0,0 +1,90 @@
+/* ---- Accessible and animated checkbox ----
+    Requires the markup to wrap a checkbox-input and a label (in that order!)
+    in an element with class "checkbox"
+*/
+
+@keyframes checkmark {
+    0% { height: 0; width: 6px; }
+    50% { height: 11px; width: 6px; }
+}
+
+.checkbox {
+    > input[type="checkbox"] {
+        opacity: 0;
+        position: absolute;
+        cursor: pointer;
+
+        &:checked + label:before,
+        &:hover + label:before,
+        &:focus + label:before,
+        &:active + label:before {
+          outline: none;
+        }
+
+        &:hover + label:before {
+          border-color: @blue-royal-light-wcag;
+        }
+
+        &:active + label:before,
+        &:focus + label:before {
+          border-color: @blue-royal-light-wcag;
+          box-shadow: 0 0 0 2px @blue-focus;
+        }
+
+        &:checked + label:before {
+          border-color: @blue-royal-light-wcag;
+          background-color: @blue-royal-light-wcag;
+        }
+
+        &:focus + label:before {
+          box-shadow: 0 0 0 2px @blue-focus;
+        }
+
+
+
+        &:checked + label:after {
+            animation: checkmark 0.4s;
+            border-color: white;
+        }
+    }
+
+    > label {
+        position: relative;
+
+        &:before {
+            border: solid 2px @grey;
+            border-radius: 2px;
+            content: '';
+            display: inline-block;
+            height: 20px;
+            margin-right: 15px;
+            position: relative;
+            top: 3px;
+            transition: all 0.2s;
+            width: 20px;
+            background-color: white;
+        }
+
+        &:after {
+            transform: scaleX(-1) rotate(180deg + -45deg);
+            transform-origin: left top;
+
+            border-right: 3px solid transparent;
+            border-top: 3px solid transparent;
+
+            content: '';
+            display: block;
+            height: 11px;
+            width: 6px;
+            left: 4px;
+            top: 11px;
+            position: absolute;
+        }
+    }
+}
+
+.error .checkbox {
+   > label:before {
+      border-color: @orange-wcag;
+   }
+}

less/components/components.less

@@ -0,0 +1,17 @@
+/* Buttons */
+@import 'primary-button';
+@import 'secondary-button';
+@import 'shortcut-button';
+@import 'action-button';
+
+/* Inputs*/
+@import 'input-field';
+@import 'select-box';
+@import 'check-box';
+@import 'radio-input';
+@import 'radio-button';
+@import 'radio-switch';
+@import 'radio-block';
+
+/* Other*/
+@import 'loading-spinner';

less/components/input-field.less

@@ -0,0 +1,30 @@
+.input-field {
+  display: inline-block;
+  height: 45px;
+  padding: 13px;
+  font-family: MuseoSans-300, arial, sans-serif;
+  font-size: 18px;
+  border-radius: 6px;
+  border: 1px solid @grey-light;
+  transition: all 0.15s ease-in-out;
+  box-shadow: 0 1px 2px @grey inset;
+
+  &:hover {
+    border-color: @blue-royal-light-wcag;
+  }
+  &:focus, &:active {
+    border-color: @blue-royal-light-wcag;
+    box-shadow: 0 0 0 2px @blue-focus;
+    outline: none;
+  }
+  &.-small {
+    width: 95px;
+  }
+  &.-medium {
+    width: 130px;
+  }
+  &.-large {
+    width: 160px;
+  }
+
+}

less/components/loading-spinner.less

@@ -0,0 +1,16 @@
+.loading-spinner {
+    display: inline-block;
+    vertical-align: middle;
+
+    &:before {
+      .sb1-spinner();
+    }
+
+    &.-large:before {
+        border-width: 3px;
+        height: 40px;
+        width: 40px;
+    }
+}
+
+

less/components/primary-button.less

@@ -0,0 +1,78 @@
+.primary-button {
+  font-family: 'MuseoSans-500', arial, sans-serif;
+  font-size: 18px;
+  text-decoration: none;
+  cursor: pointer;
+  text-align: center;
+  vertical-align: middle;
+  padding: 0 30px;
+  border-radius: 4px;
+  color: @white;
+  background-color: @blue-flat;
+  border: 2px solid transparent;
+  display: block;
+  line-height: 41;
+  width: 100%;
+  overflow: hidden;
+   .shadow-buttons();
+  transition: all 0.2s;
+  outline: none;
+
+  &:focus {
+    box-shadow: 0 0 0 2px @blue-focus;
+    background-color: darken(@blue-flat,5%);
+  }
+
+  &:hover {
+    .shadow-buttons-hover();
+    background-color: darken(@blue-flat,5%);
+  }
+  &:active {
+    .shadow-buttons-active();
+    background-color: darken(@blue-flat,10%);
+  }
+  > .icon {
+    width: 36px;
+    height: 36px;
+  }
+
+  > .label {
+    overflow: hidden;
+    position: relative;
+
+    > .label-text {
+      position: relative;
+      bottom: 0;
+      transition: bottom 0.2s;
+    }
+
+    > .label-spinner {
+      .sb1-spinner(@white,22px);
+      position: absolute;
+      bottom: -40px;
+      left: ~"calc(50% - 11px)";
+      transition: bottom 0.2s;
+    }
+  }
+
+  &.-loading {
+    pointer-events: none;
+    background-color: darken(@blue-royal-light-wcag,10%);
+    > .label {
+      > .label-text {
+        bottom: 50px;
+      }
+
+      > .label-spinner {
+        bottom: 0;
+      }
+    }
+  }
+}
+
+@media screen and (min-width: @breakpoint-sm) {
+  .primary-button {
+    display: inline-block;
+    width: auto;
+  }
+}

less/components/radio-block.less

@@ -0,0 +1,64 @@
+.radio-block {
+  margin: 10px 0;
+  max-width: 600px;
+  min-width: 260px;
+  transition: width 0.3s ease-in-out;
+
+  .content {
+    width: 100%;
+    position: relative;
+    border: 2px solid @grey-light;
+    border-radius: 5px;
+    display: inline-block;
+    margin-right: 10px;
+    color: @black;
+    background-color: white;
+    cursor: pointer;
+
+    &:before {
+      .sb1-radioblob();
+      left: 18px;
+      top: 14px;
+    }
+
+    > .header {
+      display: block;
+      padding: 10px 60px;
+      cursor: pointer;
+    }
+
+    > .wrapper {
+      padding: 10px 0 25px 60px;
+      cursor: auto;
+    }
+  }
+
+  .radio-input {
+    & + .content > .wrapper {
+      display: none;
+    }
+
+    & + .content > .wrapper.-visible {
+      display: block;
+    }
+
+    &:checked + .content {
+        border: 2px solid @blue-royal;
+        > .header {
+          background-color: @blue-royal;
+          color: white;
+        }
+        > .wrapper {
+          display: block;
+        }
+    }
+
+    &:checked + .content:before {
+        .sb1-radioblob-active();
+      }
+
+    &:focus + .content {
+      box-shadow: 0 0 0 2px @blue-focus;
+    }
+  }
+}