/*
 *  HXUI 框架定义的默认标签样式
 */
@import "./variable";

/*--------------------------------------------------------------------------------------*/
/* 设置不使用默认的聚焦框
/*--------------------------------------------------------------------------------------*/
*, *:after, *:before{
    outline: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
/*--------------------------------------------------------------------------------------*/
/*  对整个HTML布局和body进行设置， 使得子组件可以用%比来设置宽度
/*--------------------------------------------------------------------------------------*/
html, body{
    height: 100%;
    width: 100%;
    padding: 0;
    margin:0;
    overflow-x: hidden;
    overflow-y: hidden;
    position: relative;
}

div {
    overflow-scrolling: touch;
    -webkit-overflow-scrolling: touch;
}

input::-webkit-input-placeholder,
input::-moz-input-placeholder,
input::-ms-input-placeholder {
    color: $color-gray-deep;
    font-weight: 300;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  width: 8px;
  background-color: transparent;
}
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.1);
  background-color: rgba(0, 0, 0, .1);
}

/*--------------------------------------------------------------------------------------*/
/*  a标签样式
/*--------------------------------------------------------------------------------------*/
a {
    color: $color-heavy;
    text-decoration: none;
    cursor: pointer;
}
a:hover {
    color: $color-main;
    text-decoration: none!important;
}
a:active {   text-decoration: none;                      }
a:link   {   text-decoration: none;  color: purple;      }

select{
    padding: 0 10px;
}

input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

textarea::-webkit-input-placeholder,
input::-webkit-input-placeholder { /*WebKit browsers*/
    color: $color-gray-deep;
    font-weight: 300;
}
textarea::-moz-input-placeholder,
input::-moz-input-placeholder {  /*Mozilla Firefox*/
    color: $color-gray-deep;
    font-weight: 300;
}
textarea::-ms-input-placeholder,
input::-ms-input-placeholder {   /*Internet Explorer*/
    color: $color-gray-deep;
    font-weight: 300;
}


// 文本编辑组件、选择组件的默认样式
input[type="text"], 
input[type="email"], 
input[type="password"], 
input[type="tel"],
input[type="date"],
.hx-selector>.text-option,
.hx-auto-complete>.text-option,
input[type="number"], textarea, select {
    width: 100%;
    display: inline-block;
    transition: all .4s;
    border: 1px solid $color-gray;
    line-height: $height-regular;
    border-radius: 3px;
    padding: 0 $pm-sm;
    background-color: white;
    font-size: $font-md;
    resize: none;
    height: $height-regular;
    &.blank {
        border: 1px solid transparent;
        transition: all .4s;
        &:hover{
            border: 1px solid transparent;
            background-color: $color-gray-light!important;
        }
        &:focus{
            border: 1px solid transparent;
            background-color: $color-gray!important;
        }
    }
    &:hover {
        border: 1px solid $color-gray-deep;
    }
    &.short {
        width: 45%;
    }
    &:focus {
        border: 1px solid $color-main;
    }

    // input标签样式表单验证出错的样式
    &.error {
        font-weight: 100!important;
        border: 1px solid $color-red!important;
        color: $color-red;
        background-color: lighten($color-red, 32%)!important;
        transition: all .4s;
        &:focus {
            border: 1px solid $color-red-deep!important;
        }
    }

    &:disabled, &.disabled {
        border: 1px solid transparent!important;
        background-color: $color-gray-light;
    }
}

input, select {
    height: $height-regular;
}
textarea {
    height: 2 * $height-navbar;
}

/*--------------------------------------------------------------------------------------*/
/*  button标签样式默认
/*--------------------------------------------------------------------------------------*/
button {
    border: none;
}
button, input[type='submit'], input[type='button'], input[type='reset']{
    font-size: $font-md;
    font-weight: 400;
}

.hide { display: none; }


.color-main { color: $color-main!important; }
.color-red { color: $color-red!important; }
.color-green { color: $color-green!important; }
.color-orange { color: $color-orange!important; }
.color-golden { color: $color-golden!important; }
.color-pink { color: $color-pink!important; }
.color-gray { color: #aaa!important; }
.color-blue { color: $color-blue!important; }
.color-black { color: #000!important; }

.bg-gray { background-color: $color-gray-light!important; }
.bg-main { background-color: rgba($color-main, .1)!important; }

// 三种居中
.center-horizontal,
.center-parent,
.center-vertical {  position: absolute;  }
.center-horizontal {
  left: 50%;
  transform: translateX(-50%);
}
.center-parent {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.center-vertical {
  top: 50%;
  transform: translateY(-50%);
}

// 参照bootstrap和amazeUI的栅格系统
[class^='col-sm-'], [class^='col-md-'], [class^='col-bg-']
{ float: left; display: inline-block; }

@media screen and (max-width: 640px) {
  .col-sm-1 { width: 8.33%;     }
  .col-sm-2 { width: 16.66%;    }
  .col-sm-3 { width: 25%;       }
  .col-sm-4 { width: 33.33%;    }
  .col-sm-6 { width: 50%;       }
  .col-sm-8 { width: 66.66%;    }
  .col-sm-12 { width: 100%;     }
  .hide-sm { display: none!important; }
}

@media screen and (min-width: 640px) and (max-width: 1024px) {
  .col-md-1 { width: 8.33%;     }
  .col-md-2 { width: 16.66%;    }
  .col-md-3 { width: 25%;       }
  .col-md-4 { width: 33.33%;    }
  .col-md-6 { width: 50%;       }
  .col-md-8 { width: 66.66%;    }
  .col-md-12 { width: 100%;     }
  .hide-md { display: none!important; }
}

@media screen and (min-width: 1024px) {
  .col-bg-1 { width: 8.33%;     }
  .col-bg-2 { width: 16.66%;    }
  .col-bg-3 { width: 25%;       }
  .col-bg-4 { width: 33.33%;    }
  .col-bg-6 { width: 50%;       }
  .col-bg-8 { width: 66.66%;    }
  .col-bg-12 { width: 100%;     }
  .hide-bg { display: none!important; }
}

// 定义提供全局使用的动画样式
// 呼吸动画
@keyframes breathe {
  0% { transform: scale(1.0, 1.0); }
  50% { transform: scale(1.2, 1.2); }
  100% { transform: scale(1.0, 1.0); }
}

.align-right { text-align: right; }
.center { text-align: center; }

.hx-invisible {
  visibility: hidden;
}

.hx-no-wrap {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

@media screen and (max-width: 640px) {
    input[type="text"], input[type="email"], input[type="password"], input[type="number"], textarea, select {
        &.error {
            border: none!important;
        }
    }
}