Pony.fm/resources/assets/styles/forms.less

/**
 * Pony.fm - A community for pony fan music.
 * Copyright (C) 2015 Feld0
 *
 * This program 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, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program 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/>.
 */

@import "base/bootstrap/bootstrap";

.form-row {
  margin-bottom: 10px;

  .error {
    .alert();
    .alert-danger();

    display: none;
    padding: 3px;
    font-size: 8pt;
  }

  .alert {
    padding: 3px;
    font-size: 8pt;
  }
}

.track-editor {
  .row [class*=col]:first-child {
    margin-left: 0;
  }

  .row {
    margin: 0;
  }

  .row .col-sm-12 {
    padding: 0;
  }

  .row .col-sm-6 {
    padding: 0;
    width: 48.93617021%;
    margin-left: 2.12765957%;
  }
}

.has-error {
  label {
    color: @brand-danger;
  }

  .error {
    display: block;
  }
}

label.strong {
  font-size: 8pt;
  font-weight: bold;
}

input[type="text"], input[type="password"], input[type="date"], input[type="number"], textarea {
  padding: 3px;
  border: 1px solid;
  border-color: #9c9c9c #9c9c9c #ccc #ccc;
}

input[type="text"], input[type="password"], input[type="date"], input[type="number"], textarea, select {
  .border-radius(0px);
  .box-sizing(border-box);

  display: block;
  font-size: 12px;
  width: 100%;

  &:focus {
    .box-shadow(none);
  }

  &.x-large {
    font-size: 12pt;
    padding: 0.5em;
    height: 2em;
  }

  &.x-saving {
    background: @pfm-light-grey;
  }

  &.x-error {
    background: @btn-danger-bg;
  }
}

select {
  height: auto;
  line-height: normal;
  padding: 0px;
}

label {
  input[type="checkbox"] {
    margin: 0px;
    margin-top: -2px;
    vertical-align: middle;
  }
}

textarea {
  height: 60px;
}

.switch {
  display: inline-block;
  position: relative;
  width: 40px;
  height: 16px;
  border-radius: 8px;
  background: rgba(0,0,0,0.26);
  -webkit-transition: background 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  transition: background 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  vertical-align: middle;
  cursor: pointer;

  &::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    width: 24px;
    height: 24px;
    background: #fafafa;
    box-shadow: 0 2px 8px rgba(0,0,0,0.28);
    border-radius: 50%;
    transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  }

  &:active::before {
    box-shadow: 0 2px 8px rgba(0,0,0,0.28), 0 0 0 20px rgba(128,128,128,0.1);
  }
}

input:checked + .switch {
  background: rgba(132,82,138,0.5);
}

input:checked + .switch::before {
  left: 20px;
  background: #84528a;
}

input:checked + .switch:active::before {
  box-shadow: 0 2px 8px rgba(0,0,0,0.28), 0 0 0 20px rgba(0,150,136,0.2);
}

.switch.disabled {
  background: #bfbfbf;
}

.switch.disabled::before {
  background: #dadada;
}