feat(icon): fix checkmark color in checkbox

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/seekinternational/seek-asia-style-guide.git/'


remove cursor:pointer from server group hover state

@import "app/bower_components/bootstrap/less/variables.less";
@import "app/styles/colors.less";

.application-header {
  h2 {
    a {
      font-size: 75%;
      display: inline-block;
      margin-right: 20px;
    }
    font-weight: 700;
    display: inline-block;
  }
  ul {
    display: inline-block;
    vertical-align: bottom;
    margin-left: 50px;
    text-transform: uppercase;
    font-size: 110%;
    & > li > a {
      border-radius: 0;
    }
    a.active {
      border-bottom: 3px solid @link-color;
    }
  }
  padding-bottom: 0;
  border-bottom: 1px solid @mid_light_grey;
  margin-top: 10px;
}

.server-group {
  border: 1px solid #c4c4c4;
  border-radius: 5px;
  padding: 0;
  margin: 15px 0;
  background-color: #f1f1f1;

  .server-group-summary {
    font-size: 110%;
    padding: 10px;
  }
  .server-group-details {
    padding: 5px 10px;
    border-left: 1px solid #c4c4c4;
    background-color: #ffffff;
    border-radius: 0 5px 5px 0;

    .build-title {
      font-size: 110%;
      padding-bottom: 3px;
    }
  }

  .glyphicon-th {
    color: @healthy_green_icon;
  }

  &.active, &:hover {
    border-color: #121212;
  }

  &.unhealthy {
    border-style: dashed;

  }

  a.instance {
    border: 1px solid @healthy_green_border;
    border-radius: 2px;
    margin-right: 5px;
    display: inline-block;
    width: 15px;
    height: 15px;
    background-color: @healthy_green;

    &.health-status-Healthy {
      background-color: @healthy_green;
      border-color: @healthy_green_border;
    }
    &.health-status-Unhealthy {
      background-color: @unhealthy_red;
      border-color: @unhealthy_red_border;
    }
    &.health-status-Unknown {
      background-color: @light_grey;
      border-color: @mid_grey;
    }

    &.active {
      border-color: @dark_grey;
      background-color: @healthy_green_border;
      &.unhealthy {
        background-color: @unhealthy_red_border;
      }
    }
  }
}

.actions {
  margin-bottom: 10px;
}

.glyphicon {
  &.healthy {
    color: @healthy_green_border;
  }
  &.unhealthy {
    color: @unhealthy_red;
  }
  &.unknown {
    color: @mid_grey;
  }
}

.instance-health-counts {
  display: inline-block;
  padding-left: 5px;

  .glyphicon {
    &:before {
      font-size: 75%;
    }
  }
}

@import "app/bower_components/bootstrap/less/variables.less";
@import "app/styles/colors.less";

.application-header {
  h2 {
    a {
      font-size: 75%;
      display: inline-block;
      margin-right: 20px;
    }
    font-weight: 700;
    display: inline-block;
  }
  ul {
    display: inline-block;
    vertical-align: bottom;
    margin-left: 50px;
    text-transform: uppercase;
    font-size: 110%;
    & > li > a {
      border-radius: 0;
    }
    a.active {
      border-bottom: 3px solid @link-color;
    }
  }
  padding-bottom: 0;
  border-bottom: 1px solid @mid_light_grey;
  margin-top: 10px;
}

.server-group {
  border: 1px solid #c4c4c4;
  border-radius: 5px;
  padding: 0;
  margin: 15px 0;
  background-color: #f1f1f1;

  .server-group-summary {
    font-size: 110%;
    padding: 10px;
  }
  .server-group-details {
    padding: 5px 10px;
    border-left: 1px solid #c4c4c4;
    background-color: #ffffff;
    border-radius: 0 5px 5px 0;

    .build-title {
      font-size: 110%;
      padding-bottom: 3px;
    }
  }

  .glyphicon-th {
    color: @healthy_green_icon;
  }

  &.active, &:hover {
    border-color: #121212;
  }

  &:hover {
    cursor: pointer;
  }

  &.unhealthy {
    border-style: dashed;

  }

  a.instance {
    border: 1px solid @healthy_green_border;
    border-radius: 2px;
    margin-right: 5px;
    display: inline-block;
    width: 15px;
    height: 15px;
    background-color: @healthy_green;

    &.health-status-Healthy {
      background-color: @healthy_green;
      border-color: @healthy_green_border;
    }
    &.health-status-Unhealthy {
      background-color: @unhealthy_red;
      border-color: @unhealthy_red_border;
    }
    &.health-status-Unknown {
      background-color: @light_grey;
      border-color: @mid_grey;
    }

    &.active {
      border-color: @dark_grey;
      background-color: @healthy_green_border;
      &.unhealthy {
        background-color: @unhealthy_red_border;
      }
    }
  }
}

.actions {
  margin-bottom: 10px;
}

.glyphicon {
  &.healthy {
    color: @healthy_green_border;
  }
  &.unhealthy {
    color: @unhealthy_red;
  }
  &.unknown {
    color: @mid_grey;
  }
}

.instance-health-counts {
  display: inline-block;
  padding-left: 5px;

  .glyphicon {
    &:before {
      font-size: 75%;
    }
  }
}


Messages width fix

Messages width fix

/* === Messages === */
.messages-content {
    background: #fff;

}
.messages {
    .flexbox();
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
}
.messages-date, .message {
    .flex-shrink(0);
}
.messages-date {
    color: #8e8e93;
    font-weight: 500;
    font-size: 11px;
    text-align: center;
    line-height: 1;
    margin: 20px 15px 10px;
    span {
        font-weight: 400;
    }
}
.message {
    font-size: 17px;
    line-height: 1.2;
    padding: 8px 12px;
    border-radius: 18px;
    margin-bottom: 10px;
    max-width: 60%;
    .border-box();
    position: relative;
    &+.message-date {
        margin-top: 10px;
    }
    &.message-pic {
        padding: 0;
        img {
            max-width: 100%;
            height: auto;
            display: block;
            border-radius: 18px;
        }
    }
}
.message-last {
    &:before {
        position: absolute;
        bottom: 9px;
        content: ' ';
        height: ~"-webkit-calc(100% - 9px)";
        height: ~"-moz-calc(100% - 9px)";
        height: ~"-ms-calc(100% - 9px)";
        height: ~"calc(100% - 9px)";
        width: 6px;
        background: #fff;
    }
}
.message-sent {
    background: #00d449;
    color: #fff;
    margin-right: 15px;
    .align-self(flex-end);
    +.sent {
        margin-top: -9px;
    }
    &:before {
        right: 0;
    }
    &.message-last {
        margin-right: 9px;
        padding-right: 18px;
        border-bottom-right-radius:0;
        border-top-right-radius:0;
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAiCAYAAAApkEs2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NDkxMSwgMjAxMy8xMC8yOS0xMTo0NzoxNiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6ODA5QzE4MzFBM0Q1MTFFMzhBMzNDREY2NTgxNjQxQzQiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6ODA5QzE4MzBBM0Q1MTFFMzhBMzNDREY2NTgxNjQxQzQiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ODJENjA2RTlBM0NCMTFFMzhBMzNDREY2NTgxNjQxQzQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6ODJENjA2RUFBM0NCMTFFMzhBMzNDREY2NTgxNjQxQzQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz55hwj/AAACXElEQVR42syXwWvTUBzHf3lJl4aWQneIaBHnTWadoLCx2zxOYV7Gpn/F0KswHHjwHxD8B8bSMbeD7LI58LhDb07nRdDDGLRJ2jRtk7R5qb/XLdKKrCnY5n0v70fKK5/83u99f78I5+e6CD0iREgBCGxNCoKg4HpdFMUHokimcX0oSSKuJIW/9e0btYSzs9LwmwQAhM4kEhPTsiytyfLEY4TPcAf6L2GmM4qSfKEo8ksWcwvaK1mWb6XTyX3M9N3/9Z9kFMfked4vw7Dy5XLlmuu2jrkFDdVu+yXTtOZNs5anNKhxCxrKdb2v5bI52Wy6GtegTEHQodWq/bxSsec7HaDcgoZyHPdY1ys3hi2FsYOGtavrVdX3aY1rUCZKqYewk1FhYwO9qNuAGkZVjVIGsYJeZDbwEPYmXjaXa1AmdvzoBne4Bw27mW03X3MPylSvNzdaLf8n96Ad7ASWZc9xDxp6LGb2HfeglyWw9rcLcAnK5oJGw3nLPSgTgr7BmqXcg7KuhWPh+6E/RRqNOhSLxb5nMzP3IZvNjgxWkqSMqmatbhx1k6Ztwfr6q75nm5sFWFh4NMKO5deYCyQSkhr56Le3tVhKwHG8jcg1enr6DU5OvsTUWls7kUELBa23bsY9sJSYpw4ExQEXdne7LwW5XA7y+Xtjb6vtdvvHQNCjo09gGHo3Xl5eBULG72h4oT6TwZdo60+8srIa17z68UpQ0zTh8PCgG8/OzsHU1O24vq++Xwm6t/eBedllNp/F2fsdEsU7FUWBpaWncYJaJIp3Li4+gVQqHedA7f8WYAADrilxQht6tQAAAABJRU5ErkJggg==), url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAASCAYAAAAg9DzcAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NDkxMSwgMjAxMy8xMC8yOS0xMTo0NzoxNiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6ODA5QzE4MzVBM0Q1MTFFMzhBMzNDREY2NTgxNjQxQzQiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6ODA5QzE4MzRBM0Q1MTFFMzhBMzNDREY2NTgxNjQxQzQiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ODJENjA2RTVBM0NCMTFFMzhBMzNDREY2NTgxNjQxQzQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6ODJENjA2RTZBM0NCMTFFMzhBMzNDREY2NTgxNjQxQzQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4ODJXsAAAA/klEQVR42mL8//8/wyAAf4CYmRiFjIPEwd+BmGMoOfg+ECsQo5CJYXCAE8QqHCwh7A7EO4aSg/mA+ONQcjAIvARisaGShkGgcaiFMFHF22AKYRAopncIgzLPJwrN+Ag1h6YhDKpWl0Mtu09M5sEDVPHKgkKYQqwNxB//Y4LtQMxHppkR/3EAShwqBsRX/hMG5Dp8CrUcLE+kQ9HBFWhsUORoYjWCQqgeR9STCj5CHSJPpN3uQPwHphlXKQHKpVpAHAPEsfhyLYXgBxDfBeLVQLwAiJ8A8V8c7rkIatGBHJwFdZwDEMsCMTexjWkaeuIFEN+AeuYalAaVQPkAAQYAP5mMQHmGVYEAAAAASUVORK5CYII=);
        background-repeat: no-repeat, no-repeat;
        background-position: ~"-webkit-calc(100% - 6px)" top, right bottom;
        background-position: ~"-moz-calc(100% - 6px)" top, right bottom;
        background-position: ~"-ms-calc(100% - 6px)" top, right bottom;
        background-position: ~"calc(100% - 6px)" top, right bottom;
        -webkit-background-size: 21px 17px, 22px 9px;
        background-size: 21px 17px, 22px 9px;
    }
}
.message-received {
    background: #e5e5ea;
    color: #000000;
    margin-left: 15px;
    .align-self(flex-start);
    +.received {
        margin-top: -9px;
    }
    &:before {
        left: 0;
    }
    &.message-last {
        margin-left: 9px;
        padding-left: 18px;
        border-bottom-left-radius:0;
        border-top-left-radius:0;
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAiCAYAAAApkEs2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NDkxMSwgMjAxMy8xMC8yOS0xMTo0NzoxNiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjgyRDYwNkU5QTNDQjExRTM4QTMzQ0RGNjU4MTY0MUM0IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjgyRDYwNkVBQTNDQjExRTM4QTMzQ0RGNjU4MTY0MUM0Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ODJENjA2RTdBM0NCMTFFMzhBMzNDREY2NTgxNjQxQzQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6ODJENjA2RThBM0NCMTFFMzhBMzNDREY2NTgxNjQxQzQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5n292+AAACS0lEQVR42syXS0vcUBTHjyFQBoVCF26Ggi4KLnQ3KJR+ARF0I2PB7qTfowoFV5YuCv0GVfGxELrwAS7dKI51RjeFuhLDJJm8JrnJTey5tqADYm7G3Nw5m3vJa35zHv9zbt8tGhRo+HNxHCcepXEDN8e4Z+tJktxe4z0f1wCfAly9h++posEQxCYk/EkI/RpFIYOyu3GNEFD0lu37ZMX3gy9sn8c3cwVFz9VdN5gihFzl/edzAQ2C8MhxvJkoopqoFFKfm3+W5b4NAlIXnetdg7bbwaptux+wOuMi1ELNLi8Qt1rOOyyUoyJlTc0aasOw3ojMxWeDMpnRdWsQdZCABFN5IZvN1qskSWKQZApPuHW9NSgTMhWU9V2EfI2wBCTbk6Cm6Yzk1QKFgTpO+5OIVtit9T025oUh/YMhHy54AszuUctyJnoJ8lFQ121/kyHomULPqlzT9IGi+nfXHvU8f7kXITs8ys4yNzfGC9nCnupRHNu+9ypkh0c1zXxJKRUm7qZpwtlZreNapVKB/v4B/qGEVblISGa12inMz891XFta+gwLCx/5Q48nxkUZ4VxfX82Wo3h63JABen7+Cy4uGnygTDtx8ChU4FX1fgxeW+PzqhJF0e+i2+Xo6BiUy+W7/dbWBs68MQ8oPSxcExUFZmf/FZauN+HgYD/9HQz7joz8rFbnHhTVj3RQdPulDNChoWEYH5+42+/t7YJhGKnF5MvqNtXq+/+HRwrb25upoJYs0OnpGSiVSlyaqmDFU1mgrH1OTk5xaepfAQYA0kWHSm94TCcAAAAASUVORK5CYII=), url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAASCAYAAAAg9DzcAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NDkxMSwgMjAxMy8xMC8yOS0xMTo0NzoxNiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjgyRDYwNkU1QTNDQjExRTM4QTMzQ0RGNjU4MTY0MUM0IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjgyRDYwNkU2QTNDQjExRTM4QTMzQ0RGNjU4MTY0MUM0Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ODJENjA2RTNBM0NCMTFFMzhBMzNDREY2NTgxNjQxQzQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6ODJENjA2RTRBM0NCMTFFMzhBMzNDREY2NTgxNjQxQzQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4pdz+mAAABA0lEQVR42mL8DwQMxIG/QMzCMMCAkQQH/wBizqHk4AdArDjQDmYiQe0JhkEASAlhDyDeOZQczA/En4aKg18BsfhQShLZQDxtqDh4UBRnpJQSxQyDCBAK4U/QzEYJ4KNmZiUUwqoUmC0GxPeB+CMQLwdiZqq4+D9uEAEKfDIwHxBvx2LeRyDWJtNMOMbl4ClUdCg6uALEYtR0MKmO1YY6glQA0iNPiYP/ALE7kRrloR77+J9yADKjHhpDBO2GlRKglpg+jtwMyiwyQJwAxKFArAzEHDQqtUD2LwbiJUB8DZt7QA4G5eCJ0OIL5BgtKK0BxBI0dByxnYavQPwYiA+APAEQYAAOfZiHe++9yAAAAABJRU5ErkJggg==);
        background-repeat: no-repeat, no-repeat;
        background-position: 6px top, left bottom;
        -webkit-background-size: 21px 17px, 22px 9px;
        background-size: 21px 17px, 22px 9px;
    }
}

/* === Messages === */
.messages-content {
    background: #fff;

}
.messages {
    .flexbox();
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
}
.messages-date, .message {
    .flex-shrink(0);
}
.messages-date {
    color: #8e8e93;
    font-weight: 500;
    font-size: 11px;
    text-align: center;
    line-height: 1;
    margin: 20px 15px 10px;
    span {
        font-weight: 400;
    }
}
.message {
    font-size: 17px;
    line-height: 1.2;
    padding: 8px 12px;
    border-radius: 18px;
    margin-bottom: 10px;
    max-width: 50%;
    .border-box();
    position: relative;
    &+.message-date {
        margin-top: 10px;
    }
    &.message-pic {
        padding: 0;
        img {
            max-width: 100%;
            display: block;
            border-radius: 18px;
        }
    }
}
.message-last {
    &:before {
        position: absolute;
        bottom: 9px;
        content: ' ';
        height: ~"-webkit-calc(100% - 9px)";
        height: ~"-moz-calc(100% - 9px)";
        height: ~"-ms-calc(100% - 9px)";
        height: ~"calc(100% - 9px)";
        width: 6px;
        background: #fff;
    }
}
.message-sent {
    background: #00d449;
    color: #fff;
    margin-right: 15px;
    .align-self(flex-end);
    +.sent {
        margin-top: -9px;
    }
    &:before {
        right: 0;
    }
    &.message-last {
        margin-right: 9px;
        padding-right: 18px;
        border-bottom-right-radius:0;
        border-top-right-radius:0;
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAiCAYAAAApkEs2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NDkxMSwgMjAxMy8xMC8yOS0xMTo0NzoxNiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6ODA5QzE4MzFBM0Q1MTFFMzhBMzNDREY2NTgxNjQxQzQiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6ODA5QzE4MzBBM0Q1MTFFMzhBMzNDREY2NTgxNjQxQzQiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ODJENjA2RTlBM0NCMTFFMzhBMzNDREY2NTgxNjQxQzQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6ODJENjA2RUFBM0NCMTFFMzhBMzNDREY2NTgxNjQxQzQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz55hwj/AAACXElEQVR42syXwWvTUBzHf3lJl4aWQneIaBHnTWadoLCx2zxOYV7Gpn/F0KswHHjwHxD8B8bSMbeD7LI58LhDb07nRdDDGLRJ2jRtk7R5qb/XLdKKrCnY5n0v70fKK5/83u99f78I5+e6CD0iREgBCGxNCoKg4HpdFMUHokimcX0oSSKuJIW/9e0btYSzs9LwmwQAhM4kEhPTsiytyfLEY4TPcAf6L2GmM4qSfKEo8ksWcwvaK1mWb6XTyX3M9N3/9Z9kFMfked4vw7Dy5XLlmuu2jrkFDdVu+yXTtOZNs5anNKhxCxrKdb2v5bI52Wy6GtegTEHQodWq/bxSsec7HaDcgoZyHPdY1ys3hi2FsYOGtavrVdX3aY1rUCZKqYewk1FhYwO9qNuAGkZVjVIGsYJeZDbwEPYmXjaXa1AmdvzoBne4Bw27mW03X3MPylSvNzdaLf8n96Ad7ASWZc9xDxp6LGb2HfeglyWw9rcLcAnK5oJGw3nLPSgTgr7BmqXcg7KuhWPh+6E/RRqNOhSLxb5nMzP3IZvNjgxWkqSMqmatbhx1k6Ztwfr6q75nm5sFWFh4NMKO5deYCyQSkhr56Le3tVhKwHG8jcg1enr6DU5OvsTUWls7kUELBa23bsY9sJSYpw4ExQEXdne7LwW5XA7y+Xtjb6vtdvvHQNCjo09gGHo3Xl5eBULG72h4oT6TwZdo60+8srIa17z68UpQ0zTh8PCgG8/OzsHU1O24vq++Xwm6t/eBedllNp/F2fsdEsU7FUWBpaWncYJaJIp3Li4+gVQqHedA7f8WYAADrilxQht6tQAAAABJRU5ErkJggg==), url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAASCAYAAAAg9DzcAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NDkxMSwgMjAxMy8xMC8yOS0xMTo0NzoxNiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6ODA5QzE4MzVBM0Q1MTFFMzhBMzNDREY2NTgxNjQxQzQiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6ODA5QzE4MzRBM0Q1MTFFMzhBMzNDREY2NTgxNjQxQzQiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ODJENjA2RTVBM0NCMTFFMzhBMzNDREY2NTgxNjQxQzQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6ODJENjA2RTZBM0NCMTFFMzhBMzNDREY2NTgxNjQxQzQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4ODJXsAAAA/klEQVR42mL8//8/wyAAf4CYmRiFjIPEwd+BmGMoOfg+ECsQo5CJYXCAE8QqHCwh7A7EO4aSg/mA+ONQcjAIvARisaGShkGgcaiFMFHF22AKYRAopncIgzLPJwrN+Ag1h6YhDKpWl0Mtu09M5sEDVPHKgkKYQqwNxB//Y4LtQMxHppkR/3EAShwqBsRX/hMG5Dp8CrUcLE+kQ9HBFWhsUORoYjWCQqgeR9STCj5CHSJPpN3uQPwHphlXKQHKpVpAHAPEsfhyLYXgBxDfBeLVQLwAiJ8A8V8c7rkIatGBHJwFdZwDEMsCMTexjWkaeuIFEN+AeuYalAaVQPkAAQYAP5mMQHmGVYEAAAAASUVORK5CYII=);
        background-repeat: no-repeat, no-repeat;
        background-position: ~"-webkit-calc(100% - 6px)" top, right bottom;
        background-position: ~"-moz-calc(100% - 6px)" top, right bottom;
        background-position: ~"-ms-calc(100% - 6px)" top, right bottom;
        background-position: ~"calc(100% - 6px)" top, right bottom;
        -webkit-background-size: 21px 17px, 22px 9px;
        background-size: 21px 17px, 22px 9px;
    }
}
.message-received {
    background: #e5e5ea;
    color: #000000;
    margin-left: 15px;
    .align-self(flex-start);
    +.received {
        margin-top: -9px;
    }
    &:before {
        left: 0;
    }
    &.message-last {
        margin-left: 9px;
        padding-left: 18px;
        border-bottom-left-radius:0;
        border-top-left-radius:0;
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAiCAYAAAApkEs2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NDkxMSwgMjAxMy8xMC8yOS0xMTo0NzoxNiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjgyRDYwNkU5QTNDQjExRTM4QTMzQ0RGNjU4MTY0MUM0IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjgyRDYwNkVBQTNDQjExRTM4QTMzQ0RGNjU4MTY0MUM0Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ODJENjA2RTdBM0NCMTFFMzhBMzNDREY2NTgxNjQxQzQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6ODJENjA2RThBM0NCMTFFMzhBMzNDREY2NTgxNjQxQzQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5n292+AAACS0lEQVR42syXS0vcUBTHjyFQBoVCF26Ggi4KLnQ3KJR+ARF0I2PB7qTfowoFV5YuCv0GVfGxELrwAS7dKI51RjeFuhLDJJm8JrnJTey5tqADYm7G3Nw5m3vJa35zHv9zbt8tGhRo+HNxHCcepXEDN8e4Z+tJktxe4z0f1wCfAly9h++posEQxCYk/EkI/RpFIYOyu3GNEFD0lu37ZMX3gy9sn8c3cwVFz9VdN5gihFzl/edzAQ2C8MhxvJkoopqoFFKfm3+W5b4NAlIXnetdg7bbwaptux+wOuMi1ELNLi8Qt1rOOyyUoyJlTc0aasOw3ojMxWeDMpnRdWsQdZCABFN5IZvN1qskSWKQZApPuHW9NSgTMhWU9V2EfI2wBCTbk6Cm6Yzk1QKFgTpO+5OIVtit9T025oUh/YMhHy54AszuUctyJnoJ8lFQ121/kyHomULPqlzT9IGi+nfXHvU8f7kXITs8ys4yNzfGC9nCnupRHNu+9ypkh0c1zXxJKRUm7qZpwtlZreNapVKB/v4B/qGEVblISGa12inMz891XFta+gwLCx/5Q48nxkUZ4VxfX82Wo3h63JABen7+Cy4uGnygTDtx8ChU4FX1fgxeW+PzqhJF0e+i2+Xo6BiUy+W7/dbWBs68MQ8oPSxcExUFZmf/FZauN+HgYD/9HQz7joz8rFbnHhTVj3RQdPulDNChoWEYH5+42+/t7YJhGKnF5MvqNtXq+/+HRwrb25upoJYs0OnpGSiVSlyaqmDFU1mgrH1OTk5xaepfAQYA0kWHSm94TCcAAAAASUVORK5CYII=), url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAASCAYAAAAg9DzcAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NDkxMSwgMjAxMy8xMC8yOS0xMTo0NzoxNiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjgyRDYwNkU1QTNDQjExRTM4QTMzQ0RGNjU4MTY0MUM0IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjgyRDYwNkU2QTNDQjExRTM4QTMzQ0RGNjU4MTY0MUM0Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ODJENjA2RTNBM0NCMTFFMzhBMzNDREY2NTgxNjQxQzQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6ODJENjA2RTRBM0NCMTFFMzhBMzNDREY2NTgxNjQxQzQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4pdz+mAAABA0lEQVR42mL8DwQMxIG/QMzCMMCAkQQH/wBizqHk4AdArDjQDmYiQe0JhkEASAlhDyDeOZQczA/En4aKg18BsfhQShLZQDxtqDh4UBRnpJQSxQyDCBAK4U/QzEYJ4KNmZiUUwqoUmC0GxPeB+CMQLwdiZqq4+D9uEAEKfDIwHxBvx2LeRyDWJtNMOMbl4ClUdCg6uALEYtR0MKmO1YY6glQA0iNPiYP/ALE7kRrloR77+J9yADKjHhpDBO2GlRKglpg+jtwMyiwyQJwAxKFArAzEHDQqtUD2LwbiJUB8DZt7QA4G5eCJ0OIL5BgtKK0BxBI0dByxnYavQPwYiA+APAEQYAAOfZiHe++9yAAAAABJRU5ErkJggg==);
        background-repeat: no-repeat, no-repeat;
        background-position: 6px top, left bottom;
        -webkit-background-size: 21px 17px, 22px 9px;
        background-size: 21px 17px, 22px 9px;
    }
}


iOS6 messages fix

iOS6 messages fix

/* === Messages === */
.messages-content {
    background: #fff;
}
.messages {
    .flexbox();
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}
.messages-date {
    text-align: center;
    font-weight: 500;
    font-size: 11px;
    line-height: 1;
    margin: 10px 15px;
    color: #8e8e93;
    span {
        font-weight: 400;
    }
}
.message {
    .border-box();
    font-size: 17px;
    line-height: 1.2;
    margin: 1px 10px 0;
    padding: 6px 16px 9px;
    min-width: 48px;
    min-height: 35px;
    max-width: 60%;
    border-radius: 16px;
    &.message-pic {
        padding: 0;
        background: none;
        img {
            display: block;
            height: auto;
            max-width: 100%;
            border-radius: 16px;
        }
    }
}
.message-sent {
    padding-right: 22px;
    -ms-flex-item-align: end;
    -webkit-align-self: flex-end;
    align-self: flex-end;
    background-color: #00d449;
    color: white;
    margin-left: auto;
    -webkit-mask-box-image: url("data:image/svg+xml;charset=utf-8,<svg height='35' viewBox='0 0 96 70' width='48' xmlns='http://www.w3.org/2000/svg'><path d='m84 35c1 7-5 37-42 35-37 2-43-28-42-35-1-7 5-37 42-35 37-2 43 28 42 35z'/></svg>") 49.5% 55.75% 49.5% 43.25%;
    &.message-last {
        border-radius: 16px 16px 0 16px;
        margin-bottom: 8px;
        -webkit-mask-box-image: url("data:image/svg+xml;charset=utf-8,<svg height='35' viewBox='0 0 96 70' width='48' xmlns='http://www.w3.org/2000/svg'><path d='m84 35c1 7-5 37-42 35-37 2-43-28-42-35-1-7 5-37 42-35 37-2 43 28 42 35z'/><path d='m96 70c-6-2-12-10-12-19v-16l-14 27s8 8 26 8z'/></svg>") 49.5% 55.75% 49.5% 43.25%;
        &.message-pic img{
            border-radius: 16px 16px 0 16px;
        }
    }
}
.message-received {
    padding-left: 22px;
    -ms-flex-item-align: start;
    -webkit-align-self: flex-start;
    align-self: flex-start;
    background-color: #e5e5ea;
    color: #000;
    -webkit-mask-box-image: url("data:image/svg+xml;charset=utf-8,<svg height='35' viewBox='0 0 96 70' width='48' xmlns='http://www.w3.org/2000/svg'><path d='m96 35c1 7-5 37-42 35-37 2-43-28-42-35-1-7 5-37 42-35 37-2 43 28 42 35z'/></svg>") 49.5% 43.25% 49.5% 55.75%;
    &.message-last {
        margin-bottom: 8px;
        border-radius: 16px 16px 16px 0;
        -webkit-mask-box-image: url("data:image/svg+xml;charset=utf-8,<svg height='35' viewBox='0 0 96 70' width='48' xmlns='http://www.w3.org/2000/svg'><path d='m96 35c1 7-5 37-42 35-37 2-43-28-42-35-1-7 5-37 42-35 37-2 43 28 42 35z'/><path d='m0 70c6-2 12-10 12-19v-16l14 27s-8 8-26 8z'/></svg>") 49.5% 43.25% 49.5% 55.75%;
        &.message-pic img{
            border-radius: 16px 16px 16px 0;
        }
    }
}
.message-appear {
    -webkit-animation: messageAppear 400ms;
    animation: messageAppear 400ms;
}
html.ios-6 {
    .message, .message.message-pic img {
        -webkit-mask-box-image:none;
        border-radius: 16px;
    }
}
@-webkit-keyframes messageAppear {
    from {
        -webkit-transform: translate3d(0,100%,0);
    }
    to {
        -webkit-transform: translate3d(0,0,0);
    }
}
@keyframes messageAppear {
    from {
        transform: translate3d(0,100%,0);
    }
    to {
        transform: translate3d(0,0,0);
    }
}

/* === Messages === */
.messages-content {
    background: #fff;
}
.messages {
    .flexbox();
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}
.messages-date {
    text-align: center;
    font-weight: 500;
    font-size: 11px;
    line-height: 1;
    margin: 10px 15px;
    color: #8e8e93;
    span {
        font-weight: 400;
    }
}
.message {
    .border-box();
    font-size: 17px;
    line-height: 1.2;
    margin: 1px 10px 0;
    padding: 6px 16px 9px;
    min-width: 48px;
    min-height: 35px;
    max-width: 60%;
    border-radius: 16px;
    &.message-pic {
        padding: 0;
        background: none;
        img {
            display: block;
            height: auto;
            max-width: 100%;
            border-radius: 16px;
        }
    }
}
.message-sent {
    padding-right: 22px;
    -ms-flex-item-align: end;
    -webkit-align-self: flex-end;
    align-self: flex-end;
    background-color: #00d449;
    color: white;
    margin-left: auto;
    -webkit-mask-box-image: url("data:image/svg+xml;charset=utf-8,<svg height='35' viewBox='0 0 96 70' width='48' xmlns='http://www.w3.org/2000/svg'><path d='m84 35c1 7-5 37-42 35-37 2-43-28-42-35-1-7 5-37 42-35 37-2 43 28 42 35z'/></svg>") 49.5% 55.75% 49.5% 43.25%;
    &.message-last {
        border-radius: 16px 16px 0 16px;
        margin-bottom: 8px;
        -webkit-mask-box-image: url("data:image/svg+xml;charset=utf-8,<svg height='35' viewBox='0 0 96 70' width='48' xmlns='http://www.w3.org/2000/svg'><path d='m84 35c1 7-5 37-42 35-37 2-43-28-42-35-1-7 5-37 42-35 37-2 43 28 42 35z'/><path d='m96 70c-6-2-12-10-12-19v-16l-14 27s8 8 26 8z'/></svg>") 49.5% 55.75% 49.5% 43.25%;
        &.message-pic img{
            border-radius: 16px 16px 0 16px;
        }
    }
}
.message-received {
    padding-left: 22px;
    -ms-flex-item-align: start;
    -webkit-align-self: flex-start;
    align-self: flex-start;
    background-color: #e5e5ea;
    color: #000;
    -webkit-mask-box-image: url("data:image/svg+xml;charset=utf-8,<svg height='35' viewBox='0 0 96 70' width='48' xmlns='http://www.w3.org/2000/svg'><path d='m96 35c1 7-5 37-42 35-37 2-43-28-42-35-1-7 5-37 42-35 37-2 43 28 42 35z'/></svg>") 49.5% 43.25% 49.5% 55.75%;
    &.message-last {
        margin-bottom: 8px;
        border-radius: 16px 16px 16px 0;
        -webkit-mask-box-image: url("data:image/svg+xml;charset=utf-8,<svg height='35' viewBox='0 0 96 70' width='48' xmlns='http://www.w3.org/2000/svg'><path d='m96 35c1 7-5 37-42 35-37 2-43-28-42-35-1-7 5-37 42-35 37-2 43 28 42 35z'/><path d='m0 70c6-2 12-10 12-19v-16l14 27s-8 8-26 8z'/></svg>") 49.5% 43.25% 49.5% 55.75%;
        &.message-pic img{
            border-radius: 16px 16px 16px 0;
        }
    }
}
.message-appear {
    -webkit-animation: messageAppear 400ms;
    animation: messageAppear 400ms;
}
@-webkit-keyframes messageAppear {
    from {
        -webkit-transform: translate3d(0,100%,0);
    }
    to {
        -webkit-transform: translate3d(0,0,0);
    }
}
@keyframes messageAppear {
    from {
        transform: translate3d(0,100%,0);
    }
    to {
        transform: translate3d(0,0,0);
    }
}


site: fix demo hover style

site: fix demo hover style

.code-box-expand-trigger {
  cursor: pointer;
  font-size: 14px;
  color: #9199AC;
  margin-left: 5px;
  opacity: .8;
  transition: all .3s ease;
  top: -2px;
  position: relative;

  &-active {
    color: #3B4357;
  }
}

.code-boxes-col-1-1 {
  width: 80%;
}

.code-boxes-col-2-1 {
  width: 48%;
  display: inline-block;
  vertical-align: top;
  padding-right: 8px;
}

.code-boxes-col-2-1:last-child {
  padding-right: 0;
  padding-left: 8px;
}

.code-box {
  border: 1px solid #E9E9E9;
  border-radius: 6px;
  display: inline-block;
  width: 100%;
  position: relative;
  margin: 0px 0 16px 0px;
  transition: all 0.5s ease;
}

.code-box:hover {
  border-color: #ccc;
}

.code-box.code-box-target {
  border: 1px solid rgba(45, 183, 245, 0.7);
  box-shadow: 0 0 4px rgba(45, 183, 245, 0.5);
}

.code-box:hover .code-box-meta,
.code-box:target .code-box-meta {
  background: #fbfbfb;
}

.code-box:hover .code-box-title,
.code-box:target .code-box-title {
  background: #fbfbfb;
  box-shadow: 0 -1.2px 0 #e9e9e9;
}

.code-box .code-box-title a,
.code-box .code-box-title a:hover {
  color: #666;
}

.code-box .code-box-demo {
  border-bottom: 1px solid #E9E9E9;
  padding: 42px 20px 50px;
}

.code-box iframe {
  width: 100%;
  border: 0;
}

.code-box-meta {
  position: relative;
  padding: 10px 15px;
  border-radius: 0 0 6px 6px;
  transition: background-color 0.4s ease;
  width: 100%;
}

.code-box-meta h4,
.code-box-meta p {
  margin: 0;
}

.code-box-title {
  position: absolute;
  top: -14px;
  padding: 1px 1.1em;
  color: #777;
  border-radius: 6px;
  background: #fff;
  transition: all 0.4s ease;
}

.code-box-title:before {
  font-family: anticon;
  content: "\e658";
  font-size: 16px;
  vertical-align: middle;
  line-height: 22px;
  position: relative;
  margin-right: 8px;
  top: -2px;
  color: #ccc;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  display: inline-block;
}

.code-box-meta > p {
  font-size: 12px;
  margin: 0.5em 0;
  padding-right: 25px;
  width: 100%;
  word-break: break-word;
}

.code-box .collapse {
  position: absolute;
  right: 16px;
  bottom: 18px;
  cursor: pointer;
  width: 18px;
  height: 18px;
  font-size: 18px;
  line-height: 18px;
  opacity: 0.5;
  text-align: center;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  transition: all 0.3s ease;
  color: #999;
  background: #fff;
  user-select: none;
}

.code-box.expand .collapse {
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

.code-box .collapse:hover {
  opacity: 1;
}

.code-box .highlight {
  overflow: hidden;
  padding: 5px;
  border-top: 1px dashed #e9e9e9;
}

.code-box pre {
  margin: 0;
  width: auto;
}

.code-box pre code {
  border: none;
  background: #fff;
}

.code-box-demo .demo-header {
  width: 100%;
  background: #ebedee;
  height: 30px;
}
.code-box-demo .demo-header ul {
  float: right;
  margin-right: 5px;
}
.code-box-demo .demo-header ul li {
  width: 50px;
  height: 30px;
  float: left;
  background: #e4e4e4;
  margin-left: 5px;
}
.code-box-demo .demo-header ul li:before {
  margin: 10px auto;
  width: 20px;
  height: 10px;
  background: #ebeded;
}
.code-box-demo .demo-header .logo {
  float: left;
  margin: 0px auto 0 10px;
  line-height: 32px;
}
.code-box-demo .demo-header .logo img{
  margin:auto
}
.code-box-demo .demo-header .logo span {
  display: block;
  float: right;
}
.code-box-demo .demo-content {
  width: 80%;
  margin: 10px auto;
}
.code-box-demo .demo-content .demo-title {
  text-align:left;
  background: #a4a4a4;
  width: 40%;
  height: 20px;
  line-height: 20px;
  color: #ebeded;
  text-indent:10px
}
.code-box-demo .demo-content .demo-listBox {
  margin-top: 10px;
}
.code-box-demo .demo-content .demo-listBox .demo-list .title {
  height: 30px;
  background: #cacaca;
  overflow: hidden;
}
.code-box-demo .demo-content .demo-listBox .demo-list .title:before,.code-box-demo .demo-content .demo-listBox .demo-list .title:after{
  width: 30%;
  height: 5px;
  background: #ebeded;
  float:left;
  margin:12px 35px 0;
}
.code-box-demo .demo-content .demo-listBox .demo-list .title:after{
  width:15%;
  float:right;
  margin:12px 10px 0;

}
.code-box-demo .demo-content .demo-listBox .demo-list ul li {
  height: 25px;
  background: #ebeded;
  border-bottom: 1px solid #cacaca;
  overflow: hidden;
  padding: 5px 15px;
}
.code-box-demo .demo-content .demo-listBox .demo-list ul li:before {
  width: 10px;
  height: 5px;
  background: #cacaca;
  float: left;
  margin-top:4px
}
.code-box-demo .demo-content .demo-listBox .demo-list ul li:after {
  width: 50%;
  height: 5px;
  background: #cacaca;
  float: left;
  margin-left: 10px;
  margin-top: 4px;
}
.code-box-demo .demo-content .demo-kp {
  margin: 10px auto;
}
.code-box-demo .demo-content .demo-kp ul li {
  display: inline-block;
  width: 32%;
  height: 40px;
  background: #cacaca;
  color: #ebeded;
  text-align: left;
  padding: 10px;
  margin-right: calc(2%);
}
.code-box-demo .demo-content .demo-kp ul li:last-child {
  margin-right: 0%;
}
.code-box-demo .demo-content .demo-kp ul li:after {
  width: 60%;
  height: 5px;
  background: #ebeded;
  float: left;
  margin-top: 7px;
}
.code-box-demo .demo-content .demo-kp ul li:before {
  background: #ebeded;
  float: left;
  width: 15px;
  height: 15px;
  margin:2px 10% 0 0;

}
.code-box-demo .demo-footer {
  margin-top: 10px;
  background: #cacaca;
  height: 40px;
  float: left;
  width: 100%;
  display: table;
}
.code-box-demo .demo-footer:before {
  width: 60%;
  height: 5px;
  background: #ededed;
  margin: 10px auto 0;
}
.code-box-demo .demo-footer:after {
  width: 30%;
  height: 5px;
  background: #ededed;
  margin: 5px auto;
}
.code-box-demo .demo-header ul li:before,
.code-box-demo .demo-content .demo-kp ul li:before,
.code-box-demo .demo-content .demo-kp ul li:after,
.code-box-demo .demo-content .demo-listBox .demo-list .title:before,
.code-box-demo .demo-content .demo-listBox .demo-list .title:after,
.code-box-demo .demo-content .demo-listBox .demo-list ul li:before,
.code-box-demo .demo-content .demo-listBox .demo-list ul li:after,
.code-box-demo .demo-footer:before,
.code-box-demo .demo-footer:after {
  display: block;
  content: "";
}

.code-box-expand-trigger {
  cursor: pointer;
  font-size: 14px;
  color: #9199AC;
  margin-left: 5px;
  opacity: .8;
  transition: all .3s ease;
  top: -2px;
  position: relative;

  &-active {
    color: #3B4357;
  }
}

.code-boxes-col-1-1 {
  width: 80%;
}

.code-boxes-col-2-1 {
  width: 48%;
  display: inline-block;
  vertical-align: top;
  padding-right: 8px;
}

.code-boxes-col-2-1:last-child {
  padding-right: 0;
  padding-left: 8px;
}

.code-box {
  border: 1px solid #E9E9E9;
  border-radius: 6px;
  display: inline-block;
  width: 100%;
  position: relative;
  margin: 0px 0 16px 0px;
  transition: all 0.5s ease;
}

.code-box:hover {
  border-color: #ccc;
}

.code-box-target {
  border: 1px solid rgba(45, 183, 245, 0.7);
  box-shadow: 0 0 4px rgba(45, 183, 245, 0.5);
}

.code-box:hover .code-box-meta,
.code-box:target .code-box-meta {
  background: #fbfbfb;
}

.code-box:hover .code-box-title,
.code-box:target .code-box-title {
  background: #fbfbfb;
  box-shadow: 0 -1.2px 0 #e9e9e9;
}

.code-box .code-box-title a,
.code-box .code-box-title a:hover {
  color: #666;
}

.code-box .code-box-demo {
  border-bottom: 1px solid #E9E9E9;
  padding: 42px 20px 50px;
}

.code-box iframe {
  width: 100%;
  border: 0;
}

.code-box-meta {
  position: relative;
  padding: 10px 15px;
  border-radius: 0 0 6px 6px;
  transition: background-color 0.4s ease;
  width: 100%;
}

.code-box-meta h4,
.code-box-meta p {
  margin: 0;
}

.code-box-title {
  position: absolute;
  top: -14px;
  padding: 1px 1.1em;
  color: #777;
  border-radius: 6px;
  background: #fff;
  transition: all 0.4s ease;
}

.code-box-title:before {
  font-family: anticon;
  content: "\e658";
  font-size: 16px;
  vertical-align: middle;
  line-height: 22px;
  position: relative;
  margin-right: 8px;
  top: -2px;
  color: #ccc;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  display: inline-block;
}

.code-box-meta > p {
  font-size: 12px;
  margin: 0.5em 0;
  padding-right: 25px;
  width: 100%;
  word-break: break-word;
}

.code-box .collapse {
  position: absolute;
  right: 16px;
  bottom: 18px;
  cursor: pointer;
  width: 18px;
  height: 18px;
  font-size: 18px;
  line-height: 18px;
  opacity: 0.5;
  text-align: center;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  transition: all 0.3s ease;
  color: #999;
  background: #fff;
  user-select: none;
}

.code-box.expand .collapse {
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

.code-box .collapse:hover {
  opacity: 1;
}

.code-box .highlight {
  overflow: hidden;
  padding: 5px;
  border-top: 1px dashed #e9e9e9;
}

.code-box pre {
  margin: 0;
  width: auto;
}

.code-box pre code {
  border: none;
  background: #fff;
}

.code-box-demo .demo-header {
  width: 100%;
  background: #ebedee;
  height: 30px;
}
.code-box-demo .demo-header ul {
  float: right;
  margin-right: 5px;
}
.code-box-demo .demo-header ul li {
  width: 50px;
  height: 30px;
  float: left;
  background: #e4e4e4;
  margin-left: 5px;
}
.code-box-demo .demo-header ul li:before {
  margin: 10px auto;
  width: 20px;
  height: 10px;
  background: #ebeded;
}
.code-box-demo .demo-header .logo {
  float: left;
  margin: 0px auto 0 10px;
  line-height: 32px;
}
.code-box-demo .demo-header .logo img{
  margin:auto
}
.code-box-demo .demo-header .logo span {
  display: block;
  float: right;
}
.code-box-demo .demo-content {
  width: 80%;
  margin: 10px auto;
}
.code-box-demo .demo-content .demo-title {
  text-align:left;
  background: #a4a4a4;
  width: 40%;
  height: 20px;
  line-height: 20px;
  color: #ebeded;
  text-indent:10px
}
.code-box-demo .demo-content .demo-listBox {
  margin-top: 10px;
}
.code-box-demo .demo-content .demo-listBox .demo-list .title {
  height: 30px;
  background: #cacaca;
  overflow: hidden;
}
.code-box-demo .demo-content .demo-listBox .demo-list .title:before,.code-box-demo .demo-content .demo-listBox .demo-list .title:after{
  width: 30%;
  height: 5px;
  background: #ebeded;
  float:left;
  margin:12px 35px 0;
}
.code-box-demo .demo-content .demo-listBox .demo-list .title:after{
  width:15%;
  float:right;
  margin:12px 10px 0;

}
.code-box-demo .demo-content .demo-listBox .demo-list ul li {
  height: 25px;
  background: #ebeded;
  border-bottom: 1px solid #cacaca;
  overflow: hidden;
  padding: 5px 15px;
}
.code-box-demo .demo-content .demo-listBox .demo-list ul li:before {
  width: 10px;
  height: 5px;
  background: #cacaca;
  float: left;
  margin-top:4px
}
.code-box-demo .demo-content .demo-listBox .demo-list ul li:after {
  width: 50%;
  height: 5px;
  background: #cacaca;
  float: left;
  margin-left: 10px;
  margin-top: 4px;
}
.code-box-demo .demo-content .demo-kp {
  margin: 10px auto;
}
.code-box-demo .demo-content .demo-kp ul li {
  display: inline-block;
  width: 32%;
  height: 40px;
  background: #cacaca;
  color: #ebeded;
  text-align: left;
  padding: 10px;
  margin-right: calc(2%);
}
.code-box-demo .demo-content .demo-kp ul li:last-child {
  margin-right: 0%;
}
.code-box-demo .demo-content .demo-kp ul li:after {
  width: 60%;
  height: 5px;
  background: #ebeded;
  float: left;
  margin-top: 7px;
}
.code-box-demo .demo-content .demo-kp ul li:before {
  background: #ebeded;
  float: left;
  width: 15px;
  height: 15px;
  margin:2px 10% 0 0;

}
.code-box-demo .demo-footer {
  margin-top: 10px;
  background: #cacaca;
  height: 40px;
  float: left;
  width: 100%;
  display: table;
}
.code-box-demo .demo-footer:before {
  width: 60%;
  height: 5px;
  background: #ededed;
  margin: 10px auto 0;
}
.code-box-demo .demo-footer:after {
  width: 30%;
  height: 5px;
  background: #ededed;
  margin: 5px auto;
}
.code-box-demo .demo-header ul li:before,
.code-box-demo .demo-content .demo-kp ul li:before,
.code-box-demo .demo-content .demo-kp ul li:after,
.code-box-demo .demo-content .demo-listBox .demo-list .title:before,
.code-box-demo .demo-content .demo-listBox .demo-list .title:after,
.code-box-demo .demo-content .demo-listBox .demo-list ul li:before,
.code-box-demo .demo-content .demo-listBox .demo-list ul li:after,
.code-box-demo .demo-footer:before,
.code-box-demo .demo-footer:after {
  display: block;
  content: "";
}


added mixins for commonly used prefixed proerties

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/wooga/Pocket-Island.git/'


#84 updated style

#84 updated style

// @import url('../core/vars.less');
@import url(src/css/echoes-variables.less);

// helpers
@sidebar-color: #323538;
.closed-sidebar() {
	.sidebar-left-fixed.closed {
		.transform(translatex(-300px));

		+ .modal-backdrop {
			display: none;
		}
	}
}

.sidebar-toggle() {
	#sidebar-menu-toggler {
		// position: fixed;
		// top: 0;
		z-index: 10000;
		display: inline-block;

		&.opened {
			.transform(translatex(-12px));
		}
		.btn-navbar {
			margin: 0;
			padding: 9px 10px;

			// position: absolute;
		    top: 0px;
		    z-index: 10000;
		    display: block;
		    background: transparent;
		    border: none;
			box-shadow: none;
			.transition(all .3s ease-out);
		}
	}
}
// the code
@media (min-width: 320px) {
	.sidebar {
		z-index: 100;
		// by default should be hidden
		transform: translatex(-300px);
		background-color: @sidebar-color;
		padding-bottom: 30%;
		border: none;
	    border-radius: 0;

	    .navbar-brand {
	    	background-color: rgba(0,0,0, .2)
	    }
		// should be displayed
		&.closed {
			transform: translatex(0px);
		}
	}
}
@media (max-width: 1024px) {
	.sidebar-toggle();
}
.sidebar-left-fixed {
	// .transform(translatex(0px));
	position: fixed;
	bottom: 0;
	top: 0;
	left: 0;
	margin: 0;
	padding: 0 0 (@navbar-height + 15);
}
.sidebar {
	height: 100%;
	width: @drawer-width;

	overflow-y: auto;

	h3 {
		margin: 0;
	}

	.sidebar-pane {
		min-height: 0;

		.nav-header {
			margin-bottom: 15px;
			line-height: 26px;
		}
	}
	.nav > li a:hover {
		background: rgba(10,10,10,.2);
	}
	.nav-header {
		color: #efefef;
		text-transform: uppercase;
	}
	.nav .nav-header,
	.nav li + .nav-header,
	.nav-header {
		margin-top: 0;
		padding-left: 15px;
		padding-right: 2px;
		font-size: 10px;
		font-weight: normal;
		text-shadow: none;
		box-shadow: none;
		z-index: 10;
	}
	#library-nav {
		margin-bottom: 10px;

		.fa {
			margin-right: 10px;
		}
	}
	.navbar {
		margin-bottom: 10px;
		border-bottom: 1px solid #222;
	}

	a {
		color: rgb(201, 199, 199);
		text-shadow: none;
	}

	.active .nav-list li a{
		background: @primary-color;
	}
}

.ios {
	.sidebar-left-fixed {
		padding: 64px 0;
	}

	.sidebar-toggle();

	#sidebar-menu-toggler {
		top: 1px;
	}

	.closed-sidebar();
}

@media (min-width: 768px) {
	.sidebar {
		transition: transform .3s ease-out;

		&.closed {
			// transform: translatex(-300px);
		}
	}
}

@media (min-width: 1024px) {
	.closed-sidebar();

	.sidebar {
		transform: translatex(0px);

		+ .modal-backdrop {
			display: none;
		}
	}
}

.modal-backdrop {
	opacity: .5;
}

// @import url('../core/vars.less');
@import url(src/css/echoes-variables.less);

// helpers
@sidebar-color: #323538;
.closed-sidebar() {
	.sidebar-left-fixed.closed {
		.transform(translatex(-300px));

		+ .modal-backdrop {
			display: none;
		}
	}
}

.sidebar-toggle() {
	#sidebar-menu-toggler {
		// position: fixed;
		// top: 0;
		z-index: 10000;
		display: inline-block;

		&.opened {
			.transform(translatex(-12px));
		}
		.btn-navbar {
			margin: 0;
			padding: 9px 10px;

			// position: absolute;
		    top: 0px;
		    z-index: 10000;
		    display: block;
		    background: transparent;
		    border: none;
			box-shadow: none;
			.transition(all .3s ease-out);
		}
	}
}
// the code
@media (min-width: 320px) {
	.sidebar {
		z-index: 100;
		// by default should be hidden
		transform: translatex(-300px);
		background-color: @sidebar-color;
		padding-bottom: 30%;
		border: none;
	    border-radius: 0;

		// should be displayed
		&.closed {
			transform: translatex(0px);
		}
	}
}
@media (max-width: 1024px) {
	.sidebar-toggle();
}
.sidebar-left-fixed {
	// .transform(translatex(0px));
	position: fixed;
	bottom: 0;
	top: 0;
	left: 0;
	margin: 0;
	padding: 0 0 (@navbar-height + 15);
}
.sidebar {
	height: 100%;
	width: @drawer-width;

	overflow-y: auto;

	h3 {
		margin: 0;
	}

	.sidebar-pane {
		min-height: 0;

		.nav-header {
			margin-bottom: 15px;
			line-height: 26px;
		}
	}
	.nav > li a:hover {
		background: rgba(10,10,10,.2);
	}
	.nav-header {
		color: #efefef;
		text-transform: uppercase;
	}
	.nav .nav-header,
	.nav li + .nav-header,
	.nav-header {
		margin-top: 0;
		padding-left: 15px;
		padding-right: 2px;
		font-size: 10px;
		font-weight: normal;
		text-shadow: none;
		box-shadow: none;
		z-index: 10;
	}
	#library-nav {
		margin-bottom: 10px;

		.fa {
			margin-right: 10px;
		}
	}
	.navbar {
		margin-bottom: 10px;
		border-bottom: 1px solid #222;
	}

	a {
		color: rgb(201, 199, 199);
		text-shadow: none;
	}

	.active .nav-list li a{
		background: @primary-color;
	}
}

.ios {
	.sidebar-left-fixed {
		padding: 64px 0;
	}

	.sidebar-toggle();

	#sidebar-menu-toggler {
		top: 1px;
	}

	.closed-sidebar();
}

@media (min-width: 768px) {
	.sidebar {
		transition: transform .3s ease-out;

		&.closed {
			// transform: translatex(-300px);
		}
	}
}

@media (min-width: 1024px) {
	.closed-sidebar();

	.sidebar {
		transform: translatex(0px);

		+ .modal-backdrop {
			display: none;
		}
	}
}

.modal-backdrop {
	opacity: .5;
}


Bugfix: Corrected the mapping.

Bugfix: Corrected the mapping.

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/Det-Kongelige-Bibliotek/rex.git/'


concert-demo-link margins

concert-demo-link margins

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/cgoudarzi/cgoudarzi.github.io.git/'


webkit gradient

webkit gradient

/* === Pages === */
.pages {
    position: relative;
    .size(100%,100%);
    overflow: hidden;
    background: #000;
}
.page {
    .border-box();
    .full-size();
    overflow: hidden;
    background: #efeff4;
    .translate3d(0,0,0);
    &.cached {
        display: none;
    }
}
.page-on-left {
    opacity: 0.9;
    .translate3d(-20%);
}
.page-on-center {
    .box-shadow(0 0 12px rgba(0,0,0,0.5));
    .translate3d(0);
}
.page-on-right {
    .translate3d(100%);
}
.page-content {
    .scrollable();
    .border-box();
    height: 100%;
}

@pageDuration: 400ms;

//Class that will trigger transition during page custom transitions (like swipe-back)
.page-transitioning {
    .transition(@pageDuration);
}

// From/to Right To/from Center animations
.page-from-right-to-center, .page-from-center-to-right {
    // Fake shadow during animation
    overflow: visible;
    &:before {
        position: absolute;
        right: 100%;
        top: 0;
        width: 16px;
        height: 100%;
        background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 10%, rgba(0,0,0,0.01) 50%, rgba(0,0,0,0.2) 100%);
        background: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 10%, rgba(0,0,0,0.01) 50%, rgba(0,0,0,0.2) 100%);
        content: '';
    }
}
.page-from-right-to-center {
    &:before {
        .animation(pageFromRightToCenterShadow @pageDuration forwards);
    }
    .animation(pageFromRightToCenter @pageDuration forwards);
}
.page-from-center-to-right {
    overflow: visible;
    &:before {
        .animation(pageFromCenterToRightShadow @pageDuration forwards);
    }
    .animation(pageFromCenterToRight @pageDuration forwards);
}
@-webkit-keyframes pageFromRightToCenter {
    from {
        -webkit-transform: translate3d(100%,0,0);
    }
    to {
        -webkit-transform: translate3d(0,0,0);
    }
}
@keyframes pageFromRightToCenter {
    from {
        transform: translate3d(100%,0,0);
    }
    to {
        transform: translate3d(0,0,0);
    }
}
@-webkit-keyframes pageFromRightToCenterShadow {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes pageFromRightToCenterShadow {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@-webkit-keyframes pageFromCenterToRight {
    from {
        -webkit-transform: translate3d(0,0,0);
    }
    to {
        -webkit-transform: translate3d(100%,0,0);
    }
}
@keyframes pageFromCenterToRight {
    from {
        transform: translate3d(0,0,0);
    }
    to {
        transform: translate3d(100%,0,0);
    }
}
@-webkit-keyframes pageFromCenterToRightShadow {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
@keyframes pageFromCenterToRightShadow {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

// From/to Center To/from Left animations
.page-from-center-to-left {
    .animation(pageFromCenterToLeft @pageDuration forwards);
}
.page-from-left-to-center {
    .animation(pageFromLeftToCenter @pageDuration forwards);
}

@-webkit-keyframes pageFromCenterToLeft {
    from {
        opacity: 1;
        -webkit-transform: translate3d(0,0,0);
    }
    to {
        opacity: 0.9;
        -webkit-transform: translate3d(-20%,0,0);
    }
}
@keyframes pageFromCenterToLeft {
    from {
        transform: translate3d(0,0,0);
    }
    to {
        opacity: 0.9;
        transform: translate3d(-20%,0,0);
    }
}
@-webkit-keyframes pageFromLeftToCenter {
    from {
        opacity: 0.9;
        -webkit-transform: translate3d(-20%,0,0);
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0,0,0);
    }
}
@keyframes pageFromLeftToCenter {
    from {
        transform: translate3d(-20%,0,0);
    }
    to {
        opacity: 1;
        transform: translate3d(0,0,0);
    }
}

/* === Pages === */
.pages {
    position: relative;
    .size(100%,100%);
    overflow: hidden;
    background: #000;
}
.page {
    .border-box();
    .full-size();
    overflow: hidden;
    background: #efeff4;
    .translate3d(0,0,0);
    &.cached {
        display: none;
    }
}
.page-on-left {
    opacity: 0.9;
    .translate3d(-20%);
}
.page-on-center {
    .box-shadow(0 0 12px rgba(0,0,0,0.5));
    .translate3d(0);
}
.page-on-right {
    .translate3d(100%);
}
.page-content {
    .scrollable();
    .border-box();
    height: 100%;
}

@pageDuration: 400ms;

//Class that will trigger transition during page custom transitions (like swipe-back)
.page-transitioning {
    .transition(@pageDuration);
}

// From/to Right To/from Center animations
.page-from-right-to-center, .page-from-center-to-right {
    // Fake shadow during animation
    overflow: visible;
    &:before {
        position: absolute;
        right: 100%;
        top: 0;
        width: 16px;
        height: 100%;
        background: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 10%, rgba(0,0,0,0.01) 50%, rgba(0,0,0,0.2) 100%);
        content: '';
    }
}
.page-from-right-to-center {
    &:before {
        .animation(pageFromRightToCenterShadow @pageDuration forwards);
    }
    .animation(pageFromRightToCenter @pageDuration forwards);
}
.page-from-center-to-right {
    overflow: visible;
    &:before {
        .animation(pageFromCenterToRightShadow @pageDuration forwards);
    }
    .animation(pageFromCenterToRight @pageDuration forwards);
}
@-webkit-keyframes pageFromRightToCenter {
    from {
        -webkit-transform: translate3d(100%,0,0);
    }
    to {
        -webkit-transform: translate3d(0,0,0);
    }
}
@keyframes pageFromRightToCenter {
    from {
        transform: translate3d(100%,0,0);
    }
    to {
        transform: translate3d(0,0,0);
    }
}
@-webkit-keyframes pageFromRightToCenterShadow {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes pageFromRightToCenterShadow {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@-webkit-keyframes pageFromCenterToRight {
    from {
        -webkit-transform: translate3d(0,0,0);
    }
    to {
        -webkit-transform: translate3d(100%,0,0);
    }
}
@keyframes pageFromCenterToRight {
    from {
        transform: translate3d(0,0,0);
    }
    to {
        transform: translate3d(100%,0,0);
    }
}
@-webkit-keyframes pageFromCenterToRightShadow {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
@keyframes pageFromCenterToRightShadow {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

// From/to Center To/from Left animations
.page-from-center-to-left {
    .animation(pageFromCenterToLeft @pageDuration forwards);
}
.page-from-left-to-center {
    .animation(pageFromLeftToCenter @pageDuration forwards);
}

@-webkit-keyframes pageFromCenterToLeft {
    from {
        opacity: 1;
        -webkit-transform: translate3d(0,0,0);
    }
    to {
        opacity: 0.9;
        -webkit-transform: translate3d(-20%,0,0);
    }
}
@keyframes pageFromCenterToLeft {
    from {
        transform: translate3d(0,0,0);
    }
    to {
        opacity: 0.9;
        transform: translate3d(-20%,0,0);
    }
}
@-webkit-keyframes pageFromLeftToCenter {
    from {
        opacity: 0.9;
        -webkit-transform: translate3d(-20%,0,0);
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0,0,0);
    }
}
@keyframes pageFromLeftToCenter {
    from {
        transform: translate3d(-20%,0,0);
    }
    to {
        opacity: 1;
        transform: translate3d(0,0,0);
    }
}


tags style is now more flat

tags style is now more flat

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/dedalozzo/pit-bootstrap.git/'


add keys less

add keys less

fatal: unable to access 'https://github.com/awronka/ngTetris.git/': The requested URL returned error: 403


修改样式，及引用 chitu

修改样式，及引用 chitu

@import "../Common.less";

.Home-ProductComments {
    .scrollViewTopPadding(@header-height);
    .container {
        padding-top: 15px;
    }
}

error: pathspec 'src/Content/App/Home/ProductComments.less' did not match any file(s) known to git


Removed the comments and excess blank lines

Removed comments and excess blank lines #71

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/voxbone-workshop/portal-widget.git/'


Resolving #509

Resolving #509

@import "utility";

.text {
    cursor: default;
    -webkit-user-select: text;

    &.is-clickable {
        .u-clickable;
    }
}

@import "utility";

.text {
    cursor: default;

    &.is-clickable {
        .u-clickable;
    }
}


Style the textarea

Style the textarea

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/danosier/context-git.git/'


improve style

improve style

@switch-prefix-cls:ant-switch;

@switch-duration:.3s;

.@{switch-prefix-cls} {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  width: 44px;
  height: 22px;
  line-height: 20px;
  vertical-align: middle;
  border-radius: 20px;
  border: 1px solid #ccc;
  background-color: #ccc;
  cursor: pointer;
  transition: all @switch-duration @ease-in-out-circ;
  user-select: none;

  &-inner {
    color: #fff;
    font-size: 12px;
    position: absolute;
    left: 24px;
  }

  &:after {
    position: absolute;
    width: 18px;
    height: 18px;
    left: 2px;
    top: 1px;
    border-radius: 100%;
    background-color: #fff;
    content: " ";
    cursor: pointer;
    transition: left @switch-duration @ease-in-out-circ;
  }

  &-small {
    height: 14px;
    line-height: 12px;
    width: 28px;
    &:after {
      width: 12px;
      height: 12px;
      top: 0;
      left: 0;
    }
  }

  &-small&-checked:after {
    left: 14px;
  }

  &-checked {
    border: 1px solid @primary-color;
    background-color: @primary-color;

    .@{switch-prefix-cls}-inner {
      left: 6px;
    }

    &:after {
      left: 22px;
    }
  }

  &-disabled {
    cursor: not-allowed;
    background: #f4f4f4;
    border-color: #f4f4f4;

    &:after {
      background: #ccc;
      cursor: not-allowed;
    }

    &-inner {
      color: #ccc;
    }
  }
}

@switch-prefix-cls:ant-switch;

@switch-duration:.3s;

.@{switch-prefix-cls} {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  width: 44px;
  height: 22px;
  line-height: 20px;
  vertical-align: middle;
  border-radius: 20px 20px;
  border: 1px solid #ccc;
  background-color: #ccc;
  cursor: pointer;
  transition: all @switch-duration @ease-in-out-circ;
  user-select: none;

  &-inner {
    color: #fff;
    font-size: 12px;
    position: absolute;
    left: 24px;
  }

  &:after {
    position: absolute;
    width: 18px;
    height: 18px;
    left: 2px;
    top: 1px;
    border-radius: 100%;
    background-color: #fff;
    content: " ";
    cursor: pointer;
    transition: left @switch-duration @ease-in-out-circ;
  }

  &-small {
    height: 14px;
    line-height: 12px;
    width: 28px;
    &:after {
      width: 12px;
      height: 12px;
      top: 0;
      left: 0;
    }
  }

  &-small&-checked:after {
    left: 14px;
  }

  &-checked {
    border: 1px solid @primary-color;
    background-color: @primary-color;

    .@{switch-prefix-cls}-inner {
      left: 6px;
    }

    &:after {
      left: 22px;
    }
  }

  &-disabled {
    cursor: not-allowed;
    background: #f4f4f4;
    border-color: #f4f4f4;

    &:after {
      background: #ccc;
      cursor: not-allowed;
    }

    &-inner {
      color: #ccc;
    }
  }
}


use bootstrap grids

use bootstrap grids

error: pathspec 'styles/grid.less' did not match any file(s) known to git


Add WAI-ARIA support to the media-view component

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/sfi0zy/muilessium.git/'