pulseauthenticate/src/assets/styles/common.styl

Common Authentication library for pulse angular apps

@import "mixin.styl"

$px = (0.625) rem

boxSizing()
    -webkit-box-sizing border-box
    -moz-box-sizing    border-box
    box-sizing         border-box

// Buttons
button($color = $shadow)
    background $color
    border none
    color white
    cursor pointer
    font-size 1.6*$px
    height 4*$px
    line-height 4*$px
    outline 0
    text-align center
    min-width 96px
    padding 0 15px
    border-radius 5px
    &:hover 
        background lighten($color, 5%)
    &:active 
        background darken($color, 7%)
    &:disabled
        background $shadow
        cursor default
        pointer-events none

// Hover
hover($color = $shadow)
    background $color
    &:hover 
        background lighten($color, 5%)
    &:active 
        background darken($color, 7%)

// Button disabled
disabled($color = $shadow)
    cursor default
    pointer-events none
    &:hover 
        background $color
    &:active 
        background $color


.form
    &-checkcell
        float left
        position relative
        padding 5px 0

        &__label
            vertical-align top
            color #000
            font-size 1.4rem
            float left
            width 100%
            font-weight normal

        &__check:not(:checked), &__check:checked
        &__radio:not(:checked), &__radio:checked
            position absolute
            z-index 999999
            opacity 0
            width 25px
            height 25px
            top 0
            left 0

        &__check:not(:checked), &__check:checked
            width 0
            height 0

        &__check:not(:checked) + &__label, &__check:checked + &__label
        &__radio:not(:checked) + &__label, &__radio:checked + &__label
            position relative
            padding 0 40px 0 30px
            cursor pointer
            font-size 1.2rem

        &__check:not(:checked) + &__label, &__check:checked + &__label
            padding 8px 40px 0 25px

        &__check:not(:checked) + &__label:before, &__check:checked + &__label:before
            font-family 'icons'
            content '\f110'
            font-size 1.5rem
            position absolute
            left 0
            top 0

        &__check:checked + &__label:before
            content '\f111'
            
        &__radio:not(:checked) + &__label:before, &__radio:checked + &__label:before
            content ''
            position absolute
            left 0
            top 0
            width 25px 
            height 25px
            background transparent
            border 1px solid $shadow

        &__radio:not(:checked) + &__label:before, &__radio:checked + &__label:before
            border-radius 50%

        &__radio:not(:checked) + &__label:after
            opacity 0
            transform scale(0)
        
        &__radio:checked + &__label:after
            opacity 1
            transform scale(1)
            
        &__radio:disabled:not(:checked) + &__label:before,
        &__radio:disabled:checked + &__label:before
            box-shadow none
            border-color $shadow
            border-width 2px solid
            background-color #ddd
            
        &__radio:disabled:checked + &__label:after
            color #999
        
        &__radio:disabled + &__label
            color #aaa

        &__radio:not(:checked) + &__label:after, &__radio:checked + &__label:after
            font-family "icons"
            content ""
            position absolute
            left 5px
            top 5px
            width 15px
            height 15px
            font-size 3rem
            background-color $shadow
            border-radius 50%
            transform-origin center
            transition all .2s

    &-textarea
        textarea
            padding 5px 10px
            font-size 1rem
            border 1px solid $shadow
            min-width 250px
            resize none
            border-radius 5px
            &:focus
                outline none

    &-input
        input[type="text"], input[type="password"]
            padding 5px
            font-size 1rem
            border 1px solid $shadow
            min-width 200px
            border-radius 5px

            &::-webkit-input-placeholder, &::-moz-placeholder, 
            &::-moz-placeholder, &::-ms-input-placeholder
                color $shadow
                font-weight 400
                
            &:focus
                outline none

.modal
    &.show
        display flex !important
        transition 0.5s ease
    &-header 
        padding 8px

    &-footer 
        background-color #f2f2f2
        padding 5px 15px
        border-top none

    &-xl-center
        width 90%
        max-width 1200px
        display flex
        flex-direction column
        justify-content center
        overflow auto

.no
    &-padding
        padding 0
    &-left-padding
        padding-left 0
    &-right-padding
        padding-right 0
    &-top-padding
        padding-top 0
    &-bottom-padding
        padding-bottom 0
    &-margin
        margin 0