vue-carousel-3d/docs/themes/vue/source/css/page.styl

Beautiful, flexible and touch supported 3D Carousel for Vue.js

@import "_common"
@import "_header"
@import "_demo"
@import "_migration"
@import "_sidebar"

#header
    box-shadow 0 0 1px rgba(0,0,0,.25)
    transition background-color .3s ease-in-out

.content
    position relative
    padding 2.2em 0
    max-width 1050px
    margin 0 auto
    &.api
        > a:first-of-type > h2
            margin-top 0
            padding-top: 0
        ul
            padding-left 1.25em
            line-height 1.4em
            ul, p
                margin .6em 0
    a.button
        font-size .9em
        color #fff
        margin .2em 0
        width 180px
        text-align center
        padding 12px 24px
        display inline-block
        vertical-align middle
    img
        max-width 100%
    span.light
        color $light
    span.info
        font-size .85em
        display inline-block
        vertical-align middle
        width 280px
        margin-left 20px
    h1
        margin 0 0 1em
    h2, h3
        &:before
            content ''
            display block
            margin-top -1 * $heading-link-padding-top
            height $heading-link-padding-top
            visibility hidden
    h2
        margin $h2-margin-top 0 .8em
        padding-bottom .7em
        border-bottom 1px solid $border
        z-index: -1
    h3
        margin $h3-margin-top 0 1.2em
        position relative
        z-index: -1
        &:after
            content "#"
            color $green
            position absolute
            left -0.7em
            bottom -2px
            font-size 1.2em
            font-weight bold
    figure
        margin 1.2em 0
    p, ul, ol
        line-height 1.6em
        // HACK: Create area underneath paragraphs
        // and lists that will be on top of heading
        // anchors, for easier text highlighting.
        margin 1.2em 0 -1.2em
        padding-bottom 1.2em
        position relative
        z-index: 1
    ul, ol
        padding-left 1.5em
    a
        color $green
        font-weight 600
    blockquote
        margin 2em 0
        padding-left 20px
        border-left 4px solid $green
        p
            font-weight 600
            margin-left 0
    iframe
        margin 1em 0
    > table
        border 2px solid $white
        margin 1.2em auto
        padding: 1em
        td, th
            line-height 1.6em
            padding .5em 1.4em
            border none
        td
            background-color: lighten($codebg, 60%)
        th
            background-color: $green
            color: #fff
            padding-top: .85em
            padding-bottom .85em
            text-align left
        tbody
            code
                background-color #efefef
    p.tip
        padding 12px 24px 12px 30px
        margin 2em 0
        border-left 4px solid $red
        background-color $codebg
        position relative
        border-bottom-right-radius $radius
        border-top-right-radius $radius

        &:before
            position absolute
            top 14px
            left -12px
            background-color $red
            color #fff
            content "!"
            width 20px
            height 20px
            border-radius 100%
            text-align center
            line-height 20px
            font-weight bold
            font-family $logo-font
            font-size 14px

        code
            background-color #efefef

        em
            color $medium

.guide-links
    margin-top 2em
    height 1em

.footer
    color $light
    margin-top 2em
    padding-top 2em
    border-top 1px solid #e5e5e5
    font-size .9em

#main.fix-sidebar
    .sidebar
        position fixed

@media screen and (min-width: 1590px)
    #header
        background-color rgba(255,255,255,.4)

@media screen and (max-width: 1300px)
    .content.with-sidebar
        margin-left 290px
    #ad
        z-index 7
        position relative
        padding 0
        bottom 0
        right 0
        float right
        padding 0 0 20px 30px

@media screen and (max-width: 900px)
    body
        -webkit-text-size-adjust none
        font-size 14px
    #header
        display none
    #logo
        display none
    .nav-link
        padding-bottom 1px
        &:hover, &.current
            border-bottom 2px solid $green
    #mobile-bar
        display block
    #main
        padding 2em 1.4em 0
    .highlight pre
        padding 1.2em 1em
    .content
        &.with-sidebar
            margin auto
        h2, h3
            &:before
                content ''
                display block
                margin-top -1 * $mobile-heading-link-padding-top
                height $mobile-heading-link-padding-top
                visibility hidden
    .footer
        margin-left 0
        text-align center

@media screen and (max-width: 560px)
    #downloads
        text-align center
        margin-bottom 25px
        .info
            margin-top 5px
            margin-left 0
    iframe
        margin: 0 !important