json-form.scss

/**
 * Copyright © 2016 The Thingsboard Authors
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
@import "~compass-sass-mixins/lib/compass";

$swift-ease-out-duration: 0.4s !default;
$swift-ease-out-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;

$input-label-float-offset: 6px !default;
$input-label-float-scale: 0.75 !default;

.json-form-error {
    position: relative;
    bottom: -5px;
    font-size: 12px;
    line-height: 12px;
    color: rgb(244, 67, 54);
    @include transition(all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms);
}

.tb-container {
    position: relative;
    margin-top: 32px;
    padding: 10px 0;
}

.tb-field {
    &.tb-required {
        label:after {
            content: ' *';
            font-size: 13px;
            vertical-align: top;
            color: rgba(0,0,0,0.54);
        }
    }
    &.tb-focused:not(.tb-readonly) {
        label:after {
            color: rgb(221,44,0);
        }
    }
}

.tb-date-field {
    &.tb-required {
        div>div:first-child:after {
            content: ' *';
            font-size: 13px;
            vertical-align: top;
            color: rgba(0,0,0,0.54);
        }
    }
    &.tb-focused:not(.tb-readonly) {
        div>div:first-child:after {
            color: rgb(221,44,0);
        }
    }
}

label.tb-label {
    color: rgba(0,0,0,0.54);
    -webkit-font-smoothing: antialiased;
    position: absolute;
    bottom: 100%;
    left: 0;
    right: auto;
    @include transform(translate3d(0, $input-label-float-offset, 0) scale($input-label-float-scale));
    @include transition(transform $swift-ease-out-timing-function $swift-ease-out-duration,
                          width $swift-ease-out-timing-function $swift-ease-out-duration);
    transform-origin: left top;

    &.tb-focused {
        color: rgb(96,125,139);
    }

    &.tb-required:after {
        content: ' *';
        font-size: 13px;
        vertical-align: top;
        color: rgba(0,0,0,0.54);
    }

    &.tb-focused:not(.tb-readonly):after {
        color: rgb(221,44,0);
    }
}

.tb-head-label {
    color: rgba(0,0,0,0.54);
}