Contents

//
// Customizable variables
//

$meyasubako-color: #39c !default;

.meyasubako {
  //
  // Functions
  //

  @function whiten($color, $weight) {
    @return mix($color, #fff, 100% - $weight);
  }

  //
  // Variables
  //

  $base-color: darken(mix(#333, $meyasubako-color), 10%);

  //
  // Styles
  //

  position: fixed;
  bottom: 0;
  right: 20px;
  width: 240px;
  background-color: #fff;
  color: $base-color;
  font-size: 16px;
  font-family:'Helvetica Neue', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
  line-height: 1.5;

  * {
    box-sizing: border-box;
  }

  &__heading {
    cursor: pointer;
    margin: 0;
    padding: 8px 0 8px 16px;
    border-radius: 2px 2px 0 0;
    background-color: $meyasubako-color;
    color: #fff;
    font-size: 80%;
    font-weight: normal;
    transition: 200ms;

    &:hover {
      background-color: darken($meyasubako-color, 5%);
      color: darken(#fff, 5%);
    }
  }

  &__container {
    display: none;
    overflow: hidden;
    padding: 16px;
    border-right: 1px solid whiten($base-color, 80%);
    border-left: 1px solid whiten($base-color, 80%);
  }

  &__message__container {
    display: none;
    margin-bottom: 8px;
    padding: 8px;
    border-radius: 2px;
    background-color: whiten($meyasubako-color, 95%);
    color: $meyasubako-color;
    font-size: 70%;
  }

  &__message {
    margin: 0;
  }

  &__message--success {
    display: none;
  }

  &__content {
    resize: none;
    width: 100%;
    height: 120px;
    margin-bottom: 8px;
    padding: 8px;
    border: 1px solid whiten($base-color, 80%);
    border-radius: 2px;
    color: $base-color;
    font-size: 80%;
    vertical-align: bottom;
  }

  &__submit {
    cursor: pointer;
    float: right;
    padding: 8px 16px;
    border: none;
    border-radius: 2px;
    background-color: $meyasubako-color;
    color: #fff;
    transition: 200ms;

    &:hover {
      background-color: darken($meyasubako-color, 5%);
      color: darken(#fff, 5%);
    }
  }
}

Version data entries

1 entries across 1 versions & 1 rubygems

Version	Path
meyasubako-0.1.0	app/assets/stylesheets/meyasubako.scss