@import "base/variables"
@import "base/reset"
@import "base/fonts"

@import "mixins"

@import "modules/grid"
@import "modules/ui"
@import "modules/box"
@import "modules/modal"
@import "modules/dialog"
@import "modules/layout"
@import "modules/panel"
@import "modules/event"
@import "modules/dashboard"
@import "modules/reward"

// Text colors
$text-color-light-violet: #ae99a1
$text-color-light-blue: #a3bdc2
$text-color-intense-red: #d2000c
$text-color-green: #16c353

// Background colors
$bg-color-light-yellow: #fffff6
$bg-color-light-green: #fcfff6
$bg-color-inactive: #f4f4f4
$bg-color-grey: #b8babc

// Button colors
$btn-primary-default-bg: #0087d7
$btn-primary-hover-bg: #066fad
$btn-primary-disabled-bg: #bcd9ec

// Sizes
$max-content-width: 914px
$min-content-margins: 10px
$header-height: 56px
$subheader-tall-height: 170px
$subheader-panel-height: 141px
$subheader-profile-height: 80px
$search-box-width: 540px
$footer-height: 149px

// Grid defaults
$grid-columns: 24
$grid-gutter-width: 20px
$screen-lg-min: 700px 

// Event items
$box-color: #032127
$box-alpha: 0.2
$box-solid-color: mix($box-color, #fff, $box-alpha * 100%)
$box-transparent-color: rgba($box-color, $box-alpha)
$box-border-radius: 3px
$box-alternative-background: #fafafa

// Cover photo
$cover-photo-gradient: linear-gradient(to bottom, rgba(#fff, 0), #fff)
$cover-photo-alternative-gradient: linear-gradient(to bottom, rgba($box-alternative-background, 0), $box-alternative-background) 

• coherent design across application
• helpful for CSS class abstraction during development
• documentation for core CSS in and after development
• live preview of CSS implementation

• UI elements
• description
• example code
• live example
• in Cooleaf:
• page layout
• ui kit entries
• buttons
• form elements
• flash messages
• grid

• .module-name__element[--modificator]
  
• self documenting
• organized by modules

.event__input

.event__input--small

.event__input--time

.event__label

.event__label--secondary

.event-date__column--date

.event-date__column--time

.event-date__column--timeset

.event__input
  @extend .ui__input

.event__input--small
  @extend .event__input
  font-size: 12px
  line-height: 26px

.event__input--name
  @extend .event__input
  color: $text-color-dark-grey-blue

.event__input--time
  @extend .event__input
  padding-left: 8px
  padding-right: 8px

.event-item__body
  @extend .panel-item__body
  @extend .organization-item__cell
  @include make-lg-column(20)

.event-item__actions
  @extend .organization-item__cell
  @include make-lg-column(4)
  position: static
  text-align: center