@finqu/cool 1.2.29 → 2.0.2

package/less/forms.less

@@ -1,770 +0,0 @@
-// Forms
-// Form control
-.form-control {
-    display: block;
-    width: 100%;
-    padding: @input-padding-y @input-padding-x;
-    height: @input-height;
-    font-size: @font-size-base;
-    line-height: @input-line-height;
-    color: @color-text;
-    background-color: @color-bg;
-    background-image: none;
-    background-clip: padding-box;
-    border: 1px solid @color-border;
-    border-radius: 3px;
-    box-sizing: border-box;
-    &.input-sm {
-        padding: @input-padding-y-sm @input-padding-x-sm;
-        font-size: @font-size-small;
-        height: @input-height-sm;
-        line-height: @line-height-sm;
-    }
-    &.input-xs {
-        padding: @input-padding-y-xs @input-padding-x-xs;
-        font-size: @font-size-extra-small;
-        height: @input-height-xs;
-        line-height: @line-height-xs;
-    }
-    &.input-lg {
-        padding: @input-padding-y-lg @input-padding-x-lg;
-        font-size: @font-size-large;
-        height: @input-height-lg;
-        line-height: @line-height-lg;
-    }
-    & + .input-validation {
-        width: 100%;
-        flex: 1;
-    }
-
-    /* Fix crappy Safari styles */
-    &[type="search"],
-    &[type="date"],
-    &[type="datetime"],
-    &[type="text"],
-    &[type="password"],
-    &[type="number"] {
-        -webkit-appearance: none;
-    }
-    &[type="color"] {
-        padding: 0;
-        width: 100px;
-    }
-
-    &[type=number]::-webkit-inner-spin-button,
-    &[type=number]::-webkit-outer-spin-button {
-        position: absolute;
-        z-index: 3;
-        right: 0;
-        bottom: 0;
-        top: 0;
-    }
-
-    &[type=time]::-webkit-inner-spin-button,
-    &[type=time]::-webkit-outer-spin-button {
-        position: absolute;
-        z-index: 3;
-        right: 0;
-        bottom: 0;
-        top: 0;
-    }
-
-    &[type="date"]::-webkit-calendar-picker-indicator{
-        display:inline-block;
-        margin-top:2%;
-        margin-right: -14px;
-        float: right;
-    }
-    &[type="date"]::-webkit-inner-spin-button {
-        -webkit-appearance: none;
-        margin: 0;
-    }
-
-    &:focus {
-        border: 1px solid darken(@color-border, 20%);
-        outline: 0;
-    }
-
-    &::placeholder {
-        color: @color-placeholder !important;
-        opacity: 1 !important;
-    }
-
-    &[disabled] {
-        background: @color-grey-lightest;
-        cursor: not-allowed;
-        opacity: 1;
-    }
-}
-
-.needs-validation {
-    &.was-validated {
-        .form-control:invalid {
-            border-color: @color-red;
-        }
-    }
-}
-
-// Label
-label {
-    display: inline-block;
-    font-size: @font-size-small;
-    margin-bottom: @label-margin-bottom;
-}
-
-// Form group
-.form-group {
-    margin-bottom: @form-group-margin-bottom;
-    &.hidden + .radio {
-        margin-top: -@form-group-margin-bottom / 2;
-    }
-}
-
-// Form inline
-.form-inline {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    flex-wrap: wrap;
-    margin-bottom: 10px;
-    &.flex-align-top {
-       align-items: flex-start;
-    }
-    &:last-child {
-        margin-bottom: 0;
-    }
-    // Inline-block all the things for "inline"
-    > .form-group {
-        flex: 1 1 auto;
-        display: block;
-        padding: 0 5px;
-        box-sizing: border-box;
-        .input-group {
-            flex-wrap: nowrap;
-            .form-control {
-                flex: 1 1 auto;
-                width: auto;
-            }
-        }
-    }
-
-    // In navbar-form, allow folks to *not* use `.form-group`
-    > .form-control {
-        flex: 1 1 0%;
-        display: inline-block;
-        width: auto; // Prevent labels from stacking above inputs in `.form-group`
-        vertical-align: middle;
-    }
-
-    > .input-group {
-        display: inline-table;
-        vertical-align: middle;
-        width: auto;
-
-        .input-group-addon,
-        .input-group-btn,
-        .form-control {
-            width: auto;
-        }
-
-        & + .input-group {
-            margin-top: 0;
-            padding-left: 10px;
-        }
-    }
-
-    // Input groups need that 100% width though
-    > .input-group > .form-control {
-      width: 100%;
-    }
-}
-
-// Form horizontal
-.form-horizontal {
-    .subtitle {
-        margin-top: 20px;
-    }
-
-    .separator {
-        height: 20px;
-    }
-
-    @media screen and (min-width: 768px) {
-        .separator {
-            height: 40px;
-        }
-        .subtitle {
-            margin-top: 0;
-            margin-left: 230px;
-        }
-    }
-
-    .form-group {
-        margin-right: -10px;
-        margin-left: -10px;
-        overflow: hidden;
-        margin: 0;
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        align-items: center;
-        @media screen and (min-width: 768px) {
-            flex-wrap: wrap;
-        }
-        > .input-group {
-            flex: 0 0 100%;
-        }
-        > label {
-            box-sizing: border-box;
-            flex: 0 0 100%;
-            width: 100%;
-            &.align-top {
-                align-self: flex-start;
-            }
-        }
-    }
-}
-
-// Textarea
-textarea {
-    width: 100%;
-    max-width: 100%;
-    border: 1px solid @color-border;
-    border-radius: @border-radius;
-    padding: 8px 14px;
-    &:focus {
-        border: 1px solid @color-primary;
-        outline: 0;
-    }
-    &.form-control {
-        -webkit-appearance: none;
-        .one-line-style(@input-line-height) {
-            line-height: @input-line-height;
-            transition: height 0.15s ease, line-height 0s ease 0.15s, padding 0s ease 0.15s;
-            resize: none;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            box-sizing: border-box;
-        }
-        &.one-line {
-            .one-line-style(@input-line-height);
-            &.input-sm {
-                .one-line-style(@line-height-sm);
-            }
-            &.input-xs {
-                .one-line-style(@line-height-xs);
-            }
-        }
-        &:not(.one-line) {
-            line-height: 1.42857;
-        }
-    }
-}
-
-// Checkbox
-.checkbox {
-    border-collapse: separate;
-    display: flex;
-    position: relative;
-    align-items: center;
-    width: 100%;
-    padding: 0;
-    border-radius: @border-radius;
-    box-sizing: border-box;
-    &.border {
-        padding: 0 10px;
-        border: 1px solid @color-border;
-    }
-    label {
-        display: inline-block;
-        max-width: 100%;
-        min-height: 20px;
-        line-height: 20px;
-        padding: 0;
-        margin-bottom: 0;
-        font-weight: 400;
-        cursor: pointer;
-    }
-    img {
-        vertical-align: middle;
-    }
-    input {
-        margin: 0 5px 0 0;
-        vertical-align: middle;
-    }
-    & + .checkbox {
-        margin-top: 10px;
-    }
-}
-
-// Styled checkbox
-.styled-checkbox {
-    line-height: 0;
-    label {
-        display: inline-flex;
-        align-items: center;
-        margin: auto;
-        user-select: none;
-        cursor: pointer;
-        span {
-            display: inline-block;
-            vertical-align: middle;
-            &:first-child {
-                position: relative;
-                width: 17px;
-                height: 17px;
-                min-width: 17px;
-                min-height: 17px;
-                border-radius: @border-radius;
-                transform: scale(1);
-                vertical-align: middle;
-                border: 1px solid #9098A9;
-                transition: all .2s ease;
-                svg {
-                    position: absolute;
-                    top: 4px;
-                    left: 3px;
-                    fill: none;
-                    stroke: @color-white;
-                    stroke-width: 2;
-                    stroke-linecap: round;
-                    stroke-linejoin: round;
-                    stroke-dasharray: 16px;
-                    stroke-dashoffset: 16px;
-                    transition: all .3s ease;
-                    transition-delay: .1s;
-                }
-                &:before {
-                    content: '';
-                    width: 100%;
-                    height: 100%;
-                    background: @color-blue;
-                    display: block;
-                    transform: scale(0);
-                    opacity: 1;
-                    border-radius: 50%;
-                }
-            }
-            &.checkbox-label {
-                padding-left: 8px;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                .reset-text();
-            }
-        }
-        &:hover span:first-child {
-            border-color: @color-blue;
-        }
-    }
-
-    input[type="checkbox"] {
-        display: none;
-    }
-
-    input[type="checkbox"]:checked + label {
-        span {
-            &:first-child {
-                background: @color-blue;
-                border-color: @color-blue;
-                animation: wave .4s ease;
-                svg {
-                    stroke-dashoffset: 0;
-                }
-                &:before {
-                    transform: scale(3.5);
-                    opacity: 0;
-                    transition: all .6s ease;
-                }
-            }
-        }
-    }
-
-    input[type="checkbox"]:disabled + label,
-    input[type="checkbox"].disabled + label {
-        span {
-            &:first-child {
-                cursor: not-allowed;
-                background-color: @color-grey-lighter;
-                border: 1px solid #9098A9;
-                opacity: 0.35;
-            }
-        }
-        &:hover {
-            span {
-                &:first-child {
-                    border: 1px solid #9098A9;
-                }
-            }
-        }
-    }
-}
-
-@keyframes wave {
-    50% {transform: scale(.9);}
-}
-
-// Radio
-.radio {
-    position: relative;
-    display: block;
-    margin-top: 10px;
-    margin-bottom: 10px;
-    + .radio {
-        margin-top: -5px;
-    }
-    &.disabled {
-        label {
-            cursor: not-allowed;
-        }
-    }
-    label {
-        display: inline-block;
-        max-width: 100%;
-        min-height: 20px;
-        line-height: 20px;
-        padding: 0 0 0 20px;
-        margin-bottom: 0;
-        font-weight: 400;
-        cursor: pointer;
-    }
-    input[type=radio] {
-        position: absolute;
-        margin: 4px 0 0 -20px;
-        line-height: normal;
-        &[disabled] {
-            cursor: not-allowed;
-        }
-    }
-}
-
-// Styled radio
-.styled-radio {
-    line-height: 0;
-    label {
-        display: inline-flex;
-        align-items: center;
-        margin: auto;
-        user-select: none;
-        cursor: pointer;
-        span {
-            display: inline-block;
-            vertical-align: middle;
-            &:first-child {
-                position: relative;
-                width: 17px;
-                height: 17px;
-                min-width: 17px;
-                min-height: 17px;
-                border-radius: 50%;
-                transform: scale(1);
-                vertical-align: middle;
-                border: 1px solid #9098A9;
-                transition: all .2s ease;
-                svg {
-                    position: absolute;
-                    top: 4px;
-                    left: 3px;
-                    fill: none;
-                    stroke: @color-white;
-                    stroke-width: 2;
-                    stroke-linecap: round;
-                    stroke-linejoin: round;
-                    stroke-dasharray: 16px;
-                    stroke-dashoffset: 16px;
-                    transition: all .3s ease;
-                    transition-delay: .1s;
-                }
-                &:before {
-                    content: '';
-                    width: 100%;
-                    height: 100%;
-                    background: @color-blue;
-                    display: block;
-                    transform: scale(0);
-                    opacity: 1;
-                    border-radius: 50%;
-                }
-            }
-            &.radio-label {
-                padding-left: 8px;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                .reset-text();
-            }
-        }
-        &:hover span:first-child {
-            border-color: @color-blue;
-        }
-    }
-
-    input[type="radio"] {
-        display: none;
-    }
-
-    input[type="radio"]:checked + label {
-        span {
-            &:first-child {
-                background: @color-blue;
-                border-color: @color-blue;
-                animation: wave .4s ease;
-                svg {
-                    stroke-dashoffset: 0;
-                }
-                &:before {
-                    transform: scale(3.5);
-                    opacity: 0;
-                    transition: all .6s ease;
-                }
-            }
-        }
-    }
-
-    input[type="radio"]:disabled + label,
-    input[type="radio"].disabled + label {
-        span {
-            &:first-child {
-                cursor: not-allowed;
-                background-color: @color-grey-lighter;
-                border: 1px solid #9098A9;
-                opacity: 0.35;
-            }
-        }
-        &:hover {
-            span {
-                &:first-child {
-                    border: 1px solid #9098A9;
-                }
-            }
-        }
-    }
-}
-
-@keyframes wave {
-    50% {transform: scale(.9);}
-}
-
-// ON/OFF Switch
-.onoffswitch {
-    display: inline-block;
-    vertical-align: middle;
-    position: relative;
-    width: 35px;
-    user-select: none;
-    margin: 0 auto;
-    &.inline-switch {
-        margin-left: 0;
-        margin-right: 10px;
-    }
-    .onoffswitch-checkbox {
-        display: none;
-        background: red;
-        &:disabled {
-            cursor: not-allowed;
-            pointer-events: none;
-            & + .onoffswitch-label {
-                opacity: 0.4;
-                &:hover {
-                    cursor: not-allowed;
-                }
-            }
-        }
-    }
-    .onoffswitch-label {
-        display: block;
-        overflow: hidden;
-        cursor: pointer;
-        height: 15px;
-        padding: 0;
-        line-height: 15px;
-        border: 2px solid #79868C;
-        border-radius: 15px;
-        background-color: #79868C;
-        margin-bottom: 0;
-        transition: all 0.3s ease-in;
-        &:before {
-            content: '';
-            display: block;
-            width: 15px;
-            margin: 0px;
-            background: @color-white;
-            position: absolute;
-            top: 0;
-            right: 16px;
-            bottom: 0;
-            border: 2px solid #79868C;
-            border-radius: 15px;
-            transition: all 0.3s ease-in 0s;
-        }
-    }
-    .onoffswitch-checkbox:checked + .onoffswitch-label {
-        background-color: @color-green;
-    }
-    .onoffswitch-checkbox:checked + .onoffswitch-label,
-    .onoffswitch-checkbox:checked + .onoffswitch-label:before {
-       border-color: @color-green;
-    }
-    .onoffswitch-checkbox:checked + .onoffswitch-label:before {
-        right: 0px;
-    }
-}
-
-// Misc
-.fake-input {
-    background: @color-grey-lightest;
-    border: 1px solid @color-border;
-    line-height: @input-line-height;
-    border-radius: 3px;
-    height: @input-height;
-    padding: @input-padding-y @input-padding-x;
-    font-family: inherit;
-    font-size: @font-size-base;
-    box-sizing: border-box;
-}
-
-.form-control-placeholder {
-    display: block;
-    width: 100%;
-    padding: @input-padding-y @input-padding-x;
-    height: @input-height;
-    font-size: @font-size-base;
-    line-height: @input-line-height;
-    color: @color-text;
-    box-sizing: border-box;
-    &.input-sm {
-        padding: @input-padding-y-sm @input-padding-x-sm;
-        font-size: @font-size-small;
-        height: @input-height-sm;
-        line-height: @line-height-sm;
-    }
-    &.input-xs {
-        padding: @input-padding-y-xs @input-padding-x-xs;
-        font-size: @font-size-extra-small;
-        height: @input-height-xs;
-        line-height: @line-height-xs;
-    }
-    & + .input-validation {
-        width: 100%;
-        flex: 1;
-    }
-}
-
-.form-label-group {
-    position: relative;
-    margin-bottom: 1rem;
-
-    & > input, label {
-        padding: @input-padding-y @input-padding-x;
-    }
-
-    & > label {
-        position: absolute;
-        top: 0;
-        left: 0;
-        display: block;
-        width: 100%;
-        margin-bottom: 0; /* Override default `<label>` margin */
-        line-height: @input-line-height;
-        color: #76848F;
-        border: 1px solid transparent;
-        border-radius: @border-radius;
-        transition: all .1s ease-in-out;
-        pointer-events: none;
-        font-size: @font-size-base;
-    }
-
-    input::-webkit-input-placeholder,
-    input:-ms-input-placeholder,
-    input::-ms-input-placeholder,
-    input::-moz-placeholder,
-    input::placeholder {
-        color: transparent;
-    }
-
-    &.label-on-top {
-        input {
-            padding-top: ~"calc(@{input-padding-y} + @{input-padding-y} * (2 / 3))";
-            padding-bottom: ~"calc(@{input-padding-y} / 3)";
-
-            & ~ label {
-                padding-top: ~"calc(@{input-padding-y} / 3)";
-                padding-bottom: ~"calc(@{input-padding-y} / 3)";
-                font-size: @font-size-extra-small;
-                color: #76848F;
-            }
-        }
-    }
-    input:-webkit-autofill {
-        padding-top: ~"calc(@{input-padding-y} + @{input-padding-y} * (2 / 3))";
-        padding-bottom: ~"calc(@{input-padding-y} / 3)";
-
-        & ~ label {
-            padding-top: ~"calc(@{input-padding-y} / 3)";
-            padding-bottom: ~"calc(@{input-padding-y} / 3)";
-            font-size: @font-size-extra-small;
-            color: #76848F;
-        }
-    }
-}
-
-.form-label-group-lg {
-    position: relative;
-    margin-bottom: 1rem;
-    height: auto;
-
-    & > .form-control, label {
-        padding: @input-padding-y-lg @input-padding-x-lg;
-    }
-
-    & > label {
-        position: absolute;
-        top: 0;
-        left: 0;
-        display: block;
-        width: 100%;
-        margin-bottom: 0; /* Override default `<label>` margin */
-        line-height: @line-height-lg;
-        color: #76848F;
-        border: 1px solid transparent;
-        border-radius: @border-radius;
-        transition: all .1s ease-in-out;
-        pointer-events: none;
-        font-size: @font-size-large;
-    }
-
-    input::-webkit-input-placeholder,
-    input:-ms-input-placeholder,
-    input::-ms-input-placeholder,
-    input::-moz-placeholder,
-    input::placeholder {
-        color: transparent;
-    }
-
-    select {
-        -webkit-appearance: none;
-    }
-
-    &.label-on-top {
-        .form-control {
-            padding-top: ~"calc(@{input-padding-y-lg} + @{input-padding-y-lg} * (2 / 3))";
-            padding-bottom: ~"calc(@{input-padding-y-lg} / 3)";
-
-            & ~ label {
-                padding-top: ~"calc(@{input-padding-y-lg} / 3)";
-                padding-bottom: ~"calc(@{input-padding-y-lg} / 3)";
-                font-size: @font-size-small;
-                color: #76848F;
-            }
-        }
-    }
-    input:-webkit-autofill {
-        padding-top: ~"calc(@{input-padding-y-lg} + @{input-padding-y-lg} * (2 / 3))";
-        padding-bottom: ~"calc(@{input-padding-y-lg} / 3)";
-
-        & ~ label {
-            padding-top: ~"calc(@{input-padding-y-lg} / 3)";
-            padding-bottom: ~"calc(@{input-padding-y-lg} / 3)";
-            font-size: @font-size-small;
-            color: #76848F;
-        }
-    }
-}