flipper-ui 0.17.2 → 0.18.0

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

@@ -1,32 +0,0 @@
-// A rounded corner box containing a label "open" or "closed"
-// Without a state it is grey.
-//
-// open     - green background
-// reopened - green background
-// closed   - red background
-// merged   - purple background
-// renamed  - orange background
-//
-// No styleguide reference
-.state {
-  display: inline-block;
-  padding: 4px 8px;
-  font-weight: bold;
-  line-height: 20px;
-  color: #fff;
-  text-align: center;
-  border-radius: 3px;
-  background-color: #999;
-}
-
-.state-open,
-.state-proposed,
-.state-reopened {
-  background-color: $status-open;
-}
-
-.state-merged { background-color: $status-merged; }
-
-.state-closed { background-color: $status-closed; }
-
-.state-renamed { background-color: $status-renamed; }

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

@@ -1,65 +0,0 @@
-// Outer wrapper
-.tabnav {
-  margin-top: 0;
-  margin-bottom: 15px;
-  border-bottom: 1px solid #ddd;
-
-  .counter {
-    margin-left: 5px;
-  }
-}
-
-.tabnav-tabs {
-  margin-bottom: -1px;
-}
-
-.tabnav-tab {
-  display: inline-block;
-  padding: 8px 12px;
-  font-size: 14px;
-  line-height: 20px;
-  color: #666;
-  text-decoration: none;
-  border: 1px solid transparent;
-  border-bottom: 0;
-
-  &.selected {
-    color: #333;
-    background-color: #fff;
-    border-color: #ddd;
-    border-radius: 3px 3px 0 0;
-  }
-
-  &:hover { text-decoration: none; }
-}
-
-// Tabnav extras
-//
-// Tabnav extras are non-tab elements that sit in the tabnav. Usually they're
-// inline text or links.
-
-.tabnav-extra {
-  display: inline-block;
-  padding-top: 10px;
-  margin-left: 10px;
-  font-size: 12px;
-  color: #666;
-
-  > .octicon {
-    margin-right: 2px;
-  }
-}
-
-a.tabnav-extra:hover {
-  color: $brand-blue;
-  text-decoration: none;
-}
-
-// Tabnav buttons
-//
-// For when there are multiple buttons, space them out appropriately. Requires
-// the buttons to be floated or inline-block.
-
-.tabnav-btn {
-  margin-left: 10px;
-}

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

@@ -1,255 +0,0 @@
-$multiline-max-width: 250px;
-$tooltip-background-color: rgba(0, 0, 0, 0.8);
-$tooltip-text-color: #fff;
-
-.tooltipped {
-  position: relative;
-}
-
-// This is the tooltip bubble
-.tooltipped:after {
-  position: absolute;
-  z-index: 1000000;
-  display: none;
-  padding: 5px 8px;
-  font: normal normal 11px/1.5 $body-font;
-  color: $tooltip-text-color;
-  text-align: center;
-  text-decoration: none;
-  text-shadow: none;
-  text-transform: none;
-  letter-spacing: normal;
-  word-wrap: break-word;
-  white-space: pre;
-  pointer-events: none;
-  content: attr(aria-label);
-  background: $tooltip-background-color;
-  border-radius: 3px;
-  -webkit-font-smoothing: subpixel-antialiased;
-}
-
-// This is the tooltip arrow
-.tooltipped:before {
-  position: absolute;
-  z-index: 1000001;
-  display: none;
-  width: 0;
-  height: 0;
-  color: $tooltip-background-color;
-  pointer-events: none;
-  content: "";
-  border: 5px solid transparent;
-}
-
-// This will indicate when we'll activate the tooltip
-.tooltipped:hover,
-.tooltipped:active,
-.tooltipped:focus {
-  &:before,
-  &:after {
-    display: inline-block;
-    text-decoration: none;
-  }
-}
-
-.tooltipped-multiline:hover,
-.tooltipped-multiline:active,
-.tooltipped-multiline:focus {
-  &:after {
-    display: table-cell;
-  }
-}
-
-// Tooltipped south
-.tooltipped-s,
-.tooltipped-se,
-.tooltipped-sw {
-  &:after {
-    top: 100%;
-    right: 50%;
-    margin-top: 5px;
-  }
-
-  &:before {
-    top: auto;
-    right: 50%;
-    bottom: -5px;
-    margin-right: -5px;
-    border-bottom-color: $tooltip-background-color;
-  }
-}
-
-.tooltipped-se {
-  &:after {
-    right: auto;
-    left: 50%;
-    margin-left: -15px;
-  }
-}
-
-.tooltipped-sw:after {
-  margin-right: -15px;
-}
-
-// Tooltips above the object
-.tooltipped-n,
-.tooltipped-ne,
-.tooltipped-nw {
-  &:after {
-    right: 50%;
-    bottom: 100%;
-    margin-bottom: 5px;
-  }
-
-  &:before {
-    top: -5px;
-    right: 50%;
-    bottom: auto;
-    margin-right: -5px;
-    border-top-color: $tooltip-background-color;
-  }
-}
-
-.tooltipped-ne {
-  &:after {
-    right: auto;
-    left: 50%;
-    margin-left: -15px;
-  }
-}
-
-.tooltipped-nw:after {
-  margin-right: -15px;
-}
-
-// Move the tooltip body to the center of the object.
-.tooltipped-s:after,
-.tooltipped-n:after {
-  transform: translateX(50%);
-}
-
-// Tooltipped to the left
-.tooltipped-w {
-  &:after {
-    right: 100%;
-    bottom: 50%;
-    margin-right: 5px;
-    transform: translateY(50%);
-  }
-
-  &:before {
-    top: 50%;
-    bottom: 50%;
-    left: -5px;
-    margin-top: -5px;
-    border-left-color: $tooltip-background-color;
-  }
-}
-
-// tooltipped to the right
-.tooltipped-e {
-  &:after {
-    bottom: 50%;
-    left: 100%;
-    margin-left: 5px;
-    transform: translateY(50%);
-  }
-
-  &:before {
-    top: 50%;
-    right: -5px;
-    bottom: 50%;
-    margin-top: -5px;
-    border-right-color: $tooltip-background-color;
-  }
-}
-
-// Multiline tooltips
-//
-// `.tooltipped-multiline` Add this class when you have long content.
-// The downside is you cannot preformat the text with newlines and `[w,e]`
-// are always `$multiline-max-width` wide.
-.tooltipped-multiline {
-  &:after {
-    width: -moz-max-content;
-    width: -webkit-max-content;
-    max-width: $multiline-max-width;
-    word-break: break-word;
-    word-wrap: normal;
-    white-space: pre-line;
-    border-collapse: separate;
-  }
-
-  &.tooltipped-s:after,
-  &.tooltipped-n:after {
-    right: auto;
-    left: 50%;
-    transform: translateX(-50%);
-  }
-
-  &.tooltipped-w:after,
-  &.tooltipped-e:after {
-    right: 100%;
-  }
-}
-
-@media screen and (min-width:0\0) {
-  // IE9 and IE10 rule sets go here
-  .tooltipped-multiline:after {
-    width: $multiline-max-width;
-  }
-}
-
-// Sticky tooltips
-//
-// Always show the tooltip.
-.tooltipped-sticky {
-  &:before,
-  &:after {
-    display: inline-block;
-  }
-
-  &.tooltipped-multiline {
-    &:after {
-      display: table-cell;
-    }
-  }
-}
-
-// Alert tooltips
-//
-// Colors for different alert states.
-@mixin colorizeTooltip($text-color, $background-color) {
-  &:after {
-    color: $text-color;
-    background: $background-color;
-  }
-
-  .tooltipped-s,
-  .tooltipped-se,
-  .tooltipped-sw {
-    &:before {
-      border-bottom-color: $background-color;
-    }
-  }
-
-  &.tooltipped-n,
-  &.tooltipped-ne,
-  &.tooltipped-nw {
-    &:before {
-      border-top-color: $background-color;
-    }
-  }
-
-  &.tooltipped-e:before {
-    border-right-color: $background-color;
-  }
-
-  &.tooltipped-w:before {
-    border-left-color: $background-color;
-  }
-}
-
-.fullscreen-overlay-enabled.dark-theme .tooltipped {
-  @include colorizeTooltip(#000, rgba(255, 255, 255, 0.8));
-}

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

@@ -1,27 +0,0 @@
-// Truncate
-//
-// css-truncate will shorten text with an ellipsis.
-
-.css-truncate {
-  // Truncate double target
-  //
-  // css-truncate will shorten text with an ellipsis. The maximum width
-  // of the truncated text can be changed by overriding the max-width
-  // of the .css-truncate-target
-  &.css-truncate-target,
-  .css-truncate-target {
-    display: inline-block;
-    max-width: 125px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    vertical-align: top;
-  }
-
-  &.expandable.zeroclipboard-is-hover .css-truncate-target,
-  &.expandable.zeroclipboard-is-hover.css-truncate-target,
-  &.expandable:hover .css-truncate-target,
-  &.expandable:hover.css-truncate-target {
-    max-width: 10000px !important;
-  }
-}

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

@@ -1,92 +0,0 @@
-// Headings
-// --------------------------------------------------
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  margin-top: 15px;
-  margin-bottom: 15px;
-  line-height: 1.1;
-}
-
-h1 { font-size: 30px; }
-h2 { font-size: 21px; }
-h3 { font-size: 16px; }
-h4 { font-size: 14px; }
-h5 { font-size: 12px; }
-h6 { font-size: 11px; }
-
-
-// Body text
-// --------------------------------------------------
-
-small {
-  font-size: 90%;
-}
-
-blockquote {
-  margin: 0;
-}
-
-// Large leading paragraphs
-.lead {
-  margin-bottom: 30px;
-  font-size: 20px;
-  font-weight: 300;
-  color: #555;
-}
-
-// Text utilities
-.text-muted { color: #999; }
-.text-danger { color: $brand-red; }
-
-.text-emphasized {
-  font-weight: bold;
-  color: #333;
-}
-
-
-// Lists
-// --------------------------------------------------
-
-ul,
-ol {
-  padding: 0;
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-ol ol,
-ul ol {
-  list-style-type: lower-roman;
-}
-
-ul ul ol,
-ul ol ol,
-ol ul ol,
-ol ol ol {
-  list-style-type: lower-alpha;
-}
-
-dd {
-  margin-left: 0;
-}
-
-
-// Code
-// --------------------------------------------------
-
-tt,
-code {
-  font-family: $mono-font;
-  font-size: 12px;
-}
-
-pre {
-  margin-top: 0;
-  margin-bottom: 0;
-  font: 12px $mono-font;
-}