runff 1.0 commit

style/insre.css

@@ -0,0 +1,258 @@
+/*
+To change this license header, choose License Headers in Project Properties.
+To change this template file, choose Tools | Templates
+and open the template in the editor.
+*/
+/* 
+    Created on : 7-apr-2019, 16.50.44
+    Author     : corradomulas
+*/
+
+@import "lesshat";
+
+
+.clearfix() {
+  zoom: 1;
+  &:before, &:after{
+    content: "";
+    display: table;
+  }
+  &:after{
+    clear: both;
+  }
+}
+
+.col() {
+  padding-right: 10px;
+  float: left;
+  &:last-of-type {
+    padding-right: 0;
+  }
+}
+
+.transition(@speed, @easing) {
+  transition: all @speed @easing;  
+}
+
+
+@white: #fff;
+@grey-lightest: #f9f9f9;
+@grey-light: #e3e3e3;
+@grey: #e5e5e5;
+@grey-dark: #b9b9b9;
+
+@purple: #c68eaa;
+@green: #7ed321;
+@emerald: #04BDBD;
+@blue: #04AEC5;
+@blue-dark: #0F6CC9;
+@color-primary: @green;
+@color-primary-strong: darken(saturate(@color-primary, 5%), 10%);
+
+@br: 3px;
+
+@fast: 0.35s;
+
+@ease: ease-in-out;
+
+// GENERAL
+
+* {
+  &, &:before, &:after {
+    box-sizing: border-box;
+  }
+}
+
+body {
+  padding: 1em;
+  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-size: 15px;
+  // font-size: 1vw;
+  color: @grey-dark;
+  background-color: @grey-light;
+}
+
+// TYPOGRAPHY
+
+h4 {
+  color: @color-primary;
+}
+
+// FORM
+
+input {
+  width: 100%;
+  padding: 1em;
+  line-height: 1.4;
+  background-color: @grey-lightest;
+  border: 1px solid @grey;
+  border-radius: 3px;
+  .transition(@fast, @ease);
+  &:focus {
+    outline: 0;
+    border-color: @color-primary-strong;
+    & + .input-icon {
+      i {
+        color: @color-primary;
+      }
+      &:after {
+        border-right-color: @color-primary;
+      }
+    }
+  }
+  &[type="radio"] {
+    display: none;
+    & + label {
+      &:extend(input);
+      display: inline-block;
+      width: 50%;
+      text-align: center;
+      float: left;
+      border-radius: 0;
+      &:first-of-type {
+        border-top-left-radius: @br;
+        border-bottom-left-radius: @br;
+      }
+      &:last-of-type {
+        border-top-right-radius: @br;
+        border-bottom-right-radius: @br;
+      }
+      i {
+        padding-right: 0.4em;
+      }
+    }
+    &:checked + label {
+      background-color: @color-primary;
+      color: @white;
+      border-color: @color-primary-strong;
+    }
+  }
+  &[type="checkbox"] {
+    display: none;
+    & + label {
+      position: relative;
+      display: block;
+      padding-left: 1.6em;
+      &:before {
+        &:extend(input);
+        position: absolute;
+        top: 0.2em;
+        left: 0;
+        display: block;
+        width: 1em;
+        height: 1em;
+        padding: 0;
+        content: "";
+      }
+      &:after {
+        position: absolute;
+        top: 0.45em;
+        left: 0.2em;
+        font-size: 0.8em;
+        color: @white;
+        opacity: 0;
+        font-family: FontAwesome;
+        content: "\f00c";
+      }
+    }
+  }
+  &:checked + label {
+    &:before {
+      &:extend(input[type="radio"]:checked + label);
+    }
+    &:after {
+      opacity: 1;
+    }
+  }
+}
+
+select {
+  &:extend(input[type="radio"] + label);
+  height: 3.4em;
+  line-height: 2;
+  &:first-of-type {
+    border-top-left-radius: @br;
+    border-bottom-left-radius: @br;
+  }
+  &:last-of-type {
+    border-top-right-radius: @br;
+    border-bottom-right-radius: @br;
+  }
+  &:focus, &:active {
+    outline: 0;
+    &:extend(input[type="radio"]:checked + label);
+  }
+  option {
+    &:extend(input);
+    background-color: @color-primary;
+    color: @white;
+  }
+}
+
+.input-group {
+  margin-bottom: 1em;
+  .clearfix();
+}
+
+.input-group-icon {
+  position: relative;
+  input {
+    padding-left: 4.4em;
+  }
+  .input-icon {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 3.4em;
+    height: 3.4em;
+    line-height: 3.4em;
+    text-align: center;
+    pointer-events: none;
+    &:after {
+      position: absolute;
+      top: 0.6em;
+      bottom: 0.6em;
+      left: 3.4em;
+      display: block;
+      border-right: 1px solid @grey;
+      content: "";
+      .transition(@fast, @ease);
+    }
+    i {
+      .transition(@fast, @ease);
+    }
+  }
+  
+}
+
+// STRUCTURE
+
+.container {
+  max-width: 38em;
+  padding: 1em 3em 2em 3em;
+  margin: 0em auto;
+  background-color: @white;
+  border-radius: @br * 1.4;
+  box-shadow: 0px 3px 10px -2px rgba(0,0,0,0.2);
+}
+
+.row {
+  .clearfix();
+}
+
+.col-half {
+  .col();
+  width: 100% / 2;
+}
+
+.col-third {
+  .col();
+  width: 100% / 3;
+}
+
+@media only screen and (max-width: 540px) {
+  .col-half {
+    width: 100%;
+    padding-right: 0;
+  }
+}