Merge pull request #93 from Vizzuality/feature/rapzo-frontend-ui-kit

Feature/rapzo frontend ui kit

.gitignore

@@ -44,3 +44,11 @@ yarn-debug.log*
 
 # System Files
 .DS_Store
+
+# Personal TODO list and IDE
+TODO.md
+*.code-workspace
+
+# Apple
+.DS_Store
+

app/assets/javascripts/home.js

@@ -0,0 +1,2 @@
+// Place all the behaviors and hooks related to the matching controller here.
+// All this logic will automatically be available in application.js.

app/assets/javascripts/publications.js

@@ -0,0 +1,2 @@
+// Place all the behaviors and hooks related to the matching controller here.
+// All this logic will automatically be available in application.js.

app/assets/stylesheets/app/_colors.scss

@@ -0,0 +1,12 @@
+$white: #fff;
+$blue: #5587F6;
+$blue-dark: #0A4BDC;
+$blue-darker: #083AAB;
+$yellow: #FFDD49;
+$dark: #191919;
+$grey: #F5F8FE;
+$grey-dark: #595B5D;
+// $pink: #FA7C91;
+// $brown: #757763;
+// $beige-light: #D0D1CD;
+// $beige-lighter: #EFF0EB;

app/assets/stylesheets/app/_typography.scss

@@ -0,0 +1,41 @@
+@font-face {
+  font-family: "BrownTT Regular";
+  src: url("/assets/BrownTT-Regular.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "BrownTT Bold";
+  src: url("/assets/BrownTT-Bold.ttf") format("truetype");
+}
+
+::selection {
+  background-color: $yellow;
+}
+
+h1 {
+  @extend .is-size-1;
+}
+
+h2 {
+  @extend .is-size-2;
+}
+
+h3 {
+  @extend .is-size-3;
+}
+
+h4 {
+  @extend .is-size-4;
+}
+
+h5, h6 {
+  @extend .is-size-5;
+}
+
+p {
+  @extend .is-size-6;
+}
+
+small {
+  @extend .is-size-7;
+}

app/assets/stylesheets/app/buttons.scss

@@ -0,0 +1,72 @@
+@import "app/typography";
+
+$button-border-width: 4px;
+
+.link {
+  font-family: $family-sans-serif-bold;
+
+  &.is-hovered,
+  &:hover,
+  &.is-focused,
+  &:focus {
+    color: $blue-darker;
+    text-decoration: underline;
+  }
+
+  &.is-focused,
+  &:focus {
+    background: $yellow;
+    padding: 0 3px 3px 3px;
+  }
+}
+
+.button {
+  min-width: 160px;
+  height: 40px;
+  justify-content: center;
+  align-items: center;
+  font-family: $family-sans-serif-bold;
+
+  &.is-small {
+    border-radius: 0;
+    height: 30px;
+    min-width: 100px;
+  }
+
+  &.is-primary {
+    &.is-hovered,
+    &:hover {
+      background-color: $blue-dark;
+    }
+
+    &.is-focused,
+    &:focus {
+      background-color: $blue-darker;
+      border-color: $yellow;
+      border-width: 4px;
+    }
+  }
+
+  &.is-secondary {
+    border: 2px solid $blue;
+    color: $blue;
+
+    &.is-hovered,
+    &:hover,
+    &.is-focused,
+    &:focus {
+      background-color: $grey;
+      color: $blue-dark;
+    }
+
+    &.is-hovered,
+    &:hover {
+      border-color: $blue-dark;
+    }
+
+    &.is-focused,
+    &:focus {
+      border-color: $yellow;
+    }
+  }
+}

app/assets/stylesheets/app/forms.scss

@@ -0,0 +1 @@
+@import "app/colors";