d-md-components/dialog/styles/index.styl

A pack of components for Derby according to Google's Material Design based upon mdl (getmdl.io).

timing                                = 0.3s cubic-bezier(0.4, 0, 0.2, 1)

.dmd-dialog
  display                             none
  position                            fixed
  top                                 50%
  left                                50%
  transform-origin                    0 0
  background                          #fff
  border-radius                       2px
  min-width                           280px
  
  &--animating
    display                           block
    transform                         scale(0, 0) translate(-50%, -50%)
    transition                        all timing
    
  &--showing
    display                           block
    transform                         scale(1, 1) translate(-50%, -50%)
    top                               50%
    left                              50%
    transition                        all timing
    
  &---inner
    padding                           24px
    
  &---title
    font-size                         20px
    font-weight                       500
    padding-bottom                    20px
    
  &---content
    color                             rgb(109, 109, 109)
    font-size                         16px
    
  &---actions
    margin-left                       24px
    text-align                        right
    
    .mdl-button
      margin                          8px 8px 8px 0
    
  .dmd-width--280
    max-width                         280px
    
  .dmd-width--600
    max-width                         600px
  
  .dmd-width--1240
    max-width                         1240px