[Update] Delete styles layout

[Update] Delete styles layout

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/gioacostax/sia-finder.git/'


Add selector

Add selector

fatal: unable to access 'https://github.com/Margatroid/Anilytics.git/': The requested URL returned error: 403


active class styles

active class styles

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/Digipalvelutehdas/APIKA.git/'


Removes useless transitions

Removes useless transitions

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/studiomotio/www1.git/'


Link to internal fonts

Link to internal fonts

Instead of getting Atom to request the fonts from the repo here on github get it to request them from the folder on the local machine.

This means that the theme will work even when the user is offline.

@font-face {
	font-family: 'icomoon';
	src:url('atom://seti-ui/css/_fonts/icomoon.eot');
	src:url('atom://seti-ui/css/_fonts/icomoon.eot') format('embedded-opentype'),
		url('atom://seti-ui/css/_fonts/icomoon.woff') format('woff'),
		url('atom://seti-ui/css/_fonts/icomoon.ttf') format('truetype'),
		url('atom://seti-ui/css/_fonts/icomoon.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

.icon-icons_npm:before {
	content: "\e616";
}
.icon-icons_node:before {
	content: "\e617";
}
.icon-icons_yml:before {
	content: "\e618";
}
.icon-icons_xml:before {
	content: "\e619";
}
.icon-icons_bower:before {
	content: "\e61a";
}
.icon-icons_stylus:before {
	content: "\e600";
}
.icon-icons_site:before {
	content: "\e601";
}
.icon-icons_sh:before {
	content: "\e602";
}
.icon-icons_sass:before {
	content: "\e603";
}
.icon-icons_rb:before {
	content: "\e604";
}
.icon-icons_rails:before {
	content: "\e605";
}
.icon-icons_py:before {
	content: "\e606";
}
.icon-icons_procfile:before {
	content: "\e607";
}
.icon-icons_php:before {
	content: "\e608";
}
.icon-icons_md:before {
	content: "\e609";
}
.icon-icons_license:before {
	content: "\e60a";
}
.icon-icons_json:before {
	content: "\e60b";
}
.icon-icons_js:before {
	content: "\e60c";
}
.icon-icons_img:before {
	content: "\e60d";
}
.icon-icons_html:before {
	content: "\e60e";
}
.icon-icons_hbs:before {
	content: "\e60f";
}
.icon-icons_gulp:before {
	content: "\e610";
}
.icon-icons_grunt:before {
	content: "\e611";
}
.icon-icons_file:before {
	content: "\e612";
}
.icon-icons_dir:before {
	content: "\e613";
}
.icon-icons_css:before {
	content: "\e614";
}
.icon-icons_config:before {
	content: "\e615";
}
.icon-icons_coffee:before {
	content: "\e61b";
}

@font-face {
	font-family: 'icomoon';
	src:url('https://raw.githubusercontent.com/jesseweed/seti-ui/master/css/_fonts/icomoon.eot?v0.0.1');
	src:url('https://raw.githubusercontent.com/jesseweed/seti-ui/master/css/_fonts/icomoon.eot?v0.0.1') format('embedded-opentype'),
		url('https://raw.githubusercontent.com/jesseweed/seti-ui/master/css/_fonts/icomoon.woff?v0.0.1') format('woff'),
		url('https://raw.githubusercontent.com/jesseweed/seti-ui/master/css/_fonts/icomoon.ttf?v0.0.1') format('truetype'),
		url('https://raw.githubusercontent.com/jesseweed/seti-ui/master/css/_fonts/icomoon.svg?v0.0.1') format('svg');
	font-weight: normal;
	font-style: normal;
}

.icon-icons_npm:before {
	content: "\e616";
}
.icon-icons_node:before {
	content: "\e617";
}
.icon-icons_yml:before {
	content: "\e618";
}
.icon-icons_xml:before {
	content: "\e619";
}
.icon-icons_bower:before {
	content: "\e61a";
}
.icon-icons_stylus:before {
	content: "\e600";
}
.icon-icons_site:before {
	content: "\e601";
}
.icon-icons_sh:before {
	content: "\e602";
}
.icon-icons_sass:before {
	content: "\e603";
}
.icon-icons_rb:before {
	content: "\e604";
}
.icon-icons_rails:before {
	content: "\e605";
}
.icon-icons_py:before {
	content: "\e606";
}
.icon-icons_procfile:before {
	content: "\e607";
}
.icon-icons_php:before {
	content: "\e608";
}
.icon-icons_md:before {
	content: "\e609";
}
.icon-icons_license:before {
	content: "\e60a";
}
.icon-icons_json:before {
	content: "\e60b";
}
.icon-icons_js:before {
	content: "\e60c";
}
.icon-icons_img:before {
	content: "\e60d";
}
.icon-icons_html:before {
	content: "\e60e";
}
.icon-icons_hbs:before {
	content: "\e60f";
}
.icon-icons_gulp:before {
	content: "\e610";
}
.icon-icons_grunt:before {
	content: "\e611";
}
.icon-icons_file:before {
	content: "\e612";
}
.icon-icons_dir:before {
	content: "\e613";
}
.icon-icons_css:before {
	content: "\e614";
}
.icon-icons_config:before {
	content: "\e615";
}
.icon-icons_coffee:before {
	content: "\e61b";
}


created LESS stylesheet

created LESS stylesheet

error: pathspec 'src/css/styles.less' did not match any file(s) known to git


Canister1983

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/jvinal/spacedew_finale.git/'


Code optimization

Code optimization


Remove checkbox animation on Android

Remove checkbox animation on Android

/* === Forms === */
// Inputs
.list-block {
    input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="url"], input[type="date"], input[type="datetime-local"], input[type="number"], select, textarea {
        -webkit-appearance: none;
        -moz-appearance: none;
        -ms-appearance: none;
        appearance: none;
        .border-box();
        border: none;
        background: none;
        border-radius: 0 0 0 0;
        .box-shadow(none);
        display: block;
        padding: 0 0 0 5px;
        margin: 0;
        width: 100%;
        height: 43px;
        color: #000;
        font-size: 17px;
        font-family: inherit;
    }
    input[type="date"], input[type="datetime-local"] {
        line-height: 44px;
    }
    select {
        -webkit-appearance: none;
        -moz-appearance: none;
        -ms-appearance: none;
        appearance: none;
    }
    .lable {
        vertical-align: top;
    }
    textarea {
        height: 100px;
        resize:none;
        line-height: 1.4;
        padding-top: 8px;
        padding-bottom: 7px;
    }
}

//Switch
.label-switch {
    display: inline-block;
    vertical-align: middle;
    width: 52px;
    border-radius: 16px;
    .border-box();
    height: 32px;
    position: relative;
    cursor: pointer;
    .align-self(center);
    input[type="checkbox"] {
        display: none;
        &+ .checkbox {
            width: 52px;
            border-radius: 16px;
            .border-box();
            height: 32px;
            background: #e5e5e5;
            z-index: 0;
            margin: 0;
            padding: 0;
            -webkit-appearance: none;
            -moz-appearance: none;
            -ms-appearance: none;
            appearance: none;
            border:none;
            cursor: pointer;
            position: relative;
            .transition(300ms);
            &:before {
                content:' ';
                position: absolute;
                left: 2px;
                top: 2px;
                width: 48px;
                border-radius: 16px;
                .border-box();
                height: 28px;
                background: #fff;
                z-index: 1;
                .transition(300ms);
                .transform(scale(1));
            }
            &:after {
                content:' ';
                height: 28px;
                width: 28px;
                border-radius: 28px;
                background: #fff;
                position: absolute;
                z-index: 2;
                top: 2px;
                left: 2px;
                .box-shadow(0 2px 5px rgba(0,0,0,0.4));
                .transform(translateX(0px));
                .transition(300ms);
            }
        }
        &:checked {
            &+ .checkbox {
                background: #4cd964;
                &:before {
                    .transform(scale(0));
                }
                &:after {
                    .transform(translateX(22px));
                }
            }
        }
    }
}
html.android {
    .label-switch input[type="checkbox"] {
        &+ .checkbox {
            .transition(0);
            &:after, &:before {
                .transition(0);
            }
        }
    }
}
//Buttons
.button {
    border: 1px solid @blue;
    color: @blue;
    text-decoration: none;
    text-align: center;
    display: block;
    border-radius: 5px;
    line-height: 27px;
    .border-box();
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
    padding: 0 10px;
    margin: 0;
    height: 29px;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    text-overflow:ellipsis;
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    input[type="submit"]&, input[type="button"]&{
        width: 100%;
    }

    &:active {
        background: rgba(red(@blue), green(@blue), blue(@blue), .15);
    }
    &.button-round {
        border-radius: 27px;
    }
    &.active {
        background: @blue;
        color: #fff;
    }
    &.button-big {
        font-size: 17px;
        height: 44px;
        line-height: 42px;
    }
    &.button-submit, &.button-cancel {
        color: #fff;
        &:active {
            opacity: 0.6;
        }
    }
    &.button-submit {
        border-color: #4cd964;
        background: #4cd964;
    }
    &.button-cancel {
        border-color: #ff3b30;
        background: #ff3b30;
    }
}
.buttons-row {
    .align-self(center);
    .flexbox();
    .flex-wrap(nowrap);
    .button {
        border-radius: 0 0 0 0;
        border-left-width: 0;
        width: 100%;
        -webkit-box-flex:1;
        -ms-flex:1;
    }
    .button:first-child {
        border-radius: 5px 0 0 5px;
        border-left-width: 1px;
        border-left-style: solid;
    }
    .button:last-child {
        border-radius: 0 5px 5px 0;
    }
    .button.button-round:first-child {
        border-radius: 27px 0 0 27px;
    }
    .button.button-round:last-child {
        border-radius: 0 27px 27px 0;
    }
}

// Slider
.range-slider {
    width: 100%;
    position: relative;
    overflow: hidden;
    padding-left: 3px;
    padding-right: 3px;
    margin-left: -1px;
    .align-self(center);
    input[type="range"] {
        position: relative;
        height: 28px;
        width: 100%;
        margin: 4px 0 5px 0;
        -webkit-appearance: none;
        -moz-appearance: none;
        -ms-appearance: none;
        appearance: none;
        background: -webkit-gradient(linear, 50% 0, 50% 100%, color-stop(0, #b7b8b7), color-stop(100%, #b7b8b7));
        background: linear-gradient(to right, #b7b8b7 0, #b7b8b7 100%);
        background-position: center;
        background-size: 100% 2px;
        background-repeat: no-repeat;
        outline: 0;
    }
    input[type="range"]:after {
        height: 2px;
        background: #fff;
        content:' ';
        width: 5px;
        top: 50%;
        margin-top: -1px;
        left: -5px;
        z-index: 1;
        position: absolute;
    }
    input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        -moz-appearance: none;
        -ms-appearance: none;
        appearance: none;
        border: none;
        height: 28px;
        width: 28px;
        position: relative;
        background: none;
    }
    input[type="range"]::-webkit-slider-thumb:after {
        height: 28px;
        width: 28px;
        border-radius: 28px;
        background: #fff;
        z-index: 10;
        .box-shadow(0 2px 4px rgba(0,0,0,0.4));
        position: absolute;
        left: 0;
        top: 0;
        content: ' ';
    }

    input[type="range"]::-webkit-slider-thumb:before {
        position: absolute;
        top: 50%;
        right: 100%;
        width: 2000px;
        height: 2px;
        margin-top: -1px;
        z-index: 1;
        background: @blue;
        content: ' ';
    }
}

// Checkboxes
label.label-checkbox {
    cursor: pointer;
    i.icon-form-checkbox {
        width: 29px;
        height: 29px;
        position: relative;
        &:after {
            content:' ';
            position: absolute;
            left: 50%;
            margin-left: -11px;
            top: 50%;
            margin-top: -11px;
            width: 22px;
            height: 22px;
            border-radius: 22px;
            border: 1px solid #c7c7cc;
            .border-box();
        }
    }
    input[type="checkbox"], input[type="radio"] {
        display: none;
        &:checked + .item-media{
            i.icon-form-checkbox:after {
                border: none;
                background: @blue url("@{imgBaseUrl}/i-form-checkbox-white.png") no-repeat center;
                -webkit-background-size: auto 9px;
                background-size: auto 9px;
            }
        }
    }
}
label.label-radio {
    cursor: pointer;
    input[type="checkbox"], input[type="radio"] {
        display: none;
        ~ .item-inner {
            padding-right: 35px;
        }
        &:checked ~ .item-inner{
            background: url("@{imgBaseUrl}/i-form-radio-blue.png") no-repeat center;
            background-position: ~"-webkit-calc(100% - 15px)" center;
            background-position: ~"-moz-calc(100% - 15px)" center;
            background-position: ~"-ms-calc(100% - 15px)" center;
            background-position: ~"calc(100% - 15px)" center;
            -webkit-background-size: auto 10px;
            background-size: auto 10px;
        }
    }
}
label.label-checkbox, label.label-radio {
    .transition(300ms);
    &:active {
        .transition(0ms);
        background-color: #d9d9d9;
        .item-inner {
            border-bottom: 1px solid transparent;
        }
    }
}

// Smart selects
.smart-select {
    select {
        display: none;
    }
}

/* === Forms === */
// Inputs
.list-block {
    input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="url"], input[type="date"], input[type="datetime-local"], input[type="number"], select, textarea {
        -webkit-appearance: none;
        -moz-appearance: none;
        -ms-appearance: none;
        appearance: none;
        .border-box();
        border: none;
        background: none;
        border-radius: 0 0 0 0;
        .box-shadow(none);
        display: block;
        padding: 0 0 0 5px;
        margin: 0;
        width: 100%;
        height: 43px;
        color: #000;
        font-size: 17px;
        font-family: inherit;
    }
    input[type="date"], input[type="datetime-local"] {
        line-height: 44px;
    }
    select {
        -webkit-appearance: none;
        -moz-appearance: none;
        -ms-appearance: none;
        appearance: none;
    }
    .lable {
        vertical-align: top;
    }
    textarea {
        height: 100px;
        resize:none;
        line-height: 1.4;
        padding-top: 8px;
        padding-bottom: 7px;
    }
}

//Switch
.label-switch {
    display: inline-block;
    vertical-align: middle;
    width: 52px;
    border-radius: 16px;
    .border-box();
    height: 32px;
    position: relative;
    cursor: pointer;
    .align-self(center);
    input[type="checkbox"] {
        display: none;
        &+ .checkbox {
            width: 52px;
            border-radius: 16px;
            .border-box();
            height: 32px;
            background: #e5e5e5;
            z-index: 0;
            margin: 0;
            padding: 0;
            -webkit-appearance: none;
            -moz-appearance: none;
            -ms-appearance: none;
            appearance: none;
            border:none;
            cursor: pointer;
            position: relative;
            .transition(300ms);
            &:before {
                content:' ';
                position: absolute;
                left: 2px;
                top: 2px;
                width: 48px;
                border-radius: 16px;
                .border-box();
                height: 28px;
                background: #fff;
                z-index: 1;
                .transition(300ms);
                .transform(scale(1));
            }
            &:after {
                content:' ';
                height: 28px;
                width: 28px;
                border-radius: 28px;
                background: #fff;
                position: absolute;
                z-index: 2;
                top: 2px;
                left: 2px;
                .box-shadow(0 2px 5px rgba(0,0,0,0.4));
                .translate3d(0,0,0);
                .transition(300ms);
            }
        }
        &:checked {
            &+ .checkbox {
                background: #4cd964;
                &:before {
                    .transform(scale(0));
                }
                &:after {
                    left: 22px;
                }
            }
        }
    }
}

//Buttons
.button {
    border: 1px solid @blue;
    color: @blue;
    text-decoration: none;
    text-align: center;
    display: block;
    border-radius: 5px;
    line-height: 27px;
    .border-box();
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
    padding: 0 10px;
    margin: 0;
    height: 29px;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    text-overflow:ellipsis;
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    input[type="submit"]&, input[type="button"]&{
        width: 100%;
    }

    &:active {
        background: rgba(red(@blue), green(@blue), blue(@blue), .15);
    }
    &.button-round {
        border-radius: 27px;
    }
    &.active {
        background: @blue;
        color: #fff;
    }
    &.button-big {
        font-size: 17px;
        height: 44px;
        line-height: 42px;
    }
    &.button-submit, &.button-cancel {
        color: #fff;
        &:active {
            opacity: 0.6;
        }
    }
    &.button-submit {
        border-color: #4cd964;
        background: #4cd964;
    }
    &.button-cancel {
        border-color: #ff3b30;
        background: #ff3b30;
    }
}
.buttons-row {
    .align-self(center);
    .flexbox();
    .flex-wrap(nowrap);
    .button {
        border-radius: 0 0 0 0;
        border-left-width: 0;
        width: 100%;
        -webkit-box-flex:1;
        -ms-flex:1;
    }
    .button:first-child {
        border-radius: 5px 0 0 5px;
        border-left-width: 1px;
        border-left-style: solid;
    }
    .button:last-child {
        border-radius: 0 5px 5px 0;
    }
    .button.button-round:first-child {
        border-radius: 27px 0 0 27px;
    }
    .button.button-round:last-child {
        border-radius: 0 27px 27px 0;
    }
}

// Slider
.range-slider {
    width: 100%;
    position: relative;
    overflow: hidden;
    padding-left: 3px;
    padding-right: 3px;
    margin-left: -1px;
    .align-self(center);
    input[type="range"] {
        position: relative;
        height: 28px;
        width: 100%;
        margin: 4px 0 5px 0;
        -webkit-appearance: none;
        -moz-appearance: none;
        -ms-appearance: none;
        appearance: none;
        background: -webkit-gradient(linear, 50% 0, 50% 100%, color-stop(0, #b7b8b7), color-stop(100%, #b7b8b7));
        background: linear-gradient(to right, #b7b8b7 0, #b7b8b7 100%);
        background-position: center;
        background-size: 100% 2px;
        background-repeat: no-repeat;
        outline: 0;
    }
    input[type="range"]:after {
        height: 2px;
        background: #fff;
        content:' ';
        width: 5px;
        top: 50%;
        margin-top: -1px;
        left: -5px;
        z-index: 1;
        position: absolute;
    }
    input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        -moz-appearance: none;
        -ms-appearance: none;
        appearance: none;
        border: none;
        height: 28px;
        width: 28px;
        position: relative;
        background: none;
    }
    input[type="range"]::-webkit-slider-thumb:after {
        height: 28px;
        width: 28px;
        border-radius: 28px;
        background: #fff;
        z-index: 10;
        .box-shadow(0 2px 4px rgba(0,0,0,0.4));
        position: absolute;
        left: 0;
        top: 0;
        content: ' ';
    }

    input[type="range"]::-webkit-slider-thumb:before {
        position: absolute;
        top: 50%;
        right: 100%;
        width: 2000px;
        height: 2px;
        margin-top: -1px;
        z-index: 1;
        background: @blue;
        content: ' ';
    }
}

// Checkboxes
label.label-checkbox {
    cursor: pointer;
    i.icon-form-checkbox {
        width: 29px;
        height: 29px;
        position: relative;
        &:after {
            content:' ';
            position: absolute;
            left: 50%;
            margin-left: -11px;
            top: 50%;
            margin-top: -11px;
            width: 22px;
            height: 22px;
            border-radius: 22px;
            border: 1px solid #c7c7cc;
            .border-box();
        }
    }
    input[type="checkbox"], input[type="radio"] {
        display: none;
        &:checked + .item-media{
            i.icon-form-checkbox:after {
                border: none;
                background: @blue url("@{imgBaseUrl}/i-form-checkbox-white.png") no-repeat center;
                -webkit-background-size: auto 9px;
                background-size: auto 9px;
            }
        }
    }
}
label.label-radio {
    cursor: pointer;
    input[type="checkbox"], input[type="radio"] {
        display: none;
        ~ .item-inner {
            padding-right: 35px;
        }
        &:checked ~ .item-inner{
            background: url("@{imgBaseUrl}/i-form-radio-blue.png") no-repeat center;
            background-position: ~"-webkit-calc(100% - 15px)" center;
            background-position: ~"-moz-calc(100% - 15px)" center;
            background-position: ~"-ms-calc(100% - 15px)" center;
            background-position: ~"calc(100% - 15px)" center;
            -webkit-background-size: auto 10px;
            background-size: auto 10px;
        }
    }
}
label.label-checkbox, label.label-radio {
    .transition(300ms);
    &:active {
        .transition(0ms);
        background-color: #d9d9d9;
        .item-inner {
            border-bottom: 1px solid transparent;
        }
    }
}

// Smart selects
.smart-select {
    select {
        display: none;
    }
}


First shot at supernapie colors

First shot at supernapie colors

fatal: unable to access 'https://github.com/Quinten/supernapietheme.git/': The requested URL returned error: 403


Add global notification for the landing page email confirmed message

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/hevnly/asset-bazaar.git/'


Improve notification style when there is no descrption

@import "../../style/themes/default";
@import "../../style/mixins/index";

@notification-prefix-cls: ~"@{ant-prefix}-notification";
@notification-width: 335px;
@notification-padding: 16px;
@notification-margin-bottom: 10px;

.@{notification-prefix-cls} {
  position: fixed;
  z-index: @zindex-notification;
  width: @notification-width;
  margin-right: 24px;

  &-notice {
    padding: @notification-padding;
    border-radius: @border-radius-base;
    box-shadow: @shadow-2;
    background: @component-background;
    line-height: 1.5;
    position: relative;
    margin-bottom: @notification-margin-bottom;
    overflow: hidden;

    &-message {
      font-size: @font-size-lg;
      color: @heading-color;
      margin-bottom: 4px;
      line-height: 20px;
    }

    &-description {
      font-size: @font-size-base;
    }

    &-closable &-message {
      padding-right: 24px;
    }

    &-with-icon &-message {
      font-size: @font-size-lg;
      margin-left: 48px;
      margin-bottom: 4px;
    }

    &-with-icon &-description {
      margin-left: 48px;
      font-size: @font-size-base;
    }

    &-icon {
      float: left;
      font-size: 32px;
      line-height: 32px;

      &-success {
        color: @success-color;
      }
      &-info {
        color: @primary-color;
      }
      &-warning {
        color: @warning-color;
      }
      &-error {
        color: @error-color;
      }
    }

    &-close-x:after {
      font-size: @font-size-base;
      content: "\e633";
      font-family: "anticon";
      cursor: pointer;
    }

    &-close {
      position: absolute;
      right: 16px;
      top: 10px;
      color: @text-color-secondary;
      outline: none;
      &:hover {
        color: #404040;
      }
    }

    &-btn {
      float: right;
      margin-top: 16px;
    }
  }

  .notification-fade-effect {
    animation-duration: 0.24s;
    animation-fill-mode: both;
    animation-timing-function: @ease-in-out;
  }

  &-fade-enter,
  &-fade-appear {
    opacity: 0;
    .notification-fade-effect();
    animation-play-state: paused;
  }

  &-fade-leave {
    .notification-fade-effect();
    animation-duration: 0.2s;
    animation-play-state: paused;
  }

  &-fade-enter&-fade-enter-active,
  &-fade-appear&-fade-appear-active {
    animation-name: NotificationFadeIn;
    animation-play-state: running;
  }

  &-fade-leave&-fade-leave-active {
    animation-name: NotificationFadeOut;
    animation-play-state: running;
  }
}

@keyframes NotificationFadeIn {
  0% {
    opacity: 0;
    left: @notification-width;
  }
  100% {
    left: 0;
    opacity: 1;
  }
}

@keyframes NotificationFadeOut {
  0% {
    opacity: 1;
    margin-bottom: @notification-margin-bottom;
    padding-top: @notification-padding;
    padding-bottom: @notification-padding;
    max-height: 150px;
  }
  100% {
    opacity: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    max-height: 0;
  }
}

@import "../../style/themes/default";
@import "../../style/mixins/index";

@notification-prefix-cls: ~"@{ant-prefix}-notification";
@notification-width: 335px;
@notification-padding: 16px;
@notification-margin-bottom: 10px;

.@{notification-prefix-cls} {
  position: fixed;
  z-index: @zindex-notification;
  width: @notification-width;
  margin-right: 24px;

  &-notice {
    padding: @notification-padding;
    border-radius: @border-radius-base;
    box-shadow: @shadow-2;
    background: @component-background;
    line-height: 1.5;
    position: relative;
    margin-bottom: @notification-margin-bottom;
    overflow: hidden;

    &-message {
      font-size: @font-size-lg;
      color: @heading-color;
      margin-bottom: 4px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      line-height: 20px;
    }

    &-description {
      font-size: @font-size-base;
    }

    &-closable &-message {
      padding-right: 24px;
    }

    &-with-icon &-message {
      font-size: @font-size-lg;
      margin-left: 48px;
      margin-bottom: 4px;
    }

    &-with-icon &-description {
      margin-left: 48px;
      font-size: @font-size-base;
    }

    &-icon {
      position: absolute;
      left: 16px;
      top: 17px;
      font-size: 32px;
      line-height: 32px;

      &-success {
        color: @success-color;
      }
      &-info {
        color: @primary-color;
      }
      &-warning {
        color: @warning-color;
      }
      &-error {
        color: @error-color;
      }
    }

    &-close-x:after {
      font-size: @font-size-base;
      content: "\e633";
      font-family: "anticon";
      cursor: pointer;
    }

    &-close {
      position: absolute;
      right: 16px;
      top: 10px;
      color: @text-color-secondary;
      outline: none;
      &:hover {
        color: #404040;
      }
    }

    &-btn {
      float: right;
      margin-top: 16px;
    }
  }

  .notification-fade-effect {
    animation-duration: 0.24s;
    animation-fill-mode: both;
    animation-timing-function: @ease-in-out;
  }

  &-fade-enter,
  &-fade-appear {
    opacity: 0;
    .notification-fade-effect();
    animation-play-state: paused;
  }

  &-fade-leave {
    .notification-fade-effect();
    animation-duration: 0.2s;
    animation-play-state: paused;
  }

  &-fade-enter&-fade-enter-active,
  &-fade-appear&-fade-appear-active {
    animation-name: NotificationFadeIn;
    animation-play-state: running;
  }

  &-fade-leave&-fade-leave-active {
    animation-name: NotificationFadeOut;
    animation-play-state: running;
  }
}

@keyframes NotificationFadeIn {
  0% {
    opacity: 0;
    left: @notification-width;
  }
  100% {
    left: 0;
    opacity: 1;
  }
}

@keyframes NotificationFadeOut {
  0% {
    opacity: 1;
    margin-bottom: @notification-margin-bottom;
    padding-top: @notification-padding;
    padding-bottom: @notification-padding;
    max-height: 150px;
  }
  100% {
    opacity: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    max-height: 0;
  }
}


added vendor/prefixer.less.

added vendor/prefixer.less.

//---------------------------------------------------
//  LESS Prefixer
//---------------------------------------------------
//
//  All of the CSS3 fun, none of the prefixes!
//
//  As a rule, you can use the CSS properties you
//  would expect just by adding a '.':
//
//  box-shadow => .box-shadow(@args)
//
//  Also, when shorthand is available, arguments are
//  not parameterized. Learn CSS, not LESS Prefixer.
//
//  -------------------------------------------------
//  TABLE OF CONTENTS
//  (*) denotes a syntax-sugar helper
//  -------------------------------------------------
//
//      .animation(@args)
//          .animation-delay(@delay)
//          .animation-direction(@direction)
//          .animation-duration(@duration)
//          .animation-fill-mode(@mode)
//          .animation-iteration-count(@count)
//          .animation-name(@name)
//          .animation-play-state(@state)
//          .animation-timing-function(@function)
//      .background-size(@args)
//      .border-radius(@args)
//      .box-shadow(@args)
//          .inner-shadow(@args) *
//      .box-sizing(@args)
//          .border-box() *
//          .content-box() *
//      .columns(@args)
//          .column-count(@count)
//          .column-gap(@gap)
//          .column-rule(@args)
//          .column-width(@width)
//      .gradient(@default,@start,@stop) *
//          .linear-gradient-top(@default,@color1,@stop1,@color2,@stop2,[@color3,@stop3,@color4,@stop4])*
//          .linear-gradient-left(@default,@color1,@stop1,@color2,@stop2,[@color3,@stop3,@color4,@stop4])*
//      .opacity(@factor)
//      .transform(@args)
//          .transform-origin(@args)
//          .transform-style(@style)
//          .rotate(@deg)
//          .scale(@factor)
//          .translate(@x,@y)
//          .translate3d(@x,@y,@z)
//          .translateHardware(@x,@y) *
//      .text-shadow(@args)
//      .transition(@args)
//          .transition-delay(@delay)
//          .transition-duration(@duration)
//          .transition-property(@property)
//          .transition-timing-function(@function)
//      Flexbox:
//          .flex-block()
//          .flex-inline()
//              .flex-flow(@direction: row, @wrap: nowrap)
//                  .flex-direction(@direction: row)
//                  .flex-wrap(@wrap: nowrap)
//              .justify-content(@justification)
//              .align-items(@mode)
//              .align-content(@alignment)
//              .flex(@args: none)
//                  .flex-grow(@grow: 1)
//                  .flex-shrink(@shrink: 1)
//                  .flex-basis(@basis: auto)
//              .order(@num: 0)
//              .align-self(@align: auto)
//
//  Credit to LESS Elements for the motivation and
//  to CSS3Please.com for implementation.
//
//  Copyright (c) 2012 Joel Sutherland
//  MIT Licensed:
//  http://www.opensource.org/licenses/mit-license.php
//
//---------------------------------------------------

// Animation

.animation(@args) {
    -webkit-animation: @args;
    -moz-animation: @args;
    -ms-animation: @args;
    -o-animation: @args;
    animation: @args;
}
.animation-delay(@delay) {
    -webkit-animation-delay: @delay;
    -moz-animation-delay: @delay;
    -ms-animation-delay: @delay;
    -o-animation-delay: @delay;
    animation-delay: @delay;
}
.animation-direction(@direction) {
    -webkit-animation-direction: @direction;
    -moz-animation-direction: @direction;
    -ms-animation-direction: @direction;
    -o-animation-direction: @direction;
}
.animation-duration(@duration) {
    -webkit-animation-duration: @duration;
    -moz-animation-duration: @duration;
    -ms-animation-duration: @duration;
    -o-animation-duration: @duration;
}
.animation-fill-mode(@mode) {
    -webkit-animation-fill-mode: @mode;
    -moz-animation-fill-mode: @mode;
    -ms-animation-fill-mode: @mode;
    -o-animation-fill-mode: @mode;
    animation-fill-mode: @mode;
}
.animation-iteration-count(@count) {
    -webkit-animation-iteration-count: @count;
    -moz-animation-iteration-count: @count;
    -ms-animation-iteration-count: @count;
    -o-animation-iteration-count: @count;
    animation-iteration-count: @count;
}
.animation-name(@name) {
    -webkit-animation-name: @name;
    -moz-animation-name: @name;
    -ms-animation-name: @name;
    -o-animation-name: @name;
    animation-name: @name;
}
.animation-play-state(@state) {
    -webkit-animation-play-state: @state;
    -moz-animation-play-state: @state;
    -ms-animation-play-state: @state;
    -o-animation-play-state: @state;
    animation-play-state: @state;
}
.animation-timing-function(@function) {
    -webkit-animation-timing-function: @function;
    -moz-animation-timing-function: @function;
    -ms-animation-timing-function: @function;
    -o-animation-timing-function: @function;
    animation-timing-function: @function;
}

// Background Size

.background-size(@args) {
    -webkit-background-size: @args;
    background-size: @args;
}

// Border Radius

.border-radius(@args) {
    -webkit-border-radius: @args;
    border-radius: @args;

    background-clip: padding-box;
}

// Box Shadows

.box-shadow(@args) {
    -webkit-box-shadow: @args;
    box-shadow: @args;
}
.inner-shadow(@args) {
    .box-shadow(inset @args);
}

// Box Sizing

.box-sizing(@args) {
    -webkit-box-sizing: @args;
    -moz-box-sizing: @args;
    box-sizing: @args;
}
.border-box(){
    .box-sizing(border-box);
}
.content-box(){
    .box-sizing(content-box);
}

// Columns

.columns(@args) {
    -webkit-columns: @args;
    -moz-columns: @args;
    columns: @args;
}
.column-count(@count) {
    -webkit-column-count: @count;
    -moz-column-count: @count;
    column-count: @count;
}
.column-gap(@gap) {
    -webkit-column-gap: @gap;
    -moz-column-gap: @gap;
    column-gap: @gap;
}
.column-width(@width) {
    -webkit-column-width: @width;
    -moz-column-width: @width;
    column-width: @width;
}
.column-rule(@args) {
    -webkit-column-rule: @args;
    -moz-column-rule: @args;
    column-rule: @args;
}

// Gradients

.gradient(@default: #F5F5F5, @start: #EEE, @stop: #FFF) {
    .linear-gradient-top(@default,@start,0%,@stop,100%);
}
.linear-gradient-top(@default,@color1,@stop1,@color2,@stop2) {
    background-color: @default;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(@stop1, @color1), color-stop(@stop2 @color2));
    background-image: -webkit-linear-gradient(top, @color1 @stop1, @color2 @stop2);
    background-image: -moz-linear-gradient(top, @color1 @stop1, @color2 @stop2);
    background-image: -ms-linear-gradient(top, @color1 @stop1, @color2 @stop2);
    background-image: -o-linear-gradient(top, @color1 @stop1, @color2 @stop2);
    background-image: linear-gradient(top, @color1 @stop1, @color2 @stop2);
}
.linear-gradient-top(@default,@color1,@stop1,@color2,@stop2,@color3,@stop3) {
    background-color: @default;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(@stop1, @color1), color-stop(@stop2 @color2), color-stop(@stop3 @color3));
    background-image: -webkit-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3);
    background-image: -moz-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3);
    background-image: -ms-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3);
    background-image: -o-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3);
    background-image: linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3);
}
.linear-gradient-top(@default,@color1,@stop1,@color2,@stop2,@color3,@stop3,@color4,@stop4) {
    background-color: @default;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(@stop1, @color1), color-stop(@stop2 @color2), color-stop(@stop3 @color3), color-stop(@stop4 @color4));
    background-image: -webkit-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
    background-image: -moz-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
    background-image: -ms-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
    background-image: -o-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
    background-image: linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
}
.linear-gradient-left(@default,@color1,@stop1,@color2,@stop2) {
    background-color: @default;
    background-image: -webkit-gradient(linear, left top, left top, color-stop(@stop1, @color1), color-stop(@stop2 @color2));
    background-image: -webkit-linear-gradient(left, @color1 @stop1, @color2 @stop2);
    background-image: -moz-linear-gradient(left, @color1 @stop1, @color2 @stop2);
    background-image: -ms-linear-gradient(left, @color1 @stop1, @color2 @stop2);
    background-image: -o-linear-gradient(left, @color1 @stop1, @color2 @stop2);
    background-image: linear-gradient(left, @color1 @stop1, @color2 @stop2);
}
.linear-gradient-left(@default,@color1,@stop1,@color2,@stop2,@color3,@stop3) {
    background-color: @default;
    background-image: -webkit-gradient(linear, left top, left top, color-stop(@stop1, @color1), color-stop(@stop2 @color2), color-stop(@stop3 @color3));
    background-image: -webkit-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3);
    background-image: -moz-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3);
    background-image: -ms-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3);
    background-image: -o-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3);
    background-image: linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3);
}
.linear-gradient-left(@default,@color1,@stop1,@color2,@stop2,@color3,@stop3,@color4,@stop4) {
    background-color: @default;
    background-image: -webkit-gradient(linear, left top, left top, color-stop(@stop1, @color1), color-stop(@stop2 @color2), color-stop(@stop3 @color3), color-stop(@stop4 @color4));
    background-image: -webkit-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
    background-image: -moz-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
    background-image: -ms-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
    background-image: -o-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
    background-image: linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
}

// Opacity

.opacity(@factor) {
    @iefactor: @factor*100;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=@{iefactor})";
    filter: ~"alpha(opacity=(@{iefactor}))";
    opacity: @factor;
}

// Text Shadow

.text-shadow(@args) {
    text-shadow: @args;
}

// Transforms

.transform(@args) {
    -webkit-transform: @args;
    -moz-transform: @args;
    -ms-transform: @args;
    -o-transform: @args;
    transform: @args;
}
.transform-origin(@args) {
    -webkit-transform-origin: @args;
    -moz-transform-origin: @args;
    -ms-transform-origin: @args;
    -o-transform-origin: @args;
    transform-origin: @args;
}
.transform-style(@style) {
    -webkit-transform-style: @style;
    -moz-transform-style: @style;
    -ms-transform-style: @style;
    -o-transform-style: @style;
    transform-style: @style;
}
.rotate(@deg:45deg){
    .transform(rotate(@deg));
}
.scale(@factor:.5){
    .transform(scale(@factor));
}
.translate(@x,@y){
    .transform(translate(@x,@y));
}
.translate3d(@x,@y,@z) {
    .transform(translate3d(@x,@y,@z));
}
.translateHardware(@x,@y) {
    .translate(@x,@y);
    -webkit-transform: translate3d(@x,@y,0);
    -moz-transform: translate3d(@x,@y,0);
    -o-transform: translate3d(@x,@y,0);
    -ms-transform: translate3d(@x,@y,0);
    transform: translate3d(@x,@y,0);
}

// Transitions

.transition(@args:200ms) {
    -webkit-transition: @args;
    -moz-transition: @args;
    -o-transition: @args;
    -ms-transition: @args;
    transition: @args;
}
.transition-delay(@delay:0) {
    -webkit-transition-delay: @delay;
    -moz-transition-delay: @delay;
    -o-transition-delay: @delay;
    -ms-transition-delay: @delay;
    transition-delay: @delay;
}
.transition-duration(@duration:200ms) {
    -webkit-transition-duration: @duration;
    -moz-transition-duration: @duration;
    -o-transition-duration: @duration;
    -ms-transition-duration: @duration;
    transition-duration: @duration;
}
.transition-property(@property:all) {
    -webkit-transition-property: @property;
    -moz-transition-property: @property;
    -o-transition-property: @property;
    -ms-transition-property: @property;
    transition-property: @property;
}
.transition-timing-function(@function:ease) {
    -webkit-transition-timing-function: @function;
    -moz-transition-timing-function: @function;
    -o-transition-timing-function: @function;
    -ms-transition-timing-function: @function;
    transition-timing-function: @function;
}

// Flexbox
.flex-block() {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
.flex-inline() {
    display: -ms-inline-flexbox;
    display: -webkit-inline-flex;
    display: inline-flex;
}
.flex-flow(@direction: row, @wrap: nowrap) {
    -moz-flex-flow: @direction @wrap;
    -ms-flex-direction: @direction;
    -ms-flex-wrap: @wrap;
    -webkit-flex-flow: @direction @wrap;
    flex-flow: @direction @wrap;
}
.align-content(@alignment) {
    -moz-align-content: @alignment;
    -ms-align-content: @alignment;
    -webkit-align-content: @alignment;
    align-content: @alignment;
}
.flex-direction(@direction: row) {
    -webkit-flex-direction: @direction;
    -moz-flex-direction: @direction;
    -ms-flex-direction: @direction;
    flex-direction: @direction;
}
.flex-wrap(@wrap: nowrap) {
    -webkit-flex-wrap: @wrap;
    -moz-flex-wrap: @wrap;
    -ms-flex-wrap: @wrap;
    flex-wrap: @wrap;
}
.justify-content(@justification) {
    -webkit-box-pack: @justification;
    -moz-box-pack: @justification;
    -ms-flex-pack: @justification;
    -webkit-justify-content: @justification;
    justify-content: @justification;
}
.align-items(@mode) {
    -webkit-box-align: @mode;
    -moz-box-align: @mode;
    -ms-flex-align: @mode;
    -webkit-align-items: @mode;
    align-items: @mode;
}
.flex(@args: none) {
    -webkit-flex: @args;
    -moz-flex: @args;
    -ms-flex: @args;
    -webkit-flex: @args;
    flex: @args;

}
.order(@num: 0) {
    -webkit-box-ordinal-group: @order;
    -moz-box-ordinal-group: @order;
    -ms-box-ordinal-group: @order;
    -ms-flex-order: @order;
    -webkit-order: @order;
    -moz-order: @order;
    -ms-order: @order;
    order: @order;
}
.flex-grow(@grow: 1) {
    -webkit-flex-grow: @grow;
    -moz-flex-grow: @grow;
    -ms-flex-grow: @grow;
    -webkit-flex-grow: @grow;
    flex-grow: @grow;
}
.flex-shrink(@shrink: 1) {
    -webkit-flex-shrink: @shrink;
    -moz-flex-shrink: @shrink;
    -ms-flex-shrink: @shrink;
    -webkit-flex-shrink: @shrink;
    flex-shrink: @shrink;
}
.flex-basis(@basis: auto) {
    -webkit-flex-basis: @basis;
    -moz-flex-basis: @basis;
    -ms-flex-basis: @basis;
    -webkit-flex-basis: @basis;
    flex-basis: @basis;
}
.align-self(@align: auto) {
    -webkit-align-self: @align;
    -moz-align-self: @align;
    -ms-align-self: @align;
    -webkit-align-self: @align;
    align-self: @align;
}

error: pathspec 'vendor/prefixer.less' did not match any file(s) known to git


Fix deck ipad landscape

Fix deck ipad landscape

fatal: unable to access 'https://github.com/Livefyre/CES-2013-NewsHub.git/': The requested URL returned error: 403


Fix typo

Fix typo

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/spacelis/ckan-ckanext-cdrc.git/'


update

update

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/yyssc/ssc30-admin.git/'


added less rows that were broken in merge conflict

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/leonidas/qa-dashboard.git/'


added just a bit of padding at the top of questions

/*
  © 2013 Open Data Institute

  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.

*= require_self
*= require surveyor_all
*/

/* import bootstrap this way so that we can alter variables just for this app */
@import "twitter/bootstrap";

// override bootstrap variables here, see options at:
//   https://github.com/twitter/bootstrap/blob/master/less/variables.less
@iconSpritePath:          "glyphicons-halflings.png";
@iconWhiteSpritePath:     "glyphicons-halflings-white.png";

// use our own grey for the input field
@gray: @odiGrey;
@placeholderText: @odiGreyLight;
@inputBorderRadius: 2px;

// todo - use bigger size instead
@gridColumns:             12;
@gridColumnWidth:         70px;
@gridGutterWidth:         30px;
@gridRowWidth:            (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));

@odiBlue: #00b7ff;
/* odiBlueLight - primarily for background of inputs in modals */
@odiBlueLight: lighten(@odiBlue, 15%);
@odiBlueLighter: lighten(@odiBlue, 36%);
@odiBlueDark: darken(@odiBlue, 5%);
@odiBlueDarker: darken(@odiBlue, 20%);

@odiRed: #ff6700;
@odiRedDark: darken(@odiRed, 3%);
@odiRedLight: lighten(@odiRed, 15%);

@odiCrimson: #d30102;
@odiCrimsonDark: darken(@odiCrimson, 6%);
@odiCrimsonLight: lighten(@odiCrimson, 53%);

@odiOrange: #f99C06;
@odiOrangeDark: darken(@odiOrange, 6%);

@odiGreen: #0DBC37;
@odiGreenDark: darken(@odiGreen, 6%);

@odiPomegranate: #dc4810;

@odiGrey: #aaa;
@odiGreyDark: darken(@odiGrey, 18%);
@odiGreyDarker: darken(@odiGrey, 40%);
@odiGreyLight: lighten(@odiGrey, 25%);
@odiGreyLighter: lighten(@odiGrey, 40%);

@btnPrimaryBackground: @odiRed;
@btnPrimaryBackgroundHighlight: @odiRed;
@btnInfoBackground:  @odiBlue;
@btnInfoBackgroundHighlight: @odiBlue;

@odiGrey: #8e8c8c;

@basic: #0dbd37;
@pilot: #ef3aab;
@standard: #2254f3;
@exemplar: #f9bc26;

// @headingsFontFamily:    'Open Sans',sans-serif;
// @headingsFontWeight:    400;

// todo - use bigger size instead
@gridColumns:             12;
@gridColumnWidth:         70px;
@gridGutterWidth:         30px;
@gridRowWidth:            (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));

/*
//
// ***** Modal - Create certificate *****
//
*/
.modal {

  background: @odiBlue;
  width: 788px;
  margin-left: -394px;
  .border-radius(0);

  h1 {

    margin-top: -7px;
    margin-bottom: 40px;
    font-size: 30px;
    color: #2f2f2f;

  }

  p { color: #fff; font-size: 20px; }

  .btn-large { width: 100%; .box-sizing(border-box); margin: 12px 0; }

  form { margin-bottom: 0; }

}

.modal-header {

  border-bottom: 0;
  margin: 30px;
  padding: 0;

  h3 {

    color: #fff;
    font-size: 36px;
    font-weight: normal;

  }

}

.modal-body {

  padding-left: 50px;
  padding-right: 50px;
  padding-bottom: 40px;

}

.modal-body {

  .log-in {

    background: url(/assets/modal-divider.gif) repeat-y top right;

    label {

      color: #fff;
      font-size: 20px;

    }

    .form-field {

      margin-bottom: 10px;

      input[type=email], input[type=password] {

        margin-top: 5px;
        background: @odiBlueLight;
        border: 1px solid #fff;
        .border-radius(0);
        width: 93%;
        height: 60px;
        padding: 0 10px;
        font-size: 20px;
        color: white;

      }

      /* Making input text white loses the 'invalid' colour */
      /* Add it back */
      input[type=email]:invalid { color: #cc0000; }
      input[type=email]:valid { color: #fff; }

    }

    .form-field-inline {

      float: left;
      margin: -4px 0 0 0;

      input[type=checkbox] { margin: -3px 0 0 0; }

      label { font-size: 14px; color: #2f2f2f; display: inline; }
      label:hover { text-decoration: underline; }

      .forgot-password {

        display: block;
        font-size: 14px;
        color: #2f2f2f;
        margin-left: 17px;

      }

    }

    /* Sign in button used on many pages as orange primary button */
    /* Needs to be overridden to be blue info button in modals */
    .btn-primary {

      background: @odiBlueDark;
      height: auto;
      padding: 10px 20px;
      float: right;
      margin: -5px 22px 5px 0;
      font-size: 18px;
      font-weight: bold;

    }

    .btn-primary:active, .btn-primary:hover, .btn-primary:focus {

      background: @odiBlueDarker;

    }

    .sign_in_user_form_errors {
      width: 93%;
    }

  }

}

/************************************************
    Bootstrap --> Rails
************************************************/

// display error messages in alert block
#error_explanation {
  .alert();
  .alert-error();
  .alert-block();
}

.field_with_errors {
  .control-group.error();
}

/************************************************
    ODI Styling
************************************************/
// source https://github.com/theodi/less-rails-bootstrap/blob/master/vendor/frameworks/twitter/bootstrap/odi.less

// Global styles //

body {
  background-color: #fff;
  font-size: 18px;
}

// Typography //

h1 {
  font-weight: normal;
}

p {
  font-size: 18px;
  line-height: 24px;
}

p.lead {
  font-size: 17px;
  color: @odiGrey;
  margin-bottom: 30px;
}

dl {
  margin: 0 0 45px;
}

dt, dd {
  margin: 15px 0;
}

dd {
  margin-bottom: 30px;
}

// make grey input text read easier
input, textarea{
  -webkit-font-smoothing: antialiased;
  .box-shadow(none);
}

.btn-small {
  &, &:active, &:hover, &:focus {
    text-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
  }
}

.btn-info {
  background: @odiBlue;

  &.btn-unstyled {
    &, &:active, &:hover, &:focus {
      font-size: 15px;
      color: @odiBlue;
      padding: 0;
      background: none;
    }
  }

  &:active, &:hover, &:focus {
    background: @odiBlueDark;
  }
}

.btn-info-modal {
  background: @odiBlueDark;
}

.btn-info-modal:active, .btn-info-modal:hover, .btn-info-modal:focus {
  background: @odiBlueDarker;
}

.btn-primary {
  background: @odiRed;
}

.btn-primary:active, .btn-primary:hover, .btn-primary:focus {
  background: @odiRedDark;
}

.btn-large {
  font-size: 18px;
  padding: 10px 20px;
}

.btn-small, .btn-small:active, .btn-small:hover {
  padding: 3px 25px;
  font-size: 13px;
  color: white;
  border: none;
  text-shadow: none;
}

// snap the header to the top when it's affixed
header.affix {
    top: 0px;
    width:100%;
    z-index:10;
}

#padd {
  .container {
    margin-top: 50px;

    h1 {
      font-size: 70px;
      line-height: 80px
    }

    h2 {
      font-size: 30px;
      line-height: 40px;
      margin-bottom: 40px;
    }
  }

  .btn {
    display: block;
    margin-bottom: 20px;
  }

  button.btn {
    width: 100%;
  }
}

.odi-bleed {
  background:#fff url("/assets/splat.png") no-repeat top left fixed;
  background-position: 0 -450px;
}

.home {
  text-align: center;

  /* Remove bottom padding so background image can hit bottom */
  padding-bottom: 0;

  h1 {
    color: @odiBlueDarker;
    font-size: 36px;
    margin-bottom: 30px;
    text-shadow: -1px -1px 0px rgba(255,255,255, 0.25);
  }

  .steps {

    /* Background stripes (image has 30px of space on left to align) */
    background: url(/assets/background-home-header.gif) repeat-y center;
    margin-bottom: 20px;

    .span4 {

      /* Make sure there's a gap between bottom of steps text and top of ODI logo/buttons */
      padding-bottom: 20px;

    }

  }

  .span4 {

    // padd in the content
    h2, p{
      padding: 0 20px;
    }
    p{
      padding-bottom:20px;
    }

    h2 {
      font-size: 70px;
      color: @odiBlueDarker;
      font-weight: bold;
      text-shadow: -1px -1px 0px rgba(255,255,255, 0.25);

      small {
        display: block;
        color: #fff;
        font-size: 30px;
        padding: 30px 0 10px;
        text-shadow: none;
      }
    }

    form {
      margin: 0;

      .btn {
        position: relative;
        top: 40px;
      }
    }
  }
}

.home-header-buttons {

  .row {

    height: 88px;

  }

  .span4 {
    text-align: center;

    .logo {

      /* Small ODI logo, hide text */
      background: url(/assets/ODI_kitemark-75x75.png) no-repeat center;
      text-indent: 100%;
      white-space: nowrap;
      overflow: hidden;
      margin: -34px auto 0 auto;
      width: 76px; height: 68px;

    }

    .btn-primary {
      margin-top: -20px;
    }
  }
}

.homepage-about-content {

  h2 {
    font-weight: normal;
  }

  h2.about-certificate { margin-top: -7px; }

  h2.about-odi {
    border-top: 1px solid #e1e1e1;
    padding-top: 20px;
    margin-top: 25px;
  }
}

h3 {
  font-size: 19px;
}

h4 {
  font-size: 16px;
  font-weight: normal;
  color: @odiGrey;
  margin-bottom: 15px;
}

hr {
  margin: 12px 0;
}

hr.heavy {
  border: 0;
  height: 5px;
  background: url(divider.png);
}

// Layout //

body {
  min-width: 1210px;
}

.container {
  padding: 0 20px;
}

.navbar-inner {
  padding: 0;
  height: 60px;
}

#topbar {
  background: #1b1b1b;

  ul {
    border-right: 1px solid #707070;

    li {
      margin: 0;
      padding:0;
      height: 60px;
      border-left: 1px solid #707070;

      a {
        color: #fff;
        padding: 20px;
      }

      a:hover, a.active {
        background-color: @odiRed;
      }
    }
  }

  .label {
    top: -15px;
    position: relative;
    padding-top: 10px;
    background-color: @odiBlue;
  }
}

#mainnav {
  margin-bottom: 0;
  position: relative;
  background-color: rgba(255,255,255,0.65);

  .navbar-inner {
    background: none;
    border-radius: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    border-bottom: none;
    background-image: none;

    li {
      position: relative;

      a, button {
        background-color: transparent;
        border: none;
        color: #000;
        padding: 20px;
        font-size: 18px;
        text-shadow: 0 1px 0 #ffffff;
      }
      a:hover, button:hover {
        color: @odiBlue;
      }

      form {
        margin: 0;
      }
    }

    li.active a, li.active button {
      color: @odiBlue;
    }

    .arrow-down {
      width: 0;
      height: 0;
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      border-top: 8px solid #fff;
      margin: 0 0 0 -8px;
      position: absolute;
      left: 50%;
    }
  }
}

.navbar .nav > .active > a {
  &, &:hover, &:focus {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
  }
}

nav .dropdown-menu-button {
  z-index: 10;
  position: relative;
}

#login, #register {
  display: none;
  position: absolute;
  right: 0;
  width: 450px;
  padding: 30px 25px;
  background: @odiRed;
  color: white;

  label {
    font-size: 19px;
    margin-bottom: 10px;
  }

  input[type="text"], input[type="email"], input[type="password"] {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    border: 1px solid white;
    background: @odiRedLight;
    height: 45px;
    width: 425px;
    margin-bottom: 20px;
  }

  .form-field-inline {
    float: left;

    label {
      font-size: 15px;
      display: inline;
    }
  }

  .btn-primary {
    float: right;
    background: @odiPomegranate;
    border: none;
    -webkit-box-shadow: none;
    -moz-box-shadow:none;
    box-shadow: none;
    padding: 4px 15px;
  }

  &.active {
    display: block;
  }
}

header {
  background-color: @odiBlue;
  color: #fff;
  padding: 10px 0;

  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;

  .container {
    min-height: 60px;
  }

  h1,h2,h3,h4,h5,h6{
    font-weight:normal;
  }
}

.container.main {
  margin-top: 50px;
}

#footer {
  background-color: #000;
  font-size: 0.88em;
  color: #adaeaf;
  padding-top: 40px;
  padding-bottom: 52px;

  .footer-content {

    margin-left: 0;

    h1 {

      /* ODI logo, hide text */
      background: url(/assets/logo-footer.png) no-repeat top left;
      text-indent: 100%;
      white-space: nowrap;
      overflow: hidden;
      margin: 0 0 30px 0;
      width: 204px; height: 49px;

      a { display: block; }

    }

  }
  .footer-nav { margin-left: 30px; }

  a {
    color: #adaeaf;
    text-decoration: none;
  }

  a:hover { color: #fff; }

  ul {
    list-style: none outside none;
    margin: -4px 0 0 0;

    li {
      display: inline;
      margin-left: 20px;
    }
  }

  p {
    margin: 0px;
    font-size: 16px;
  }

  p.license { margin-top: 30px; }

}

section {
  //background-color: white;
  // margin: 15px 0;
  // padding: 10px 0;
}

.whiteout {
  background-color:rgba(255,255,255,0.65);

  /* Make sure there's a gap between bottom of content and top of footer */
  padding-bottom: 55px;

}

.hero-unit {
  background: none;
  padding: 0;
  margin: 0;

  .centered {
    margin-left: auto;
    margin-right: auto;
  }

  h1, h2, p, small, span {
    text-align: center;
  }

  h1 {
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 20px;
    letter-spacing: 0.5px;
  }

  p {
    font-size: 23px;
  }
}

// Alert messages //

.flash {
  margin-top: 20px;
}

.alert {
  color: white;
  padding: 14px 12px;
  text-shadow: 1px 1px rgba(0, 0, 0, 0.3);
  vertical-align: middle;

  .icon-large {
    margin-bottom: 1px;
    margin-right: 6px;
    vertical-align: middle;
  }

  .close, .close:hover, .close:active {
    opacity: 1;
    width: 14px;
    height: 14px;
    position: static;
    background-image: url(/assets/glyphicons-halflings-white.png);
    background-position: -312px 0;
  }
}

.alert-alert {
  background: @odiCrimson;
  border: 1px solid @odiCrimsonDark;
}

.alert-warning {
  background: @odiOrange;
  border: 1px solid @odiOrangeDark;
}

.alert-notice {
  background: @odiGreen;
  border: 1px solid @odiGreenDark;
}

#topbar .alert-box {
  h3 {
    display: inline;
    line-height: 20px;
    vertical-align: middle;
  }

  ul {
    border: none;

    li {
      height: auto;
      font-size: 16px;
      border: none;
    }
  }
}

// Icons //

.icon-large {

  width: 28px;
  height: 28px;
  background-image: url(/assets/glyphicons.png);

  &.icon-white {
    background-image: url(/assets/glyphicons_white.png);
  }

  // Spacing between icons in file
  @spacing: -48px;

  // Mixin to help select correct icon
  .icon-position(@top, @left) {
    background-position: @spacing * @left (@spacing * @top) + 1;
  }

  &.icon-ok-sign { .icon-position(19, 3); }
  &.icon-info-sign { .icon-position(19, 5); }
  &.icon-exclamation-sign { .icon-position(19, 6); }
  &.icon-ban-circle { .icon-position(19, 9); }
}

// Tables //

table {
  width: 100%;
  font-size: 15px;
}

th {
  font-weight: normal;
}

// Forms //

.main-default {
  margin-top: 30px;

  .form-field {
    .clearfix;
    margin-bottom: 35px;

    &.form-field-inline {
      input {
        margin: 0 10px;
        height: 30px;
      }
      label {
        display: inline;
      }
    }
  }

  input {
    height: 60px;
    font-size: 20px;
    padding: 0 10px;
    margin: 15px 0;
  }

  input[type='submit'] {
    margin: 15px 0 30px;
  }

  label {
    font-size: 22px;
  }

  i {
    font-size: 15px;
    font-style: normal;
    color: @odiGrey;
    display: block;
  }
}

// User auth //

.user-links {
  .clearfix;
  margin-bottom: 15px;

  .btn {
    float: left;
    margin-right: 4px;
  }
}

// My certificates view //

.first-response-set {
  background: @odiBlueLighter;

  td.level {
    text-align: center;
    padding: 13px 30px 5px 15px;
    width: 48px;
  }

  td.last-updated {
    time {
      color: @odiGreyDarker;
    }
  }

  button.copy-certificate {
    padding: 8px 12px;
  }
}

.previous-response-set {

  td {
    height: 30px;
  }

  button.copy-certificate {
    text-align: left;
    position: relative;
    top: 7px;
  }
}

button.copy-certificate {
  font-size: 15px;
  line-height: 15px;
  font-weight: bold;

  span {
    display: block;
    font-size: 12px;
    font-weight: normal;
  }
}

button.copy-certificate:hover {
  font-size: 15px;
}

th.previous-title {
  font-size: 16px;
  text-align: left;
  color: @odiGreyDark;
  padding: 15px 0;
}

td.level {
  .certificate-badge {
    margin: 0 auto;
    width: 50px;
    height: 40px;
  }

  font-size: 12px;
  font-weight: bold;
  color: @odiGreyDark;
}

td.last-updated {
  width: 180px;;
  font-size: 12px;
  line-height: 17px;
  color: @odiGreyDark;

  time {
    font-size: 15px;
    display: block;
  }
}

td.status {
  width: 300px;
  font-size: 15px;

  &.published {
    color: @odiCrimson;
  }

  &.archived {
    color: @odiGreyDark;
  }

  &.editing {
    color: @odiGreyDarker;
    font-style: italic;
  }
}

td.action {
  width: 150px;

  form {
    margin: 0;
  }
}

// Questionnaire (survey) view //

#surveyor{

  padding-top:20px;

  header {
    margin:5px 0;
    h3{
      font-size: 27px;
    }
    h3, h4{
      color:@white;
      margin:0;
    }

    &.inactive{
      background-color:@odiGrey;
    }
    cursor: pointer;

    .transition(background-color 0.25s);

    // override
    .container{
      min-height: auto;
    }
  }

  .subsection-label{
    border-top:1px solid @odiGreyLighter;
    color:@odiBlue;
    font-weight: normal;
    padding:20px 0;
  }

  ol,ul{
    margin:auto;
  }

  // brought in from main styles
  label {
    font-size: 22px;
  }

  .choice input{
    margin-right:10px;
  }
  .choice label{
    font-size:16px;
    color:@gray;
    -webkit-font-smoothing: antialiased;
  }

  input.string{
    height: 60px;
    font-size: 23px;
    padding: 0 10px;
    margin: 15px 0;
  }

  // custom
  input.string{
    width:100%;
  }

  // this is our label replacement (for the question of multiple answers)
  .group_label{
    font-size: 22px
  }

  label small
  .group_label small{
    color:@odiGrey;
    font-size: 65%;
  }

  // repeated sections
  fieldset.g_repeater{
    legend {
      display: none;
    }
    ol fieldset.row {
      display: block;
    }
  }

  fieldset.question-row{
    position: relative;
    padding-top: 10px;
    aside{
      display:none;
      position:absolute;
      right:0;
      background-color:@odiBlueLighter;
      padding:20px;
      width:330px;

      &.answer-meta {
        top: 10px;
      }
    }
  }

  .question-meta{

  }

  // focussed elements
  fieldset.question-row.active{
    // hard to do the odd outline

    // outline: 1px solid @odiBlueLight;
    background-color: @odiBlueLighter;
  }

  &.highlight-mandatory{
    .mandatory{
      background-color:@odiCrimsonLight;
      &.has-response{
        background-color:@white;
      }
    }
  }

}

#status_panel{
  .transition(right 0.5s);
  background-color:@odiGreyLighter;
  position: absolute;
  right:0;
  width:280px;
  padding:20px;
  height:100%;
  z-index:5;

  right:-320px;

  // also .hover for oldie fallback
  &:hover, &.hover{
    right:0px;
  };

  &.affix, &.affix-bottom{
    position: fixed;
    top:130px;
  }

  #panel_handle{
    background-image:url(/assets/panel-handle.png);
    width:78px;
    height:72px;
    position: absolute;
    left:-78px;
  }

  h3 {
    margin-bottom: 0;
    display: inline;
    width: 50%;
  }

  img {
    display: inline;
    float: right;
  }

  .progress {
    margin-bottom: 10px;
    clear: both;
  }
}

// Certificate view //

.certificate-data {
  ul {
    .clearfix;
    margin-left: 0;
  }

  li {
    list-style-type: none;
    margin: 5px 0;
    width: 50%;
    float: left;

    p {
      font-size: 19px;
      margin-right: 20px;
    }
  }
}

.certificate.hero-unit {
  margin: -50px auto 30px;
  padding: 0 15px;

  .btn-info {
    font-size: 14px;
    line-height: 15px;
    padding: 8px 12px;
    width: 80px;
    margin-top: 80px;
  }
}

.certificate-summary {
  padding: 0 90px;
}

.certificate-badge {
  width: 160px;
  height: 140px;
  background: #bbb;
  margin-bottom: 10px;
}

.certificate-level {
  font-weight: bold;
  font-size: 24px;
  color: #888;
  margin-bottom: 30px;

  small {
    display: block;
    font-weight: normal;
    font-size: 17px;
    line-height: 16px;
  }
}

strong.certificate-level {
  font-weight: normal;
}

.basic-level {
  .certificate-badge {
    background: @basic;
  }
  .certificate-level {
    color: @basic;
  }
}

.pilot-level {
  .certificate-badge {
    background: @pilot;
  }
  .certificate-level {
    color: @pilot;
  }
}

.standard-level {
  .certificate-badge {
    background: @standard;
  }
  .certificate-level {
    color: @standard;
  }
}

.exemplar-level {
  .certificate-badge {
    background: @exemplar;
  }
  .certificate-level {
    color: @exemplar;
  }
}

.footer {
    border-top: 1px solid #E5E5E5;
    margin-top: 70px;
    padding: 30px 0;
    text-align: center;
}

// Embedded certificate //

#embedded-certificate {
  margin: 30px;
  .certificate.hero-unit {
    width: auto;
    margin-top: 30px;
  }
}

.embed-code {
  textarea {
    box-sizing: border-box;
    width: 100%;
  }
}

/*
//
// ***** About Page *****
//
*/
.container.about {

  .span8 {

    margin-left: 0;

    h1 {

      color: #8e8c8c;
      font-size: 30px;
      margin-top: 15px;

    }

    h2 {

      color: #8e8c8c;
      font-size: 22px;
      font-weight: normal;
      line-height: 26px;
      margin: 15px 0 20px 0;

    }

    ul { margin-top: 10px; }

    li { margin-bottom: 5px; line-height: 24px; }

    ul.kitemarks {

      margin: 20px 0 10px 0;

      li {

        list-style: none;
        padding-left: 141px;
        padding-top: 16px;
        min-height: 117px;
        margin-bottom: 10px;

      }

      li.kitemark1 { background: url(/assets/badges/no_level_badge.png) no-repeat top left; }
      li.kitemark2 { background: url(/assets/badges/pilot_level_badge.png) no-repeat top left; }
      li.kitemark3 { background: url(/assets/badges/standard_level_badge.png) no-repeat top left; }
      li.kitemark4 { background: url(/assets/badges/exemplar_level_badge.png) no-repeat top left; }

    }

  }

}

/*
//
// ***** Terms Page, Contact (Get in touch) Page *****
//
*/
.container.terms, .container.contact {

  .span8 {

    margin-left: 0;

    h2 {

      color: #8e8c8c;
      font-size: 30px;
      margin-top: 15px;
      font-weight: normal;

    }

    h4 {

      color: #000;
      font-size: 18px;

    }

    li { margin-bottom: 5px; line-height: 24px; }

  }

}

/*
  © 2013 Open Data Institute

  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.

*= require_self
*= require surveyor_all
*/

/* import bootstrap this way so that we can alter variables just for this app */
@import "twitter/bootstrap";

// override bootstrap variables here, see options at:
//   https://github.com/twitter/bootstrap/blob/master/less/variables.less
@iconSpritePath:          "glyphicons-halflings.png";
@iconWhiteSpritePath:     "glyphicons-halflings-white.png";

// use our own grey for the input field
@gray: @odiGrey;
@placeholderText: @odiGreyLight;
@inputBorderRadius: 2px;

// todo - use bigger size instead
@gridColumns:             12;
@gridColumnWidth:         70px;
@gridGutterWidth:         30px;
@gridRowWidth:            (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));

@odiBlue: #00b7ff;
/* odiBlueLight - primarily for background of inputs in modals */
@odiBlueLight: lighten(@odiBlue, 15%);
@odiBlueLighter: lighten(@odiBlue, 36%);
@odiBlueDark: darken(@odiBlue, 5%);
@odiBlueDarker: darken(@odiBlue, 20%);

@odiRed: #ff6700;
@odiRedDark: darken(@odiRed, 3%);
@odiRedLight: lighten(@odiRed, 15%);

@odiCrimson: #d30102;
@odiCrimsonDark: darken(@odiCrimson, 6%);
@odiCrimsonLight: lighten(@odiCrimson, 53%);

@odiOrange: #f99C06;
@odiOrangeDark: darken(@odiOrange, 6%);

@odiGreen: #0DBC37;
@odiGreenDark: darken(@odiGreen, 6%);

@odiPomegranate: #dc4810;

@odiGrey: #aaa;
@odiGreyDark: darken(@odiGrey, 18%);
@odiGreyDarker: darken(@odiGrey, 40%);
@odiGreyLight: lighten(@odiGrey, 25%);
@odiGreyLighter: lighten(@odiGrey, 40%);

@btnPrimaryBackground: @odiRed;
@btnPrimaryBackgroundHighlight: @odiRed;
@btnInfoBackground:  @odiBlue;
@btnInfoBackgroundHighlight: @odiBlue;

@odiGrey: #8e8c8c;

@basic: #0dbd37;
@pilot: #ef3aab;
@standard: #2254f3;
@exemplar: #f9bc26;

// @headingsFontFamily:    'Open Sans',sans-serif;
// @headingsFontWeight:    400;

// todo - use bigger size instead
@gridColumns:             12;
@gridColumnWidth:         70px;
@gridGutterWidth:         30px;
@gridRowWidth:            (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));

/*
//
// ***** Modal - Create certificate *****
//
*/
.modal {

  background: @odiBlue;
  width: 788px;
  margin-left: -394px;
  .border-radius(0);

  h1 {

    margin-top: -7px;
    margin-bottom: 40px;
    font-size: 30px;
    color: #2f2f2f;

  }

  p { color: #fff; font-size: 20px; }

  .btn-large { width: 100%; .box-sizing(border-box); margin: 12px 0; }

  form { margin-bottom: 0; }

}

.modal-header {

  border-bottom: 0;
  margin: 30px;
  padding: 0;

  h3 {

    color: #fff;
    font-size: 36px;
    font-weight: normal;

  }

}

.modal-body {

  padding-left: 50px;
  padding-right: 50px;
  padding-bottom: 40px;

}

.modal-body {

  .log-in {

    background: url(/assets/modal-divider.gif) repeat-y top right;

    label {

      color: #fff;
      font-size: 20px;

    }

    .form-field {

      margin-bottom: 10px;

      input[type=email], input[type=password] {

        margin-top: 5px;
        background: @odiBlueLight;
        border: 1px solid #fff;
        .border-radius(0);
        width: 93%;
        height: 60px;
        padding: 0 10px;
        font-size: 20px;
        color: white;

      }

      /* Making input text white loses the 'invalid' colour */
      /* Add it back */
      input[type=email]:invalid { color: #cc0000; }
      input[type=email]:valid { color: #fff; }

    }

    .form-field-inline {

      float: left;
      margin: -4px 0 0 0;

      input[type=checkbox] { margin: -3px 0 0 0; }

      label { font-size: 14px; color: #2f2f2f; display: inline; }
      label:hover { text-decoration: underline; }

      .forgot-password {

        display: block;
        font-size: 14px;
        color: #2f2f2f;
        margin-left: 17px;

      }

    }

    /* Sign in button used on many pages as orange primary button */
    /* Needs to be overridden to be blue info button in modals */
    .btn-primary {

      background: @odiBlueDark;
      height: auto;
      padding: 10px 20px;
      float: right;
      margin: -5px 22px 5px 0;
      font-size: 18px;
      font-weight: bold;

    }

    .btn-primary:active, .btn-primary:hover, .btn-primary:focus {

      background: @odiBlueDarker;

    }

    .sign_in_user_form_errors {
      width: 93%;
    }

  }

}

/************************************************
    Bootstrap --> Rails
************************************************/

// display error messages in alert block
#error_explanation {
  .alert();
  .alert-error();
  .alert-block();
}

.field_with_errors {
  .control-group.error();
}

/************************************************
    ODI Styling
************************************************/
// source https://github.com/theodi/less-rails-bootstrap/blob/master/vendor/frameworks/twitter/bootstrap/odi.less

// Global styles //

body {
  background-color: #fff;
  font-size: 18px;
}

// Typography //

h1 {
  font-weight: normal;
}

p {
  font-size: 18px;
  line-height: 24px;
}

p.lead {
  font-size: 17px;
  color: @odiGrey;
  margin-bottom: 30px;
}

dl {
  margin: 0 0 45px;
}

dt, dd {
  margin: 15px 0;
}

dd {
  margin-bottom: 30px;
}

// make grey input text read easier
input, textarea{
  -webkit-font-smoothing: antialiased;
  .box-shadow(none);
}

.btn-small {
  &, &:active, &:hover, &:focus {
    text-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
  }
}

.btn-info {
  background: @odiBlue;

  &.btn-unstyled {
    &, &:active, &:hover, &:focus {
      font-size: 15px;
      color: @odiBlue;
      padding: 0;
      background: none;
    }
  }

  &:active, &:hover, &:focus {
    background: @odiBlueDark;
  }
}

.btn-info-modal {
  background: @odiBlueDark;
}

.btn-info-modal:active, .btn-info-modal:hover, .btn-info-modal:focus {
  background: @odiBlueDarker;
}

.btn-primary {
  background: @odiRed;
}

.btn-primary:active, .btn-primary:hover, .btn-primary:focus {
  background: @odiRedDark;
}

.btn-large {
  font-size: 18px;
  padding: 10px 20px;
}

.btn-small, .btn-small:active, .btn-small:hover {
  padding: 3px 25px;
  font-size: 13px;
  color: white;
  border: none;
  text-shadow: none;
}

// snap the header to the top when it's affixed
header.affix {
    top: 0px;
    width:100%;
    z-index:10;
}

#padd {
  .container {
    margin-top: 50px;

    h1 {
      font-size: 70px;
      line-height: 80px
    }

    h2 {
      font-size: 30px;
      line-height: 40px;
      margin-bottom: 40px;
    }
  }

  .btn {
    display: block;
    margin-bottom: 20px;
  }

  button.btn {
    width: 100%;
  }
}

.odi-bleed {
  background:#fff url("/assets/splat.png") no-repeat top left fixed;
  background-position: 0 -450px;
}

.home {
  text-align: center;

  /* Remove bottom padding so background image can hit bottom */
  padding-bottom: 0;

  h1 {
    color: @odiBlueDarker;
    font-size: 36px;
    margin-bottom: 30px;
    text-shadow: -1px -1px 0px rgba(255,255,255, 0.25);
  }

  .steps {

    /* Background stripes (image has 30px of space on left to align) */
    background: url(/assets/background-home-header.gif) repeat-y center;
    margin-bottom: 20px;

    .span4 {

      /* Make sure there's a gap between bottom of steps text and top of ODI logo/buttons */
      padding-bottom: 20px;

    }

  }

  .span4 {

    // padd in the content
    h2, p{
      padding: 0 20px;
    }
    p{
      padding-bottom:20px;
    }

    h2 {
      font-size: 70px;
      color: @odiBlueDarker;
      font-weight: bold;
      text-shadow: -1px -1px 0px rgba(255,255,255, 0.25);

      small {
        display: block;
        color: #fff;
        font-size: 30px;
        padding: 30px 0 10px;
        text-shadow: none;
      }
    }

    form {
      margin: 0;

      .btn {
        position: relative;
        top: 40px;
      }
    }
  }
}

.home-header-buttons {

  .row {

    height: 88px;

  }

  .span4 {
    text-align: center;

    .logo {

      /* Small ODI logo, hide text */
      background: url(/assets/ODI_kitemark-75x75.png) no-repeat center;
      text-indent: 100%;
      white-space: nowrap;
      overflow: hidden;
      margin: -34px auto 0 auto;
      width: 76px; height: 68px;

    }

    .btn-primary {
      margin-top: -20px;
    }
  }
}

.homepage-about-content {

  h2 {
    font-weight: normal;
  }

  h2.about-certificate { margin-top: -7px; }

  h2.about-odi {
    border-top: 1px solid #e1e1e1;
    padding-top: 20px;
    margin-top: 25px;
  }
}

h3 {
  font-size: 19px;
}

h4 {
  font-size: 16px;
  font-weight: normal;
  color: @odiGrey;
  margin-bottom: 15px;
}

hr {
  margin: 12px 0;
}

hr.heavy {
  border: 0;
  height: 5px;
  background: url(divider.png);
}

// Layout //

body {
  min-width: 1210px;
}

.container {
  padding: 0 20px;
}

.navbar-inner {
  padding: 0;
  height: 60px;
}

#topbar {
  background: #1b1b1b;

  ul {
    border-right: 1px solid #707070;

    li {
      margin: 0;
      padding:0;
      height: 60px;
      border-left: 1px solid #707070;

      a {
        color: #fff;
        padding: 20px;
      }

      a:hover, a.active {
        background-color: @odiRed;
      }
    }
  }

  .label {
    top: -15px;
    position: relative;
    padding-top: 10px;
    background-color: @odiBlue;
  }
}

#mainnav {
  margin-bottom: 0;
  position: relative;
  background-color: rgba(255,255,255,0.65);

  .navbar-inner {
    background: none;
    border-radius: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    border-bottom: none;
    background-image: none;

    li {
      position: relative;

      a, button {
        background-color: transparent;
        border: none;
        color: #000;
        padding: 20px;
        font-size: 18px;
        text-shadow: 0 1px 0 #ffffff;
      }
      a:hover, button:hover {
        color: @odiBlue;
      }

      form {
        margin: 0;
      }
    }

    li.active a, li.active button {
      color: @odiBlue;
    }

    .arrow-down {
      width: 0;
      height: 0;
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      border-top: 8px solid #fff;
      margin: 0 0 0 -8px;
      position: absolute;
      left: 50%;
    }
  }
}

.navbar .nav > .active > a {
  &, &:hover, &:focus {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
  }
}

nav .dropdown-menu-button {
  z-index: 10;
  position: relative;
}

#login, #register {
  display: none;
  position: absolute;
  right: 0;
  width: 450px;
  padding: 30px 25px;
  background: @odiRed;
  color: white;

  label {
    font-size: 19px;
    margin-bottom: 10px;
  }

  input[type="text"], input[type="email"], input[type="password"] {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    border: 1px solid white;
    background: @odiRedLight;
    height: 45px;
    width: 425px;
    margin-bottom: 20px;
  }

  .form-field-inline {
    float: left;

    label {
      font-size: 15px;
      display: inline;
    }
  }

  .btn-primary {
    float: right;
    background: @odiPomegranate;
    border: none;
    -webkit-box-shadow: none;
    -moz-box-shadow:none;
    box-shadow: none;
    padding: 4px 15px;
  }

  &.active {
    display: block;
  }
}

header {
  background-color: @odiBlue;
  color: #fff;
  padding: 10px 0;

  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;

  .container {
    min-height: 60px;
  }

  h1,h2,h3,h4,h5,h6{
    font-weight:normal;
  }
}

.container.main {
  margin-top: 50px;
}

#footer {
  background-color: #000;
  font-size: 0.88em;
  color: #adaeaf;
  padding-top: 40px;
  padding-bottom: 52px;

  .footer-content {

    margin-left: 0;

    h1 {

      /* ODI logo, hide text */
      background: url(/assets/logo-footer.png) no-repeat top left;
      text-indent: 100%;
      white-space: nowrap;
      overflow: hidden;
      margin: 0 0 30px 0;
      width: 204px; height: 49px;

      a { display: block; }

    }

  }
  .footer-nav { margin-left: 30px; }

  a {
    color: #adaeaf;
    text-decoration: none;
  }

  a:hover { color: #fff; }

  ul {
    list-style: none outside none;
    margin: -4px 0 0 0;

    li {
      display: inline;
      margin-left: 20px;
    }
  }

  p {
    margin: 0px;
    font-size: 16px;
  }

  p.license { margin-top: 30px; }

}

section {
  //background-color: white;
  // margin: 15px 0;
  // padding: 10px 0;
}

.whiteout {
  background-color:rgba(255,255,255,0.65);

  /* Make sure there's a gap between bottom of content and top of footer */
  padding-bottom: 55px;

}

.hero-unit {
  background: none;
  padding: 0;
  margin: 0;

  .centered {
    margin-left: auto;
    margin-right: auto;
  }

  h1, h2, p, small, span {
    text-align: center;
  }

  h1 {
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 20px;
    letter-spacing: 0.5px;
  }

  p {
    font-size: 23px;
  }
}

// Alert messages //

.flash {
  margin-top: 20px;
}

.alert {
  color: white;
  padding: 14px 12px;
  text-shadow: 1px 1px rgba(0, 0, 0, 0.3);
  vertical-align: middle;

  .icon-large {
    margin-bottom: 1px;
    margin-right: 6px;
    vertical-align: middle;
  }

  .close, .close:hover, .close:active {
    opacity: 1;
    width: 14px;
    height: 14px;
    position: static;
    background-image: url(/assets/glyphicons-halflings-white.png);
    background-position: -312px 0;
  }
}

.alert-alert {
  background: @odiCrimson;
  border: 1px solid @odiCrimsonDark;
}

.alert-warning {
  background: @odiOrange;
  border: 1px solid @odiOrangeDark;
}

.alert-notice {
  background: @odiGreen;
  border: 1px solid @odiGreenDark;
}

#topbar .alert-box {
  h3 {
    display: inline;
    line-height: 20px;
    vertical-align: middle;
  }

  ul {
    border: none;

    li {
      height: auto;
      font-size: 16px;
      border: none;
    }
  }
}

// Icons //

.icon-large {

  width: 28px;
  height: 28px;
  background-image: url(/assets/glyphicons.png);

  &.icon-white {
    background-image: url(/assets/glyphicons_white.png);
  }

  // Spacing between icons in file
  @spacing: -48px;

  // Mixin to help select correct icon
  .icon-position(@top, @left) {
    background-position: @spacing * @left (@spacing * @top) + 1;
  }

  &.icon-ok-sign { .icon-position(19, 3); }
  &.icon-info-sign { .icon-position(19, 5); }
  &.icon-exclamation-sign { .icon-position(19, 6); }
  &.icon-ban-circle { .icon-position(19, 9); }
}

// Tables //

table {
  width: 100%;
  font-size: 15px;
}

th {
  font-weight: normal;
}

// Forms //

.main-default {
  margin-top: 30px;

  .form-field {
    .clearfix;
    margin-bottom: 35px;

    &.form-field-inline {
      input {
        margin: 0 10px;
        height: 30px;
      }
      label {
        display: inline;
      }
    }
  }

  input {
    height: 60px;
    font-size: 20px;
    padding: 0 10px;
    margin: 15px 0;
  }

  input[type='submit'] {
    margin: 15px 0 30px;
  }

  label {
    font-size: 22px;
  }

  i {
    font-size: 15px;
    font-style: normal;
    color: @odiGrey;
    display: block;
  }
}

// User auth //

.user-links {
  .clearfix;
  margin-bottom: 15px;

  .btn {
    float: left;
    margin-right: 4px;
  }
}

// My certificates view //

.first-response-set {
  background: @odiBlueLighter;

  td.level {
    text-align: center;
    padding: 13px 30px 5px 15px;
    width: 48px;
  }

  td.last-updated {
    time {
      color: @odiGreyDarker;
    }
  }

  button.copy-certificate {
    padding: 8px 12px;
  }
}

.previous-response-set {

  td {
    height: 30px;
  }

  button.copy-certificate {
    text-align: left;
    position: relative;
    top: 7px;
  }
}

button.copy-certificate {
  font-size: 15px;
  line-height: 15px;
  font-weight: bold;

  span {
    display: block;
    font-size: 12px;
    font-weight: normal;
  }
}

button.copy-certificate:hover {
  font-size: 15px;
}

th.previous-title {
  font-size: 16px;
  text-align: left;
  color: @odiGreyDark;
  padding: 15px 0;
}

td.level {
  .certificate-badge {
    margin: 0 auto;
    width: 50px;
    height: 40px;
  }

  font-size: 12px;
  font-weight: bold;
  color: @odiGreyDark;
}

td.last-updated {
  width: 180px;;
  font-size: 12px;
  line-height: 17px;
  color: @odiGreyDark;

  time {
    font-size: 15px;
    display: block;
  }
}

td.status {
  width: 300px;
  font-size: 15px;

  &.published {
    color: @odiCrimson;
  }

  &.archived {
    color: @odiGreyDark;
  }

  &.editing {
    color: @odiGreyDarker;
    font-style: italic;
  }
}

td.action {
  width: 150px;

  form {
    margin: 0;
  }
}

// Questionnaire (survey) view //

#surveyor{

  padding-top:20px;

  header {
    margin:5px 0;
    h3{
      font-size: 27px;
    }
    h3, h4{
      color:@white;
      margin:0;
    }

    &.inactive{
      background-color:@odiGrey;
    }
    cursor: pointer;

    .transition(background-color 0.25s);

    // override
    .container{
      min-height: auto;
    }
  }

  .subsection-label{
    border-top:1px solid @odiGreyLighter;
    color:@odiBlue;
    font-weight: normal;
    padding:20px 0;
  }

  ol,ul{
    margin:auto;
  }

  // brought in from main styles
  label {
    font-size: 22px;
  }

  .choice input{
    margin-right:10px;
  }
  .choice label{
    font-size:16px;
    color:@gray;
    -webkit-font-smoothing: antialiased;
  }

  input.string{
    height: 60px;
    font-size: 23px;
    padding: 0 10px;
    margin: 15px 0;
  }

  // custom
  input.string{
    width:100%;
  }

  // this is our label replacement (for the question of multiple answers)
  .group_label{
    font-size: 22px
  }

  label small
  .group_label small{
    color:@odiGrey;
    font-size: 65%;
  }

  // repeated sections
  fieldset.g_repeater{
    legend {
      display: none;
    }
    ol fieldset.row {
      display: block;
    }
  }

  .question-row{
    position: relative;
    aside{
      display:none;
      position:absolute;
      right:0;
      background-color:@odiBlueLighter;
      padding:20px;
      width:330px;

      &.answer-meta {
        top: 10px;
      }
    }
  }

  .question-meta{

  }

  // focussed elements
  fieldset.question-row.active{
    // hard to do the odd outline

    // outline: 1px solid @odiBlueLight;
    background-color: @odiBlueLighter;
  }

  &.highlight-mandatory{
    .mandatory{
      background-color:@odiCrimsonLight;
      &.has-response{
        background-color:@white;
      }
    }
  }

}

#status_panel{
  .transition(right 0.5s);
  background-color:@odiGreyLighter;
  position: absolute;
  right:0;
  width:280px;
  padding:20px;
  height:100%;
  z-index:5;

  right:-320px;

  // also .hover for oldie fallback
  &:hover, &.hover{
    right:0px;
  };

  &.affix, &.affix-bottom{
    position: fixed;
    top:130px;
  }

  #panel_handle{
    background-image:url(/assets/panel-handle.png);
    width:78px;
    height:72px;
    position: absolute;
    left:-78px;
  }

  h3 {
    margin-bottom: 0;
    display: inline;
    width: 50%;
  }

  img {
    display: inline;
    float: right;
  }

  .progress {
    margin-bottom: 10px;
    clear: both;
  }
}

// Certificate view //

.certificate-data {
  ul {
    .clearfix;
    margin-left: 0;
  }

  li {
    list-style-type: none;
    margin: 5px 0;
    width: 50%;
    float: left;

    p {
      font-size: 19px;
      margin-right: 20px;
    }
  }
}

.certificate.hero-unit {
  margin: -50px auto 30px;
  padding: 0 15px;

  .btn-info {
    font-size: 14px;
    line-height: 15px;
    padding: 8px 12px;
    width: 80px;
    margin-top: 80px;
  }
}

.certificate-summary {
  padding: 0 90px;
}

.certificate-badge {
  width: 160px;
  height: 140px;
  background: #bbb;
  margin-bottom: 10px;
}

.certificate-level {
  font-weight: bold;
  font-size: 24px;
  color: #888;
  margin-bottom: 30px;

  small {
    display: block;
    font-weight: normal;
    font-size: 17px;
    line-height: 16px;
  }
}

strong.certificate-level {
  font-weight: normal;
}

.basic-level {
  .certificate-badge {
    background: @basic;
  }
  .certificate-level {
    color: @basic;
  }
}

.pilot-level {
  .certificate-badge {
    background: @pilot;
  }
  .certificate-level {
    color: @pilot;
  }
}

.standard-level {
  .certificate-badge {
    background: @standard;
  }
  .certificate-level {
    color: @standard;
  }
}

.exemplar-level {
  .certificate-badge {
    background: @exemplar;
  }
  .certificate-level {
    color: @exemplar;
  }
}

.footer {
    border-top: 1px solid #E5E5E5;
    margin-top: 70px;
    padding: 30px 0;
    text-align: center;
}

// Embedded certificate //

#embedded-certificate {
  margin: 30px;
  .certificate.hero-unit {
    width: auto;
    margin-top: 30px;
  }
}

.embed-code {
  textarea {
    box-sizing: border-box;
    width: 100%;
  }
}

/*
//
// ***** About Page *****
//
*/
.container.about {

  .span8 {

    margin-left: 0;

    h1 {

      color: #8e8c8c;
      font-size: 30px;
      margin-top: 15px;

    }

    h2 {

      color: #8e8c8c;
      font-size: 22px;
      font-weight: normal;
      line-height: 26px;
      margin: 15px 0 20px 0;

    }

    ul { margin-top: 10px; }

    li { margin-bottom: 5px; line-height: 24px; }

    ul.kitemarks {

      margin: 20px 0 10px 0;

      li {

        list-style: none;
        padding-left: 141px;
        padding-top: 16px;
        min-height: 117px;
        margin-bottom: 10px;

      }

      li.kitemark1 { background: url(/assets/badges/no_level_badge.png) no-repeat top left; }
      li.kitemark2 { background: url(/assets/badges/pilot_level_badge.png) no-repeat top left; }
      li.kitemark3 { background: url(/assets/badges/standard_level_badge.png) no-repeat top left; }
      li.kitemark4 { background: url(/assets/badges/exemplar_level_badge.png) no-repeat top left; }

    }

  }

}

/*
//
// ***** Terms Page, Contact (Get in touch) Page *****
//
*/
.container.terms, .container.contact {

  .span8 {

    margin-left: 0;

    h2 {

      color: #8e8c8c;
      font-size: 30px;
      margin-top: 15px;
      font-weight: normal;

    }

    h4 {

      color: #000;
      font-size: 18px;

    }

    li { margin-bottom: 5px; line-height: 24px; }

  }

}


styles init

styles init

error: pathspec 'app/assets/css/global.less' did not match any file(s) known to git


fix <pre> margins

fix <pre> margins

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/MatTheCat/clean.git/'