<commit_before>/*
 * Copyright (C) 2013 - present Instructure, Inc.
 *
 * This file is part of Canvas.
 *
 * Canvas is free software: you can redistribute it and/or modify it under
 * the terms of the GNU Affero General Public License as published by the Free
 * Software Foundation, version 3 of the License.
 *
 * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
 * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
 * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
 * details.
 *
 * You should have received a copy of the GNU Affero General Public License along
 * with this program. If not, see <http://www.gnu.org/licenses/>.
 */

/*
@styleguide Highlights/Alerts


```html
<p>
  <div class="ic-flash-info">
    <div class="ic-flash__icon" aria-hidden="true">
      <i class="icon-info"></i>
    </div>
    Info: Sample flash notice style.
    <button type="button" class="Button Button--icon-action close_link">
      <i class="icon-x" aria-hidden="true"></i>
      <span class="screenreader-only">Close</span>
    </button>
  </div>
</p>
<p>
  <div class="ic-flash-success">
    <div class="ic-flash__icon" aria-hidden="true">
      <i class="icon-check"></i>
    </div>
    Success: Sample flash notice style.
    <button type="button" class="Button Button--icon-action close_link">
      <i class="icon-x" aria-hidden="true"></i>
      <span class="screenreader-only">Close</span>
    </button>
  </div>
</p>
<p>
  <div class="ic-flash-warning">
    <div class="ic-flash__icon" aria-hidden="true">
      <i class="icon-warning"></i>
    </div>
    Warning: Sample flash notice style.
    <button type="button" class="Button Button--icon-action close_link">
      <i class="icon-x" aria-hidden="true"></i>
      <span class="screenreader-only">Close</span>
    </button>
  </div>
</p>
<p>
  <div class="ic-flash-error">
    <div class="ic-flash__icon" aria-hidden="true">
      <i class="icon-warning"></i>
    </div>
    Error: Sample flash notice style.
    <button type="button" class="Button Button--icon-action close_link">
      <i class="icon-x" aria-hidden="true"></i>
      <span class="screenreader-only">Close</span>
    </button>
  </div>
</p>
```

*/

// Alerts
////////////////////////


// Base styles

.alert {
  padding: direction-sides($ic-sp $ic-sp*3 $ic-sp $ic-sp);
  background-color: $ic-bg-light-alert;
  border-radius: $ic-border-radius;
  color: $ic-bg-light-alert-text;

  @if $use_high_contrast {
    border: 1px solid $ic-bg-light-alert-text;
  }
}
.alert h4 {
  margin: 0;
}

// Adjust close link position

.alert .close {
  position: relative;
  top: -2px;
  #{direction(right)}: -21px;
  line-height: $baseLineHeight;
}

// Alternate State Colors

.alert-success {
  background-color: $ic-bg-light-success;
  color: $ic-bg-light-success-text;

  @if $use_high_contrast {
    border: 1px solid $ic-bg-light-success-text;
  }
}
.alert-danger,
.alert-error {
  background-color: $ic-bg-light-danger;
  color: $ic-bg-light-danger-text;

  @if $use_high_contrast {
    border: 1px solid $ic-bg-light-danger-text;
  }
}
.alert-info {
  background-color: $ic-bg-light-primary;
  color: $ic-bg-light-primary-text;

  @if $use_high_contrast {
    border: 1px solid $ic-bg-light-primary-text;
  }
}

//// end Alerts

//// Flash Notifications
////////////////////////

.ic-flash-info, .ic-flash-success, .ic-flash-warning, .ic-flash-error {
  position: relative;
  box-sizing: border-box;
  padding: direction-sides($ic-sp/2 40px $ic-sp/2 $ic-sp*4);
  margin: 0 auto;
  width: 475px;
  min-height: 20px;
  line-height: 1.3;
  z-index: 2;
  vertical-align: middle;
  box-shadow: 0 1px 8px rgba(black, 0.25);
  border: 2px solid;
  border-radius: $baseBorderRadius*2;
  background-color: $ic-color-light;

  .close_link {
    position: absolute;
    #{direction(right)}: $ic-sp/3;
    top: 50%;
    margin-top: -12px;
    text-decoration: none;
  }

  &.no_close .close_link {
    display: none;
  }

  .ic-flash__icon {
    position: absolute;
    top: 0;
    #{direction(left)}: 0;
    width: $ic-sp*3;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: $ic-color-light;

    i[class*=icon-],
    i[class^=icon-] {
      &:before {
        #{direction(left)}: -1px; // account for left border, so icon looks centered
      }
    }

  }

  &.ic-flash-static {
    width: auto;
    border-radius: 0; // corners look bad when msg is full-width
  }
}

.ic-flash-info {
  border-color: var(--ic-brand-primary);
  .ic-flash__icon { background-color: var(--ic-brand-primary); }
}

.ic-flash-success {
  border-color: $ic-color-success;
  .ic-flash__icon { background-color: $ic-color-success; }
}

.ic-flash-warning {
  border-color: $ic-color-alert;
  .ic-flash__icon { background-color: $ic-color-alert; }
}

.ic-flash-error {
  border-color: $ic-color-danger;
  .ic-flash__icon { background-color: $ic-color-danger; }
}

.ic-flash--Theme-Editor {
  border-color: $ic-color-dark;
  text-align: center; // need this or text is obscured by theme editor sidebar
  .ic-flash__icon { background-color: $ic-color-dark; }
}

.ic-flash__headline {
  margin: 0;
  font-weight: bold;
}
<commit_msg>address alerts cutting off on smaller viewports<commit_after>/*
 * Copyright (C) 2013 - present Instructure, Inc.
 *
 * This file is part of Canvas.
 *
 * Canvas is free software: you can redistribute it and/or modify it under
 * the terms of the GNU Affero General Public License as published by the Free
 * Software Foundation, version 3 of the License.
 *
 * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
 * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
 * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
 * details.
 *
 * You should have received a copy of the GNU Affero General Public License along
 * with this program. If not, see <http://www.gnu.org/licenses/>.
 */

/*
@styleguide Highlights/Alerts


```html
<p>
  <div class="ic-flash-info">
    <div class="ic-flash__icon" aria-hidden="true">
      <i class="icon-info"></i>
    </div>
    Info: Sample flash notice style.
    <button type="button" class="Button Button--icon-action close_link">
      <i class="icon-x" aria-hidden="true"></i>
      <span class="screenreader-only">Close</span>
    </button>
  </div>
</p>
<p>
  <div class="ic-flash-success">
    <div class="ic-flash__icon" aria-hidden="true">
      <i class="icon-check"></i>
    </div>
    Success: Sample flash notice style.
    <button type="button" class="Button Button--icon-action close_link">
      <i class="icon-x" aria-hidden="true"></i>
      <span class="screenreader-only">Close</span>
    </button>
  </div>
</p>
<p>
  <div class="ic-flash-warning">
    <div class="ic-flash__icon" aria-hidden="true">
      <i class="icon-warning"></i>
    </div>
    Warning: Sample flash notice style.
    <button type="button" class="Button Button--icon-action close_link">
      <i class="icon-x" aria-hidden="true"></i>
      <span class="screenreader-only">Close</span>
    </button>
  </div>
</p>
<p>
  <div class="ic-flash-error">
    <div class="ic-flash__icon" aria-hidden="true">
      <i class="icon-warning"></i>
    </div>
    Error: Sample flash notice style.
    <button type="button" class="Button Button--icon-action close_link">
      <i class="icon-x" aria-hidden="true"></i>
      <span class="screenreader-only">Close</span>
    </button>
  </div>
</p>
```

*/

// Alerts
////////////////////////


// Base styles

.alert {
  padding: direction-sides($ic-sp $ic-sp*3 $ic-sp $ic-sp);
  background-color: $ic-bg-light-alert;
  border-radius: $ic-border-radius;
  color: $ic-bg-light-alert-text;

  @if $use_high_contrast {
    border: 1px solid $ic-bg-light-alert-text;
  }
}
.alert h4 {
  margin: 0;
}

// Adjust close link position

.alert .close {
  position: relative;
  top: -2px;
  #{direction(right)}: -21px;
  line-height: $baseLineHeight;
}

// Alternate State Colors

.alert-success {
  background-color: $ic-bg-light-success;
  color: $ic-bg-light-success-text;

  @if $use_high_contrast {
    border: 1px solid $ic-bg-light-success-text;
  }
}
.alert-danger,
.alert-error {
  background-color: $ic-bg-light-danger;
  color: $ic-bg-light-danger-text;

  @if $use_high_contrast {
    border: 1px solid $ic-bg-light-danger-text;
  }
}
.alert-info {
  background-color: $ic-bg-light-primary;
  color: $ic-bg-light-primary-text;

  @if $use_high_contrast {
    border: 1px solid $ic-bg-light-primary-text;
  }
}

//// end Alerts

//// Flash Notifications
////////////////////////

.ic-flash-info, .ic-flash-success, .ic-flash-warning, .ic-flash-error {
  position: relative;
  box-sizing: border-box;
  padding: direction-sides($ic-sp/2 40px $ic-sp/2 $ic-sp*4);
  margin: 0 auto;
  width: 475px;
  min-height: 20px;
  line-height: 1.3;
  z-index: 2;
  vertical-align: middle;
  box-shadow: 0 1px 8px rgba(black, 0.25);
  border: 2px solid;
  border-radius: $baseBorderRadius*2;
  background-color: $ic-color-light;

  .close_link {
    position: absolute;
    #{direction(right)}: $ic-sp/3;
    top: 50%;
    margin-top: -12px;
    text-decoration: none;
  }

  &.no_close .close_link {
    display: none;
  }

  .ic-flash__icon {
    position: absolute;
    top: 0;
    #{direction(left)}: 0;
    width: $ic-sp*3;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: $ic-color-light;

    i[class*=icon-],
    i[class^=icon-] {
      &:before {
        #{direction(left)}: -1px; // account for left border, so icon looks centered
      }
    }

  }

  &.ic-flash-static {
    width: auto;
    border-radius: 0; // corners look bad when msg is full-width
  }
}

.responsive_2020_03 .ic-flash-info, .ic-flash-success, .ic-flash-warning, .ic-flash-error {
  width: auto; // purely to override the 475 in the original class
  min-width: 17rem; // designs minimum width minus the spacing they want
  max-width: 59rem; // design has a max-width they want content to display
  margin: 0 $ic-sp*2;
}

.ic-flash-info {
  border-color: var(--ic-brand-primary);
  .ic-flash__icon { background-color: var(--ic-brand-primary); }
}

.ic-flash-success {
  border-color: $ic-color-success;
  .ic-flash__icon { background-color: $ic-color-success; }
}

.ic-flash-warning {
  border-color: $ic-color-alert;
  .ic-flash__icon { background-color: $ic-color-alert; }
}

.ic-flash-error {
  border-color: $ic-color-danger;
  .ic-flash__icon { background-color: $ic-color-danger; }
}

.ic-flash--Theme-Editor {
  border-color: $ic-color-dark;
  text-align: center; // need this or text is obscured by theme editor sidebar
  .ic-flash__icon { background-color: $ic-color-dark; }
}

.ic-flash__headline {
  margin: 0;
  font-weight: bold;
}

{'fraction_non_alphanumeric': 0.16924778761061948, 'fraction_numerical': 0.010785398230088495, 'mean_word_length': 2.9566010211524434, 'pattern_counts': {'":': 0, '<': 117, '<?xml version=': 0, '>': 117, 'https://': 0, 'lorem ipsum': 0, 'www.': 2, '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': '6945865', 'n_tokens_mistral': 3957, 'n_tokens_neox': 3812, 'n_words': 928}