simplified and separate sign in/register flow

2017-05-05 20:40:20 -05:00
parent 776f6adbfe
commit 5937675668
6 changed files with 92 additions and 70 deletions
--- a/app/assets/stylesheets/app/_ui.scss
+++ b/app/assets/stylesheets/app/_ui.scss
@@ -0,0 +1,149 @@
+//== Media queries breakpoints
+//
+//## Define the breakpoints at which your layout will change, adapting to different screen sizes.
+
+// Extra small screen / phone
+//** Deprecated `$screen-xs` as of v3.0.1
+$screen-xs:                  480px !default;
+//** Deprecated `$screen-xs-min` as of v3.2.0
+$screen-xs-min:              $screen-xs !default;
+
+// Small screen / tablet
+//** Deprecated `$screen-sm` as of v3.0.1
+$screen-sm:                  768px !default;
+$screen-sm-min:              $screen-sm !default;
+
+// Medium screen / desktop
+//** Deprecated `$screen-md` as of v3.0.1
+$screen-md:                  992px !default;
+$screen-md-min:              $screen-md !default;
+//** Deprecated `$screen-desktop` as of v3.0.1
+$screen-desktop:             $screen-md-min !default;
+
+// Large screen / wide desktop
+//** Deprecated `$screen-lg` as of v3.0.1
+$screen-lg:                  1200px !default;
+$screen-lg-min:              $screen-lg !default;
+//** Deprecated `$screen-lg-desktop` as of v3.0.1
+$screen-lg-desktop:          $screen-lg-min !default;
+
+// So media queries don't overlap when required, provide a maximum
+$screen-xs-max:              ($screen-sm-min - 1) !default;
+$screen-sm-max:              ($screen-md-min - 1) !default;
+$screen-md-max:              ($screen-lg-min - 1) !default;
+
+@mixin MQ-Xsmall() {
+  @media (max-width: $screen-xs-max) {
+    @content;
+  }
+}
+
+@mixin MQ-Small() {
+  @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
+    @content;
+  }
+}
+
+@mixin MQ-Medium() {
+  @media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
+    @content;
+  }
+}
+
+
+@mixin MQ-Large() {
+  @media (min-width: $screen-lg-min) {
+    @content;
+  }
+}
+
+* {
+    box-sizing: border-box;
+}
+
+*:focus {outline:0;}
+
+.float-group {
+  height: 15px;
+  &.h10 {
+    height: 10px;
+  }
+
+  &.h20 {
+    height: 20px;
+  }
+
+  &.h30 {
+    height: 30px;
+  }
+  clear: both;
+}
+
+button:focus {outline:0;}
+
+
+.button-group {
+  clear: both;
+  height: 36px;
+}
+
+.ui-button {
+  background-color: $blue-color;
+  border: 0;
+  color: white;
+  font-weight: bold;
+  min-height: 36px;
+  font-size: 14px;
+
+  &.block {
+    width: 100%;
+  }
+}
+
+.panel {
+    position: absolute;
+    right: 0px;
+    min-width: 300px;
+    z-index: 1000;
+    margin-top: 10px;
+    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
+    border: none;
+    background-color: white;
+}
+
+.panel-right {
+  left: 0px;
+}
+
+.panel-body {
+    padding: 15px;
+}
+
+.form-control {
+  display: block;
+  width: 100%;
+  height: 34px;
+  padding: 6px 12px;
+  font-size: 14px;
+  line-height: 1.42857;
+  color: #555555;
+  background-color: #fff;
+  background-image: none;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  box-shadow: 0;
+}
+
+input, button, select, textarea {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+.checkbox {
+    font-size: 14px;
+    font-weight: bold;
+    margin-left: auto;
+    margin-right: auto;
+    margin-bottom: 10px;
+}