first commit

resources/sass/app.scss

@@ -0,0 +1,15 @@
+// Fonts
+@import url('https://fonts.googleapis.com/css?family=Nunito');
+
+@import "setup/reset";
+@import "setup/colors";
+@import "setup/fonts";
+@import "setup/positions";
+
+@import "components/btn";
+@import "components/elements";
+@import "components/main";
+@import "components/nav";
+@import "components/sidebar";
+
+@import "pages/auth";

resources/sass/components/_btn.scss

@@ -0,0 +1,39 @@
+// Button
+
+.btn {
+    font-size: 1.6rem;
+    border: 1px solid transparent;
+    padding: 0.5rem;
+    border-radius: 0.5rem;
+    cursor: pointer;
+    box-shadow: 1px 1px 2px $grey;
+    transition: background-color 0.2s, color 0.2s;
+
+    &:hover {
+        transition: background-color 0.2s, color 0.2s;
+    }
+}
+
+.btn-primary {
+    @extend .btn;
+    background-color: $medium;
+    border-color: $medium;
+    color: $white;
+
+    &:hover {
+        background-color: $dark;
+        color: $light;
+    }
+}
+
+.btn-secondary {
+    @extend .btn;
+    background-color: $mediumLight;
+    border-color: $medium;
+    color: $dark;
+
+    &:hover {
+        background-color: $dark;
+        color: $light;
+    }
+}

resources/sass/components/_elements.scss

@@ -0,0 +1,23 @@
+// Elements
+
+label {
+    display: block;
+}
+
+input {
+    width: 100%;
+    border: 1px solid $light;
+    background-color: $greyLight;
+    font-size: 1.6rem;
+    padding: 0.5rem;
+    border-radius: 0.5rem;
+
+    &:focus {
+        background-color: $white;
+        border-color: $dark;
+    }
+}
+
+input[type="checkbox"] {
+    width: unset;
+}

resources/sass/components/main.scss

@@ -0,0 +1,10 @@
+body {
+    overflow: hidden;
+    height: 100vh;
+}
+
+main {
+    overflow: auto;
+    width: 100%;
+    height: calc(100vh - 4.5rem);
+}

resources/sass/components/nav.scss

@@ -0,0 +1,16 @@
+
+nav {
+    background-color: $medium;
+    height: 4.5rem;
+
+    .site-logo {
+        width: 3rem;
+        fill: $dark;
+        transition: fill 0.2s;
+
+        &:hover {
+            fill: $mediumDark;
+            transition: fill 0.2s;
+        }
+    }
+}

resources/sass/components/sidebar.scss

@@ -0,0 +1,6 @@
+aside {
+    background-color: $mediumLight;
+    height: calc(100vh - 4.5rem);
+    width: 15rem;
+    flex-shrink: 0;
+}

resources/sass/pages/auth.scss

@@ -0,0 +1,24 @@
+// Auth box
+
+.auth {
+    max-width: 350px;
+    width: 100%;
+    background-color: $light;
+    margin: 3rem auto;
+    border-radius: 1rem;
+    box-shadow: 1px 1px 2px $grey;
+
+    .title-page {
+        font-size: 2.4rem;
+        font-weight: bold;
+        text-align: center;
+        color: $fontTitle;
+    }
+}
+
+.logo {
+    text-align: center;
+    font-size: 2.8rem;
+    color: $dark;
+    font-weight: bold;
+}

resources/sass/setup/_colors.scss

@@ -0,0 +1,24 @@
+// Colors
+
+$white: #ffffff;
+$black: #1a1a1a;
+$grey: grey;
+$greyLight: #eeeeee;
+
+
+
+$dark: #1F2605;
+$mediumDark: #1F6521;
+$medium: #53900F;
+$mediumLight: #A4A71E;
+$light: #D6CE15;
+
+
+$primary: $mediumDark;
+$secondary: #000;
+$interactive: #000;
+$error: #000;
+$disabled: #000;
+
+$font: $black;
+$fontTitle: $dark;

resources/sass/setup/_fonts.scss

@@ -0,0 +1,12 @@
+// Fonts
+@import url('https://fonts.googleapis.com/css?family=Open+Sans');
+
+html {
+    font-size: 62.5%;
+}
+
+body {
+    font-family: 'Open Sans', sans-serif;
+    font-size: 1.6rem;
+    color: $font;
+}

resources/sass/setup/_positions.scss

@@ -0,0 +1,119 @@
+// Positions
+
+$base: 1rem;
+
+.relative {
+    position: relative;
+}
+
+.absolute {
+    position: absolute;
+}
+
+.block {
+    display: block;
+}
+
+.inline {
+    display: inline;
+}
+
+.flex {
+    display: flex;
+}
+
+.flex-col {
+    display: flex;
+    flex-direction: column;
+}
+
+.flex-center {
+    display: flex;
+    align-items: center;
+}
+
+.flex-end {
+    display: flex;
+    justify-content: flex-end;
+}
+
+.flex-between {
+    display: flex;
+    justify-content: space-between;
+}
+
+.width-full {
+    width: 100%;
+}
+
+.m-auto {
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.p-auto {
+    padding-left: auto;
+    padding-right: auto;
+}
+
+@for $i from 1 through 5 {
+    .m-#{$i} {
+        margin: $i * $base;
+    }
+
+    .mx-#{$i} {
+        margin-left: $i * $base;
+        margin-right: $i * $base;
+    }
+
+    .my-#{$i} {
+        margin-top: $i * $base;
+        margin-bottom: $i * $base;
+    }
+
+    .mt-#{$i} {
+        margin-top: $i * $base;
+    }
+
+    .ml-#{$i} {
+        margin-left: $i * $base;
+    }
+
+    .mr-#{$i} {
+        margin-right: $i * $base;
+    }
+
+    .mb-#{$i} {
+        margin-bottom: $i * $base;
+    }
+
+    .p-#{$i} {
+        padding: $i * $base;
+    }
+
+    .px-#{$i} {
+        padding-left: $i * $base;
+        padding-right: $i * $base;
+    }
+
+    .py-#{$i} {
+        padding-top: $i * $base;
+        padding-bottom: $i * $base;
+    }
+
+    .pt-#{$i} {
+        padding-top: $i * $base;
+    }
+
+    .pl-#{$i} {
+        padding-left: $i * $base;
+    }
+
+    .pb-#{$i} {
+        padding-bottom: $i * $base;
+    }
+}
+
+.z-10 {
+    z-index: 10;
+}

resources/sass/setup/_reset.scss

@@ -0,0 +1,13 @@
+// Reset
+
+body {
+    margin: 0;
+}
+
+div,
+input,
+nav,
+aside {
+    box-sizing: border-box;
+}
+