anephenix/ui

@import './colours.scss';
@import './spacing.scss';

label {
    box-sizing: content-box;
    margin-right: $grid-base;
}

// Used to help ensure that checkbox elements and the label elements that wrap them are clickable
.checkbox-element {
    box-sizing: content-box;
}

input[type='text'],
input[type='email'],
input[type='password'],
input[type='search'],
textarea {
    padding: $grid-base;
    border-radius: 3px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.05);
    border: solid 1px $form-field-border-colour;
    color: $form-field-colour;
    font-size: 14px;

    &.large {
        padding: $spacer-two $spacer-one;
    }
}

input[type='checkbox'],
input[type='radio'] {
    position: absolute;
    opacity: 0;
    z-index: -1;
}

.checkbox,
.radio {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.checkbox-element,
.radio-element {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    width: $spacer-one;
    height: $spacer-one;
    padding: calc($grid-base / 2);
    margin-right: $grid-base;
    background: $light;
    border: solid 1px $form-field-border-colour;
    border-radius: 3px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

.radio-element {
    border-radius: $spacer-two;
}

.large .checkbox-element,
.large .radio-element {
    width: $spacer-two;
    height: $spacer-two;
}

.large .radio-element {
    border-radius: $spacer-two;
}

.large .tick {
    border-radius: 2px;
}

.large .selected {
    border-radius: $spacer-one;
}

.tick,
.selected {
    width: 0px;
    height: 0px;
    border-radius: 1px;
    background-color: $green-one-colour;
    opacity: 0;
    transition: all 0.2s linear;
}

.selected {
    border-radius: $spacer-one;
}

input[type='checkbox']:checked + .checkbox-element .tick,
input[type='radio']:checked + .radio-element .selected {
    width: $grid-base;
    height: $grid-base;
    opacity: 1;
}

.large input[type='checkbox']:checked + .checkbox-element .tick,
.large input[type='radio']:checked + .radio-element .selected {
    width: $spacer-two;
    height: $spacer-two;
    opacity: 1;
}

input[type='checkbox']:disabled + .checkbox-element,
input[type='radio']:disabled + .radio-element {
    opacity: 0.2;
}

.input-group {
    display: flex;
    align-items: center;
    padding: $grid-base;
}

.select {
    padding: $grid-base;
    min-width: 180px;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-image: url('data:image/svg+xml;charset=UTF8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23414141%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat, repeat;
    background-position: right 0.7em top 50%, 0 0;
    background-size: 0.65em auto, 100%;
    border-radius: 3px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.05);
    border: solid 1px $form-field-border-colour;
    color: $form-field-colour;
    font-size: 14px;
}

.select::-ms-expand {
    display: none;
}
.select:hover {
    border-color: #888;
}
.select:focus {
    border-color: #aaa;
    box-shadow: 0 0 1px 1px rgba(59, 153, 252, 0.7);
    box-shadow: 0 0 0 1px -moz-mac-focusring;
    color: $form-field-colour;
    outline: none;
}
.select > option {
    padding: $grid-base;
    color: $form-field-colour;
    font-weight: normal;
    font-size: 14px;
}

// TODO - Make sure that the focussed/hover state is reflected in the checkbox and radio buttons

// TODO - dropdowns and their lists

// TODO - textarea (Anephenix-web has appropriate styling)