codeRIT/hackathon_manager

.theming-editor__wrapper
  position: fixed
  bottom: 10px
  right: 10px
  display: block
  background: #fff
  border: 3px solid #ccc
  padding: 15px 20px
  border-radius: 4px
  max-width: 470px
  max-height: 700px
  overflow: auto

.theming-editor__title
  font-weight: bold
  margin-bottom: 1em
  font-size: 16px

.theming-editor__variables
  display: flex
  flex-flow: row wrap
  margin: -10px -10px 10px

.theming-editor__variable
  display: flex
  flex-flow: column nowrap
  margin: 10px
  width: 200px

.theming-editor__variable-name
  color: #e83e8c
  margin-bottom: 5px
  font-size: 11px

.theming-editor__input-group
  display: flex
  flex-flow: row nowrap
  align-items: stretch

.theming-editor__input-group .pickr
  margin-left: 5px
  display: flex
  width: 80px
  button
    box-shadow: 0 3px 4px rgba(0,0,0,0.1)
    display: flex
    height: 100%
    width: 100%

input, textarea
  &.theming-editor__input, &.theming-editor__input:focus
    font-size: 12px
    font-family: monospace
    padding: 6px 9px
    border: 1px solid #ccc
    margin: 0

.theming-editor__button-wrapper
  margin-top: 1em