flipper-ui 0.17.1 → 0.20.0.beta1

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

@@ -1,10 +0,0 @@
-.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

@@ -1,68 +0,0 @@
-// 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

@@ -1,20 +0,0 @@
-// 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

@@ -1,756 +0,0 @@
-// 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
-}