cozy/cozy-mobile

// Errors
// ----------------------------------------------------------------------------

$urlBlue = #33A6FF
$passwordGreen = #4DCEC5
$filesPurple = #9169F2
$contactsRed = #FD7461
$calendarsGreen = #34D882
$photosOrange = #FFAE5F
$errorRed = #FD7461

stepColorMixin(color, btnColor)
    background-color color
    color white
    button
        background-color btnColor
        color color
    #btn-nope
        color btnColor
        border 3px solid btnColor
        background-color color

    input::-webkit-input-placeholder
        color color+60%


.fWizardWelcome
    stepColorMixin white, $urlBlue
.fWizardURL
    stepColorMixin $urlBlue, white
.fWizardPassword
    stepColorMixin $passwordGreen, white
    .button
        color $passwordGreen
.fWizardFiles
    stepColorMixin $filesPurple, white
.fWizardContacts
    stepColorMixin $contactsRed, white
.fWizardCalendars
    stepColorMixin $calendarsGreen, white
.fWizardPhotos
    stepColorMixin $photosOrange, white
.wizard-step.error
    stepColorMixin $errorRed, white

.wizard-step
    display flex
    flex-direction column
    align-item center
    align-content stretch
    overflow hidden
    padding 1em
    height 100vh

    .block-100
        height 100vh

    .block-50
        height 50vh

    .block-25
        height 25vh

    .welcome
        .big-icon-container
            flex 2 0 100vw
        h1
            flex 1 1 100vw

    .button-block
        flex 0 0 3em
        margin 0px auto 0px auto
        width 100%
        display flex
        flex-direction row
        align-item stretch
        justify-content space-between
        button
            text-transform uppercase
            font 1.2em 'Source Sans Pro', Sans-serif
            flex 1 1 auto
            border 0px
            border-radius .3em
            text-align center
            display block
            margin 0px 0.2em 0px 0.2em


    .big-icon-container
        width 100%
        flex 1 1 100vw
        img
            display block
            width 80%
            margin 0 auto

    p
        font 1.2em 'Source Sans Pro', Sans-serif
        flex 1 1 100vw
        text-align center

    h1
        flex 0 0 2.5em
        font 1.7em 'Source Sans Pro', Sans-serif
        color grey-06
        width 100%
        text-align center
        margin-top 0

    h2
        font 1.9em 'Source Sans Pro', Sans-serif
        text-align center
        color white
        flex 0 0 2.5em


    #btn-back-fsm
        width 0
        height 0
        margin 15px 0 5px
        padding 0
        border-style solid
        border-width 15px 30px 15px 0
        border-color transparent white transparent transparent
        background-color transparent

    #btn-back
        background transparent
        color white
        font-size 1em
        border 0 none
        padding 0

    #btn-register
        flex 0 0 2em
        color white

    label
        flex 1 0 auto
        margin-bottom 1em
        font-size 1em

    input
        font 1.8em 'Source Sans Pro', Sans-serif
        background transparent
        color white
        height auto

        &.cloned-text-input
            display none


// notifications
.bar.bar-calm
    background-color grey-04
    border-color grey-04
    background-image none

.wizard-step
    .input-field
        label
            color: #fff
            font-size 1em
        input[type=text] + label, input[type=password] + label, input[type=url] + label
            transform translateY(-140%)
        input
            border-bottom-color #fff
        input:focus + label
            color #fff
        input:focus
            border-bottom-color #fff
            box-shadow 0 1px 0 0 #fff
        input[type=checkbox] + label:before
            border-color white
        input[type=checkbox]:checked + label:before
            border-color transparent white white transparent
        .prefix.active
            color #fff
    &.keyboard
        .hide-keyboard-open
            display none
    .button
        margin 0 auto
        width: 90%


#check
    width 100%
    height 100%
    color white