Merge branch 'feature/vuejs' into feature/vue-serverview

resources/assets/styles/components/animations.css

@@ -34,3 +34,15 @@
     @apply .bg-red-dark;
   }
 }
+
+/*
+ * transition="modal"
+ */
+.modal-enter, .modal-leave-active {
+  opacity: 0;
+}
+
+.modal-enter .modal-container,
+.modal-leave-active .modal-container {
+  animation: opacity 250ms linear;
+}

resources/assets/styles/components/authentication.css

@@ -1,3 +1,9 @@
 .login-box {
   @apply .bg-white .shadow-lg .rounded-lg .pt-10 .px-8 .pb-6 .mb-4;
+
+  @screen xsx {
+    @apply .rounded-none;
+    margin-top: 25%;
+    box-shadow: 0 15px 30px 0 rgba(0, 0, 0, .2), 0 -15px 30px 0 rgba(0, 0, 0, .2);
+  }
 }

resources/assets/styles/components/buttons.css

@@ -12,18 +12,41 @@
     }
   }
 
+  &.btn-green {
+    @apply .bg-green .border-green-dark .border .text-white;
+
+    &:hover:enabled {
+      @apply .bg-green-dark .border-green-darker;
+    }
+  }
+
   &.btn-red {
     @apply .bg-red .border-red-dark .border .text-white;
 
     &:hover:enabled {
-        @apply .bg-red-dark .border-red-darker;
-     }
-   }
-  /* Button Sizes */
+      @apply .bg-red-dark .border-red-darker;
+    }
+  }
+
+  &.btn-secondary {
+    @apply .border .border-grey-light .text-grey-dark;
+
+    &:hover:enabled {
+      @apply .border-grey .text-grey-darker;
+    }
+  }
+
+  /**
+   * Button Sizes
+   */
   &.btn-jumbo {
     @apply .p-4 .w-full .uppercase .tracking-wide .text-sm;
   }
 
+  &.btn-sm {
+    @apply .px-6 .py-3 .uppercase .tracking-wide .text-sm;
+  }
+
   &:disabled, &.disabled {
     opacity: 0.55;
     cursor: default;

resources/assets/styles/components/forms.css

@@ -1,3 +1,17 @@
+textarea, select, input, button {
+    outline: none;
+}
+
+input[type=number]::-webkit-outer-spin-button,
+input[type=number]::-webkit-inner-spin-button {
+    -webkit-appearance: none !important;
+    margin: 0;
+}
+
+input[type=number] {
+    -moz-appearance: textfield !important;
+}
+
 /**
  * Styles for the login form open input boxes. Label floats up above it when content
  * is input and then sinks back down into the field if left empty.
@@ -30,3 +44,35 @@
     top: 14px;
     transition: transform 200ms ease-out;
 }
+
+/**
+ * Styling for other forms throughout the Panel.
+ */
+.input:not(.open-label) {
+    @apply .appearance-none .p-3 .rounded .border .text-grey-darker .w-full;
+    transition: all 100ms linear;
+
+    &:focus {
+        @apply .border-blue-light;
+    }
+
+    &:required, &:invalid {
+        box-shadow: none;
+    }
+
+    &.error {
+        @apply .text-red-dark .border-red;
+    }
+}
+
+.input-label {
+    @apply .block .uppercase .tracking-wide .text-grey-darkest .text-xs .font-bold .mb-2;
+}
+
+.input-help {
+    @apply .text-xs .text-grey .pt-2;
+
+    &.error {
+        @apply .text-red-dark;
+    }
+}

resources/assets/styles/components/miscellaneous.css

@@ -42,6 +42,13 @@ code {
     }
 }
 
+/**
+ * Styling for elements that contain the core page content.
+ */
+.content-box {
+    @apply .bg-white .p-6 .border .border-grey-light .rounded;
+}
+
 /**
  * Flex boxes for server listing on user dashboard.
  */

resources/assets/styles/components/modal.css

@@ -0,0 +1,20 @@
+.modal-mask {
+  @apply .fixed .pin .z-50 .overflow-auto .flex;
+  background: rgba(0, 0, 0, 0.7);
+  transition: opacity 250ms ease;
+
+  & > .modal-container {
+    @apply .relative .p-8 .bg-white .w-full .max-w-md .m-auto .flex-col .flex;
+    transition: all 250ms ease;
+    margin-top: 15%;
+
+    /**
+     * On tiny phone screens make sure there is a margin on the sides and also
+     * center the modal rather than putting it towards the top of the screen.
+     */
+    @screen smx {
+      margin-top: auto;
+      width: 90%;
+    }
+  }
+}

resources/assets/styles/components/navigation.css

@@ -27,10 +27,6 @@
                     &:hover {
                         @apply .bg-blue-dark;
                     }
-
-                    & .feather {
-                        @apply .h-4;
-                    }
                 }
             }
         }

resources/assets/styles/components/spinners.css

@@ -31,11 +31,11 @@
   /**
    * Spinner Colors
    */
-  &.blue:after {
+  &.blue:after, &.text-blue:after {
     @apply .border-blue;
   }
 
-  &.white:after {
+  &.white:after, &.text-white:after {
     @apply .border-white;
   }