partystreusel 1.1.1 → 1.2.0

data/styleguide/source/stylesheets/partystreusel/small/modules/_content.sass

@@ -0,0 +1,5 @@
+.sc-lead
+  font-size: rem(19)
+
+.sc-hr-alternate
+  border-color: $secondary-color

data/styleguide/source/stylesheets/partystreusel/small/modules/_dropdown.sass

@@ -0,0 +1,33 @@
+.dropdown
+  position: relative
+  margin: 0 0 rem(18) 0
+
+  .btn
+    margin-bottom: 0
+
+.dropdown__menu
+  display: none
+  position: absolute
+  top: 100%
+  left: 0
+  z-index: 1000
+  float: left
+  min-width: rem(160)
+  padding: rem(6) 0
+  margin: rem(2) 0 0 0
+  list-style: none
+  background-color: $white
+  border: rem(1) solid $grey
+
+  a
+    display: block
+    padding: rem(5) rem(12)
+    white-space: nowrap
+
+// ----------------------------------------------------------
+// STATES
+// ----------------------------------------------------------
+.dropdown--open
+
+  .dropdown__menu
+    display: block

data/styleguide/source/stylesheets/partystreusel/small/modules/_embeds.sass

@@ -0,0 +1,24 @@
+.embeds
+  position: relative
+  padding-bottom: 56.25% // 16:9
+  padding-top: rem(25)
+  height: 0
+  margin-bottom: space(2)
+
+  video
+    width: 100%
+    height: auto
+
+  iframe
+    position: absolute
+    top: 0
+    left: 0
+    width: 100%
+    height: 100%
+
+// ----------------------------------------------------------
+// STATES
+// ----------------------------------------------------------
+.embeds--widescreen
+  padding-bottom: 56.34%
+  padding-top: 0

data/styleguide/source/stylesheets/partystreusel/small/modules/_form.sass

@@ -0,0 +1,115 @@
+fieldset
+  border: 0
+  padding: 0
+  margin: 0 0 rem(18)
+
+legend
+  @extend %h4-styles-s
+  text-transform: uppercase
+  font-weight: $header-font-weight
+  margin-bottom: rem(6)
+
+label
+  display: inline-block
+  max-width: 100%
+  margin-bottom: rem(6)
+  cursor: pointer
+  color: $grey-dark
+  font-size: rem(16)
+  line-height: 1.5
+
+input
+  +placeholder
+    color: $grey-dark
+
+#{$all-text-inputs},
+textarea
+  display: block
+  width: 100%
+  background-color: $grey-light
+  border: rem(1) solid $grey-light
+  border-radius: 0
+  box-shadow: inset rem(1) rem(1) rem(3) 0 $secondary-color
+  padding: rem(9) rem(12)
+  font-size: rem(16)
+  line-height: 1.5
+
+  &:focus
+    outline: 0
+    background-color: $white
+    box-shadow: rem(0) rem(1) rem(2) 0 $secondary-color
+
+input[type="search"]
+  box-sizing: border-box
+
+select
+  width: 100%
+  height: rem(44)
+  padding: rem(9) rem(30) rem(9) rem(12)
+  background-color: $white
+  background-image: url(data:image/svg+xml;charset=US-UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2214%22%20viewBox%3D%22-281%20400%2024%2014%22%20enable-background%3D%22new%20-281%20400%2024%2014%22%3E%3Cpath%20d%3D%22M-275%20406l6-6%206%206zM-263%20408l-6%206-6-6z%22%2F%3E%3C%2Fsvg%3E)
+  background-position: right rem(5) center
+  background-repeat: no-repeat
+  border: rem(1) solid $grey
+  border-radius: 0
+  color: $grey-dark
+  font-size: rem(16)
+  line-height: 1.5
+  +appearance(none)
+
+  .lt-ie10 &
+    background-image: none
+    padding-right: rem(12)
+
+  &::-ms-expand
+    display: none
+
+  &:hover
+    color: $primary-color
+    cursor: pointer
+
+// ----------------------------------------------------------
+// INPUT WITH BUTTON ON THE SIDE
+// ----------------------------------------------------------
+.input-addon
+  +display(flex)
+
+.input-addon__field
+  +flex(1)
+
+.input-addon__item
+  margin-bottom: 0
+
+// ----------------------------------------------------------
+// INPUT WITH ICON BUTTON INSIDE
+// ----------------------------------------------------------
+.input-overlay
+  position: relative
+
+  .input-overlay__input
+    padding-right: rem(50)
+
+.input-overlay__button
+  position: absolute
+  right: 0
+  bottom: 0
+  margin-bottom: 0
+  color: $body-font-color
+
+  &:hover
+    color: $grey-dark
+
+  &,
+  &:hover,
+  &:active
+    background-color: transparent
+
+// ----------------------------------------------------------
+// STATES
+// ----------------------------------------------------------
+.form--field-error
+  label
+    color: $alert-color
+
+  input
+    border-color: $alert-color

data/styleguide/source/stylesheets/partystreusel/small/modules/_grid.sass

@@ -0,0 +1,5 @@
+.grid__container
+  +outer-container
+
+.grid__row
+  +row

data/styleguide/source/stylesheets/partystreusel/small/modules/_iconbar.sass

@@ -0,0 +1,41 @@
+// ----------------------------------------------------------
+// ICONBAR
+// ----------------------------------------------------------
+.iconbar__list
+  +display(flex)
+  +flex-wrap(wrap)
+  margin: 0
+  padding: 0
+  list-style: none
+
+.iconbar__item
+  display: block
+  min-width: 33%
+  +flex(1 0 33%)
+
+  a
+    display: block
+    padding: rem(12)
+    background-color: $grey-light
+    color: $grey-dark
+    text-align: center
+    border-bottom: rem(3) solid currentColor
+
+  .icon
+    display: block
+    margin: 0 auto rem(5)
+
+// ----------------------------------------------------------
+// STATES
+// ----------------------------------------------------------
+.iconbar__item
+
+  a:hover
+    background-color: $white
+    color: $body-font-color
+    +transition( all .1s linear )
+
+.iconbar__item a:focus,
+.iconbar__item--active a,
+.iconbar__item--active a:hover
+  color: $primary-color

data/styleguide/source/stylesheets/partystreusel/small/modules/_icons.sass

@@ -0,0 +1,23 @@
+.icon
+  display: inline-block
+  width: rem(30)
+  height: rem(30)
+  background-repeat: no-repeat
+  background-size: 100% 100%
+  vertical-align: middle
+  fill: currentColor
+
+.icon--m
+  width: rem(40)
+  height: rem(40)
+
+.icon--l
+  width: rem(60)
+  height: rem(60)
+
+// ----------------------------------------------------------
+// inlinesvg support reset
+// ----------------------------------------------------------
+.inlinesvg .icon
+  background-repeat: repeat
+  background-size: auto auto

data/styleguide/source/stylesheets/partystreusel/small/modules/_image.sass

@@ -0,0 +1,18 @@
+img
+  max-width: 100%
+  height: auto
+
+figure
+  margin: 0
+
+.image
+
+  img
+    margin-bottom: rem(12)
+
+.image__caption
+  color: $body-font-color
+  padding: 0 space(1)
+  font-size: rem(15)
+  line-height: 1.6
+  margin-bottom: rem(12)

data/styleguide/source/stylesheets/partystreusel/small/modules/_links.sass

@@ -0,0 +1,49 @@
+.links
+  +outer-container
+
+.links__list
+  list-style-type: none
+  margin: 0
+  padding: 0
+
+.links__item
+  margin-bottom: rem(12)
+
+  .btn
+    display: block
+    float: left
+
+  .btn--icon
+    background-color: $grey
+    border-radius: 100%
+    color: $body-font-color
+
+.links__link
+  +clearfix
+  display: block
+  position: relative
+  width: 100%
+  padding: 0
+  margin: 0
+  text-decoration: none
+  color: $grey-dark
+
+.links__text
+  display: block
+  min-height: rem(56)
+  margin-left: rem(54)
+  border-bottom: rem(2) solid $grey
+  line-height: 1.5
+
+  small
+    font-size: rem(14)
+    display: block
+    color: $body-font-color
+
+// ----------------------------------------------------------
+// STATES
+// ----------------------------------------------------------
+.links__link:hover
+  .btn--icon
+    background-color: $grey-light
+    color: $grey-dark

data/styleguide/source/stylesheets/partystreusel/small/modules/_offcanvas.sass

@@ -0,0 +1,109 @@
+$offcanvas-width: rem(300)
+
+.offcanvas__outer
+  position: relative
+  height: 100%
+
+.offcanvas__inner
+  height: 100%
+  position: relative
+  left: 0
+  +backface-visibility(hidden)
+  +transition( transform .3s ease )
+  +transform( translate3d(0, 0, 0 ) )
+
+.offcanvas__overlay
+  position: absolute
+  top: 0
+  right: 0
+  width: 0
+  height: 0
+  background: rgba($black,0.4)
+  opacity: 0
+  z-index: 100
+  +transition(opacity 0.2s, width 0.1s 0.2s, height 0.1s 0.2s)
+
+.offcanvas__container
+  position: absolute
+  top: 0
+  left: 0
+  overflow-y: auto
+  width: $offcanvas-width
+  height: 100%
+  z-index: 101
+  background-color: $primary-color
+  color: $body-font-color
+  +backface-visibility(hidden)
+  +transform( translate3d(-100%, 0, 0) )
+
+.offcanvas__container-inner
+  opacity: .7
+  +transition( opacity 300ms 100ms ease, transform 400ms ease)
+  +transform( translate3d(-$offcanvas-width, 0, 0) scale3d(0.8, 0.8, 0.8))
+  +transform-origin(50% 0%)
+
+.offcanvas__opener,
+.offcanvas__close
+  display: inline-block
+  background-color: transparent
+  border: 0
+  outline: 0
+  line-height: 1.9
+  padding: rem(5) 0
+
+  .icon
+    vertical-align: top
+
+.offcanvas__opener
+  &:hover
+    color: $primary-color
+
+.offcanvas__close
+  width: 100%
+  padding: rem(11) rem(12)
+  text-align: left
+
+  &:hover
+    color: $white
+
+// ----------------------------------------------------------
+// STATES
+// ----------------------------------------------------------
+.offcanvas--open
+
+  .offcanvas__outer
+    overflow: hidden
+
+  .offcanvas__inner
+    +transform(translate3d($offcanvas-width, 0, 0) scale3d(1, 1, 1))
+
+  .offcanvas__container
+    -webkit-overflow-scrolling: touch
+
+  .offcanvas__container-inner
+    opacity: 1
+    +transform(translate3d(0, 0, 0))
+
+  .offcanvas__overlay
+    width: 100%
+    height: 100%
+    opacity: 1
+    +transition(opacity 0.2s)
+
+  .offcanvas__opener
+    opacity: 0
+    pointer-events: none
+    +transition( opacity .3s ease )
+
+// ----------------------------------------------------------
+// NO CSS TRANSFORM Fallback
+// ----------------------------------------------------------
+.no-csstransforms3d
+
+  .offcanvas__container
+    display: none
+
+  .offcanvas--open
+    .offcanvas__container
+      display: block
+

data/styleguide/source/stylesheets/partystreusel/small/modules/_offcanvas_nav.sass

@@ -0,0 +1,35 @@
+.offcanvas-nav
+  margin: 0
+  padding: 0
+  list-style-type: none
+
+  > li
+    border-top: rem(1) solid darken($primary-color, 5%)
+
+.offcanvas-nav__link
+  display: block
+  padding: rem(11) rem(18)
+  color: $body-font-color
+  font-size: rem(18)
+  line-height: 1.33
+
+.offcanvas-nav__sub
+  margin: 0
+  padding: 0
+  list-style-type: none
+  display: none
+
+  a
+    padding-left: rem(36)
+
+// ----------------------------------------------------------
+// STATES
+// ----------------------------------------------------------
+.offcanvas-nav__link:hover,
+.offcanvas-nav__link:focus,
+.offcanvas-nav__link--active
+  color: $white
+  background-color: darken($primary-color, 5%)
+
+.offcanvas-nav__sub--open
+  display: block

data/styleguide/source/stylesheets/partystreusel/small/modules/_options.sass

@@ -0,0 +1,117 @@
+$radio-size: rem(24)
+$checkbox-size: rem(20)
+$option-border-size: rem(2)
+$option-label-size: rem(42)
+
+$radio-label-padding: ($option-label-size - $radio-size) / 2
+$checkbox-label-padding: ($option-label-size - $checkbox-size) / 2
+$radio-knuble-size: $radio-size/2
+$checkbox-knuble-size: $checkbox-size/2
+$radio-knuble-distance: $radio-knuble-size/2
+$checkbox-knuble-distance: $checkbox-knuble-size/2
+
+[type="radio"],
+[type="checkbox"]
+  position: absolute
+  overflow: hidden
+  width: rem(1)
+  height: rem(1)
+  padding: 0
+  margin: rem(-1)
+  border: 0
+  clip: rect(0 0 0 0)
+
+  + label
+    position: relative
+    vertical-align: top
+    padding: $radio-label-padding $radio-label-padding $radio-label-padding $option-label-size
+    margin-bottom: 0
+
+    i
+      position: absolute
+
+      &:before
+        content: ''
+        display: block
+        border: $option-border-size solid $grey
+        background-color: $white
+
+      &:after
+        content: ''
+        display: none
+        position: absolute
+        background-color: $primary-color
+
+  &:checked,
+  &:checked:hover
+    + label
+      color: $primary-color
+
+      i
+        &:before
+          color: $primary-color
+          border-color: currentColor
+
+        &:after
+          display: inline-block
+
+  &:not(:checked) + label:hover
+    i:before
+      color: $grey-dark
+      border-color: currentColor
+
+[type="radio"]
+  + label i
+    display: block
+    top: ($option-label-size - $radio-size) / 2
+    left: ($option-label-size - $radio-size) / 2
+
+    &:before
+      width: $radio-size
+      height: $radio-size
+
+    &:after
+      width: $radio-knuble-size
+      height: $radio-knuble-size
+      left: $radio-knuble-distance
+      top: $radio-knuble-distance
+
+    &:before,
+    &:after
+      border-radius: 100%
+
+[type="checkbox"]
+  + label i
+    top: ($option-label-size - $checkbox-size) / 2
+    left: ($option-label-size - $checkbox-size) / 2
+
+    &:before
+      width: $checkbox-size
+      height: $checkbox-size
+
+    &:after
+      width: $checkbox-knuble-size
+      height: $checkbox-knuble-size
+      left: $checkbox-knuble-distance
+      top: $checkbox-knuble-distance
+
+// ----------------------------------------------------------
+// IE8 Fallback
+// ----------------------------------------------------------
+.lt-ie9
+  [type="radio"],
+  [type="checkbox"]
+    position: inherit
+    overflow: visible
+    width: 20px
+    height: 20px
+    padding: inherit
+    margin: inherit
+    border: inherit
+    clip: auto
+
+    + label
+      padding: 0
+
+      i
+        display: none

data/styleguide/source/stylesheets/partystreusel/small/modules/_readmore.sass

@@ -0,0 +1,36 @@
+.readmore__button
+  display: inline-block
+  position: relative
+  margin-bottom: rem(12)
+  padding: rem(7) rem(30) rem(7) 0
+  font-size: $paragraph-font-size
+  color: $grey-dark
+
+  &:after
+    content: ''
+    display: inline-block
+    position: absolute
+    top: rem(15)
+    right: rem(10)
+    +triangle(rem(10), currentColor, down)
+
+  &:hover
+    color: $primary-color
+
+// ----------------------------------------------------------
+// STATES
+// ----------------------------------------------------------
+.readmore--closed
+  display: none
+
+.readmore--opened
+
+  + .readmore__button
+    &:after
+      border-top: 0
+      border-left-color: transparent
+      border-right-color: transparent
+      border-bottom: rem(5) solid currentColor
+
+    &:hover:after
+      border-bottom-color: $primary-color

data/styleguide/source/stylesheets/partystreusel/small/modules/_slider.sass

@@ -0,0 +1,49 @@
+.slider
+  position: relative
+  overflow: hidden
+  width: 100%
+  text-align: center
+
+.slider__list
+  height: 100%
+  padding: 0
+  margin: 0
+  overflow: hidden
+  list-style: none
+  *zoom: 1
+  +backface-visibility(hidden)
+  +transform-style(preserve-3d)
+
+.slider__item
+  display: block
+  width: 100%
+
+  img
+    display: block
+    width: 100%
+    height: auto
+
+.slider__controls
+  display: none
+
+.slider__nav
+  position: relative
+  margin: rem(10) 0
+  text-align: center
+
+.slider__nav-item
+  width: rem(24)
+  height: rem(24)
+  clear: none
+  display: inline-block
+  margin: 0 rem(6)
+  background-color: $secondary-color
+  border: rem(6) solid $white
+  border-radius: 100%
+
+// ----------------------------------------------------------
+// STATES
+// ----------------------------------------------------------
+.slider__nav-item:hover,
+.slider__nav-item--active
+  background-color: $primary-color