@finqu/cool 1.0.0

package/less/forms.less

@@ -0,0 +1,770 @@
+// 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;
+        }
+    }
+}