dvl-core 0.0.1

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

@@ -0,0 +1,21 @@
+@import "core/includes";
+@import "core/resets";
+@import "core/links";
+@import "core/typography";
+@import "core/labels";
+@import "core/lists";
+@import "core/pagination";
+@import "core/code";
+@import "core/media";
+@import "core/forms";
+@import "core/tables";
+@import "core/sidebar";
+@import "core/dropdowns";
+@import "core/modals";
+@import "core/progress";
+@import "core/grid";
+@import "core/buttons";
+@import "core/tooltips";
+@import "core/legacy";
+@import "core/shame";
+@import "core/print";

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

@@ -0,0 +1,152 @@
+// Buttons
+
+@mixin dark_button_color($base_color, $font_color: #fff) {
+  background: $base_color;
+  color: $font_color;
+  border: 1px solid darken($base_color, 5%);
+  &:hover {
+    background: darken($base_color, 5%);
+    color: $font_color;
+  }
+}
+
+@mixin light_button_color($base_color, $font_color: #333) {
+  background: $base_color;
+  font-weight: 600;
+  border: 1px solid darken($base_color, 5%);
+  color: $font_color;
+  &:hover {
+    background: darken($base_color, 3%);
+    color: $font_color;
+  }
+}
+
+// Default
+.button {
+  display: inline-block;
+  margin: 0;
+  padding: 0.5rem 1rem;
+  border: 0;
+  background: $lightGray;
+  color: $darkestGray;
+  text-align: center;
+  text-decoration: none;
+  font-size: 1rem;
+  cursor: pointer;
+  border-radius: $radius;
+  white-space: nowrap;
+  &.uppercase {
+    border: 0 !important;
+    border-radius: 0;
+    text-transform: uppercase;
+    font-size: 0.85rem;
+  }
+  &.arrow_l:before {
+    content: "\f0d9";
+    font-family: 'FontAwesome';
+    margin-right: 1rem;
+  }
+  &.arrow:after {
+    content: "\f0da";
+    font-family: 'FontAwesome';
+    margin-left: 1rem;
+  }
+  &.long_arrow:after {
+    content: "\f178";
+    font-family: 'FontAwesome';
+    margin-left: 1rem;
+  }
+  &.loading {
+    opacity: 0.65;
+    cursor: default !important;
+    i {
+      margin-left: 0.5rem;
+    }
+    &.arrow:after {
+      display: none;
+    }
+  }
+  // #todo find an example of button.primary
+  &.primary {
+    @include dark_button_color(#e75845);
+  }
+  &.success {
+    @include dark_button_color($successColor);
+  }
+  &.error {
+    @include dark_button_color($errorColor);
+  }
+  &.info {
+    @include dark_button_color(#1fa3ec);
+  }
+  &.white {
+    @include light_button_color(#fff);
+  }
+  &.darker_gray {
+    @include light_button_color(#ccc);
+  }
+  &.light_gray {
+    @include light_button_color(#eeeff0, $blueGray);
+  }
+  &.gray {
+    @include light_button_color($lighterGray);
+  }
+  &:hover {
+    background: $gray;
+    text-decoration: none;
+  }
+  &:active {
+    box-shadow: inset 0 2px 3px hsla(0, 0%, 0%, 0.2);
+  }
+  &:focus {
+    outline: thin dotted $darkestGray;
+    outline: 5px auto -webkit-focus-ring-color;
+    outline-offset: -2px;
+  }
+  // Sizes
+  // #todo refactor and catalog these sizes
+  &.mini {
+    padding: 0.238rem 0.563rem;
+    font-size: 0.8125rem;
+  }
+  &.small {
+    padding: 0.317rem 0.75rem;
+    font-size: 0.875rem;
+  }
+  &.large,
+  &.block {
+    padding: 1rem 1.333rem;
+    font-size: 1.125rem;
+    line-height: 1.333;
+  }
+  &.block {
+    display: block;
+  }
+  // States
+  &[disabled],
+  &.disabled,
+  &.disabled:active {
+    box-shadow: none !important;
+    text-shadow: none !important;
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
+    opacity: 0.65;
+    cursor: default !important;
+  }
+}
+
+// Link-styled buttons
+
+.button_link {
+  font-size: inherit;
+  background: none;
+  padding: 0;
+  line-height: inherit;
+  border: 0;
+  color: $linkColor;
+  &:focus {
+    outline: 0;
+  }
+  &:hover {
+    text-decoration: underline;
+  }
+}

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

@@ -0,0 +1,31 @@
+// Code
+
+// Correct `font-family` set oddly in Safari 5 and Chrome
+
+code, pre {
+  color: $darkestGray;
+  @include monospace;
+}
+
+code {
+  padding: 0 0.5rem;
+  border: 1px solid $lightGray;
+  border-radius: $radius;
+  background: $lightestGray;
+  white-space: nowrap;
+  // Increase `padding` at larger viewport widths
+  @media only screen and (min-width: 480px) {
+    padding: 0.25rem 0.5rem;
+  }
+}
+
+pre {
+  position: relative;
+  overflow: auto;
+  padding: 1rem;
+  background: $black;
+  color: $gray;
+  white-space: pre;
+  word-wrap: normal;
+  word-break: normal;
+}

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

@@ -0,0 +1,309 @@
+.dropdown {
+  position: relative;
+}
+span.dropdown {
+  display: inline-block;
+}
+.dropdown-toggle:focus {
+  outline: 0;
+}
+
+// The dropdown menu (ul)
+.dropdown_menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 1000;
+  display: none;
+  float: left;
+  min-width: 160px;
+  margin-top: 3px;
+  background-color: #fff;
+  box-shadow: 0 1px 0 rgba(#000,0.14);
+  border: 1px solid #dadada;
+  border-radius: $radius;
+  background-clip: padding-box;
+  // Right-aligns menu
+  &.dropdown_right {
+    right: 0;
+    left: auto;
+  }
+  h3 {
+    margin: 0;
+    background: #efefef;
+    text-align: center;
+    min-height: 2.5rem;
+    line-height: 1.25rem;
+    padding: 0.625rem 0.5rem;
+    @include border_top_radius($radius - 1);
+    color: #444;
+    font-size: 0.9rem;
+    text-transform: uppercase;
+    letter-spacing: 0.03rem;
+  }
+}
+
+// Links
+.dropdown_body {
+  max-height: 350px;
+  overflow: scroll;
+  > li {
+    > a,
+    > span {
+      display: block;
+      height: 2.5rem;
+      font-size: 0.9rem;
+      line-height: 2.5rem;
+      padding: 0 0.5rem;
+      clear: both;
+    }
+    a {
+      color: #333;
+      &:hover,
+      &:focus {
+        text-decoration: none;
+        color: #fff;
+        background-color: #428bca;
+      }
+    }
+  }
+  // Active state
+  > .active {
+    > a,
+    > a:hover,
+    > a:focus {
+      color: #fff;
+      text-decoration: none;
+      outline: 0;
+      background-color: #428bca;
+    }
+  }
+  // Disabled state
+  > .disabled {
+    > a,
+    > a:hover,
+    > a:focus {
+      color: #ccc;
+    }
+    // Override hover/focus effects
+    > a:hover,
+    > a:focus {
+      text-decoration: none;
+      background-color: transparent;
+      background-image: none;
+      cursor: not-allowed;
+    }
+  }
+}
+
+.dropdown_menu_form li {
+  label {
+    font-weight: normal;
+    padding: 0.25rem 0.5rem;
+    display: block;
+  }
+}
+
+.dropdown_header {
+  padding: 0.5rem;
+  color: $darkGray;
+  font-size: 0.85rem;
+  text-transform: uppercase;
+  font-weight: 600;
+}
+
+// Open state for the dropdown
+.open {
+  // Show the menu
+  > .dropdown_menu {
+    display: block;
+  }
+  // Remove the outline when :focus is triggered
+  > a {
+    outline: 0;
+  }
+}
+
+// Backdrop to catch body clicks on mobile, etc.
+.dropdown_backdrop {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  z-index: 990;
+}
+
+li.dropdown_more a {
+  font-size: 0.8rem;
+  color: #888;
+}
+
+// Enhanced dropdowns:
+// Multiple lines of text, images, etc.
+
+.dropdown_toggle_button {
+  position: relative;
+  padding: 0.25rem 2rem 0.25rem 1rem;
+  background-color: #fff;
+  color: $darkestGray;
+  border: 1px solid $gray;
+  font-weight: 600;
+  font-size: 0.875rem;
+  display: inline-block;
+  margin: 0;
+  text-decoration: none;
+  cursor: pointer;
+  border-radius: $radius - 1;
+  &.disabled {
+    opacity: 0.7;
+    cursor: default;
+  }
+  &:hover {
+    text-decoration: none;
+    background-color: $lightestGray;
+  }
+  &:after {
+    font-family: 'FontAwesome';
+    content: '\f0d7';
+    position: absolute;
+    top: 0;
+    line-height: 1.875rem;
+    right: 0.75rem;
+    color: $darkerGray;
+    pointer-events: none;
+  }
+  &.gray {
+    background-color: $lighterGray;
+    color: $darkestGray;
+    &:hover {
+      background-color: $lightGray;
+      &.disabled {
+        background-color: $lighterGray;
+      }
+    }
+  }
+  .open & {
+    box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
+    background-color: #e2e2e2;
+    &.gray {
+      background-color: $lightGray;
+    }
+  }
+}
+
+// ## Dropdown list styles
+
+
+// Single line
+
+.drop_sng {
+  @include ellipses;
+}
+
+// Master / detail:
+// Square item (checkbox, color legend, image) on left,
+// description on right
+
+.drop_master,
+.drop_master_multiline,
+.drop_detail,
+.drop_detail_multiline {
+  float: left;
+}
+
+.drop_master,
+.drop_master_multiline {
+  width: 1.5rem;
+  margin-right: 0.5rem;
+  img,
+  span {
+    border-radius: 50%;
+  }
+  i {
+    font-size: 1.25rem;
+    line-height: 2.5rem;
+    color: #888;
+    width: 100%;
+    text-align: center;
+    vertical-align: middle;
+    .active &,
+    a:hover & {
+      color: #fff;
+    }
+  }
+}
+
+.drop_detail,
+.drop_detail_multiline {
+  width: 80%;
+}
+
+.drop_detail {
+  @include ellipses;
+  label {
+    font-weight: normal;
+  }
+}
+
+.drop_master_multiline {
+  line-height: 1;
+  i {
+    line-height: 1;
+  }
+}
+
+.drop_detail_multiline {
+  line-height: 1.25rem;
+}
+
+.drop_master_color {
+  display: inline-block;
+  width: 1.5rem;
+  height: 1.5rem;
+  margin-top: 0.5rem;
+  float: left;
+}
+
+
+// Dropdown item with arrow at right
+
+.drop_rt_item,
+.drop_rt_arrow {
+  float: left;
+}
+.drop_rt_item {
+  width: 87%;
+  margin-right: 3%;
+  float: left;
+  @include ellipses;
+}
+.drop_rt_arrow {
+  width: 10%;
+  text-align: center;
+}
+
+// Nav dropdowns
+
+.dropdown_nav {
+  li a,
+  .drop_sng {
+    padding: 0 1.5rem;
+    line-height: 3rem;
+    height: 3rem;
+    @include cf;
+  }
+  .all {
+    .drop_rt_item,
+    .drop_rt_arrow {
+      width: auto;
+      float: none;
+    }
+    .drop_rt_item {
+      max-width: 87%;
+    }
+    .drop_rt_arrow {
+      max-width: 10%;
+    }
+  }
+}