• Home
• com.chutneytesting
• ui
• 2.9.0
• source code
• editable-text-area.component.scss

×

Project download

Many resources are needed to download a project. Please understand that we have to compensate our server costs. Thank you in advance.
Project price only 1 $

You can buy this project and download/modify it how often you want.

src.app.molecules.forms.editable-text-area.editable-text-area.component.scss Maven / Gradle / Ivy

.row {
    .editable-field {
        border-radius: 2px;
        transition: box-shadow 150ms ease-in 0ms;
        display: inline-block;
        cursor: text;
        padding-left: 2px;

        &:hover {
            box-shadow: 0 0 0 1px #ccc;

            .overlay-icon {
                -webkit-transition: opacity 150ms ease-in 0ms;
                transition: opacity 150ms ease-in 0ms;
                opacity: 1;
            }
        }

        .overlay-icon {
            background-color: #f0f0f0;
            opacity: 0;
            border-left: 1px solid #ccc;
            padding-left: 5px;
            box-sizing: border-box;
            vertical-align: top;
            cursor: pointer;
        }
    }

    textarea {
        width: 100%;
        resize: none;
    }
}

@mixin input-size($font-size, $font-weight, $padding-top) {
    .editable-field {
        font-size: $font-size;
        font-weight: $font-weight;

        .overlay-icon {
            width: $font-size * 1,5;
            font-size: $font-size;
            padding-top: $padding-top;
            padding-bottom: $padding-top + 4px;
            padding-right: $padding-top;
        }
    }
    input {
        font-size: $font-size;
    }
}

.simple { @include input-size(16px, 200, 3px); }

.form-title { @include input-size(24px, 400, 7px); }