<commit_before>// VARIABLES
$menu-bar-item-horizontal-padding: 7px;
$menu-bar-item-height: 26px;
$menu-bar-item-min-width: $menu-bar-item-height;
$menu-bar-item-border-radius: 2px;
$menu-bar-item-border-darken: .1;
$menu-bar-item-border-shadow-darken: .3;
$menu-bar-item-border-width: 1px;
$menu-bar-item-border-colour: rgba(0,0,0, $menu-bar-item-border-darken);
$menu-bar-item-border-shadow-colour: rgba(0,0,0, $menu-bar-item-border-shadow-darken);
$menu-bar-item-light-colour: #FEFEFE;
$menu-bar-item-dark-colour: #DDDEDE;
$menu-bar-item-text-color: #333;
$menu-bar-item-disabled-text-color: #999;
$menu-bar-item-spacing: 10px;
$menu-bar-height: 2*$menu-bar-item-border-width + $menu-bar-item-height;
$menu-bar-font: bold 12px 'Arial', 'sans-serif';
$menu-bar-separator-height: 26px;
$menu-border-width: 1px;
$menu-vertical-padding: 0.2em;
$menu-item-vertical-padding: 0.4em;
$menu-item-horizontal-padding: 2em;
$menu-item-disabled-text-color: #AAA;
// Make the button border appear even when in a group by popping the button up above its siblings
$menu-bar-item-zindex: 1;
$menu-bar-item-hover-zindex: 2;
$menu-bar-item-pressed-zindex: 3;

// HELPERS

@mixin no-select{
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}
@mixin no-drag{
  -moz-user-drag: none;
  -webkit-user-drag: none;
  user-drag: none;
}
@mixin menu-bar-item-border-shadow-with-fallback($background-colour: $menu-bar-item-dark-colour){
  border-bottom-color: darken($background-colour, percentage($menu-bar-item-border-shadow-darken)); // Fallback
  border-bottom-color: $menu-bar-item-border-shadow-colour;
}
@mixin menu-bar-item-border-colour-with-fallback($background-colour: $menu-bar-item-dark-colour){
  border-color: darken($background-colour, percentage($menu-bar-item-border-darken)); // Fallback
  border-color: $menu-bar-item-border-colour;
  @include menu-bar-item-border-shadow-with-fallback($background-colour);
}
@mixin menu-bar-item-border($background-colour: $menu-bar-item-dark-colour){
  border: $menu-bar-item-border-width solid;
  @include menu-bar-item-border-colour-with-fallback($background-colour);
  border-radius: $menu-bar-item-border-radius;
  -moz-transition: border-color 0.2s linear;
  -webkit-transition: border-color 0.2s linear;

}
@mixin gradient($start, $end){
  // IE 9
  background-image: data_url('image/svg+xml', '<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none">
    <linearGradient id="grad-ucgg-generated" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#{$start}" stop-opacity="1"/>
      <stop offset="100%" stop-color="#{$end}" stop-opacity="1"/>
    </linearGradient>
    <rect x="0" y="0" width="1" height="1" fill="url(#grad-ucgg-generated)" />
  </svg>');
  // IE 10+
  background-image: -ms-linear-gradient(top, $start 0%, $end 100%);

  background-image: -moz-linear-gradient(top, $start 0%, $end 100%);
  background-image: -webkit-linear-gradient(top, $start 0%, $end 100%);
  background-image: linear-gradient(top, $start 0%, $end 100%);
  background-repeat: no-repeat;
}
@mixin button_colour($light, $dark, $text-colour: white, $text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25), $shift: 15px){
    color: $text-colour !important; // Make this important because host app may override hover colours, but we don't want to be affected
    text-shadow: $text-shadow;
    @include menu-bar-item-border($dark);

    background-color: mix($light, $dark);

    // Don't override the background if the browser doesn't support gradients otherwise the buttons will be too dark
    &:not(oldbrowser){
      @include gradient($light, $dark);
      background-color: $dark;
    }

    &:hover:not(:active):not(.disabled):not(.selected){
      -moz-transition: background-position 0.1s linear;
      -webkit-transition: background-position 0.1s linear;
      background-position: 0 (-$shift);
    }
}

// STYLES
@mixin menu_bar_item{
  @include menu_bar_item_base;
  @include menu_bar_item_hover;
  @include menu_bar_item_pressed;

  @include menu_bar_item_default_colour;
  &.danger{  @include menu_bar_item_danger_colour  }
  &.primary{ @include menu_bar_item_primary_colour }
  &.info{    @include menu_bar_item_info_colour    }
  &.success{ @include menu_bar_item_success_colour }
  &.warning{ @include menu_bar_item_warning_colour }
  &.inverse{ @include menu_bar_item_inverse_colour }

  &.disabled { @include menu_bar_item_disabled }
}

@mixin menu_bar_item_base{
  @include menu-bar-item-border;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); // Bevelled top edge
  min-width: $menu-bar-item-min-width - 2*$menu-bar-item-horizontal-padding;
  padding: 0 $menu-bar-item-horizontal-padding;
  display: inline-block;
  font: $menu-bar-font;
  line-height: $menu-bar-item-height;
  white-space: nowrap;
  text-align: center;
  cursor: pointer;

  // Place the button above any nested menu
  position: relative;
  z-index: $menu-bar-item-zindex;

  img{
    vertical-align: middle;
    position: relative;
    bottom: 1px;
  }

  > a, > label{
    cursor: pointer; // Override browser default on labels
    text-decoration: none;
    // Make the a fill the hoverable area of the button so clicking anywhere triggers the link
    margin: -$menu-bar-item-horizontal-padding (-$menu-bar-item-horizontal-padding - $menu-bar-item-border-width);
    padding: $menu-bar-item-horizontal-padding ($menu-bar-item-horizontal-padding + $menu-bar-item-border-width);
  }
  a:link, a:visited{
    color: inherit;
  }

  // Hide the inputs without making them display none. IE doesn't click them if they are display none.
  input[type='submit']{
    position: absolute;
    z-index: -1;
    left: -9999px;
  }
}
@mixin menu_bar_item_hover{
  &:hover{
    border-color: #888; // Fallback
    border-color: rgba(0,0,0, $menu-bar-item-border-darken * 2);
    border-bottom-color: rgba(0,0,0, $menu-bar-item-border-shadow-darken * 2);
    z-index: $menu-bar-item-hover-zindex;
    position: relative;
  }
}
@mixin menu_bar_item_pressed{
  &:active, &.selected{
    border-color: #555; // Fallback
    border-color: rgba(0,0,0, $menu-bar-item-border-darken * 2);
    box-shadow: 0 -1px 1px rgba(255, 255, 255, 0.4) inset, 0 2px 2px rgba(0, 0, 0, .3) inset;
    z-index: $menu-bar-item-pressed-zindex;
    position: relative;
  }
}

@mixin menu_bar_item_disabled{
  @include button_colour(#fefefe, #dddede, $menu-bar-item-disabled-text-color, 0 1px 1px rgba(255, 255, 255, 0.75));
  cursor: default;
  
  &:active{
    box-shadow: none;
  }
}

@mixin menu_bar_item_default_colour{
  @include button_colour($menu-bar-item-light-colour, $menu-bar-item-dark-colour, $menu-bar-item-text-color, 0 1px 1px rgba(255, 255, 255, 0.75), 5px);
}
@mixin menu_bar_item_danger_colour{
  @include button_colour(#EE5F5B, #BD362F);<commit_msg>Don’t include hover behaviour in colour mixin<commit_after>// VARIABLES
$menu-bar-item-horizontal-padding: 7px;
$menu-bar-item-height: 26px;
$menu-bar-item-min-width: $menu-bar-item-height;
$menu-bar-item-border-radius: 2px;
$menu-bar-item-border-darken: .1;
$menu-bar-item-border-shadow-darken: .3;
$menu-bar-item-border-width: 1px;
$menu-bar-item-border-colour: rgba(0,0,0, $menu-bar-item-border-darken);
$menu-bar-item-border-shadow-colour: rgba(0,0,0, $menu-bar-item-border-shadow-darken);
$menu-bar-item-light-colour: #FEFEFE;
$menu-bar-item-dark-colour: #DDDEDE;
$menu-bar-item-text-color: #333;
$menu-bar-item-disabled-text-color: #999;
$menu-bar-item-spacing: 10px;
$menu-bar-height: 2*$menu-bar-item-border-width + $menu-bar-item-height;
$menu-bar-font: bold 12px 'Arial', 'sans-serif';
$menu-bar-separator-height: 26px;
$menu-border-width: 1px;
$menu-vertical-padding: 0.2em;
$menu-item-vertical-padding: 0.4em;
$menu-item-horizontal-padding: 2em;
$menu-item-disabled-text-color: #AAA;
// Make the button border appear even when in a group by popping the button up above its siblings
$menu-bar-item-zindex: 1;
$menu-bar-item-hover-zindex: 2;
$menu-bar-item-pressed-zindex: 3;

// HELPERS

@mixin no-select{
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}
@mixin no-drag{
  -moz-user-drag: none;
  -webkit-user-drag: none;
  user-drag: none;
}
@mixin menu-bar-item-border-shadow-with-fallback($background-colour: $menu-bar-item-dark-colour){
  border-bottom-color: darken($background-colour, percentage($menu-bar-item-border-shadow-darken)); // Fallback
  border-bottom-color: $menu-bar-item-border-shadow-colour;
}
@mixin menu-bar-item-border-colour-with-fallback($background-colour: $menu-bar-item-dark-colour){
  border-color: darken($background-colour, percentage($menu-bar-item-border-darken)); // Fallback
  border-color: $menu-bar-item-border-colour;
  @include menu-bar-item-border-shadow-with-fallback($background-colour);
}
@mixin menu-bar-item-border($background-colour: $menu-bar-item-dark-colour){
  border: $menu-bar-item-border-width solid;
  @include menu-bar-item-border-colour-with-fallback($background-colour);
  border-radius: $menu-bar-item-border-radius;
  -moz-transition: border-color 0.2s linear;
  -webkit-transition: border-color 0.2s linear;

}
@mixin gradient($start, $end){
  // IE 9
  background-image: data_url('image/svg+xml', '<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none">
    <linearGradient id="grad-ucgg-generated" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#{$start}" stop-opacity="1"/>
      <stop offset="100%" stop-color="#{$end}" stop-opacity="1"/>
    </linearGradient>
    <rect x="0" y="0" width="1" height="1" fill="url(#grad-ucgg-generated)" />
  </svg>');
  // IE 10+
  background-image: -ms-linear-gradient(top, $start 0%, $end 100%);

  background-image: -moz-linear-gradient(top, $start 0%, $end 100%);
  background-image: -webkit-linear-gradient(top, $start 0%, $end 100%);
  background-image: linear-gradient(top, $start 0%, $end 100%);
  background-repeat: no-repeat;
}
@mixin button_colour($light, $dark, $text-colour: white, $text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25)){
  color: $text-colour !important; // Make this important because host app may override hover colours, but we don't want to be affected
  text-shadow: $text-shadow;
  @include menu-bar-item-border($dark);

  background-color: mix($light, $dark);

  // Don't override the background if the browser doesn't support gradients otherwise the buttons will be too dark
  &:not(oldbrowser){
    @include gradient($light, $dark);
    background-color: $dark;
  }
}

// STYLES
@mixin menu_bar_item{
  @include menu_bar_item_base;
  @include menu_bar_item_hover;
  @include menu_bar_item_pressed;

  @include menu_bar_item_default_colour;
  &.danger{  @include menu_bar_item_danger_colour  }
  &.primary{ @include menu_bar_item_primary_colour }
  &.info{    @include menu_bar_item_info_colour    }
  &.success{ @include menu_bar_item_success_colour }
  &.warning{ @include menu_bar_item_warning_colour }
  &.inverse{ @include menu_bar_item_inverse_colour }

  &.disabled { @include menu_bar_item_disabled }
}

@mixin menu_bar_item_base{
  @include menu-bar-item-border;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); // Bevelled top edge
  min-width: $menu-bar-item-min-width - 2*$menu-bar-item-horizontal-padding;
  padding: 0 $menu-bar-item-horizontal-padding;
  display: inline-block;
  font: $menu-bar-font;
  line-height: $menu-bar-item-height;
  white-space: nowrap;
  text-align: center;
  cursor: pointer;

  // Place the button above any nested menu
  position: relative;
  z-index: $menu-bar-item-zindex;

  img{
    vertical-align: middle;
    position: relative;
    bottom: 1px;
  }

  > a, > label{
    cursor: pointer; // Override browser default on labels
    text-decoration: none;
    // Make the a fill the hoverable area of the button so clicking anywhere triggers the link
    margin: -$menu-bar-item-horizontal-padding (-$menu-bar-item-horizontal-padding - $menu-bar-item-border-width);
    padding: $menu-bar-item-horizontal-padding ($menu-bar-item-horizontal-padding + $menu-bar-item-border-width);
  }
  a:link, a:visited{
    color: inherit;
  }

  // Hide the inputs without making them display none. IE doesn't click them if they are display none.
  input[type='submit']{
    position: absolute;
    z-index: -1;
    left: -9999px;
  }
}
@mixin menu_bar_item_hover($gradient-shift: 15px) {
  &:hover:not(.disabled):not(.selected) {
    border-color: #888; // Fallback
    border-color: rgba(0,0,0, $menu-bar-item-border-darken * 2);
    border-bottom-color: rgba(0,0,0, $menu-bar-item-border-shadow-darken * 2);
    z-index: $menu-bar-item-hover-zindex;
    position: relative;

    -moz-transition: background-position 0.1s linear;
    -webkit-transition: background-position 0.1s linear;
    background-position: 0 (-$gradient-shift);
  }
}
@mixin menu_bar_item_pressed{
  &:active, &.selected{
    border-color: #555; // Fallback
    border-color: rgba(0,0,0, $menu-bar-item-border-darken * 2);
    box-shadow: 0 -1px 1px rgba(255, 255, 255, 0.4) inset, 0 2px 2px rgba(0, 0, 0, .3) inset;
    z-index: $menu-bar-item-pressed-zindex;
    position: relative;
  }
}

@mixin menu_bar_item_disabled{
  @include button_colour(#fefefe, #dddede, $menu-bar-item-disabled-text-color, 0 1px 1px rgba(255, 255, 255, 0.75));
  cursor: default;

  &:active{
    box-shadow: none;
  }
}

@mixin menu_bar_item_default_colour{
  @include button_colour($menu-bar-item-light-colour, $menu-bar-item-dark-colour, $menu-bar-item-text-color, 0 1px 1px rgba(255, 255, 255, 0.75));
}
@mixin menu_bar_item_danger_colour{
  @include button_colour(#EE5F5B, #BD362F);
{'fraction_non_alphanumeric': 0.1647681927011536, 'fraction_numerical': 0.03112529928172386, 'mean_word_length': 4.133705772811918, 'pattern_counts': {'":': 0, '<': 17, '<?xml version=': 0, '>': 21, 'https://': 0, 'lorem ipsum': 0, 'www.': 2, 'xml': 4}, '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': '124389', 'n_tokens_mistral': 5525, 'n_tokens_neox': 4994, 'n_words': 1034}