partystreusel 1.1.1 → 1.2.0

data/styleguide/source/stylesheets/partystreusel/normalize.css

@@ -0,0 +1,375 @@
+/*! normalize.css v2.0.1 | MIT License | git.io/normalize */
+
+/* ==========================================================================
+   HTML5 display definitions
+   ========================================================================== */
+
+/*
+ * Corrects `block` display not defined in IE 8/9.
+ */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+nav,
+section,
+summary {
+    display: block;
+}
+
+/*
+ * Corrects `inline-block` display not defined in IE 8/9.
+ */
+
+audio,
+canvas,
+video {
+    display: inline-block;
+}
+
+/*
+ * Prevents modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+
+audio:not([controls]) {
+    display: none;
+    height: 0;
+}
+
+/*
+ * Addresses styling for `hidden` attribute not present in IE 8/9.
+ */
+
+[hidden] {
+    display: none;
+}
+
+/* ==========================================================================
+   Base
+   ========================================================================== */
+
+/*
+ * 1. Sets default font family to sans-serif.
+ * 2. Prevents iOS text size adjust after orientation change, without disabling
+ *    user zoom.
+ */
+
+html {
+    font-family: sans-serif; /* 1 */
+    -webkit-text-size-adjust: 100%; /* 2 */
+    -ms-text-size-adjust: 100%; /* 2 */
+}
+
+/*
+ * Removes default margin.
+ */
+
+body {
+    margin: 0;
+}
+
+/* ==========================================================================
+   Links
+   ========================================================================== */
+
+/*
+ * Addresses `outline` inconsistency between Chrome and other browsers.
+ */
+
+a:focus {
+    outline: thin dotted;
+}
+
+/*
+ * Improves readability when focused and also mouse hovered in all browsers.
+ */
+
+a:active,
+a:hover {
+    outline: 0;
+}
+
+/* ==========================================================================
+   Typography
+   ========================================================================== */
+
+/*
+ * Addresses `h1` font sizes within `section` and `article` in Firefox 4+,
+ * Safari 5, and Chrome.
+ */
+
+h1 {
+    font-size: 2em;
+}
+
+/*
+ * Addresses styling not present in IE 8/9, Safari 5, and Chrome.
+ */
+
+abbr[title] {
+    border-bottom: 1px dotted;
+}
+
+/*
+ * Addresses style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
+ */
+
+b,
+strong {
+    font-weight: bold;
+}
+
+/*
+ * Addresses styling not present in Safari 5 and Chrome.
+ */
+
+dfn {
+    font-style: italic;
+}
+
+/*
+ * Addresses styling not present in IE 8/9.
+ */
+
+mark {
+    background: #ff0;
+    color: #000;
+}
+
+
+/*
+ * Corrects font family set oddly in Safari 5 and Chrome.
+ */
+
+code,
+kbd,
+pre,
+samp {
+    font-family: monospace, serif;
+    font-size: 1em;
+}
+
+/*
+ * Improves readability of pre-formatted text in all browsers.
+ */
+
+pre {
+    white-space: pre;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+}
+
+/*
+ * Sets consistent quote types.
+ */
+
+q {
+    quotes: "\201C" "\201D" "\2018" "\2019";
+}
+
+/*
+ * Addresses inconsistent and variable font size in all browsers.
+ */
+
+small {
+    font-size: 80%;
+}
+
+/*
+ * Prevents `sub` and `sup` affecting `line-height` in all browsers.
+ */
+
+sub,
+sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+}
+
+sup {
+    top: -0.5em;
+}
+
+sub {
+    bottom: -0.25em;
+}
+
+/* ==========================================================================
+   Embedded content
+   ========================================================================== */
+
+/*
+ * Removes border when inside `a` element in IE 8/9.
+ */
+
+img {
+    border: 0;
+}
+
+/*
+ * Corrects overflow displayed oddly in IE 9.
+ */
+
+svg:not(:root) {
+    overflow: hidden;
+}
+
+/* ==========================================================================
+   Figures
+   ========================================================================== */
+
+/*
+ * Addresses margin not present in IE 8/9 and Safari 5.
+ */
+
+figure {
+    margin: 0;
+}
+
+/* ==========================================================================
+   Forms
+   ========================================================================== */
+
+/*
+ * Define consistent border, margin, and padding.
+ */
+
+fieldset {
+    border: 1px solid #c0c0c0;
+    margin: 0 2px;
+    padding: 0.35em 0.625em 0.75em;
+}
+
+/*
+ * 1. Corrects color not being inherited in IE 8/9.
+ * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+ */
+
+legend {
+    border: 0; /* 1 */
+    padding: 0; /* 2 */
+}
+
+/*
+ * 1. Corrects font family not being inherited in all browsers.
+ * 2. Corrects font size not being inherited in all browsers.
+ * 3. Addresses margins set differently in Firefox 4+, Safari 5, and Chrome
+ */
+
+button,
+input,
+select,
+textarea {
+    font-family: inherit; /* 1 */
+    font-size: 100%; /* 2 */
+    margin: 0; /* 3 */
+}
+
+/*
+ * Addresses Firefox 4+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+
+button,
+input {
+    line-height: normal;
+}
+
+/*
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ *    and `video` controls.
+ * 2. Corrects inability to style clickable `input` types in iOS.
+ * 3. Improves usability and consistency of cursor style between image-type
+ *    `input` and others.
+ */
+
+button,
+html input[type="button"], /* 1 */
+input[type="reset"],
+input[type="submit"] {
+    -webkit-appearance: button; /* 2 */
+    cursor: pointer; /* 3 */
+}
+
+/*
+ * Re-set default cursor for disabled elements.
+ */
+
+button[disabled],
+input[disabled] {
+    cursor: default;
+}
+
+/*
+ * 1. Addresses box sizing set to `content-box` in IE 8/9.
+ * 2. Removes excess padding in IE 8/9.
+ */
+
+input[type="checkbox"],
+input[type="radio"] {
+    box-sizing: border-box; /* 1 */
+    padding: 0; /* 2 */
+}
+
+/*
+ * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
+ * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
+ *    (include `-moz` to future-proof).
+ */
+
+input[type="search"] {
+    -webkit-appearance: textfield; /* 1 */
+    -moz-box-sizing: content-box;
+    -webkit-box-sizing: content-box; /* 2 */
+    box-sizing: content-box;
+}
+
+/*
+ * Removes inner padding and search cancel button in Safari 5 and Chrome
+ * on OS X.
+ */
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+}
+
+/*
+ * Removes inner padding and border in Firefox 4+.
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+}
+
+/*
+ * 1. Removes default vertical scrollbar in IE 8/9.
+ * 2. Improves readability and alignment in all browsers.
+ */
+
+textarea {
+    overflow: auto; /* 1 */
+    vertical-align: top; /* 2 */
+}
+
+/* ==========================================================================
+   Tables
+   ========================================================================== */
+
+/*
+ * Remove most spacing between table cells.
+ */
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}

data/styleguide/source/stylesheets/partystreusel/partystreusel.css.sass

@@ -0,0 +1,2 @@
+.readmore--closed
+  display: none

data/styleguide/source/stylesheets/partystreusel/small/_layout.sass

@@ -0,0 +1,18 @@
+html,
+body
+  height: 100%
+
+main
+  +outer-container
+
+  + footer
+    height: rem(100)
+    background-color: $primary-color
+
+article
+  +span-columns(12)
+  padding: 0 rem(12)
+
+.page__header
+  +outer-container
+  padding: 0 rem(12)

data/styleguide/source/stylesheets/partystreusel/small/_typo.sass

@@ -0,0 +1,81 @@
+body
+  font-family: $body-font-family
+  font-weight: $body-font-weight
+  font-style: $body-font-style
+  font-size: $body-font-size
+  line-height: $body-line-height
+  background-color: $body-bg
+  color: $body-font-color
+
+h1, h2, h3, h4, h5, h6
+  font-family: $header-font-family
+  font-weight: $header-font-weight
+  font-style: $header-font-style
+  text-rendering: $header-text-rendering
+  color: $header-font-color
+  text-transform: uppercase
+
+h1
+  font-size: $h1-font-size
+  line-height: $h1-line-height
+  margin: rem(30) 0 rem(12)
+
+h2
+  font-size: $h2-font-size
+  line-height: $h2-line-height
+  margin: rem(27) 0 rem(9)
+
+h3
+  font-size: $h3-font-size
+  line-height: $h3-line-height
+  margin: rem(24) 0 rem(3)
+
+%h4-styles-s,
+h4, h5, h6
+  font-size: $h4-font-size
+  line-height: $h4-line-height
+  margin: rem(21) 0 rem(3)
+
+p
+  font-family: $paragraph-font-family
+  font-weight: $paragraph-font-weight
+  font-size: $paragraph-font-size
+  line-height: $paragraph-line-height
+  margin-top: 0
+  margin-bottom: $paragraph-margin-bottom
+  text-rendering: $paragraph-text-rendering
+
+a
+  text-decoration: $anchor-text-decoration
+  color: $anchor-font-color
+
+  &:hover
+    color: $anchor-font-color-hover
+
+ul, ol
+  list-style-position: $list-style-position
+  margin-left: $list-side-margin
+  padding-left: $list-side-padding
+
+ol
+  padding-left: $list-ol-side-padding
+
+ul ul,
+ol ol
+  margin-left: $list-nested-margin
+
+hr
+  border-width: $hr-border-width
+  border-style: $hr-border-style
+  border-color: $hr-border-color
+  margin-top: $hr-margin-top
+  margin-bottom: $hr-margin-bottom
+
+small
+  color: $small-font-color
+
+blockquote
+  font-family: $blockquote-font-family
+  font-size: $blockquote-font-size
+  font-style: $blockquote-font-style
+  margin: $blockquote-margin

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

@@ -0,0 +1,68 @@
+.accordion
+  display: block
+  margin: 0
+  padding: 0
+
+.accordion__item
+  display: block
+  border-top: rem(2) solid $secondary-color
+
+.accordion__title
+  display: block
+  min-height: rem(66)
+  margin: 0
+  padding: rem(15) rem(50) rem(15) 0
+  position: relative
+  font-size: rem(16)
+  line-height: 1.125
+  font-weight: $header-font-weight
+  cursor: pointer
+  color: $body-font-color
+
+  &:before,
+  &:after
+    content: ''
+    display: block
+    position: absolute
+
+  &:before
+    width: rem(40)
+    height: rem(40)
+    position: absolute
+    top: rem(13)
+    right: 0
+    border: rem(1) solid $grey
+    border-radius: 100%
+
+  &:after
+    top: rem(31)
+    right: rem(15)
+    +triangle(rem(10), currentColor, down)
+
+  &:hover
+    color: $grey
+
+.accordion__content
+  display: none
+
+// ----------------------------------------------------------
+// STATES
+// ----------------------------------------------------------
+.accordion__item--open
+  .accordion__title
+    color: $primary-color
+
+    &:after
+      top: rem(30)
+      border-top: 0
+      +triangle(rem(10), currentColor, up)
+
+  .accordion__content
+    display: block
+
+// ----------------------------------------------------------
+// NO-JS Fallback
+// ----------------------------------------------------------
+.no-js
+  .accordion__content
+    display: block

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

@@ -0,0 +1,36 @@
+.breadcrumb
+  +clearfix
+  display: block
+  list-style: none
+  padding: 0
+  margin: 0 0 rem(12) 0
+
+.breadcrumb__item
+  display: inline-block
+  padding: rem(8) 0
+
+  &:after
+    content: '|'
+    margin: 0 rem(12)
+    color: $grey-dark
+
+  &:last-child
+    &:after
+      content: ''
+      display: none
+
+    a
+      color: $primary-color
+
+  a
+    display: inline-block
+    color: $grey-dark
+
+    &:hover
+      color: $tertiary-color
+
+// ----------------------------------------------------------
+// STATES
+// ----------------------------------------------------------
+.breadcrumb__item--active
+  color: $primary-color

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

@@ -0,0 +1,145 @@
+.btn
+  $btn-size: rem(23)
+
+  display: inline-block
+  position: relative
+  cursor: pointer
+  margin: 0 0 rem(18) 0
+  padding: rem(7) rem(12) rem(8)
+  background-color: $primary-color
+  border: rem(1) solid $primary-color
+  text-decoration: none
+  text-align: center
+  font-size: rem(18)
+  font-weight: bold
+  line-height: 1.33
+  text-transform: uppercase
+  color: $white
+  box-shadow: $grey-light rem(2) rem(2) rem(2) 0
+  +user-select(none)
+  +appearance(none)
+  +transition( all .1s ease-in-out )
+
+  .icon
+    width: $btn-size
+    height: $btn-size
+    vertical-align: top
+
+  &:hover
+    color: $white
+    background: $grey-dark
+    border-color: $grey-dark
+
+  &:active,
+  &.btn--active
+    color: $white
+    background: $black
+    border-color: $black
+    box-shadow: none
+    +transition( none)
+
+  &:focus
+    outline: 0
+
+  // ----------------------------------------------------------
+  // SECONDARY STYLE
+  // ----------------------------------------------------------
+  &--secondary
+
+    &,
+    &.btn--active
+      background-color: $white
+      box-shadow: $secondary-color rem(1) rem(1) rem(2) 0
+
+    &,
+    &:hover
+      color: $body-font-color
+      border-color: $secondary-color
+
+    &:hover
+      background-color: $grey-light
+
+    &:active,
+    &.btn--active
+      box-shadow: none
+      background-color: $grey-light
+      color: $primary-color
+      border-color: $grey-light
+
+  // ----------------------------------------------------------
+  // TERTIARY STYLE
+  // ----------------------------------------------------------
+  &--tertiary
+
+    &,
+    &.btn--active
+      box-shadow: none
+      color: $secondary-color
+
+    &,
+    &:hover,
+    &:active,
+    &.btn--active
+      border-color: transparent
+      background-color: transparent
+
+    &:hover
+      color: $body-font-color
+
+    &:active,
+    &.btn--active
+      color: $primary-color
+
+  // ----------------------------------------------------------
+  // ONLY ICON STYLE
+  // ----------------------------------------------------------
+  &--icon
+    width: rem(40)
+    height: rem(40)
+    padding: rem(8) 0
+    background: transparent
+    border: none
+    box-shadow: none
+    color: $secondary-color
+
+    &:hover,
+    &:active
+      border-radius: 100%
+      background-color: $grey-light
+
+    &:hover
+      color: $body-font-color
+
+    &:active
+      color: $primary-color
+
+  // ----------------------------------------------------------
+  // SMALL STYLE
+  // ----------------------------------------------------------
+  &--small
+    padding-top: rem(5)
+    padding-bottom: rem(5)
+
+  // ----------------------------------------------------------
+  // EXPANDED STYLE
+  // ----------------------------------------------------------
+  &--expanded
+    width: 100%
+
+  // ----------------------------------------------------------
+  // GROUP CONTAINER
+  // ----------------------------------------------------------
+  &__group
+    position: relative
+    display: inline-block
+    vertical-align: middle
+    margin: rem(12) 0 rem(18)
+
+    > .btn
+      position: relative
+      float: left
+      margin-right: rem(1)
+      margin-bottom: rem(1)
+
+      &:last-child
+        margin-right: 0