/* MODULE SCSS => ./scss2/_input.scss
*//*
 * LICENCE : CloudUnit is available under the Affero Gnu Public License GPL V3 : https://www.gnu.org/licenses/agpl-3.0.html
 *     but CloudUnit is licensed too under a standard commercial license.
 *     Please contact our sales team if you would like to discuss the specifics of our Enterprise license.
 *     If you are not sure whether the GPL is right for you,
 *     you can always test our software under the GPL and inspect the source code before you contact us
 *     about purchasing a commercial license.
 *
 *     LEGAL TERMS : "CloudUnit" is a registered trademark of Treeptik and can't be used to endorse
 *     or promote products derived from this project without prior written permission from Treeptik.
 *     Products or services derived from this software may not be called "CloudUnit"
 *     nor may "Treeptik" or similar confusing terms appear in their names without prior written permission.
 *     For any questions, contact us : contact@treeptik.fr
 */

input, textarea, .form-control, .dropdown-toggle {
  margin: 0;
  background-color: transparent;
  border: none;
  outline: none;
  padding: 8px 0;
  margin-bottom: 8px;
  height: 100%;
  box-shadow: none;
  border-radius: 0;
  border-bottom: 1px solid $color-muted;
  font-size: 16px;
  
  &:focus {
    color: $color-default;
    outline: 0;
    box-shadow: none;
  }
}

textarea {
  max-height: 36px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  transition: max-height .3s ease-in-out;
}

textarea:focus {
  max-height: 72px;
}

.textarea-custom {
  height: auto;
  padding: 6px 12px;
  width: 100%;
  max-width: 100%;
  margin-top: 10px;
  &.textarea-full {
    min-height: 60vh;
  }
  &.textarea-mid-full {
    min-height: 30vh;
  }
}
  
input[type='text']:disabled, input[type='text'].disabled, input[readonly] {
  border-bottom: 1px dashed #bdbdbd;
  background-color: transparent;
  color: $color-muted;
}

input[type='text'].ng-invalid:not(.ng-pristine) {
  border-bottom: 2px solid $color-error;
}

input.checkbox {
  height: 30px;
}

input {

  &.large {
    min-width: 360px;
  }
}

.label {
  font-size: 14px;
  font-weight: 400;
  color: inherit;
  padding: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
}

.input-group {
  display: block;
  color: #757575;
  margin-bottom: $padding-base-vertical;
}

.input-group.stack {
  &.align-margin {
    margin-top: 8px;
  }
  
  input, textarea {
    width: 100%;
  }
  label {
    display: block;
  }
}

.input-group.small-margin-top {
  margin-top: 25px;
}

.input-group.stack.suffix {
  input, textarea {
    width: 75%;
  }
  .input:after {
    content: '.cloudunit.dev';
    font-size: 14px;
    position: absolute;
    right: 0;
  }
}

.input-group-inline {
  &.align-margin {
    margin-top: 8px;
  }

  padding-left: 0px;
  input{
    min-width: 100%;
  }
}

.readonly {
  @include clearfix();
  overflow: hidden;
  label {
    float: left;
    font-size: 14px;
    margin-right: 4px;
    text-overflow: ellipsis;
  }
  input {
    float: left;
    border-bottom: 0;
    margin: 0;
    padding: 0;
    max-width: 100%;
    font-size: 14px;
    text-overflow: ellipsis;
  }
}

.password {
  & input {
    display: none;
  }

  &.show > input {
    display: inline-block;
  }
}


/* form starting stylings */
.group { 
  position:relative; 
  margin-bottom:45px; 
}
input.input-effect {
  font-size:18px;
  padding:10px 10px 10px 5px;
  display:block;
  width: 100%;
  border:none;
  border-bottom:1px solid #757575;

  &.marge-label {
    margin-top: 18px;
  }
}

input.input-effect:focus { 
  outline:none; 
}

label.label-effect {

  &.label-margin {
    top: -10px;
  }

  color:#999; 
  font-size:18px;
  font-weight:normal;
  position:absolute;
  pointer-events:none;
  left:5px;
  top:10px;
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}

input.input-effect:focus ~ label,
input.input-effect:valid ~ label {
  top:-20px;
  font-size:14px;
  color:$color-primary;
}

input.input-effect:focus ~ .bar:before,
input.input-effect:focus ~ .bar:after {
  width:50%;
}

input.input-effect:focus ~ .highlight {
  -webkit-animation:inputHighlighter 0.3s ease;
  -moz-animation:inputHighlighter 0.3s ease;
  animation:inputHighlighter 0.3s ease;
}

@-webkit-keyframes inputHighlighter {
	from { background:$color-primary; }
  to 	{ width:0; background:transparent; }
}
@-moz-keyframes inputHighlighter {
	from { background:$color-primary; }
  to 	{ width:0; background:transparent; }
}
@keyframes inputHighlighter {
	from { background:$color-primary; }
  to 	{ width:0; background:transparent; }
}

.CodeMirror{
    min-height: 80vh;
}