dvl-core 0.0.1

data/vendor/assets/stylesheets/dvl/core/includes.scss

@@ -0,0 +1,163 @@
+// #### VARIABLES ####
+
+// Colors
+$bodyBackgroundColor: #aab2bd;
+
+// Grayscale
+$black: #222;
+$darkestGray: #444;
+$blankStateGray: #666;
+$darkerGray: #777;
+$darkGray: #aaa;
+$gray: #ccc;
+$borderGray: #dfdfdf;
+$lightGray: #e5e5e5;
+$lighterGray: #efefef;
+$lightestGray: #f7f7f7;
+$white: #fff;
+
+// Blues
+$logoBlue: #009ade;
+$blueGray: #6a6e75;
+$lighterBlueGray: #6a6e75;
+$selectionBackground: #b3d4fc;
+$linkColor: #2e8ad0;
+$bodyFontColor: $darkestGray;
+
+// Other Colors
+$successColor: #2aa828;
+$errorColor: #c12f2e;
+$alertColor: $errorColor;
+$blueHighlight: #eaf3fa;
+$mintHighlight: #e7f9e7;
+$questionTextColor: #297cbb;
+$purpleBlue: #6188f5;
+
+// Nav
+$navBackground: #434a54;
+$navHoverBackground: #3c434c;
+$navDropdownBackground: $white;
+$navBorderColor: #363b43;
+$navHeight: 60px;
+$navBreakpoint: 800px;
+$navLinkColor: $white;
+$navDropdownHeaderColor: $darkerGray;
+
+// Bottom status bar
+$bottomStatusBarHeight: 60px;
+
+// Sidebar nav
+$sidebarNavHighlightColor: #267aac;
+$sidebarNavBadgeColor: $successColor;
+
+// Corner radius
+
+$radius: 3px;
+
+// Bold font weight
+$bold: 600;
+
+// Typography
+$fontSize: 14;
+
+// #### MIXINS ####
+
+@mixin font-smoothing() {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+@mixin ninety_wrapper() {
+  margin: 0 auto;
+  width: 90%;
+  max-width: 1150px;
+  position: relative;
+}
+
+@mixin icon($unicode_id) {
+  content: $unicode_id;
+  font-family: 'FontAwesome';
+}
+
+@mixin user_pic($size: 25) {
+  width: $size * 1px;
+  border-radius: 50%;
+  border: 1px solid $gray;
+}
+
+@mixin border_top_radius($radius) {
+  border-top-left-radius: $radius;
+  border-top-right-radius: $radius;
+}
+
+@mixin border_right_radius($radius) {
+  border-top-right-radius: $radius;
+  border-bottom-right-radius: $radius;
+}
+
+@mixin border_bottom_radius($radius) {
+  border-bottom-left-radius: $radius;
+  border-bottom-right-radius: $radius;
+}
+
+@mixin border_left_radius($radius) {
+  border-top-left-radius: $radius;
+  border-bottom-left-radius: $radius;
+}
+
+@mixin social_button_color($base_color) {
+  background: $base_color;
+  &:hover {
+    background: darken($base_color, 7%);
+  }
+}
+
+// Animation mixins
+
+$ease_in_quad:      cubic-bezier(0.550,  0.085, 0.680, 0.530);
+$ease_in_cubic:     cubic-bezier(0.550,  0.055, 0.675, 0.190);
+$ease_in_quart:     cubic-bezier(0.895,  0.030, 0.685, 0.220);
+$ease_in_quint:     cubic-bezier(0.755,  0.050, 0.855, 0.060);
+$ease_in_sine:      cubic-bezier(0.470,  0.000, 0.745, 0.715);
+$ease_in_expo:      cubic-bezier(0.950,  0.050, 0.795, 0.035);
+$ease_in_circ:      cubic-bezier(0.600,  0.040, 0.980, 0.335);
+$ease_in_back:      cubic-bezier(0.600, -0.280, 0.735, 0.045);
+
+$ease_out_quad:     cubic-bezier(0.250,  0.460, 0.450, 0.940);
+$ease_out_cubic:    cubic-bezier(0.215,  0.610, 0.355, 1.000);
+$ease_out_quart:    cubic-bezier(0.165,  0.840, 0.440, 1.000);
+$ease_out_quint:    cubic-bezier(0.230,  1.000, 0.320, 1.000);
+$ease_out_sine:     cubic-bezier(0.390,  0.575, 0.565, 1.000);
+$ease_out_expo:     cubic-bezier(0.190,  1.000, 0.220, 1.000);
+$ease_out_circ:     cubic-bezier(0.075,  0.820, 0.165, 1.000);
+$ease_out_back:     cubic-bezier(0.175,  0.885, 0.320, 1.275);
+
+$ease_in_out_quad:  cubic-bezier(0.455,  0.030, 0.515, 0.955);
+$ease_in_out_cubic: cubic-bezier(0.645,  0.045, 0.355, 1.000);
+$ease_in_out_quart: cubic-bezier(0.770,  0.000, 0.175, 1.000);
+$ease_in_out_quint: cubic-bezier(0.860,  0.000, 0.070, 1.000);
+$ease_in_out_sine:  cubic-bezier(0.445,  0.050, 0.550, 0.950);
+$ease_in_out_expo:  cubic-bezier(1.000,  0.000, 0.000, 1.000);
+$ease_in_out_circ:  cubic-bezier(0.785,  0.135, 0.150, 0.860);
+$ease_in_out_back:  cubic-bezier(0.680, -0.550, 0.265, 1.550);
+
+
+@mixin cf() {
+  &:before, &:after {
+    display: table;
+    content: " ";
+  }
+  &:after {
+    clear: both;
+  }
+}
+
+@mixin monospace() {
+  font-family: "Lucida Console", monospace;
+}
+
+@mixin ellipses {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}

data/vendor/assets/stylesheets/dvl/core/labels.scss

@@ -0,0 +1,31 @@
+// Both custom labels, in the repsonse UI, and tags next to items (like "New" or "Existing" fields in imports.)
+
+// #todo separate these into two different patterns
+
+.label {
+  display: inline-block;
+  padding: 0.1rem 0.4rem;
+  border-radius: $radius;
+  font-size: 0.8rem;
+  background-color: $lighterGray;
+  color: #333;
+}
+
+.label_error {
+  background-color: $errorColor;
+  color: #fff;
+}
+
+.label_success {
+  background-color: $successColor;
+  color: #fff;
+}
+
+.label_info {
+  background-color: #1fa3ec;
+  color: #fff;
+}
+
+.label_warning {
+  background-color: #ffd119;
+}

data/vendor/assets/stylesheets/dvl/core/legacy.scss

@@ -0,0 +1,287 @@
+// Deprecated styles in Based.
+
+// Build Helpers
+//
+// I'll be working towards removing all appearance classes
+// like these from the codebase, via three methods:
+//
+// 1. Integrating the styles directly into the components they're applied to.
+//
+// 2. Reworking site-wide defaults so that these tweaks are no longer needed.
+//
+// 3. Converting these into mixins which we can use in the CSS, rather than
+//    bloating the markup.
+//
+// -Josh
+
+  @mixin build_helpers($x: "") {
+
+    /* Alignment */
+    .#{$x}align_left   {
+      float: left !important;
+    }
+
+    .#{$x}align_center {
+      float: none;
+      margin-left: auto;
+      margin-right: auto;
+    }
+
+    .#{$x}align_right {
+      float: right !important;
+    }
+
+    .#{$x}align_none {
+      float: none !important;
+    }
+
+    .#{$x}margin_tn {
+      margin-top: 1rem !important;
+    }
+
+    .#{$x}margin_rn {
+      margin-right: 1rem !important;
+    }
+
+    .#{$x}margin_bn {
+      margin-bottom: 1rem !important;
+    }
+
+    .#{$x}margin_ln {
+      margin-left: 1rem !important;
+    }
+
+    .#{$x}margin_th {
+      margin-top: 0.5rem !important;
+    }
+
+    .#{$x}margin_rh {
+      margin-right: 0.5rem !important;
+    }
+
+    .#{$x}margin_bh {
+      margin-bottom: 0.5rem !important;
+    }
+
+    .#{$x}margin_lh {
+      margin-left: 0.5rem !important;
+    }
+
+    .#{$x}margin_tq {
+      margin-top: 0.25rem !important;
+    }
+
+    .#{$x}margin_rq {
+      margin-right: 0.25rem !important;
+    }
+
+    .#{$x}margin_bq {
+      margin-bottom: 0.25rem !important;
+    }
+
+    .#{$x}margin_lq {
+      margin-left: 0.25rem !important;
+    }
+
+    .#{$x}margin_td {
+      margin-top: 2rem !important;
+    }
+
+    .#{$x}margin_rd {
+      margin-right: 2rem !important;
+    }
+
+    .#{$x}margin_bd {
+      margin-bottom: 2rem !important;
+    }
+
+    .#{$x}margin_ld {
+      margin-left: 2rem !important;
+    }
+
+    .#{$x}margin_none {
+      margin: 0 !important;
+    }
+
+    /* Paddings */
+
+    .#{$x}padding_top {
+      padding-top: 1rem !important;
+    }
+
+    .#{$x}padding_right  {
+      padding-right: 1rem !important;
+    }
+
+    .#{$x}padding_bottom {
+      padding-bottom: 1rem !important;
+    }
+
+    .#{$x}padding_left {
+      padding-left: 1rem !important;
+    }
+
+    .#{$x}padding_none {
+      padding: 0 !important;
+    }
+
+    /* Text alignment */
+    .#{$x}text_left {
+      text-align: left !important;
+    }
+
+    .#{$x}text_center {
+      text-align: center !important;
+    }
+
+    .#{$x}text_right {
+      text-align: right !important;
+    }
+
+    .#{$x}text_justify {
+      text-align: justify !important;
+    }
+
+    /* Font sizing */
+    .#{$x}font_huge,
+    .#{$x}font_xxl,
+    .#{$x}font_xl,
+    .#{$x}font_large,
+    .#{$x}font_medium,
+    .#{$x}font_normal,
+    .#{$x}font_smaller,
+    .#{$x}font_small {
+      color: inherit;
+      font-weight: inherit;
+    }
+
+    .#{$x}font_huge,
+    .#{$x}font_xxl {
+      line-height: 1.333 !important;
+    }
+
+    .#{$x}font_huge   {
+      font-size: 4.209rem !important;
+    }
+
+    .#{$x}font_xxl  {
+      font-size: 3.157rem !important;
+    }
+
+    .#{$x}font_xl   {
+      font-size: 2.369rem !important;
+    }
+
+    .#{$x}font_large  {
+      font-size: 1.777rem !important;
+    }
+
+    .#{$x}font_medium {
+      font-size: 1.333rem !important;
+    }
+
+    .#{$x}font_normal {
+      font-size: 1rem !important;
+    }
+
+    .#{$x}font_smaller {
+      font-size: 0.9rem !important;
+    }
+
+    .#{$x}font_small {
+      font-size: 0.8rem !important;
+    }
+
+    /* Font styles */
+    .#{$x}font_thin {
+      font-weight: 300;
+    }
+
+    .#{$x}weight_normal {
+      font-weight: normal;
+    }
+
+    .#{$x}font_muted {
+      color: $darkerGray;
+    }
+
+    @if $x == "" {
+        .desk_show, .lap_show, .desk_show_i, .lap_show_i, .desk_show_ib, .lap_show_ib {
+          display: none !important;
+        }
+      } @else {
+      .#{$x}hide {
+        display: none !important;
+      }
+
+      .#{$x}show {
+        display: block !important;
+      }
+
+      .#{$x}show_i {
+        display: inline !important;
+      }
+
+      .#{$x}show_ib {
+        display: inline-block !important;
+      }
+
+      th.#{$x}show, td.#{$x}show {
+        display: table-cell !important;
+      }
+    }
+  }
+
+  @include build_helpers();
+
+  @media only screen and (min-width: 640px) {
+    @include build_helpers(lap_);
+  }
+
+  @media only screen and (min-width: 960px) {
+    @include build_helpers(desk_);
+  }
+
+  .none {
+    color: $darkGray;
+  }
+  .yes {
+    color: $successColor;
+  }
+  .no {
+    color: $errorColor;
+  }
+
+  // Hide from screen readers and browsers
+  .hidden {
+    display: none;
+    visibility: hidden;
+  }
+
+  // Visually hidden, available for screen readers - http://cbrac.co/TUcUgH
+  .visuallyhidden {
+    position: absolute;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    margin: -1px;
+    padding: 0;
+    width: 1px;
+    height: 1px;
+    border: 0;
+    // Add keyboard navigation - http://cbrac.co/RR8gO6
+    &.focusable {
+      &:active,
+      &:focus {
+        position: static;
+        overflow: visible;
+        clip: auto;
+        margin: 0;
+        width: auto;
+        height: auto;
+      }
+    }
+  }
+
+  .cf {
+    @include cf();
+  }