dvl-core 0.0.1

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

@@ -0,0 +1,434 @@
+/* ================================================================== *
+   Forms ($forms)
+\* ================================================================== */
+form {
+  margin: 0;
+}
+/**
+ * 1. Address `margin` set differently in Firefox 4+, Safari 5, & Chrome
+ * 2. Correct `font-size` not being inherited in all browsers
+ * 3. Correct `font-family` not being inherited in all browsers
+ */
+button,
+input,
+select,
+textarea {
+  margin: 0; /* 1 */
+  font-size: 1rem; /* 2 */
+  font-family: inherit; /* 3 */
+}
+/**
+ * Address Firefox 4+ setting `line-height` on <input> using
+ * `!important` in the UA stylesheet
+ */
+button,
+input {
+  line-height: normal;
+}
+/**
+ * Fix inconsistent `text-transform` for <button> and <select>
+ * All other form control elements do not inherit `text-transform`
+ */
+button,
+select {
+  text-transform: none;
+}
+/**
+ * 2. Improve usability and consistency of cursor style between
+ *    image-type <input> and others
+ * 3. Correct inability to style clickable <input> types in iOS
+ */
+button,
+input[type="reset"],
+input[type="submit"] {
+  cursor: pointer; /* 2 */
+  -webkit-appearance: button; /* 3 */
+}
+/* Reset default `cursor` for disabled elements */
+button[disabled],
+html input[disabled] {
+  cursor: default;
+}
+/* Remove default <fieldset> styles for all browsers */
+fieldset {
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+/* Make most inputs, select boxes, and textareas as `block` elements */
+input,
+select,
+textarea {
+  display: block;
+  width: 100%;
+  vertical-align: middle;
+  border: 1px solid #ddd;
+  font-size: 0.9rem;
+  padding: 0.3rem;
+  border-radius: $radius;
+  &.error {
+    border-color: $errorColor;
+  }
+  &[readonly] {
+    border-color: #ccc;
+    background-color: $lightestGray;
+  }
+}
+
+.error {
+  input,
+  select,
+  textarea {
+    border-color: $errorColor;
+  }
+}
+
+/* Make checkbox, image, and radio inputs `inline-block` by default */
+input[type="checkbox"],
+input[type="image"],
+input[type="radio"],
+input[type="file"] {
+  display: inline-block;
+  width: auto;
+  cursor: pointer;
+  border: 0;
+}
+/**
+ * 1. Address `box-sizing` set to `content-box` in IE 8/9
+ * 2. Remove excess padding in IE 8/9
+ */
+input[type="checkbox"],
+input[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  margin: 0 0.422rem 0.238rem 0;
+  padding: 0; /* 2 */
+}
+/**
+ * 1. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
+ *    (include `-moz` to future-proof)
+ * 2. Address `appearance` set to `searchfield` in Safari 5 and Chrome
+ */
+input[type="search"] {
+  -webkit-box-sizing: content-box; /* 1 */
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+  -webkit-appearance: textfield; /* 2 */
+}
+/* Remove decoration & cancel button in Safari 5 and Chrome on OS X */
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+/**
+ * Make button, reset, and submit inputs to be `inline-block`, unless
+ * otherwise specified by `.button` classes
+ */
+input[type="button"],
+input[type="reset"],
+input[type="submit"] {
+  display: inline-block;
+  width: auto;
+}
+/* Remove inner padding and border in Firefox 4+ */
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  padding: 0;
+  border: 0;
+}
+/* Give labels a pointer cursor by default */
+label {
+  cursor: pointer;
+  font-weight: 600;
+  font-size: 0.9rem;
+  &.checkbox,
+  &.radio {
+    display: block;
+    font-weight: normal;
+    font-size: 1rem;
+  }
+}
+
+/**
+ * 1. Remove default vertical scrollbar in IE 8/9
+ * 2. Improve readability and alignment in all browsers
+ * 3. Restrict <textarea> elements to vertical resizing only
+ */
+textarea {
+  overflow: auto; /* 1 */
+  vertical-align: top; /* 2 */
+  resize: vertical; /* 3 */
+}
+
+label.required > abbr {
+  color: $errorColor;
+  font-size: 0.8rem;
+}
+
+select.datetime {
+  width: auto;
+  display: inline;
+}
+
+input[type="checkbox"] {
+  -webkit-appearance: none !important;
+  -moz-appearance: none !important;
+  appearance: none !important;
+  border: 1px solid $gray;
+  border-radius: $radius;
+  background-color: #fff;
+  padding: 7px;
+  display: inline-block;
+  position: relative;
+  cursor: pointer;
+  &:active,
+  &:checked:active {
+    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
+  }
+  &:checked:after {
+    font-family: 'FontAwesome';
+    content: '\f00c';
+    font-size: 12px;
+    position: absolute;
+    top: 1px;
+    left: 1px;
+    color: $linkColor;
+  }
+  &.readonly,
+  &.disabled {
+    opacity: 0.5;
+  }
+}
+
+input[type="radio"] {
+  -webkit-appearance: none !important;
+  -moz-appearance: none !important;
+  appearance: none !important;
+  background-color: #fff;
+  border: 1px solid $gray;
+  border-radius: 50%;
+  padding: 7px;
+  display: inline-block;
+  position: relative;
+  cursor: pointer;
+  &:active,
+  &:checked:active {
+    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
+  }
+  &.readonly,
+  &.disabled {
+    opacity: 0.5;
+  }
+  &:checked:after {
+    content: '';
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    position: absolute;
+    top: 4px;
+    left: 4px;
+    background-color: $linkColor;
+  }
+}
+
+/* Webkit outline fix */
+input[type="checkbox"]:focus,
+input[type="radio"]:focus {
+  outline: 0;
+}
+
+.help-block {
+  font-size: 0.85rem;
+  margin: 0.25rem 0 0 0;
+}
+
+.datetime_input_clear_wrapper {
+  clear: both;
+}
+
+.datetime_input_clear {
+  font-size: 0.85rem;
+}
+
+form {
+  .grid {
+    margin-bottom: 1rem;
+  }
+  .horizontal_label_item {
+    margin-top: 0.15rem;
+  }
+}
+
+.form_actions {
+  background-color: $lighterGray;
+  padding: 1rem;
+  margin-top: 2rem;
+}
+
+input[type="text"].large {
+  font-size: 1.5rem;
+}
+
+@media only screen and (min-width: 640px) {
+  form .horizontal_label_item {
+    text-align: right;
+    padding-right: 1.5rem;
+  }
+
+  .form_actions.horizontal {
+    padding-left: 24.99999%;
+  }
+}
+
+.input_group {
+  position: relative;
+  display: table;
+  border-collapse: separate;
+  > .button {
+    width: 1%;
+    display: table-cell;
+  }
+  > input {
+    display: table-cell;
+    width: 100%;
+  }
+  &:first-child {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  &:last-child {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+}
+
+form {
+  /* Validation */
+  .error_message {
+    font-size: 0.85rem;
+    background-color: $errorColor;
+    color: #fff;
+    padding: 2px 5px;
+    border-radius: $radius;
+    margin: 4px 0 0 0;
+    display: inline-block !important;
+  }
+  /* Autosubmitter */
+  .item {
+    position: relative;
+  }
+}
+
+.select_wrapper {
+  max-width: 100%;
+  height: 28px;
+  background-color: #fff;
+  border: 1px solid $gray;
+  border-radius: $radius;
+  position: relative;
+  vertical-align: middle;
+  &:after {
+    font-family: 'FontAwesome';
+    content: '\f0d7';
+    position: absolute;
+    top: 3px;
+    right: 10px;
+    color: $darkerGray;
+    pointer-events: none;
+  }
+  select {
+    background: transparent;
+    width: 100%;
+    padding: 2px 28px 0px 14px;
+    margin: 0;
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 18px;
+    border: 1px solid transparent;
+    border-radius: 0;
+    height: 26px;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    text-indent: 0.01px;
+    text-overflow: '';
+  }
+}
+
+.datetime_input_wrapper .input_group {
+  width: 120px;
+  float: left;
+  margin-right: 10px;
+}
+
+.input_text {
+  margin-top: 0.25rem;
+}
+
+// Radio button groups
+.radio_group_inner {
+  input {
+    display: none;
+    opacity: 0;
+    &:checked + label {
+      background: $linkColor;
+      color: $white;
+    }
+  }
+  label {
+    float: left;
+    width: 25%;
+    height: 100%;
+    text-align: center;
+    border: 1px solid $gray;
+    border-right-width: 0;
+    padding: 0.5rem 0;
+    &:first-of-type {
+      @include border_left_radius($radius);
+    }
+    &:last-of-type {
+      border-right-width: 1px;
+      @include border_right_radius($radius);
+    }
+  }
+}
+
+.radio_group_img {
+  height: 1.5rem;
+  display: block;
+  i {
+    font-size: 1.5rem;
+    line-height: 1;
+    text-align: center;
+  }
+}
+
+// Sub-option, conditionally visible
+// Must set the left property each time this is used
+
+.form_option_sub {
+  background-color: $lightGray;
+  padding: 0.5rem 1rem;
+  @include cf();
+  position: relative;
+  border-radius: $radius;
+  &:before {
+    content: "";
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 0 8px 8px;
+    border-color: transparent transparent $lightGray transparent;
+    position: absolute;
+    top: -8px;
+    margin-left: -3px;
+  }
+  label, input {
+    float: left;
+  }
+  label {
+    line-height: 2rem;
+    margin-right: 1rem;
+  }
+  @media screen and (min-width: 640px) {
+      margin-left: 8.3333% * 3;
+  }
+}

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

@@ -0,0 +1,87 @@
+/* ================================================================== *\
+   Grids ($grids)
+\* ================================================================== */
+
+/**
+ * Grid container
+ * 1. Default gutter width, change if desired
+ * 2. Remove `list-style` in case `.grid` is on a <ul> element
+ * 3. Hack to remove `inline-block` whitespace - http://cbrac.co/16xcjcl
+ */
+
+.grid {
+  margin: 0;
+  margin-left: -2rem; /* 1 */
+  padding: 0;
+  list-style: none; /* 2 */
+  font-size: 0; /* 3 */
+}
+
+.grid.gutter_none {
+  margin-left: 0;
+  > .item {
+    padding-left: 0;
+  }
+}
+
+.grid.gutter_quarter {
+  margin-left: -0.5rem;
+  > .item {
+    padding-left: 0.5rem;
+  }
+}
+
+.grid.gutter_half {
+  margin-left: -1rem;
+  > .item {
+    padding-left: 1rem;
+  }
+}
+
+.grid.gutter_double {
+  margin-left: -4rem;
+  > .item {
+    padding-left: 4rem;
+  }
+}
+
+/**
+ * Grid item
+ * 1. Default gutter width, change if desired
+ * 2. Ensures elements within `.item` start at the top
+ * 3. Reset `font-size` back to normal
+ */
+
+.item {
+  display: inline-block;
+  padding-left: 2rem;  /* 1 */
+  vertical-align: top; /* 2 */
+  font-size: 1rem;   /* 3 */
+  width: 100%;
+}
+
+/* Widths */
+@mixin build_grid($x: "") {
+  .#{$x}one_column {width: 8.333% };
+  .#{$x}two_columns {width: (8.333% * 2)};
+  .#{$x}three_columns {width: (8.333% * 3)};
+  .#{$x}four_columns {width: (8.333% * 4)};
+  .#{$x}five_columns {width: (8.333% * 5)};
+  .#{$x}six_columns {width: (8.333% * 6)};
+  .#{$x}seven_columns {width: (8.333% * 7)};
+  .#{$x}eight_columns {width: (8.333% * 8)};
+  .#{$x}nine_columns {width: (8.333% * 9)};
+  .#{$x}ten_columns {width: (8.333% * 10)};
+  .#{$x}eleven_columns {width: (8.333% * 11)};
+  .#{$x}twelve_columns {width: (8.333% * 12)};
+}
+
+@include build_grid();
+
+@media only screen and (min-width: 640px) {
+  @include build_grid("lap_");
+}
+
+@media only screen and (min-width: 960px) {
+  @include build_grid("desk_");
+}