brevis 0.0.3 → 0.0.4

data/stylesheets/brevis/components/content_lists/_content_stream.sass

@@ -0,0 +1,297 @@
+
+%content-stream-node
+  border-bottom: 1px solid $border-tertiary
+  padding-bottom: 1em
+  margin-bottom: 1em
+  margin-right: 1em
+
+%content-stream-image-max
+  +image-pane
+    @extend %img-left
+    width: 100%
+  .field--type-image,
+  .field--type-image a,
+  img
+    width: 100%
+    vertical-align: top //remove unnecessary spacing at the bottom of it's container
+  // target everyting except the taxonomy term tag
+
+  .panel-pane,
+  .embedded_photo
+    float: left
+    margin-bottom: 0
+    h2
+      margin-bottom: 1px
+
+// these are in the variables partial:
+// $content-stream-img-sm: 50%
+// $content-stream-img-md: 58%
+%content-stream-image-sm
+  @extend %content-stream-image-max
+  +teaser-items
+    width: 40%
+    width: calc(100% - #{$content-stream-img-sm} - 20px)
+    float: left
+  +image-pane
+    @extend %img-left
+    max-width: #{$content-stream-img-sm}
+
+
+%content-stream-image-md
+  @extend %content-stream-image-max
+  +breakpoint($smartphone-landscape)
+    +teaser-items
+      width: 40%
+      width: calc(100% - #{$content-stream-img-md} - 20px)
+      float: left
+    +image-pane
+      max-width: #{$content-stream-img-md}
+
+
+%content-stream-image-lg
+  +image-pane
+    width: 100%
+    max-width: 100%
+    .field--type-image,
+    .field--type-image a,
+    img
+      width: 100%
+  h2
+    margin-bottom: 1px
+
+
+%float-thumb-left
+  +clearfix
+  @extend %content-stream-image-sm
+
+
+%full-size-thumb
+  +image-pane
+    +img-no-float
+    max-width: 100%
+    width: 100%
+
+%no-float-thumb
+  @extend %full-size-thumb
+  .pane-node-title,
+  .pane-node-body
+    width: 100%
+    max-width: 100%
+    float: none
+    margin-bottom: 0
+
+%content-stream-basic
+  .views-row
+    float: left
+    width: 100%
+    max-width: 100%
+
+
+@mixin content-stream-1
+  @extend %content-stream-basic
+  .views-row
+    margin-top: 10px
+  .views-row~.views-row
+    @extend %view_row
+
+
+%layout-2
+  +grid-desktop
+  +fluid-grid(2, $padding: 1%)
+
+%layout-3
+  +grid-desktop
+  +fluid-grid(3, $padding: 1.4%)
+
+%layout-4
+  +grid-desktop
+  +fluid-grid(4, $padding: 1%)
+
+%layout-5
+  +grid-desktop
+  +fluid-grid(5, $padding: 1%)
+
+
+%layout-6
+  +grid-desktop
+  +fluid-grid(6, $padding: 1%)
+
+%layout-7
+  +grid-desktop
+  +fluid-grid(7, $padding: 1%)
+
+%layout-8
+  +grid-desktop
+  +fluid-grid(8, $padding: 1%)
+
+
+%layout-1-3
+  .views-row
+    @extend %no-float-thumb
+
+  .views-row-1
+    float: left
+    width: 100% !important
+    max-width: 100%
+    margin-bottom: 0.5em
+    @extend %no-float-thumb
+    +fallback
+      img
+        @extend %lg-thumbnail
+
+  .views-row-2,
+  .views-row-3,
+  .views-row-4
+    width: 32%
+    float: left
+    clear: none
+    .pane-node-title,
+    .pane-node-created,
+    .pane-node-posted-on
+      display: none
+    .field--name-field-cover-photo:after
+      display: none
+    +image-pane
+      img
+        width: 100% !important
+        +fallback
+          @extend %xxs-thumbnail
+
+    .field--type-image
+      width: 100%
+      max-width: 100%
+      #page &
+        img
+          width: 100%
+
+
+  .views-row-2
+    margin-left: 0
+    clear: left
+  .views-row-3
+    margin-left: 2%
+    clear: none
+  .views-row-4
+    margin-left: 2%
+
+@mixin content-stream-1-3
+  @extend %layout-1-3
+
+
+@mixin content-stream-3
+  .views-row
+    //@extend %float-thumb-left
+    @extend %content-stream-basic
+
+  @include pane-eq-md-up
+    @extend %layout-3
+
+  +fallback
+    @extend %layout-3
+
+@mixin content-stream-3-parent
+  .views-row
+    //@extend %float-thumb-left
+    @extend %content-stream-basic
+  @include pane-parent-eq-md-up
+    @extend %layout-3
+  +fallback
+    @extend %layout-3
+
+
+
+@mixin content-stream-4
+  .views-row
+    //@extend %float-thumb-left
+    @extend %content-stream-basic
+
+  &[data-eq-state="pane-sm"]
+    @extend %layout-2
+
+  @include pane-eq-md-up
+    @extend %layout-4
+  +fallback
+    //@extend %layout-4
+
+
+@mixin content-stream-4-parent
+  .views-row
+    //@extend %float-thumb-left
+    @extend %content-stream-basic
+
+  [data-eq-state="pane-sm"] &
+    @extend %layout-2
+
+  @include pane-parent-eq-md-up
+    @extend %layout-4
+
+  +fallback
+    @extend %layout-4
+
+@mixin content-stream-6
+  +grid-desktop
+  +breakpoint($max-tab-p)
+    +fluid-grid(2, $padding: 1%)
+  +breakpoint($tab-p-desk)
+    +fluid-grid(3, $padding: 1%)
+  +breakpoint($desktop)
+    +fluid-grid(6, $padding: 1%)
+
+@mixin content-stream-6-custom
+  +grid-desktop
+  +breakpoint($max-tab-p)
+    +fluid-grid(2, $padding: 1%)
+  +breakpoint($tab-p-desk)
+    +fluid-grid(2, $padding: 1%)
+    .views-row-5, .views-row-6 //Show only 4 items
+      display: none
+    .views-row-4
+      margin-left: 0
+  +breakpoint($desktop)
+    +fluid-grid(6, $padding: 1%)
+
+
+@mixin content-stream-5
+  +grid-desktop
+  +breakpoint($max-tab-p)
+    +fluid-grid(2, $padding: 1%)
+  +breakpoint($tab-p-desk)
+    +fluid-grid(3, $padding: 1%)
+  +breakpoint($desktop)
+    +fluid-grid(5, $padding: 1%)
+
+@mixin content-stream-7
+  [data-eq-state="pane-xl"]
+    @extend %layout-7
+  [data-eq-state="pane-lg"]
+    @extend %layout-6
+  [data-eq-state="pane-md"]
+    @extend %layout-4
+  +pane-container-eq-sm-down
+    @extend %layout-2
+
+
+@mixin content-stream-8
+  [data-eq-state="pane-xl"]
+    @extend %layout-8
+  [data-eq-state="pane-lg"]
+    @extend %layout-6
+  [data-eq-state="pane-md"]
+    @extend %layout-4
+  +pane-container-eq-sm-down
+    @extend %layout-2
+
+
+%latest-content-list-pane
+  .more-link
+    display: inline-block
+  .feed
+    position: absolute
+    left: 10px
+    bottom: 0px
+    a
+      font-size: 0
+
+
+
+

data/stylesheets/brevis/components/content_lists/_featured.sass

@@ -0,0 +1,80 @@
+// MOBILE FIRST FEATURED LAYOUTS:  http://note.io/1xyZPLu 
+
+%featured-4
+  .node-featured 
+    float: left
+    width: 100%
+
+  +breakpoint($phone-l-tab-p)
+    .node-featured 
+      float: left
+      width: 49%
+      .pane-node-field-image
+        +img-left
+        max-width: 50%
+    .views-row-2,
+    .views-row-4
+      .node-featured  
+        margin-left: 1%
+    .views-row-3
+      .node-featured  
+        clear: left
+
+  +breakpoint($tablet-portrait)
+    .node-featured 
+      float: left
+      width: 24%
+    .views-row-2,
+    .views-row-3,
+    .views-row-4
+      .node-featured  
+        clear: none
+        margin-left: 1%
+
+
+%featured-3
+  .node-featured 
+    float: left
+    width: 100%
+
+  +breakpoint($phone-l-tab-p)
+    .node-featured 
+      width: 32%
+      .pane-node-field-image
+        +img-left
+        max-width: 50%
+    .views-row-2,
+    .views-row-3
+      .node-featured  
+        margin-left: 1%
+
+
+%featured-1-3
+  .node-featured .pane-node-field-image
+    max-width: 100%
+    width: 100%
+    +img-no-float
+  .field--name-field-image
+    text-align: center
+  .views-row-1 
+    .node-featured
+      width: 100%
+      margin-bottom: 0.5em
+
+  .views-row-2,
+  .views-row-3,
+  .views-row-4
+    .node-featured
+      width: 32%
+      float: left
+    .pane-node-title, 
+    .pane-node-created
+      display: none
+
+  .views-row-2 .node-featured  
+    margin-left: 0
+  .views-row-3 .node-featured  
+    margin-left: 2%
+    clear: none
+  .views-row-4 .node-featured  
+    margin-left: 2%

data/stylesheets/brevis/components/content_lists/_headlines.sass

@@ -0,0 +1,5 @@
+%headline-list
+  #page &
+    border-bottom: 1px solid $border-tertiary
+    padding-bottom: 0.5em
+    margin-bottom: 0.5em

data/stylesheets/brevis/components/content_lists/_topic_lists.sass

@@ -0,0 +1,16 @@
+// TOPIC LISTS http://note.io/TFMja0
+
+%topic-list-row
+  border-bottom: 1px solid $border-primary
+  padding-bottom: 1em
+  margin-bottom: 1em
+
+%topic-list-image
+  +img-left
+
+%topic-list-title
+  @extend %list-title
+
+%topic-list-byline
+  @extend %small-text
+  color: $text-tertiary

data/stylesheets/brevis/components/content_modules/_carousel.sass

@@ -0,0 +1,23 @@
+
+  
+%carousel-layout
+  @extend %flex-control-nav
+  .flexslider
+    *
+      +box-sizing(content-box)
+  .flex-viewport 
+    width: 100%
+  ul.slides 
+    border-bottom: $border-tertiary solid 1px
+    border-left: $border-tertiary solid 1px
+    li
+      border: $border-tertiary solid 1px
+      border-bottom: 0
+      padding: 8px 8px 4px 8px
+      display: block
+      margin-left: -1px
+      img
+        width: 66px
+        float: left
+        margin: 0 5px 4px 0
+

data/stylesheets/brevis/components/content_modules/_chosen.sass

@@ -0,0 +1,294 @@
+%chosen-container
+  position: relative
+  display: inline-block
+  vertical-align: middle
+  font-size: 13px
+  zoom: 1
+  *display: inline
+  -webkit-user-select: none
+  -moz-user-select: none
+  user-select: none
+
+  .chosen-drop
+    position: absolute
+    top: 100%
+    left: -9999px
+    z-index: 1010
+    width: 100%
+    border-top: 0
+  
+  &.chosen-with-drop .chosen-drop
+    left: 0
+
+  a
+    cursor: pointer
+
+  +breakpoint($hidpi)
+    .chosen-rtl .chosen-search input[type="text"],
+    .chosen-container-single .chosen-single abbr,
+    .chosen-container-single .chosen-single div b,
+    .chosen-container-single .chosen-search input[type="text"],
+    .chosen-container-multi .chosen-choices .search-choice .search-choice-close,
+    .chosen-container .chosen-results-scroll-down span,
+    .chosen-container .chosen-results-scroll-up span
+      background-image: url('chosen-sprite@2x.png') !important
+      background-size: 52px 37px !important
+      background-repeat: no-repeat !important
+    
+
+%chosen-single-chosen 
+  .chosen-single
+    position: relative
+    display: block
+    overflow: hidden
+    padding: 8px 25px 0 8px
+    height: $form-element-height
+    //border-radius: 5px
+    background: no-repeat 95% 50%
+    +svg-bg-simple("arrow-down")
+    background-clip: padding-box
+    text-decoration: none
+    white-space: nowrap
+    font-size: 14px
+    line-height: 24px
+    span
+      display: block
+      overflow: hidden
+      margin-right: 26px
+      text-overflow: ellipsis
+      white-space: nowrap
+    abbr
+      position: absolute
+      top: 6px
+      right: 26px
+      display: block
+      width: 12px
+      height: 12px
+      background: url('chosen-sprite.png') -42px 1px no-repeat
+      font-size: 1px
+    abbr:hover
+      background-position: -42px -10px
+    div
+      position: absolute
+      top: 0
+      right: 0
+      display: block
+      width: 18px
+      height: 100%
+    div b
+      display: block
+      width: 100%
+      height: 100%
+      background: url('chosen-sprite.png') no-repeat 0px 2px
+
+  &.chosen-disabled .chosen-single abbr:hover
+    background-position: -42px -10px
+  .chosen-single-with-deselect span
+    margin-right: 38px
+
+  .chosen-search
+    position: relative
+    z-index: 1010
+    margin: 0
+    padding: 3px 4px
+    white-space: nowrap
+    input[type="text"]
+      margin: 1px 0
+      padding: 4px 20px 4px 5px
+      width: 100%
+      height: auto
+      outline: 0
+      background: white url('chosen-sprite.png') no-repeat 100% -20px
+      background: url('chosen-sprite.png') no-repeat 100% -20px
+      font-size: 1em
+      font-family: sans-serif
+      line-height: normal
+      border-radius: 0
+
+  .chosen-drop
+    margin-top: -1px
+    border-radius: 0 0 4px 4px
+    background-clip: padding-box
+
+  &.chosen-container-single-nosearch .chosen-search
+    position: absolute
+    left: -9999px
+
+
+%chosen-results
+  position: relative
+  overflow-x: hidden
+  overflow-y: auto
+  margin: 0 4px 4px 0
+  padding: 0 0 0 4px
+  max-height: 240px
+  -webkit-overflow-scrolling: touch
+  li
+    display: none
+    margin: 0
+    padding: 5px 6px
+    list-style: none
+    line-height: 15px
+    -webkit-touch-callout: none
+    &.active-result
+      display: list-item
+      cursor: pointer
+    &.disabled-result
+      display: list-item
+      cursor: default
+    &.no-results
+      display: list-item
+    &.group-result
+      display: list-item
+      font-weight: bold
+      cursor: default
+    &.group-option
+      padding-left: 15px
+    em
+      font-style: normal
+      text-decoration: underline
+
+
+%chosen-multi-chosen
+  .chosen-choices
+    position: relative
+    overflow: hidden
+    margin: 0
+    padding: 0
+    width: 100%
+    height: auto !important
+    height: 1%
+    border: 1px solid #aaa
+    cursor: text
+    li
+      float: left
+      list-style: none
+    li.search-field
+      margin: 0
+      padding: 0
+      white-space: nowrap
+    li.search-field input[type="text"]
+      margin: 1px 0
+      padding: 5px
+      height: 15px
+      outline: 0
+      font-size: 100%
+      font-family: sans-serif
+      line-height: normal
+      border-radius: 0
+    li.search-choice
+      position: relative
+      margin: 3px 0 3px 5px
+      padding: 3px 20px 3px 5px
+      background-clip: padding-box
+      line-height: 13px
+      cursor: default
+    li.search-choice .search-choice-close
+      position: absolute
+      top: 4px
+      right: 3px
+      display: block
+      width: 12px
+      height: 12px
+      background: url('chosen-sprite.png') -42px 1px no-repeat
+      font-size: 1px
+    li.search-choice .search-choice-close:hover
+      background-position: -42px -10px
+    li.search-choice-focus .search-choice-close
+      background-position: -42px -10px
+
+  .chosen-results
+    margin: 0
+    padding: 0
+  .chosen-drop .result-selected
+    display: list-item
+    cursor: default
+
+
+%chosen-active
+  &.chosen-with-drop 
+    .chosen-single
+      border: 1px solid #aaa
+      -moz-border-radius-bottomright: 0
+      border-bottom-right-radius: 0
+      -moz-border-radius-bottomleft: 0
+      border-bottom-left-radius: 0
+      div
+        border-left: none
+        background: transparent
+
+      div b
+        background-position: -18px 2px
+
+
+%chosen-disabled-support 
+  .chosen-disabled
+    opacity: 0.5 !important
+    cursor: default
+
+  .chosen-disabled .chosen-single
+    cursor: default
+
+  .chosen-disabled .chosen-choices .search-choice .search-choice-close
+    cursor: default
+
+
+%chosen-rtl
+  .chosen-rtl
+    text-align: right
+
+    .chosen-single
+      overflow: visible
+      padding: 0 8px 0 0
+      span
+        margin-right: 0
+        margin-left: 26px
+        direction: rtl
+      div
+        right: auto
+        left: 3px
+      abbr
+        right: auto
+        left: 26px
+
+    .chosen-single-with-deselect span
+      margin-left: 38px
+
+    .chosen-choices 
+      li
+        float: right
+      li.search-field input[type="text"]
+        direction: rtl
+      li.search-choice
+        margin: 3px 5px 3px 0
+        padding: 3px 5px 3px 19px
+      li.search-choice .search-choice-close
+        right: auto
+        left: 4px
+
+    &.chosen-container-single-nosearch .chosen-search,
+    .chosen-drop
+      left: 9999px
+
+    &.chosen-container-single .chosen-results
+      margin: 0 0 4px 4px
+      padding: 0 4px 0 0
+
+    .chosen-results li.group-option
+      padding-right: 15px
+      padding-left: 0
+
+    &.chosen-container-active.chosen-with-drop .chosen-single div
+      border-right: none
+
+    .chosen-search input[type="text"]
+      padding: 4px 5px 4px 20px
+      background: white url('chosen-sprite.png') no-repeat -30px -20px
+      background: url('chosen-sprite.png') no-repeat -30px -20px
+      direction: rtl
+
+    &.chosen-container-single .chosen-single div b
+      background-position: 6px 2px
+
+    &.chosen-container-single.chosen-with-drop .chosen-single div b
+      background-position: -12px 2px