flipper-ui 0.2.0.beta2 → 0.2.0.beta3

data/lib/flipper/ui/assets/stylesheets/primer/_counter.scss

@@ -0,0 +1,10 @@
+.counter {
+  display: inline-block;
+  padding: 2px 5px;
+  font-size: 11px;
+  font-weight: bold;
+  line-height: 1;
+  color: #777;
+  background-color: #eee;
+  border-radius: 20px;
+}

data/lib/flipper/ui/assets/stylesheets/primer/_filter-list.scss

@@ -0,0 +1,68 @@
+// Filters list
+//
+// A vertical list of filters.
+.filter-list {
+  list-style-type: none;
+
+  &.small .filter-item {
+    padding: 4px 10px;
+    margin: 0 0 2px;
+    font-size: 12px;
+  }
+
+  &.pjax-active .filter-item {
+    color: #777;
+    background-color: transparent;
+
+    &.pjax-active {
+      color: #fff;
+      background-color: $brand-blue;
+    }
+  }
+}
+
+.filter-item {
+  position: relative;
+  display: block;
+  padding: 8px 10px;
+  margin-bottom: 5px;
+  overflow: hidden;
+  font-size: 14px;
+  color: #777;
+  text-decoration: none;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+  border-radius: 3px;
+
+  &:hover {
+    text-decoration: none;
+    background-color: #eee;
+  }
+
+  &.selected {
+    color: #fff;
+    background-color: $brand-blue;
+
+    .octicon-remove-close {
+      float: right;
+      opacity: 0.8;
+    }
+  }
+
+  .count {
+    float: right;
+    font-weight: bold;
+  }
+
+  .bar {
+    position: absolute;
+    top: 2px;
+    right: 0;
+    bottom: 2px;
+    z-index: -1;
+    display: inline-block;
+    background-color: #f1f1f1;
+  }
+}
+

data/lib/flipper/ui/assets/stylesheets/primer/_flex-table.scss

@@ -0,0 +1,20 @@
+// Flex table is a module for creating dynamically resizable elements that
+// always sit on the same horizontal line (e.g., they never wrap). Using
+// tables means it's cross browser friendly.
+
+.flex-table {
+  display: table;
+}
+
+// Place this on every "cell"
+.flex-table-item {
+  display: table-cell;
+  width: 1%;
+  white-space: nowrap;
+  vertical-align: middle;
+}
+
+// Place this on the largest or most important "cell"
+.flex-table-item-primary {
+  width: 99%;
+}

data/lib/flipper/ui/assets/stylesheets/primer/_forms.scss

@@ -0,0 +1,756 @@
+// Base form controls
+//
+// Overrides for common inputs for easier styling.
+
+fieldset {
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+label {
+  font-size: 13px;
+  font-weight: bold;
+}
+
+.form-control,
+input[type="text"],
+input[type="password"],
+input[type="email"],
+input[type="number"],
+input[type="tel"],
+input[type="url"],
+textarea {
+  min-height: 34px;
+  padding: 7px 8px;
+  font-size: 13px;
+  color: #333;
+  vertical-align: middle;
+  background-color: #fff;
+  background-repeat: no-repeat; // Repeat and position set for form states (success, error, etc)
+  background-position: right center;
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  outline: none;
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
+
+  &.focus,
+  &:focus {
+    border-color: #51a7e8;
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075), 0 0 5px rgba(81, 167, 232, 0.5);
+  }
+}
+
+// Inputs with contrast for easy light gray backgrounds against white.
+// input.class is needed here to increase specificity over input[…]
+input.input-contrast,
+.input-contrast {
+  background-color: #fafafa;
+
+  &:focus { background-color: #fff; }
+}
+
+// Custom styling for HTML5 validation bubbles (WebKit only)
+::-webkit-input-placeholder,
+:-moz-placeholder {
+  color: #aaa;
+}
+
+::-webkit-validation-bubble-message {
+  font-size: 12px;
+  color: #fff;
+  background: #9c2400;
+  border: 0;
+  border-radius: 3px;
+  -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
+}
+
+input::-webkit-validation-bubble-icon {
+  display: none;
+}
+
+::-webkit-validation-bubble-arrow {
+  background-color: #9c2400;
+  border: solid 1px #9c2400;
+  -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
+}
+
+// Mini inputs, to match .minibutton
+input.input-mini {
+  min-height: 26px;
+  padding-top: 4px;
+  padding-bottom: 4px;
+  font-size: 12px;
+}
+
+// Large inputs
+input.input-large {
+  padding: 6px 10px;
+  font-size: 16px;
+}
+
+// Full-width inputs
+.input-block {
+  display: block;
+  width: 100%;
+}
+
+// Inputs with monospace text
+.input-monospace {
+  font-family: $mono-font;
+}
+
+// Form groups
+//
+// Typical form groups - `<dl.form>` with a `<dt>` containing the label and
+// `<dd> containing the form elements.
+dl.form {
+  margin: 15px 0;
+
+  input[type="text"],
+  input[type="password"],
+  input[type="email"],
+  input[type="url"],
+  textarea {
+    background-color: #fafafa;
+
+    &:focus {
+      background-color: #fff;
+    }
+  }
+
+  // The Label
+  > dt {
+    margin: 0 0 6px;
+
+    label {
+      position: relative;
+    }
+  }
+
+  &.flattened > dt {
+    float: left;
+    margin: 0;
+    line-height: 32px;
+  }
+
+  &.flattened > dd {
+    line-height: 32px;
+  }
+
+  //
+  // Form Elements
+  //
+
+  > dd {
+    // Text fields
+    input[type="text"],
+    input[type="password"],
+    input[type="email"],
+    input[type="url"] {
+      width: 440px;
+      max-width: 100%;
+      margin-right: 5px;
+      background-position-x: 98%;
+    }
+
+    input {
+      &.shorter { width: 130px; }
+
+      &.short { width: 250px; }
+
+      &.long { width: 100%; }
+    }
+
+    // Textarea
+    textarea {
+      width: 100%;
+      height: 200px;
+      min-height: 200px;
+
+      &.short {
+        height: 50px;
+        min-height: 50px;
+      }
+    }
+
+    h4 {
+      margin: 4px 0 0;
+
+      &.is-error { color: $brand-red; }
+
+      &.is-success { color: $brand-green; }
+    }
+
+    h4 + p.note {
+      margin-top: 0;
+    }
+
+  }
+
+  //
+  // Variants
+  //
+
+  &.required {
+    > dt > label:after {
+      padding-left: 5px;
+      color: #9f1006;
+      content: "*";
+    }
+  }
+}
+
+.note {
+  min-height: 17px;
+  margin: 4px 0 2px;
+  font-size: 12px;
+  color: #777;
+
+  .spinner {
+    margin-right: 3px;
+    vertical-align: middle;
+  }
+}
+
+
+// Checkboxes and Radiobuttons
+//
+// For checkboxes and radio button selections.
+.form-checkbox {
+  padding-left: 20px;
+  margin: 15px 0;
+  vertical-align: middle;
+
+  label {
+
+    em.highlight {
+      position: relative;
+      left: -4px;
+      padding: 2px 4px;
+      font-style: normal;
+      background: #fffbdc;
+      border-radius: 3px;
+    }
+  }
+
+  input[type=checkbox],
+  input[type=radio] {
+    float: left;
+    margin: 2px 0 0 -20px;
+    vertical-align: middle;
+  }
+
+  .note {
+    display: block;
+    margin: 0;
+    font-size: 12px;
+    font-weight: normal;
+    color: #666;
+  }
+}
+
+
+// Form AJAX states
+//
+// Form fields that need feedback for AJAX loading, success
+// states and errored states.
+dl.form {
+  .success,
+  .error,
+  .indicator {
+    display: none;
+    font-size: 12px;
+    font-weight: bold;
+  }
+
+  &.loading {
+    opacity: 0.5;
+
+    .indicator {
+      display: inline;
+    }
+
+    .spinner {
+      display: inline-block;
+      vertical-align: middle;
+    }
+  }
+
+  &.successful {
+    .success {
+      display: inline;
+      color: #390;
+    }
+  }
+
+  &.errored {
+    > dt label {
+      color: #900;
+    }
+
+    // General text next to the field
+    .error {
+      display: inline;
+      color: #900;
+    }
+
+    // Specific error explanations from the server
+    dd.error,
+    dd.warning {
+      display: inline-block;
+      padding: 5px;
+      font-size: 11px;
+      color: #494620;
+      background: #f7ea57;
+      border: 1px solid #c0b536;
+      border-top-color: #fff;
+      border-bottom-right-radius: 3px;
+      border-bottom-left-radius: 3px;
+    }
+  }
+
+  &.warn {
+    // General text next to the field
+    .warning {
+      display: inline;
+      color: #900;
+    }
+
+    // Specific warning explanations from the server
+    dd.warning {
+      display: inline-block;
+      padding: 5px;
+      font-size: 11px;
+      color: #494620;
+      background: #f7ea57;
+      border: 1px solid #c0b536;
+      border-top-color: #fff;
+      border-bottom-right-radius: 3px;
+      border-bottom-left-radius: 3px;
+    }
+  }
+
+  .form-note {
+    display: inline-block;
+    padding: 5px;
+    margin-top: -1px;
+    font-size: 11px;
+    color: #494620;
+    background: #f7ea57;
+    border: 1px solid #c0b536;
+    border-top-color: #fff;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+}
+
+
+// Field groups
+//
+// Wrap field groups in `<div.hfields>` to lay them out horizontally - great for
+// the top of pages with autosave.
+.hfields {
+  margin: 15px 0;
+  @include clearfix;
+
+  dl.form {
+    float: left;
+    margin: 0 30px 0 0;
+
+    & > dt label {
+      display: inline-block;
+      margin: 5px 0 0;
+      color: #666;
+
+      img {
+        position: relative;
+        top: -2px;
+      }
+    }
+  }
+
+  .btn {
+    float: left;
+    margin: 28px 25px 0 -20px;
+  }
+
+  select { margin-top: 5px; }
+}
+
+// IE 9
+html.no-dnd-uploads {
+  .drag-and-drop {
+    min-height: 32px;
+
+    .default {
+      display: none;
+    }
+  }
+
+  .upload-enabled textarea {
+    border-bottom: 1px solid #ddd;
+  }
+}
+
+.drag-and-drop {
+  padding: 7px 10px;
+  margin: 0;
+  font-size: 13px;
+  line-height: 16px;
+  color: #aaa;
+  background-color: #fafafa;
+  border: 1px solid #ccc;
+  border-top: 0;
+  border-bottom-right-radius: 3px;
+  border-bottom-left-radius: 3px;
+
+  .default,
+  .loading,
+  .error {
+    display: none;
+  }
+
+  .error {
+    color: $brand-red;
+  }
+
+  // Spinner
+  img {
+    vertical-align: top;
+  }
+}
+
+.is-default .drag-and-drop .default {
+  display: inline-block;
+}
+
+.is-uploading .drag-and-drop .loading {
+  display: inline-block;
+}
+
+.is-bad-file .drag-and-drop .bad-file {
+  display: inline-block;
+}
+
+.is-too-big .drag-and-drop .too-big {
+  display: inline-block;
+}
+
+.is-empty .drag-and-drop .empty {
+  display: inline-block;
+}
+
+.is-bad-browser .drag-and-drop .bad-browser {
+  display: inline-block;
+}
+
+.drag-and-drop-error-info {
+  font-weight: normal;
+  color: #aaa;
+
+  a {
+    color: $brand-blue;
+  }
+}
+
+.is-failed .drag-and-drop .failed-request {
+  display: inline-block;
+}
+
+.manual-file-chooser {
+  position: absolute;
+  width: 240px;
+  padding: 5px;
+  margin-left: -80px;
+  cursor: pointer;
+  opacity: 0.0001;
+}
+
+.manual-file-chooser:hover + .manual-file-chooser-text {
+  text-decoration: underline;
+}
+
+.btn {
+  // align manual-file-chooser inside a button
+  .manual-file-chooser {
+    top: 0;
+    padding: 0;
+    line-height: 34px;
+  }
+}
+
+// Focused Textarea styles
+.upload-enabled textarea {
+  display: block;
+  border-bottom: 1px dashed #ddd;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.focused .drag-and-drop {
+  @extend input[type="text"]:focus;
+  box-shadow: rgba(#51a7e8, 0.5) 0 0 3px;
+}
+
+// Dropping a file on top
+.dragover textarea,
+.dragover .drag-and-drop {
+  box-shadow: rgba(#c9ff00, 1) 0 0 3px;
+}
+
+
+// Form style with a write and a preview tab
+.previewable-comment-form {
+  position: relative;
+
+  .tabnav {
+    position: relative;
+    padding: 10px 10px 0;
+  }
+
+  .comment {
+    border: 1px solid #cacaca;
+  }
+
+  .comment-header .comment-header-actions { display: none; }
+
+  .comment-form-error { margin-bottom: 10px; }
+
+  .write-content,
+  .preview-content {
+    display: none;
+    padding: 0 10px 10px;
+  }
+
+  &.write-selected .write-content,
+  &.preview-selected .preview-content {
+    display: block;
+  }
+
+  textarea {
+    display: block;
+    width: 100%;
+    min-height: 100px;
+    max-height: 500px;
+    padding: 10px;
+    resize: vertical;
+
+    &.fullscreen-contents:focus {
+      border: 0;
+      box-shadow: none;
+    }
+  }
+}
+
+
+// A two column form, with a .main and a .sidebar column
+//
+// Override some `.timeline-comment-wrapper` defaults.
+// The `div` is needed to be more specific than the other class.
+div.composer {
+  margin-top: 0;
+  border: 0;
+}
+
+// Override the previewable comment form defaults
+.composer .comment-form-textarea {
+  height: 200px;
+  min-height: 200px;
+}
+
+.composer-infobar {
+  height: 35px;
+  padding: 0 10px;
+  margin-bottom: 10px;
+  border-bottom: 1px solid #eee;
+}
+
+.composer .tabnav { margin: 0 0 10px; }
+
+.infobar-widget {
+
+  &.milestone {
+    position: relative; // requires so that the `right: 0;` below works
+    float: right;
+
+    .select-menu-modal-holder { right: 0; }
+  }
+
+  &.assignee {
+    float: left;
+
+    .css-truncate-target {
+      max-width: 110px;
+    }
+  }
+
+  .text,
+  .avatar,
+  .select-menu {
+    display: inline-block;
+    vertical-align: top;
+  }
+
+  .text {
+    margin-top: 3px;
+
+    a {
+      font-weight: bold;
+      color: #333;
+    }
+  }
+
+  .progress-bar {
+    width: 200px;
+    overflow: hidden; // round the corners if 100%
+    line-height: 18px;
+  }
+}
+
+
+// Hide the up/down buttons in <input type="number"> in the login form, the
+// input is used for two-factor auth codes, type="number" makes it more usable
+// on phones
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  margin: 0;
+  -webkit-appearance: none;
+}
+
+
+// Input groups
+.input-group {
+  display: table;
+
+  input {
+    position: relative;
+    width: 100%;
+
+    &:focus {
+      z-index: 2;
+    }
+  }
+
+  input[type="text"] + .btn {
+    margin-left: 0;
+  }
+
+  // For when you want the input group to behave like inline-block.
+  &.inline {
+    display: inline-table;
+  }
+}
+
+.input-group input,
+.input-group-button {
+  display: table-cell;
+}
+
+.input-group-button {
+  width: 1%;
+  vertical-align: middle; // Match the inputs
+}
+
+.input-group input:first-child,
+.input-group-button:first-child .btn {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.input-group-button:first-child .btn {
+  margin-right: -1px;
+}
+
+.input-group input:last-child,
+.input-group-button:last-child .btn {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.input-group-button:last-child .btn {
+  margin-left: -1px;
+}
+
+h2.account {
+  margin: 15px 0 0;
+  font-size: 18px;
+  font-weight: normal;
+  color: #666;
+}
+
+p.explain {
+  position: relative;
+  font-size: 12px;
+  color: #666;
+
+  strong {
+    color: #333;
+  }
+
+  .octicon {
+    margin-right: 5px;
+    color: #bbb;
+  }
+
+  .minibutton {
+    top: -4px;
+    float: right;
+  }
+}
+
+.options-content p.explain {
+  padding: 10px 10px 0;
+  margin-top: 0;
+  border-top: 1px solid #ddd;
+}
+
+.form-actions {
+  @include clearfix;
+
+  .btn {
+    float: right;
+
+    + .btn {
+      margin-right: 5px;
+    }
+  }
+}
+
+.form-warning {
+  padding: 8px 10px;
+  margin: 10px 0;
+  font-size: 14px;
+  color: #333;
+  background: #ffffe2;
+  border: 1px solid #e7e4c2;
+  border-radius: 4px;
+
+  p {
+    margin: 0;
+    line-height: 1.5;
+  }
+
+  strong { color: #000; }
+
+  a { font-weight: bold; }
+}
+
+
+// Inline verification
+//
+// Used for example when autosaving checkboxes in settings.
+.status-indicator {
+  @include icon-bootstrap(16px);
+  margin-left: 5px;
+}
+
+.status-indicator-success:before {
+  color: $brand-green;
+  content: "\f03a"; // octicon-check
+}
+
+.status-indicator-failed:before {
+  color: $brand-red;
+  content: "\f02d"; // octicon-x
+}