/* _themes_mdl.sass: 2017-02-14 08:56 */

/* default ---------------------------------------------------------------------------------------------------------- */
.jsPanel-theme-default
  background-color: $mdl-grey100
  border-color: $mdl-grey100

.jsPanel-theme-default > .jsPanel-hdr
  *
    color: $black
  .jsPanel-hdr-toolbar
    border-top: 1px solid $mdl-grey400

.jsPanel-theme-default > .jsPanel-content
  border-top: 1px solid $mdl-grey400

.jsPanel-theme-default > .jsPanel-content.jsPanel-content-filled
  background-color: $mdl-grey100
  border-top: 1px solid $mdl-grey400

.jsPanel-theme-default > .jsPanel-content.jsPanel-content-filledlight
  background-color: $mdl-grey50

/* primary ---------------------------------------------------------------------------------------------------------- */
.jsPanel-theme-primary
  background-color: $mdl-indigo500
  border-color: $mdl-indigo500

.jsPanel-theme-primary > .jsPanel-hdr
  *
    color: $white
  .jsPanel-hdr-toolbar
    border-top: 1px solid $mdl-indigo400

.jsPanel-theme-primary > .jsPanel-content
  border-top: 1px solid $mdl-indigo400

.jsPanel-theme-primary > .jsPanel-content.jsPanel-content-filled
  background-color: $mdl-indigo500
  border-top: 1px solid $mdl-indigo400
  color: $white

.jsPanel-theme-primary > .jsPanel-content.jsPanel-content-filledlight
  background-color: $mdl-indigo100
  color: $black

/* info ------------------------------------------------------------------------------------------------------------- */
.jsPanel-theme-info
  background-color: $mdl-lightblue500
  border-color: $mdl-lightblue500

.jsPanel-theme-info > .jsPanel-hdr
  *
    color: $white
  .jsPanel-hdr-toolbar
    border-top: 1px solid $mdl-lightblue400

.jsPanel-theme-info > .jsPanel-content
  border-top: 1px solid $mdl-lightblue400

.jsPanel-theme-info > .jsPanel-content.jsPanel-content-filled
  background-color: $mdl-lightblue500
  border-top: 1px solid $mdl-lightblue400
  color: $white

.jsPanel-theme-info > .jsPanel-content.jsPanel-content-filledlight
  background-color: $mdl-lightblue100
  color: $black

/* success ---------------------------------------------------------------------------------------------------------- */
.jsPanel-theme-success
  background-color: $mdl-green600
  border-color: $mdl-green600

.jsPanel-theme-success > .jsPanel-hdr
  *
    color: $white
  .jsPanel-hdr-toolbar
    border-top: 1px solid $mdl-green400

.jsPanel-theme-success > .jsPanel-content.jsPanel-content-filled
  background-color: $mdl-green600
  border-top: 1px solid $mdl-green400
  color: $white

.jsPanel-theme-success > .jsPanel-content.jsPanel-content-filledlight
  background-color: $mdl-green100
  color: $black

/* warning ---------------------------------------------------------------------------------------------------------- */
.jsPanel-theme-warning
  background-color: $mdl-orange600
  border-color: $mdl-orange600

.jsPanel-theme-warning > .jsPanel-hdr
  *
    color: $black
  .jsPanel-hdr-toolbar
    border-top: 1px solid $mdl-orange400

.jsPanel-theme-warning > .jsPanel-content.jsPanel-content-filled
  background-color: $mdl-orange600
  border-top: 1px solid $mdl-orange400
  color: $black

.jsPanel-theme-warning > .jsPanel-content.jsPanel-content-filledlight
  background-color: $mdl-orange100
  color: $black


/* danger ----------------------------------------------------------------------------------------------------------- */
.jsPanel-theme-danger
  background-color: $mdl-deeporange600
  border-color: $mdl-deeporange600

.jsPanel-theme-danger > .jsPanel-hdr
  *
    color: $white
  .jsPanel-hdr-toolbar
    border-top: 1px solid $mdl-deeporange400

.jsPanel-theme-danger > .jsPanel-content.jsPanel-content-filled
  background-color: $mdl-deeporange600
  border-top: 1px solid $mdl-deeporange400
  color: $white

.jsPanel-theme-danger > .jsPanel-content.jsPanel-content-filledlight
  background-color: $mdl-deeporange100
  color: $black


/* custom theme example myblue -------------------------------------------------------------------------------------- */
.jsPanel-theme-myblue
  background-color: $mdl-blue800
  border-color: $mdl-blue800

.jsPanel-theme-myblue > .jsPanel-hdr
  *
    color: $mdl-yellowA200
  .jsPanel-hdr-toolbar
    border-top: 1px solid $mdl-yellowA200

.jsPanel-theme-myblue > .jsPanel-content
  background-color: $mdl-bluegrey50
  border-top: 1px solid $mdl-yellowA200
  color: $black

.jsPanel-theme-myblue > .jsPanel-content.jsPanel-content-filled
  background-color: $mdl-blue400
  border-top: 1px solid $mdl-yellowA200
  color: $mdl-yellowA200

.jsPanel-theme-myblue > .jsPanel-content.jsPanel-content-filledlight
  background-color: $mdl-blue100
  border-top: 1px solid $mdl-yellowA200
  color: $mdl-orange900
