@rio-cloud/rio-uikit 0.15.1 → 0.16.0-beta-1

package/lib/style/css/design/form-inputs.less

@@ -0,0 +1,655 @@
+@input-bg: @color-white;
+@input-bg-disabled: rgba(229, 235, 240, 0.4); //40% @gray-lighter;
+@input-color: @gray-darker;
+@input-border: @gray;
+@input-border-focus: @brand-primary;
+@input-color-placeholder: @gray;
+@input-height-base: (@grid-gutter-height + (@padding-default-vertical * 2) + 2);
+@input-height-lg: (floor(@font-size-lg * @line-height-lg) + (@padding-lg-vertical * 2) + 2);
+@input-height-sm: (floor(@font-size-sm * @line-height-sm) + (@padding-sm-vertical * 2) + 2);
+@legend-color: @gray-dark;
+@legend-border-color: #e5e5e5;
+
+fieldset {
+  padding: 0;
+  margin: 0;
+  border: 0;
+  min-width: 0;
+}
+
+legend {
+  display: block;
+  width: 100%;
+  padding: 0;
+  margin-bottom: @grid-gutter-height;
+  font-size: (@font-size-default * 1.5);
+  line-height: inherit;
+  color: @legend-color;
+  border: 0;
+  border-bottom: 1px solid @legend-border-color;
+}
+
+label {
+  display: inline-block;
+  max-width: 100%; // Force IE8 to wrap long content (see https://github.com/twbs/bootstrap/issues/13141)
+  margin-bottom: 5px;
+  font-weight: bold;
+}
+
+// Position radios and checkboxes better
+input {
+  &[type="radio"],
+  &[type="checkbox"] {
+    line-height: normal;
+    margin: 4px 0 0;
+  }
+
+  &[type="file"] {
+    display: block;
+  }
+
+  &[type="range"] {
+    display: block;
+    width: 100%;
+  }
+
+  &[type="search"] {
+    -webkit-appearance: none;
+  }
+
+  // Focus
+  &[type="file"],
+  &[type="radio"],
+  &[type="checkbox"] {
+    &:focus {
+      .tab-focus();
+    }
+  }
+
+  @media screen and (-webkit-min-device-pixel-ratio: 0) {
+    &[type="date"],
+    &[type="time"],
+    &[type="datetime-local"],
+    &[type="month"] {
+      &.form-control {
+        line-height: @input-height-base;
+      }
+
+      &.input-sm,
+      .input-group-sm & {
+        line-height: @input-height-sm;
+      }
+
+      &.input-lg,
+      .input-group-lg & {
+        line-height: @input-height-lg;
+      }
+    }
+  }
+}
+
+select {
+  &[multiple],
+  &[size] {
+    height: auto;
+  }
+}
+
+// Adjust output element
+// output {
+//   display: block;
+//   padding-top: (@padding-default-vertical + 1);
+//   font-size: @font-size-default;
+//   line-height: @line-height-default;
+//   color: @input-color;
+// }
+
+.form-control {
+  display: block;
+  width: 100%;
+  height: @input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
+  padding: @padding-default-vertical @padding-default-horizontal;
+  font-size: @font-size-default;
+  line-height: @line-height-default;
+  color: @input-color;
+  background-color: @input-bg;
+  background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
+  border: 1px solid @input-border;
+  border-radius: @border-radius-default; // Note: This has no effect on <select>s in some browsers, due to the limited stylability of <select>s in CSS.
+  box-shadow:inset 0 1px 1px rgba(0,0,0,.075);
+  transition:border-color ease-in-out .15s~","box-shadow ease-in-out .15s;
+
+  .form-control-focus();
+  .placeholder();
+
+  // Disabled and read-only inputs
+  &[disabled],
+  &[readonly],
+  fieldset[disabled] & {
+    background-color: @input-bg-disabled;
+    opacity: 1; // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655
+  }
+
+  &[disabled],
+  fieldset[disabled] & {
+    cursor: not-allowed;
+  }
+
+  // Reset height for `textarea`s
+  textarea& {
+    height: auto;
+  }
+}
+
+.form-group {
+  margin-bottom: 15px;
+}
+
+.radio,
+.checkbox {
+  position: relative;
+  display: block;
+  margin-top: 10px;
+  margin-bottom: 10px;
+
+  label {
+    min-height: @grid-gutter-height; // Ensure the input doesn't jump when there is no text
+    padding-left: 20px;
+    margin-bottom: 0;
+    font-weight: normal;
+    cursor: pointer;
+  }
+}
+
+.radio input[type="radio"],
+.radio-inline input[type="radio"],
+.checkbox input[type="checkbox"],
+.checkbox-inline input[type="checkbox"] {
+  position: absolute;
+  margin-left: -20px;
+  margin-top: 4px \9;
+}
+
+ // Move up sibling radios or checkboxes for tighter spacing
+.radio + .radio,
+.checkbox + .checkbox {
+  margin-top: -5px;
+}
+
+// Radios and checkboxes on same line
+.radio-inline,
+.checkbox-inline {
+  position: relative;
+  display: inline-block;
+  padding-left: 20px;
+  margin-bottom: 0;
+  vertical-align: middle;
+  font-weight: normal;
+  cursor: pointer;
+}
+
+// Space out consecutive inline controls
+.radio-inline + .radio-inline,
+.checkbox-inline + .checkbox-inline {
+  margin-top: 0;
+  margin-left: 10px;
+}
+
+// Disabled and read-only inputs
+input[type="radio"],
+input[type="checkbox"] {
+  &[disabled],
+  &.disabled,
+  fieldset[disabled] & {
+    cursor: not-allowed;
+  }
+}
+
+// These classes are used directly on <label>s
+.radio-inline,
+.checkbox-inline {
+  &.disabled,
+  fieldset[disabled] & {
+    cursor: not-allowed;
+  }
+}
+
+// These classes are used on elements with <label> descendants
+.radio,
+.checkbox {
+  &.disabled,
+  fieldset[disabled] & {
+    label {
+      cursor: not-allowed;
+    }
+  }
+}
+
+// Form control sizing
+.input-sm {
+  .input-size(@input-height-sm; @padding-sm-vertical; @padding-sm-horizontal; @font-size-sm; @line-height-sm; @border-radius-sm);
+}
+
+.form-group-sm {
+  .form-control {
+    height: @input-height-sm;
+    padding: @padding-sm-vertical @padding-sm-horizontal;
+    font-size: @font-size-sm;
+    line-height: @line-height-sm;
+    border-radius: @border-radius-sm;
+  }
+  select.form-control {
+    height: @input-height-sm;
+    line-height: @input-height-sm;
+  }
+  textarea.form-control,
+  select[multiple].form-control {
+    height: auto;
+  }
+  .form-control-static {
+    height: @input-height-sm;
+    min-height: (@grid-gutter-height + @font-size-sm);
+    padding: (@padding-sm-vertical + 1) @padding-sm-horizontal;
+    font-size: @font-size-sm;
+    line-height: @line-height-sm;
+  }
+}
+
+.input-lg {
+  .input-size(@input-height-lg; @padding-lg-vertical; @padding-lg-horizontal; @font-size-lg; @line-height-lg; @border-radius-lg);
+}
+
+.form-group-lg {
+  .form-control {
+    height: @input-height-lg;
+    padding: @padding-lg-vertical @padding-lg-horizontal;
+    font-size: @font-size-lg;
+    line-height: @line-height-lg;
+    border-radius: @border-radius-lg;
+  }
+  select.form-control {
+    height: @input-height-lg;
+    line-height: @input-height-lg;
+  }
+  textarea.form-control,
+  select[multiple].form-control {
+    height: auto;
+  }
+  .form-control-static {
+    height: @input-height-lg;
+    min-height: (@grid-gutter-height + @font-size-lg);
+    padding: (@padding-lg-vertical + 1) @padding-lg-horizontal;
+    font-size: @font-size-lg;
+    line-height: @line-height-lg;
+  }
+}
+
+// Help block
+.help-block {
+  display: block; // account for any element using help-block
+  margin-top: 5px;
+  margin-bottom: 10px;
+  color: lighten(@text-color, 25%); // lighten the text some for contrast
+}
+
+.default-label(@label-font-size) {
+  font-size: @label-font-size;
+  font-weight: normal;
+  color: @gray-dark;
+}
+
+// define default styling for labels
+label {
+  .default-label(@font-size-12);
+}
+
+// treat radios and checkboxed differently when using a label tag
+label.checkbox,
+label.radio,
+label .radio-text,
+label .checkbox-text {
+  color: inherit;
+  font-size: @font-size-default;
+}
+
+.form-group {
+  &:first-child:last-child {
+    margin-bottom: 0;
+  }
+
+  label:not(.checkbox),
+  label:not(.radio) {
+    .default-label(@font-size-12);
+  }
+
+  label {
+    .radio-text,
+    .checkbox-text {
+      color: @gray-darkest;
+      font-size: @font-size-14;
+    }
+  }
+
+  &.form-group-lg {
+    label:not(.checkbox),
+    label:not(.radio) {
+      .default-label(@font-size-14);
+    }
+
+    label {
+      .radio-text,
+      .checkbox-text {
+        color: @gray-darkest;
+        font-size: @font-size-16;
+      }
+    }
+  }
+
+  &.form-group-sm {
+    label:not(.checkbox),
+    label:not(.radio) {
+      .default-label(@font-size-10);
+    }
+
+    label {
+      .radio-text,
+      .checkbox-text {
+        color: @gray-darkest;
+        font-size: @font-size-12;
+      }
+    }
+  }
+
+  // Different feedback coloring
+  each(@colors-forms-map, {
+    &.has-@{key} {
+      .form-control {
+        border-color: @value;
+      }
+    }
+  })
+
+  .form-control-feedback {
+    border-radius: @border-radius-round;
+    display: block;
+    pointer-events: none;
+    position: absolute;
+    right:3px;
+    text-align: center;
+    top: 3px;
+    width: @input-height-base - 3;
+  }
+
+  // feedback
+  &.has-feedback {
+    position: relative;
+
+    // Reposition feedback icon if input has visible label above
+    label {
+      & ~ .form-control-feedback {
+        top: 27px;
+      }
+
+      &.sr-only ~ .form-control-feedback {
+        top: 0;
+      }
+    }
+
+    .form-control {
+      padding-right: @input-height-base;
+    }
+
+    .form-control-feedback-wrapper {
+      position: relative;
+
+      .help-block {
+        top: 100%;
+      }
+    }
+
+    .form-control-feedback {
+      font-size: 16px;
+      line-height: @input-height-base - 6;
+    }
+
+    // small
+    &.form-group-sm .form-control,
+    .input-sm {
+      padding-right: @input-height-sm;
+    }
+
+    &.form-group-sm .form-control-feedback,
+    .input-sm + .form-control-feedback {
+      font-size: 16px;
+      line-height: @input-height-sm - 6;
+    }
+
+    // large
+    &.form-group-lg .form-control,
+    .input-lg {
+      padding-right: @input-height-lg;
+    }
+
+    &.form-group-lg .form-control-feedback,
+    .input-lg + .form-control-feedback {
+      font-size: 22px;
+      line-height: @input-height-lg - 6;
+    }
+
+    .help-block {
+      border-radius: @border-radius-sm;
+      font-size: @font-size-sm;
+      margin: 1px 0 0 0;
+      padding: 2px 5px;
+      position: absolute;
+      right: 0;
+      transition: color 0.2s ease ~"," background 0.2s ease;
+      z-index: 3;
+    }
+
+    // Different feedback coloring
+    each(@colors-forms-map, {
+      &.has-@{key} {
+        .help-block {
+          background: @value;
+          color: @color-white;
+        }
+
+        .form-control {
+          &:focus, &.focus {
+            ~ .help-block {
+              background: @gray-lightest;
+              color: @value;
+            }
+          }
+        }
+
+        .input-group-addon:not(.input-group-addon-label) {
+          color: @value;
+          border-color: @value;
+        }
+
+        .form-control-feedback {
+          color: @value;
+        }
+      }
+    })
+  }
+}
+
+.form-control,
+.form-control:focus,
+.has-warning .form-control,
+.has-warning .form-control:focus,
+.has-error .form-control,
+.has-error .form-control:focus,
+.has-success .form-control,
+.has-success .form-control:focus {
+  box-shadow: none;
+  -webkit-appearance: none;
+}
+
+// Set label color to default even when when it has feedback
+.has-feedback > label,
+.has-feedback > .control-label,
+.has-warning > .control-label,
+.has-error > .control-label,
+.has-success > .control-label {
+  color: @gray-dark;
+}
+
+.form-control {
+  font-weight: @font-normal;
+  font-size: unit((@font-size-default / 10), rem); // px to rem
+
+  &.input-sm {
+    font-size: unit((@font-size-sm / 10), rem); // px to rem
+  }
+
+  &.input-lg {
+    font-size: unit((@font-size-lg / 10), rem); // px to rem
+  }
+
+  &[disabled] {
+    + .input-group-addon:last-child {
+      background: #f5f7f9; // because @input-bg-disabled has alpha...
+      cursor: not-allowed;
+    }
+  }
+
+  &:focus {
+    border-color: @input-border-focus;
+
+    + .input-group-addon:last-child {
+      border-color: @input-border-focus;
+      box-shadow: 1px 0 0 0 @input-border-focus;
+      z-index: 3;
+
+      .form-group.has-error & {
+        border-color: darken(@brand-danger, 10%);
+        box-shadow: 1px 0 0 0 darken(@brand-danger, 10%);
+      }
+      .form-group.has-warning & {
+        border-color: darken(@brand-warning, 10%);
+        box-shadow: 1px 0 0 0 darken(@brand-warning, 10%);
+      }
+      .form-group.has-success & {
+        border-color: darken(@brand-success, 10%);
+        box-shadow: 1px 0 0 0 darken(@brand-success, 10%);
+      }
+    }
+  }
+
+  // Hide HTML5 Up and Down arrows
+  &.no-controls {
+    -webkit-appearance: none;
+    -moz-appearance: textfield;
+
+    &::-webkit-inner-spin-button,
+    &::-webkit-outer-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+  }
+}
+
+textarea.form-control {
+  min-height: @input-height-base;
+  resize: vertical;
+
+  &.input-sm {
+    min-height: @input-height-sm;
+  }
+
+  &.input-lg {
+    min-height: @input-height-lg;
+  }
+}
+
+.form-control::placeholder,
+.form-control::-webkit-input-placeholder,
+.form-control:-ms-input-placeholder,
+.form-control::-ms-input-placeholder {
+  font-style: italic;
+}
+
+// Form inline
+.form-inline {
+  // Inline-block all the things for "inline"
+  .form-group {
+    display: inline-block;
+    margin-bottom: 0;
+    vertical-align: middle;
+  }
+
+  // In navbar-form, allow folks to *not* use `.form-group`
+  .form-control {
+    display: inline-block;
+    width: auto; // Prevent labels from stacking above inputs in `.form-group`
+    vertical-align: middle;
+  }
+
+  // Make static controls behave like regular ones
+  .form-control-static {
+    display: inline-block;
+  }
+
+  .input-group {
+    display: inline-table;
+    vertical-align: middle;
+
+    .input-group-addon,
+    .input-group-btn,
+    .form-control {
+      width: auto;
+    }
+  }
+
+  // Input groups need that 100% width though
+  .input-group > .form-control {
+    width: 100%;
+  }
+
+  .control-label {
+    margin-bottom: 0;
+    vertical-align: middle;
+  }
+
+  // Remove default margin on radios/checkboxes that were used for stacking, and
+  // then undo the floating of radios and checkboxes to match.
+  .radio,
+  .checkbox {
+    display: inline-block;
+    margin-top: 0;
+    margin-bottom: 0;
+    vertical-align: middle;
+
+    label {
+      padding-left: 0;
+    }
+  }
+  .radio input[type="radio"],
+  .checkbox input[type="checkbox"] {
+    position: relative;
+    margin-left: 0;
+  }
+
+  // Re-override the feedback icon.
+  .has-feedback .form-control-feedback {
+    top: 0;
+  }
+
+  > .form-group:first-child {
+    margin-left: 0;
+  }
+  > .form-group:last-child {
+    margin-right: 0;
+  }
+  > .form-group {
+    margin-left: 5px;
+    margin-right: 5px;
+  }
+  > .form-group > label {
+    margin-bottom: 0;
+  }
+}

package/lib/style/css/design/iframe.less

@@ -0,0 +1,80 @@
+
+iframe {
+  display: block;
+  position: relative;
+
+  &.iFrameResizer, // TODO: MAYBE remove with v1.0
+  &[id*="iFrameResizer"] {
+    width: 100%;
+    border: none;
+    overflow: hidden;
+  }
+
+  &.full-window {
+    -webkit-overflow-scrolling: touch;
+    bottom: 0;
+    height: 100%;
+    left: 0;
+    overflow: auto;
+    position: absolute;
+    top: 0;
+    width: 100%;
+  }
+
+  &.no-application-header {
+    height: calc(100% + 50px);
+    top: -50px;
+  }
+
+  &.full-width {
+    -webkit-overflow-scrolling: touch;
+    overflow: auto;
+    width: 100%;
+  }
+
+  &.unstyled {
+    border: none;
+  }
+}
+
+.iframe-wrapper {
+  position: relative;
+}
+
+// buyButton
+@iframeHeight: 36px;
+@iframeScalefactor: 1.32353; // to fit btn-lg // former 1.5
+
+iframe {
+  &.buyButton, &.contactButton {
+    height: @iframeHeight;
+    border: none;
+    overflow: hidden;
+    width: 100%;
+
+    &.large {
+      &:not(.responsive) {
+        transform: scale(@iframeScalefactor);
+        transform-origin: 0 0;
+        width: (100% / @iframeScalefactor);
+        height: (@iframeHeight * @iframeScalefactor);
+      }
+
+      &.responsive {
+        @media (min-width: @screen-md) {
+          transform: scale(@iframeScalefactor);
+          transform-origin: 0 0;
+          width: (100% / @iframeScalefactor);
+          height: (@iframeHeight * @iframeScalefactor);
+        }
+      }
+    }
+  }
+
+  &.buyLink, &.contactLink {
+    height: 20px;
+    border: none;
+    overflow: hidden;
+    width: 100%;
+  }
+}