flipper-ui 0.2.0.beta2 → 0.2.0.beta3

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

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

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

@@ -0,0 +1,255 @@
+$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

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

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