|
|
| Line 207: |
Line 207: |
| | margin-left: 0 !important; | | margin-left: 0 !important; |
| | } | | } |
| − |
| |
| − |
| |
| − | /* MATERIAL MODAL */
| |
| − |
| |
| − |
| |
| − | $modal-z = 1000
| |
| − | $modal-bg = #FFEBEE
| |
| − | $modal-width = 600px
| |
| − |
| |
| − | $space = 2.4rem
| |
| − | $red = #F44336
| |
| − |
| |
| − | $t = .5s
| |
| − |
| |
| − | $ease($s = $t)
| |
| − | transition all $s cubic-bezier(0.23, 1, 0.32, 1)
| |
| − |
| |
| − | *
| |
| − | box-sizing border-box
| |
| − |
| |
| − | body
| |
| − | line-height 1.5
| |
| − | font-family 'Lato'
| |
| − | -webkit-font-smoothing antialiased
| |
| − | overflow-x hidden
| |
| − |
| |
| − | h1, h2, h3, p
| |
| − | font-weight 300
| |
| − | margin 0 0 ($space) 0
| |
| − |
| |
| − | h1, h2, h3
| |
| − | line-height 1.3
| |
| − |
| |
| − | a
| |
| − | text-decoration none
| |
| − | color inherit
| |
| − | font-weight 400
| |
| − |
| |
| − | /**
| |
| − | * Material Modal CSS
| |
| − | */
| |
| − |
| |
| − | .modal
| |
| − | will-change visibility, opacity
| |
| − | display flex
| |
| − | align-items center
| |
| − | justify-content center
| |
| − | position fixed
| |
| − | top 0
| |
| − | left 0
| |
| − | right 0
| |
| − | bottom 0
| |
| − | overflow-y auto
| |
| − | overflow-x hidden
| |
| − | z-index $modal-z
| |
| − | // hide modal
| |
| − | visibility hidden
| |
| − | opacity 0
| |
| − | $ease()
| |
| − | transition-delay $modal-delay
| |
| − |
| |
| − | &--active
| |
| − | // reveal modal
| |
| − | visibility visible
| |
| − | opacity 1
| |
| − |
| |
| − | &--align-top
| |
| − | // align to top of window, useful if modal has a lot of content
| |
| − | align-items flex-start
| |
| − |
| |
| − | &__bg
| |
| − | // background color can be added as a backdrop for the modal
| |
| − | background transparent
| |
| − |
| |
| − | &__dialog
| |
| − | // controls the width and padding of modal
| |
| − | max-width $modal-width
| |
| − | padding ($space / 2)
| |
| − |
| |
| − | &__content
| |
| − | will-change transform, opacity
| |
| − | position relative
| |
| − | padding $space
| |
| − | background $modal-bg
| |
| − | background-clip padding-box
| |
| − | box-shadow 0 12px 15px 0 rgba(black, 0.25)
| |
| − | opacity 0
| |
| − | $ease(.25s)
| |
| − |
| |
| − | &--active
| |
| − | opacity 1
| |
| − |
| |
| − | &__close
| |
| − | z-index $modal-z+100
| |
| − | cursor pointer
| |
| − |
| |
| − | &__trigger
| |
| − | // modal trigger button
| |
| − | position relative
| |
| − | display inline-block;
| |
| − | padding ($space / 2) $space
| |
| − | color: rgba(black, 0.7)
| |
| − | line-height 1
| |
| − | cursor pointer
| |
| − | background $modal-bg
| |
| − | box-shadow 0 2px 5px 0 rgba(black, 0.26)
| |
| − | -webkit-tap-highlight-color: rgba(0,0,0,0); user-select none
| |
| − | $ease()
| |
| − |
| |
| − | &--active
| |
| − | z-index 10
| |
| − |
| |
| − | &:hover
| |
| − | background mix(black, $modal-bg, 10)
| |
| − |
| |
| − |
| |
| − | #modal__temp
| |
| − | // this is the div that expands when the button is clicked
| |
| − | will-change transform, opacity
| |
| − | position absolute
| |
| − | top 0
| |
| − | left 0
| |
| − | right 0
| |
| − | bottom 0
| |
| − | background $modal-bg
| |
| − | transform none
| |
| − | opacity 1
| |
| − | transition opacity 0.1s ease-out, transform $t cubic-bezier(0.23, 1, 0.32, 1)
| |
| − |
| |
| − | /**
| |
| − | * Demo specific CSS
| |
| − | */
| |
| − |
| |
| − | body
| |
| − | height 100vh
| |
| − | background $red
| |
| − |
| |
| − | img
| |
| − | max-width 100%
| |
| − |
| |
| − | .demo-btns
| |
| − |
| |
| − | header
| |
| − | padding 7vh 10vw
| |
| − | background $modal-bg
| |
| − | display flex
| |
| − | align-items center
| |
| − |
| |
| − | h1
| |
| − | margin 0
| |
| − | color rgba(black, 0.54)
| |
| − | font-weight 300
| |
| − |
| |
| − | .info
| |
| − | background $red
| |
| − | padding 3vh 10vw
| |
| − | height 70vh
| |
| − | display flex
| |
| − | align-items center
| |
| − | justify-content center
| |
| − | flex-flow column wrap
| |
| − |
| |
| − | p
| |
| − | text-align: center
| |
| − | color white
| |
| − |
| |
| − | .link
| |
| − | font-size 20px
| |
| − |
| |
| − | .modal__trigger
| |
| − | margin-right 3px
| |
| − | @media (max-width 640px)
| |
| − | margin-bottom ($space / 3)
| |
| − |
| |
| − | .demo-close
| |
| − | position absolute
| |
| − | top 0
| |
| − | right 0
| |
| − | margin: ($space / 2)
| |
| − | padding: ($space / 4)
| |
| − | background rgba(black, 0.3)
| |
| − | border-radius 50%
| |
| − | $ease()
| |
| − |
| |
| − | svg
| |
| − | width 24px
| |
| − | fill: white
| |
| − | pointer-events none
| |
| − | vertical-align top
| |
| − |
| |
| − | &:hover
| |
| − | background rgba(black, 0.6);
| |
| − |
| |
| − | .logo
| |
| − | position: fixed
| |
| − | bottom: 3vh
| |
| − | right: 3vw
| |
| − | z-index: 2
| |
| − |
| |
| − | img
| |
| − | width: 45px
| |
| − | transform: rotate(0)
| |
| − | $ease()
| |
| − |
| |
| − | &:hover
| |
| − | transform: rotate(180deg) scale(1.1)
| |
| | | | |
| | | | |
