bicro/PigeonPalomacy

View on GitHub
app/assets/stylesheets/registration2.scss

Summary

Maintainability
Test Coverage
$registration-blue: #C1ADFF;
$registration-red: #E27E7E;
$registration-yellow:#E6BF26;
$registration-green:#8BB44E;
$registration-button-blue: #BFAAFF;

.registration {
    position: relative;
    top: 160px;
    
    * {
        font-size: 14px;
        font-family: "Lato";
    }
    
    .title {
        font-size: 22px;
        margin-bottom: 20px;
        margin-top: 20px;
    }
    
    .field_label {
        padding-top: 24px;
        vertical-align: bottom;
        display: inline-block;
        text-transform: uppercase;
        @extend .op-6
    }
    
    @mixin registration-text-box($bottom-color) {
        color: $bottom-color !important;
        border-bottom-color: $bottom-color !important;
        @extend .registration-field-box-regular;
    }
    
    .registration-field-box-regular {
        border-top: none !important;
        border-left: none !important;
        border-right: none !important;
        border-bottom-width: 2.5px !important;
        padding-left: 0px !important;
    }
    
    .registration-field-box-blue {
        @include registration-text-box($registration-blue);
    }
    
    .registration-field-box-red {
        @include registration-text-box($registration-red);
    }
    
    .registration-field-box-yellow {
        @include registration-text-box($registration-yellow);
    }
    
    .registration-field-box-green {
        @include registration-text-box($registration-green);
    }
    
    .required:after { content:" *"; }
    
    .reminder-text {
        position: absolute;
        bottom: 0px;
        font-size: 12px;
        color: $registration-green;
    }
    
    .registration-button {
        background-color: $registration-button-blue;
        border-radius: 5px !important;
        margin-top: 2rem;
        padding-top: 0.6rem;
        padding-bottom: 0.6rem;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        margin-bottom: 2px;
    }
}

.op-8 {
    opacity: 0.8;
}

.op-6 {
    opacity: 0.6;
}

::-webkit-input-placeholder { /* WebKit browsers */
    opacity: 0.4 !important;
}

::-moz-placeholder {
    opacity: 0.4 !important;
}

:-ms-input-placeholder {
    opacity: 0.4 !important;
}