screenconcept/qbrick

// This is a manifest file that'll automatically include all the stylesheets available in this directory
// and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
// the top of the compiled file, but it's generally better to create a new file per style scope.
// = require_self
// = require_tree .


$baseBorderRadius: 0px
$borderRadiusLarge: 0px
$borderRadiusSmall: 0px

@import bourbon
@import bootstrap
// base styles

body
  // disable page skipping when changing tabs in page form
  overflow: scroll

h1
  margin-top: 1em
  margin-bottom: 0.5em
  font-size: 3.5em

form
  margin: 0 !important

.dropdown--display-styles
  .checkbox, .radio
    display: block

// bootrap overrides

.breadcrumb
  background: #fff
  opacity: 0.4
  @include transition(all, 0.3s)

.breadcrumb:hover
  opacity: 1

.dropdown-menu
  text-align: left

.container.cms
  padding-top: 60px

.form-horizontal
  .help-block
    width: 470px
    margin-top: 0 !important

// modules

.brick-caption
  font-size: 1.25em

.brick-caption
  @extend .muted
  font-weight: normal
  font-style: italic

.brick-item-header
  background: #efefef
  padding: 0.5em

  .btn
    &.resize-toggler
      .icon-resize-small
        display: block
      .icon-resize-full
        display: none

      &.collapsed
        .icon-resize-small
          display: none
        .icon-resize-full
          display: block

.btn-toolbar
  margin-top: 0
  margin-bottom: 0

.brick-list
  padding-left: 2em

.popover
  max-width: none

// The single column brick and the page-content (the "root") needs no level indentation
// It usually acts as a helper container and is therefore not relevant
// for the visual hierarchy
.qbrick-column-brick
  border: 0px solid #fff
  > .brick-item-childs
    > .brick-list
      padding-left: 0

#page-content
  padding-bottom: 6em
  > .brick-list
    padding-left: 0

.nav-tabs
  a.not-translated:after
    content: '*'
    color: #d33
  a
    color: black


.tab-content
  display: table
  width: 100%

.brick-item
  border: 1px solid #e3e3e3
  // collapse multiple borders
  margin: -1px
  background: #fff

  .brick-item-content.in
    padding: 1em

.empty-state
  margin: 1em

  .muted
    padding: 0.5em

.clear
  clear: both

.centered
  text-align: center

.actions
  margin-top: 1em
  margin-bottom: 1em
  text-align: right

.branch
  border-bottom: 1px solid #ccc
  padding: 0.35em 0

.unpublished
  a
    color: #666

.pages-list
  > .branch-group
    > .branch
      .branch-title
        font-weight: bold

.branch-group
  .branch-group
    .branch-title
      margin-left: 2em

    .branch-group
      .branch-title
        margin-left: 4em

      .branch-group
        .branch-title
          margin-left: 6em

#flash
  p
    margin: 0

.dropdown-menu
  > li
    > .control-group
      padding: 3px 20px

      .control-label
        font-weight: bold

.modal
  text-align: left
  width: 900px
  margin-left: -450px

  .modal-body
    max-height: none

  .btn-group
    position: relative
    top: -10px
    padding-left: 10px


  .spinner
    display: inline-block
    opacity: 0
    max-width: 0
    @include animation-name(spinIt)
    @include animation-duration(2s)
    @include animation-timing-function(linear)
    @include animation-iteration-count(infinite)

    @include transition(opacity, 0.25s)
    @include transition(max-width, 0.45s)

  .has-spinner.active
    .spinner
      opacity: 1
      max-width: 50px

.control-group.text
  min-height: 310px

  textarea
    height: 263px
    width: 98%

.ckimage-wrapper
  float: left
  margin-left: 10px
  margin-top: 10px
  padding-bottom: 20px
  position: relative

.ckimage-thumb
  width: 150px
  height: 150px
  border: 1px solid black

.ckimage-delete
  display: block
  position: absolute
  bottom: 0
  height: 20px

@import nestable
@import bootstrap-responsive
@import bootstrap_modal

@include keyframes(spinIt)
  from
    @include transform(rotate(0deg))
  to
    @include transform(rotate(360deg))