Añadir plantilla

Base para front

9 files changed, 278 insertions, 0 deletions

diff --git a/front/odiparpack/app/styles/layout/_buttons.scss b/front/odiparpack/app/styles/layout/_buttons.scss
new file mode 100644
index 0000000..045ba0f
--- /dev/null
+++ b/front/odiparpack/app/styles/layout/_buttons.scss
@@ -0,0 +1,38 @@
+$_button-background-color: $action-color;
+$_button-background-color-hover: shade($action-color, 20%);
+
+#{$all-buttons} {
+  appearance: none;
+  background-color: $_button-background-color;
+  border: 0;
+  border-radius: $base-border-radius;
+  color: contrast-switch($_button-background-color);
+  cursor: pointer;
+  display: inline-block;
+  font-family: $base-font-family;
+  font-size: 16px;
+  -webkit-font-smoothing: antialiased;
+  font-weight: 600;
+  line-height: 1;
+  padding: $small-spacing $base-spacing;
+  text-align: center;
+  text-decoration: none;
+  transition: background-color $base-duration $base-timing;
+  user-select: none;
+  vertical-align: middle;
+  white-space: nowrap;
+
+  &:focus {
+    outline: none;
+    outline-offset: inherit;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+
+    &:hover {
+      background-color: $_button-background-color;
+    }
+  }
+}
diff --git a/front/odiparpack/app/styles/layout/_forms.scss b/front/odiparpack/app/styles/layout/_forms.scss
new file mode 100644
index 0000000..7f943e4
--- /dev/null
+++ b/front/odiparpack/app/styles/layout/_forms.scss
@@ -0,0 +1,47 @@
+$_form-background-color: #fff;
+$_form-box-shadow: inset 0 1px 3px rgba(#000, 0.06);
+$_form-box-shadow-focus: $_form-box-shadow, 0 0 5px rgba($action-color, 0.7);
+
+fieldset {
+  background-color: transparent;
+  border: 0;
+  margin: 0;
+  padding: 0;
+}
+
+legend {
+  font-weight: 600;
+  margin-bottom: $small-spacing / 2;
+  padding: 0;
+}
+
+textarea {
+  resize: vertical;
+  font-family: $base-font-family;
+}
+
+[type="checkbox"],
+[type="radio"] {
+  display: inline;
+  margin-right: $small-spacing / 2;
+}
+
+[type="file"] {
+  margin-bottom: $small-spacing;
+  width: 100%;
+}
+
+select {
+  margin-bottom: $small-spacing;
+  width: 100%;
+}
+
+[type="checkbox"],
+[type="radio"],
+[type="file"],
+select {
+  &:focus {
+    outline: $focus-outline;
+    outline-offset: $focus-outline-offset;
+  }
+}
diff --git a/front/odiparpack/app/styles/layout/_layout.scss b/front/odiparpack/app/styles/layout/_layout.scss
new file mode 100644
index 0000000..4f4001e
--- /dev/null
+++ b/front/odiparpack/app/styles/layout/_layout.scss
@@ -0,0 +1,19 @@
+html {
+  background-color: $viewport-background-color;
+  box-sizing: border-box;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+html,
+body {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+}
diff --git a/front/odiparpack/app/styles/layout/_lists.scss b/front/odiparpack/app/styles/layout/_lists.scss
new file mode 100644
index 0000000..06a7c0a
--- /dev/null
+++ b/front/odiparpack/app/styles/layout/_lists.scss
@@ -0,0 +1,19 @@
+ul,
+ol {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+dl {
+  margin: 0;
+}
+
+dt {
+  font-weight: 600;
+  margin: 0;
+}
+
+dd {
+  margin: 0;
+}
diff --git a/front/odiparpack/app/styles/layout/_media.scss b/front/odiparpack/app/styles/layout/_media.scss
new file mode 100644
index 0000000..dfa22ea
--- /dev/null
+++ b/front/odiparpack/app/styles/layout/_media.scss
@@ -0,0 +1,9 @@
+figure {
+  margin: 0;
+}
+
+img,
+picture {
+  margin: 0;
+  max-width: 100%;
+}
diff --git a/front/odiparpack/app/styles/layout/_tables.scss b/front/odiparpack/app/styles/layout/_tables.scss
new file mode 100644
index 0000000..8287bcf
--- /dev/null
+++ b/front/odiparpack/app/styles/layout/_tables.scss
@@ -0,0 +1,32 @@
+table {
+  border-collapse: collapse;
+  margin: $base-spacing 0;
+  text-align: left;
+  width: 100%;
+}
+
+thead {
+  line-height: $heading-line-height;
+  vertical-align: bottom;
+}
+
+tbody {
+  vertical-align: top;
+}
+
+tr {
+  border-bottom: $base-border;
+}
+
+th {
+  font-weight: 600;
+}
+
+th,
+td {
+  padding: $small-spacing $base-spacing;
+  @media screen and (max-width: 1400px) {
+    padding: $small-spacing;
+    padding-left: $base-spacing
+  }
+}
diff --git a/front/odiparpack/app/styles/layout/_typography.scss b/front/odiparpack/app/styles/layout/_typography.scss
new file mode 100644
index 0000000..49a10c6
--- /dev/null
+++ b/front/odiparpack/app/styles/layout/_typography.scss
@@ -0,0 +1,58 @@
+@import "../../styles/mixins";
+
+html {
+  color: $base-font-color;
+  font-family: $base-font-family;
+  font-size: 100%;
+  line-height: $base-line-height;
+}
+
+h1,
+h2,
+h3,
+h4,
+h6 {
+  font-family: $heading-font-family;
+  font-size: modular-scale(1);
+  line-height: $heading-line-height;
+  margin: 0 0 $small-spacing;
+}
+
+h5 {
+  font-family: $heading-font-family;
+  font-size: modular-scale(1);
+  line-height: $base-line-height;
+  font-weight: 600;
+  color: #202A75;
+  margin: 0 0 $small-spacing;
+}
+
+
+p {
+  margin: 0 0 $small-spacing;
+}
+
+a {
+  color: material-color('blue', '500');
+  ttext-decoration-skip-ink: auto;
+  transition: color $base-duration $base-timing;
+
+  &:focus {
+    outline: none;
+    outline-offset: none;
+  }
+}
+
+hr {
+  border-bottom: $base-border;
+  border-left: 0;
+  border-right: 0;
+  border-top: 0;
+  margin: $base-spacing 0;
+}
+
+
+[textalign="center"]{text-align: center !important}
+[textalign="left"]{text-align: left}
+[textalign="right"]{text-align: right}
+[textalign="justify"]{text-align: justify}
\ No newline at end of file
diff --git a/front/odiparpack/app/styles/layout/_variables.scss b/front/odiparpack/app/styles/layout/_variables.scss
new file mode 100644
index 0000000..cc20acf
--- /dev/null
+++ b/front/odiparpack/app/styles/layout/_variables.scss
@@ -0,0 +1,41 @@
+// Typography
+$base-font-family: $font-stack-system;
+$heading-font-family: $base-font-family;
+
+// Line height
+$base-line-height: 1.5;
+$heading-line-height: 1.2;
+
+// Other Sizes
+$base-border-radius: 3px;
+$base-spacing: 1.5em;
+$big-spacing: $base-spacing * 2;
+$small-spacing: $base-spacing / 2;
+$base-z-index: 0;
+
+// Colors
+$white: #FFF;
+$grey-light: #F5F5F5;
+$grey: #E0E0E0;
+$grey-dark: #424242;
+
+// Font Colors
+$base-font-color: $grey-dark;
+$action-color: $grey;
+
+// Border
+$base-border-color: $grey;
+$base-border: 1px solid $base-border-color;
+
+// Background Colors
+$viewport-background-color: #fff;
+
+// Focus
+$focus-outline-color: transparentize($action-color, 0.4);
+$focus-outline-width: 3px;
+$focus-outline: $focus-outline-width solid $focus-outline-color;
+$focus-outline-offset: 2px;
+
+// Animations
+$base-duration: 150ms;
+$base-timing: ease;
diff --git a/front/odiparpack/app/styles/layout/base.scss b/front/odiparpack/app/styles/layout/base.scss
new file mode 100644
index 0000000..8daf825
--- /dev/null
+++ b/front/odiparpack/app/styles/layout/base.scss
@@ -0,0 +1,15 @@
+// Bitters 1.7.0
+// http://bitters.bourbon.io
+// Copyright 2013-2017 thoughtbot, inc.
+// MIT License
+
+@import "../variables";
+@import "variables";
+
+@import "buttons";
+@import "forms";
+@import "layout";
+@import "lists";
+@import "media";
+@import "tables";
+@import "typography";