<commit_before>@import "compass";
@import "compass/css3";


$pill-radius: 3px;
$pill-height: 20px;
$pill-min-width: 150px;

$text-color: #212121;

body{
  width:100%;
  height:100%;
}

h1 {
  @extend .noselect;
  font-size: 24px;
  font-weight: 700;
  margin: 0;
}

h2 {
  @extend .noselect;
  font-size: 16px;
  text-transform: uppercase;
  font-weight: 700;
}

h3 {
  @extend .noselect;
  font-size: 14px;
  font-weight: 700;
}

h4 {
  @extend .noselect;
  font-size: 12px;
  font-weight: 700;
}


.flex-root{
  overflow: scroll;
}

/* UTILITIES */


.full-width {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: initial;
}

.full-height{
  height: 100%;
}

.inline-block {
  @include inline-block;
}

.grow-1{
  flex-grow:1;
}

.hflex {
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

.persist-scroll{
  /*
    Prevent scroll bars from being hidden for OS X.
    http://stackoverflow.com/questions/7855590/how-can-i-prevent-scroll-bars-from-being-hidden-for-os-x-trackpad-users-in-webkit
  */
  &::-webkit-scrollbar {
    -webkit-appearance: none;
  }

  &::-webkit-scrollbar:vertical {
    width: 11px;
  }

  &::-webkit-scrollbar:horizontal {
    height: 11px;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 2px solid white; /* should match background, can't be transparent */
    background-color: rgba(0, 0, 0, .5);
  }

  &::-webkit-scrollbar-track {
    background-color: #fff;
    border-radius: 8px;
  }
}

.scroll-y{
  @extend .persist-scroll;
  overflow-y: scroll;
}

.small {
  font-size: 10px;
}

/* prevent element from being selected http://stackoverflow.com/questions/826782 */
.noselect {
  @include user-select(none);
}

/** ICONS FOR DATA TYPES */

.icon-type{
  @include inline-block;
  width: 22px;
  height: 15px;
  color: transparent;
}

.icon-type-G{
  @extend .icon-type;
  background: url("../images/field_geo.png") no-repeat;
}

.icon-type-O{
  @extend .icon-type;
  background: url("../images/field_text.png") no-repeat;
}

.icon-type-Q{
  @extend .icon-type;
  background: url("../images/field_number.png") no-repeat;
}

.icon-type-T{
  @extend .icon-type;
  background: url("../images/field_time.png") no-repeat;
}

/**** FIELD & FIELD-PILLS ****/

.field {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: $pill-height;
  margin-bottom: 3px;

  .type{
    font-size: 0.8rem;
    margin-right: 3px;
    flex-shrink: 0;
  }
  .field-pill{
    flex-grow: 1;
  }
}

$pill-bg-color: #eee;

/* draggable component of the field */
.field-pill {
  @extend .noselect;
  display: flex;

  background-color: $pill-bg-color;
  color: $text-color;
  margin: 0;
  text-decoration: none;
  padding: 0 0.5em;

  border-radius: 3px;
  height: $pill-height;

  cursor: default;

  .field-func{
    text-transform: uppercase;
  }

  .field-name{
    overflow-x: hidden;
    text-overflow: ellipsis;
    flex-grow: 1;
  }

  .dragging{
    min-width: $pill-min-width;
  }

  .remove-field {
    flex-grow: 0;
  }

  .caret {
    flex-grow: 0;
    margin: auto 0;
  }
}


.draggable {
  cursor: move;
}
<commit_msg>remove compass style since (1) we're already using autoprefixer so there is no point to use both compass mix-ins and auto-prefixer (2) turn out that it takes too much time to setup compass in facetedviz so I think this is a corner that we can cut<commit_after>$pill-radius: 3px;
$pill-height: 20px;
$pill-min-width: 150px;

$text-color: #212121;

body{
  width:100%;
  height:100%;
}

h1 {
  @extend .noselect;
  font-size: 24px;
  font-weight: 700;
  margin: 0;
}

h2 {
  @extend .noselect;
  font-size: 16px;
  text-transform: uppercase;
  font-weight: 700;
}

h3 {
  @extend .noselect;
  font-size: 14px;
  font-weight: 700;
}

h4 {
  @extend .noselect;
  font-size: 12px;
  font-weight: 700;
}


.flex-root{
  overflow: scroll;
}

/* UTILITIES */


.full-width {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: initial;
}

.full-height{
  height: 100%;
}

.inline-block {
  display: inline-block;
}

.grow-1{
  flex-grow:1;
}

.hflex {
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

.persist-scroll{
  /*
    Prevent scroll bars from being hidden for OS X.
    http://stackoverflow.com/questions/7855590/how-can-i-prevent-scroll-bars-from-being-hidden-for-os-x-trackpad-users-in-webkit
  */
  &::-webkit-scrollbar {
    -webkit-appearance: none;
  }

  &::-webkit-scrollbar:vertical {
    width: 11px;
  }

  &::-webkit-scrollbar:horizontal {
    height: 11px;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 2px solid white; /* should match background, can't be transparent */
    background-color: rgba(0, 0, 0, .5);
  }

  &::-webkit-scrollbar-track {
    background-color: #fff;
    border-radius: 8px;
  }
}

.scroll-y{
  @extend .persist-scroll;
  overflow-y: scroll;
}

.small {
  font-size: 10px;
}

/* prevent element from being selected http://stackoverflow.com/questions/826782 */
.noselect {
  user-select: none;
}

/** ICONS FOR DATA TYPES */

.icon-type{
  @extend .inline-block;
  width: 22px;
  height: 15px;
  color: transparent;
}

.icon-type-location{
  @extend .icon-type;
  background: url("../images/field_geo.png") no-repeat;
}

.icon-type-text{
  @extend .icon-type;
  background: url("../images/field_text.png") no-repeat;
}

.icon-type-number{
  @extend .icon-type;
  background: url("../images/field_number.png") no-repeat;
}

.icon-type-time{
  @extend .icon-type;
  background: url("../images/field_time.png") no-repeat;
}

/**** FIELD & FIELD-PILLS ****/

.field {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: $pill-height;
  margin-bottom: 3px;

  .type{
    font-size: 0.8rem;
    margin-right: 3px;
    flex-shrink: 0;
  }
  .field-pill{
    flex-grow: 1;
  }
}

$pill-bg-color: #eee;

/* draggable component of the field */
.field-pill {
  @extend .noselect;
  display: flex;

  background-color: $pill-bg-color;
  color: $text-color;
  margin: 0;
  text-decoration: none;
  padding: 0 0.5em;

  border-radius: 3px;
  height: $pill-height;

  cursor: default;

  .field-func{
    text-transform: uppercase;
  }

  .field-name{
    overflow-x: hidden;
    text-overflow: ellipsis;
    flex-grow: 1;
  }

  .dragging{
    min-width: $pill-min-width;
  }

  .remove-field {
    flex-grow: 0;
  }

  .caret {
    flex-grow: 0;
    margin: auto 0;
  }
}


.draggable {
  cursor: move;
}

{'fraction_non_alphanumeric': 0.16534206015271935, 'fraction_numerical': 0.031323048153342685, 'mean_word_length': 2.811163895486936, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2855055', 'n_tokens_mistral': 2804, 'n_tokens_neox': 2570, 'n_words': 539}